/* ============================================================
   Algora — agentic DSA solver UI
   Dark technical "console" aesthetic with a warm clay accent.
   ============================================================ */

:root {
  /* palette */
  --bg: oklch(15% 0.012 265);
  --bg-grad: oklch(18% 0.02 280);
  --surface: oklch(19% 0.013 265);
  --surface-2: oklch(22% 0.014 265);
  --surface-3: oklch(26% 0.016 265);
  --border: oklch(30% 0.012 265);
  --border-strong: oklch(40% 0.02 265);

  --text: oklch(95% 0.005 265);
  --text-dim: oklch(72% 0.012 265);
  --text-faint: oklch(65% 0.012 265);  /* lifted to clear WCAG AA on dark surfaces */

  --accent: oklch(72% 0.16 45);          /* warm clay/terracotta */
  --accent-soft: oklch(72% 0.16 45 / 0.14);
  --accent-strong: oklch(78% 0.18 45);
  --run: oklch(78% 0.15 165);            /* cyan-green for execution */
  --run-soft: oklch(78% 0.15 165 / 0.12);
  --danger: oklch(70% 0.19 25);
  --think: oklch(74% 0.10 300);          /* muted violet for reasoning */

  /* type */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --text-base: clamp(0.94rem, 0.9rem + 0.2vw, 1.02rem);

  /* shape & motion */
  --radius: 14px;
  --radius-sm: 9px;
  --shadow-lo: 0 1px 2px oklch(0% 0 0 / 0.4);
  --shadow-hi: 0 18px 50px -20px oklch(0% 0 0 / 0.7);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 240ms;

  --maxw: min(94vw, 1400px);
}

* { box-sizing: border-box; }

/* The `hidden` attribute must always win over component display rules below
   (e.g. .drop-overlay / .attachments set display:grid/flex). Without this,
   a hidden full-screen overlay would silently intercept every pointer event. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body {
  background:
    radial-gradient(1200px 600px at 75% -10%, var(--bg-grad), transparent 60%),
    radial-gradient(900px 500px at 0% 110%, oklch(20% 0.03 45 / 0.5), transparent 55%),
    var(--bg);
}

.app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-width: var(--maxw);
  margin: 0 auto;
  position: relative;
  /* Clip any horizontal overflow at the app edge so a wide diagram/code slab can
     never push the page sideways and clip the 💬 talk text on a phone. Wide blocks
     scroll inside their own containers (.code-block pre / .table-wrap / .mermaid-block). */
  overflow-x: hidden;
}

/* ---------- Topbar ---------- */

/* Collapsible header shell — wraps the topbar + tabs so both can hide together
   while reading (scrolling down) and reappear the instant the user scrolls up or
   is near the top. Animating grid-template-rows (1fr <-> 0fr) shrinks the row to
   zero height smoothly without knowing its content's height in advance, and the
   flex sibling (.panels) reclaims the freed space automatically. */
.app-header {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 260ms var(--ease);
  flex: none;
}
.app-header-inner { overflow: hidden; min-height: 0; }
.app-header.is-collapsed { grid-template-rows: 0fr; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px clamp(14px, 4vw, 26px);
  padding-top: max(14px, env(safe-area-inset-top));
  border-bottom: 1px solid var(--border);
  background: oklch(16% 0.012 265 / 0.7);
  backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }

.brand-mark {
  font-size: 1.4rem;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 11px;
  background: linear-gradient(145deg, var(--accent-soft), transparent);
  border: 1px solid var(--border-strong);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.05);
}

.brand-text { min-width: 0; }
.brand-text h1 {
  margin: 0;
  font-size: 1.06rem;
  letter-spacing: 0.04em;
  font-weight: 650;
}
.tagline {
  margin: 0;
  font-size: 0.72rem;
  color: var(--text-faint);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.select-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 8px 5px 10px;
}
.select-label { font-size: 0.66rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.08em; }
#model-select {
  background: transparent;
  border: 0;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  outline: none;
}
#model-select option { background: var(--surface-2); color: var(--text); }
#voice-select { max-width: 9rem; text-overflow: ellipsis; }

.chip-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: var(--radius-sm);
  padding: 7px 11px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.chip-toggle .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-faint);
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.chip-toggle.is-on { color: var(--think); border-color: oklch(74% 0.10 300 / 0.4); background: oklch(74% 0.10 300 / 0.1); }
.chip-toggle.is-on .dot { background: var(--think); box-shadow: 0 0 8px var(--think); }

.ghost-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.ghost-btn:hover { border-color: var(--border-strong); color: var(--text); }

/* Overflow ("⋯") menu. On desktop the menu is `display:contents`, so devices/history/new
   flow inline exactly as before and the ⋯ trigger is hidden. On mobile (≤620) the trigger
   appears and the menu collapses into a popover — keeping the header to a single tidy row. */
.more-wrap { position: relative; display: inline-flex; }
.more-btn { display: none; line-height: 1; padding: 7px 11px; font-size: 1rem; }
.more-menu { display: contents; }
.more-label { display: none; }
@media (max-width: 620px) {
  .more-btn { display: inline-flex; align-items: center; }
  .more-menu {
    display: flex; flex-direction: column; gap: 6px; align-items: stretch;
    position: fixed; top: 58px; right: 12px; z-index: 200;
    min-width: 168px; padding: 7px;
    background: var(--surface-2, oklch(17% 0.012 265));
    border: 1px solid var(--border-strong); border-radius: var(--radius);
    box-shadow: 0 14px 34px oklch(0% 0 0 / 0.5);
    opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.98);
    transform-origin: top right;
    transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s ease;
  }
  .more-menu.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
  .more-menu .ghost-btn { text-align: left; width: 100%; }
  .more-label { display: inline; }
}

.status-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--text-faint);
  flex: none;
}
.status-dot.ok { background: var(--run); box-shadow: 0 0 9px var(--run); }
.status-dot.busy { background: var(--accent); box-shadow: 0 0 9px var(--accent); animation: pulse 1s infinite; }
.status-dot.err { background: var(--danger); box-shadow: 0 0 9px var(--danger); }
@keyframes pulse { 50% { opacity: 0.35; } }

/* ---------- Tabs ---------- */

.tabs {
  display: flex;
  gap: 6px;
  padding: 10px clamp(14px, 4vw, 26px) 0;
  border-bottom: 1px solid var(--border);
  background: oklch(16% 0.012 265 / 0.5);
  overflow-x: auto;
  scrollbar-width: none;
  /* fade the right edge as a hint that the tab strip scrolls (4 tabs on a phone) */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
}
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; }
.tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  color: var(--text-faint);
  font-family: var(--font-sans);
  font-size: 0.84rem;
  font-weight: 650;
  padding: 9px 15px;
  border-radius: 10px 10px 0 0;
  cursor: pointer;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
  position: relative;
  top: 1px;
}
.tab .tab-icon { font-size: 0.95rem; }
.tab:hover { color: var(--text-dim); }
.tab.is-active {
  color: var(--text);
  background: var(--bg);
  border-color: var(--border);
  border-bottom: 1px solid var(--bg);
}
.tab.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 2px 2px 0 0;
}

/* ---------- LP Coach embed panel ---------- */
.lp-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}
.lp-panel iframe {
  flex: 1;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
.lp-offline {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-dim);
  font-size: 0.9rem;
  text-align: center;
  padding: 40px;
}
.lp-offline-icon { font-size: 2.5rem; margin-bottom: 6px; }
.lp-offline-sub { color: var(--text-faint); font-size: 0.8rem; }
.lp-offline code { color: var(--accent); background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }

