/* Aedos — dark, slightly mystical research-prototype UI.
 * Single-pane layout: chat (left) + live progressive flow (right).
 * Slide-out inspector drawer for Facts / Patterns / Cache / Pipeline.
 *
 * Design vibe: 50% professional · 35% inviting · 15% mystical.
 * Background near-black with warm-orange accents; geometric sans-serif
 * (Space Grotesk) for body text; lightly rounded shapes; thin borders. */

:root {
  /* Surface palette — near-black with subtle warm undertone */
  --bg: #121212;
  --bg-elev: #181818;
  --panel: #1c1c1c;
  --panel-2: #232323;
  --panel-hover: #262626;
  --ink: #ece6dc;          /* warm off-white — feels candle-lit, not clinical */
  --ink-soft: #c8c2b8;
  --muted: #8a847a;
  --border: #2c2a26;
  --border-soft: #232220;

  /* Accent palette — warm orange primary */
  --accent: #f9731c;
  --accent-hover: #ff8a3d;
  --accent-soft: #2b1a10;   /* dark warm wash for backgrounds */
  --accent-glow: rgba(249, 115, 28, 0.18);

  /* Semantic colors — warm-leaning so they sit naturally beside orange */
  --ok: #5cc28a;
  --ok-soft: #133424;
  --bad: #ef5b54;
  --bad-soft: #3a1815;
  --warn: #e8b04d;
  --warn-soft: #322310;
  --info: #62b6cb;
  --info-soft: #15292f;

  /* Typography */
  --sans: "Space Grotesk", -apple-system, "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  /* Rounded — slightly more than before, but still restrained */
  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-bubble: 14px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.005em;
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 85% -10%, var(--accent-glow), transparent 60%),
    var(--bg);
}

/* ==== Header ==================================================== */

header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}
header h1 { font-size: 1.1rem; margin: 0; flex: 0 0 auto; }
.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.header-actions button {
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: 0.85rem;
  font-family: inherit;
  color: var(--ink-soft);
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.header-actions button:hover {
  background: var(--panel-hover);
  border-color: var(--accent);
  color: var(--ink);
}
.model-select select {
  font-family: inherit;
  font-size: 0.85rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-elev);
  color: var(--ink);
  min-width: 18em;
}

/* ==== Main split: chat | flow ===================================== */

main {
  /* iOS Safari's 100vh includes the URL/toolbar area, which cuts off
   * content. dvh tracks the live viewport. Keep vh as fallback. */
  height: calc(100vh - 46px);
  height: calc(100dvh - 46px);
  overflow: hidden;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100%;
}
.chat-pane, .flow-pane {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--panel);
}
.chat-pane { border-right: 1px solid var(--border); }
.flow-pane { background: var(--bg); }

.flow-pane-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}
.flow-pane-header h2 { margin: 0; font-size: 0.95rem; font-weight: 600; }
.hint { color: var(--muted); font-size: 0.85rem; }

.flow-container {
  flex: 1;
  overflow: auto;
  padding: 1rem;
}

/* ==== Chat ======================================================== */

.messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.msg {
  max-width: 85%;
  padding: 0.7rem 0.95rem;
  border-radius: var(--r-bubble);
  white-space: pre-wrap;
  word-wrap: break-word;
  line-height: 1.55;
}
/* User message bubble: a warm orange wash matched to the soften /
 * hedge intervention pills (var(--accent) family). Brighter than the
 * dark accent-soft we used before; dark text reads cleanly against it. */
.msg.user {
  align-self: flex-end;
  background: linear-gradient(135deg, #f9731c 0%, #e6651a 100%);
  border: 1px solid rgba(249, 115, 28, 0.45);
  color: #1a0a02;
}
.msg.user .msg-body { color: #1a0a02; }
.msg.assistant { align-self: flex-start; background: var(--panel-2); border: 1px solid var(--border); }
/* Click-to-load-flow affordance: subtle hover lift, accent border
 * when the bubble's pipeline is currently shown in the Flow View.
 * Both user AND assistant bubbles get the affordance — user bubbles
 * carry the v0.10.0 user-world-claim verification events, which
 * live on the user turn id, not the assistant's. */
.msg.clickable-flow { cursor: pointer; transition: border-color 0.12s ease, background 0.12s ease; }
.msg.clickable-flow:hover { border-color: var(--accent); }
.msg.clickable-flow.flow-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-soft); }
.msg-body { white-space: normal; word-wrap: break-word; }
/* Markdown rendered into .msg-body — style the elements the renderer
 * emits. Preserve compact spacing so chat bubbles stay tight. */
.msg-body > :first-child { margin-top: 0; }
.msg-body > :last-child  { margin-bottom: 0; }
.msg-body p              { margin: 0.4em 0; }
.msg-body h1, .msg-body h2, .msg-body h3,
.msg-body h4, .msg-body h5, .msg-body h6 { margin: 0.5em 0 0.25em; font-weight: 600; }
.msg-body h1 { font-size: 1.18em; }
.msg-body h2 { font-size: 1.10em; }
.msg-body h3 { font-size: 1.04em; }
.msg-body h4 { font-size: 1.00em; }
.msg-body h5 { font-size: 0.95em; }
.msg-body h6 { font-size: 0.90em; color: var(--muted); }
.msg-body code {
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 4px;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 0.88em;
}
.msg-body pre {
  background: rgba(255, 255, 255, 0.06);
  padding: 0.5em 0.7em;
  border-radius: 4px;
  overflow-x: auto;
  margin: 0.4em 0;
  white-space: pre;
}
.msg-body pre code { background: transparent; padding: 0; font-size: 0.85em; }
.msg-body ul, .msg-body ol { margin: 0.35em 0; padding-left: 1.5em; }
.msg-body li { margin: 0.1em 0; }
.msg-body a { color: var(--accent); text-decoration: underline; }
.msg-body a:hover { text-decoration: none; }
.msg-body strong { font-weight: 600; }
.msg-body em { font-style: italic; }
.msg-body blockquote {
  margin: 0.4em 0;
  padding: 0.3em 0.7em;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--r-sm);
}

