/* ════════════════════════════════════════════════════════════════════════
   /chat — the page a visitor lands on to talk to FG in words.

   It was written with a palette of its own: a background two points off the
   site's, an ink two points off, a blue of its own (#82a9ff against the
   system's #8BB4FF), a mint that exists nowhere else, and the red
   DESIGN-SYSTEM.md §2.2 names by file and line as a known divergence — the
   palette has no red. None of it was a decision; it is what the page was
   started with before there was a system to start from. Tokens are §2.1 now,
   and the one warm colour of §2.2 carries the errors.
   ════════════════════════════════════════════════════════════════════════ */
:root {
  color-scheme: dark;
  /* Past the top and bottom of the page when a phone is pulled past them
     (chrome.css §2.1a). Measured: first row #0D0E12, last #05060A. The
     theme-color in index.html carries the same value. */
  --edge: #090A0E;
  --bg: #0A0B0F;
  --panel: #12151a;
  --panel-raised: #191d23;
  --panel-input: #171b24;
  --ink: #EAEEF7;
  /* §2.4: .66 is the floor for a paragraph meant to be read and .56 for
     anything else with words in it. This ran .58/.34 — and the second level
     carried the keyboard hint, the timestamps and the "live" strip. */
  --muted: rgba(234, 238, 247, .66);
  --faint: rgba(234, 238, 247, .56);
  --blue: #8BB4FF;
  --blue-soft: #CEDFFE;
  --mint: #7fd99b;
  --warm: #F0A878;
  --line: rgba(234, 238, 247, .1);
  --line-blue: rgba(139, 180, 255, .2);
  --sans: "Instrument Sans", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", ui-monospace, Consolas, monospace;
  --ease: cubic-bezier(.22, .61, .36, 1);
  /* Three radii, not nine. The page ran 4, 5, 9, 10, 11, 13, 17, 18, 19 and
     21 — one per element, none of them chosen against another. §7: a field is
     12–13, a card 16–18, a raised panel 22–24. The 5px corner on a bubble is
     the speaker's tail and stays: it says which side is talking (§9). */
  --r-field: 12px;
  --r-card: 18px;
  --r-panel: 22px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; color-scheme: dark; }
body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--bg);
  font: 400 16px/1.5 var(--sans);
  letter-spacing: -.008em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, textarea { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
svg, canvas, img { display: block; }
::selection { color: #081020; background: var(--blue-soft); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 9px 13px;
  border-radius: var(--r-field);
  color: #081020;
  background: var(--blue-soft);
  transform: translateY(-150%);
  transition: transform .2s;
}
.skip-link:focus { transform: none; }

.ambient-light {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38% 44% at 50% 42%, rgba(67, 105, 190, .085), transparent 74%),
    linear-gradient(180deg, rgba(255, 255, 255, .012), transparent 22%);
}

.chat-home {
  min-height: calc(100vh - 74px);
  padding: clamp(54px, 10vh, 126px) 20px 64px;
  display: flex;
  justify-content: center;
}
.chat-stage { width: min(720px, 100%); }
.chat-title { margin: 0 0 25px 4px; display: flex; align-items: center; gap: 13px; }
.title-orb { width: 36px; height: 36px; flex: 0 0 auto; }
.title-liquid { --fg-liquid-orb-size: 36px; }
/* The h1 of an inner page, exactly as §3.1 sets it. This was the one place on
   the site still setting type in Instrument Serif — a family the design system
   reserved for the intro loader, and the intro loader is gone. */
.chat-title h1 { margin: 0; font: 600 clamp(33px, 4.8vw, 56px)/1.06 var(--sans); letter-spacing: -.025em; }
.chat-title p { margin: 6px 0 0; color: var(--muted); font-size: 14px; }

.conversation { display: grid; gap: 14px; }
.message { animation: message-in .45s var(--ease) both; }
.message-agent { width: min(620px, calc(100% - 34px)); }
.message-head { margin: 0 0 8px 3px; display: flex; align-items: center; gap: 9px; }
.message-avatar {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-blue);
  border-radius: var(--r-field);
  color: var(--blue-soft);
  background: rgba(139, 180, 255, .08);
  font: 600 10px/1 var(--mono);
  letter-spacing: -.04em;
}
.message-head > div { display: grid; gap: 3px; }
/* Who is speaking, and whether they are live. §3.1 puts a caption at
   12.5–13.5 and a mono label at 10–12; this was 11 over 8.5 — smaller than
   any type the site sets anywhere else. */
.message-head b { font: 600 12.5px/1.2 var(--sans); }
.message-head small { display: flex; align-items: center; gap: 5px; color: var(--faint); font: 500 11px/1.2 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.message-head small i { width: 4px; height: 4px; border-radius: 50%; background: var(--mint); }
.message-copy {
  padding: 18px 19px;
  border: 1px solid var(--line);
  border-radius: 5px var(--r-card) var(--r-card) var(--r-card);
  color: rgba(234, 238, 247, .88);
  background: rgba(18, 21, 26, .9);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .14);
}
.message-copy > p { margin: 0; font-size: 13.5px; line-height: 1.55; }
/* Two sentences of different weight — a greeting and a caveat — ran together as
   one block when the list that used to separate them was removed. */