/* ---------- Panels / Transcript ---------- */

.panels {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;   /* anchor for the reading-progress bar + floating nav controls */
}
.transcript {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: clamp(16px, 3vw, 30px) clamp(14px, 4vw, 26px) 8px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  scroll-behavior: smooth;
}

.empty-state {
  margin: auto;
  text-align: center;
  max-width: 540px;
  padding: 20px;
  animation: rise var(--dur) var(--ease);
}
.empty-glyph {
  font-size: 3.4rem;
  color: var(--accent);
  opacity: 0.85;
  line-height: 1;
  margin-bottom: 10px;
}
.empty-state h2 { font-size: 1.3rem; margin: 0 0 8px; letter-spacing: -0.01em; }
.empty-state p { color: var(--text-dim); font-size: 0.92rem; }
.example-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px; }
.example-chip {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.example-chip:hover { transform: translateY(-2px); border-color: var(--accent); color: var(--text); }

/* ---------- Quick-action buttons (per-turn follow-up prompts) ---------- */
.quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.quick-action-btn {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease);
  white-space: nowrap;
}
.quick-action-btn:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  color: var(--text);
  background: oklch(72% 0.16 45 / 0.07);
}
.quick-action-btn:active { transform: translateY(0); }

/* message rows */
.msg { animation: rise var(--dur) var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

.msg.user {
  align-self: flex-end;
  max-width: min(85%, 640px);
  background: linear-gradient(160deg, var(--accent-soft), oklch(72% 0.16 45 / 0.05));
  border: 1px solid oklch(72% 0.16 45 / 0.3);
  border-radius: var(--radius) var(--radius) 4px var(--radius);
  padding: 12px 15px;
  box-shadow: var(--shadow-lo);
}
.msg.user .user-images { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.msg.user .user-images img { max-width: 160px; max-height: 160px; border-radius: 8px; border: 1px solid var(--border-strong); }
.msg.user .user-text { white-space: pre-wrap; word-break: break-word; }

.msg.assistant {
  align-self: stretch;
  max-width: 100%;
}
.assistant-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.72rem; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: 0.1em;
  margin-bottom: 8px;
}
.assistant-label::before {
  content: "";
  width: 16px; height: 16px; border-radius: 5px;
  background: linear-gradient(145deg, var(--accent), oklch(60% 0.16 30));
}

/* ---------- Reasoning (thinking) ---------- */
.think-block {
  border: 1px solid oklch(74% 0.10 300 / 0.3);
  background: oklch(74% 0.10 300 / 0.06);
  border-radius: var(--radius-sm);
  margin: 0 0 12px;
  overflow: hidden;
}
.think-head {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 13px;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--think);
  user-select: none;
}
.think-head .caret { transition: transform var(--dur) var(--ease); margin-left: auto; opacity: 0.6; }
.think-block.collapsed .caret { transform: rotate(-90deg); }
.think-body {
  padding: 0 13px 11px;
  font-size: 0.83rem;
  color: var(--text-dim);
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-mono);
  line-height: 1.55;
  max-height: 320px;
  overflow-y: auto;
}
.think-block.collapsed .think-body { display: none; }

/* ---------- Tool event cards ---------- */
.tool-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  margin: 0 0 12px;
  overflow: hidden;
  box-shadow: var(--shadow-lo);
}
.tool-head {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 13px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  user-select: none;
}
.tool-card.open .tool-head { border-bottom-color: var(--border); }
.tool-icon {
  width: 18px; height: 18px; flex: none;
  display: grid; place-items: center;
  border-radius: 5px;
  font-size: 0.7rem; font-weight: 700;
}
.tool-icon.write { background: var(--accent-soft); color: var(--accent-strong); }
.tool-icon.run { background: var(--run-soft); color: var(--run); }
.tool-icon.read { background: var(--surface-3); color: var(--text-dim); }
.tool-title { font-weight: 600; color: var(--text); }
.tool-target { color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-badge {
  margin-left: auto; flex: none;
  font-size: 0.68rem; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
  letter-spacing: 0.04em;
}
.tool-badge.ok { background: var(--run-soft); color: var(--run); }
.tool-badge.err { background: oklch(70% 0.19 25 / 0.15); color: var(--danger); }
.tool-badge.pending { background: var(--surface-3); color: var(--text-faint); }
.tool-body { display: none; }
.tool-card.open .tool-body { display: block; }
.tool-body pre {
  margin: 0;
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre;
  color: var(--text-dim);
}
.tool-body pre.stderr { color: oklch(78% 0.12 25); }
.io-label {
  font-family: var(--font-mono);
  font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-faint);
  padding: 8px 14px 0;
}

/* ---------- Markdown / prose ---------- */
.prose { word-break: break-word; }
.prose p { margin: 0 0 0.85em; }
.prose h1, .prose h2, .prose h3 { line-height: 1.3; margin: 1.1em 0 0.5em; letter-spacing: -0.01em; }
.prose h1 { font-size: 1.3rem; }
/* h2 = the section landmark. Bigger + a top rule so a candidate thumb-scrolling on a
   phone can instantly see where the next section begins. */
.prose h2 {
  font-size: 1.32rem;
  font-weight: 720;
  margin-top: 1.7em;
  padding-top: 0.7em;
  border-top: 1px solid var(--border);
}
.prose h2:first-child { border-top: none; padding-top: 0; margin-top: 0.2em; }
.prose h3 { font-size: 1.03rem; color: var(--accent-strong); }
.prose ul, .prose ol { margin: 0 0 0.85em; padding-left: 1.4em; }
.prose li { margin: 0.2em 0; }
.prose strong { color: var(--text); font-weight: 680; }
.prose a { color: var(--accent-strong); }
.prose blockquote {
  border-left: 3px solid var(--accent); margin: 0 0 0.85em; padding: 0.2em 0 0.2em 1em;
  color: var(--text-dim);
}
/* Quiet inline code: a subtle mono tint, no border, no loud fill — so a paragraph
   full of variable names reads as prose, not a row of buttons. */
.prose code.inline {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: oklch(100% 0 0 / 0.05);
  padding: 0.5px 4px;
  border-radius: 4px;
  color: var(--text);
}

