:root {
  color-scheme: dark;
  --bg: #050811;
  --bg-elevated: #080d18;
  --sidebar: #040710;
  --panel: #0b1220;
  --panel-2: #101a2b;
  --panel-3: #16233a;
  --text: #f4f7fb;
  --muted: #8e9aae;
  --quiet: #66738a;
  --border: #1c2a40;
  --soft-border: #121d2f;
  --accent: #73a7ff;
  --accent-strong: #a7c6ff;
  --accent-text: #04101f;
  --success: #58d7a2;
  --danger: #ff8e98;
  --max-thread: 1120px;
  --max-composer: 760px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f6fb;
  --bg-elevated: #ffffff;
  --sidebar: #e9eef6;
  --panel: #ffffff;
  --panel-2: #e3eaf4;
  --panel-3: #d7e2f0;
  --text: #101827;
  --muted: #5d697b;
  --quiet: #758197;
  --border: #cfd8e6;
  --soft-border: #dfe6f0;
  --accent: #295fba;
  --accent-strong: #17468f;
  --accent-text: #ffffff;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body { min-height: 100vh; overflow: hidden; }
button, textarea, input { font: inherit; }
button { color: inherit; }
button:focus-visible, textarea:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.app-shell { display: grid; grid-template-columns: 236px 1fr; height: 100vh; }
.sidebar { display: flex; flex-direction: column; min-width: 0; padding: 18px 12px 12px; background: var(--sidebar); border-right: 1px solid var(--soft-border); }
.brand-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.brand-button, .nav-item { border: 0; background: transparent; cursor: pointer; }
.brand-button { display: flex; align-items: center; gap: 11px; padding: 7px 8px; border-radius: 11px; }
.brand-button:hover, .nav-item:hover { background: var(--panel-2); }
.brand-name { font-weight: 680; letter-spacing: -.025em; }

.axis-gateway { position: relative; display: grid; place-items: center; color: var(--accent-strong); }
.axis-gateway::before { content: ""; position: absolute; inset: 0; border: 1.5px solid currentColor; border-bottom-color: transparent; border-radius: 50% 50% 17% 17%; }
.axis-gateway::after { content: ""; position: absolute; width: 24%; height: 42%; bottom: 0; border-radius: 999px 999px 3px 3px; background: currentColor; box-shadow: 0 0 20px color-mix(in srgb, currentColor 55%, transparent); }
.axis-gateway span { width: 52%; height: 52%; border: 1px solid color-mix(in srgb, currentColor 70%, transparent); border-bottom: 0; border-radius: 50% 50% 0 0; }
.axis-gateway-small { width: 28px; height: 31px; }
.axis-gateway-hero { width: 58px; height: 64px; margin: 0 auto 23px; filter: drop-shadow(0 0 24px rgba(115,167,255,.22)); }

.sidebar-nav { display: grid; gap: 3px; margin-top: 24px; }
.nav-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; border-radius: 10px; color: color-mix(in srgb, var(--text) 76%, transparent); text-align: left; font-size: 14px; }
.nav-item.is-active { color: var(--text); background: var(--panel-2); box-shadow: inset 2px 0 var(--accent); }
.nav-icon { width: 18px; color: var(--muted); text-align: center; }
.sidebar-section { min-height: 0; flex: 1; margin-top: 28px; overflow: hidden; }
.sidebar-label { padding: 0 10px 9px; color: var(--quiet); font-size: 10px; font-weight: 700; letter-spacing: .11em; }
.recent-list { display: grid; gap: 2px; max-height: 100%; overflow-y: auto; }
.recent-case { width: 100%; overflow: hidden; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; font-size: 12px; }
.recent-case:hover { color: var(--text); background: var(--panel-2); }
.lower-nav { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--soft-border); }

