/* =====================================================================
   AI chat widget — floating launcher + panel.
   Uses the global design tokens (--accent, --surface, fonts, --radius)
   defined in styles.css. Markup is injected by js/chat.js.
   ===================================================================== */

.aichat { position: fixed; right: 24px; bottom: 24px; z-index: 120; }

/* ---------- launcher ---------- */
.aichat__launcher {
  width: 56px; height: 56px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; font-size: 22px;
  color: #06222b; background: var(--accent-fill); border: none;
  box-shadow: 0 12px 28px -10px rgba(0, 160, 204, 0.7);
  transition: transform 0.25s var(--ease), background 0.25s var(--ease), opacity 0.2s var(--ease);
}
.aichat__launcher:hover { background: var(--accent-fill-hover); transform: translateY(-2px); }
.aichat__bot { width: 30px; height: 30px; display: block; }
.aichat.is-open .aichat__launcher { transform: scale(0.4); opacity: 0; pointer-events: none; }

/* Quiet "I'm here" wiggle — every ~6s the icon does a quick side-to-side
   glance, then rests. Lives on the icon so it never fights the button's
   hover lift or open/close scale. */
.aichat__bot { animation: aichatWiggle 6s ease-in-out infinite; transform-origin: 50% 55%; }
.aichat.is-open .aichat__bot { animation: none; }
@keyframes aichatWiggle {
  0%, 12%, 100% { transform: rotate(0deg); }
  2%  { transform: rotate(-13deg); }
  4%  { transform: rotate(11deg); }
  6%  { transform: rotate(-9deg); }
  8%  { transform: rotate(7deg); }
  10% { transform: rotate(-3deg); }
}

/* ---------- panel ---------- */
.aichat__panel {
  position: absolute; right: 0; bottom: 0;
  width: min(380px, calc(100vw - 32px));
  height: min(560px, calc(100vh - 120px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(16px) scale(0.98);
  transform-origin: bottom right; transition: all 0.28s var(--ease);
  font-family: var(--font-reg);
}
.aichat.is-open .aichat__panel { opacity: 1; visibility: visible; transform: none; }

.aichat__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px; border-bottom: 1px solid var(--border); background: var(--surface-2);
}
.aichat__title { display: flex; align-items: center; gap: 9px; font-family: var(--font-semi); font-size: 15px; }
.aichat__dot { width: 9px; height: 9px; border-radius: 50%; background: #38d39f; box-shadow: 0 0 0 3px rgba(56, 211, 159, 0.18); }
.aichat__close {
  background: none; border: none; color: var(--muted); cursor: pointer; font-size: 17px;
  width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.aichat__close:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }

/* ---------- log ---------- */
.aichat__log {
  flex: 1; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  font-size: 14.5px; line-height: 1.6;
}
.aichat__msg {
  max-width: 86%; padding: 10px 13px; border-radius: 14px;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.aichat__msg--bot {
  align-self: flex-start; background: var(--surface-2);
  border: 1px solid var(--border-soft); border-bottom-left-radius: 5px;
}
.aichat__msg--user {
  align-self: flex-end; background: var(--accent-soft);
  border: 1px solid rgba(0, 160, 204, 0.35); border-bottom-right-radius: 5px;
}
.aichat__msg a { color: var(--accent); text-decoration: underline; }

/* suggested starter questions */
.aichat__suggest { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.aichat__suggest-label {
  font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted);
  margin-top: 2px;
}
.aichat__chip {
  max-width: 86%; text-align: left; cursor: pointer;
  padding: 9px 13px; border-radius: 14px; border-bottom-left-radius: 5px;
  font: inherit; font-size: 14px; line-height: 1.4;
  color: var(--accent); background: var(--accent-soft);
  border: 1px solid rgba(0, 160, 204, 0.35);
  transition: background 0.2s var(--ease), transform 0.2s var(--ease), border-color 0.2s var(--ease);
}
.aichat__chip:hover { background: rgba(0, 160, 204, 0.18); border-color: var(--accent); transform: translateY(-1px); }

/* typing indicator */
.aichat__typing { display: inline-flex; gap: 5px; align-items: center; }
.aichat__typing span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--muted);
  animation: aichatBlink 1.2s infinite ease-in-out;
}
.aichat__typing span:nth-child(2) { animation-delay: 0.18s; }
.aichat__typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes aichatBlink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }

/* ---------- note + input ---------- */
.aichat__note {
  margin: 0; padding: 8px 16px; font-size: 11.5px; line-height: 1.5;
  color: var(--muted-2); border-top: 1px solid var(--border-soft);
}
.aichat__note a { color: var(--accent); }

.aichat__form { display: flex; gap: 8px; padding: 12px 14px 14px; border-top: 1px solid var(--border); }
.aichat__input {
  flex: 1; min-width: 0; padding: 11px 14px; border-radius: 22px;
  background: var(--bg-alt); border: 1px solid var(--border); color: var(--text);
  font-family: var(--font-reg); font-size: 14px; outline: none;
  transition: border-color 0.2s var(--ease);
}
.aichat__input:focus { border-color: var(--accent); }
.aichat__input:disabled { opacity: 0.6; }
.aichat__send {
  flex: none; width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--accent-fill); color: #06222b; font-size: 15px; display: grid; place-items: center;
  transition: background 0.2s var(--ease);
}
.aichat__send:hover { background: var(--accent-fill-hover); }
.aichat__send:disabled { opacity: 0.5; cursor: default; }

.aichat__log::-webkit-scrollbar { width: 8px; }
.aichat__log::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }

