/* ============================================================================
   Car+ — EV Digital Cluster design system (design-system-3-ev-cyan)
   Reference: a modern electric-car instrument screen — Polestar/Rivian HMI.
   Flat blue-charcoal surfaces, ice-cyan accent, a faint dot-grid page the way
   a rendered display panel reads. No texture/weave; depth = cleanly layered
   flat surfaces + 1px hairlines + a single machined top-edge highlight.
   The triage trio are display telltales: mint "OK", amber "caution",
   signal-red "stop" (the cool palette makes the red stop-lamp pop hardest).
   Type: Manrope (humanist body — the conversation) + Space Grotesk (technical
   instrument labels, tabular figures).
   Motion: transform/opacity only (one width exception: the guide progress bar).
   ============================================================================ */

:root {
  /* surfaces — flat blue-charcoal, layered by lightness (no gradients) */
  --surface-0: #0e141c;   /* page — deep blue-charcoal */
  --surface-1: #16202c;   /* cards, assistant bubbles */
  --surface-2: #1f2c3a;   /* raised controls, chips */
  --surface-3: #24344a;   /* overlays (guide, recorder bar) */
  --line: rgba(210, 230, 245, 0.10);         /* low-alpha cool hairline */
  --line-strong: rgba(210, 230, 245, 0.16);
  --top-edge: rgba(255, 255, 255, 0.05);     /* backlit-panel top highlight */

  /* ink */
  --ink: #eaf1f8;
  --ink-muted: #93a4b6;
  --ink-faint: #64768a;

  /* accent — ice cyan */
  --accent: #35c7e8;
  --accent-bright: #5fd8f2;
  --accent-ink: #08131c;                      /* text on a filled accent */
  --accent-soft: rgba(53, 199, 232, 0.14);

  /* semantic triage trio (display telltales) */
  --safe: #3fd6a4;    --safe-glow: rgba(63, 214, 164, 0.5);
  --caution: #f2b23a; --caution-glow: rgba(242, 178, 58, 0.5);
  --stop: #ff5a52;    --stop-glow: rgba(255, 90, 82, 0.6);

  /* type */
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-instrument: "Space Grotesk", "Manrope", ui-monospace, sans-serif;

  /* geometry */
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 18px;
  --radius: var(--radius-m);        /* back-compat alias */

  /* back-compat aliases so any un-restyled hook still resolves */
  --bg: var(--surface-0);
  --card: var(--surface-1);
  --muted: var(--ink-muted);

  /* motion */
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 720ms;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
}

* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font-body);
  /* flat page: faint HMI dot-grid (<=3% white) over a subtle vignette fill */
  background:
    radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1.5px) 0 0 / 22px 22px,
    radial-gradient(120% 80% at 50% -10%, #12202e 0%, var(--surface-0) 60%) fixed;
  color: var(--ink);
  font-size: 16px; line-height: 1.55; font-weight: 400;
  -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column;
}
.wrap { width: 100%; max-width: 680px; margin: 0 auto; padding: 0 16px; }

/* ---- header (NavHeader — display boot sequence) --------------------------- */
header {
  border-bottom: 1px solid var(--line);
  background: linear-gradient(var(--surface-0), rgba(14, 20, 28, 0.86));
  backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 5;
}
header .wrap { padding-top: 15px; padding-bottom: 13px; }
.wordmark {
  font-family: var(--font-instrument);
  font-size: 23px; font-weight: 600; letter-spacing: 0.01em; color: var(--ink);
  opacity: 0; animation: boot-in var(--dur-base) var(--ease-out) 60ms forwards;
}
.wordmark span { color: var(--accent); }
.tagline {
  font-family: var(--font-instrument);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-muted); margin-top: 4px;
  opacity: 0; animation: boot-in var(--dur-base) var(--ease-out) 180ms forwards;
}

main { flex: 1; overflow-y: auto; }
#chat { padding-top: 22px; padding-bottom: 26px; display: flex;
        flex-direction: column; gap: 14px; }

