* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%; background: #05070c; color: #e8d9b8;
  font-family: 'Courier New', ui-monospace, monospace; overflow: auto;
}
#orb-canvas { position: fixed; inset: 0; z-index: 0; }

.overlay { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; pointer-events: none; overflow-y: auto; min-height: 100%; }
.overlay a, .overlay button, .overlay input, .overlay select, .overlay textarea { pointer-events: auto; }

header {
  padding: 22px 28px 10px; display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 10px;
}
header h1 {
  margin: 0; font-size: 1.15rem; letter-spacing: 0.12em; font-weight: 600;
  color: #f6d68a; text-shadow: 0 0 14px rgba(246, 214, 138, 0.55);
}
header .tag { font-size: 0.72rem; color: #8a7350; letter-spacing: 0.04em; max-width: 560px; }
header .back { font-size: 0.72rem; color: #c9a55c; text-decoration: none; border: 1px solid #4a3a1e; padding: 4px 10px; border-radius: 3px; }
header .back:hover { background: rgba(246, 214, 138, 0.08); }

.tabs { display: flex; gap: 8px; padding: 0 28px; margin-top: 4px; }
.tabs button {
  background: rgba(20, 16, 8, 0.7); border: 1px solid #4a3a1e; color: #c9a55c; font-family: inherit;
  font-size: 0.72rem; letter-spacing: 0.05em; padding: 7px 14px; border-radius: 3px; cursor: pointer;
  text-transform: uppercase;
}
.tabs button.active { background: rgba(246, 214, 138, 0.14); color: #f6d68a; box-shadow: 0 0 10px rgba(246, 214, 138, 0.25); }
.tabs button:disabled { opacity: 0.45; cursor: default; }

.case-summary { padding: 10px 28px 0; font-size: 0.76rem; color: #b7a377; max-width: 640px; }

.briefing-shell {
  pointer-events: auto; width: min(620px, calc(100vw - 56px)); margin: 12px 28px 12px auto; padding: 14px 16px;
  background: linear-gradient(145deg, rgba(10, 14, 20, 0.84), rgba(12, 10, 5, 0.74));
  border: 1px solid rgba(246, 214, 138, 0.22); border-radius: 8px; backdrop-filter: blur(10px);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.3); max-height: min(66vh, 720px); overflow-y: auto;
}
.briefing-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.briefing-head h2 { margin: 2px 0 2px; font-family: Georgia, serif; font-size: 1.55rem; font-weight: 400; color: #f6d68a; }
.briefing-head p { margin: 0; color: #8a7350; font-size: 0.68rem; }
.eyebrow { color: #8a7350; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; }
.briefing-actions, .conversation-controls { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.briefing-actions button, .conversation-controls button, .conversation-row button, .evidence-button {
  background: rgba(246, 214, 138, 0.08); border: 1px solid #6a5428; color: #f6d68a; padding: 6px 9px;
  border-radius: 4px; cursor: pointer; font: inherit; font-size: 0.66rem; letter-spacing: 0.04em;
}
.briefing-actions button:hover, .conversation-controls button:hover, .conversation-row button:hover, .evidence-button:hover { background: rgba(246, 214, 138, 0.16); }
.briefing-headline { color: #d8c79a; font-size: 0.78rem; line-height: 1.45; margin: 10px 0 8px; }
.briefing-filters { display: flex; gap: 5px; margin-bottom: 9px; }
.briefing-filters button { background: transparent; border: 0; border-bottom: 1px solid transparent; color: #8a7350; padding: 3px 5px; cursor: pointer; font: inherit; font-size: 0.64rem; }
.briefing-filters button.active { color: #f6d68a; border-color: #f6d68a; }
.source-chips { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 9px; }
.source-chip { display: inline-flex; align-items: center; gap: 5px; background: rgba(20, 16, 8, 0.65); border: 1px solid #3e321d; color: #b7a377; border-radius: 999px; padding: 4px 7px; cursor: pointer; font: inherit; font-size: 0.59rem; }
.source-chip strong { color: #8fe0a0; font-size: 0.52rem; font-weight: 400; }
.source-chip.synthetic strong, .source-chip.simulated strong { color: #ffb454; }
.source-chip.snapshot strong { color: #c9a5ff; }
.source-chip.official strong, .source-chip.official-data strong { color: #7fd1ff; }
.source-dot { width: 5px; height: 5px; border-radius: 50%; background: #8fe0a0; box-shadow: 0 0 6px currentColor; }
.source-chip.synthetic .source-dot, .source-chip.simulated .source-dot { background: #ffb454; }
.source-chip.snapshot .source-dot { background: #c9a5ff; }
.source-chip.official .source-dot, .source-chip.official-data .source-dot { background: #7fd1ff; }
.briefing-updates { display: grid; gap: 7px; }
.update-card { border-left: 2px solid #6a5428; background: rgba(5, 7, 12, 0.52); padding: 9px 10px; cursor: pointer; transition: border-color 0.18s, transform 0.18s, background 0.18s; }
.update-card:hover { border-color: #f6d68a; background: rgba(246, 214, 138, 0.08); transform: translateX(-2px); }
.update-card.importance-high { border-left-color: #ff6767; }
.update-card.status-seen { opacity: 0.76; }
.update-card.status-unavailable { border-left-color: #ff6767; }
.update-topline, .update-meta { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.update-source { color: #f6d68a; font-size: 0.61rem; letter-spacing: 0.08em; text-transform: uppercase; }
.update-status { color: #8fe0a0; font-size: 0.56rem; border: 1px solid #39553d; border-radius: 999px; padding: 2px 5px; }
.status-updated .update-status { color: #ffb454; border-color: #6b4c20; }
.status-unavailable .update-status { color: #ff9c9c; border-color: #6b2828; }
.update-card h3 { margin: 5px 0 3px; color: #e8d9b8; font: 400 0.9rem Georgia, serif; }
.update-card p { margin: 0 0 6px; color: #b7a377; font-size: 0.68rem; line-height: 1.4; }
.update-meta { color: #75623e; font-size: 0.56rem; }
.evidence-button { margin-top: 7px; padding: 4px 7px; font-size: 0.58rem; }
.empty-state { color: #8a7350; font-size: 0.68rem; line-height: 1.5; padding: 12px 2px; }
.conversation { border-top: 1px solid #3e321d; margin-top: 11px; padding-top: 10px; }
.conversation-title { display: flex; justify-content: space-between; gap: 10px; color: #75623e; font-size: 0.58rem; margin-bottom: 6px; }
.calypso-status-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 5px 0 7px; font-size: 0.58rem; }
.calypso-status-row strong { color: #f6d68a; letter-spacing: 0.08em; }
.calypso-status-row strong[data-state="LISTENING"] { color: #7fd1ff; text-shadow: 0 0 8px rgba(127, 209, 255, 0.55); }
.calypso-status-row strong[data-state="END_OF_SPEECH"], .calypso-status-row strong[data-state="TRANSCRIBING"], .calypso-status-row strong[data-state="RETRIEVING"], .calypso-status-row strong[data-state="THINKING"] { color: #ffb454; }
.calypso-status-row strong[data-state="SPEAKING"] { color: #8fe0a0; text-shadow: 0 0 8px rgba(143, 224, 160, 0.55); }
.calypso-status-row span { color: #75623e; }
.calypso-status-row .calypso-error { color: #ff9c9c; letter-spacing: 0.03em; }
.conversation-row { display: flex; gap: 5px; }
.conversation-row input { flex: 1; min-width: 0; background: rgba(5, 7, 12, 0.7); border: 1px solid #4a3a1e; color: #e8d9b8; padding: 7px 8px; border-radius: 4px; font: inherit; font-size: 0.7rem; }
.conversation-response { margin: 7px 0 0; color: #d8c79a; font-size: 0.68rem; line-height: 1.45; min-height: 1.2em; }
.calypso-voice-settings { display: flex; align-items: center; gap: 7px; margin-top: 7px; color: #8a7350; font-size: 0.58rem; }
.calypso-voice-settings select { max-width: 100%; min-width: 0; flex: 1; background: rgba(5, 7, 12, 0.7); border: 1px solid #4a3a1e; color: #d8c79a; padding: 5px 6px; border-radius: 4px; font: inherit; font-size: 0.58rem; }
.calypso-voice-settings select:disabled { opacity: 0.65; }
.calypso-ai-settings { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 7px; color: #8a7350; font-size: 0.58rem; }
.calypso-ai-settings select { flex: 1; min-width: 170px; background: rgba(5, 7, 12, 0.7); border: 1px solid #4a3a1e; color: #d8c79a; padding: 5px 6px; border-radius: 4px; font: inherit; font-size: 0.58rem; }
.calypso-ai-settings button { background: rgba(246, 214, 138, 0.08); border: 1px solid #6a5428; color: #f6d68a; padding: 5px 7px; border-radius: 4px; cursor: pointer; font: inherit; font-size: 0.56rem; }
.calypso-ai-settings button:disabled { opacity: 0.55; cursor: wait; }
.calypso-progress { color: #7fd1ff; font-size: 0.55rem; min-height: 1em; }
.calypso-advanced { margin-top: 9px; border-top: 1px solid #2f2819; padding-top: 7px; }
.calypso-advanced > summary { cursor: pointer; color: #8a7350; font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; }
.calypso-advanced[open] > summary { color: #f6d68a; }
.calypso-diagnostics { margin-top: 7px; color: #75623e; font-size: 0.55rem; }
.calypso-diagnostics summary { cursor: pointer; color: #8a7350; }
.calypso-diagnostics pre { margin: 5px 0 0; max-height: 150px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; color: #8a9eaa; font: 0.52rem/1.35 'Courier New', monospace; }
.calypso-transcript { margin: 7px 0 0; color: #8a9eaa; font-size: 0.64rem; line-height: 1.4; min-height: 1.1em; }
.calypso-transcript[data-kind="LIVE"] { color: #7fd1ff; }
.calypso-transcript[data-kind="FINAL"] { color: #d8c79a; }
.calypso-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.calypso-links:empty { display: none; }
.calypso-links-label { width: 100%; color: #8a7350; font-size: 0.56rem; letter-spacing: 0.1em; }
.calypso-links a { color: #7fd1ff; font-size: 0.62rem; }
.evidence-panel { pointer-events: auto; position: fixed; z-index: 4; right: 28px; top: 22px; width: min(480px, calc(100vw - 56px)); max-height: calc(100vh - 44px); overflow-y: auto; padding: 15px; background: rgba(7, 10, 15, 0.96); border: 1px solid rgba(246, 214, 138, 0.35); border-radius: 8px; box-shadow: 0 22px 80px #000; }
.evidence-panel[hidden] { display: none; }
.evidence-head { display: flex; justify-content: space-between; gap: 10px; }
.evidence-head h2 { margin: 3px 0 0; color: #f6d68a; font: 400 1.2rem Georgia, serif; }
.evidence-head button { background: transparent; color: #b7a377; border: 0; cursor: pointer; font-size: 1.3rem; }
.evidence-summary, .evidence-freshness { color: #d8c79a; font-size: 0.7rem; line-height: 1.5; }
.evidence-freshness { color: #8a7350; }
.evidence-labels { display: flex; flex-wrap: wrap; gap: 5px; margin: 7px 0; }
.evidence-labels span { color: #8fe0a0; border: 1px solid #39553d; border-radius: 999px; padding: 2px 5px; font-size: 0.54rem; }
.evidence-links { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.evidence-links a { color: #7fd1ff; font-size: 0.64rem; }
.evidence-field { border-top: 1px solid #2f2819; padding: 7px 0; font-size: 0.64rem; color: #b7a377; }
.evidence-field span { color: #8a7350; display: inline-block; min-width: 130px; }
.evidence-field strong { color: #d8c79a; font-weight: 400; }
.evidence-field pre, .provenance pre { white-space: pre-wrap; overflow-wrap: anywhere; color: #a9966d; font: 0.58rem/1.35 'Courier New', monospace; max-height: 260px; overflow: auto; }
.provenance { color: #8a7350; font-size: 0.62rem; margin-top: 9px; }
.fomo-primary { margin-top: 10px; }
.fomo-primary-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; color: #f6d68a; }
.fomo-primary-head strong { font-size: 0.65rem; letter-spacing: 0.1em; }
.fomo-primary-note { color: #b7a377; font-size: 0.66rem; line-height: 1.45; }
.fomo-record-list { display: grid; gap: 7px; max-height: 46vh; overflow-y: auto; padding-right: 4px; }
.fomo-record { display: grid; grid-template-columns: 24px 1fr; gap: 8px; padding: 8px; border-top: 1px solid #3e321d; background: rgba(5, 7, 12, 0.42); }
.fomo-record-index { color: #8a7350; font-size: 0.62rem; padding-top: 2px; text-align: right; }
.fomo-record h3 { margin: 0 0 4px; color: #e8d9b8; font: 400 0.82rem/1.25 Georgia, serif; }
.fomo-record-meta { display: flex; flex-wrap: wrap; gap: 5px 8px; color: #8a7350; font-size: 0.56rem; }
.fomo-record p { margin: 5px 0; color: #b7a377; font-size: 0.65rem; line-height: 1.4; }
.fomo-record-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.fomo-record-links a { color: #7fd1ff; font-size: 0.6rem; }
.muted { color: #75623e; font-size: 0.6rem; }
.technical-provenance { margin-top: 10px; color: #8a7350; font-size: 0.62rem; }
.technical-provenance > summary { cursor: pointer; color: #c9a55c; }
.technical-provenance pre { max-height: 220px; }

.terminal-wrap { margin-top: auto; padding: 0 28px 22px; }
.terminal {
  background: rgba(6, 8, 5, 0.72); border: 1px solid #3a3018; border-radius: 4px; backdrop-filter: blur(2px);
  padding: 12px 16px; height: 230px; overflow-y: auto; font-size: 0.78rem; line-height: 1.55;
}
.terminal-line { white-space: pre-wrap; opacity: 0; animation: fadein 0.25s forwards; }
.terminal-line .ts { color: #6a5a3a; margin-right: 8px; }
.terminal-line .type { display: inline-block; min-width: 150px; letter-spacing: 0.03em; }
.terminal-line.CASE_CREATED .type { color: #7fd1ff; }
.terminal-line.EVIDENCE_ADDED .type { color: #8fe0a0; }
.terminal-line.REPLAY .type { color: #ffb454; }
.terminal-line.LESSON_PROPOSED .type,
.terminal-line.LESSON_STATUS_CHANGED .type,
.terminal-line.LESSON_VALIDATED .type { color: #c9a5ff; }
.terminal-line.BLOCKED .type { color: #ff6767; }
.terminal-line.BEHAVIOR_OBSERVED .type { color: #7fd1ff; }
.terminal-line.MODEL_CALLED .type { color: #8fe0a0; }
.terminal-line.ARENA_COMPARED .type { color: #ffb454; }
.terminal-line.SYSTEM1_ROUTED .type { color: #c9a5ff; }
.terminal-line .detail { color: #d8c79a; }
.terminal-line.BLOCKED .detail { color: #ff9c9c; }

@keyframes fadein { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }

.ask-panel {
  padding: 10px 28px 0; max-width: 640px; display: flex; flex-direction: column; gap: 8px;
}
.ask-panel[hidden] { display: none; }
.ask-disclosure { font-size: 0.68rem; color: #8a7350; line-height: 1.5; margin: 0; }
.ask-disclosure code { color: #b7a377; }
.ask-config, .ask-qa { display: flex; gap: 6px; flex-wrap: wrap; }
.ask-panel select, .ask-panel input, .ask-panel button {
  background: rgba(20, 16, 8, 0.7); border: 1px solid #4a3a1e; color: #e8d9b8; font-family: inherit;
  font-size: 0.72rem; padding: 6px 10px; border-radius: 3px;
}
.ask-panel input { flex: 1; min-width: 140px; }
.ask-panel button {
  color: #c9a55c; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer;
}
.ask-panel button:hover { background: rgba(246, 214, 138, 0.08); }
.ask-panel button:disabled { opacity: 0.45; cursor: default; }
.ask-qa input { min-width: 260px; }
.ask-response {
  font-size: 0.78rem; line-height: 1.55; color: #d8c79a; white-space: pre-wrap;
  min-height: 1.2em;
}
.ask-response.loading { color: #8a7350; }
.ask-response.error { color: #ff9c9c; }

footer { text-align: right; padding: 0 28px 14px; font-size: 0.65rem; color: #5a4c30; }
footer a { color: #8a7350; }

@media (max-width: 760px) {
  header { padding: 16px 14px 8px; }
  header h1 { font-size: 0.92rem; }
  header .tag { max-width: none; font-size: 0.62rem; line-height: 1.45; }
  .back { display: none; }
  .tabs { padding: 0 14px; overflow-x: auto; }
  .tabs button { white-space: nowrap; font-size: 0.61rem; padding: 6px 9px; }
  .case-summary { padding: 8px 14px 0; font-size: 0.66rem; }
  .briefing-shell { width: calc(100vw - 28px); margin: 10px 14px; max-height: none; padding: 12px; }
  .briefing-head { display: block; }
  .briefing-actions { justify-content: flex-start; margin-top: 8px; }
  .briefing-head h2 { font-size: 1.3rem; }
  .conversation-title { display: block; }
  .conversation-title span:last-child { display: block; margin-top: 3px; }
  .calypso-status-row { align-items: flex-start; flex-direction: column; gap: 3px; }
  .calypso-voice-settings { align-items: flex-start; flex-direction: column; }
  .calypso-voice-settings select { width: 100%; }
  .calypso-ai-settings { align-items: flex-start; flex-direction: column; }
  .calypso-ai-settings select { width: 100%; }
  .evidence-panel { right: 14px; top: 14px; width: calc(100vw - 28px); max-height: calc(100vh - 28px); }
  .terminal-wrap { padding: 0 14px 16px; }
  .terminal { height: 190px; font-size: 0.68rem; }
  footer { padding: 0 14px 12px; font-size: 0.56rem; }
}