.main-column { position: relative; min-width: 0; height: 100vh; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); }
.topbar { z-index: 8; height: 56px; flex: 0 0 56px; display: flex; align-items: center; gap: 12px; padding: 0 20px; border-bottom: 1px solid transparent; }
body.analysis-active .topbar { border-bottom-color: var(--soft-border); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(12px); }
.topbar-title { color: var(--muted); font-size: 13px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.topbar-status { margin-left: auto; color: var(--muted); font-size: 12px; }
.icon-button { width: 34px; height: 34px; border: 0; border-radius: 9px; background: transparent; cursor: pointer; font-size: 19px; }
.icon-button:hover { background: var(--panel-2); }

.conversation { position: relative; flex: 1; min-height: 0; overflow-y: auto; scroll-behavior: smooth; padding: 24px 32px 210px; }
.welcome { position: absolute; inset: 0; min-height: 100%; display: grid; place-items: center; overflow: hidden; text-align: center; }
.welcome[hidden] { display: none; }
.hq-atmosphere { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hq-atmosphere::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 32%, rgba(45,82,140,.18), transparent 34%), linear-gradient(180deg, #03050a 0%, var(--bg) 62%); }
.star-field { position: absolute; inset: 0; opacity: .55; background-image: radial-gradient(circle, rgba(185,210,255,.7) 0 1px, transparent 1.4px), radial-gradient(circle, rgba(185,210,255,.45) 0 1px, transparent 1.2px); background-position: 0 0, 43px 29px; background-size: 127px 127px, 181px 181px; mask-image: linear-gradient(to bottom, #000 0%, transparent 68%); }
.earth-horizon { position: absolute; width: min(1050px, 95vw); aspect-ratio: 2.25 / 1; left: 50%; bottom: -34%; transform: translateX(-50%); border-radius: 50% 50% 0 0; background: radial-gradient(ellipse at 50% 3%, rgba(85,138,215,.2), rgba(8,17,33,.95) 33%, #030711 70%); border-top: 1px solid rgba(145,191,255,.55); box-shadow: 0 -8px 45px rgba(70,134,225,.22), inset 0 18px 42px rgba(67,112,180,.13); }
.earth-horizon::after { content: ""; position: absolute; inset: 10% 10% auto; height: 33%; border-radius: 50%; opacity: .4; background: radial-gradient(ellipse at 38% 55%, transparent 0 38%, rgba(97,140,192,.16) 39% 42%, transparent 43%), radial-gradient(ellipse at 67% 20%, transparent 0 34%, rgba(97,140,192,.12) 35% 38%, transparent 39%); }
.hero-content { position: relative; z-index: 2; width: min(720px, calc(100vw - 48px)); transform: translateY(-82px); }
.hero-kicker { margin-bottom: 14px; color: var(--accent-strong); font-size: 10px; font-weight: 720; letter-spacing: .22em; }
.welcome h1 { margin: 0; font-size: clamp(34px, 5vw, 58px); font-weight: 560; letter-spacing: -.05em; line-height: 1.03; }
.welcome p { margin: 17px 0 0; color: var(--muted); font-size: 14px; letter-spacing: .01em; }

.thread { position: relative; width: min(100%, var(--max-thread)); margin: 0 auto; }
.message { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; margin: 0 0 28px; }
.user-message { grid-template-columns: 1fr; }
.user-message .avatar { display: none; }
.avatar { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--panel-2); color: var(--accent-strong); font-weight: 750; font-size: 12px; }
.message-body { min-width: 0; line-height: 1.58; }
.user-message-body { display: flex; flex-direction: column; align-items: flex-start; padding: 18px 20px; border: 1px solid var(--soft-border); border-radius: 18px; background: var(--bg-elevated); }
.user-message-body::before { content: "Your question"; margin-bottom: 8px; color: var(--quiet); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.user-bubble { max-width: 100%; white-space: pre-wrap; font-size: 17px; line-height: 1.45; }
.user-context { width: 100%; margin-top: 12px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 11px; color: var(--muted); }
.user-context-label { margin-bottom: 5px; font-size: 11px; font-weight: 700; }
.user-context-text, .human-source-excerpt { white-space: pre-wrap; overflow-wrap: anywhere; }
.human-source { margin-top: 11px; }
.human-source-excerpt { margin: 5px 0 0; padding-left: 11px; border-left: 2px solid var(--accent); color: var(--muted); }
.assistant-copy h2, .assistant-copy h3 { letter-spacing: -.025em; }
.assistant-copy p { margin: 0 0 13px; }
.assistant-copy ul { margin: 8px 0 16px; padding-left: 20px; }
.assistant-copy li { margin: 6px 0; }
.muted { color: var(--muted); }

.runtime-card { margin: 2px 0 26px; padding: 18px; border: 1px solid var(--border); border-radius: 18px; background: var(--bg-elevated); }
.runtime-head { display: flex; align-items: center; gap: 10px; }
.runtime-pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--accent-strong); box-shadow: 0 0 0 5px rgba(115,167,255,.08); }
.runtime-pulse.active { animation: pulse 1.4s infinite; }
.runtime-pulse.complete { background: var(--success); animation: none; }
.runtime-pulse.failed { background: var(--danger); animation: none; }
@keyframes pulse { 50% { opacity: .35; transform: scale(.82); } }
.runtime-title { font-weight: 650; }
.runtime-state { margin-left: auto; color: var(--muted); font-size: 12px; }
.runtime-contract-note { margin: 12px 0 0; color: var(--quiet); font-size: 11px; }
.runtime-steps { display: grid; gap: 5px; margin: 16px 0 13px; }
.runtime-step { position: relative; padding: 8px 10px 8px 30px; border-radius: 9px; color: var(--quiet); font-size: 12px; }
.runtime-step::before { content: ""; position: absolute; left: 11px; top: 50%; width: 7px; height: 7px; transform: translateY(-50%); border: 1px solid var(--quiet); border-radius: 50%; }
.runtime-step.current { color: var(--text); background: var(--panel-2); }
.runtime-step.current::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px rgba(115,167,255,.09); }
.runtime-step.done { color: color-mix(in srgb, var(--success) 82%, var(--text)); }
.runtime-step.done::before { background: var(--success); border-color: var(--success); }
.runtime-step.not-observed { color: color-mix(in srgb, var(--quiet) 75%, transparent); }
.runtime-feed { display: grid; gap: 7px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--soft-border); }
.runtime-event { display: grid; grid-template-columns: 12px 1fr; gap: 8px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.runtime-event::before { content: ""; width: 5px; height: 5px; margin-top: 6px; border-radius: 50%; background: var(--quiet); }
.runtime-event.latest { color: var(--text); }
.runtime-event.latest::before { background: var(--success); }

.report { display: grid; gap: 12px; }
.report-nav { position: sticky; top: 0; z-index: 4; display: flex; gap: 6px; overflow-x: auto; padding: 10px 0 12px; background: var(--bg); scrollbar-width: none; }
.report-nav::-webkit-scrollbar { display: none; }
.report-nav button { flex: 0 0 auto; padding: 7px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-elevated); color: var(--muted); cursor: pointer; font-size: 11px; }
.report-nav button:hover { color: var(--text); border-color: var(--accent); }
.report-header, .report-section { border: 1px solid var(--soft-border); border-radius: 16px; background: var(--bg-elevated); }
.report-header { padding: 24px; background: linear-gradient(145deg, color-mix(in srgb, var(--panel-2) 65%, var(--bg-elevated)), var(--bg-elevated)); }
.report-answer { max-width: 850px; font-size: clamp(20px, 3vw, 28px); line-height: 1.35; letter-spacing: -.025em; }
.report-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.pill { display: inline-flex; align-items: center; padding: 5px 9px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: 11px; }
.report-section { padding: 21px; scroll-margin-top: 70px; }
.report-section > h3 { margin: 0 0 14px; font-size: 17px; }
.section-kicker { margin-bottom: 7px; color: var(--accent-strong); font-size: 10px; font-weight: 720; letter-spacing: .1em; text-transform: uppercase; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.detail-card { padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); }
.detail-card strong { display: block; margin-bottom: 6px; font-size: 13px; }
.detail-card p { margin: 0 0 7px; color: color-mix(in srgb, var(--text) 80%, var(--muted)); font-size: 13px; line-height: 1.5; }
.mini-heading { margin: 13px 0 6px; color: var(--text); font-size: 10px; font-weight: 720; text-transform: uppercase; letter-spacing: .07em; }
.compact-list { margin: 6px 0 10px; padding-left: 18px; color: color-mix(in srgb, var(--text) 80%, var(--muted)); font-size: 13px; line-height: 1.5; }
.relationship-map { display: grid; gap: 9px; margin: 13px 0; }
.relationship-row { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(100px, .65fr) minmax(120px, 1fr); align-items: center; gap: 9px; padding: 11px; border: 1px solid var(--soft-border); border-radius: 11px; background: var(--bg); }
.relationship-node { padding: 9px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--panel); font-size: 12px; font-weight: 650; text-align: center; }
.relationship-link { display: grid; justify-items: center; gap: 2px; color: var(--muted); }
.relationship-kind { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 10px; text-transform: capitalize; }
.relationship-arrow { color: var(--accent); font-size: 20px; line-height: 1; }
.relationship-mechanism { grid-column: 1 / -1; color: var(--muted); font-size: 12px; line-height: 1.45; text-align: center; }
.structure-map-explorer { margin: 14px 0 18px; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--bg); }
.structure-map-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--soft-border); background: var(--panel); }
.structure-map-caption { color: var(--muted); font-size: 11px; }
.structure-map-controls { display: flex; flex-wrap: wrap; gap: 6px; }
.structure-map-button { min-width: 34px; padding: 6px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-elevated); color: var(--muted); cursor: pointer; font-size: 10px; }
.structure-map-button:hover:not(:disabled) { color: var(--text); border-color: var(--accent); }
.structure-map-button:disabled { opacity: .38; cursor: default; }
.structure-map-viewport { height: clamp(440px, 56vw, 640px); overflow: hidden; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 58%); }
.structure-map-viewport svg { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.structure-map-viewport svg:active { cursor: grabbing; }
.structure-map-viewport marker path { fill: color-mix(in srgb, var(--accent) 72%, var(--muted)); }
.structure-map-edge > path:not(.structure-map-edge-hit) { fill: none; stroke: color-mix(in srgb, var(--accent) 58%, var(--border)); stroke-width: 2.2; transition: opacity .16s ease, stroke .16s ease, stroke-width .16s ease; }
.structure-map-edge-hit { fill: none; stroke: transparent; stroke-width: 16; pointer-events: stroke; cursor: pointer; }
.structure-map-edge.is-selected > path:not(.structure-map-edge-hit) { stroke: var(--accent-strong); stroke-width: 4; }
.structure-map-edge.is-muted { opacity: .18; }
.structure-map-edge.is-isolated-out { display: none; }
.structure-map-node { cursor: pointer; transition: opacity .16s ease; }
.structure-map-node circle { fill: color-mix(in srgb, var(--panel) 88%, var(--bg)); stroke: color-mix(in srgb, var(--accent) 65%, var(--border)); stroke-width: 2.4; transition: fill .16s ease, stroke .16s ease, stroke-width .16s ease; }
.structure-map-node text { fill: var(--text); font-weight: 700; pointer-events: none; paint-order: stroke; stroke: var(--bg); stroke-width: 2.8px; stroke-linejoin: round; }
.structure-map-node.is-selected circle { fill: color-mix(in srgb, var(--accent) 16%, var(--panel)); stroke: var(--accent-strong); stroke-width: 4; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 45%, transparent)); }
.structure-map-node.is-neighbor circle { stroke: color-mix(in srgb, var(--success) 75%, var(--accent)); stroke-width: 3; }
.structure-map-node.is-muted { opacity: .22; }
.structure-map-node.is-isolated-out { display: none; }
.structure-map-node.evidence-linked circle, .structure-map-edge.evidence-linked > path:not(.structure-map-edge-hit) { stroke: var(--success); }
.structure-map-inspector { display: grid; gap: 7px; min-height: 62px; padding: 13px; border-top: 1px solid var(--soft-border); background: var(--panel); }
.structure-map-inspector-title { font-size: 14px; }
.structure-map-inspector p { margin: 0; color: color-mix(in srgb, var(--text) 82%, var(--muted)); font-size: 12px; line-height: 1.5; }
.structure-map-edge-detail { padding: 9px 10px; border: 1px solid var(--soft-border); border-radius: 9px; background: var(--bg); }
.structure-map-edge-detail strong { margin-bottom: 4px; font-size: 11px; }
.structure-map-note { margin: 0; padding: 9px 12px 11px; border-top: 1px solid var(--soft-border); color: var(--quiet); font-size: 9px; line-height: 1.45; }