.code-block {
  position: relative;
  background: oklch(12% 0.01 265);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin: 0 0 0.9em;
  overflow: hidden;
}
.code-block .code-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px 6px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.code-lang { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-faint); letter-spacing: 0.06em; text-transform: uppercase; }
.code-lang:empty { display: none; }  /* no "TEXT" chip on plain/ascii blocks */
.copy-btn {
  background: transparent; border: 1px solid var(--border); color: var(--text-dim);
  font-size: 0.68rem; font-weight: 600; padding: 3px 9px; border-radius: 6px; cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.copy-btn:hover { color: var(--text); border-color: var(--border-strong); }
.copy-btn.copied { color: var(--run); border-color: var(--run); }
.code-block pre {
  margin: 0; padding: 13px 14px; overflow-x: auto;
  font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.55;
  color: oklch(90% 0.01 265);
}
/* Opt-in line-number gutter (full-code viewer + modal). The gutter shares the pre's
   font metrics + vertical padding so numbers line up with code rows; it stays put while
   the code scrolls horizontally inside its own <pre>. */
.code-rows { display: flex; align-items: stretch; }
.code-block.has-gutter pre { flex: 1; min-width: 0; }
.code-gutter {
  flex: none; user-select: none; text-align: right;
  padding: 13px 10px 13px 14px;
  font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.55;
  color: var(--text-faint); background: oklch(14% 0.01 265);
  border-right: 1px solid var(--border);
  white-space: pre;
}
/* tiny python-ish syntax tint */
.tok-kw { color: oklch(74% 0.13 300); }
.tok-str { color: oklch(80% 0.13 140); }
.tok-num { color: oklch(80% 0.12 60); }
.tok-com { color: var(--text-faint); font-style: italic; }
.tok-def { color: oklch(80% 0.12 230); }

.cursor::after {
  content: "▍"; color: var(--accent); margin-left: 1px;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ---------- Attachments preview ---------- */
.attachments {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 8px clamp(14px, 4vw, 26px) 0;
}
.attachment {
  position: relative; width: 56px; height: 56px; border-radius: 9px; overflow: hidden;
  border: 1px solid var(--border-strong);
}
.attachment img { width: 100%; height: 100%; object-fit: cover; }
.attachment button {
  position: absolute; top: 2px; right: 2px;
  width: 18px; height: 18px; border-radius: 50%; border: 0;
  background: oklch(0% 0 0 / 0.6); color: #fff; cursor: pointer; font-size: 0.7rem; line-height: 1;
  display: grid; place-items: center;
}

/* ---------- Composer ---------- */
.composer {
  display: flex; align-items: flex-end; gap: 9px;
  padding: 12px clamp(14px, 4vw, 26px);
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: oklch(16% 0.012 265 / 0.85);
  backdrop-filter: blur(14px);
}
.icon-btn, .send-btn {
  flex: none;
  width: 42px; height: 42px;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-dim);
  cursor: pointer;
  display: grid; place-items: center;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.icon-btn:hover { color: var(--text); border-color: var(--border-strong); }
.send-btn { background: var(--accent); color: oklch(18% 0.02 45); border-color: transparent; }
.send-btn:hover { background: var(--accent-strong); transform: translateY(-1px); }
.send-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

#input {
  flex: 1;
  resize: none;
  max-height: 180px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1rem; /* >=16px prevents iOS zoom-on-focus */
  line-height: 1.45;
  padding: 10px 13px;
  outline: none;
  transition: border-color var(--dur) var(--ease);
}
#input:focus { border-color: var(--accent); }
#input::placeholder { color: var(--text-faint); }

/* ---------- Drop overlay ---------- */
.drop-overlay {
  position: fixed; inset: 0; z-index: 50;
  background: oklch(15% 0.012 265 / 0.85);
  display: grid; place-items: center;
  backdrop-filter: blur(6px);
}
.drop-card {
  border: 2px dashed var(--accent);
  border-radius: var(--radius);
  padding: 40px 60px;
  font-size: 1.1rem; font-weight: 600; color: var(--accent-strong);
}

/* ---------- Scrollbars ---------- */
.transcript::-webkit-scrollbar, .think-body::-webkit-scrollbar, .tool-body pre::-webkit-scrollbar, .code-block pre::-webkit-scrollbar { width: 9px; height: 9px; }
.transcript::-webkit-scrollbar-thumb, .think-body::-webkit-scrollbar-thumb, .tool-body pre::-webkit-scrollbar-thumb, .code-block pre::-webkit-scrollbar-thumb {
  background: var(--border-strong); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box;
}

/* ---------- Talking points (interview "what to say") ---------- */
.prose blockquote.talk {
  border-left: 3px solid var(--run);
  background: var(--run-soft);
  border-radius: 0 8px 8px 0;
  color: var(--text);
  font-style: normal;
  padding: 8px 12px 8px 14px;
}

/* ---------- 🎙️ Script (the connected narration the candidate SPEAKS) ----------
   The single most important design-mode element. A clay-accent teleprompter block,
   deliberately distinct from the cyan-green 💬 say-lines so the eye finds it instantly. */
.prose .script-block {
  border: 1px solid oklch(72% 0.16 45 / 0.4);
  border-left: 3px solid var(--accent);
  background: oklch(72% 0.16 45 / 0.08);
  border-radius: 0 10px 10px 0;
  margin: 0 0 1em;
  padding: 9px 14px 11px;
}
.prose .script-head {
  font-size: 0.64rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--accent-strong); font-weight: 700; margin-bottom: 5px;
}
.prose .script-body { color: var(--text); line-height: 1.65; }

/* ---------- Conversational beats (🤝 checkpoint / 🆘 stuck / 🧠 if-they-ask / ⚠️ trap) ----------
   A semantic colored left-border + faint tint each — readable signposts, not a sticker sheet. */
.prose blockquote.check, .prose blockquote.sos, .prose blockquote.ask, .prose blockquote.trap,
.prose blockquote.voice, .prose blockquote.hard, .prose blockquote.warn,
.prose blockquote.fork, .prose blockquote.prev, .prose blockquote.math,
.prose blockquote.ok, .prose blockquote.upgrade, .prose blockquote.tradeoff,
.prose blockquote.script {
  font-style: normal; border-radius: 0 8px 8px 0; padding: 8px 12px 8px 14px; color: var(--text);
}
.prose blockquote.check    { border-left: 3px solid var(--accent); background: var(--accent-soft); }
.prose blockquote.sos      { border-left: 3px solid var(--think); background: oklch(74% 0.10 300 / 0.10); }
.prose blockquote.ask      { border-left: 3px solid oklch(80% 0.13 80); background: oklch(80% 0.13 80 / 0.09); }
.prose blockquote.trap     { border-left: 3px solid var(--danger); background: oklch(70% 0.19 25 / 0.09); }

/* 🗣️ Plain-words / "how to say it" explanation */
.prose blockquote.voice    { border-left: 3px solid oklch(70% 0.14 260); background: oklch(70% 0.14 260 / 0.08); }
/* ⚡ Why it's hard */
.prose blockquote.hard     { border-left: 3px solid oklch(78% 0.15 60); background: oklch(78% 0.15 60 / 0.07); }
/* 💥 What breaks without it */
.prose blockquote.warn     { border-left: 3px solid var(--danger); background: oklch(70% 0.19 25 / 0.06); color: var(--text-dim); }
/* ↔️ Design fork */
.prose blockquote.fork     { border-left: 3px solid oklch(72% 0.16 200); background: oklch(72% 0.16 200 / 0.07); }
/* ↩️ What previous tier got wrong */
.prose blockquote.prev     { border-left: 3px solid oklch(65% 0.14 280); background: oklch(65% 0.14 280 / 0.07); }
/* 🔢 Decision math */
.prose blockquote.math     { border-left: 3px solid oklch(80% 0.12 200); background: oklch(80% 0.12 200 / 0.06); font-family: var(--font-mono); font-size: 0.88em; }
/* ✅ Failure matrix / success */
.prose blockquote.ok       { border-left: 3px solid var(--run); background: oklch(78% 0.15 165 / 0.07); }
/* 🔁 What forces the upgrade */
.prose blockquote.upgrade  { border-left: 3px solid oklch(78% 0.13 50); background: oklch(78% 0.13 50 / 0.07); }
/* 🔀 Trade-off */
.prose blockquote.tradeoff { border-left: 3px solid var(--think); background: oklch(74% 0.10 300 / 0.07); }
/* 🎙️ Script (when emitted as a blockquote rather than the <aside> path) */
.prose blockquote.script   { border-left: 3px solid var(--accent); background: oklch(72% 0.16 45 / 0.07); font-style: italic; }

