/*
  Vidawheel engineering cockpit styles (agent-buildout/16).
  Desktop single breakpoint, no responsive design (16 §5). Mode color-temperature
  values are PLACEHOLDERS pending design (16 §4.3 / §6.2 / CLAUDE.md Unknown #7).
*/

:root {
  --bg: #11141a;
  --panel-bg: #1a1e26;
  --panel-border: #2b3140;
  --text: #e6e9ef;
  --text-dim: #9aa3b2;
  --text-faint: #6b7382;
  --accent: #7aa2f7;
  --good: #7bd88f;
  --bad: #f7768e;
  --warn: #e0af68;
  --chip-bg: #232838;
  --chip-on: #2d4a6b;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* mode color-temperature backgrounds for the chat column (PLACEHOLDER, 16 §4.3) */
  --chat-bg-s0: #15181f; /* S0 neutral, warm-grey-ish */
  --chat-bg-s1: #121821; /* S1 cool, low saturation (still) */
  --chat-bg-s2: #1d1a17; /* S2 slightly warm but restrained */
  --chat-bg-s4: #1e1c14; /* S4 warm, bright-leaning */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
}

/* ---- toolbar -------------------------------------------------------------- */
.toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 16px;
  background: #0d0f14;
  border-bottom: 1px solid var(--panel-border);
  flex-wrap: wrap;
}
.brand { font-weight: 600; letter-spacing: 0.2px; }
.brand-sub { color: var(--text-faint); font-weight: 400; font-size: 12px; }
.tb-field {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-dim);
}
.tb-field input {
  background: #161a22;
  border: 1px solid var(--panel-border);
  color: var(--text);
  border-radius: 4px;
  padding: 4px 8px;
  font-family: var(--mono);
  font-size: 12px;
  width: 130px;
}
.tb-backend { color: var(--text-faint); font-family: var(--mono); font-size: 12px; margin-left: auto; }
#clear-session {
  background: #232838;
  border: 1px solid var(--panel-border);
  color: var(--text);
  border-radius: 4px;
  padding: 5px 12px;
  cursor: pointer;
  font-size: 12px;
}
#clear-session:hover { background: #2d3346; }