/* Disclaimer. PLACEHOLDER COPY — pending legal review (SPEC §4.9). */
.disclaimer {
  font-size: 13px; color: var(--ink-muted);
  background: var(--surface-1);
  border: 1px solid var(--line); border-left: 2px solid var(--accent);
  border-radius: var(--radius-m); padding: 11px 15px;
  opacity: 0; animation: boot-in var(--dur-base) var(--ease-out) 300ms forwards;
}

/* ---- bubbles (Bubble) ----------------------------------------------------- */
.bubble {
  max-width: 88%; padding: 12px 15px; border-radius: var(--radius-l);
  border: 1px solid var(--line); overflow-wrap: break-word;
  box-shadow: inset 0 1px 0 var(--top-edge);
  opacity: 0; animation: bubble-in var(--dur-base) var(--ease-out) forwards;
}
.bubble.user {
  align-self: flex-end; white-space: pre-wrap;
  background: var(--accent-soft); border-color: rgba(53, 199, 232, 0.35);
  border-bottom-right-radius: var(--radius-s); color: var(--ink);
}
.bubble.assistant {
  align-self: flex-start; background: var(--surface-1);
  border-bottom-left-radius: var(--radius-s);
}
.bubble.assistant strong { font-weight: 600; color: #fff; }
.bubble.assistant ul, .bubble.assistant ol { padding-left: 22px; margin: 6px 0; }
.bubble.assistant .seg-text + .seg-text { margin-top: 8px; }
.bubble.error {
  align-self: flex-start; background: var(--surface-1);
  border-color: var(--stop); color: var(--ink);
}
.bubble.error button {
  display: block; margin-top: 8px; border: 1px solid var(--stop);
  background: none; color: var(--stop); font: inherit; font-weight: 600;
  border-radius: var(--radius-s); padding: 6px 14px; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out);
}
.bubble.error button:active { transform: scale(0.97); }
.bubble .thumbs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.bubble .thumbs img { width: 56px; height: 56px; object-fit: cover;
                      border-radius: var(--radius-s); border: 1px solid var(--line); }

/* TypingIndicator — three cyan display dots pulsing in sequence */
.typing { display: inline-flex; gap: 6px; align-items: center; padding: 3px 2px; }
.typing i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  opacity: 0.25; animation: typing-pulse 1s var(--ease-in-out) infinite;
}
.typing i:nth-child(2) { animation-delay: 0.16s; }
.typing i:nth-child(3) { animation-delay: 0.32s; }

.hint { font-size: 13px; color: var(--ink-muted); text-align: center;
        font-family: var(--font-instrument); letter-spacing: 0.02em; }

/* ---- attachment tray ------------------------------------------------------ */
#tray { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 0 0; }
#tray .thumb { position: relative; }
#tray img { width: 64px; height: 64px; object-fit: cover;
            border-radius: var(--radius-s); border: 1px solid var(--line-strong); display: block; }
#tray button {
  position: absolute; top: -7px; right: -7px; width: 22px; height: 22px;
  border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface-2);
  color: var(--ink); font-size: 13px; line-height: 1; cursor: pointer;
}

/* ---- composer (Composer) -------------------------------------------------- */
footer {
  border-top: 1px solid var(--line);
  background: linear-gradient(rgba(14, 20, 28, 0.86), var(--surface-0));
  backdrop-filter: blur(8px);
  padding-bottom: env(safe-area-inset-bottom);
}
.composer { display: flex; align-items: flex-end; gap: 8px; padding: 12px 0 14px; }
.composer textarea {
  flex: 1; resize: none; border: 1px solid var(--line-strong); background: var(--surface-1);
  border-radius: var(--radius-m); padding: 12px 14px; font: inherit; color: var(--ink);
  max-height: 120px; min-height: 48px; outline: none;
}
.composer textarea::placeholder { color: var(--ink-faint); }
.composer textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.iconbtn {
  width: 48px; height: 48px; flex: none; border-radius: var(--radius-m);
  border: 1px solid var(--line-strong); background: var(--surface-2); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 19px; color: var(--ink); box-shadow: inset 0 1px 0 var(--top-edge);
  transition: transform var(--dur-fast) var(--ease-out);
}
.iconbtn:active { transform: scale(0.94); }
.iconbtn:disabled { opacity: 0.4; cursor: default; transform: none; }
.iconbtn.active {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
}
#sendBtn {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
  font-weight: 600;
}