/* Draft lifecycle inside an assistant bubble:
 *   draft-pending — bubble just created, body is "…"
 *   draft-faded   — assistant_draft event arrived; show draft text dimmed
 *                   while verification + correction run
 *   (no class)    — finalized; final text rendered un-faded */
.msg.assistant.draft-pending { color: var(--muted); font-style: italic; }
.msg.assistant.draft-faded .msg-body {
  color: var(--muted);
  opacity: 0.55;
  transition: opacity 0.15s ease;
}
.msg.assistant.draft-faded::after {
  content: "verifying claims…";
  display: block;
  margin-top: 0.4rem;
  font-size: 0.7rem;
  color: var(--accent);
  font-style: italic;
  letter-spacing: 0.02em;
}

/* "show diff" toggle: button below the bubble, hides the diff view by
 * default. Clicking the button toggles `.diff-open` on the bubble. */
.msg .show-diff-btn {
  display: inline-block;
  margin-top: 0.35rem;
  padding: 0.1rem 0.4rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 0.7rem;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
}
.msg .show-diff-btn:hover { background: var(--panel-hover); color: var(--ink); }
.msg .diff-view {
  display: none;
  margin-top: 0.35rem;
  padding: 0.4rem 0.55rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.92rem;
  white-space: pre-wrap;
  word-wrap: break-word;
  line-height: 1.45;
}
.msg.diff-open .diff-view { display: block; }
.msg.diff-open .msg-body { display: none; }

/* Inline word-level diff markers (used both in chat-bubble diff view
 * and in the Correction step's Inline diff block). */
.diff-ins {
  background: var(--ok-soft);
  color: var(--ok);
  text-decoration: none;
  border-radius: 2px;
  padding: 0 1px;
}
.diff-del {
  background: var(--bad-soft);
  color: var(--bad);
  text-decoration: line-through;
  border-radius: 2px;
  padding: 0 1px;
}

.chat-form {
  display: flex;
  gap: 0.6rem;
  padding: 0.85rem;
  border-top: 1px solid var(--border);
  background: var(--panel);
}
.chat-form textarea {
  flex: 1;
  font-family: inherit;
  font-size: 0.95rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-elev);
  color: var(--ink);
  resize: vertical;
  line-height: 1.45;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.chat-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.chat-form button {
  padding: 0 1.2rem;
  background: var(--accent);
  color: #1a0a02;
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: 0.02em;
  transition: background 0.12s ease, transform 0.06s ease;
}
.chat-form button:hover { background: var(--accent-hover); }
.chat-form button:active { transform: translateY(1px); }
.chat-form button:disabled { opacity: 0.5; cursor: wait; }

/* ==== Flow chart (progressive, click-to-expand inline) ============= */

.flow-chart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
.flow-step-wrapper {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.flow-step {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border-radius: var(--r-md);
  background: var(--panel);
  border: 1px solid var(--border);
  cursor: default;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.flow-step.flow-step-claims { cursor: default; }
.flow-step:hover { border-color: var(--border); }
.flow-step-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}
.flow-step-title { font-size: 0.85rem; font-weight: 600; color: var(--ink); }
.flow-step-duration {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 0.1rem 0.45rem;
  border-radius: var(--r-sm);
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.flow-step-meta {
  margin-top: 0.2rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--muted);
  word-break: break-word;
}
.flow-arrow { font-size: 1.2rem; line-height: 1; color: var(--muted); user-select: none; }

/* Thinking placeholder — animated. */
.flow-step.flow-step-thinking {
  border-color: var(--accent);
  border-style: dashed;
  background: var(--accent-soft);
  cursor: default;
}
.flow-step.flow-step-thinking .flow-step-title { color: var(--accent); }
.thinking-dots .thinking-anim {
  display: inline-block;
  vertical-align: bottom;
  overflow: hidden;
  width: 0;
  animation: thinking-dots 1.4s steps(4, end) infinite;
}
.thinking-dots .thinking-anim::after { content: "..."; letter-spacing: 0.1em; }
@keyframes thinking-dots { to { width: 1.4em; } }

/* Combined Claims card: the card itself isn't clickable as a whole —
 * each claim row inside it is independently expandable. Override the
 * generic .flow-step cursor/hover styles to avoid suggesting otherwise. */
.flow-step-claims { cursor: default; }
.flow-step-claims:hover { background: var(--panel); border-color: var(--border); }

/* Each claim is one row; rows are individually expandable. The
 * collapsed view (`.claim-summary`) shows the plaintext source_text +
 * a pattern badge + a verifier-method badge. The expanded body
 * (`.claim-detail`) appears under the row and shows ONLY that
 * claim's full Decision payload — slots, routing, code-gen,
 * retrieval, correction. No other claim is touched when one expands. */
.claim-list {
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  /* No max-height — let the card grow naturally so claims show in full.
   * The flow pane scrolls if the whole chart overflows. */
}
.claim-row {
  display: flex;
  flex-direction: column;
  padding: 0;
  border-radius: 5px;
  font-size: 0.85rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  overflow: hidden;
}
.claim-row.claim-expandable .claim-summary { cursor: pointer; }
.claim-row.claim-expandable:hover { border-color: var(--accent); }

.claim-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.55rem;
}
.claim-summary .claim-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--muted);
  flex-shrink: 0;
}
.claim-summary .claim-text {
  flex: 1;
  min-width: 0;
  color: var(--ink);
  font-size: 0.9rem;
  /* Show the full source-text always — wrap onto multiple lines if
   * needed. The user explicitly wants closed claims shown in full. */
  white-space: normal;
  word-wrap: break-word;
  line-height: 1.4;
}
.claim-summary .claim-pattern {
  font-size: 0.65rem;
  padding: 0.05rem 0.35rem;
}
.claim-summary .claim-method {
  font-family: var(--mono);
  font-size: 0.65rem;
  color: var(--muted);
  background: var(--border);
  padding: 0.05rem 0.35rem;
  border-radius: 3px;
  white-space: nowrap;
}
.claim-summary .claim-toggle {
  font-size: 0.7rem;
  color: var(--muted);
  width: 1em;
  text-align: center;
}