@media (max-width: 900px) {
  .report, .report-section, .structure-card, .structure-map-explorer { min-width: 0; max-width: 100%; }
  .structure-map-toolbar { align-items: flex-start; flex-direction: column; }
  .structure-map-controls { width: 100%; }
  .structure-map-button { flex: 1 1 auto; }
  .structure-map-viewport { width: 100%; min-width: 0; max-width: 100%; height: 500px; overflow-x: auto; overflow-y: hidden; }
  .structure-map-viewport svg { width: 760px; height: 524px; max-width: none; }
}

.challenge-list { display: grid; gap: 7px; margin-top: 12px; }
.challenge-item { border: 1px solid var(--border); border-radius: 11px; background: var(--panel); padding: 0 13px; }
.challenge-item summary { cursor: pointer; padding: 12px 0; font-size: 13px; font-weight: 650; }
.challenge-item p { margin: 0 0 10px; color: color-mix(in srgb, var(--text) 80%, var(--muted)); font-size: 13px; line-height: 1.5; }
.trace-ref { margin-top: 6px; color: var(--quiet); font-size: 10px; line-height: 1.35; letter-spacing: .02em; }
.trace-ref-heading { margin: 0 0 7px; color: var(--accent-strong); font-weight: 720; text-transform: uppercase; letter-spacing: .07em; }
.trace-basis { display: inline-block; margin: 4px 6px 0 0; padding: 2px 6px; border-radius: 999px; background: var(--panel-2); color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .05em; }
.trace-list { display: grid; gap: 8px; }
.trace-list > li { padding-right: 8px; }
.trace-statement { margin-bottom: 9px; }
.component-list, .node-explorer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 8px 0 12px; }
.component-item { padding: 10px; border: 1px solid var(--soft-border); border-radius: 9px; background: var(--bg); }
.component-item p { margin-bottom: 3px; }
.relationship-node .trace-ref, .relationship-link .trace-ref { margin-top: 3px; font-size: 9px; font-weight: 500; }
.verification-note { border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.input-boundary { border-color: color-mix(in srgb, var(--accent) 24%, var(--soft-border)); }
.input-boundary-copy { margin: 0 0 14px; padding: 12px 13px; overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); font: 12px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.evidence-summary { display: flex; flex-wrap: wrap; gap: 7px; margin: -2px 0 12px; }
.evidence-controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.evidence-controls select { min-width: 0; width: 100%; padding: 9px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--panel); color: var(--text); font-size: 11px; }
.evidence-empty { padding: 22px 10px 8px; color: var(--muted); text-align: center; font-size: 12px; }
.evidence-axis-help { margin: -3px 0 12px; color: var(--quiet); font-size: 10px; line-height: 1.45; }
.evidence-card { cursor: pointer; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.evidence-card.evidence-selected { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 14%, transparent); }
.evidence-kind { display: inline-flex; margin: 0 0 8px; padding: 3px 7px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: 9px; font-weight: 720; letter-spacing: .06em; text-transform: uppercase; }
.evidence-kind-observation { border-color: color-mix(in srgb, var(--success) 40%, var(--border)); }
.evidence-kind-inference { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
[data-evidence-refs].evidence-linked { outline: 1px solid color-mix(in srgb, var(--accent) 72%, transparent); outline-offset: 3px; border-radius: 5px; background: color-mix(in srgb, var(--accent) 8%, transparent); }
.evidence-related { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--soft-border); }
.evidence-related summary { cursor: pointer; color: var(--accent-strong); font-size: 10px; font-weight: 700; }
.evidence-related-list { display: grid; gap: 5px; margin-top: 8px; }
.evidence-related-link { width: 100%; padding: 7px 8px; border: 1px solid var(--soft-border); border-radius: 8px; background: var(--bg); color: var(--muted); text-align: left; cursor: pointer; font-size: 10px; line-height: 1.35; }
.evidence-related-link:hover { color: var(--text); border-color: var(--border); }