/* ---- quick actions (warning-light scan entry point, T3) ------------------- */
.quickactions { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0 0; }
.quickaction {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(53, 199, 232, 0.4); background: var(--accent-soft);
  color: var(--accent-bright); font: inherit; font-weight: 600; font-size: 15px;
  border-radius: 999px; padding: 9px 16px; cursor: pointer;
  box-shadow: inset 0 1px 0 var(--top-edge);
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.quickaction:hover { border-color: var(--accent); }
.quickaction:active { transform: scale(0.96); }
.quickaction:disabled { opacity: 0.4; cursor: default; transform: none; }
.quickaction-icon { font-size: 17px; line-height: 1; }

/* ---- recorder overlay (RecorderOverlay) ----------------------------------- */
#recorder { position: fixed; inset: 0; background: rgba(6, 12, 20, 0.94);
            z-index: 20; display: flex; flex-direction: column; }
#recorder[hidden] { display: none; }
#preview { flex: 1; width: 100%; object-fit: contain; min-height: 0; }
#recBar { display: flex; align-items: center; gap: 12px; padding: 14px 16px;
          padding-bottom: calc(14px + env(safe-area-inset-bottom));
          background: var(--surface-3); border-top: 1px solid var(--line); }
#recLabel { color: var(--ink); font-size: 13px; flex: 1; }
#stopBtn { border: 0; background: var(--stop); color: #fff; font: inherit;
           font-weight: 600; border-radius: var(--radius-s); padding: 11px 22px; cursor: pointer;
           transition: transform var(--dur-fast) var(--ease-out); }
#stopBtn:active { transform: scale(0.96); }

/* ---- <options> chips (OptionChips) ---------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.chip {
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink);
  font: inherit; font-size: 15px; border-radius: 999px; padding: 9px 15px; cursor: pointer;
  box-shadow: inset 0 1px 0 var(--top-edge);
  opacity: 0; transform: scale(0.96);
  animation: chip-in var(--dur-base) var(--ease-spring) forwards;
  transition: transform var(--dur-fast) var(--ease-out);
}
.chip:nth-child(1) { animation-delay: 0ms; }
.chip:nth-child(2) { animation-delay: 45ms; }
.chip:nth-child(3) { animation-delay: 90ms; }
.chip:nth-child(4) { animation-delay: 135ms; }
.chip:nth-child(5) { animation-delay: 180ms; }
.chip:nth-child(n+6) { animation-delay: 220ms; }
.chip:active { transform: scale(0.96); }
.chip:disabled { opacity: 0.4; cursor: default; }
.chip-picked { border-color: var(--accent); color: var(--accent-bright); font-weight: 600; }

/* ---- <intake> — IntakeRail (structured-intake progress strip, T4) --------- */
/* A pinned instrument strip: a quiet row of chips reading vehicle -> symptom
   -> when -> history -> recent changes. Completed stages are accent-lit, the
   current stage is emphasised, upcoming stages are faint. Advances via
   transform/opacity only. */
