/* =====================================================================
 * Moderation Desk — Cyber-Glass Theme
 * Spec: concepts/miniapp-design-spec.md (2026-05-05)
 *
 * Design-Philosophie:
 *   Spatial Glassmorphism + Digital Neon. Void-Black Background,
 *   schwebende Rauchglas-Flächen, Neon nur für Fokus/Status.
 *
 * Accessibility:
 *   - Alle Body-Text-Kombinationen >= 4.5:1 gegen --void / --glass-*
 *   - prefers-reduced-motion: Glows ohne Transition
 *   - prefers-contrast: more: Opacities auf 0.7/0.8/0.9
 * ===================================================================== */

/* ---- Design Tokens (Spec §2) ---- */
:root[data-theme="cyber-glass"],
[data-theme="cyber-glass"] {
  /* Void / Background */
  --void:             #05050A;
  --mesh-violet:      rgba(106, 13, 173, 0.18);
  --mesh-cyber-blue:  rgba(14, 63, 122, 0.15);

  /* Rauchglas-Ebenen (Z-basiert) */
  --glass-10: rgba(10, 10, 15, 0.40);
  --glass-30: rgba(15, 15, 22, 0.50);
  --glass-50: rgba(20, 20, 30, 0.60);

  /* Kanten */
  --edge-inactive: rgba(255, 255, 255, 0.08);
  --edge-hover:    rgba(255, 255, 255, 0.16);

  /* Neon (Akzent / Status / Focus) */
  --neon-cyan:    #00E5FF;
  --neon-magenta: #FF00FF;
  --neon-green:   #1FE37D;
  --neon-amber:   #FFB347;

  /* Text (kontrast-sicher) */
  --fg-primary:   rgba(255,255,255,0.95);
  --fg-secondary: rgba(255,255,255,0.50);
  --fg-tertiary:  rgba(255,255,255,0.30);

  /* --- Alias-Namen für Backward-Compat mit bestehendem app.js / markup.
        Map auf Cyber-Glass-Äquivalente, damit wir nicht alle Selektoren
        doppelt pflegen müssen. --- */
  --bg:        var(--void);
  --bg-elev:   var(--glass-10);
  --bg-elev-2: var(--glass-30);
  --border:    var(--edge-inactive);
  --text:      var(--fg-primary);
  --text-dim:  var(--fg-secondary);
  --accent:    var(--neon-cyan);
  --ok:        var(--neon-green);
  --warn:      var(--neon-amber);
  --err:       var(--neon-magenta);
  --focus:     var(--neon-cyan);

  /* Typography */
  --font-ui:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Motion */
  --motion-fast: 120ms;
  --motion-med:  220ms;
}