.comparison-workspace { overflow: hidden; }
.comparison-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -2px 0 14px; }
.comparison-summary { color: var(--muted); font-size: 11px; }
.comparison-modes { display: flex; flex-wrap: wrap; gap: 6px; }
.comparison-mode { padding: 6px 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--muted); cursor: pointer; font-size: 10px; }
.comparison-mode:hover, .comparison-mode.is-active { border-color: var(--accent); color: var(--text); background: color-mix(in srgb, var(--accent) 9%, var(--bg)); }
.explanation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); gap: 10px; align-items: stretch; }
.explanation-grid.is-many { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.explanation-card { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.explanation-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.explanation-title { margin-bottom: 0 !important; }
.explanation-standing { flex: 0 0 auto; padding: 3px 7px; font-size: 9px; }
.explanation-card[data-standing="survives"] .explanation-standing { border-color: color-mix(in srgb, var(--success) 45%, var(--border)); color: color-mix(in srgb, var(--success) 82%, var(--text)); }
.explanation-card[data-standing="rejected"] .explanation-standing { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); color: color-mix(in srgb, var(--danger) 82%, var(--text)); }
.explanation-confidence { margin: 7px 0 2px; color: var(--quiet); font-size: 10px; }
.comparison-row { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--soft-border); }
.comparison-row > .mini-heading { margin-top: 0; }
.explanation-support { margin-bottom: 0; }
.comparison-row-missing { opacity: .48; }