.message-copy > p + p { margin-top: 11px; }
.message-prompt { color: var(--blue-soft); }

.message-user { justify-self: end; max-width: min(560px, calc(100% - 34px)); }
.message-user .message-head { justify-content: flex-end; margin-right: 3px; }
.message-user .message-head > div { text-align: right; }
.message-user .message-copy { border: 0; border-radius: var(--r-card) 5px var(--r-card) var(--r-card); color: #f5f7ff; background: linear-gradient(135deg, #3154b5, #24418f); }
.message-agent.is-reply .message-copy { padding: 15px 17px; }
.message-agent.is-reply .message-actions { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.message-actions a, .message-actions button {
  min-height: 38px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-blue);
  border-radius: 999px;
  color: var(--blue-soft);
  background: rgba(139, 180, 255, .07);
  font: 500 14px/1 var(--sans);
  letter-spacing: -.004em;
  cursor: pointer;
  transition: transform .2s cubic-bezier(.2, .8, .2, 1), background .2s, border-color .2s;
}
.message-actions a:hover, .message-actions button:hover { transform: translateY(-2px); background: rgba(139, 180, 255, .12); }
.message-actions .primary-action { color: #09101f; border-color: var(--blue-soft); background: var(--blue-soft); }
.typing-copy { width: 52px; display: flex; gap: 4px; }
.typing-copy i { width: 5px; height: 5px; border-radius: 50%; background: var(--blue); animation: typing 1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .typing-copy i { animation: none; opacity: .55; } }
.typing-copy i:nth-child(2) { animation-delay: .13s; }
.typing-copy i:nth-child(3) { animation-delay: .26s; }
@keyframes typing { 0%, 70%, 100% { opacity: .25; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-3px); } }
@keyframes message-in { from { opacity: 0; transform: translateY(8px); } }

.composer {
  position: relative;
  margin-top: 18px;
  padding: 15px 15px 11px;
  border: 1px solid rgba(234, 238, 247, .14);
  border-radius: var(--r-panel);
  background: var(--panel-input);
  box-shadow: 0 25px 70px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .025);
  transition: border-color .2s, box-shadow .2s, transform .3s var(--ease);
}
/* A 3px halo the same weight as every other focused field on the platform.
   At .055 alpha the ring existed in the stylesheet and not on the screen. */
.composer:focus-within { border-color: rgba(139, 180, 255, .5); box-shadow: 0 28px 80px rgba(0, 0, 0, .34), 0 0 0 3px rgba(58, 107, 255, .16); transform: translateY(-1px); }
.composer textarea {
  width: 100%;
  min-height: 62px;
  max-height: 180px;
  padding: 0 2px;
  resize: none;
  overflow-y: auto;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font-size: 15px;
  line-height: 1.5;
}
/* §2.4.4: a placeholder is .42, and it never stands in for a label — the
   label is there, for a screen reader, as .sr-only. */
.composer textarea::placeholder { color: rgba(234, 238, 247, .42); }
.composer textarea:disabled { opacity: .6; }
.composer-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
/* The mono label of §3.1 is 10–12px. This one was set at 8. */
.composer-note { display: flex; align-items: center; gap: 7px; color: var(--faint); font: 500 11px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .075em; }
.composer-note i { width: 5px; height: 5px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 8px rgba(127, 217, 155, .55); }
.composer-actions { display: flex; align-items: center; gap: 7px; }
/* Two icon buttons of one size and one shape. 35px is under the 38 the
   system gives a small control, and under any thumb. */