/* Fallback Light-Theme (Opt-In für Menschen mit Allergie gegen Dunkelheit) */
[data-theme="light"] {
  --void:             #f6f7fb;
  --glass-10:         rgba(255,255,255,0.55);
  --glass-30:         rgba(255,255,255,0.75);
  --glass-50:         rgba(255,255,255,0.90);
  --edge-inactive:    rgba(0,0,0,0.12);
  --edge-hover:       rgba(0,0,0,0.24);
  --neon-cyan:        #0066cc;
  --neon-magenta:     #cc0066;
  --neon-green:       #0d7a3f;
  --neon-amber:       #b05d00;
  --fg-primary:       rgba(0,0,0,0.92);
  --fg-secondary:     rgba(0,0,0,0.55);
  --fg-tertiary:      rgba(0,0,0,0.32);
  --bg: var(--void); --bg-elev: var(--glass-10); --bg-elev-2: var(--glass-30);
  --border: var(--edge-inactive); --text: var(--fg-primary); --text-dim: var(--fg-secondary);
  --accent: var(--neon-cyan); --ok: var(--neon-green); --warn: var(--neon-amber);
  --err: var(--neon-magenta); --focus: var(--neon-cyan);
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* ---- Global Base ---- */
html, body {
  background: var(--void);
  color: var(--fg-primary);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Void-Background with subtle mesh gradient (static, no animation by default) */
body[data-theme="cyber-glass"] {
  background:
    radial-gradient(1200px 800px at 85% -5%, var(--mesh-violet) 0%, transparent 60%),
    radial-gradient(1000px 700px at -10% 110%, var(--mesh-cyber-blue) 0%, transparent 60%),
    var(--void);
  background-attachment: fixed;
}

/* Mono-Hinweis für Timestamps, IDs, Counters */
.mono, code, pre, .agent, [data-mono="true"] {
  font-family: var(--font-mono);
}

/* ---- Glass Base-Klasse ---- */
.glass {
  background: var(--glass-10);
  border: 1px solid var(--edge-inactive);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}
.glass[data-layer="10"] { background: var(--glass-10); }
.glass[data-layer="30"] { background: var(--glass-30); }
.glass[data-layer="50"] {
  background: var(--glass-50);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(32px) saturate(170%);
  -webkit-backdrop-filter: blur(32px) saturate(170%);
}
.glass[data-active="true"] {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 15px rgba(0, 229, 255, 0.30);
}

/* SVG-Noise-Overlay gegen Banding (~200B inline) */
.glass::after,
body[data-theme="cyber-glass"]::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>");
  opacity: 0.015;
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 0;
}
body[data-theme="cyber-glass"]::before {
  position: fixed;
  z-index: -1;
  opacity: 0.02;
}

/* ---- Topbar ---- */
#topbar {
  background: var(--glass-30);
  border-bottom: 1px solid var(--edge-inactive);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  position: relative;
  z-index: 5;
}
#topbar .logo {
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg-primary);
}
#topbar .logo .crab { margin-right: 0.5rem; filter: drop-shadow(0 0 4px rgba(0,229,255,0.4)); }

#topbar nav button {
  background: transparent;
  color: var(--fg-secondary);
  border: 1px solid transparent;
  padding: 0.4rem 0.85rem;
  border-radius: 6px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: all var(--motion-fast) ease;
  cursor: pointer;
}
#topbar nav button:hover {
  color: var(--fg-primary);
  background: var(--glass-10);
  border-color: var(--edge-inactive);
}
#topbar nav button.active {
  color: var(--fg-primary);
  background: rgba(0, 229, 255, 0.08);
  border-color: var(--neon-cyan);
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.15);
}
#topbar .right {
  color: var(--fg-secondary);
  font-size: 12px;
  font-family: var(--font-mono);
}
#topbar .right button {
  background: transparent;
  color: var(--fg-secondary);
  border: 1px solid var(--edge-inactive);
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  font-family: var(--font-ui);
  font-size: 12px;
  cursor: pointer;
  transition: all var(--motion-fast) ease;
}
#topbar .right button:hover {
  color: var(--fg-primary);
  border-color: var(--neon-cyan);
}

/* ---- Buttons (Spec §6) ---- */
button.primary,
button.approve,
.chat-composer .send,
.prompt-choice .submit,
#auth-gate button {
  background: transparent;
  color: var(--fg-primary);
  border: 1px solid var(--neon-cyan);
  border-radius: 6px;
  padding: 8px 14px;
  height: auto;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: box-shadow var(--motion-fast) ease, background var(--motion-fast) ease;
}
button.primary:hover,
button.approve:hover,
.chat-composer .send:hover,
.prompt-choice .submit:hover,
#auth-gate button:hover {
  background: rgba(0, 229, 255, 0.10);
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.35);
}
button.reject,
.dialog-backdrop button.reject {
  color: var(--fg-primary);
  background: transparent;
  border: 1px solid var(--neon-magenta);
  border-radius: 6px;
}
button.reject:hover {
  background: rgba(255, 0, 255, 0.10);
  box-shadow: 0 0 14px rgba(255, 0, 255, 0.30);
}