.intake-rail {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin: 2px 0 14px; padding: 8px 10px;
  background: var(--surface-1); border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 var(--top-edge);
  animation: intake-rail-in var(--dur-base) var(--ease-out) both;
}
.intake-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-instrument); font-size: 12px; letter-spacing: 0.02em;
  color: var(--ink-faint); padding: 4px 10px; border-radius: 999px;
  transition: color var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-spring);
}
.intake-dot {
  width: 7px; height: 7px; border-radius: 999px; flex: none;
  background: currentColor; opacity: 0.5;
  transition: transform var(--dur-base) var(--ease-spring), opacity var(--dur-base) var(--ease-out);
}
/* upcoming — faint, receded */
.intake-upcoming { color: var(--ink-faint); opacity: 0.55; }
/* done — accent-lit, settled */
.intake-done { color: var(--accent); }
.intake-done .intake-dot { opacity: 1; }
/* current — emphasised: accent pill + brighter ink, dot pulses out slightly */
.intake-current {
  color: var(--accent-bright); font-weight: 600;
  background: var(--accent-soft);
  transform: translateY(-1px);
}
.intake-current .intake-dot { opacity: 1; transform: scale(1.35); }
@keyframes intake-rail-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* ---- <triage> — TriageGauge (signature display-telltale moment) ----------- */
.triage {
  position: relative; display: flex; gap: 15px; align-items: center; margin-top: 11px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-l);
  padding: 14px 16px; background: var(--surface-1);
  box-shadow: inset 0 1px 0 var(--top-edge);
  overflow: hidden;
}
/* telltale glow wash behind the panel — ignites with the verdict (opacity only) */
.triage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: 0; transition: opacity var(--dur-slow) var(--ease-out);
}
.triage-safe::before    { background: radial-gradient(80% 120% at 18% 50%, var(--safe-glow), transparent 60%); }
.triage-caution::before { background: radial-gradient(80% 120% at 18% 50%, var(--caution-glow), transparent 60%); }
.triage-stop::before    { background: radial-gradient(80% 120% at 18% 50%, var(--stop-glow), transparent 60%); }
.triage-live.triage-safe::before,
.triage-live.triage-caution::before { opacity: 0.16; }
.triage-live.triage-stop::before {
  opacity: 0.28;
  animation: lamp-pulse 620ms var(--ease-out) 1;  /* strongest treatment — the cool palette makes red pop */
}

.gauge { flex: none; position: relative; z-index: 1; }
.gauge svg { width: 104px; height: 60px; display: block; }
.gauge-arc { fill: none; stroke-width: 6; stroke-linecap: round; opacity: 0.22;
             transition: opacity var(--dur-base) var(--ease-out); }
.gauge-arc-safe { stroke: var(--safe); }
.gauge-arc-caution { stroke: var(--caution); }
.gauge-arc-stop { stroke: var(--stop); }
.triage-safe .gauge-arc-safe,
.triage-caution .gauge-arc-caution,
.triage-stop .gauge-arc-stop { opacity: 1; }
.gauge-needle {
  stroke: var(--ink); stroke-width: 3; transform-origin: 60px 62px;
  transform: rotate(-52deg);
  transition: transform var(--dur-slow) var(--ease-spring);
}
.triage-live .gauge-needle { transform: rotate(var(--needle-angle)); }
.gauge-pivot { fill: var(--ink); }

.triage-copy { position: relative; z-index: 1; }
.triage-kicker {
  display: block; font-family: var(--font-instrument);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-muted);
}
.triage-verdict {
  display: block; font-family: var(--font-instrument);
  font-size: 19px; font-weight: 600; margin-top: 1px;
}
.triage-safe .triage-verdict { color: var(--safe); }
.triage-caution .triage-verdict { color: var(--caution); }
.triage-stop .triage-verdict { color: var(--stop); }
.triage-detail { margin: 3px 0 0; font-size: 14px; color: var(--ink-muted); }

/* ---- <vehicle> card (VehicleCard) ----------------------------------------- */
.vehicle-card {
  margin: 11px 0 0; border: 1px solid var(--line-strong); border-radius: var(--radius-l);
  padding: 14px 16px; background: var(--surface-1); box-shadow: inset 0 1px 0 var(--top-edge);
}
.vehicle-card svg { width: 220px; max-width: 100%; height: auto; color: var(--accent); display: block; }
.vehicle-caption {
  display: block; font-family: var(--font-instrument); font-weight: 600;
  font-size: 15px; margin-top: 8px; letter-spacing: 0.01em;
}
.vehicle-note { display: block; font-size: 12px; color: var(--ink-faint); margin-top: 2px; }

/* ---- "Your car" panel (Remember my car, T6) ------------------------------- */
/* A quiet, compact instrument readout — not attention-grabbing. Sits at the top
   of the chat only when a vehicle is remembered on this device. */
