/* Owner's palette (nov 2026): black page, the chat card in the brand navy (#222B4A, Brand Book AHC),
   cream text and gold accents. Type follows the official site: Playfair Display for the brand, Inter
   for text (Brand Book AHC, p. 15). One theme for every device and system setting. */
:root {
  --page: #000000;
  --navy: #1a2140;
  --gold: #cfae78;
  --bg: #222b4a;
  --surface: #2b355a;
  --surface-2: #333e66;
  --text: #f5f1e8;
  --body: #dcd6c9;
  --muted: #aeb4c8;
  --faint: #7d859f;
  --border: #3b4672;
  --user-bubble: #f3ede1;
  --user-text: #1c2340;
  --action: #cfae78;
  --action-hover: #dcbf8c;
  --action-text: #1a2140;
  --online: #5fcf8f;
  --danger: #f0a294;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 12px 32px -14px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.2);
  --ring: 0 0 0 4px rgba(207, 174, 120, 0.2);
  --radius: 20px;
  /* Motion: quick to start, long soft landing; the spring overshoots slightly, for small things only. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --ease-press: cubic-bezier(0.4, 0, 0.6, 1);
  --t-press: 90ms;   /* click feedback: 50-150 ms */
  --t-fast: 140ms;
  --t-base: 220ms;   /* message entrance: 150-250 ms */
  --t-panel: 320ms;  /* panels and cards opening: 200-400 ms */
  --t-slow: 420ms;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-brand: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --gutter: 16px;
  --column: 760px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* Component display rules must never override the hidden attribute. */
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--page);
  color: var(--text);
  font: 400 15.5px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
button { font: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
a { -webkit-tap-highlight-color: transparent; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.app {
  /* Pinned to the visible area instead of 100vh: on iPhones and in-app browsers 100vh is taller than
     what is visible and would push the composer behind the browser's bottom bar. On phones the height
     and offset follow the visual viewport (chat.js), so the keyboard never covers the composer. */
  position: fixed; top: var(--vv-top, 0px); left: 0; right: 0; height: var(--vv-height, 100%);
  display: flex; flex-direction: column; max-width: var(--column); margin: 0 auto;
  /* A cream card on the navy page at every size; the inset keeps clear of the notch and home bar. */
  --inset-top: max(10px, env(safe-area-inset-top));
  --inset-bottom: max(10px, env(safe-area-inset-bottom));
  top: calc(var(--vv-top, 0px) + var(--inset-top));
  left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right));
  height: calc(var(--vv-height, 100%) - var(--inset-top) - var(--inset-bottom));
  background: var(--bg); border-radius: 24px; overflow: hidden;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* Header */
.header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px var(--gutter);
  border-bottom: 1px solid transparent;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  position: sticky; top: 0; z-index: 2;
  transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.header.scrolled { border-bottom-color: var(--border); box-shadow: 0 8px 24px -18px rgba(0, 0, 0, 0.6); }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
/* A real face instead of an icon: warmer, closer to a person than a logo mark. */
.brand__avatar { position: relative; width: 44px; height: 44px; flex: none; }
.brand__avatar img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 30%; display: block;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px color-mix(in srgb, var(--gold) 55%, transparent), var(--shadow-sm);
  animation: fade var(--t-slow) var(--ease-out) both;
}
.brand__presence {
  position: absolute; right: 0; bottom: 0; width: 11px; height: 11px; border-radius: 50%;
  background: var(--online); border: 2px solid var(--bg);
}
.brand__text { min-width: 0; }
.brand__name { margin: 0; font: 600 19px/1.15 var(--font-brand); letter-spacing: 0.1px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand__status { margin: 3px 0 0; display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.brand__status .dot { display: none; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--online); box-shadow: 0 0 0 3px color-mix(in srgb, var(--online) 18%, transparent); }

.icon-btn {
  width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--surface); color: var(--muted); display: grid; place-items: center; cursor: pointer;
  transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), transform var(--t-slow) var(--ease-spring);
}
.icon-btn:hover { color: var(--text); border-color: var(--faint); transform: translateY(-1px); }
.icon-btn:active { transform: scale(.94); transition-duration: var(--t-press); transition-timing-function: var(--ease-press); }
.icon-btn svg { width: 18px; height: 18px; }
:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }

/* Conversation */
.scroller { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--faint) 45%, transparent) transparent; scrollbar-gutter: stable; flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 24px var(--gutter) 8px; }
.empty { text-align: center; padding: 18vh 12px 0; animation: fade var(--t-slow) var(--ease-out) both; }
.empty[hidden] { display: none; }
.empty.leaving { opacity: 0; transform: translateY(-6px) scale(.99); transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out); }
.empty__title { margin: 0 0 12px; min-height: 1.15em; font: 500 40px/1.15 var(--font-brand); color: var(--text); }
.empty__body { margin: 0 auto; max-width: 440px; min-height: 1.3em; font: 400 20px/1.3 var(--font-body); color: var(--text); text-wrap: balance; }
.empty__sub { margin: 10px auto 0; max-width: 380px; min-height: 1.6em; color: var(--muted); text-wrap: balance; }
/* Room for the longest language (body and sub on two lines each), content centred inside it, so the
   dots below never jump when a shorter language comes in. */
.greeting { display: flex; flex-direction: column; justify-content: center; min-height: 176px; }

/* Rotating greeting: letters condense out of a soft blur one by one, then drift up and dissolve. */
.greeting .ch, .greeting .wd {
  display: inline-block; white-space: pre; opacity: 0; filter: blur(10px); transform: translateY(0.35em);
  animation: ch-in 760ms var(--ease-out) forwards; animation-delay: calc(var(--i) * 48ms);
}
.greeting .wd { animation-duration: 680ms; animation-delay: calc(260ms + var(--i) * 70ms); }
.greeting.leaving .ch, .greeting.leaving .wd {
  opacity: 1; filter: none; transform: none;
  animation: ch-out 520ms cubic-bezier(0.55, 0, 0.75, 0.3) forwards; animation-delay: calc(var(--i) * 22ms);
}
.greeting.leaving .wd { animation-delay: calc(var(--i) * 30ms); }
.greeting.static .ch, .greeting.static .wd { opacity: 1; filter: none; transform: none; animation: none; }
@keyframes ch-in { to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes ch-out { to { opacity: 0; filter: blur(8px); transform: translateY(-0.3em); } }

/* Which language is showing: the active dot stretches into a small gold pill. */
.greeting__dots { display: flex; justify-content: center; gap: 6px; margin-top: 22px; }
.greeting__dots span {
  width: 5px; height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--faint) 55%, transparent);
  transition: width 600ms var(--ease-out), background-color 600ms var(--ease-out);
}
.greeting__dots span.on { width: 18px; background: var(--gold); }

.log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.row { display: flex; flex-direction: column; }
.row--user { align-items: flex-end; }
.row--agent { align-items: flex-start; }
/* Bubbles grow out of the speaker's side, so each message feels placed, not dropped. */
.row--user .bubble { transform-origin: bottom right; animation: pop var(--t-base) var(--ease-out) both; }
.row--agent .bubble { transform-origin: bottom left; animation: pop var(--t-base) var(--ease-out) both; }
.row.restored .bubble { animation: none; }
.bubble.reveal { animation: fade var(--t-base) var(--ease-out) both; }
.row + .row--user.first, .row + .row--agent.first { margin-top: 14px; }

.bubble {
  max-width: min(78%, 560px); padding: 11px 15px; border-radius: var(--radius);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.row--user .bubble { background: var(--user-bubble); color: var(--user-text); border-bottom-right-radius: 6px; }
.row--agent .bubble { background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow-sm); border-bottom-left-radius: 6px; }
.bubble a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; transition: text-decoration-color var(--t-fast) var(--ease-out); }
.bubble a:hover { text-decoration-color: currentColor; }
.bubble a.nowrap { white-space: nowrap; }
.meta { margin: 4px 6px 0; font-size: 11.5px; color: var(--faint); animation: fade var(--t-base) var(--ease-out) 80ms both; }