/* Secondary / Ghost default */
#detail .actions button,
#bulk-bar button,
.dialog .actions button {
  background: var(--glass-10);
  color: var(--fg-primary);
  border: 1px solid var(--edge-inactive);
  border-radius: 6px;
  padding: 8px 14px;
  font-family: var(--font-ui);
  font-size: 13px;
  cursor: pointer;
  transition: all var(--motion-fast) ease;
}
#detail .actions button:hover,
#bulk-bar button:hover,
.dialog .actions button:hover {
  border-color: var(--edge-hover);
  background: var(--glass-30);
}
#detail .actions button.approve,
#bulk-bar button.approve,
.dialog .actions button.primary {
  border-color: var(--neon-cyan);
  background: transparent;
}
#detail .actions button.approve:hover,
#bulk-bar button.approve:hover,
.dialog .actions button.primary:hover {
  background: rgba(0, 229, 255, 0.10);
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.35);
}
#detail .actions button.reject,
#bulk-bar button.reject {
  border-color: var(--neon-magenta);
  background: transparent;
  color: var(--fg-primary);
}

/* Send-Button: rund 36x36, neon-cyan filled (Spec §6) */
.chat-composer .send {
  width: auto;
  min-width: 92px;
  padding: 8px 16px;
}

/* ---- Inputs (Spec §6) ---- */
input[type="text"], input[type="email"], input[type="search"], input:not([type]),
textarea, select {
  background: var(--glass-30);
  color: var(--fg-primary);
  border: 1px solid var(--edge-inactive);
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  font-family: var(--font-ui);
  font-size: 13px;
  transition: border-color var(--motion-fast) ease;
  caret-color: var(--neon-cyan);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--neon-cyan);
  box-shadow: none;
}
input::placeholder, textarea::placeholder { color: var(--fg-tertiary); }

/* ---- Badges / Tags (Spec §6) ---- */
.status-badge, .impact-badge,
.agent-badge, #queue-list .item .agent,
.badge-recovery, .badge-empty, .badge-tool,
#session-inspector .ri-tag,
.ri-tag {
  background: var(--glass-50);
  border: 1px solid var(--edge-inactive);
  color: var(--fg-primary);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
}
.status-pending  { background: var(--glass-50); color: var(--fg-secondary); border-color: var(--edge-inactive); }
.status-approved { background: rgba(31,227,125,0.10); color: var(--neon-green); border-color: var(--neon-green); }
.status-done     { background: rgba(31,227,125,0.10); color: var(--neon-green); border-color: var(--neon-green); }
.status-failed   { background: rgba(255,0,255,0.10); color: var(--neon-magenta); border-color: var(--neon-magenta); }
.status-rejected { background: rgba(255,179,71,0.10); color: var(--neon-amber); border-color: var(--neon-amber); }
.status-deferred { background: var(--glass-30); color: var(--fg-secondary); border-color: var(--edge-inactive); }

.impact-readonly       { background: rgba(0,229,255,0.10); color: var(--neon-cyan); border-color: var(--neon-cyan); }
.impact-reversible     { background: rgba(31,227,125,0.10); color: var(--neon-green); border-color: var(--neon-green); }
.impact-irreversible   { background: rgba(255,179,71,0.10); color: var(--neon-amber); border-color: var(--neon-amber); }
.impact-external_send  { background: rgba(255,179,71,0.10); color: var(--neon-amber); border-color: var(--neon-amber); }
.impact-money_transfer { background: rgba(255,0,255,0.10); color: var(--neon-magenta); border-color: var(--neon-magenta); }

.badge-recovery { background: rgba(255,179,71,0.12); color: var(--neon-amber); border-color: var(--neon-amber); }
.badge-empty    { background: rgba(255,0,255,0.12); color: var(--neon-magenta); border-color: var(--neon-magenta); }
.badge-tool     { background: var(--glass-50); color: var(--fg-secondary); border-color: var(--edge-inactive); text-transform: lowercase; letter-spacing: 0.02em; font-family: var(--font-mono); }
#session-inspector .ri-tag { background: rgba(255,179,71,0.14); color: var(--neon-amber); border-color: var(--neon-amber); }

/* ---- Confidence bar ---- */
.confidence-bar { background: var(--glass-50); border: 1px solid var(--edge-inactive); border-radius: 2px; }
.confidence-fill { background: var(--neon-cyan); }
.confidence-fill.high { background: var(--neon-green); }
.confidence-fill.mid  { background: var(--neon-amber); }
.confidence-fill.low  { background: var(--neon-magenta); }