.carmem {
  margin: 0 0 12px; border: 1px solid var(--line); border-radius: var(--radius-m);
  padding: 10px 12px; background: var(--surface-1);
  box-shadow: inset 0 1px 0 var(--top-edge);
}
.carmem[hidden] { display: none; }
.carmem-head {
  display: flex; align-items: baseline; gap: 8px;
}
.carmem-kicker {
  font-family: var(--font-instrument); font-size: 10px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint);
}
.carmem-title {
  font-family: var(--font-instrument); font-weight: 600; font-size: 14px;
  color: var(--ink); letter-spacing: 0.01em;
}
.carmem-forgetall {
  margin-left: auto; background: transparent; border: 1px solid var(--line);
  color: var(--ink-muted); font: inherit; font-size: 11px;
  padding: 2px 8px; border-radius: 999px; cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.carmem-forgetall:hover { color: var(--ink); border-color: var(--line-strong); }
.carmem-issues {
  list-style: none; margin: 8px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.carmem-issue {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: var(--radius-s);
  background: var(--surface-2); border: 1px solid var(--line);
}
.carmem-issue-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.carmem-issue-summary {
  font-size: 13px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.carmem-issue-date {
  font-family: var(--font-instrument); font-size: 10px; color: var(--ink-faint);
  letter-spacing: 0.04em;
}
.carmem-forget {
  flex: none; background: transparent; border: 0; color: var(--ink-faint);
  font: inherit; font-size: 11px; padding: 2px 6px; border-radius: var(--radius-s);
  cursor: pointer; transition: color var(--dur-fast) var(--ease-out);
}
.carmem-forget:hover { color: var(--stop); }
.carmem-note {
  margin: 8px 0 0; font-size: 11px; line-height: 1.5; color: var(--ink-faint);
}

/* ---- <sounds> board (SoundBoard) ------------------------------------------ */
.sounds {
  margin-top: 11px; border: 1px solid var(--line-strong); border-radius: var(--radius-l);
  padding: 14px 16px; background: var(--surface-1); box-shadow: inset 0 1px 0 var(--top-edge);
}
.sounds-caption { font-size: 13px; color: var(--ink-muted); margin-bottom: 10px; }
.sound-row, .sound-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sound-actions { margin-top: 11px; }
.sound-chip.chip-picked { border-color: var(--accent); color: var(--accent-bright); }

/* ---- <guide> launch card (GuideCard) -------------------------------------- */
.guide-card {
  display: block; width: 100%; text-align: left; margin-top: 11px;
  border: 1px solid rgba(53, 199, 232, 0.4); background: var(--accent-soft);
  border-radius: var(--radius-l); padding: 15px; font: inherit; cursor: pointer;
  box-shadow: inset 0 1px 0 var(--top-edge);
  transition: transform var(--dur-fast) var(--ease-out);
}
.guide-card:active { transform: scale(0.99); }
.guide-card-kicker {
  display: block; font-family: var(--font-instrument);
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-bright);
}
.guide-card-title { display: block; font-size: 17px; font-weight: 600; margin-top: 2px; color: #fff; }
.guide-card-meta {
  display: block; font-family: var(--font-instrument);
  font-size: 13px; color: var(--ink-muted); margin-top: 3px;
}
.guide-card-cta { display: inline-block; margin-top: 10px; font-weight: 600; color: var(--accent-bright); }

/* ---- guide walkthrough overlay (GuideOverlay) ----------------------------- */
.guide {
  position: fixed; inset: 0; z-index: 30; background: var(--surface-0);
  display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom);
  animation: overlay-in var(--dur-base) var(--ease-out);
}
.guide-head { display: flex; align-items: center; justify-content: space-between;
              gap: 10px; padding: 15px 16px; border-bottom: 1px solid var(--line); }
.guide-title { font-family: var(--font-instrument); font-weight: 600; }
.guide-close {
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink);
  font-size: 20px; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; flex: none;
  transition: transform var(--dur-fast) var(--ease-out);
}
.guide-close:active { transform: scale(0.94); }
.guide-progress { padding: 13px 16px 0; }
.guide-bar { height: 4px; border-radius: 2px; background: var(--surface-2); overflow: hidden; }
.guide-bar-fill { height: 100%; width: 0; background: var(--accent);
                  transition: width var(--dur-base) var(--ease-out); }  /* only width exception */
.guide-crumb {
  display: block; font-family: var(--font-instrument);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-muted); margin-top: 9px;
}
.guide-body { flex: 1; overflow-y: auto; padding: 20px 16px;
              animation: page-in var(--dur-base) var(--ease-out); }