.node-atlas-workspace { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 10px; }
.node-atlas-index, .node-atlas-inspector { border: 1px solid var(--border); border-radius: 12px; background: var(--panel); }
.node-atlas-index { padding: 10px; align-self: start; }
.node-atlas-search { width: 100%; padding: 9px 10px; border: 1px solid var(--border); border-radius: 9px; outline: 0; background: var(--bg); color: var(--text); font-size: 11px; }
.node-atlas-list { display: grid; gap: 5px; max-height: 520px; margin-top: 9px; overflow-y: auto; }
.node-atlas-item { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 2px 8px; width: 100%; padding: 9px 10px; border: 1px solid var(--soft-border); border-radius: 9px; background: var(--bg); color: var(--text); text-align: left; cursor: pointer; }
.node-atlas-item:hover { border-color: var(--border); background: var(--panel-2); }
.node-atlas-item.is-selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--bg)); box-shadow: inset 2px 0 var(--accent-strong); }
.node-atlas-item[hidden] { display: none; }
.node-atlas-item-id { grid-row: 1 / span 2; align-self: center; color: var(--accent-strong); font-size: 9px; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
.node-atlas-item-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 680; }
.node-atlas-item-meta { color: var(--quiet); font-size: 9px; }
.node-atlas-empty { padding: 18px 8px 8px; color: var(--muted); text-align: center; font-size: 10px; }
.node-atlas-inspector { min-height: 250px; padding: 14px; }
.node-atlas-title { display: block; margin-bottom: 5px; font-size: 16px; }
.node-atlas-inspector > p { margin: 0 0 8px; color: color-mix(in srgb, var(--text) 82%, var(--muted)); font-size: 12px; line-height: 1.55; }
.node-atlas-connection-count { display: inline-flex; margin: 4px 0 6px; padding: 4px 7px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: 9px; }
.node-connection-detail { margin-top: 7px; padding: 9px 10px; border: 1px solid var(--soft-border); border-radius: 9px; background: var(--bg); }
.node-connection-detail strong { margin-bottom: 4px; font-size: 11px; }
.node-connection-detail p { margin: 0 0 4px; font-size: 11px; line-height: 1.45; }
@media (max-width: 900px) {
  .node-atlas-workspace { grid-template-columns: 1fr; }
  .node-atlas-list { max-height: 260px; }
}