/* "> - item" inside blockquotes — the design-fork bullets */
.prose .bq-li {
  display: list-item; list-style: disc;
  margin: 0.2em 0 0.2em 2.2em;
  color: var(--text-dim); font-size: 0.93rem;
  line-height: 1.55;
}

/* ---------- Deep-dive tiers (Bad / Good / Great cards) ---------- */
.tier {
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: 11px;
  padding: 12px 15px 4px;
  margin: 0 0 12px;
}
.tier-head { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.tier-badge {
  flex: none;
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px;
}
.tier-title { font-weight: 650; font-size: 0.95rem; color: var(--text); line-height: 1.35; }
.tier > p, .tier > ul, .tier > ol { margin-bottom: 0.55em; }
.tier .code-block, .tier .mermaid-block { margin-bottom: 0.7em; }

.tier-bad { border-left-color: var(--danger); background: oklch(70% 0.19 25 / 0.055); }
.tier-bad .tier-badge { background: oklch(70% 0.19 25 / 0.2); color: oklch(82% 0.14 25); }
.tier-good { border-left-color: oklch(80% 0.13 80); background: oklch(80% 0.13 80 / 0.06); }
.tier-good .tier-badge { background: oklch(80% 0.13 80 / 0.2); color: oklch(86% 0.12 85); }
.tier-great { border-left-color: var(--run); background: oklch(78% 0.15 165 / 0.07); }
.tier-great .tier-badge { background: oklch(78% 0.15 165 / 0.2); color: var(--run); }

/* Approach / Challenges / Trade-off labels inside a tier */
.dd-label {
  display: inline-block;
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-dim);
  background: var(--surface-2); border: 1px solid var(--border);
  padding: 1px 8px; border-radius: 6px; margin: 0 5px 0 0; vertical-align: 1px;
}