.guide-h { font-size: 23px; margin-bottom: 10px; color: #fff; }
.guide-kicker { font-family: var(--font-instrument); font-size: 11px; letter-spacing: 0.2em;
                text-transform: uppercase; color: var(--accent-bright); }
.guide-step-body { font-size: 17px; }
.guide-tip { margin-top: 12px; font-size: 14px; color: var(--ink-muted);
             border-left: 2px solid var(--accent); padding-left: 12px; }
.guide-disclaimer { font-size: 14px; color: var(--ink-muted); margin-bottom: 14px; }
.guide-safety li, .guide-tools li { margin: 7px 0 7px 18px; }
.guide-meta { margin-top: 12px; color: var(--ink-muted); font-family: var(--font-instrument); }
.guide-foot { display: flex; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--line); }
.guide-back, .guide-next {
  min-height: 48px; font: inherit; font-weight: 600; border-radius: var(--radius-m);
  padding: 14px; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out);
}
.guide-back { flex: 1; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink); }
.guide-next { flex: 2; border: 0; background: var(--accent); color: var(--accent-ink); }
.guide-back:active, .guide-next:active { transform: scale(0.98); }
.guide-open, .guide-open body { overflow: hidden; }

/* ---- keyframes (transform/opacity only) ----------------------------------- */
@keyframes boot-in    { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes bubble-in  { from { opacity: 0; transform: translateY(8px) scale(0.99); } to { opacity: 1; transform: none; } }
@keyframes chip-in    { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
@keyframes typing-pulse { 0%, 100% { opacity: 0.22; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
@keyframes lamp-pulse { 0% { opacity: 0.28; } 40% { opacity: 0.5; } 100% { opacity: 0.28; } }
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes page-in    { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }

/* ---- touch-only hover polish ---------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .chip:hover, .iconbtn:hover, .guide-card:hover { border-color: var(--accent); }
  #sendBtn:hover { background: var(--accent-bright); }
}

/* ---- reduced motion: keep opacity crossfades, drop movement --------------- */
@media (prefers-reduced-motion: reduce) {
  .wordmark, .tagline, .disclaimer, .bubble, .chip, .guide, .guide-body {
    animation-duration: 200ms; animation-name: fade-only;
  }
  .typing i { animation: fade-only 1s ease infinite; }
  .gauge-needle { transition: none; }
  .triage::before { transition: none; }
  .triage-live.triage-stop::before { animation: none; }
  .guide-bar-fill { transition: none; }
  .intake-rail { animation-name: fade-only; }
  .intake-chip, .intake-dot { transition: color var(--dur-base) ease, opacity var(--dur-base) ease, background var(--dur-base) ease; }
  .intake-current { transform: none; }
  .intake-current .intake-dot { transform: none; }
  .iconbtn:active, .chip:active, .guide-next:active, .guide-back:active,
  .bubble.error button:active, #stopBtn:active, .guide-close:active, .guide-card:active {
    transform: none;
  }
  @keyframes fade-only { from { opacity: 0; } to { opacity: 1; } }
}

/* ---- larger viewports ----------------------------------------------------- */
@media (min-width: 720px) {
  .wordmark { font-size: 25px; }
  #chat { gap: 16px; }
}

/* ---- photo-capture coaching overlay (CoachOverlay, T2) --------------------- */
/* Client-only gate before the camera opens. Reads like #recorder / .guide:
   full-screen scrim + a raised sheet on --surface-3, EV-cyan accents. Copy is
   about photo quality only — Car+ reviews stills, never a live feed. */
.coach {
  position: fixed; inset: 0; z-index: 30;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(6, 12, 20, 0.72);
  animation: coach-scrim var(--dur-fast) var(--ease-out) forwards;
}
.coach-sheet {
  width: 100%; max-width: 460px;
  background: var(--surface-3);
  border: 1px solid var(--line-strong);
  border-bottom: 0;
  border-radius: var(--radius-l) var(--radius-l) 0 0;
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
  box-shadow: 0 -14px 40px rgba(4, 9, 15, 0.5), inset 0 1px 0 var(--top-edge);
  transform: translateY(14px);
  animation: coach-rise var(--dur-base) var(--ease-spring) forwards;
}
.coach-kicker {
  display: block; font-family: var(--font-instrument, inherit);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent);
}
.coach-title {
  margin: 4px 0 0; font-size: 20px; font-weight: 600; color: var(--ink);
}
.coach-subtitle {
  margin: 6px 0 0; font-size: 13px; color: var(--ink-muted);
}
.coach-context {
  margin: 12px 0 0; padding: 10px 13px;
  background: var(--accent-soft);
  border: 1px solid rgba(53, 199, 232, 0.35);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius-s);
  font-size: 14px; color: var(--ink);
}
.coach-list {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 9px;
}
.coach-item {
  position: relative; padding-left: 26px;
  font-size: 14px; line-height: 1.4; color: var(--ink);
}
.coach-item::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
  color: var(--accent-ink); background: var(--accent);
}
.coach-actions {
  display: flex; flex-direction: column; gap: 9px; margin-top: 18px;
}
.coach-go {
  border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink);
  font: inherit; font-weight: 600; font-size: 16px;
  border-radius: var(--radius-m); padding: 13px 18px; cursor: pointer;
  box-shadow: inset 0 1px 0 var(--top-edge);
  transition: transform var(--dur-fast) var(--ease-out);
}
.coach-go:active { transform: scale(0.98); }
.coach-cancel {
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink-muted);
  font: inherit; font-size: 14px;
  border-radius: var(--radius-m); padding: 11px 18px; cursor: pointer;
}
.coach-cancel:active { transform: scale(0.98); }

