/* Chat widget. Loaded on every page, so it stays small and never blocks paint. */

.chat-launcher {
  position: fixed; right: 1.25rem; bottom: 5.5rem; z-index: 150;
  display: flex; align-items: center; gap: .55rem;
  padding: .7rem 1.1rem .7rem .9rem;
  background: var(--navy-800); color: #fff;
  border: 0; border-radius: 999px; cursor: pointer;
  font: 600 .93rem/1 var(--font-body);
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, background .18s ease;
}
.chat-launcher:hover { background: var(--navy-700); transform: translateY(-2px); }
.chat-launcher:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 3px; }
.chat-launcher svg { width: 20px; height: 20px; flex-shrink: 0; }
.chat-launcher[hidden] { display: none; }

.chat-panel {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 160;
  width: min(23rem, calc(100vw - 2.5rem));
  height: min(34rem, calc(100vh - 3rem));
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow); overflow: hidden;
}
.chat-panel[hidden] { display: none; }

.chat-head {
  display: flex; align-items: center; gap: .7rem;
  padding: .9rem 1rem; background: var(--navy-800); color: #fff; flex-shrink: 0;
}
.chat-head .chat-mark {
  width: 32px; height: 32px; border-radius: 9px; background: var(--gold-500);
  color: var(--navy-900); display: grid; place-items: center;
  font: 700 1rem/1 var(--font-head); flex-shrink: 0;
}
.chat-head strong { font-size: .95rem; display: block; }
.chat-head span { font-size: .76rem; color: #b9c8da; }
.chat-head .chat-close {
  margin-left: auto; background: transparent; border: 0; color: #fff;
  font-size: 1.5rem; line-height: 1; cursor: pointer; padding: .2rem .4rem; border-radius: 6px;
}
.chat-head .chat-close:hover { background: rgba(255,255,255,.15); }
.chat-head .chat-close:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 1px; }

.chat-log {
  flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .8rem;
  background: var(--bg-soft); scroll-behavior: smooth;
}
.chat-msg { max-width: 88%; font-size: .92rem; line-height: 1.55; }
.chat-msg .bubble { padding: .65rem .85rem; border-radius: 14px; }
.chat-msg.bot  { align-self: flex-start; }
.chat-msg.bot .bubble  { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.chat-msg.user { align-self: flex-end; }
.chat-msg.user .bubble { background: var(--navy-700); color: #fff; border-bottom-right-radius: 4px; }
.chat-msg p { margin: 0 0 .5rem; }
.chat-msg p:last-child { margin-bottom: 0; }
.chat-msg strong { font-weight: 650; }
.chat-msg ul {
  margin: .3rem 0 0; padding-left: 1.15rem;
  list-style: disc;              /* the global reset strips markers */
}
.chat-msg li { margin-bottom: .25rem; }
.chat-msg li::marker { color: var(--gold-500); }

.chat-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; }
.chat-actions a {
  display: inline-block; padding: .38rem .75rem; font-size: .82rem; font-weight: 600;
  border-radius: 999px; text-decoration: none;
  border: 1px solid var(--line); background: #fff; color: var(--navy-700);
}
.chat-actions a:hover { border-color: var(--gold-500); background: var(--gold-100); }
.chat-actions a.primary { background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-900); }
.chat-actions a.primary:hover { background: var(--gold-400); }
.chat-actions a:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }

.chat-typing { display: flex; gap: .25rem; padding: .7rem .85rem; }
.chat-typing span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--muted);
  animation: chat-bounce 1.2s infinite ease-in-out;
}
.chat-typing span:nth-child(2) { animation-delay: .15s; }
.chat-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes chat-bounce { 0%,60%,100% { opacity:.3; transform: translateY(0); } 30% { opacity:1; transform: translateY(-3px); } }

.chat-form {
  display: flex; gap: .5rem; padding: .75rem; border-top: 1px solid var(--line);
  background: #fff; flex-shrink: 0;
}
.chat-form input {
  flex: 1; min-width: 0; padding: .65rem .8rem; font: inherit; font-size: .92rem;
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
}
.chat-form input:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 0; border-color: var(--gold-500); }
.chat-form button {
  flex-shrink: 0; width: 2.6rem; border: 0; border-radius: 10px;
  background: var(--navy-800); color: #fff; cursor: pointer; display: grid; place-items: center;
}
.chat-form button:hover { background: var(--navy-700); }
.chat-form button:disabled { opacity: .5; cursor: not-allowed; }
.chat-form button:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.chat-form button svg { width: 17px; height: 17px; }

.chat-note {
  font-size: .72rem; color: var(--muted); text-align: center;
  padding: 0 .75rem .6rem; background: #fff; flex-shrink: 0;
}

/* On a phone the panel takes the screen — a 23rem floating card is unusable. */
@media (max-width: 480px) {
  .chat-panel {
    right: 0; bottom: 0; width: 100vw; height: 100dvh;
    border-radius: 0; border: 0;
  }
  .chat-launcher { bottom: 5rem; right: 1rem; padding: .7rem .95rem; }
  .chat-launcher .chat-launcher-text { display: none; }   /* icon only, keeps clear of the WhatsApp button */
}

@media (prefers-reduced-motion: reduce) {
  .chat-launcher, .chat-log { transition: none; scroll-behavior: auto; }
  .chat-typing span { animation: none; opacity: .5; }
}

/* The widget is interactive furniture — never print it. */
@media print { .chat-launcher, .chat-panel { display: none !important; } }