.composer-wrap { position: absolute; z-index: 7; left: 0; right: 0; bottom: 10vh; padding: 18px 24px 14px; transition: bottom .35s ease, background .35s ease; }
.composer, .context-panel, .composer-note { width: min(100%, var(--max-composer)); margin-inline: auto; }
.composer { padding: 13px; border: 1px solid rgba(145,177,224,.35); border-radius: 20px; background: color-mix(in srgb, var(--panel) 88%, transparent); box-shadow: 0 18px 60px rgba(0,0,0,.4), inset 0 1px rgba(255,255,255,.04); backdrop-filter: blur(18px); }
.composer:focus-within { border-color: var(--accent); box-shadow: 0 18px 60px rgba(0,0,0,.4), 0 0 0 3px rgba(115,167,255,.08); }
.composer textarea, .context-panel textarea { width: 100%; resize: none; border: 0; outline: 0; background: transparent; color: var(--text); }
.composer textarea { min-height: 42px; max-height: 170px; padding: 6px 7px 9px; line-height: 1.45; }
.composer textarea::placeholder, .context-panel textarea::placeholder, .search-field input::placeholder { color: var(--quiet); }
.composer-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.primary-actions { display: flex; align-items: center; gap: 7px; }
.secondary-action, .text-button { border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.secondary-action { padding: 7px 8px; border-radius: 9px; }
.secondary-action:hover { color: var(--text); background: var(--panel-2); }
.mic-button { border: 1px solid var(--border); border-radius: 10px; background: transparent; color: var(--muted); padding: 8px 10px; cursor: pointer; }
.mic-button:hover { color: var(--text); background: var(--panel-2); }
.mic-button.is-listening { border-color: var(--danger); color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, transparent); }
.mic-button:disabled, .run-button:disabled { opacity: .42; cursor: not-allowed; }
.run-button { border: 0; border-radius: 10px; background: var(--accent-strong); color: var(--accent-text); padding: 9px 13px; font-weight: 680; cursor: pointer; }
.context-panel { margin-top: 8px; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); box-shadow: 0 16px 50px rgba(0,0,0,.28); }
.context-header { display: flex; justify-content: space-between; margin-bottom: 6px; color: var(--muted); font-size: 12px; }
.context-panel textarea { min-height: 78px; line-height: 1.45; }
.composer-note { margin-top: 8px; color: var(--quiet); font-size: 10px; text-align: center; }
body.analysis-active .composer-wrap { bottom: 0; background: linear-gradient(180deg, transparent, var(--bg) 28%, var(--bg)); }
body.analysis-active .composer { padding: 9px 10px; border-radius: 15px; box-shadow: 0 8px 28px rgba(0,0,0,.25); }
body.analysis-active .composer textarea { min-height: 30px; max-height: 90px; padding-bottom: 5px; }
body.analysis-active .composer-note { display: none; }