@keyframes coach-scrim { from { opacity: 0; } to { opacity: 1; } }
@keyframes coach-rise {
  from { transform: translateY(14px); }
  to   { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .coach { animation: none; }
  .coach-sheet { transform: none; animation: coach-scrim var(--dur-fast) ease forwards; }
  .coach-go:active, .coach-cancel:active { transform: none; }
}

@media (min-width: 720px) {
  .coach { align-items: center; }
  .coach-sheet { border-radius: var(--radius-l); border-bottom: 1px solid var(--line-strong); }
}

/* ---- <handoff> — mechanic handoff summary card (T5) ----------------------- */
/* On screen: a clean instrument-panel card. In print: overridden to ink-on-
   white by the @media print block below. */
.handoff {
  margin-top: 10px;
  background: var(--surface-1);
  border: 1px solid var(--line-strong);
  border-top: 1px solid var(--top-edge);
  border-radius: var(--radius-l);
  padding: 16px 16px 14px;
}
.handoff-head { margin-bottom: 12px; }
.handoff-kicker {
  display: block; font-family: var(--font-instrument);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); font-weight: 600;
}
.handoff-title { display: block; font-size: 18px; font-weight: 700; color: #fff; margin-top: 3px; }
.handoff-sub { display: block; font-size: 13px; color: var(--ink-muted); margin-top: 2px; }

.handoff-body { display: block; margin: 0; }
.handoff-row {
  display: grid; grid-template-columns: 132px 1fr; gap: 10px;
  padding: 9px 0; border-top: 1px solid var(--line);
}
.handoff-row:first-child { border-top: 0; }
.handoff-label {
  font-family: var(--font-instrument); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-faint); font-weight: 600;
  margin: 0; padding-top: 1px;
}
.handoff-value { margin: 0; color: var(--ink); font-size: 14.5px; }
.handoff-list { margin: 0; padding-left: 18px; }
.handoff-list li { margin: 2px 0; }

.handoff-confidence {
  display: inline-block; font-family: var(--font-instrument); font-weight: 600;
  font-size: 12px; letter-spacing: 0.04em; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--line-strong);
}
.handoff-confidence-high   { color: var(--safe);    border-color: var(--safe); }
.handoff-confidence-medium { color: var(--caution); border-color: var(--caution); }
.handoff-confidence-low    { color: var(--stop);    border-color: var(--stop); }