/* ---------- responsive: phone = bottom sheet ---------- */
@media (max-width: 480px) {
  /* Keep the launcher clear of the home indicator. */
  .aichat { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); }

  /* Pin the panel to the VISUAL viewport (vars set by chat.js): bottom rises
     with the keyboard, height tracks the visible area. Falls back to 100dvh
     where visualViewport is unavailable. height/bottom must NOT transition or
     they'd lag the keyboard, so we narrow the transition to opacity+transform. */
  .aichat__panel {
    position: fixed; left: 0; right: 0; top: auto;
    bottom: var(--aichat-kb, 0px);
    width: 100%;
    height: 100vh;                      /* fallback */
    height: var(--aichat-vh, 100dvh);
    max-height: var(--aichat-vh, 100dvh);
    border-radius: 18px 18px 0 0;
    transform-origin: bottom center;
    transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
  }
  /* Clear the notch up top and the home indicator down by the input. */
  .aichat__head { padding-top: calc(13px + env(safe-area-inset-top)); }
  .aichat__form { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }

  /* 16px input → iOS Safari won't auto-zoom (and shove the panel off-screen)
     when the field gains focus. Bigger, thumb-friendly send button too. */
  .aichat__input { font-size: 16px; }
  .aichat__send { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .aichat__launcher, .aichat__panel, .aichat__send,
  .aichat__close, .aichat__input, .aichat__chip { transition: none; }
  .aichat__typing span { animation: none; }
  .aichat__bot { animation: none; }
}

/* ---------- booking wizard ---------- */
.aibook__form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.aibook__input {
  flex: 1 1 100%; min-width: 0; padding: 9px 12px; border-radius: 10px;
  background: var(--bg-alt); border: 1px solid var(--border); color: var(--text);
  font-family: var(--font-reg); font-size: 14px; outline: none;
  transition: border-color 0.2s var(--ease);
}
.aibook__input:focus { border-color: var(--accent); }
.aibook__input:disabled { opacity: 0.6; }
.aibook__code { flex: 1 1 auto; text-align: center; letter-spacing: 0.4em; font-size: 18px; }
.aibook__note { resize: vertical; min-height: 4.5em; line-height: 1.4; }
.aibook__btn {
  flex: 0 0 auto; padding: 9px 16px; border-radius: 10px; border: none; cursor: pointer;
  background: var(--accent-fill); color: #06222b; font-family: var(--font-semi); font-size: 13.5px;
  transition: background 0.2s var(--ease);
}
.aibook__btn:hover { background: var(--accent-fill-hover); }
.aibook__btn:disabled { opacity: 0.7; cursor: default; }
.aibook__link {
  flex: 1 1 100%; text-align: left; background: none; border: none; cursor: pointer;
  color: var(--accent); font: inherit; font-size: 12.5px; padding: 2px 0; text-decoration: underline;
}
.aibook__err { flex: 1 1 100%; margin: 2px 0 0; color: var(--danger, #d64550); font-size: 12.5px; }
.aibook__line { margin-bottom: 2px; }
.aibook__tz { color: var(--muted); font-size: 12.5px; }

.aibook__slots { margin-top: 10px; }
.aibook__label {
  display: block; margin-bottom: 6px; font-size: 11px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--muted);
}
.aibook__opt { text-transform: none; letter-spacing: 0; opacity: 0.7; }
.aibook__topic {
  width: 100%; box-sizing: border-box; margin-bottom: 16px; font: inherit; font-size: 13.5px;
  color: var(--text); background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 12px;
}
.aibook__topic::placeholder { color: var(--muted); opacity: 0.7; }
.aibook__topic:focus { outline: none; border-color: var(--accent); }
.aibook__dayfield { position: relative; margin-bottom: 14px; }
.aibook__daysel {
  width: 100%; appearance: none; -webkit-appearance: none; font: inherit; font-size: 13.5px;
  cursor: pointer; color: var(--text); background: var(--accent-soft);
  border: 1px solid rgba(0, 160, 204, 0.30); border-radius: 10px; padding: 10px 34px 10px 12px;
}
.aibook__daysel option { color: var(--text); background: var(--surface); }
.aibook__dayfield::after {
  content: ""; position: absolute; right: 15px; top: 50%; width: 7px; height: 7px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: translateY(-65%) rotate(45deg); pointer-events: none;
}
.aibook__group {
  margin: 0 0 7px; font-size: 11px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--muted);
}
.aibook__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 14px; }
.aibook__row:last-child { margin-bottom: 0; }
.aibook__slot {
  cursor: pointer; padding: 8px 0; border-radius: 10px; font: inherit; font-size: 13.5px; text-align: center;
  color: var(--accent); background: var(--accent-soft); border: 1px solid rgba(0, 160, 204, 0.35);
  transition: background 0.2s var(--ease), transform 0.2s var(--ease), border-color 0.2s var(--ease);
}
.aibook__slot:hover { background: rgba(0, 160, 204, 0.18); border-color: var(--accent); transform: translateY(-1px); }
.aibook__slot:disabled { opacity: 0.45; cursor: default; transform: none; }
.aibook__slot.is-chosen { background: var(--accent-fill); color: #06222b; border-color: var(--accent-fill); opacity: 1; }

/* greeting "Schedule a call" CTA chip */
.aichat__chip--book { background: var(--accent-fill); color: #06222b; border-color: var(--accent-fill); font-family: var(--font-semi); }
.aichat__chip--book:hover { background: var(--accent-fill-hover); border-color: var(--accent-fill-hover); transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce) {
  .aibook__slot, .aibook__btn, .aibook__input { transition: none; }
}