/* Status colors keyed off the row's outcome class. The dot remains
 * the primary status indicator. Instead of a heavy left bar we use:
 *   - a faint status-tinted background tone
 *   - a thin colored ring on the dot itself for emphasis
 *   - a small rounded-square corner notch (top-right) acting as a
 *     subtle "tag" — distinctive but quiet. */
.claim-row { position: relative; }
.claim-row.claim-verified .claim-dot,
.claim-row.claim-contradicted .claim-dot,
.claim-row.claim-inconclusive .claim-dot,
.claim-row.claim-not_applicable .claim-dot {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.25);
}
.claim-row.claim-verified .claim-dot { background: var(--ok); }
.claim-row.claim-contradicted .claim-dot { background: var(--bad); }
.claim-row.claim-inconclusive .claim-dot { background: var(--warn); }
.claim-row.claim-not_applicable .claim-dot { background: var(--muted); }

.claim-row.claim-verified      { background: rgba(92, 194, 138, 0.06); }
.claim-row.claim-contradicted  { background: rgba(239, 91, 84, 0.07); }
.claim-row.claim-inconclusive  { background: rgba(232, 176, 77, 0.06); }
.claim-row.claim-not_applicable { background: rgba(138, 132, 122, 0.04); }

/* Top-right corner notch: replaces the old left bar. A small slanted
 * tab made via a CSS triangle, in the status color. Subtle, present
 * only when the row carries a status. */
.claim-row.claim-verified::after,
.claim-row.claim-contradicted::after,
.claim-row.claim-inconclusive::after,
.claim-row.claim-not_applicable::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 12px 12px 0;
  border-color: transparent;
  pointer-events: none;
}
.claim-row.claim-verified::after      { border-right-color: var(--ok); }
.claim-row.claim-contradicted::after  { border-right-color: var(--bad); }
.claim-row.claim-inconclusive::after  { border-right-color: var(--warn); }
.claim-row.claim-not_applicable::after { border-right-color: rgba(138, 132, 122, 0.6); }

.claim-row.claim-cached { background: rgba(92, 194, 138, 0.10); }

/* Progressive states (in-flight Claims card). */
.claim-row.claim-pending { background: var(--bg-elev); opacity: 0.65; }
.claim-row.claim-pending .claim-dot {
  background: transparent;
  border: 1.5px solid var(--muted);
  width: 7px; height: 7px;
}
.claim-row.claim-in-flight {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.claim-row.claim-in-flight .claim-dot {
  background: var(--accent);
  animation: claim-pulse 1.0s ease-in-out infinite;
}
.claim-row.claim-in-flight .claim-method { color: var(--accent); }
@keyframes claim-pulse {
  0%, 100% { transform: scale(1.0); opacity: 1.0; }
  50%      { transform: scale(1.5); opacity: 0.55; }
}

/* Per-claim expanded body: shows ONLY this claim's Decision detail. */
.claim-row .claim-detail {
  display: none;
  padding: 0.5rem 0.6rem 0.6rem 1.2rem;
  border-top: 1px dashed var(--border);
  background: var(--bg-elev);
  font-size: 0.8rem;
  color: var(--ink);
  font-family: -apple-system, "Segoe UI", system-ui, sans-serif;
}
.claim-row.expanded .claim-detail { display: block; }

/* Card-level annotations on the Claims card — collapsed by default. */
.claims-annotations {
  margin-top: 0.5rem;
  border-top: 1px dashed var(--border);
  padding-top: 0.4rem;
}
.claims-annotations .annotations-header { margin-top: 0; border-top: none; padding-top: 0; }
.claims-annotations .annotations-header::after {
  content: " ▸";
  color: var(--muted);
}
.claims-annotations.expanded .annotations-header::after { content: " ▾"; }
.claims-annotations .claims-annotations-body { display: none; margin-top: 0.3rem; }
.claims-annotations.expanded .claims-annotations-body { display: block; }

/* Inline detail (replaces the standalone Trace tab). */
.flow-step-detail {
  width: 100%;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease;
}
.flow-step-detail.expanded {
  max-height: 1200px;
  margin-top: 0.4rem;
  padding: 0.6rem 0.8rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: auto;
}

.kv {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.6rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  margin: 0;
}
.kv dt { color: var(--muted); }
.kv dd { margin: 0; word-break: break-all; }

.draft-box {
  background: var(--panel-2);
  padding: 0.5rem 0.7rem;
  margin: 0.4rem 0;
  font-size: 0.85rem;
  white-space: pre-wrap;
  border-radius: 3px;
}
.diff-box {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  padding: 0.5rem 0.7rem;
  margin: 0.4rem 0;
  font-size: 0.85rem;
  white-space: pre-wrap;
  word-wrap: break-word;
  border-radius: 3px;
  line-height: 1.5;
}

/* ---- Claim block (used in extraction + verification details) ---- */

.claim-block {
  margin: 0.4rem 0;
  padding: 0.4rem 0.6rem;
  background: var(--bg-elev);
  border-radius: 3px;
}
.claim-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.25rem;
}
.pattern-badge {
  background: var(--accent);
  color: #1a0a02;
  padding: 0.05rem 0.4rem;
  border-radius: 3px;
  font-size: 0.7rem;
  font-family: var(--mono);
}
.pred {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.78rem;
}
.pol-pos { color: var(--ok); font-weight: 600; }
.pol-neg { color: var(--bad); font-weight: 600; }
.slots-table {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.6rem;
  font-family: var(--mono);
  font-size: 0.72rem;
}
.slot-name { color: var(--muted); }
.slot-value { word-break: break-all; }
.src {
  font-size: 0.75rem;
  color: var(--muted);
  font-style: italic;
  margin-top: 0.2rem;
}