/* Typing indicator */
.typing { display: inline-flex; gap: 5px; align-items: center; padding: 15px 16px; }
.typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); animation: float 1.4s infinite cubic-bezier(0.45, 0, 0.55, 1); }
.typing span:nth-child(2) { animation-delay: .16s; }
.typing span:nth-child(3) { animation-delay: .32s; }

/* Reference card */
.card {
  margin-top: 8px; display: flex; align-items: center; gap: 14px;
  padding: 12px 14px 12px 16px; border-radius: 16px; max-width: min(78%, 560px);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-md);
  animation: rise var(--t-panel) var(--ease-spring) 120ms both;
}
.card__icon { animation: pop-in var(--t-panel) var(--ease-spring) 260ms both; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: var(--gold); flex: none; }
.card__icon svg { width: 18px; height: 18px; }
.card__text { display: flex; flex-direction: column; min-width: 0; }
.card__label { font-size: 12px; color: var(--muted); }
.card__code { font: 600 21px/1.2 var(--font-body); letter-spacing: 2px; font-variant-numeric: tabular-nums; color: var(--text); }
.card__copy {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 13px; cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-out), transform var(--t-slow) var(--ease-spring);
}
.card__copy:hover { border-color: var(--faint); }
.card__copy:active { transform: scale(.95); transition-duration: var(--t-press); transition-timing-function: var(--ease-press); }
.card__copy svg, .card__copy span { animation: fade var(--t-base) var(--ease-out) both; }
.card__copy svg { width: 15px; height: 15px; }

/* Debug notes (only with ?debug) */
.debug { align-self: flex-start; margin: 4px 0 0 6px; font: 12px/1.4 ui-monospace, Menlo, monospace; color: var(--muted); }

/* Error */
.error { animation: rise var(--t-base) var(--ease-out) both; align-self: center; margin-top: 12px; display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--danger); }
.error button { border: 1px solid currentColor; background: transparent; color: inherit; border-radius: 999px; padding: 4px 12px; cursor: pointer; font-size: 13px; }

