/* The chat window: a floating button at the bottom left, opposite the WhatsApp button that opens a small chat (full screen on phones).
   Uses the site's colour names, so it follows light and dark mode. */

.chat-launcher {
  position: fixed; z-index: 56;
  left: max(16px, env(safe-area-inset-left)); bottom: calc(max(16px, env(safe-area-inset-bottom)) + 3px);   /* bottom-left, level with the WhatsApp button on the right (58px tall vs 52px) */
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-width: 52px; height: 52px; padding: 0; border: 0; border-radius: 2px;
  background: var(--sun); color: #0B1636; cursor: pointer; box-shadow: 0 8px 24px rgba(6, 18, 54, .32);
  font: 700 .78rem/1 var(--label); letter-spacing: .14em; text-transform: uppercase;
}
.chat-launcher:hover { background: #fff; }
.chat-launcher:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
.chat-launcher svg { width: 26px; height: 26px; }
.chat-launcher-text { display: none; }
@media (min-width: 1040px) {
  .chat-launcher { padding: 0 20px 0 16px; }
  .chat-launcher-text { display: inline; }
}
.chat-open .chat-launcher, .chat-open .wa-float { display: none; }   /* the open window takes their place, so it never covers the menu */

.chat-panel {
  position: fixed; z-index: 90; left: 0; right: 0; top: 0; bottom: 0; display: flex; flex-direction: column;
  background: var(--surface); color: var(--ink); overflow: hidden; overscroll-behavior: contain;
}
.chat-panel[hidden] { display: none; }
@media (min-width: 760px) {
  .chat-panel {
    left: 16px; top: auto; right: auto; bottom: 16px; width: 400px; height: min(620px, calc(100vh - 130px));   /* stops below the top menu */
    border-radius: 4px; border-top: 4px solid var(--sun); box-shadow: 0 24px 60px rgba(6, 18, 54, .4);
  }
}
html.chat-open, html.chat-open body { overflow: hidden; }
@media (min-width: 760px) { html.chat-open, html.chat-open body { overflow: visible; } }

.chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; background: var(--hero); color: #fff; flex: none; }
.chat-avatar { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border: 1px solid rgba(255, 201, 60, .6); border-radius: 2px; }
.chat-avatar svg { width: 22px; height: 22px; }
.chat-head-text { flex: 1; min-width: 0; }
.chat-head h2 { font: 600 1.15rem/1.2 var(--display); color: #fff; margin: 0; letter-spacing: 0; }
.chat-head p { margin: 2px 0 0; font-size: .8rem; line-height: 1.35; color: #C9D8F5; text-align: left; }
.chat-close { width: 48px; height: 48px; flex: none; border: 1px solid rgba(255, 255, 255, .35); border-radius: 2px; background: transparent; color: #fff; font: 400 1.7rem/1 var(--text); cursor: pointer; }
.chat-close:hover { background: #fff; color: var(--hero); }
.chat-head :focus-visible, .chat-panel .chat-send:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }

.chat-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; background: var(--ground); overscroll-behavior: contain; }
.chat-row { display: flex; flex-direction: column; gap: 8px; max-width: 88%; }
.chat-row.from-user { align-self: flex-end; align-items: flex-end; }
.chat-row.from-bot { align-self: flex-start; align-items: flex-start; }
.chat-bubble { padding: 10px 14px; border-radius: 4px; font-size: .96rem; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; text-align: left; }
.from-bot .chat-bubble { background: var(--surface); border: 1px solid var(--line); border-top-left-radius: 0; color: var(--ink); }
.from-user .chat-bubble { background: var(--btn-bg); color: var(--btn-fg); border-top-right-radius: 0; }
.chat-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.chat-action {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--ink); border-radius: 2px;
  background: var(--surface); color: var(--ink); text-decoration: none; font: 700 .72rem/1.2 var(--label); letter-spacing: .1em; text-transform: uppercase;
}
.chat-action:hover { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }
.chat-typing { display: inline-flex; gap: 5px; align-items: center; min-height: 40px; }
.chat-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); opacity: .5; }
@media (prefers-reduced-motion: no-preference) {
  .chat-typing span { animation: dot 1s infinite ease-in-out; }
  .chat-typing span:nth-child(2) { animation-delay: .15s; }
  .chat-typing span:nth-child(3) { animation-delay: .3s; }
  @keyframes dot { 0%, 80%, 100% { opacity: .3; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }
  .chat-row { animation: pop .25s ease-out both; }
  @keyframes pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

/* The ten questions: wrapped under the greeting at first, then a sideways-scrolling row of the ones not asked yet */
.chat-chip {
  min-height: 44px; padding: 8px 14px; border: 1.5px solid var(--accent); border-radius: 2px; background: var(--surface); color: var(--ink);
  cursor: pointer; font: 600 .88rem/1.25 var(--text); text-align: left;
}
.chat-chip:hover { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }
.chat-faq { display: flex; flex-wrap: wrap; gap: 8px; max-width: 100%; }
.chat-chips {
  display: flex; gap: 8px; padding: 0 16px 12px; background: var(--ground); flex: none; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}
.chat-chips[hidden] { display: none; }
.chat-chips .chat-chip { flex: none; white-space: nowrap; scroll-snap-align: start; }

.chat-form { display: flex; gap: 8px; padding: 12px 12px 8px; background: var(--surface); border-top: 1px solid var(--line); flex: none; }
.chat-form input { flex: 1; min-width: 0; min-height: 48px; padding: 0 12px; font-size: 16px; background: var(--ground); color: var(--ink); border: 2px solid var(--line); border-radius: 2px; }   /* 16px stops phones zooming in when you tap the box */
.chat-form input:focus-visible { outline: var(--focus); outline-offset: 2px; }
.chat-send { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border: 0; border-radius: 2px; background: var(--btn-bg); color: var(--btn-fg); cursor: pointer; }
.chat-send:hover { background: var(--btn-hover-bg); color: var(--btn-hover-fg); }
.chat-send svg { width: 22px; height: 22px; }
.chat-note { margin: 0; padding: 0 14px calc(10px + env(safe-area-inset-bottom)); background: var(--surface); font-size: .78rem; color: var(--ink-2); text-align: left; flex: none; }
@media (min-width: 760px) { .chat-note { padding-bottom: 10px; } }
@media print { .chat-launcher, .chat-panel { display: none !important; } }