/* ---------- Tables (DP tables / array states) ---------- */
.table-wrap table { min-width: max-content; }
.table-wrap td, .table-wrap th { min-width: 72px; max-width: 340px; }
.table-wrap { overflow-x: auto; margin: 0 0 0.9em; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.prose table { border-collapse: collapse; width: 100%; font-size: 0.84rem; }
.prose th, .prose td {
  border: 1px solid var(--border);
  padding: 6px 10px;
  text-align: left;
}
/* Only headers stay on one line; data cells wrap so DP/state tables fit a phone
   column instead of forcing a sideways swipe mid-sentence. */
.prose th { white-space: nowrap; }
.prose thead th { background: var(--surface-2); color: var(--text); font-weight: 650; }
.prose tbody tr:nth-child(even) { background: oklch(22% 0.014 265 / 0.4); }
.prose td code.inline { background: transparent; border: none; padding: 0; }

/* ---------- Mermaid diagrams ---------- */
.mermaid-block {
  position: relative;
  margin: 0 0 1em;
  padding: 14px;
  background: oklch(13% 0.01 265);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow-x: auto;
  overflow-y: hidden;
  text-align: center;
  -webkit-overflow-scrolling: touch; /* momentum scroll on iOS */
}
.mermaid-block.rendered { background: oklch(15% 0.012 265); cursor: zoom-in; }
/* Persistent "tap to enlarge" hint so a wide/clipped diagram's tap-to-zoom is discoverable
   (especially on a phone, where a big cumulative HLD flowchart paints pre-clipped). */
.mermaid-block.rendered::after {
  content: "⤢ tap to enlarge";
  position: absolute; bottom: 6px; right: 8px;
  font-size: 0.6rem; color: var(--text-dim);
  background: oklch(0% 0 0 / 0.45); padding: 2px 8px; border-radius: 999px;
  pointer-events: none;
}
/* wide diagrams: anchor to the left (the part you read first) instead of mid-canvas */
.mermaid-block.mmd-wide { text-align: left; }
/* "fit to width" toggle — only injected on diagrams wider than the column. Sits top-right
   so it doesn't collide with the bottom-right "tap to enlarge" hint. */
.mmd-fit-btn {
  position: absolute; top: 6px; right: 8px; z-index: 2; cursor: pointer;
  font-size: 0.6rem; font-weight: 600; letter-spacing: 0.02em;
  color: var(--text-dim); background: oklch(0% 0 0 / 0.5);
  border: 1px solid var(--border-strong); border-radius: 999px; padding: 3px 9px;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.mmd-fit-btn:hover { color: var(--text); border-color: var(--accent); }
.mmd-fit-btn:active { transform: scale(0.94); }
/* when fitted, scale the SVG down to the column (overrides the inline maxWidth:none) */
.mermaid-block.mmd-fit { text-align: center; }
.mermaid-block.mmd-fit svg { width: 100% !important; max-width: 100% !important; height: auto; }
/* width:auto + max-width:none lets the SVG keep its natural size so the block
   scrolls horizontally instead of shrinking the diagram to fit the column. */
.mermaid-block svg { width: auto; max-width: none; height: auto; display: inline-block; }
/* Readable floor for label text regardless of any residual scaling. */
.mermaid-block svg .nodeLabel,
.mermaid-block svg .edgeLabel,
.mermaid-block svg .cluster-label,
.mermaid-block svg text { font-size: 15px; }

/* Tap-to-zoom fullscreen overlay (laptop + iPhone) */
.mermaid-zoom {
  position: fixed; inset: 0; z-index: 60;
  background: oklch(10% 0.01 265 / 0.93);
  backdrop-filter: blur(6px);
  /* block scroll so the diagram is anchored top-left and scrollable in both axes.
     Flex centering caused wide diagrams to open with the left edge off-screen. */
  display: block;
  padding: 24px;
  box-sizing: border-box;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  user-select: none;
}
.mermaid-zoom.is-dragging { cursor: grabbing; }
.mermaid-zoom svg {
  /* Scale down to fit the viewport width so the full diagram is visible on open.
     max-width is respected only when the SVG's inline maxWidth style is cleared (see JS). */
  display: block;
  width: auto;
  max-width: calc(100vw - 48px);
  height: auto;
  max-height: none;
}
.mermaid-zoom-hint {
  position: fixed; bottom: max(14px, env(safe-area-inset-bottom)); left: 0; right: 0;
  text-align: center; font-size: 0.74rem; color: var(--text-faint);
  pointer-events: none;
}
.mermaid-src {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--text-faint);
  white-space: pre;
  text-align: left;
}
.mermaid-block.rendered .mermaid-src { display: none; }
.mermaid-block.mermaid-error { border-color: var(--danger); }
.mermaid-block.mermaid-error::before {
  content: "diagram source (render failed):";
  display: block; font-size: 0.66rem; color: var(--danger); margin-bottom: 6px; text-align: left;
}

/* ---------- Web search card ---------- */
.web-search-card {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 12px;
  padding: 9px 13px;
  border: 1px solid oklch(78% 0.15 165 / 0.3);
  background: var(--run-soft);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  color: var(--text-dim);
}
.web-search-card .ws-icon { flex: none; }
.web-search-card .ws-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Read-aloud button ---------- */
/* the name takes the slack so any action buttons group at the right of the label */
.assistant-label .al-name { margin-right: auto; }
.speak-btn, .full-code-btn {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.speak-btn:hover, .full-code-btn:hover { color: var(--text); border-color: var(--border-strong); }
.speak-btn.speaking { color: var(--run); border-color: var(--run); }
.full-code-btn { color: var(--accent-strong); border-color: oklch(72% 0.16 45 / 0.4); }

/* ---------- Inline "Complete Code Implementation" (LLD mode only) ---------- */
.inline-fullcode {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}
.ifc-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 6px;
}
.ifc-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 680;
  letter-spacing: -0.01em;
  color: var(--text);
}
.ifc-copyall {
  margin-left: auto;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 0.68rem;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.ifc-copyall:hover { color: var(--text); border-color: var(--border-strong); }
.ifc-copyall.copied { color: var(--run); border-color: var(--run); }
.ifc-blurb {
  margin: 0 0 16px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-dim);
}
/* Tabbed viewer: file tabs along the top, one fixed-height scrolling pane below. */
.ifc-viewer {
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
}
.ifc-tabs {
  display: flex;
  align-items: stretch;
  gap: 2px;
  overflow-x: auto;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  scrollbar-width: thin;
}
.ifc-tab {
  display: inline-flex; align-items: center; gap: 7px;
  flex: none;
  padding: 9px 15px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.ifc-tab:hover { color: var(--text-dim); background: oklch(100% 0 0 / 0.03); }
.ifc-tab.active {
  color: var(--accent-strong);
  background: var(--surface);
  border-bottom-color: var(--accent-strong);
}
.ifc-tab-meta {
  font-size: 0.62rem;
  color: var(--text-faint);
  opacity: 0.7;
}
.ifc-tab.active .ifc-tab-meta { color: var(--accent-strong); opacity: 0.6; }
/* Native file picker — hidden on desktop (tabs are used), shown on phones where a
   horizontal strip of 18 tabs is unusable. Keeps the OS arrow + wheel picker on iOS. */
.ifc-select {
  display: none;
  width: 100%;
  background: var(--surface-2);
  color: var(--text);
  border: none;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 11px 14px;
  cursor: pointer;
}
/* Breadcrumb: full relative path of the active file (folder dimmed, filename bright).
   Tabs/options only show the basename, so this is where the directory context lives. */
.ifc-path {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 0.72rem;
  color: var(--text-faint);
  white-space: nowrap; overflow: hidden;
}
.ifc-path-ico { flex: none; opacity: 0.85; }
.ifc-path-dir { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ifc-path-name { flex: none; color: var(--text); font-weight: 650; }
/* The single code pane — fixed height, internal scroll, so the page stays compact. */
.ifc-pane {
  max-height: 62vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
/* The inner code-block already has chrome; strip its border/radius/margin in the pane. */
.ifc-pane .code-block {
  border: none;
  border-radius: 0;
  margin: 0;
}
.ifc-pane .code-bar {
  position: sticky; top: 0; z-index: 1;   /* keep the copy button reachable while scrolling */
}

/* ---------- Full-code modal (complete program, file by file) ---------- */
.code-modal {
  position: fixed; inset: 0; z-index: 60;
  background: oklch(10% 0.01 265 / 0.92);
  backdrop-filter: blur(6px);
  display: grid; place-items: center;
  padding: clamp(10px, 3vw, 36px);
}
.cm-panel {
  display: flex; flex-direction: column;
  width: min(960px, 100%); height: min(82vh, 100%);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius); box-shadow: var(--shadow-hi); overflow: hidden;
}
.cm-head {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-bottom: 1px solid var(--border); flex: none;
}
.cm-title { font-weight: 650; font-size: 0.9rem; }
.cm-copyall {
  margin-left: auto; background: transparent; border: 1px solid var(--border);
  color: var(--text-dim); border-radius: 7px; padding: 4px 11px; font-size: 0.72rem;
  font-weight: 600; cursor: pointer;
}
.cm-copyall:hover { color: var(--text); border-color: var(--border-strong); }
.cm-close {
  background: transparent; border: 1px solid var(--border); color: var(--text-dim);
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 0.85rem;
  display: grid; place-items: center; flex: none;
}
.cm-close:hover { color: var(--text); border-color: var(--border-strong); }
.cm-body { display: grid; grid-template-columns: 200px 1fr; flex: 1; min-height: 0; }
.cm-files {
  display: flex; flex-direction: column; gap: 2px; padding: 8px;
  border-right: 1px solid var(--border); overflow-y: auto; background: var(--surface-2);
}
.cm-file {
  display: flex; flex-direction: column; gap: 1px; line-height: 1.3;
  text-align: left; background: transparent; border: 1px solid transparent;
  color: var(--text-dim); font-family: var(--font-mono); font-size: 0.76rem;
  padding: 7px 10px; border-radius: 8px; cursor: pointer; min-width: 0;
}
.cm-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-file-dir {
  font-size: 0.63rem; color: var(--text-faint); opacity: 0.85;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cm-file.active .cm-file-dir { color: var(--accent-strong); opacity: 0.7; }
.cm-file:hover { background: var(--surface-3); color: var(--text); }
.cm-file.active { background: var(--accent-soft); color: var(--accent-strong); border-color: oklch(72% 0.16 45 / 0.4); }
.cm-code { overflow: auto; padding: 12px; min-width: 0; }
.cm-code .code-block { margin: 0; }

/* ---------- "Open on another device" modal ---------- */
.dm-panel { width: min(460px, 100%); height: auto; max-height: 86vh; }
.dm-body { padding: 16px 18px 20px; overflow-y: auto; }
.dm-note { margin: 0 0 14px; color: var(--text-dim); font-size: 0.9rem; line-height: 1.55; }
.dm-url {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 9px 10px 9px 13px; margin-bottom: 8px;
}
.dm-url code {
  flex: 1; font-family: var(--font-mono); font-size: 0.92rem; color: var(--accent-strong);
  overflow-x: auto; white-space: nowrap; scrollbar-width: none;
}
.dm-url code::-webkit-scrollbar { display: none; }
.dm-copy {
  flex: none; background: var(--accent); color: oklch(18% 0.02 45); border: 0;
  border-radius: 7px; padding: 6px 12px; font-size: 0.74rem; font-weight: 700; cursor: pointer;
}
.dm-copy:hover { background: var(--accent-strong); }
.dm-hint { margin: 10px 0 0; color: var(--text-faint); font-size: 0.78rem; line-height: 1.5; }
/* phone: file list becomes a horizontal tab strip on top */
@media (max-width: 620px) {
  .cm-panel { height: 100%; width: 100%; border-radius: 0; padding-bottom: env(safe-area-inset-bottom); }
  .cm-head { padding-top: max(11px, env(safe-area-inset-top)); }
  .cm-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .cm-files {
    flex-direction: row; border-right: none; border-bottom: 1px solid var(--border);
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  }
  .cm-file { flex: none; min-height: 36px; }
  .cm-file-dir { display: none; }   /* horizontal strip: keep tabs compact, basename only */

  /* Inline full-code viewer on phones: swap the 18-wide tab strip for a native picker,
     give the code pane more height, and keep the breadcrumb for folder context. */
  .ifc-tabs { display: none; }
  .ifc-select { display: block; }
  .ifc-pane { max-height: 72vh; }
  /* The breadcrumb path was tiny + dim on a phone — bump its size and contrast so the
     active filename reads clearly. */
  .ifc-path { font-size: 0.84rem; padding: 9px 14px; color: var(--text-dim); gap: 7px; }
  .ifc-path-ico { font-size: 0.9rem; opacity: 1; }
  .ifc-path-name { font-weight: 700; }
}

/* ---------- Notice / usage / error lines ---------- */
.notice-line { font-size: 0.78rem; color: var(--text-faint); font-style: italic; margin: 2px 0 10px; }
.usage-line { font-family: var(--font-mono); font-size: 0.66rem; color: var(--text-faint); margin-top: 6px; }
.error-card .err-icon { background: oklch(70% 0.19 25 / 0.15); color: var(--danger); }
.error-card .err-title { color: var(--danger); }

/* ---------- Mic recording state ---------- */
.icon-btn.is-recording {
  color: var(--danger);
  border-color: var(--danger);
  background: oklch(70% 0.19 25 / 0.12);
  animation: micpulse 1.2s ease-in-out infinite;
}
@keyframes micpulse { 50% { box-shadow: 0 0 0 5px oklch(70% 0.19 25 / 0.12); } }

/* ---------- History drawer ---------- */
.history-backdrop {
  position: fixed; inset: 0; z-index: 40;
  background: oklch(10% 0.01 265 / 0.55);
  backdrop-filter: blur(2px);
}
.history-drawer {
  position: fixed; top: 0; right: 0; z-index: 41;
  height: 100dvh; width: min(380px, 88vw);
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-hi);
  display: flex; flex-direction: column;
  animation: slidein var(--dur) var(--ease);
  padding-top: max(0px, env(safe-area-inset-top));
}
@keyframes slidein { from { transform: translateX(100%); } }
.history-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--border);
  font-weight: 650; letter-spacing: 0.02em;
}
.history-list { flex: 1; overflow-y: auto; padding: 8px; }
.history-item {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 11px 12px; margin-bottom: 6px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.history-item:hover { border-color: var(--accent); background: var(--surface-3); }
.history-item .hi-main { flex: 1; min-width: 0; }
.history-item .hi-title {
  font-size: 0.86rem; color: var(--text); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.history-item .hi-meta { font-size: 0.68rem; color: var(--text-faint); margin-top: 3px; }
.history-item .hi-del {
  flex: none; background: transparent; border: 0; color: var(--text-faint);
  cursor: pointer; font-size: 0.85rem; padding: 2px 4px; border-radius: 6px;
}
.history-item .hi-del:hover { color: var(--danger); background: oklch(70% 0.19 25 / 0.12); }
.history-empty { color: var(--text-faint); font-size: 0.86rem; text-align: center; padding: 30px 16px; }

/* ---------- Long-answer navigation: reading progress + outline + back-to-top ----------
   LLD/HLD answers run to tens of thousands of pixels. These controls let a candidate
   see how far they are and jump between sections without an endless thumb-scroll. */
.reading-progress {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  z-index: 6; pointer-events: none;
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.reading-progress.show { opacity: 1; }
.reading-progress > i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  box-shadow: 0 0 10px oklch(72% 0.16 45 / 0.5);
  transition: width 90ms linear;
}

/* Bottom-center, hugging the composer's top edge, on every screen size.
   Centering it horizontally sits it directly over the reading column (unlike
   the old right-corner spot, which was mostly empty margin) — so the gap
   above the composer must be kept SMALL and the row SHORT (side-by-side, not
   stacked) to minimize how much of the scrolled transcript it can ever cover. */
.nav-fab-cluster {
  position: absolute; left: 50%; transform: translateX(-50%);
  /* env() resolves to 0 on devices without a home-indicator/notch (including every
     desktop), so this one rule is correct everywhere — no breakpoint needed to add
     the safe-area clearance only on "phone-width" viewports. */
  bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 9;
  display: flex; flex-direction: row; align-items: center; gap: 10px;
  pointer-events: none;
}
.nav-fab {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 13px; border-radius: 999px;
  background: oklch(22% 0.014 265 / 0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--border-strong); color: var(--text-dim);
  font-size: 0.76rem; font-weight: 650; letter-spacing: 0.01em; cursor: pointer;
  box-shadow: var(--shadow-hi);
  opacity: 0; transform: translateY(10px) scale(0.94); visibility: hidden;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
              color var(--dur) var(--ease), border-color var(--dur) var(--ease), visibility var(--dur);
}
.nav-fab.show { opacity: 1; transform: none; visibility: visible; }
.nav-fab:hover { color: var(--text); border-color: var(--accent); }
.nav-fab:active { transform: scale(0.93); }
.nav-fab svg { width: 16px; height: 16px; flex: none; }
.nav-fab.icon-only { width: 38px; padding: 0; justify-content: center; }

.outline-pop {
  pointer-events: auto;
  position: absolute; left: 50%; bottom: calc(100% + 10px);
  width: min(300px, 80vw); max-height: min(58vh, 460px); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius); box-shadow: var(--shadow-hi); padding: 6px;
  opacity: 0; transform: translateX(-50%) translateY(10px) scale(0.97); transform-origin: bottom center;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.outline-pop.show { opacity: 1; transform: translateX(-50%); }
.outline-head {
  font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-faint); padding: 7px 10px 6px; font-weight: 700;
}
.outline-item {
  display: block; width: 100%; text-align: left; background: transparent; border: 0;
  color: var(--text-dim); font-size: 0.82rem; line-height: 1.35; padding: 8px 10px;
  border-radius: 8px; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.outline-item:hover { background: var(--surface-2); color: var(--text); }
.outline-item.active { background: var(--accent-soft); color: var(--accent-strong); }
.outline-item.lvl-sub { padding-left: 22px; font-size: 0.78rem; color: var(--text-faint); }

/* ---------- Global focus + press micro-interactions ----------
   Keyboard-only focus rings (mouse clicks stay clean), plus a tiny press feedback so
   every control feels physical. */
:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; border-radius: 8px; }
.example-chip:active, .quick-action-btn:active, .ghost-btn:active,
.chip-toggle:active, .copy-btn:active, .speak-btn:active, .full-code-btn:active,
.ifc-copyall:active, .tab:active { transform: scale(0.96); }
.send-btn:active:not(:disabled) { transform: scale(0.94); }

/* ---------- Mobile ---------- */
@media (max-width: 620px) {
  .tagline { display: none; }
  .topbar { padding: 10px 14px; padding-top: max(10px, env(safe-area-inset-top)); }
  .select-label { display: none; }
  .brand-text h1 { font-size: 0.98rem; }
  .msg.user { max-width: 92%; }
  .ghost-btn { padding: 7px 10px; }
  .tabs { padding: 8px 10px 0; }
  .tab { font-size: 0.78rem; padding: 8px 11px; }
  .composer { gap: 6px; }
  .icon-btn, .send-btn { width: 44px; height: 44px; }  /* 44px min touch target */
  /* Give the small pill controls a comfortable tap height on a phone. */
  .speak-btn, .copy-btn { min-height: 34px; padding-top: 7px; padding-bottom: 7px; }
  .history-item .hi-del { min-width: 34px; min-height: 34px; }
  /* voice picker is a power feature; hide it on phones so the header stays one row
     (read-aloud still works with the auto-selected natural voice) */
  #voice-wrap { display: none; }
  /* >=16px avoids iOS focus-zoom now that pinch-zoom is re-enabled */
  #model-select { font-size: 16px; }
  /* .nav-fab-cluster's safe-area clearance is now in its base rule (env() is 0 on
     devices without a notch/home-indicator, so one rule covers every breakpoint). */
}

/* Outline popover on touch devices: anchor to the viewport (not .panels) and cap its
   height to the *dynamic* viewport, full-width via left/right. Gated on `pointer: coarse`
   (touch) + a generous width cap instead of the phone-only 620px breakpoint above — a
   landscape iPhone (or a Pro Max at some Display Zoom settings) already reports a CSS
   viewport width past 620px, which silently fell through to the tiny centered desktop
   popover (half on/off screen, covering content awkwardly) despite still being a phone.
   1024px comfortably covers every iPhone in landscape; real desktops/laptops (mouse,
   `pointer: fine`) never match this regardless of window width. */
@media (max-width: 1024px) and (pointer: coarse) {
  .outline-pop {
    position: fixed;
    left: 12px; right: 12px; width: auto;
    bottom: calc(76px + env(safe-area-inset-bottom));    /* sit just above the FAB row */
    max-height: calc(100vh - 200px);                     /* fallback for older Safari */
    max-height: calc(100dvh - 200px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    transform: none; transform-origin: bottom center;    /* full-width on phone — no centering transform needed */
  }
  .outline-pop.show { transform: none; }
}

/* ============================================================
   NDJSON section components — "System Design v2" (hld_json) mode.
   Each typed section (see frontend/ndjson.js) gets a card with its own
   accent, guaranteed regardless of model output — no emoji/blockquote
   parsing involved, unlike the Markdown HLD renderer.
   ============================================================ */

.nd-section {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 14px 16px;
  margin: 0 0 14px;
}
.nd-section > *:last-child { margin-bottom: 0; }
/* Several nd-* blocks render a field through ndBlock() (full Markdown: <p>/<pre>/<ol>),
   not plain text. Reset paragraph margins wherever that can land so it matches the
   surrounding one-line fields instead of gaining extra browser-default spacing. */
.nd-section p { margin: 0 0 0.5em; }
.nd-section p:last-child { margin-bottom: 0; }

.nd-section-title {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-strong);
  margin: 0 0 10px;
  cursor: pointer;
  user-select: none;
  display: flex; align-items: center; gap: 6px;
}
/* collapse chevron — rotates when the card is folded to just its title */
.nd-section-title::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 2px solid var(--text-faint);
  border-bottom: 2px solid var(--text-faint);
  transform: rotate(45deg);
  transition: transform var(--duration-fast, 150ms) ease;
  margin-top: -3px;
}
.nd-section.nd-collapsed > .nd-section-title::after { transform: rotate(-45deg); margin-top: 0; }
.nd-section.nd-collapsed > .nd-section-title { margin-bottom: 0; }
.nd-section.nd-collapsed > :not(.nd-section-title) { display: none; }