/* ---- Moderation Tab — Queue List ---- */
#queue-list {
  background: var(--glass-10);
  border-right: 1px solid var(--edge-inactive);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}
#queue-list .filter-bar {
  background: var(--glass-30);
  border-bottom: 1px solid var(--edge-inactive);
}
#queue-list .item {
  border-bottom: 1px solid var(--edge-inactive);
  border-left: 2px solid var(--agent-neon, var(--fg-tertiary));
  padding-left: calc(1rem - 2px);
  transition: background var(--motion-fast) ease, box-shadow var(--motion-fast) ease, border-left-color var(--motion-fast) ease;
}
#queue-list .item:hover {
  background: var(--glass-30);
  border-left-color: var(--agent-neon, var(--fg-secondary));
}
#queue-list .item.selected {
  background: var(--glass-30);
  border-left: 2px solid var(--neon-cyan);
  padding-left: calc(1rem - 2px);
  box-shadow: inset 0 0 12px rgba(0, 229, 255, 0.10);
}
#queue-list .item .agent {
  background: var(--glass-50);
  border: 1px solid var(--edge-inactive);
  color: var(--fg-secondary);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#queue-list .item .score { font-family: var(--font-mono); color: var(--fg-secondary); }
#queue-list .item .kind  { color: var(--fg-tertiary); font-family: var(--font-mono); }
#queue-list .empty       { color: var(--fg-secondary); }

#bulk-bar {
  background: var(--glass-50);
  border-top: 1px solid var(--edge-inactive);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}

/* ---- Moderation Tab — Detail ---- */
#detail {
  background: var(--glass-10);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}
#detail .empty { color: var(--fg-secondary); }
#detail .header .agent-badge {
  border-left: 2px solid var(--agent-neon, var(--fg-secondary));
  padding-left: 8px;
}
#detail .header .kind { color: var(--fg-secondary); font-family: var(--font-mono); font-size: 12px; }
#detail .header .score { color: var(--fg-secondary); font-family: var(--font-mono); }
#detail h1.summary { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--fg-primary); }
#detail .payload {
  background: var(--glass-30);
  border: 1px solid var(--edge-inactive);
  border-radius: 8px;
}
#detail .payload-row .k { color: var(--fg-secondary); font-family: var(--font-mono); font-size: 12px; }
#detail .audit { border-top: 1px solid var(--edge-inactive); }
#detail .audit h3 { color: var(--fg-secondary); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
#detail .audit .row { color: var(--fg-secondary); font-family: var(--font-mono); font-size: 12px; }

/* ---- Session Inspector ---- */
#session-inspector {
  border-top: 1px solid var(--edge-inactive);
  margin-top: 1.5rem;
  padding-top: 1rem;
}
#session-inspector h3 {
  color: var(--fg-secondary);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
#session-inspector table { width: 100%; border-collapse: collapse; }
#session-inspector th {
  color: var(--fg-tertiary);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: left;
  padding: 4px 8px;
  border-bottom: 1px solid var(--edge-inactive);
}
#session-inspector td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--edge-inactive);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-secondary);
}
#session-inspector td.role-user      { color: var(--neon-cyan); }
#session-inspector td.role-assistant { color: var(--fg-primary); }
#session-inspector td.role-tool      { color: var(--fg-tertiary); }
#session-inspector td.preview {
  font-family: var(--font-ui);
  color: var(--fg-primary);
}
#session-inspector #si-refresh {
  background: transparent;
  border: 1px solid var(--edge-inactive);
  color: var(--fg-secondary);
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#session-inspector #si-refresh:hover { border-color: var(--neon-cyan); color: var(--fg-primary); }