/* Composer */
.composer-wrap { padding: 10px var(--gutter) 12px; background: linear-gradient(to top, var(--bg) 70%, transparent); }
.composer {
  display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 26px; box-shadow: var(--shadow-md);
  transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.composer:focus-within { border-color: color-mix(in srgb, var(--text) 22%, var(--border)); }
textarea {
  flex: 1; resize: none; border: 0; outline: none; background: transparent; color: var(--text);
  font: 400 16px/1.5 var(--font-body); padding: 9px 0; max-height: 168px; min-height: 24px;
}
textarea::placeholder { color: var(--faint); }
/* Focus shows only as a slightly darker border on the composer; no outline inside it. */
textarea, textarea:focus, textarea:focus-visible { outline: none; box-shadow: none; }
/* Mic and send share one spot and swap with a small spring, like a messaging app. */
.actions { position: relative; width: 40px; height: 40px; flex: none; }
.action {
  position: absolute; inset: 0; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
  background: var(--action); color: var(--action-text);
  transition: background var(--t-fast) var(--ease-out), opacity var(--t-base) var(--ease-out), transform var(--t-panel) var(--ease-spring);
}
.action svg { width: 19px; height: 19px; stroke-width: 2.2; transition: transform var(--t-base) var(--ease-out); }
.action:hover:not(:disabled) { background: var(--action-hover); }
.action--send:hover:not(:disabled) svg { transform: translateY(-2px); }
.action--mic:hover:not(:disabled) svg { transform: scale(1.08); }
.action:active:not(:disabled) { transform: scale(.9); transition-duration: var(--t-press); transition-timing-function: var(--ease-press); }
.action--send:disabled { opacity: .28; transform: scale(.9); cursor: default; }
.action--mic { opacity: 0; transform: scale(.5) rotate(-30deg); pointer-events: none; }
.composer.can-record .action--mic { opacity: 1; transform: none; pointer-events: auto; }
.composer.can-record .action--send { opacity: 0; transform: scale(.5) rotate(30deg); pointer-events: none; }
.action--mic:disabled { opacity: .4 !important; cursor: default; }

/* Recording bar: opens over the text field like a small panel. */
.composer { position: relative; }
.recbar {
  position: absolute; inset: 6px 52px 6px 8px; display: flex; align-items: center; gap: 10px;
  background: var(--surface); border-radius: 20px; padding: 0 6px;
  animation: panel-in var(--t-panel) var(--ease-spring) both; transform-origin: right center;
}
.recbar[hidden] { display: none; }
.composer.recording textarea { visibility: hidden; }
.recbar__cancel {
  width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--surface-2); color: var(--muted);
  display: grid; place-items: center; cursor: pointer; flex: none;
  transition: color var(--t-fast) var(--ease-out), transform var(--t-panel) var(--ease-spring);
}
.recbar__cancel:hover { color: var(--danger); }
.recbar__cancel:active { transform: scale(.9); transition-duration: var(--t-press); }
.recbar__cancel svg { width: 16px; height: 16px; }
.recbar__dot { width: 9px; height: 9px; border-radius: 50%; background: #d64545; flex: none; animation: rec-pulse 1.4s ease-in-out infinite; }
.recbar__time { font-size: 14px; font-variant-numeric: tabular-nums; color: var(--text); min-width: 36px; }
.recbar__wave { flex: 1; height: 28px; min-width: 0; }
.composer.nudge { animation: nudge 360ms var(--ease-out); }

/* Voice bubble */
.bubble.voice { min-width: 220px; padding: 9px 12px; }
.voice__player { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.voice__play {
  width: 34px; height: 34px; border-radius: 50%; border: 0; flex: none; display: grid; place-items: center; cursor: pointer;
  background: color-mix(in srgb, var(--user-text) 18%, transparent); color: var(--user-text);
  transition: transform var(--t-panel) var(--ease-spring), background var(--t-fast) var(--ease-out);
}
.voice__play:hover { background: color-mix(in srgb, var(--user-text) 26%, transparent); }
.voice__play:active { transform: scale(.9); transition-duration: var(--t-press); }
.voice__play svg { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.voice__wave { flex: 1; max-width: 200px; height: 26px; display: flex; align-items: center; justify-content: space-between; gap: 2px; }
.voice__wave span { width: 3px; flex: none; border-radius: 2px; background: color-mix(in srgb, var(--user-text) 45%, transparent); transition: background var(--t-fast) linear; }
.voice__wave span.lit { background: var(--user-text); }
.voice__time { font-size: 12px; font-variant-numeric: tabular-nums; opacity: .85; flex: none; }
.voice-restored { display: inline-flex; align-items: center; font-size: 14px; opacity: .92; }
.voice-restored__icon { display: inline-flex; margin-right: 8px; opacity: .8; }
.voice-restored__icon svg { width: 15px; height: 15px; }

/* Skeleton loading: placeholder shapes with a soft shimmer instead of an empty screen. */
.skeleton span, .sk {
  display: block; border-radius: 8px;
  background: linear-gradient(90deg, var(--sk-base) 0%, var(--sk-shine) 50%, var(--sk-base) 100%) 0 0 / 200% 100%;
  animation: shimmer 1.3s linear infinite;
}
.skeleton-rows { --sk-base: var(--surface-2); --sk-shine: var(--surface); display: flex; flex-direction: column; gap: 14px; padding-top: 8px; }
.sk { height: 52px; width: 58%; border-radius: var(--radius); }
.sk--user { align-self: flex-end; width: 42%; height: 40px; }
.sk--short { width: 34%; }

/* Contextual suggestions */
.suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 2px; }
.chip {
  border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px;
  padding: 8px 14px; font-size: 14px; cursor: pointer; box-shadow: var(--shadow-sm);
  animation: rise var(--t-base) var(--ease-out) both; animation-delay: calc(120ms + var(--i) * 50ms);
  transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out), transform var(--t-panel) var(--ease-spring);
}
.chip:hover { border-color: color-mix(in srgb, var(--action) 45%, var(--border)); transform: translateY(-1px); }
.chip:active { transform: scale(.96); transition-duration: var(--t-press); transition-timing-function: var(--ease-press); }

.card--handoff .card__code { font-size: 17px; }

.hint { margin: 8px 0 0; text-align: center; font-size: 11.5px; color: var(--faint); }
@media (hover: none) { .hint { display: none; } }

@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes pop-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes panel-in { from { opacity: 0; transform: scaleX(.92); } to { opacity: 1; transform: none; } }
@keyframes rec-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes nudge { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 60% { transform: translateX(3px); } }
@keyframes float { 0%, 100% { opacity: .35; transform: translateY(0); } 50% { opacity: .9; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* Breakpoints follow the site's own: 640, 768, 1024 (Brand Book p. 19). */

/* Phones: every pixel for the conversation, thumb-sized targets. */
@media (max-width: 639px) {
  :root { --gutter: 12px; }
  .bubble, .card { max-width: 88%; }
  .bubble { padding: 10px 14px; }
  .brand__avatar { width: 40px; height: 40px; }
  .brand__name { font-size: 17.5px; }
  .empty { padding-top: 12vh; }
  .empty__title { font-size: 34px; }
  .empty__body { font-size: 18px; }
  .greeting { min-height: 168px; }
  .card { gap: 12px; padding: 11px 12px; }
  .card__copy span { display: none; }
  .card__copy { padding: 10px; }
  .actions { width: 44px; height: 44px; }
  .recbar { inset: 6px 56px 6px 8px; }
  .bubble.voice { min-width: 220px; }
  .icon-btn { width: 44px; height: 44px; }
}
/* Phones in landscape: short screens, keep the composer and the last messages in view. */
@media (max-height: 480px) and (orientation: landscape) {
  .header { padding-top: 8px; padding-bottom: 8px; }
  .brand__status { display: none; }
  .empty { padding-top: 4vh; }
  .hint { display: none; }
}
/* Tablets: roomier gutters and type, still one comfortable column. */
@media (min-width: 640px) and (max-width: 1023px) {
  :root { --gutter: 28px; --column: 720px; }
  body { font-size: 16px; }
  .bubble { max-width: min(72%, 560px); padding: 12px 16px; }
}
/* Desktop: the column floats as a card on the page background. */
@media (min-width: 1024px) {
  :root { --gutter: 28px; }
  html, body { overflow: hidden; }
  .app { top: 24px; bottom: 24px; left: 24px; right: 24px; height: auto; border-radius: 28px; }
  .bubble { max-width: min(72%, 540px); }
}

/* Embedded in a host page (embed.js): the panel is the frame, so the app fills it edge to edge. */
.header__actions { display: flex; gap: 8px; }
html.embedded, html.embedded body { overflow: hidden; background: var(--bg); }
html.embedded .app { top: var(--vv-top, 0px); left: 0; right: 0; height: var(--vv-height, 100%); max-width: none; border-radius: 0; box-shadow: none; }
html.embedded { --gutter: 16px; }
html.embedded .hint { display: none; }
html.embedded .empty { padding-top: 16vh; }
html.embedded .empty__title { font-size: 34px; }
html.embedded .bubble, html.embedded .card { max-width: 86%; }

/* Closed page for the private preview */
.locked { min-height: 100vh; min-height: 100dvh; background: var(--bg); display: grid; place-content: center; justify-items: center; gap: 10px; padding: 24px; text-align: center; }
.locked img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px color-mix(in srgb, var(--gold) 55%, transparent); }
.locked h1 { margin: 8px 0 0; font: 600 24px/1.2 var(--font-brand); }
.locked p { margin: 0; max-width: 320px; color: var(--body); }

/* Browsers without color-mix() (Safari before 16.2): plain equivalents so nothing disappears. */
@supports not (color: color-mix(in srgb, red, blue)) {
  .header { background: var(--bg); }
  .dot { box-shadow: none; }
  .brand__avatar img { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--gold); }
  .composer:focus-within { border-color: var(--faint); }
  .bubble a { text-decoration-color: currentColor; }
  .greeting__dots span { background: var(--faint); }
  .voice__play { background: rgba(28, 35, 64, .12); }
  .voice__wave span { background: rgba(28, 35, 64, .45); }
  .chip:hover { border-color: var(--action); }
  .card__icon { background: var(--surface-2); }
  .locked img { box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--gold); }
}