.nd-label {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-faint);
  margin: 10px 0 6px;
}
.nd-label:first-child { margin-top: 0; }

.nd-hinglish {
  font-style: italic;
  color: var(--text-dim);
  padding: 8px 12px;
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 0 0 10px;
}

.nd-snapshot {
  list-style: none;
  margin: 0 0 10px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
}
.nd-snapshot li { margin: 2px 0; }
.nd-snapshot strong { color: var(--accent-strong); font-weight: 650; }
.nd-snapshot-note { color: var(--text-faint); font-size: 0.85rem; }

.nd-simple {
  border-left: 3px solid oklch(72% 0.13 235);
  background: oklch(72% 0.13 235 / 0.08);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 8px 12px;
  margin: 0 0 10px;
  font-size: 0.92rem;
}
.nd-simple strong { color: oklch(72% 0.13 235); font-weight: 650; }

.nd-tension, .nd-lead-number {
  font-weight: 600;
  color: var(--text);
  margin: 0 0 10px;
}

.nd-one-thing {
  font-weight: 650;
  color: var(--accent-strong);
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin: 0 0 10px;
}

.nd-script {
  border-left: 3px solid var(--think);
  background: oklch(74% 0.10 300 / 0.06);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 8px 12px;
  margin: 10px 0 0;
}
.nd-script-tag {
  display: block;
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--think);
  margin-bottom: 3px;
}
.nd-script p:last-child { margin-bottom: 0; }