.cases-dialog, .utility-dialog { width: min(760px, calc(100vw - 30px)); max-height: min(780px, calc(100vh - 34px)); border: 1px solid var(--border); border-radius: 18px; padding: 0; background: var(--bg-elevated); color: var(--text); box-shadow: 0 28px 100px rgba(0,0,0,.6); }
.utility-dialog { width: min(520px, calc(100vw - 30px)); }
.cases-dialog::backdrop, .utility-dialog::backdrop { background: rgba(0,0,0,.7); backdrop-filter: blur(4px); }
.dialog-header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 14px; background: var(--bg-elevated); border-bottom: 1px solid var(--soft-border); }
.dialog-header h2 { margin: 2px 0 0; font-size: 22px; }
.eyebrow { color: var(--accent-strong); font-size: 9px; font-weight: 720; text-transform: uppercase; letter-spacing: .12em; }
.case-tools { padding: 12px 14px 4px; }
.search-field input { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; outline: 0; background: var(--panel); color: var(--text); }
.cases-list { display: grid; gap: 5px; padding: 9px 14px 16px; overflow-y: auto; }
.case-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px 14px; width: 100%; padding: 14px; border: 1px solid var(--soft-border); border-radius: 12px; background: var(--panel); color: inherit; text-align: left; cursor: pointer; }
.case-row:hover { border-color: var(--border); background: var(--panel-2); }
.case-question { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 620; }
.case-meta { grid-column: 1; display: flex; flex-wrap: wrap; gap: 7px; color: var(--muted); font-size: 11px; }
.case-identity { grid-column: 1; overflow-wrap: anywhere; color: var(--quiet); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 9px; }
.case-open { grid-column: 2; grid-row: 1 / span 3; align-self: center; padding: 7px 9px; border: 1px solid var(--border); border-radius: 9px; color: var(--accent-strong); font-size: 11px; }
.empty-state { padding: 32px 16px; color: var(--muted); text-align: center; }
.utility-copy { padding: 18px 20px 23px; color: color-mix(in srgb, var(--text) 82%, var(--muted)); line-height: 1.65; }
.utility-copy p { margin: 0 0 12px; }
.sidebar-scrim { position: fixed; inset: 0; z-index: 39; background: rgba(0,0,0,.58); }
.desktop-hidden, .mobile-only { display: none; }