/* ---- Chat Tab ---- */
.chat-toolbar {
  background: var(--glass-30);
  border-bottom: 1px solid var(--edge-inactive);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  gap: 0.5rem;
  padding: 0.6rem 1rem;
}
.chat-toolbar label {
  color: var(--fg-tertiary);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.chat-toolbar .stat { color: var(--fg-tertiary); font-family: var(--font-mono); font-size: 11px; }
.chat-toolbar select { min-width: 140px; }
.chat-toolbar button {
  background: var(--glass-30);
  color: var(--fg-secondary);
  border: 1px solid var(--edge-inactive);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
}
.chat-toolbar button:hover { border-color: var(--neon-cyan); color: var(--fg-primary); }

/* Realtime status pill (reconnecting badge) */
.chat-toolbar .realtime-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--edge-inactive);
  background: var(--glass-50);
  color: var(--fg-secondary);
}
.chat-toolbar .realtime-pill[data-state="live"]          { border-color: var(--neon-green); color: var(--neon-green); }
.chat-toolbar .realtime-pill[data-state="connecting"]    { border-color: var(--neon-amber); color: var(--neon-amber); }
.chat-toolbar .realtime-pill[data-state="reconnecting"]  { border-color: var(--neon-amber); color: var(--neon-amber); }
.chat-toolbar .realtime-pill[data-state="error"]         { border-color: var(--neon-magenta); color: var(--neon-magenta); }
.chat-toolbar .realtime-pill::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  box-shadow: 0 0 6px currentColor;
}

#chat-stream {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.25rem;
  font-size: 14px;
  line-height: 1.45;
}

/* Message Bubbles (Spec §6: kein Tail, 2px Left-Border in Agent-Farbe) */
.turn {
  margin-bottom: 14px;
  padding: 10px 14px;
  background: var(--glass-30);
  border: 1px solid var(--edge-inactive);
  border-left: 2px solid var(--agent-neon, var(--fg-secondary));
  border-radius: 8px;
  max-width: 680px;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  content-visibility: auto;
  contain-intrinsic-size: 120px 320px;
}
.turn.role-user {
  border-left-color: var(--neon-cyan);
  margin-left: auto;
  background: var(--glass-30);
}
.turn.role-assistant {
  border-left-color: var(--agent-neon, var(--fg-secondary));
}
.turn.role-tool {
  border-left-color: var(--fg-tertiary);
  background: var(--glass-10);
  max-width: 680px;
}
.turn.role-system {
  border-left-color: #C3A3FF;
}