.nd-checkpoint {
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 8px 12px;
  margin: 10px 0 0;
  font-size: 0.9rem;
}
.nd-checkpoint-tag { margin-right: 6px; }

.nd-warn {
  border-left: 3px solid var(--danger);
  background: oklch(70% 0.19 25 / 0.08);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 8px 12px;
  margin: 10px 0;
  font-size: 0.9rem;
}

.nd-if-ask {
  border-left: 3px solid var(--think);
  background: oklch(74% 0.10 300 / 0.06);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 8px 12px;
  margin: 10px 0 0;
}
.nd-if-ask-tag {
  display: block;
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--think);
  margin-bottom: 3px;
}

.nd-math {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  color: var(--run);
  background: var(--run-soft);
  border-radius: var(--radius-sm);
  padding: 7px 11px;
  margin: 10px 0;
}

.nd-one-liner {
  font-weight: 600;
  color: var(--accent-strong);
  margin-top: 6px;
}

/* card lists — functional/non-functional requirements, entities, endpoints, FAQ, tradeoffs */
.nd-card-list { display: flex; flex-direction: column; gap: 8px; }
.nd-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: 10px 13px;
}
.nd-card-title { font-weight: 650; color: var(--text); margin-bottom: 3px; }
.nd-card-sub { color: var(--text-dim); font-size: 0.88rem; margin-top: 3px; }
.nd-card-sub:first-child { margin-top: 0; }
.nd-card-sub strong { font-weight: 650; }
.nd-sub-plain strong { color: oklch(72% 0.13 235); }
.nd-sub-hard strong { color: oklch(76% 0.16 70); }
.nd-sub-breaks strong { color: var(--danger); }
/* Some nd-card-sub fields (e.g. what_it_is) carry full Markdown via ndBlock(), which
   wraps content in <p>/<pre>. Reset those so a block-rendered field looks identical
   to a plain-text one instead of gaining extra browser-default paragraph spacing. */
.nd-card-sub > p { margin: 0 0 0.5em; }
.nd-card-sub > p:last-child { margin-bottom: 0; }
.nd-card-sub > .code-block, .nd-card-sub > .mermaid-block { margin: 0.4em 0; }

.nd-fork {
  margin-top: 5px;
  padding-left: 10px;
  border-left: 2px solid var(--border-strong);
  color: var(--text-dim);
  font-size: 0.88rem;
}
.nd-fork-row { margin: 3px 0; }
.nd-fork-badge {
  display: inline-block;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  border-radius: 999px;
  padding: 1px 8px;
  margin-right: 7px;
  vertical-align: 1px;
}
.nd-fork-yes { background: oklch(70% 0.14 165 / 0.15); color: oklch(74% 0.14 165); }
.nd-fork-no  { background: oklch(72% 0.12 300 / 0.15); color: oklch(76% 0.12 300); }
.nd-assume {
  margin-top: 6px;
  padding: 6px 10px;
  border-left: 3px solid var(--ok, oklch(72% 0.17 150));
  background: oklch(72% 0.17 150 / 0.08);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.88rem;
}
.nd-assume strong { color: oklch(74% 0.15 150); font-weight: 650; }

.nd-entity-role { font-weight: 400; font-size: 0.86rem; color: var(--text-dim); }

.nd-builds-on {
  font-size: 0.88rem;
  color: var(--text-dim);
  margin: 0 0 10px;
}
.nd-builds-on strong { color: var(--accent-strong); font-weight: 650; }

.nd-hero {
  border: 1px solid var(--accent);
  border-left-width: 3px;
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin: 12px 0;
}
.nd-hero-title {
  font-weight: 700;
  color: var(--accent-strong);
  margin-bottom: 8px;
}
.nd-hero .code-block { margin: 0.6em 0; }

/* One chosen approach's full treatment (optimal→solution→walkthrough→complexity)
   grouped into a single labeled box (coding-interview v2). */