@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; width: min(300px, 86vw); transform: translateX(-102%); transition: transform .2s ease; box-shadow: 18px 0 70px rgba(0,0,0,.45); }
  .sidebar.open { transform: translateX(0); }
  .desktop-hidden, .mobile-only { display: inline-grid; place-items: center; }
  .conversation { padding: 18px 14px 185px; }
  .composer-wrap { bottom: 7vh; padding-inline: 12px; }
  body.analysis-active .composer-wrap { bottom: 0; }
  .hero-content { transform: translateY(-65px); }
  .welcome h1 { font-size: clamp(32px, 10vw, 44px); }
  .welcome p { max-width: 310px; margin-inline: auto; line-height: 1.5; }
  .earth-horizon { width: 150vw; bottom: -18%; }
  .detail-grid, .component-list, .node-explorer-grid { grid-template-columns: 1fr; }
  .comparison-toolbar { align-items: flex-start; flex-direction: column; }
  .comparison-modes { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
  .comparison-mode { flex: 0 0 auto; }
  .explanation-grid, .explanation-grid.is-many { grid-template-columns: 1fr; }

  .evidence-controls { grid-template-columns: 1fr 1fr; }
  .relationship-row { grid-template-columns: 1fr; text-align: center; }
  .relationship-link { padding: 3px 0; }
  .relationship-arrow { transform: rotate(90deg); }
  .relationship-mechanism { grid-column: 1; }
  .report-header, .report-section { padding: 17px; border-radius: 14px; }
  .evidence-controls { grid-template-columns: 1fr; }
  .report-nav { margin-inline: -14px; padding-inline: 14px; }
  .message { grid-template-columns: 1fr; }
  .assistant-copy > .avatar { display: none; }
}

@media (max-height: 700px) {
  .hero-content { transform: translateY(-45px); }
  .axis-gateway-hero { width: 46px; height: 51px; margin-bottom: 16px; }
  .welcome h1 { font-size: clamp(30px, 5vw, 45px); }
  .composer-wrap { bottom: 4vh; }
}

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

.atlas-save-card {
  margin-top: 28px;
  padding: 22px;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: var(--panel);
}
.atlas-save-title { display: block; margin-bottom: 8px; font-size: 1.05rem; }
.atlas-save-button { margin-top: 10px; }
.atlas-save-status { margin-top: 8px; color: var(--muted); }
.atlas-save-card.is-saved { opacity: 0.86; }