/* =============================================================================
   AI assistant — "Ask Jeremy"
   Hero speech bubble + floating chat widget + voice input.
   Namespaced under .ai-* / #ai-assistant-root so it can't collide with the site.
   Tokens mirror the mono system (Schibsted Grotesk, #FFFFFF, ink #111111).
   ========================================================================== */

:root {
  --ai-ink: #111111;
  --ai-navy: #111111;
  --ai-navy-deep: #2E2E2E;
  --ai-muted: #4A4A4A;
  --ai-bg: #FFFFFF;
  --ai-surface: #F4F4F2;
  --ai-border: #E6E6E3;
  --ai-rec: #c0392b;
  --ai-sans: "Schibsted Grotesk", system-ui, -apple-system, sans-serif;
  --ai-voice: "Schibsted Grotesk", system-ui, -apple-system, sans-serif;
  --ai-shadow: 0 12px 40px rgba(17, 17, 17, 0.16);
  --ai-shadow-sm: 0 4px 16px rgba(17, 17, 17, 0.12);
  --ai-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

#ai-assistant-root,
#ai-assistant-root * {
  box-sizing: border-box;
}

/* ---------------------------------------------------------------- visually hidden */
.ai-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* =============================================================================
   1. Hero speech bubble (anchored next to the portrait)
   ========================================================================== */
.ai-hero, .ai-hero * { box-sizing: border-box; }

/* wrapper: the speech bubble plus the CTAs that sit below it.
   Mounted on #ai-assistant-root (top-level, non-clipped, untransformed) and
   positioned by JS in document coordinates, so it can overflow the hero and
   render OVER the sections below instead of being clipped by #title's
   overflow:hidden. */
.ai-hero {
  position: absolute;
  z-index: 9400;
  width: 240px;
  opacity: 0;
  transform: translateY(8px) scale(0.97);
  transform-origin: center right;
  transition: opacity 0.5s var(--ai-ease), transform 0.5s var(--ai-ease);
  pointer-events: none;
}
.ai-hero.ai-is-visible { opacity: 1; transform: none; pointer-events: auto; }

/* the speech bubble — white; drop-shadow wraps the whole silhouette incl. tail */
.ai-hero-bubble {
  position: relative;
  background: #fff;
  border-radius: 18px;
  padding: 20px 17px 14px;
  filter: drop-shadow(0 6px 18px rgba(17, 17, 17, 0.20));
}

/* drag handle — a grab bar at the top that signals the bubble is movable */
.ai-hero-grip {
  position: absolute;
  top: 7px; left: 50%;
  transform: translateX(-50%);
  width: 34px; height: 4px;
  border-radius: 2px;
  background: #B4B2A9;
  transition: background 0.2s var(--ai-ease), width 0.2s var(--ai-ease);
}
.ai-hero-bubble:hover .ai-hero-grip { background: var(--ai-navy); width: 38px; }
.ai-hero.ai-dragging .ai-hero-grip { background: var(--ai-navy); width: 38px; }
/* The tail points left toward his face. It sits a FIXED distance from the top
   of the bubble (not a %), so JS can anchor that point on his mouth and it stays
   put no matter how tall the bubble grows. Keep this value in sync with
   HERO_TAIL_OFFSET in ai-assistant.js. */
.ai-hero-bubble::after {
  content: "";
  position: absolute;
  right: -11px;
  top: 34px;
  width: 0; height: 0;
  border: 11px solid transparent;
  border-right: 0;
  border-left: 13px solid #fff;
  transform: translateY(-50%);
}
.ai-hero-bubble-text {
  font-family: var(--ai-voice);
  font-size: 17px;
  line-height: 1.45;
  color: var(--ai-ink);
  margin: 0;
  padding-right: 14px;
  text-align: left;
  /* max-height is set by JS to fit the hero in the photo; scroll past that */
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.ai-hero-bubble-text::-webkit-scrollbar { width: 6px; }
.ai-hero-bubble-text::-webkit-scrollbar-thumb { background: var(--ai-border); border-radius: 3px; }

/* blinking caret shown while words are being revealed in time with speech */
.ai-cursor {
  display: inline-block; width: 2px; height: 1em;
  vertical-align: -2px; margin-left: 1px;
  background: var(--ai-navy);
  animation: ai-blink 1s steps(2, start) infinite;
}
@keyframes ai-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* typing dots shown in the bubble while Jeremy is "thinking" */
.ai-hero-typing { display: none; gap: 4px; align-items: center; height: 18px; }
.ai-hero-bubble.ai-thinking .ai-hero-bubble-text { display: none; }
.ai-hero-bubble.ai-thinking .ai-hero-typing { display: flex; }
.ai-hero-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ai-muted); opacity: 0.5; animation: ai-bounce 1.2s infinite;
}
.ai-hero-typing span:nth-child(2) { animation-delay: 0.15s; }
.ai-hero-typing span:nth-child(3) { animation-delay: 0.3s; }
/* dismiss button — a circle that sits OUTSIDE the bubble's top-right corner */
.ai-hero-close {
  position: absolute;
  top: -11px; right: -11px;
  width: 32px; height: 32px;   /* min 32px desktop tap target (44px on coarse pointers, below) */
  border: none; border-radius: 50%;
  background: #fff; color: var(--ai-muted);
  font-size: 16px; line-height: 1;
  cursor: pointer; z-index: 3;
  box-shadow: 0 2px 8px rgba(17, 17, 17, 0.22);
  display: flex; align-items: center; justify-content: center;
}
.ai-hero-close:hover { color: var(--ai-ink); }

/* the bubble is the drag handle */
.ai-hero-bubble { cursor: grab; }
.ai-hero.ai-dragging { user-select: none; }
.ai-hero.ai-dragging .ai-hero-bubble { cursor: grabbing; }