/* ---- layout --------------------------------------------------------------- */
.layout {
  display: flex;
  height: calc(100vh - 49px);
}
.chat-col {
  flex: 0 0 55%;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--panel-border);
  background: var(--chat-bg-s0);
  transition: background-color 1.2s ease; /* mode color-temp transition (16 §4.3) */
}
.panel-col {
  flex: 1 1 45%;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* mode-driven chat-column color temperature (16 §4.3); S3 handled in crisis skin */
body[data-mode="S0"] .chat-col { background: var(--chat-bg-s0); }
body[data-mode="S1"] .chat-col { background: var(--chat-bg-s1); }
body[data-mode="S2"] .chat-col { background: var(--chat-bg-s2); }
body[data-mode="S4"] .chat-col { background: var(--chat-bg-s4); }

/* ---- chat stream ---------------------------------------------------------- */
.chat-stream {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.msg { max-width: 80%; }
.msg-user { align-self: flex-end; text-align: right; }
.msg-companion { align-self: flex-start; }
.msg-system { align-self: center; max-width: 92%; }
.msg-ts {
  font-size: 11px;
  color: var(--text-faint);
  margin-bottom: 3px;
  font-family: var(--mono);
}
.msg-companion .msg-ts::before { content: "◇ "; color: var(--accent); }
.bubble {
  display: inline-block;
  padding: 9px 13px;
  border-radius: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
.msg-user .bubble { background: #2d4a6b; border-bottom-right-radius: 3px; }
.msg-companion .bubble { background: #21262f; border-bottom-left-radius: 3px; }
.msg-system .bubble {
  background: #3a1d22;
  border: 1px solid var(--bad);
  color: #ffd7dd;
  font-size: 13px;
}
.msg-meta {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 3px;
  font-family: var(--mono);
}
.lint-badge {
  display: inline-block;
  margin-left: 6px;
  color: var(--warn);
  cursor: help;
  border-bottom: 1px dotted var(--warn);
}

/* typing indicator */
.typing .bubble { background: #21262f; color: var(--text-dim); }
.typing-dots span {
  display: inline-block;
  animation: blink 1.2s infinite;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; } }

/* ---- composer ------------------------------------------------------------- */
.composer {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--panel-border);
}
#message-input {
  flex: 1 1 auto;
  background: #161a22;
  border: 1px solid var(--panel-border);
  color: var(--text);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
}
#send-btn {
  background: var(--accent);
  color: #0d0f14;
  border: none;
  border-radius: 8px;
  padding: 0 18px;
  font-weight: 600;
  cursor: pointer;
}
#send-btn:disabled { opacity: 0.5; cursor: default; }

/* ---- panels --------------------------------------------------------------- */
.panel {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 12px 14px;
}
.panel-title {
  margin: 0 0 10px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-dim);
  border-bottom: 1px solid var(--panel-border);
  padding-bottom: 6px;
}
.panel-sub, .panel-title .panel-sub {
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 400;
}
.empty-note { color: var(--text-faint); font-size: 13px; margin: 4px 0; }

/* mode badge */
.mode-badge {
  display: inline-block;
  font-family: var(--mono);
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 4px;
  color: #0d0f14;
}
.mode-S0 { background: #b8c0cc; }
.mode-S1 { background: #6f8fb0; }
.mode-S2 { background: #d2a05a; }
.mode-S3 { background: var(--bad); color: #fff; }
.mode-S4 { background: #d9c45a; }

.kv { display: flex; justify-content: space-between; gap: 8px; margin: 4px 0; }
.kv-label { color: var(--text-dim); }
.kv-val { font-family: var(--mono); }
.source-tag { font-family: var(--mono); font-size: 12px; }
.source-hysteresis_hold {
  color: var(--warn);
  font-weight: 600;
  border: 1px solid var(--warn);
  border-radius: 3px;
  padding: 0 5px;
}

/* four-axis bars (16 §1.2) */
.axes { margin: 10px 0; }
.axis-row { display: grid; grid-template-columns: 78px 1fr 56px; align-items: center; gap: 8px; margin: 6px 0; }
.axis-name { font-size: 12px; color: var(--text-dim); }
.axis-val { font-family: var(--mono); font-size: 12px; text-align: right; }
.bar { height: 10px; background: #0e1117; border-radius: 5px; overflow: hidden; position: relative; }
.bar-fill { height: 100%; border-radius: 5px; }
.bar-fill.good { background: var(--good); }
.bar-fill.warn { background: var(--warn); }
.bar-fill.neutral { background: var(--accent); }
/* bidirectional valence bar: 0 centered, neg left red, pos right green (16 §1.2) */
.bar-bidir { display: flex; }
.bar-bidir .half { width: 50%; height: 100%; display: flex; }
.bar-bidir .half-neg { justify-content: flex-end; }
.bar-bidir .neg-fill { background: var(--bad); height: 100%; }
.bar-bidir .pos-fill { background: var(--good); height: 100%; }
.bar-center { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--text-faint); }

.axis-warn { color: var(--warn); cursor: help; }
.so-string { font-family: var(--mono); }
.dim-confidence .axis-name, .dim-confidence .axis-val { color: var(--text-faint); }

/* chips (strategy hints, presentation hints) */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.chip {
  font-family: var(--mono);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--chip-bg);
  color: var(--text-faint);
  border: 1px solid var(--panel-border);
}
.chip.on { background: var(--chip-on); color: var(--text); border-color: var(--accent); }

/* surfacing */
.decision-line { font-size: 14px; margin-bottom: 8px; }
.decision-surface { color: var(--good); font-weight: 600; }
.decision-abstain { color: var(--accent); font-weight: 600; }
.abstain-reason {
  font-family: var(--mono);
  background: var(--chip-bg);
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--panel-border);
  margin-top: 6px;
}
.item-card {
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 8px 10px;
  margin: 8px 0;
  background: #161a22;
}
.item-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.item-type { font-weight: 600; }
.item-facet { color: var(--text-dim); font-size: 12px; }
.m-badge {
  font-family: var(--mono);
  font-size: 11px;
  background: var(--chip-on);
  color: var(--text);
  padding: 1px 7px;
  border-radius: 4px;
}
.tense-badge {
  font-family: var(--mono);
  font-size: 11px;
  background: #3a2f17;
  color: var(--warn);
  padding: 1px 7px;
  border-radius: 4px;
}
.why-reasons { margin: 4px 0; padding-left: 18px; }
.why-reasons li { font-size: 12px; color: var(--text-dim); font-family: var(--mono); }
.why-line { font-size: 12px; color: var(--text-dim); margin: 3px 0; font-family: var(--mono); }
.capture-arrow { color: var(--accent); }
.ambient-section { margin-top: 10px; }
.ambient-section summary { cursor: pointer; color: var(--text-dim); font-size: 12px; }
.ambient-json {
  font-family: var(--mono);
  font-size: 11px;
  white-space: pre-wrap;
  background: #0e1117;
  padding: 6px 8px;
  border-radius: 4px;
  margin-top: 6px;
  color: var(--text-dim);
}

/* cost */
.cost-headline { font-size: 15px; font-family: var(--mono); margin-bottom: 8px; }
.cost-near-budget { color: var(--bad); font-weight: 700; }
.cost-split { font-family: var(--mono); font-size: 12px; color: var(--text-dim); margin: 4px 0; }
.cost-deterministic { color: var(--text-faint); font-style: italic; }

/* session subsection */
.subsection { margin-top: 10px; }
.subsection summary { cursor: pointer; color: var(--text-dim); font-size: 12px; }
.subsection-body { margin-top: 6px; }

/* ---- S3 crisis takeover skin (16 §2) ------------------------------------- */
/* de-gamified: high contrast, low saturation, no cuteness, no color-temp anim */
body[data-mode="S3"] .chat-col {
  background: #0a0c10 !important;
  transition: none;
}
body[data-mode="S3"] .msg-companion .msg-ts::before { content: ""; } /* drop ◇ cute prefix */
body[data-mode="S3"] .msg-companion .bubble {
  background: #161b22;
  border: 1px solid #3a4250;
  border-radius: 4px;
}
body[data-mode="S3"] #send-btn { background: #6f8fb0; }

.crisis-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 16px;
  background: #1a1012;
  border-top: 2px solid var(--bad);
  border-bottom: 1px solid #3a4250;
}
.crisis-bar-label { color: #ffd7dd; font-size: 13px; flex-basis: 100%; }
.crisis-link {
  color: #fff;
  background: #7a2330;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 13px;
}
.crisis-link:hover { background: #94303f; }
.crisis-emergency { background: #a01f2e; }
.spec-gap {
  color: var(--text-faint);
  font-size: 11px;
  font-family: var(--mono);
  cursor: help;
  border-bottom: 1px dotted var(--text-faint);
}
.audit-ref {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--warn);
  word-break: break-all;
}
.working-as-intended {
  color: var(--good);
  font-size: 11px;
  font-style: italic;
}

/* ---- operator governance overlay (21 §1.3 / 22 Track 2) ------------------- */
.gov-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 14, 0.78);
  z-index: 50;
  display: flex;
  padding: 24px;
}
.gov-modal {
  margin: auto;
  width: min(1200px, 96vw);
  height: min(840px, 92vh);
  background: var(--bg);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.gov-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  background: #0d0f14;
  border-bottom: 1px solid var(--panel-border);
}
.gov-title { font-weight: 600; }
.gov-head button {
  background: #161a22;
  color: var(--text);
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
}
.gov-head button:hover { border-color: var(--accent); }
.gov-auth-note {
  padding: 8px 16px;
  color: var(--bad);
  font-size: 12px;
  background: #1d1417;
  border-bottom: 1px solid var(--panel-border);
}
.gov-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--panel-border);
}
.gov-tile {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 8px 12px;
  min-width: 110px;
}
.gov-tile .gov-tile-val {
  font-size: 18px;
  font-family: var(--mono);
  color: var(--accent);
}
.gov-tile .gov-tile-label {
  font-size: 11px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.gov-tile.warn .gov-tile-val { color: var(--warn); }
.gov-body {
  display: grid;
  grid-template-columns: 260px 1fr 1fr;
  gap: 0;
  flex: 1;
  min-height: 0;
}
.gov-col {
  padding: 12px 14px;
  overflow-y: auto;
  border-right: 1px solid var(--panel-border);
}
.gov-journal-col { border-right: none; }
.gov-h3 {
  margin: 4px 0 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-dim);
}
.gov-users, .gov-queue { display: flex; flex-direction: column; gap: 4px; }
.gov-user-row, .gov-queue-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}
.gov-user-row:hover, .gov-queue-row:hover { border-color: var(--accent); }
.gov-user-row.active { border-color: var(--accent); background: var(--chip-on); }
.gov-user-count, .gov-queue-reason {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-faint);
}
.gov-card {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 8px;
}
.gov-card.status-superseded { opacity: 0.7; border-style: dashed; }
.gov-card.status-tombstoned { opacity: 0.55; border-color: var(--bad); }
.gov-card-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 4px;
}
.gov-card-summary { font-size: 13px; margin: 4px 0; }
.gov-meta { font-size: 11px; color: var(--text-faint); font-family: var(--mono); }
.gov-lineage { color: var(--accent); }
.gov-link {
  color: var(--text-dim);
  font-size: 11px;
  font-family: var(--mono);
  cursor: pointer;
  text-decoration: underline dotted;
}
.gov-verdict-btns { display: flex; gap: 6px; margin-top: 6px; }
.gov-verdict-btns button {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid var(--panel-border);
  cursor: pointer;
  background: #161a22;
  color: var(--text);
}
.gov-btn-approve:hover { border-color: var(--good); color: var(--good); }
.gov-btn-flag:hover { border-color: var(--bad); color: var(--bad); }
.gov-journal { display: flex; flex-direction: column; gap: 3px; }
.gov-event {
  display: flex;
  gap: 8px;
  font-size: 12px;
  font-family: var(--mono);
  padding: 3px 6px;
  border-left: 2px solid var(--panel-border);
}
.gov-event.is-operator { border-left-color: var(--accent); }
.gov-event-action { color: var(--text); min-width: 110px; }
.gov-event-actor { color: var(--text-faint); }