/* ==========================================================================
   FAQ ASSISTANT — bottom-right launcher and panel
   ========================================================================== */

.chat {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 240;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .75rem;
  /* The wrapper must not swallow clicks on the page behind it */
  pointer-events: none;
}
.chat > * { pointer-events: auto; }

/* --------------------------------------------------------------------------
   LAUNCHER
   -------------------------------------------------------------------------- */
.chat-launcher {
  position: relative;
  order: 2;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background: var(--ink); color: var(--white);
  box-shadow: var(--shadow-float);
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-med) var(--ease-expo);
}
.chat-launcher:hover { background: var(--breeze); transform: translateY(-2px); }
.chat-launcher svg { grid-area: 1 / 1; transition: opacity var(--dur-fast) var(--ease-out),
                                                   transform var(--dur-med) var(--ease-expo); }
.chat-launcher__close { opacity: 0; transform: rotate(-45deg); }
.chat-launcher[aria-expanded="true"] .chat-launcher__open { opacity: 0; transform: rotate(45deg); }
.chat-launcher[aria-expanded="true"] .chat-launcher__close { opacity: 1; transform: rotate(0); }

.chat-badge {
  position: absolute; top: 10px; right: 10px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--breeze-w);
  box-shadow: 0 0 0 2px var(--ink);
}

/* --------------------------------------------------------------------------
   PANEL
   -------------------------------------------------------------------------- */
.chat-panel {
  order: 1;
  width: min(370px, calc(100vw - 2rem));
  max-height: min(560px, calc(100vh - 8rem));
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--g100);
  box-shadow: var(--shadow-drawer);
  opacity: 0; visibility: hidden;
  transform: translateY(12px) scale(.98);
  transform-origin: bottom right;
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-med) var(--ease-expo),
              visibility var(--dur-med);
}
.chat-panel.is-open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }

.chat-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 1.25rem;
  background: var(--ink); color: var(--white);
}
.chat-head__title { font-size: .62rem; letter-spacing: .24em; text-transform: uppercase; }
.chat-head__sub { margin-top: .3rem; font-size: .78rem; color: var(--g300); }
.chat-close {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  font-size: 1.3rem; line-height: 1; color: var(--g300);
  transition: color var(--dur-fast) var(--ease-out);
}
.chat-close:hover { color: var(--white); }

.chat-log {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.25rem;
  display: flex; flex-direction: column; gap: .75rem;
  background: var(--ground);
}

/* --------------------------------------------------------------------------
   MESSAGES
   -------------------------------------------------------------------------- */
.chat-msg {
  max-width: 88%;
  padding: .8rem 1rem;
  font-size: .87rem; line-height: 1.65;
  animation: chatIn .32s var(--ease-out) both;
}
@keyframes chatIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.no-motion .chat-msg { animation: none; }

.chat-msg--bot  { align-self: flex-start; background: var(--white); border: 1px solid var(--g100); }
.chat-msg--user { align-self: flex-end; background: var(--breeze); color: var(--white); }
.chat-msg p + p { margin-top: .6rem; }

.chat-links { display: flex; flex-direction: column; gap: .4rem; margin-top: .85rem; }
.chat-link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--breeze);
  transition: gap var(--dur-med) var(--ease-expo);
}
.chat-link:hover { gap: .7rem; text-decoration: underline; text-underline-offset: 3px; }

/* Suggested follow-ups */
.chat-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chat-chip {
  padding: .5rem .8rem;
  background: var(--white);
  border: 1px solid var(--g100);
  font-size: .76rem; line-height: 1.3;
  text-align: left;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.chat-chip:hover { border-color: var(--breeze); color: var(--breeze); }

/* Typing indicator */
.chat-typing { display: inline-flex; gap: 4px; padding: .15rem 0; }
.chat-typing i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--g300);
  animation: chatDot 1.1s infinite ease-in-out;
}
.chat-typing i:nth-child(2) { animation-delay: .15s; }
.chat-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes chatDot {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%           { opacity: 1;  transform: translateY(-3px); }
}

/* --------------------------------------------------------------------------
   INPUT
   -------------------------------------------------------------------------- */
.chat-form {
  display: flex; gap: .5rem;
  padding: .85rem;
  background: var(--white);
  border-top: 1px solid var(--g100);
}
.chat-form input {
  flex: 1; min-width: 0;
  padding: .7rem .85rem;
  background: var(--ground);
  border: 1px solid var(--g100);
  border-radius: 0;
  font-size: .87rem; font-weight: 300;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.chat-form input:focus { outline: none; border-color: var(--breeze); }
.chat-form button {
  flex: none;
  width: 42px;
  display: grid; place-items: center;
  background: var(--ink); color: var(--white);
  transition: background var(--dur-fast) var(--ease-out);
}
.chat-form button:hover { background: var(--breeze); }

/* --------------------------------------------------------------------------
   MOBILE
   The panel becomes a near-full sheet; the launcher lifts clear of the
   browser chrome and any sticky footer CTA.
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .chat { right: 1rem; bottom: 1rem; left: 1rem; align-items: flex-end; }
  .chat-panel { width: 100%; max-height: min(70vh, 520px); }
  .chat-launcher { width: 52px; height: 52px; }
}

/* The toast shares this corner — lift it above the launcher so they never
   sit on top of each other. */
.toast { bottom: calc(2rem + 68px); }
@media (max-width: 560px) { .toast { bottom: calc(1rem + 64px); } }