.nd-chosen-box {
  border: 1px solid oklch(72% 0.17 150 / 0.45);
  border-left-width: 3px;
  border-radius: var(--radius);
  padding: 12px 12px 4px;
  margin: 0 0 14px;
  background: oklch(72% 0.17 150 / 0.03);
}
.nd-chosen-title {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: oklch(74% 0.15 150);
  margin: 0 0 10px;
}
.nd-chosen-box .nd-section { margin-bottom: 12px; }

/* approach cards: chosen = green edge + richer body, dropped = red edge, compact */
.nd-appr-chosen { border-left: 3px solid oklch(72% 0.17 150); }
.nd-appr-dropped { border-left: 3px solid var(--danger); opacity: 0.88; }
.nd-verdict { margin-top: 6px; font-size: 0.9rem; }
.nd-verdict-keep strong { color: oklch(74% 0.15 150); }
.nd-verdict-drop strong { color: var(--danger); }

/* Plain-markdown prose inside an NDJSON answer (follow-up turns, preludes). */
.nd-prose { margin: 0 0 14px; }
.nd-prose > :last-child { margin-bottom: 0; }

/* Python/Java segmented control (Coding Interview v2) */
.lang-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface);
}
.lang-opt {
  border: 0; background: transparent; color: var(--text-dim);
  font: inherit; font-size: 0.78rem; font-weight: 600;
  padding: 4px 12px; cursor: pointer;
}
.lang-opt.is-active { background: var(--accent-soft); color: var(--accent-strong); }

/* timing budget box (Coding Interview v2) */
.nd-timing { font-family: var(--font-mono); font-size: 0.85rem; }
.nd-timing-head { font-weight: 700; color: var(--accent-strong); margin-bottom: 6px; }
.nd-timing-row { display: flex; gap: 12px; padding: 2px 0; color: var(--text-dim); }
.nd-timing-window { min-width: 84px; color: var(--text); font-weight: 600; }

.nd-stuck {
  border-left: 3px solid var(--danger);
  background: oklch(70% 0.19 25 / 0.06);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 8px 12px;
  margin: 0 0 14px;
  font-size: 0.9rem;
}
.nd-stuck strong { color: var(--danger); font-weight: 650; }

.nd-instinct {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin: 10px 0;
  font-size: 0.92rem;
}
.nd-instinct > strong:first-child { color: oklch(76% 0.16 70); font-weight: 700; }
.nd-instinct .code-block { margin: 0.5em 0; }

.nd-walk {
  border: 1px solid oklch(72% 0.17 150 / 0.5);
  border-left-width: 3px;
  background: oklch(72% 0.17 150 / 0.07);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin: 12px 0 0;
}
.nd-walk-tag {
  display: block;
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: oklch(74% 0.15 150);
  margin-bottom: 4px;
}
.nd-walk p:last-child { margin-bottom: 0; }

.nd-punch {
  font-style: italic;
  font-weight: 550;
  border-left: 3px solid var(--border-strong);
  padding: 6px 12px;
  margin: 12px 0;
  color: var(--text);
}

.nd-terms {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
}
.nd-terms li {
  padding: 5px 0 5px 12px;
  border-left: 2px solid var(--border);
  margin: 4px 0;
}
.nd-terms li strong { color: var(--accent-strong); font-weight: 650; }
.nd-decision {
  margin-top: 8px;
  padding: 6px 10px;
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.88rem;
}
.nd-decision strong { color: var(--accent-strong); font-weight: 650; }
.nd-probe {
  margin-top: 6px;
  padding: 6px 10px;
  border-left: 3px solid oklch(76% 0.16 70);
  background: oklch(76% 0.16 70 / 0.07);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.88rem;
}
.nd-probe-q strong { color: oklch(76% 0.16 70); font-weight: 650; }
.nd-probe-a { margin-top: 2px; color: var(--text-dim); padding-left: 4px; }

.nd-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.nd-chip {
  display: inline-block;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 11px;
  font-size: 0.78rem;
  color: var(--text-dim);
}
.nd-chip.nd-domain {
  margin-left: 8px;
  text-transform: uppercase;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  vertical-align: 1px;
}

/* entities — relationship list */
.nd-rel-list { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.nd-rel { font-size: 0.9rem; color: var(--text-dim); }
.nd-rel-arrow { color: var(--text-faint); margin: 0 6px; font-family: var(--font-mono); font-size: 0.82rem; }

/* API endpoints */
.nd-endpoint {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: 10px 13px;
  margin-bottom: 10px;
}
.nd-endpoint:last-child { margin-bottom: 0; }
.nd-endpoint-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.nd-method {
  font-family: var(--font-mono);
  font-size: 0.72rem; font-weight: 700;
  background: var(--run-soft); color: var(--run);
  border-radius: 6px; padding: 2px 8px;
}
.nd-fields { margin: 6px 0; font-size: 0.86rem; color: var(--text-dim); }
.nd-fields > div { margin-bottom: 3px; }

/* diagrams */
.nd-diagram { margin: 10px 0; }
.nd-diagram-caption { font-size: 0.82rem; color: var(--text-faint); margin-bottom: 6px; }

/* hld_slice */
.nd-slice-title { font-weight: 700; font-size: 1.02rem; color: var(--text); margin-bottom: 4px; }
.nd-narration { margin: 10px 0; padding-left: 1.3em; }
.nd-narration li { margin-bottom: 8px; }
.nd-say {
  font-style: italic;
  color: var(--text-dim);
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 7px 11px;
  margin: 8px 0;
}

/* deep dives — wrap the header + its bad/good/great tiers in one visual group */
.nd-deepdive .nd-dive-title { font-weight: 700; font-size: 1.05rem; color: var(--text); margin-bottom: 4px; }

@media (max-width: 620px) {
  /* reclaim the side gutters — cards run nearly edge-to-edge on phones */
  .transcript { padding-left: 8px; padding-right: 8px; }
  .msg.assistant { max-width: 100%; }
  .nd-section { padding: 12px 11px; margin-bottom: 12px; }
  .nd-chosen-box { padding: 10px 8px 2px; }
  .nd-slice-title, .nd-dive-title { font-size: 1rem; }
  .nd-hero, .nd-instinct, .nd-walk { padding: 9px 10px; }
  .nd-script, .nd-checkpoint, .nd-warn, .nd-if-ask, .nd-simple, .nd-assume,
  .nd-decision, .nd-probe, .nd-stuck { padding: 7px 10px; }
  .nd-snapshot { padding: 8px 10px; font-size: 0.88rem; }
  .nd-card { padding: 9px 10px; }
  .nd-card-sub, .nd-fork, .nd-terms { font-size: 0.85rem; }
  .nd-endpoint-head { flex-wrap: wrap; row-gap: 4px; }
  .nd-chip { font-size: 0.78rem; }
  /* long unbroken strings (URLs, code paths) must never force sideways scroll */
  .nd-section { overflow-wrap: break-word; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Salvaged section — a typed NDJSON line that survived none of the parse
   repairs. Its readable fields are pulled out with a tolerant regex so the
   reader still gets the content; the amber edge marks it as recovered, not
   authored. See salvageLine() in ndjson.js. */
.nd-salvage {
  border-color: var(--accent);
  background: linear-gradient(145deg, var(--accent-soft), transparent);
}
.nd-salvage-note {
  font-size: 0.82rem;
  color: var(--accent-strong);
  letter-spacing: 0.01em;
  margin-bottom: 10px;
}
.nd-salvage-f { margin-bottom: 10px; }
.nd-salvage-f:last-child { margin-bottom: 0; }
.nd-salvage-f > b {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  margin-bottom: 3px;
}