.handoff-photos { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.handoff-photos .handoff-label { display: block; margin-bottom: 8px; }
.handoff-thumbs { display: flex; gap: 6px; flex-wrap: wrap; }
.handoff-thumbs img {
  width: 64px; height: 64px; object-fit: cover;
  border-radius: var(--radius-s); border: 1px solid var(--line-strong);
}
.handoff-photos-note { display: block; margin-top: 8px; font-size: 12px; color: var(--ink-faint); }

.handoff-footer {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--ink-muted);
}

.handoff-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.handoff-btn {
  font-family: var(--font-instrument); font-weight: 600; font-size: 14px;
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink);
  border-radius: var(--radius-m); padding: 10px 16px; cursor: pointer;
}
.handoff-btn:active { transform: scale(0.98); }
.handoff-btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* ---- print: a workshop-ready one-pager (ink on white) -------------------- */
/* When printing, the handoff card is marked .handoff-print-target and isolated
   via :has() (all mainstream 2022+ browsers). On a browser without :has the
   un-hide rule is simply dropped and the print comes out blank rather than
   leaking the whole chat — a benign degradation. This shows ONLY that summary
   on white, and
   hide the header, composer, chat scrollback, other widgets, rails and
   overlays. Client-only artifact — no share link, no server round-trip. */
@media print {
  html, body {
    background: #fff !important;
    color: #111 !important;
  }
  /* Hide everything by default... */
  header, footer, .intake-rail, .disclaimer,
  #recorder, .coach, .guide, .quickactions, .composer, #tray {
    display: none !important;
  }
  /* ...and every chat bubble, except the one containing the printed handoff. */
  .bubble { display: none !important; }
  .bubble:has(.handoff-print-target) {
    display: block !important;
    background: #fff !important; color: #111 !important;
    border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important;
    max-width: none !important;
  }
  /* Inside the printed bubble, show only the handoff card itself. */
  .bubble:has(.handoff-print-target) > *:not(.handoff-print-target) { display: none !important; }

  main { overflow: visible !important; display: block !important; }
  .wrap { max-width: none !important; padding: 0 !important; }

  .handoff-print-target {
    background: #fff !important; color: #111 !important;
    border: 0 !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important;
  }
  .handoff-print-target .handoff-kicker { color: #333 !important; }
  .handoff-print-target .handoff-title { color: #000 !important; }
  .handoff-print-target .handoff-sub,
  .handoff-print-target .handoff-label,
  .handoff-print-target .handoff-photos-note,
  .handoff-print-target .handoff-footer { color: #444 !important; }
  .handoff-print-target .handoff-value,
  .handoff-print-target .handoff-list li { color: #111 !important; }
  .handoff-print-target .handoff-row { border-top: 1px solid #ccc !important; break-inside: avoid; }
  .handoff-print-target .handoff-photos,
  .handoff-print-target .handoff-footer { border-top: 1px solid #ccc !important; }
  .handoff-print-target .handoff-confidence { border-color: #666 !important; color: #111 !important; }
  .handoff-print-target .handoff-thumbs img { border: 1px solid #ccc !important; }
  /* Actions are on-screen only — never on the printed page. */
  .handoff-print-target .handoff-actions { display: none !important; }

  @page { size: A4; margin: 16mm; }
}

/* ── iOS Add-to-Home-Screen hint (T7 PWA) ─────────────────────────────────
   Non-nagging, dismissible one-liner shown only on iOS Safari when not yet
   installed. EV-cyan tokens; pinned to the top, never blocks the UI.        */
.ios-install-hint {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: calc(env(safe-area-inset-top, 0px) + .55rem) .9rem .55rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--accent-soft);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  color: var(--ink);
  font-size: .82rem;
  line-height: 1.35;
}
.ios-install-hint[hidden] { display: none; }
.ios-install-text { flex: 1 1 auto; }
.ios-install-text strong { color: var(--accent-bright); font-weight: 600; }
.ios-install-dismiss {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.ios-install-dismiss:hover { color: var(--ink); background: var(--surface-3); }