/* ---- Verification decision blocks ---- */

.decision {
  margin: 0.4rem 0;
  padding: 0.4rem 0.6rem;
  background: var(--bg-elev);
}
.decision.decision-cached {
  background: var(--ok-soft);
}
.decision-header {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  margin-bottom: 0.25rem;
  flex-wrap: wrap;
}
.outcome {
  font-family: var(--mono);
  font-size: 0.7rem;
  padding: 0.05rem 0.4rem;
  border-radius: 3px;
  background: var(--border);
  color: var(--ink);
}
.display-status {
  font-family: var(--mono);
  font-size: 0.7rem;
  padding: 0.05rem 0.4rem;
  border-radius: 3px;
}
.display-verified { background: var(--ok); color: #1a0a02; }
.display-contradicted { background: var(--bad); color: #1a0a02; }
.display-inconclusive { background: var(--warn); color: #1a0a02; }
.display-not_applicable { background: var(--panel-2); color: var(--muted); }

.decision-meta {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--muted);
}

.routing-block {
  margin: 0.3rem 0;
  padding: 0.3rem 0.5rem;
  background: var(--info-soft);
  border-radius: 3px;
  font-size: 0.78rem;
}
.routing-method { font-weight: 600; color: var(--accent); }
.routing-reason { color: var(--muted); margin-top: 0.15rem; }

.code-gen-block, .retrieval-block {
  margin: 0.3rem 0;
  padding: 0.3rem 0.5rem;
  background: var(--panel-2);
  border-radius: 3px;
  font-size: 0.78rem;
}
.code-gen-block summary, .retrieval-block summary {
  cursor: pointer;
  font-weight: 600;
}
.code-gen-block pre, .retrieval-block pre {
  font-family: var(--mono);
  font-size: 0.7rem;
  background: var(--bg-elev);
  padding: 0.4rem;
  border-radius: 3px;
  overflow: auto;
  max-height: 200px;
  white-space: pre-wrap;
}
.snippet {
  margin: 0.3rem 0;
  padding: 0.3rem;
  background: var(--bg-elev);
  border-radius: 3px;
  font-size: 0.72rem;
}
.snippet-title { font-weight: 600; }
.snippet-url { font-family: var(--mono); font-size: 0.65rem; color: var(--muted); }
.verdict {
  font-weight: 600;
  margin-top: 0.3rem;
  font-size: 0.78rem;
}
.verdict-SUPPORTED { color: var(--ok); }
.verdict-CONTRADICTED { color: var(--bad); }
.verdict-INSUFFICIENT_EVIDENCE { color: var(--warn); }
.error-flag { color: var(--bad); margin-top: 0.3rem; }

.correction-block {
  margin-top: 0.25rem;
  padding: 0.3rem 0.5rem;
  background: var(--bad-soft);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--bad);
}
.verifier-explanation {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.2rem;
  font-style: italic;
}

/* Intervention card: shows what the corrector did to a specific claim.
 * Layout:
 *   [TYPE PILL]  "the actual claim text being modified"
 *               original_value → verified_value     (replace only)
 *               reason from the LLM corrector
 */
.intervention {
  margin: 0.35rem 0;
  padding: 0.5rem 0.65rem;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.intervention.intervention-replace { background: rgba(239, 91, 84, 0.06); }
.intervention.intervention-hedge   { background: rgba(232, 176, 77, 0.06); }
.intervention.intervention-soften  { background: rgba(249, 115, 28, 0.06); }
.intervention.intervention-remove  { background: rgba(138, 132, 122, 0.06); }

.intervention-head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.intervention-target {
  flex: 1;
  min-width: 0;
  font-size: 0.85rem;
  color: var(--ink);
  font-style: italic;
  line-height: 1.4;
}
.intervention-type {
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.15rem 0.5rem;
  border-radius: var(--r-sm);
  flex-shrink: 0;
}
.intervention-type-replace { background: var(--bad); color: #1a0a02; }
.intervention-type-hedge   { background: var(--warn); color: #1a0a02; }
.intervention-type-soften  { background: var(--accent); color: #1a0a02; }
.intervention-type-remove  { background: var(--ink); color: #1a0a02; }
.intervention-replace-line {
  margin-top: 0.35rem;
  padding: 0.3rem 0.5rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink);
  background: rgba(0, 0, 0, 0.25);
  border-radius: var(--r-sm);
}
.intervention-reason {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.4;
}

/* ---- Annotations (cache events, warnings, cost) ---- */

.annotations-header {
  margin-top: 0.6rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  border-top: 1px dashed var(--border);
  padding-top: 0.4rem;
}
.annotation {
  margin: 0.25rem 0;
  padding: 0.3rem 0.5rem;
  background: var(--bg-elev);
  border-radius: 3px;
  font-size: 0.78rem;
}
.annotation-stage {
  font-family: var(--mono);
  font-size: 0.65rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.15rem;
}
.annotation .anno-error { color: var(--bad); margin-top: 0.2rem; }
.annotation pre.json-dump {
  font-family: var(--mono);
  font-size: 0.7rem;
  background: var(--bg-elev);
  padding: 0.3rem;
  border-radius: 3px;
  overflow: auto;
  max-height: 150px;
  margin: 0.2rem 0 0;
  white-space: pre-wrap;
}

.annotation.annotation-routing_anomaly_detected,
.annotation.annotation-extractor_substitution_warning,
.annotation.annotation-verifier_failure {
  background: var(--warn-soft);
}
.annotation.annotation-turn_cost {
  background: var(--info-soft);
}

/* Cache annotations: hit / semantic_hit / miss / write distinction */
.annotation.annotation-cache_lookup.anno-hit { background: var(--ok-soft); }
.annotation.annotation-cache_lookup.anno-semantic_hit { background: var(--info-soft); }
.annotation.annotation-cache_lookup.anno-miss { background: var(--panel-hover); }
.annotation.annotation-cache_lookup.anno-error { background: var(--bad-soft); }
.annotation.annotation-cache_write { background: var(--info-soft); }

.cache-badge {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  margin-right: 0.35rem;
  letter-spacing: 0.04em;
}
.cache-badge-hit          { background: var(--ok); color: #1a0a02; }
.cache-badge-semantic_hit { background: var(--info); color: #1a0a02; }
.cache-badge-miss         { background: var(--panel-2); color: var(--muted); }
.cache-badge-error        { background: var(--bad); color: #1a0a02; }
.cache-badge-write        { background: var(--accent); color: #1a0a02; }
.cache-key { font-size: 0.7rem; color: var(--muted); margin-top: 0.2rem; }
.mono { font-family: var(--mono); }

.cache-claim-header { margin-bottom: 0.25rem; font-size: 0.75rem; }
.cache-claim-header .cache-claim-pred {
  font-family: var(--mono);
  font-weight: 600;
  margin-left: 0.15rem;
}
.cache-claim-header .cache-claim-slots {
  font-family: var(--mono);
  color: var(--muted);
  font-size: 0.7rem;
}
.cache-claim-header .cache-claim-missing {
  color: var(--muted);
  font-style: italic;
}

/* ==== Inspector drawer (slide-out from right) ==================== */

.inspector {
  position: fixed;
  top: 0;
  right: 0;
  width: 65vw;
  max-width: 900px;
  height: 100vh;
  height: 100dvh;          /* iOS dvh fix */
  background: var(--panel);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.4);
  transform: translateX(100%);
  transition: transform 0.18s ease;
  z-index: 100;
  display: flex;
  flex-direction: column;
}
.inspector.open { transform: translateX(0); }
.inspector-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  z-index: 90;
}
.inspector-backdrop.open { opacity: 1; pointer-events: auto; }

.inspector-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.inspector-tabs { display: flex; gap: 0.25rem; flex: 1; }
.inspector-tab {
  background: transparent;
  border: 1px solid transparent;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  border-radius: 6px;
  font-size: 0.9rem;
  font-family: inherit;
  /* Without this, native <button> defaults to black — invisible on
   * the dark inspector header. Use the muted-warm-white color so
   * inactive tabs read clearly without competing with the active one. */
  color: var(--ink-soft);
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.inspector-tab:hover {
  background: var(--panel-hover);
  color: var(--ink);
}
.inspector-tab.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
#inspector-close {
  background: transparent;
  border: 1px solid var(--border);
  padding: 0.3rem 0.6rem;
  cursor: pointer;
  border-radius: 4px;
  font-size: 1rem;
  /* Without explicit color, native <button> defaults to black —
   * unreadable on the dark inspector header. Same fix as the
   * inspector tabs and the new memory-scope tabs. */
  font-family: inherit;
  color: var(--ink-soft);
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
#inspector-close:hover {
  background: var(--panel-hover);
  color: var(--ink);
  border-color: var(--accent);
}
.inspector-panel {
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.inspector-panel.active { display: flex; }

/* ==== Memory tab — three-scope segmented control ==================== */
/* The Memory inspector exposes the tiered verifier's storage shape:
 * conversation-specific (microtheory), user-specific (cross-session),
 * world-specific (verification cache). Each scope is one section;
 * the segmented control above swaps which is visible. */
.memory-toolbar {
  /* Push the Refresh button to the right while the scope-tabs sit left. */
  justify-content: space-between;
}
.memory-scope-tabs {
  display: flex;
  gap: 0.25rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 0.2rem;
}
.memory-scope-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  border: 1px solid transparent;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--ink-soft);
  transition: background 0.12s ease, color 0.12s ease;
}
.memory-scope-tab:hover {
  background: var(--panel-hover);
  color: var(--ink);
}
.memory-scope-tab.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.memory-scope-count {
  font-family: var(--mono);
  font-size: 0.75rem;
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink-soft);
  border: 1px solid var(--border-soft);
}
.memory-scope-tab.active .memory-scope-count {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.memory-section {
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.memory-section.active { display: flex; }
.memory-scope-hint {
  margin: 0.6rem 1rem 0.2rem;
  padding: 0.5rem 0.7rem;
  border-left: 2px solid var(--accent);
  background: var(--panel);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 0.82rem;
}
.memory-scope-hint code {
  font-family: var(--mono);
  font-size: 0.78rem;
  background: var(--bg-elev);
  padding: 0.05rem 0.3rem;
  border-radius: 3px;
}
.memory-session-group {
  margin: 0.5rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.memory-session-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 0.7rem;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.memory-session-id {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--accent);
}

/* Memory tab fact tables — the natural-language claim leads each row;
 * status / confidence / etc. trail behind. Wide first column lets the
 * sentence breathe without truncation. */
.memory-facts-table {
  table-layout: auto;
  width: 100%;
}
.memory-facts-table th:first-child,
.memory-facts-table td:first-child {
  min-width: 18rem;
}
.memory-claim-cell {
  font-size: 0.88rem;
  line-height: 1.35;
}
.memory-claim-text {
  color: var(--ink);
}
.memory-claim-meta {
  color: var(--muted);
  font-size: 0.76rem;
  margin-left: 0.25rem;
}

/* Toolbar shared by inspector panels */
.toolbar {
  display: flex;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.8rem;
}
.toolbar label {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  color: var(--muted);
}
.toolbar select, .toolbar input[type="text"], .toolbar input:not([type]) {
  font-family: inherit;
  font-size: 0.85rem;
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 4px;
}
.toolbar button {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: 4px;
  cursor: pointer;
  /* Native button color → dark theme. The Refresh buttons in the
   * Memory and Pipeline-events panels were unreadable without this. */
  font-family: inherit;
  color: var(--ink-soft);
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.toolbar button:hover {
  background: var(--panel-hover);
  color: var(--ink);
  border-color: var(--accent);
}

/* Tables */
.facts-table, .predicates-table {
  flex: 1;
  overflow: auto;
  padding: 0 1rem 1rem;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}
th, td {
  text-align: left;
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
th {
  font-weight: 600;
  color: var(--muted);
  background: var(--panel-2);
  position: sticky;
  top: 0;
}
tr.closed td { color: var(--muted); text-decoration: line-through; }
tr.verified td { background: var(--ok-soft); }
tr.contradicted td { background: var(--bad-soft); }

/* Patterns "stage" cards */
.stage {
  margin: 0.75rem 1rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.stage-header {
  padding: 0.4rem 0.7rem;
  background: var(--panel-2);
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 0.85rem;
}
.stage-body { padding: 0.5rem 0.7rem; font-size: 0.85rem; }
.stage-body h4 {
  font-size: 0.8rem;
  margin: 0.6rem 0 0.2rem;
  color: var(--muted);
}

/* Cache stats block. Inside the new Memory > World section it sits
 * in a flex-column container; `flex: 1` here would make it grow to
 * fill the entire vertical space and push the table off-screen. */
.cache-stats {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0.5rem 1rem 0;
}
.cache-stats .cache-totals { font-size: 0.78rem; color: var(--muted); }
.cache-stats .cache-hit-rate { color: var(--ink); font-size: 0.85rem; }
.cache-stats .cache-hit-rate strong { color: var(--accent); }
.cache-stats .cache-by-stability {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--muted);
}

/* Rejected-claim line in extraction detail */
.rejected-claim {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--bad);
  margin: 0.2rem 0;
  padding: 0.2rem 0.4rem;
  background: var(--bad-soft);
  border-radius: 3px;
}

/* Smaller helper: hide scrollbar artifact in flow-step-wrapper */
.flow-step-wrapper > .flow-step-detail { max-width: 480px; }

/* ==== LLM call surface (per-card) ================================== */
/* The point of this block: every LLM call the pipeline made during
 * this step, surfaced by purpose. Plus non-LLM ops (cache lookups,
 * retrieval queries, sandbox executions). Replaces the old
 * "N pipeline events" annotation toggle — raw events live in
 * Inspector → Pipeline events instead. */
.calls-block {
  margin-top: 0.55rem;
  padding: 0.5rem 0.6rem;
  border-radius: var(--r-sm);
  background: var(--bg-elev);
  border: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.78rem;
}
.call-row, .op-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto auto;
  gap: 0.45rem;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-soft);
}
.call-row .call-purpose {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.call-row .call-count {
  color: var(--accent);
  font-weight: 600;
  font-family: var(--sans);
  font-size: 0.72rem;
}
.call-row .call-model {
  color: var(--muted);
  font-size: 0.7rem;
  white-space: nowrap;
}
.call-row .call-meta {
  color: var(--muted);
  font-size: 0.7rem;
  white-space: nowrap;
}
.call-row .call-cost {
  color: var(--accent);
  font-weight: 600;
  font-size: 0.72rem;
  white-space: nowrap;
  min-width: 4em;
  text-align: right;
}
/* Op rows (cache / web retrieval / sandbox) — same visual rhythm as
 * call rows: label on the left, detail on the right. A small CSS dot
 * on the left replaces the old emoji prefix; the dot is colored by
 * op kind so the type is recognizable at a glance. */
.op-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.op-row::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  flex-shrink: 0;
}
.op-row.op-row-cache::before     { background: var(--info); }
.op-row.op-row-retrieval::before { background: var(--accent); }
.op-row.op-row-sandbox::before   { background: var(--ok); }

.op-row .op-label {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink);
}
.op-row .op-detail {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
  text-align: right;
}

/* ==== Final-card cost summary ====================================== */
.final-summary {
  margin-top: 0.5rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  border: 1px solid rgba(249, 115, 28, 0.2);
}
.final-summary-line {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink);
}

/* ==== Interventions inline (Correction card) ====================== */
.interventions-inline {
  margin-top: 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

/* ==== Pipeline events tab (Inspector) ============================= */
.pipeline-events {
  flex: 1;
  overflow: auto;
  padding: 0 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.pipeline-event-row {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 0.55rem;
  align-items: start;
  padding: 0.4rem 0.5rem;
  border-radius: var(--r-sm);
  background: var(--bg-elev);
  border: 1px solid var(--border-soft);
}
.pipeline-event-idx {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--muted);
  min-width: 2.4em;
}
.pipeline-event-stage {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--accent);
  white-space: nowrap;
  font-weight: 500;
}
.pipeline-event-body { min-width: 0; }
.pipeline-event-body .annotation {
  margin: 0;
  background: transparent;
  border-left: none;
  padding: 0;
  font-size: 0.78rem;
}
.pipeline-event-body .annotation-stage { display: none; }
.pipeline-stats { font-family: var(--mono); font-size: 0.72rem; }

/* Per-turn collapsible block — one <details> per assistant turn,
 * newest first. Latest turn opens by default; older turns are
 * collapsed so the panel doesn't drown the operator on long
 * conversations. */
.pipeline-turn-block {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--panel);
  margin-bottom: 0.6rem;
  overflow: hidden;
}
.pipeline-turn-block > .pipeline-event-row {
  margin: 0.3rem 0.6rem;
}
.pipeline-turn-summary {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.55rem 0.8rem;
  cursor: pointer;
  list-style: none;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  user-select: none;
}
.pipeline-turn-summary::-webkit-details-marker { display: none; }
.pipeline-turn-summary::before {
  content: "▸";
  font-size: 0.7rem;
  color: var(--muted);
  width: 0.9em;
  display: inline-block;
  transition: transform 0.12s ease;
}
.pipeline-turn-block[open] > .pipeline-turn-summary::before {
  transform: rotate(90deg);
}
.pipeline-turn-role {
  font-family: var(--mono);
  font-size: 0.7rem;
  padding: 0.05rem 0.4rem;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pipeline-turn-role-user {
  background: var(--info-soft);
  color: var(--info);
}
.pipeline-turn-role-assistant {
  background: var(--accent-soft);
  color: var(--accent);
}
.pipeline-turn-id {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-weight: 500;
}
.pipeline-turn-when {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--muted);
}
.pipeline-turn-count {
  font-size: 0.72rem;
  color: var(--ink-soft);
}
.pipeline-turn-preview {
  flex: 1;
  font-size: 0.8rem;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: italic;
}

/* ==== Tighter scrollbar for the dark theme (Webkit) =============== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: var(--panel-2);
  border-radius: var(--r-sm);
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--panel-hover); }

/* =====================================================================
 * MOBILE OVERRIDES (≤ 760px) — single self-contained block.
 *
 * Layout flips to a vertical stack: pipeline flow on TOP, chat on
 * BOTTOM. Header is compacted (Inspector hidden, model select shrunk,
 * tighter padding). Textarea font bumped to 16px so iOS Safari does
 * not zoom-on-focus.
 *
 * Edit guidance: keep mobile rules in this block. Anything outside
 * is desktop. Bumping a single value here adjusts ONE phone behavior
 * without ripple — that's the scalability contract.
 * ===================================================================*/
@media (max-width: 760px) {

  /* --- Header: compact, fits everything in one row -------------- */
  header {
    padding: 0.4rem 0.6rem;
    gap: 0.5rem;
  }
  header h1 { font-size: 0.95rem; }
  .header-actions { gap: 0.35rem; }
  .header-actions button {
    padding: 0.45rem 0.65rem;
    font-size: 0.78rem;
    min-height: 36px;             /* touch target */
  }
  /* Inspector button hidden on mobile per spec; reset stays. */
  #inspector-btn { display: none; }
  /* Model select compresses; the text inside elides naturally. */
  .model-select select {
    min-width: 0;
    width: 8.5em;
    font-size: 0.78rem;
    padding: 0.3rem 0.4rem;
  }

  /* --- Main split: column stack, flow ON TOP, chat ON BOTTOM ----
   * grid-auto-flow plus explicit row sizes pin both panes onscreen
   * with neither cut off. The flow gets ~42%, chat gets ~58%. */
  main {
    /* recompute against the smaller header */
    height: calc(100vh - 44px);
    height: calc(100dvh - 44px);
  }
  .split {
    grid-template-columns: 1fr;
    grid-template-rows: 42fr 58fr;
  }
  .chat-pane { border-right: none; border-top: 1px solid var(--border); }
  /* Order in DOM is chat → flow, but mobile wants flow first. */
  .chat-pane { order: 2; }
  .flow-pane { order: 1; }

  /* Flow header sub-line shrinks to a single inline row. */
  .flow-pane-header {
    padding: 0.4rem 0.7rem;
  }
  .flow-pane-header h2 { font-size: 0.85rem; }
  .flow-container { padding: 0.6rem; }

  /* --- Chat pane on mobile -------------------------------------- */
  .messages { padding: 0.7rem; gap: 0.5rem; }
  .msg { max-width: 92%; padding: 0.6rem 0.8rem; }
  .chat-form { padding: 0.55rem 0.6rem; gap: 0.45rem; }
  /* iOS auto-zooms inputs with font-size < 16px on focus.
   * 16px exactly defeats it without changing the visual size much. */
  .chat-form textarea {
    font-size: 16px;
    padding: 0.55rem 0.65rem;
  }
  .chat-form button {
    padding: 0 1rem;
    font-size: 0.95rem;
    min-height: 44px;             /* iOS touch target */
  }

  /* --- Flow cards: tighter on small screens --------------------- */
  .flow-step-wrapper { max-width: 100%; }
  .flow-step { padding: 0.55rem 0.65rem; }
  .flow-step-title { font-size: 0.82rem; }
  .flow-step-meta { font-size: 0.7rem; }
  .calls-block { padding: 0.4rem 0.5rem; font-size: 0.74rem; }
  .call-row, .op-row { gap: 0.35rem; }
  .call-row .call-purpose, .op-row .op-label { font-size: 0.74rem; }

  /* --- Claim rows: still readable; corner notch slightly smaller. */
  .claim-summary { padding: 0.45rem 0.55rem; gap: 0.4rem; }
  .claim-summary .claim-text { font-size: 0.85rem; }
  .claim-row.claim-verified::after,
  .claim-row.claim-contradicted::after,
  .claim-row.claim-inconclusive::after,
  .claim-row.claim-not_applicable::after {
    border-width: 0 10px 10px 0;
  }
  .claim-detail { padding: 0.5rem 0.6rem 0.6rem 0.8rem; }

  /* --- Inspector drawer: full-width on phones ------------------- */
  .inspector { width: 100vw; max-width: 100vw; }
}

/* ==== Cache panel — health + audit log =========================== */
.cache-health {
  margin-top: 0.4rem;
  font-size: 0.78rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.cache-health .cache-oldest {
  font-family: var(--mono);
  color: var(--muted);
}

.cache-audit {
  margin-top: 0.6rem;
  background: var(--bg-elev);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  padding: 0.4rem 0.55rem;
  font-size: 0.75rem;
}
.cache-audit summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 600;
}
.cache-audit-row {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 0.55rem;
  align-items: baseline;
  padding: 0.2rem 0;
  font-size: 0.72rem;
}
.cache-audit-reason {
  font-family: var(--mono);
  font-size: 0.7rem;
  padding: 0.05rem 0.35rem;
  border-radius: 3px;
  background: var(--panel-2);
  color: var(--muted);
}
.cache-audit-reason.cache-audit-manual_by_slot { background: var(--info-soft); color: var(--info); }
.cache-audit-reason.cache-audit-admin_one { background: var(--accent-soft); color: var(--accent); }
.cache-audit-key { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cache-audit-prop { color: var(--accent); font-family: var(--mono); }

/* Filter bar above the cache table */
.cache-filter-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.5rem 0 0.4rem;
}
.cache-search-input {
  flex: 1;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-elev);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.8rem;
}
.cache-search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
}
.cache-filter-bar label {
  font-size: 0.78rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

/* Per-entry action buttons */
.cache-actions {
  display: flex;
  gap: 0.25rem;
  white-space: nowrap;
}
.cache-action-btn {
  padding: 0.15rem 0.45rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--ink-soft);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  line-height: 1;
}
.cache-action-btn:hover {
  background: var(--panel-hover);
  border-color: var(--accent);
  color: var(--ink);
}
.cache-action-btn.cache-action-danger:hover {
  border-color: var(--bad);
  color: var(--bad);
}

.cache-key-cell {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 0.7rem;
}

/* v0.7.13 — earned-trust badges on per-claim Decision details. */
.decision-trust {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin: 0.3rem 0;
}
.trust-badge {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: var(--r-sm);
  font-size: 0.72rem;
  font-family: var(--mono);
  letter-spacing: 0.02em;
  border: 1px solid var(--border);
}
.trust-badge.trust-reinforced {
  background: var(--ok-soft);
  color: var(--ok);
  border-color: rgba(92, 194, 138, 0.35);
}
.trust-badge.trust-semantic {
  background: var(--info-soft);
  color: var(--info);
  border-color: rgba(98, 182, 203, 0.35);
}

/* v0.7.14 — tier-provenance badges on per-claim Decision details. */
.trust-badge.trust-tier-microtheory {
  background: rgba(249, 115, 28, 0.10);
  color: var(--accent);
  border-color: rgba(249, 115, 28, 0.40);
}
.trust-badge.trust-tier-user_store {
  background: var(--info-soft);
  color: var(--info);
  border-color: rgba(98, 182, 203, 0.35);
}
.trust-badge.trust-tier-cache {
  background: var(--ok-soft);
  color: var(--ok);
  border-color: rgba(92, 194, 138, 0.35);
}