.voice-button, .send-button { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 999px; cursor: pointer; transition: color .2s, background .2s, transform .2s, opacity .2s; }
.voice-button { border: 1px solid var(--line); color: var(--muted); background: rgba(255, 255, 255, .025); }
.voice-button:hover { color: var(--blue-soft); background: rgba(139, 180, 255, .1); }
.send-button { border: 0; color: #09101f; background: var(--blue-soft); }
.send-button:hover { background: #dce8ff; transform: translateX(1px); }
.send-button:disabled { opacity: .35; cursor: not-allowed; transform: none; }
.voice-button svg, .send-button svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* §2.4.5: a form error is #F0A878, and never smaller than 12.5px. */
.input-error { position: absolute; left: 15px; bottom: -26px; margin: 0; color: var(--warm); font-size: 12.5px; line-height: 1.4; }
/* 9px at 24% opacity was below the floor the design system sets for footnotes
   (§3.1: 12.5–13.5px on --faint) by a long way — small enough that reading it
   was guesswork, which for a hint is the same as not having one. */
.keyboard-hint { margin: 16px 0 0; color: var(--faint); font-size: 12.5px; text-align: center; }
.keyboard-hint span { margin: 0 5px; }
.keyboard-hint kbd { padding: 2px 6px; border: 1px solid rgba(234, 238, 247, .12); border-radius: 6px; font: inherit; }

.voice-dialog {
  width: min(500px, calc(100vw - 28px));
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(139, 180, 255, .24);
  border-radius: var(--r-panel);
  color: var(--ink);
  background: linear-gradient(155deg, #171b22, #0d1015 84%);
  box-shadow: 0 40px 120px rgba(0, 0, 0, .72);
}
.voice-dialog::backdrop { background: rgba(3, 5, 8, .78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
/* The one close button: 32px round, 44 on a phone (§13.14). */
.dialog-close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .035); color: var(--muted); cursor: pointer; transition: background .2s, color .2s; }
.dialog-close:hover { background: rgba(139, 180, 255, .12); color: var(--ink); }
.dialog-close svg { width: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.voice-consent, .voice-session { padding: 35px; }
/* The eyebrow of §3.1: 12px, .22em, blue. It was 9px at .13em. */
.voice-kicker { margin: 0 0 15px; display: flex; align-items: center; gap: 8px; color: var(--blue); font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .22em; }
.voice-kicker span { width: 26px; height: 1px; flex: 0 0 auto; background: currentColor; }
/* A section heading (§3.1 `h2`) at the narrow end of its own clamp — the
   dialog is 420px wide, so the range simply never opens up. */
.voice-consent h2 { margin: 0; font: 500 clamp(26px, 3.4vw, 31px)/1.06 var(--sans); letter-spacing: -.035em; }
.voice-consent > p:not(.voice-kicker) { margin: 16px 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
/* §5: a button is a pill. This dialog held the only 13px-radius button on
   the platform, at a weight (650) the type scale does not have. */
.voice-start { width: 100%; min-height: 46px; margin-top: 22px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 0; border-radius: 999px; color: #09101f; background: var(--blue-soft); font: 500 15px/1 var(--sans); letter-spacing: -.004em; cursor: pointer; transition: transform .2s cubic-bezier(.2, .8, .2, 1), background .2s; }
.voice-start:hover { transform: translateY(-2px); background: #dce8ff; }
.voice-cancel { width: 100%; min-height: 38px; margin-top: 8px; border: 0; color: var(--muted); background: transparent; font-size: 13.5px; cursor: pointer; transition: color .2s; }
.voice-cancel:hover { color: var(--ink); }
.voice-session { min-height: 450px; text-align: center; }
.voice-session .voice-kicker { justify-content: center; }
.voice-visual { position: relative; width: 180px; height: 180px; margin: 22px auto 8px; display: grid; place-items: center; }
.voice-visual > i { position: absolute; inset: 10px; border: 1px solid rgba(139, 180, 255, .2); border-radius: 50%; animation: voice-ring 2.5s ease-in-out infinite; }
.voice-liquid { --fg-liquid-orb-size: 144px; transition: transform .25s, box-shadow .5s; }
.voice-visual[data-state="speaking"] .voice-liquid { transform: scale(1.06); }
@keyframes voice-ring { 50% { transform: scale(.94); opacity: .35; } }
.voice-status { margin: 0; color: var(--blue-soft); font: 600 15px/1.3 var(--sans); }
.voice-caption { min-height: 42px; max-width: 370px; margin: 8px auto 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
/* The palette has no red (§2.2). “End conversation” wears the one warm
   colour, in the shape “Revoke” and “Delete” wear in the console. */
.voice-end { min-height: 38px; margin-top: 24px; padding: 0 18px; border: 1px solid rgba(240, 168, 120, .26); border-radius: 999px; color: var(--warm); background: rgba(240, 168, 120, .06); font: 500 14px/1 var(--sans); cursor: pointer; transition: background .2s, border-color .2s; }
.voice-end:hover { background: rgba(240, 168, 120, .14); border-color: rgba(240, 168, 120, .45); }

@media (max-width: 620px) {
  /* The page was a column of content with all the leftover height dumped
     underneath it: on a phone that is a hand's width of empty page between
     the composer and the fold, and the floating launcher sits in the middle
     of it looking like part of the page. The stage takes the height instead —
     greeting at the top, composer at the bottom, and the space between them
     is where the conversation appears, which is where it goes anyway.
     svh rather than vh: vh measures the screen as though the address bar were
     hidden, so the page is always that bar taller than what you can see. */
  .chat-home { min-height: calc(100svh - 74px); padding: 42px 13px 44px; }
  .chat-stage { display: flex; flex-direction: column; }
  .chat-stage .conversation { flex: 1 0 auto; align-content: start; }
  .chat-title { margin-left: 5px; margin-bottom: 20px; }
  .chat-title h1 { font-size: 36px; }
  .message-agent { width: calc(100% - 18px); }
  .message-user { max-width: calc(100% - 22px); }
  .message-copy { padding: 16px; }
  .composer { padding: 13px 13px 10px; border-radius: var(--r-card); }
  /* The one close button is 44px where a finger uses it (§13.14). */
  .dialog-close { width: 44px; height: 44px; }
  .composer textarea { min-height: 72px; font-size: 14px; }
  .composer-note { max-width: 170px; line-height: 1.35; }
  .keyboard-hint { display: none; }
  .voice-consent, .voice-session { padding: 32px 21px 24px; }
  .voice-consent h2 { font-size: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}