/* CTAs flow directly below the bubble, each with its own shadow for contrast */
.ai-hero-actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px;
  margin-top: 12px;
}
.ai-mic-cta {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--ai-sans);
  font-size: 13px; font-weight: 500;
  color: #fff;
  background: var(--ai-navy);
  border: none; border-radius: 999px;
  padding: 9px 16px 9px 13px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(17, 17, 17, 0.24);
  transition: background 0.2s var(--ai-ease), transform 0.1s var(--ai-ease);
}
.ai-mic-cta:hover { background: var(--ai-navy-deep); }
.ai-mic-cta:active { transform: scale(0.97); }
.ai-mic-cta svg { width: 15px; height: 15px; }

.ai-hero-ask {
  font-family: var(--ai-sans);
  font-size: 13px; font-weight: 500;
  color: var(--ai-navy);
  background: #fff;
  border: none; border-radius: 999px;
  padding: 9px 16px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(17, 17, 17, 0.16);
  transition: color 0.2s var(--ai-ease), transform 0.1s var(--ai-ease);
}
.ai-hero-ask:hover { color: var(--ai-ink); }
.ai-hero-ask:active { transform: scale(0.97); }

/* ---- active inline-chat mode (swaps the idle CTAs for chips + input) ---- */
.ai-hero.ai-active { width: 340px; }
.ai-hero-chat { display: none; margin-top: 12px; }
.ai-hero.ai-active .ai-hero-actions { display: none; }
.ai-hero.ai-active .ai-hero-chat { display: block; }

/* AI-suggested follow-ups — stacked to the right so they hug the white space */
.ai-hero-suggestions {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  margin-bottom: 10px;
}
.ai-hero-suggestions .ai-chip {
  background: #fff;
  border-color: transparent;
  box-shadow: 0 3px 12px rgba(17, 17, 17, 0.14);
  text-align: left;
}
.ai-hero-input { cursor: text; }