.turn-head {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 6px;
  color: var(--fg-tertiary);
  font-family: var(--font-mono);
  font-size: 11px;
}
.turn-head .role {
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.turn.role-user     .turn-head .role { color: var(--neon-cyan); }
.turn.role-assistant .turn-head .role { color: var(--agent-neon, var(--fg-primary)); }
.turn.role-tool     .turn-head .role { color: var(--fg-tertiary); }

.turn-body {
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--fg-primary);
  font-family: var(--font-ui);
}
.turn-body pre {
  background: var(--void);
  border: 1px solid var(--edge-inactive);
  border-radius: 6px;
  padding: 8px 12px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 12px;
}
.turn-body code {
  background: var(--glass-50);
  padding: 1px 6px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  border: 1px solid var(--edge-inactive);
}
.turn-body.tool-content {
  color: var(--fg-secondary);
  font-family: var(--font-mono);
  font-size: 12px;
  max-height: 160px;
  overflow: auto;
  background: var(--void);
  border: 1px solid var(--edge-inactive);
  border-radius: 6px;
  padding: 8px;
}
.turn-body.tool-content.expanded { max-height: none; }
.turn-body .tool-toggle {
  color: var(--neon-cyan);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 10px;
  margin-left: 6px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ---- Prompt-Choice Widget (Spec §8) ---- */
.prompt-choice {
  margin: 12px 0;
  padding: 12px 14px;
  background: var(--glass-50);
  border: 1px solid var(--edge-inactive);
  border-radius: 8px;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.prompt-choice .question {
  font-size: 15px;
  font-weight: 500;
  color: var(--fg-primary);
  margin-bottom: 10px;
}
.prompt-choice .options { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.prompt-choice .opt {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 10px;
  background: var(--glass-30);
  border: 1px solid var(--edge-inactive);
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  color: var(--fg-primary);
  font-family: var(--font-ui);
  font-size: 13px;
  transition: all var(--motion-fast) ease;
}
.prompt-choice .opt:hover {
  border-color: var(--neon-cyan);
  background: rgba(0,229,255,0.06);
}
.prompt-choice .opt.selected {
  border-color: var(--neon-cyan);
  background: rgba(0,229,255,0.10);
  box-shadow: 0 0 10px rgba(0,229,255,0.20);
}
.prompt-choice .opt .opt-id {
  background: var(--glass-50);
  color: var(--fg-secondary);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid var(--edge-inactive);
  min-width: 20px;
  text-align: center;
}
.prompt-choice .opt.selected .opt-id {
  background: var(--neon-cyan);
  color: var(--void);
  border-color: var(--neon-cyan);
}
.prompt-choice textarea, .prompt-choice input[type="text"] {
  width: 100%;
  margin-bottom: 8px;
}
.prompt-choice textarea { min-height: 50px; resize: vertical; }
.prompt-choice .submit { margin-top: 4px; }
.prompt-choice .submit:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.prompt-choice .resolved {
  background: rgba(31,227,125,0.12);
  color: var(--neon-green);
  border: 1px solid var(--neon-green);
  padding: 4px 10px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: inline-block;
}

/* ---- Chat Composer ---- */
.chat-composer {
  background: var(--glass-30);
  border-top: 1px solid var(--edge-inactive);
  padding: 12px 16px;
  gap: 8px;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.chat-composer textarea {
  flex: 1;
  min-height: 48px;
  max-height: 200px;
  resize: vertical;
  background: var(--void);
  border: 1px solid var(--edge-inactive);
}
.chat-composer .draft-note {
  color: var(--fg-tertiary);
  font-family: var(--font-mono);
  font-size: 10px;
  align-self: center;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  min-width: 120px;
  text-align: right;
}

/* ---- Auth Gate ---- */
#auth-gate .card {
  background: var(--glass-30);
  border: 1px solid var(--edge-inactive);
  border-radius: 12px;
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  box-shadow: 0 0 40px rgba(0,229,255,0.08);
}
#auth-gate h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
#auth-gate p  { color: var(--fg-secondary); font-size: 13px; line-height: 1.5; }
#auth-gate input { background: var(--void); border: 1px solid var(--edge-inactive); }
#auth-gate button { width: 100%; }
#auth-gate .msg.ok  { color: var(--neon-green); font-family: var(--font-mono); font-size: 12px; }
#auth-gate .msg.err { color: var(--neon-magenta); font-family: var(--font-mono); font-size: 12px; }

/* ---- Tasks Tab ---- */
.tasks-row {
  background: var(--glass-30);
  border: 1px solid var(--edge-inactive);
  border-radius: 8px;
  padding: 0.6rem 0.85rem;
  transition: background var(--motion-fast) ease;
}
.tasks-row:hover {
  background: var(--glass-50);
  border-color: var(--edge-hover);
}
.tasks-row .col-agent { color: var(--fg-secondary); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; }
.tasks-row .col-kind  { color: var(--fg-secondary); font-family: var(--font-mono); font-size: 12px; }
.tasks-row .col-time  { color: var(--fg-tertiary); font-family: var(--font-mono); font-size: 11px; }

/* ---- Roadmap Tab ---- */
.roadmap-agent h3 {
  color: var(--fg-primary);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.6rem;
}
.roadmap-task {
  background: var(--glass-30);
  border: 1px solid var(--edge-inactive);
  border-radius: 6px;
  padding: 0.5rem;
  font-size: 12px;
  color: var(--fg-primary);
}
.roadmap-task .bar { background: var(--glass-50); border-radius: 5px; overflow: hidden; border: 1px solid var(--edge-inactive); }
.roadmap-task .bar-fill { background: var(--neon-cyan); box-shadow: 0 0 6px rgba(0,229,255,0.30); }
.roadmap-task .bar-fill.done { background: var(--neon-green); box-shadow: 0 0 6px rgba(31,227,125,0.30); }
.roadmap-task .bar-fill.failed { background: var(--neon-magenta); box-shadow: 0 0 6px rgba(255,0,255,0.30); }
.roadmap-task .dates { color: var(--fg-tertiary); font-family: var(--font-mono); }

/* ---- Toasts ---- */
#toasts .toast {
  background: var(--glass-50);
  border: 1px solid var(--edge-inactive);
  color: var(--fg-primary);
  border-radius: 8px;
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  padding: 10px 14px;
  font-size: 13px;
  max-width: 360px;
}
#toasts .toast.ok  { border-color: var(--neon-green); }
#toasts .toast.err { border-color: var(--neon-magenta); }

/* ---- Dialog ---- */
.dialog-backdrop { background: rgba(5,5,10,0.65); backdrop-filter: blur(4px); }
.dialog {
  background: var(--glass-50);
  border: 1px solid var(--edge-inactive);
  border-radius: 12px;
  padding: 1.5rem;
  min-width: 360px;
  max-width: 540px;
  backdrop-filter: blur(32px) saturate(170%);
  -webkit-backdrop-filter: blur(32px) saturate(170%);
  box-shadow: 0 8px 40px rgba(0,0,0,0.6), 0 0 20px rgba(0,229,255,0.12);
}
.dialog h3 { font-size: 15px; font-weight: 600; margin-bottom: 1rem; color: var(--fg-primary); }

/* ---- Focus State (accessibility) ---- */
:focus-visible {
  outline: 2px solid var(--neon-cyan);
  outline-offset: 2px;
  box-shadow: 0 0 12px rgba(0,229,255,0.35);
}

/* =====================================================================
 * Split-View Layout (Spec §12.1: Desktop Split, Mobile Tabs)
 * ===================================================================== */

/* Default: single-column, tab-switched (mobile + small desktop). */
#main {
  display: flex;
  overflow: hidden;
}

/* Desktop: >= 900px → Split-View Chat. Chat tab becomes a 3-column
   grid: Moderation left, resize handle, Chat right. Both panels stay
   visible, regardless of active-tab (except Tasks/Roadmap which still
   use full-width swap). */
@media (min-width: 900px) {
  body[data-layout="split"] #main[data-active-tab="chat"] {
    display: grid;
    grid-template-columns: var(--split-left, 1fr) 4px var(--split-right, 1fr);
    grid-template-rows: 100%;
  }
  body[data-layout="split"] #main[data-active-tab="chat"] #moderation {
    display: flex !important;
    grid-column: 1;
    min-width: 0;
    overflow: hidden;
  }
  body[data-layout="split"] #main[data-active-tab="chat"] #split-handle {
    display: block;
    grid-column: 2;
  }
  body[data-layout="split"] #main[data-active-tab="chat"] #chat {
    display: flex !important;
    grid-column: 3;
    min-width: 0;
  }
  body[data-layout="split"] #main[data-active-tab="chat"] #tasks,
  body[data-layout="split"] #main[data-active-tab="chat"] #roadmap,
  body[data-layout="split"] #main[data-active-tab="chat"] #auth-gate {
    display: none !important;
  }
}

#split-handle {
  display: none;
  background: var(--edge-inactive);
  cursor: col-resize;
  transition: background var(--motion-fast) ease;
  touch-action: none;
}
#split-handle:hover, #split-handle[data-dragging="true"] {
  background: var(--neon-cyan);
  box-shadow: 0 0 8px rgba(0,229,255,0.35);
}

/* =====================================================================
 * Accessibility (Spec §9)
 * ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .glass, .turn, .chat-toolbar, .chat-composer, #topbar,
  .dialog, #toasts .toast {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .glass { background: rgba(10,10,15,0.85); }
}

@media (prefers-contrast: more) {
  [data-theme="cyber-glass"] {
    --glass-10: rgba(10,10,15,0.70);
    --glass-30: rgba(15,15,22,0.80);
    --glass-50: rgba(20,20,30,0.90);
    --edge-inactive: rgba(255,255,255,0.24);
    --fg-secondary: rgba(255,255,255,0.75);
    --fg-tertiary:  rgba(255,255,255,0.55);
  }
}

/* Scrollbars (subtle) */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--edge-inactive);
  border-radius: 4px;
}
*::-webkit-scrollbar-thumb:hover { background: var(--edge-hover); }