.ai-hero-input-row {
  display: flex; align-items: center; gap: 6px;
  background: #fff;
  border-radius: 999px;
  padding: 5px 6px;
  box-shadow: 0 4px 14px rgba(17, 17, 17, 0.18);
}
.ai-hero-input {
  flex: 1; min-width: 0;
  border: none; background: transparent;
  font-family: var(--ai-sans); font-size: 13px; color: var(--ai-ink);
}
.ai-hero-input:focus:not(:focus-visible) { outline: none; }   /* the pill row shows focus instead (below) */
.ai-hero-input-row:focus-within { box-shadow: 0 4px 14px rgba(17, 17, 17, 0.18), 0 0 0 2px #121212; }
.ai-hero-input::placeholder { color: var(--ai-muted); }
.ai-hero-mini-btn {
  width: 30px; height: 30px; flex-shrink: 0;
  border: none; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.1s var(--ai-ease), background 0.2s var(--ai-ease);
}
.ai-hero-mini-btn:active { transform: scale(0.94); }
.ai-hero-mini-btn svg { width: 15px; height: 15px; }
.ai-hero-mic { background: var(--ai-surface); color: var(--ai-navy); }
.ai-hero-mic:hover { background: #ECECE9; }
.ai-hero-mic.ai-recording { background: var(--ai-rec); color: #fff; animation: ai-pulse 1.2s infinite; }
.ai-hero-mic.ai-speaking { background: var(--ai-navy); color: #fff; animation: ai-pulse-navy 1.2s infinite; }
.ai-hero-send { background: var(--ai-navy); color: #fff; }
.ai-hero-send:hover { background: var(--ai-navy-deep); }

/* =============================================================================
   2. Floating launcher (collapsed state)
   ========================================================================== */
.ai-launcher {
  position: fixed;
  right: 24px; bottom: 24px;
  z-index: 9500;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--ai-bg);
  border: 1px solid var(--ai-border);
  border-radius: 999px;
  box-shadow: var(--ai-shadow-sm);
  padding: 8px 18px 8px 8px;
  min-height: 44px;   /* always a comfortable tap target */
  cursor: pointer;
  font-family: var(--ai-sans);
  transform: translateY(0);
  /* visibility flips instantly on show; on hide it waits for the slide-out (below) */
  transition: transform 0.3s var(--ai-ease), box-shadow 0.3s var(--ai-ease), opacity 0.3s var(--ai-ease), visibility 0s linear 0s;
}
.ai-launcher:hover { transform: translateY(-2px); box-shadow: var(--ai-shadow); }
.ai-launcher:focus-visible { outline: 2px solid #121212; outline-offset: 3px; }
/* tucked away below the viewport — slides up into place when revealed.
   visibility:hidden keeps it out of the tab order while hidden. */
.ai-launcher.ai-hidden {
  opacity: 0; transform: translateY(150%); pointer-events: none; visibility: hidden;
  transition: transform 0.3s var(--ai-ease), box-shadow 0.3s var(--ai-ease), opacity 0.3s var(--ai-ease), visibility 0s linear 0.3s;
}
/* Static stand-in rendered by ai-assistant-loader.js before the real script
   arrives: the same pill, with a plain dark disc (a faint soma dot, no canvas)
   where the neuron avatar will draw. */
.ai-launcher-stub .ai-launcher-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--ai-ink);
}
.ai-launcher-stub .ai-launcher-avatar::after {
  content: ""; width: 28px; height: 28px; border-radius: 50%;
  background: radial-gradient(circle at 44% 56%, rgba(255, 255, 255, 0.85) 0, rgba(255, 255, 255, 0.18) 22%, rgba(255, 255, 255, 0) 60%);
}

/* First-visit welcome nudge: a small speech bubble that GENIES up out of the
   launcher — starts pinched at the launcher's mouth (narrow, sheared, low),
   stretches up with a springy overshoot, and reverses away on dismissal. */
.ai-nudge {
  position: fixed; right: 24px; bottom: 86px; z-index: 9499;
  max-width: 236px; padding: 12px 14px;
  background: var(--ai-ink); color: #fff;
  /* thin light border so the ink bubble separates from dark imagery behind it */
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 14px 14px 4px 14px;
  font-family: var(--ai-sans); font-size: 13px; line-height: 1.5;
  text-align: left; cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  transform-origin: 88% 120%;
  transform: translateY(22px) scale(0.08, 0.28) skewX(-10deg);
  opacity: 0;
  transition: transform 0.55s cubic-bezier(0.18, 1.35, 0.32, 1), opacity 0.3s ease;
}
.ai-nudge.ai-nudge-in { transform: none; opacity: 1; }
.ai-nudge.ai-nudge-out {
  transform: translateY(22px) scale(0.08, 0.28) skewX(10deg);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.55, -0.2, 0.7, 0.4), opacity 0.32s ease 0.06s;
}
.ai-nudge:hover { filter: brightness(1.12); }
.ai-nudge:focus-visible { outline: 2px solid #121212; outline-offset: 3px; box-shadow: 0 0 0 4px #fff, 0 10px 30px rgba(0, 0, 0, 0.28); }
@media (max-width: 640px) {
  .ai-nudge { right: 16px; bottom: 82px; max-width: 210px; }
  /* Mentorship page: its sticky booking bar lifts the launcher — lift the nudge too. */
  body.mt-sticky-shown .ai-nudge { bottom: calc(82px + 70px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .ai-nudge { transform: none; transition: opacity 0.2s ease; }
  .ai-nudge.ai-nudge-out { transform: none; }
}

.ai-launcher-avatar {
  position: relative;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--ai-ink);   /* ink disc — the neuron draws white on it */
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0;
}
.ai-launcher-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.ai-launcher-avatar span { color: #fff; font-size: 14px; font-weight: 500; letter-spacing: 0.02em; }

/* Neuron avatar canvas (replaces the "JA" text) — fills the ink circle. */
.ai-avatar-canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; display: block; }

.ai-launcher-text { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.ai-launcher-title { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: var(--ai-ink); }
.ai-launcher-sub { font-size: 12px; color: var(--ai-muted); }

/* =============================================================================
   3. Chat panel (expanded state)
   ========================================================================== */
.ai-panel {
  position: fixed;
  right: 24px; bottom: 24px;
  z-index: 9600;
  width: 430px;
  max-width: calc(100vw - 32px);
  min-height: min(540px, 80vh);
  max-height: min(720px, calc(100vh - 48px));
  display: none;
  flex-direction: column;
  background: var(--ai-bg);
  border: 1px solid var(--ai-border);
  border-radius: 18px;
  box-shadow: var(--ai-shadow);
  overflow: hidden;
  transform-origin: bottom right;   /* grow out of / collapse toward the launcher */
}
.ai-panel.ai-open {
  display: flex;
  animation: ai-rise 0.34s var(--ai-ease);
}
.ai-panel.ai-closing {
  display: flex;
  animation: ai-sink 0.26s var(--ai-ease) forwards;
}

.ai-panel-header {
  display: flex; align-items: center; gap: 11px;
  padding: 14px 16px;
  background: var(--ai-surface);
  border-bottom: 1px solid var(--ai-border);
  flex-shrink: 0;
}
.ai-panel-avatar {
  position: relative;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--ai-ink); flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.ai-panel-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.ai-panel-avatar span { color: #fff; font-size: 14px; font-weight: 500; }
.ai-panel-id { flex: 1; min-width: 0; font-family: var(--ai-sans); text-align: center; }
.ai-panel-name { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--ai-ink); margin: 0; }
.ai-panel-meta { font-size: 12px; color: var(--ai-muted); margin: 1px 0 0; }
.ai-panel-close, .ai-panel-sound, .ai-panel-hist {
  width: 32px; height: 32px; border: none; background: transparent;   /* 32px desktop, 44px coarse (see tap targets) */
  color: var(--ai-muted); cursor: pointer; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ai-panel-close:hover, .ai-panel-sound:hover, .ai-panel-hist:hover { background: var(--ai-bg); color: var(--ai-ink); }
.ai-panel-close:focus-visible, .ai-panel-sound:focus-visible, .ai-panel-hist:focus-visible,
.ai-hist-close:focus-visible, .ai-hist-backbtn:focus-visible, .ai-hist-item:focus-visible { outline: 2px solid #121212; outline-offset: 2px; }
.ai-panel-close svg { width: 18px; height: 18px; }
.ai-panel-sound svg, .ai-panel-hist svg { width: 17px; height: 17px; }

/* messages */
.ai-messages {
  flex: 1; overflow-y: auto;
  padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
  scroll-behavior: smooth;
}
.ai-msg { display: flex; gap: 8px; align-items: flex-end; max-width: 100%; }
.ai-msg-avatar {
  position: relative;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--ai-ink); flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.ai-msg-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ai-msg-avatar span { color: #fff; font-size: 12px; font-weight: 500; letter-spacing: -0.02em; }   /* 12px floor */
.ai-bubble {
  border-radius: 14px;
  padding: 10px 13px;
  font-size: 15px; line-height: 1.55;
  max-width: 82%;
  text-align: left;
  word-wrap: break-word; overflow-wrap: break-word;
}
.ai-msg-assistant .ai-bubble {
  background: var(--ai-surface);
  color: var(--ai-ink);
  font-family: var(--ai-voice);
  border-bottom-left-radius: 4px;
}
.ai-msg-user .ai-bubble {
  background: var(--ai-navy);
  color: #fff;
  font-family: var(--ai-sans);
  border-bottom-left-radius: 4px;
}
.ai-msg-user .ai-msg-avatar { background: var(--ai-surface); }
.ai-msg-user .ai-msg-avatar span { color: var(--ai-muted); }

.ai-bubble p { margin: 0 0 8px; }
.ai-bubble p:last-child { margin: 0; }
.ai-bubble a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* Booking links render as buttons: the one action a paying visitor is here for. */
.ai-bubble a.ai-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 10px 16px; margin: 6px 6px 2px 0;
  background: #121212; color: #fff; text-decoration: none;
  border-radius: 10px; font-weight: 600; font-size: 14px; line-height: 1.2;
  box-sizing: border-box; max-width: 100%;
}
.ai-bubble a.ai-cta::after { content: "\2197"; font-size: 13px; opacity: .8; }
.ai-bubble a.ai-cta:hover { background: #2a2a2a; }
.ai-bubble a.ai-cta:focus-visible { outline: 3px solid #121212; outline-offset: 2px; }
.ai-bubble p:has(> a.ai-cta:only-child) { margin: 4px 0; }

/* Soft hedge shown under a low-confidence answer. */
.ai-conf-note {
  margin-top: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(217, 83, 79, 0.10);
  border-left: 3px solid #d9534f;
  font-size: 0.82em;
  line-height: 1.4;
  color: #8a2f2b;
}
.ai-conf-note a { color: inherit; }

/* Small centered note recording a brain-poke in the transcript (no user bubble —
   the poke wasn't something the visitor said). */
.ai-poke-note {
  font-family: var(--ai-sans); font-style: italic; font-size: 12px;
  color: var(--ai-muted); opacity: 0.75; text-align: center; margin: 2px 0 6px;
}

/* Past-conversations view: an overlay inside the panel listing closed chats by
   date, time and topic; entries open a read-only transcript. */
.ai-hist {
  position: absolute; inset: 0; z-index: 5;
  background: var(--ai-bg);
  border-radius: 18px;
  display: flex; flex-direction: column;
  overflow: hidden;
  font-family: var(--ai-sans);
}
.ai-hist-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--ai-border);
  flex-shrink: 0;
}
.ai-hist-close, .ai-hist-backbtn {
  width: 32px; height: 32px; padding: 6px; border: 0; border-radius: 8px;
  background: transparent; color: var(--ai-muted); cursor: pointer;
}
.ai-hist-close:hover, .ai-hist-backbtn:hover { background: rgba(17, 17, 17, 0.06); color: var(--ai-ink); }
.ai-hist-close svg, .ai-hist-backbtn svg { width: 100%; height: 100%; }
.ai-hist-title { margin: 0; font-size: 14px; font-weight: 700; color: var(--ai-ink); }
.ai-hist-sub { margin: 1px 0 0; font-size: 12px; color: var(--ai-muted); }
.ai-hist-empty { padding: 28px 22px; font-size: 13px; line-height: 1.5; color: var(--ai-muted); }
.ai-hist-list { overflow-y: auto; padding: 10px 12px 18px; }
.ai-hist-day {
  margin: 14px 6px 6px; font-size: 12px; font-weight: 700;   /* 12px floor */
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ai-muted);
}
.ai-hist-item {
  display: flex; flex-direction: column; gap: 2px; width: 100%;
  padding: 10px 12px; margin: 0 0 6px;
  background: transparent; border: 1px solid var(--ai-border); border-radius: 12px;
  cursor: pointer; text-align: left; font-family: var(--ai-sans);
}
.ai-hist-item:hover { background: rgba(17, 17, 17, 0.04); }
.ai-hist-topic {
  font-size: 13px; font-weight: 600; color: var(--ai-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ai-hist-meta { font-size: 12px; color: var(--ai-muted); }
.ai-hist-msgs { overflow-y: auto; padding: 14px 16px 20px; display: flex; flex-direction: column; gap: 10px; }
/* Transcript bubbles reuse the chat look, minus avatars. */
.ai-hist-msgs .ai-msg { display: flex; }
.ai-hist-msgs .ai-msg-user { justify-content: flex-end; }
.ai-hist-msgs .ai-bubble { max-width: 85%; }

/* "Connect with the real Jeremy" verify card (in-chat editable form). */
.ai-contact-row, .ai-note-row { align-items: flex-start; }
.ai-contact-card {
  flex: 1; min-width: 0;
  background: var(--ai-surface);
  border: 1px solid var(--ai-border);
  border-radius: 14px;
  padding: 12px 13px;
  font-family: var(--ai-sans);
}
.ai-cc-title { margin: 0 0 9px; font-size: 13px; font-weight: 600; color: var(--ai-ink); }
.ai-cc-field { display: block; margin: 0 0 8px; }
.ai-cc-field > span { display: block; font-size: 12px; color: var(--ai-muted); margin: 0 0 3px; }
.ai-cc-field > span em { font-style: normal; opacity: 0.7; }
.ai-cc-field input, .ai-cc-field textarea {
  width: 100%; box-sizing: border-box;
  font-family: var(--ai-sans); font-size: 13px; color: var(--ai-ink);
  background: var(--ai-bg); border: 1px solid var(--ai-border); border-radius: 8px;
  padding: 7px 9px; resize: none;
}
.ai-cc-field input:focus, .ai-cc-field textarea:focus { border-color: var(--ai-navy); }
.ai-cc-field input:focus:not(:focus-visible), .ai-cc-field textarea:focus:not(:focus-visible) { outline: none; }
.ai-cc-field input:focus-visible, .ai-cc-field textarea:focus-visible { outline: 2px solid #121212; outline-offset: 2px; }
.ai-cc-actions button:focus-visible, .ai-survey-actions button:focus-visible,
.ai-mic-retry:focus-visible, .ai-mic-type:focus-visible { outline: 2px solid #121212; outline-offset: 2px; }
.ai-cc-error { margin: 0 0 8px; font-size: 12px; color: var(--ai-rec); }
.ai-cc-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 2px; }
.ai-cc-actions button {
  font-family: var(--ai-sans); font-size: 13px; font-weight: 500;
  border-radius: 999px; padding: 7px 15px; cursor: pointer; border: 1px solid var(--ai-border);
  transition: background 0.2s var(--ai-ease);
}
.ai-cc-cancel { background: transparent; color: var(--ai-muted); }
.ai-cc-cancel:hover { background: var(--ai-bg); color: var(--ai-ink); }
.ai-cc-confirm { background: var(--ai-navy); color: #fff; border-color: var(--ai-navy); }
.ai-cc-confirm:hover { background: var(--ai-navy-deep); }
.ai-cc-confirm:disabled { opacity: 0.5; cursor: default; }

/* End-of-chat satisfaction survey */
.ai-survey-row { align-items: flex-start; }
.ai-survey { flex: 1; min-width: 0; background: var(--ai-surface); border: 1px solid var(--ai-border); border-radius: 14px; padding: 12px 13px; font-family: var(--ai-sans); transform-origin: left bottom; animation: ai-survey-pop 0.42s var(--ai-ease) both; }
@keyframes ai-survey-pop {
  0%   { opacity: 0; transform: scale(0.9) translateY(8px); }
  60%  { opacity: 1; transform: scale(1.02) translateY(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.ai-survey-title { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--ai-ink); }
.ai-stars { display: flex; gap: 4px; margin: 0 0 9px; }
/* Unselected star: #858585 on the #F4F4F2 survey surface ≈ 3.3:1 (was the
   near-invisible border grey). Min 32px tap target; 44px on coarse pointers. */
.ai-star { background: none; border: none; cursor: pointer; font-size: 24px; line-height: 1; color: #858585; padding: 0 2px; min-width: 32px; min-height: 32px; border-radius: 6px; transition: color 0.12s var(--ai-ease), transform 0.1s var(--ai-ease); }
.ai-star:hover { transform: scale(1.15); }
.ai-star.is-on { color: #111111; }
.ai-star:focus-visible { outline: 2px solid #121212; outline-offset: 1px; }
.ai-survey-comment { width: 100%; box-sizing: border-box; font-family: var(--ai-sans); font-size: 13px; color: var(--ai-ink); background: var(--ai-bg); border: 1px solid var(--ai-border); border-radius: 8px; padding: 7px 9px; resize: none; margin: 0 0 9px; }
.ai-survey-comment:focus { border-color: var(--ai-navy); }
.ai-survey-comment:focus:not(:focus-visible) { outline: none; }
.ai-survey-comment:focus-visible { outline: 2px solid #121212; outline-offset: 2px; }
.ai-survey-actions { display: flex; gap: 8px; justify-content: flex-end; }
.ai-survey-actions button { font-family: var(--ai-sans); font-size: 13px; font-weight: 500; border-radius: 999px; padding: 7px 15px; cursor: pointer; border: 1px solid var(--ai-border); }
.ai-survey-skip { background: transparent; color: var(--ai-muted); }
.ai-survey-skip:hover { background: var(--ai-bg); color: var(--ai-ink); }
.ai-survey-send { background: var(--ai-navy); color: #fff; border-color: var(--ai-navy); }
.ai-survey-send:hover { background: var(--ai-navy-deep); }
.ai-survey-send:disabled { opacity: 0.5; cursor: default; }

/* "Feedback saved" receipt shown after a survey submit. */
.ai-receipt-row { align-items: flex-start; }
.ai-receipt { flex: 1; min-width: 0; background: var(--ai-surface); border: 1px solid var(--ai-border); border-radius: 14px; padding: 10px 13px; font-family: var(--ai-sans); }
.ai-receipt-title { margin: 0 0 5px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ai-muted); }
.ai-receipt-stars { font-size: 16px; color: var(--ai-border); letter-spacing: 1px; }
.ai-receipt-stars .on { color: #111111; }
.ai-receipt-num { font-size: 12px; color: var(--ai-muted); margin-left: 6px; letter-spacing: 0; }
.ai-receipt-comment { margin: 5px 0 0; font-size: 13px; font-style: normal; color: #2E2E2E; }

/* typing indicator */
.ai-typing { display: inline-flex; gap: 4px; align-items: center; }
.ai-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ai-muted); opacity: 0.5;
  animation: ai-bounce 1.2s infinite;
}
.ai-typing span:nth-child(2) { animation-delay: 0.15s; }
.ai-typing span:nth-child(3) { animation-delay: 0.3s; }

/* suggestion chips */
.ai-suggestions { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 4px; }
.ai-chip {
  font-family: var(--ai-sans);
  font-size: 12.5px; color: var(--ai-navy);
  background: var(--ai-bg);
  border: 1px solid var(--ai-border);
  border-radius: 999px;
  padding: 6px 12px; cursor: pointer;
  min-height: 32px;   /* desktop tap target; 44px on coarse pointers via padding (see tap targets) */
  transition: border-color 0.2s var(--ai-ease), background 0.2s var(--ai-ease);
}
.ai-chip:hover { border-color: var(--ai-navy); background: var(--ai-surface); }
.ai-chip:focus-visible { outline: 2px solid #121212; outline-offset: 2px; }

/* context tag (which page we're on) */
.ai-context-tag {
  display: inline-flex; align-items: center; gap: 5px;
  align-self: flex-start;
  font-family: var(--ai-sans); font-size: 12px; color: var(--ai-muted);
  background: var(--ai-surface);
  border: 1px solid var(--ai-border);
  border-radius: 6px; padding: 3px 8px; margin-bottom: 2px;
}
.ai-context-tag svg { width: 12px; height: 12px; }

/* preview badge */
.ai-preview-badge {
  font-family: var(--ai-sans); font-size: 12px; font-weight: 500;   /* 12px floor */
  color: #6b5412; background: #fbf2da; border: 1px solid #f0e0b0;   /* ≈ 6.4:1 on the amber tint */
  border-radius: 5px; padding: 1px 6px; margin-left: 6px;
}

/* input row */
.ai-input-wrap {
  flex-shrink: 0;
  border-top: 1px solid var(--ai-border);
  padding: 12px 14px 14px;
  background: var(--ai-bg);
}
.ai-input-row { display: flex; align-items: flex-end; gap: 8px; }
.ai-input {
  flex: 1;
  /* 16px keeps iOS Safari from auto-zooming the page when the field is focused. */
  font-family: var(--ai-sans); font-size: 16px; color: var(--ai-ink);
  background: var(--ai-surface);
  border: 1px solid var(--ai-border);
  border-radius: 12px;
  padding: 9px 42px 9px 12px;   /* right pad clears the inline mic icon */
  resize: none; max-height: 120px; line-height: 1.4;
  /* No native scrollbar (and its ▲▼ stepper buttons) until the text actually
     exceeds the cap — JS flips this to auto in autoGrow when needed. */
  overflow-y: hidden;
  scrollbar-width: thin;
  transition: border-color 0.2s var(--ai-ease);
}
.ai-input:focus { border-color: var(--ai-navy); }
.ai-input:focus:not(:focus-visible) { outline: none; }   /* pointer focus: border only */
.ai-input:focus-visible { outline: 2px solid #121212; outline-offset: 2px; }   /* keyboard focus ring */
.ai-input::placeholder { color: var(--ai-muted); }
/* Thin modern scrollbar (no stepper arrows) for the rare long message. */
.ai-input::-webkit-scrollbar { width: 7px; }
.ai-input::-webkit-scrollbar-thumb { background: var(--ai-border); border-radius: 4px; }
.ai-input::-webkit-scrollbar-button { display: none; height: 0; }

/* iOS-style live waveform shown over the input while dictating. Matches the
   active mic button's look: solid red field, white oscillating bars. */
.ai-input-field { position: relative; flex: 1; min-width: 0; display: flex; }
.ai-wave {
  position: absolute; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  gap: 2px; padding: 0 12px;
  background: var(--ai-rec);
  border-radius: 12px;
  pointer-events: none; overflow: hidden;
}
.ai-panel.ai-dictating .ai-wave { display: flex; }
.ai-wave span {
  width: 2px; height: 14%;
  background: #fff; border-radius: 2px;
  animation: ai-wave-osc 0.85s ease-in-out infinite;
}
@keyframes ai-wave-osc {
  0%, 100% { height: 12%; opacity: 0.55; }
  50%      { height: var(--mh, 68%); opacity: 1; }
}
/* When mic input is driving the bars, JS sets heights inline — disable the
   synthetic keyframe and let the heights ease between audio frames. */
.ai-wave-reactive span { animation: none; opacity: 1; transition: height 0.07s linear; }
@media (prefers-reduced-motion: reduce) {
  .ai-wave span { animation-duration: 1.6s; }
}

.ai-icon-btn {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s var(--ai-ease), transform 0.1s var(--ai-ease);
}
.ai-icon-btn svg { width: 18px; height: 18px; }
.ai-icon-btn:active { transform: scale(0.94); }
.ai-icon-btn:focus-visible, .ai-mic-btn:focus-visible, .ai-live-end:focus-visible,
.ai-hero-mini-btn:focus-visible, .ai-mic-cta:focus-visible, .ai-hero-ask:focus-visible, .ai-hero-close:focus-visible { outline: 2px solid #121212; outline-offset: 2px; }
.ai-live-end:focus-visible, .ai-panel.ai-live-on .ai-panel-close:focus-visible,
.ai-panel.ai-live-on .ai-panel-sound:focus-visible, .ai-panel.ai-live-on .ai-panel-hist:focus-visible { outline-color: #fff; }   /* on the black live stage */

/* Mic lives INSIDE the text field on the right edge — borderless icon, no circle. */
.ai-mic-btn {
  position: absolute; right: 4px; bottom: 4px;
  width: 32px; height: 32px; padding: 0;   /* 32px desktop; 44px on coarse pointers */
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: var(--ai-muted); z-index: 2;
  transition: color 0.15s var(--ai-ease), transform 0.1s var(--ai-ease);
}
.ai-mic-btn svg { width: 18px; height: 18px; }
.ai-mic-btn:hover { color: var(--ai-navy); }
.ai-mic-btn:active { transform: scale(0.9); }
.ai-mic-btn.ai-recording { color: #fff; }   /* visible atop the red wave overlay */
.ai-mic-btn.ai-speaking { color: var(--ai-navy); }
.ai-mic-btn.ai-unsupported { display: none; }

.ai-send-btn { background: var(--ai-navy); color: #fff; }
.ai-send-btn:hover { background: var(--ai-navy-deep); }
.ai-send-btn:disabled { opacity: 0.4; cursor: default; }

.ai-disclaimer {
  font-family: var(--ai-sans); font-size: 12px; color: var(--ai-muted);   /* 12px floor */
  text-align: center; margin: 8px 0 0;
}

/* live transcript preview while recording */
.ai-interim {
  font-family: var(--ai-sans); font-size: 12px; color: var(--ai-muted);
  font-style: normal; padding: 0 2px 6px; min-height: 0;
}

/* =============================================================================
   Animations
   ========================================================================== */
@keyframes ai-rise { from { opacity: 0; transform: translateY(18px) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes ai-sink { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(14px) scale(0.9); } }
@keyframes ai-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0.4); } 50% { box-shadow: 0 0 0 6px rgba(192, 57, 43, 0); } }
@keyframes ai-pulse-navy { 0%, 100% { box-shadow: 0 0 0 0 rgba(17, 17, 17, 0.4); } 50% { box-shadow: 0 0 0 6px rgba(42, 58, 92, 0); } }
@keyframes ai-bounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-4px); } }

@media (prefers-reduced-motion: reduce) {
  #ai-assistant-root *, .ai-hero, .ai-launcher, .ai-panel { animation: none !important; transition: opacity 0.2s linear !important; }
}

/* =============================================================================
   Responsive — phones: full-width sheet
   ========================================================================== */
@media (max-width: 600px) {
  .ai-launcher { right: 16px; bottom: 16px; padding: 7px 14px 7px 7px; }
  .ai-launcher-sub { display: none; }
  .ai-panel {
    right: 0; left: 0; bottom: 0;
    width: 100%; max-width: 100%;
    /* dvh tracks the real visible height as browser chrome shows/hides; vh is the fallback */
    min-height: min(540px, 80vh);
    min-height: min(540px, 80dvh);
    max-height: 88vh;
    max-height: 88dvh;
    padding-bottom: env(safe-area-inset-bottom, 0px);   /* clear the home indicator */
    border-radius: 18px 18px 0 0;
    border-bottom: none;
  }
  .ai-messages { overscroll-behavior: contain; }   /* don't scroll the page behind the sheet */
  .ai-hero { width: 220px; }
}
/* The open phone sheet is modal — the page behind it must not scroll
   (class toggled by openPanel/closePanel, under 600px only). */
body.ai-sheet-open { overflow: hidden; }

/* =============================================================================
   Tap targets — 44px on touch (coarse) pointers; desktop sizes stay compact
   ========================================================================== */
@media (pointer: coarse) {
  .ai-chip { min-height: 44px; padding: 10px 14px; }                   /* taller via padding, same type size */
  .ai-panel-close, .ai-panel-sound, .ai-panel-hist { width: 44px; height: 44px; }
  .ai-panel-header { gap: 4px; }                                        /* three 44px buttons still fit */
  .ai-hist-close, .ai-hist-backbtn { width: 44px; height: 44px; padding: 12px; }
  .ai-hero-close { width: 44px; height: 44px; top: -16px; right: -16px; }
  .ai-input { min-height: 44px; }                                       /* room for the 44px in-field mic */
  .ai-mic-btn { width: 44px; height: 44px; right: 0; bottom: 0; }
  .ai-input-field .ai-input { padding-right: 46px; }
  .ai-icon-btn { width: 44px; height: 44px; }
  .ai-live-btn { min-width: 44px; }
  .ai-star { min-width: 44px; min-height: 44px; }
  .ai-stars { gap: 0; }
  .ai-launcher { min-height: 48px; }
}

/* =============================================================================
   Live voice mode — the "talk to me" experience (orb + synced caption)
   ========================================================================== */
/* the Live button stands apart from the gray dictation mic */
/* Labeled pill (icon + "Live") so it's obvious it starts a voice conversation. */
.ai-live-btn { background: var(--ai-navy); color: #fff; width: auto; min-width: 38px; padding: 0 14px; gap: 6px; border-radius: 999px; }
.ai-live-btn:hover { background: var(--ai-navy-deep); }
.ai-live-label { font-family: var(--ai-sans); font-size: 13px; font-weight: 500; letter-spacing: 0.01em; }

.ai-live {
  position: absolute; inset: 0; z-index: 6;
  display: none;
  /* Status / caption / End sit at the BOTTOM over the field (the header floats
     at the top); the bright center of the field shows between them. */
  flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 14px; padding: 28px 24px 26px;
  border-radius: 18px;
  overflow: hidden;   /* clip the full-bleed neuron field to the panel's rounded corners */
  /* Black stage — the neuron field spreads across it, brightest at the center. */
  background: #000;
  text-align: center;
  /* origin for the grow-out reveal (set per-launch in JS to the Live button). */
  --ai-live-x: 50%; --ai-live-y: 92%;
}
/* The mic notice / connect card read best centered, not dropped to the bottom. */
.ai-live.ai-live-carding, .ai-live.ai-live-asking { justify-content: center; }

/* Float the panel header (avatar chip + name + Digital clone + close/mute) ABOVE
   the black field during live mode — transparent, light-on-dark — instead of
   letting the full-bleed overlay bury it. */
.ai-panel.ai-live-on .ai-panel-header {
  position: relative; z-index: 7;
  background: transparent; border-bottom-color: transparent;
}
/* The header neuron chip is redundant during live mode — the whole field is the
   same neurons — so hide it; the name stays centered, close/mute on the right. */
.ai-panel.ai-live-on .ai-panel-avatar { display: none; }
.ai-panel.ai-live-on .ai-panel-name { color: #fff; }
.ai-panel.ai-live-on .ai-panel-meta { color: rgba(255, 255, 255, 0.5); }
/* Balance the header: sound toggle moves to the LEFT of the centered name, with
   close on the right — so the name/title sit truly centered. */
.ai-panel.ai-live-on .ai-panel-sound { order: -1; }
.ai-panel.ai-live-on .ai-panel-close,
.ai-panel.ai-live-on .ai-panel-sound,
.ai-panel.ai-live-on .ai-panel-hist { color: rgba(255, 255, 255, 0.55); }
.ai-panel.ai-live-on .ai-panel-close:hover,
.ai-panel.ai-live-on .ai-panel-sound:hover,
.ai-panel.ai-live-on .ai-panel-hist:hover { background: rgba(255, 255, 255, 0.10); color: #fff; }
/* Grow-out reveal (clip-path circle) from the Live button until it fills the panel. */
.ai-panel.ai-live-on .ai-live {
  display: flex;
  animation: ai-live-reveal 0.6s var(--ai-ease);
}
.ai-panel.ai-live-on .ai-orb { animation: ai-orb-fade 0.7s var(--ai-ease); }
@keyframes ai-live-reveal {
  from { clip-path: circle(0% at var(--ai-live-x) var(--ai-live-y)); opacity: 0.35; }
  to   { clip-path: circle(150% at var(--ai-live-x) var(--ai-live-y)); opacity: 1; }
}
@keyframes ai-orb-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .ai-panel.ai-live-on .ai-live,
  .ai-panel.ai-live-on .ai-orb { animation: none; }
}

/* The live "orb" is now a FULL-BLEED neuron field filling the black panel,
   behind the status/caption/End controls. Same renderer + state grammar as the
   avatars (createNeuronField). */
.ai-orb {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
}
/* The field is poke-able: grab a cell body and drag — spring physics.
   touch-action:none so a touch drag drives the neurons instead of scrolling. */
.ai-orb-canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.ai-orb-canvas.ai-grabbing { cursor: grabbing; }

/* Live controls sit ABOVE the field (light-on-dark). */
.ai-live-readout, .ai-live-card, .ai-live-end { position: relative; z-index: 1; }
/* Transparent grouping container — the dark backing lives only on the caption
   (the transcript), NOT behind the status label or the empty area around it. */
.ai-live-readout {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  width: 100%; max-width: 344px;
}
.ai-live.ai-live-carding .ai-live-readout { display: none; }   /* the card/notice replaces it */
.ai-live-status {
  font-family: var(--ai-sans); font-size: 13px; letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.62); margin: 0;
  min-height: 1.45em;   /* never collapses when empty — keeps the layout from shifting */
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9);   /* legible on the field (no backing panel behind it) */
}
/* Transcript panel: a translucent dark backing that HUGS the printed text —
   grows with it up to a cap, then scrolls; gone entirely when there's no
   transcript. It never spans the full area, only sits behind the words. */
.ai-live-caption {
  font-family: var(--ai-voice); font-size: 17px; line-height: 1.5;
  color: rgba(255, 255, 255, 0.94); margin: 0;
  width: fit-content; max-width: min(100%, 320px); max-height: 132px; overflow-y: auto;
  padding: 10px 16px; border-radius: 12px;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  scrollbar-width: thin; overscroll-behavior: contain; text-align: center;
}
.ai-live-caption:empty { display: none; }   /* no box while there's no transcript */
.ai-live-caption::-webkit-scrollbar { width: 6px; }
.ai-live-caption::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.22); border-radius: 3px; }
.ai-live-end {
  margin-top: 4px;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--ai-sans); font-size: 14px; font-weight: 500; color: #fff;
  background: var(--ai-rec); border: none; border-radius: 999px;
  padding: 9px 18px 9px 14px; cursor: pointer;
  transition: background 0.2s var(--ai-ease);
}
.ai-live-end svg { width: 16px; height: 16px; }
.ai-live-end:hover { background: #a8332a; }

/* Connect card shown inside live mode (replaces the orb while reviewing). */
.ai-live-card { display: none; width: 100%; max-width: 320px; }
.ai-live.ai-live-carding .ai-orb,
.ai-live.ai-live-carding .ai-live-caption { display: none; }
.ai-live.ai-live-carding .ai-live-card { display: block; }
.ai-live-card .ai-contact-card { width: 100%; box-sizing: border-box; text-align: left; }

/* Microphone-permission request shown in the live overlay — a friendly, centered
   ask (mic mark + question + two choices), not an error card. */
/* The mic notice sits on the black live stage (the field is hidden while it
   shows), so it reads light-on-dark. */
.ai-mic-notice { width: 100%; text-align: center; position: relative; z-index: 1; }
.ai-mic-notice-icon {
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
}
.ai-mic-notice-icon svg { width: 20px; height: 20px; }
.ai-mic-notice-title {
  font-family: var(--ai-sans); font-size: 17px; font-weight: 700; letter-spacing: -0.01em;
  color: #fff; margin: 0 0 8px;
}
.ai-mic-notice-body {
  font-family: var(--ai-sans); font-size: 13px; line-height: 1.55;
  color: rgba(255, 255, 255, 0.62); margin: 0 auto 16px; max-width: 300px;
}
.ai-mic-notice-body strong { color: #fff; font-weight: 600; }
.ai-mic-notice-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
/* While asking, the End button below the card is redundant ("I'll type instead"
   is the graceful exit) — hide it. */
.ai-live.ai-live-asking .ai-live-end { display: none; }
.ai-mic-retry, .ai-mic-type {
  font-family: var(--ai-sans); font-size: 13px; font-weight: 500;
  border-radius: 999px; padding: 8px 16px; cursor: pointer;
  transition: background 0.2s var(--ai-ease), color 0.2s var(--ai-ease), border-color 0.2s var(--ai-ease);
}
.ai-mic-retry { background: #fff; color: var(--ai-ink); border: none; }
.ai-mic-retry:hover { background: rgba(255, 255, 255, 0.85); }
.ai-mic-type { background: transparent; color: rgba(255, 255, 255, 0.6); border: 1px solid rgba(255, 255, 255, 0.25); }
.ai-mic-type:hover { color: #fff; border-color: rgba(255, 255, 255, 0.5); }

/* ---- "true colors" easter egg: rotating colors blast the whole panel ----
   A rainbow gradient screen-blended over the UI: every dark pixel (bubbles,
   the Live button, text, avatar discs, the live orb backdrop) takes on the
   color while white stays white, so the layout stays readable. The class is
   added/removed by triggerBloom() in ai-assistant.js. */
.ai-panel::after {
  content: "";
  position: absolute; inset: 0; z-index: 80;
  background: linear-gradient(125deg, #ff005d, #ff9a00, #ffe600, #00d26a, #00b3ff, #7b2dff, #ff005d);
  mix-blend-mode: screen;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.ai-panel.ai-blooming::after {
  opacity: 0.55;
  animation: ai-bloom-hue 3.2s linear infinite;
}
@keyframes ai-bloom-hue {
  from { filter: hue-rotate(0deg); }
  to   { filter: hue-rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ai-panel.ai-blooming::after { animation: none; }  /* static rainbow, no spin */
}

/* ---- admin model-testing switcher (?modeltest=1; server flag aiModelTesting) ---- */
.ai-modelbar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 14px;
  background: var(--ai-surface);
  border-bottom: 1px solid var(--ai-border);
  font-family: var(--ai-sans);
  flex-shrink: 0;
}
.ai-modelbar-label { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ai-muted); }   /* 12px floor */
.ai-model-pill {
  font-size: 12px; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--ai-border); background: var(--ai-bg);
  color: var(--ai-ink); cursor: pointer;
}
.ai-model-pill.ai-on { background: var(--ai-ink); color: #fff; border-color: var(--ai-ink); }
.ai-model-status { margin-left: auto; font-size: 12px; color: var(--ai-muted); }
.ai-model-pill:focus-visible { outline: 2px solid #121212; outline-offset: 2px; }