/* =====================================================================
 * 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;
}

/*
 * Light-Theme — Moodboard-Style (Gemini "Synapse" Boards-Look):
 *   heller Grau-Background + sichtbares Wireframe + Color-Mesh
 *   Karten sind transluzentes weißes Glas (blur auf Background).
 *   Primär Violett, Akzent Cyan/Turkis.
 */
[data-theme="light"] {
  /* Background — warmes Hell-Grau */
  --void:             #EEF0F5;
  --wireframe-ink:    rgba(60, 50, 110, 0.14);
  /* Karten-/Glas-Ebenen als transluzente weiche weiße Flächen */
  --glass-10:         rgba(255,255,255,0.55);
  --glass-30:         rgba(255,255,255,0.72);
  --glass-50:         rgba(255,255,255,0.88);
  --edge-inactive:    rgba(40, 30, 80, 0.08);
  --edge-hover:       rgba(40, 30, 80, 0.18);
  /* Akzente — Moodboard-Palette */
  --neon-cyan:        #00BFC6;   /* Senden / Focus / Status-OK-Akzent */
  --neon-violet:      #6A0DAD;   /* Primärmarke / Logo / Active-Tab */
  --neon-magenta:     #D81B93;   /* Rejection / Destructive */
  --neon-green:       #19A06B;
  --neon-amber:       #E07F16;
  --fg-primary:       #1B1730;
  --fg-secondary:     #4A4565;
  --fg-tertiary:      #7A7590;
  /* Legacy-Alias-Tokens (alte Inline-Styles benutzen die noch) */
  --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-violet); --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;
  /* Weiche Kartenschatten statt Glow */
  --card-shadow:  0 1px 2px rgba(20, 15, 60, 0.04),
                  0 8px 24px rgba(20, 15, 60, 0.06);
  --card-shadow-hover:
                  0 2px 4px rgba(20, 15, 60, 0.06),
                  0 16px 32px rgba(20, 15, 60, 0.10);
}

/*
 * Light-Theme Hintergrund: Farbiger Mesh (Violett+Cyan, sehr dezent)
 * + sichtbares Wireframe-Raster. Der Blur der Glas-Panels nimmt den
 * Mesh auf und wird dadurch sichtbar.
 */
body[data-theme="light"] {
  background-color: var(--void);
  background-image:
    radial-gradient(1100px 820px at 88% -5%, rgba(106, 13, 173, 0.20) 0%, transparent 62%),
    radial-gradient(950px 720px at -8% 108%, rgba(0, 191, 198, 0.18) 0%, transparent 62%),
    linear-gradient(var(--wireframe-ink) 1px, transparent 1px),
    linear-gradient(90deg, var(--wireframe-ink) 1px, transparent 1px);
  background-size: auto, auto, 48px 48px, 48px 48px;
  background-attachment: fixed;
}

/* ---- 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;
}

/* =========================================================
 * Light-Theme component overrides (Moodboard Look).
 * Flache, weiche Karten mit leichtem Schatten statt Glass-Blur.
 * ========================================================= */
[data-theme="light"] #topbar {
  background: rgba(255, 255, 255, 0.72);
  border-bottom: 1px solid var(--edge-inactive);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 1px 2px rgba(20, 15, 60, 0.04);
}
[data-theme="light"] #topbar .logo { color: var(--neon-violet); }
[data-theme="light"] #topbar nav button {
  color: var(--fg-secondary);
  background: transparent;
  border: 1px solid transparent;
  padding: 0.38rem 0.9rem;
  border-radius: 999px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--motion-fast) ease;
}
[data-theme="light"] #topbar nav button:hover {
  color: var(--fg-primary);
  background: rgba(106, 13, 173, 0.06);
}
[data-theme="light"] #topbar nav button.active {
  color: #FFFFFF;
  background: var(--neon-violet);
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(106, 13, 173, 0.30);
}
[data-theme="light"] #topbar .right { color: var(--fg-secondary); }
[data-theme="light"] #topbar .right button {
  background: transparent;
  color: var(--fg-secondary);
  border: 1px solid var(--edge-inactive);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  font-size: 12px;
}
[data-theme="light"] #topbar .right button:hover {
  color: var(--fg-primary);
  border-color: var(--neon-violet);
}

/* Panels (Queue / Detail / Tasks / Roadmap) als Glas-Karten */
[data-theme="light"] #queue-list,
[data-theme="light"] #detail,
[data-theme="light"] .detail-pane,
[data-theme="light"] #tasks,
[data-theme="light"] #roadmap,
[data-theme="light"] #chat {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.70);
  border-radius: 14px;
  box-shadow:
    0 1px 2px rgba(20, 15, 60, 0.04),
    0 10px 30px rgba(20, 15, 60, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  margin: 10px;
  overflow: hidden;
}
[data-theme="light"] #queue-list .filter-bar {
  background: rgba(255, 255, 255, 0.50);
  border-bottom: 1px solid var(--edge-inactive);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
}
[data-theme="light"] #queue-list .filter-bar input,
[data-theme="light"] #queue-list .filter-bar select,
[data-theme="light"] #roadmap-filter-agent {
  background: #FAFAFD;
  color: var(--fg-primary);
  border: 1px solid var(--edge-inactive);
  border-radius: 8px;
  padding: 7px 11px;
  font-size: 13px;
  transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}
[data-theme="light"] #queue-list .filter-bar input:focus,
[data-theme="light"] #queue-list .filter-bar select:focus,
[data-theme="light"] #roadmap-filter-agent:focus {
  border-color: var(--neon-violet);
  box-shadow: 0 0 0 3px rgba(106, 13, 173, 0.12);
  outline: none;
}

[data-theme="light"] #queue-list .item {
  background: transparent;
  color: var(--fg-primary);
  border-bottom: 1px solid var(--edge-inactive);
  border-left: 3px solid var(--agent-neon, transparent);
  padding: 12px 14px;
  transition: background var(--motion-fast) ease;
}
[data-theme="light"] #queue-list .item:hover {
  background: rgba(106, 13, 173, 0.04);
}
[data-theme="light"] #queue-list .item.selected {
  background: rgba(106, 13, 173, 0.08);
  border-left-color: var(--neon-violet);
}
[data-theme="light"] #queue-list .item .agent,
[data-theme="light"] .agent-badge {
  background: rgba(106, 13, 173, 0.08);
  color: var(--neon-violet);
  border: none;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 8px;
}
[data-theme="light"] #queue-list .item .summary {
  color: var(--fg-primary);
  font-weight: 500;
}
[data-theme="light"] #queue-list .item .kind,
[data-theme="light"] #queue-list .item .score {
  color: var(--fg-tertiary);
  font-family: var(--font-mono);
}

[data-theme="light"] .card,
[data-theme="light"] .payload,
[data-theme="light"] .header {
  background: rgba(255, 255, 255, 0.60);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 10px;
  padding: 14px;
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 1px 2px rgba(20, 15, 60, 0.04);
}
[data-theme="light"] .actions button,
[data-theme="light"] button.approve,
[data-theme="light"] button.reject,
[data-theme="light"] button.send {
  background: #FFFFFF;
  color: var(--fg-primary);
  border: 1px solid var(--edge-inactive);
  border-radius: 8px;
  padding: 8px 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--motion-fast) ease;
  box-shadow: 0 1px 2px rgba(20, 15, 60, 0.05);
}
[data-theme="light"] button.approve {
  background: var(--neon-green);
  color: #FFFFFF;
  border-color: transparent;
}
[data-theme="light"] button.approve:hover {
  box-shadow: 0 4px 14px rgba(25, 160, 107, 0.35);
  transform: translateY(-1px);
}
[data-theme="light"] button.reject {
  background: #FFFFFF;
  color: var(--neon-magenta);
  border-color: var(--neon-magenta);
}
[data-theme="light"] button.reject:hover {
  background: var(--neon-magenta);
  color: #FFFFFF;
}
[data-theme="light"] button.send {
  background: var(--neon-cyan);
  color: #FFFFFF;
  border-color: transparent;
  border-radius: 999px;
  width: 38px;
  height: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
[data-theme="light"] button.send:hover {
  box-shadow: 0 4px 14px rgba(0, 191, 198, 0.45);
  transform: translateY(-1px);
}

/* Tasks-Rows */
[data-theme="light"] .tasks-row {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.70);
  border-radius: 10px;
  box-shadow:
    0 1px 2px rgba(20, 15, 60, 0.04),
    0 6px 18px rgba(20, 15, 60, 0.05);
  color: var(--fg-primary);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
}
[data-theme="light"] .tasks-row:hover {
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-1px);
}
[data-theme="light"] .status-badge,
[data-theme="light"] .impact-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(106, 13, 173, 0.08);
  color: var(--neon-violet);
  border: none;
}
[data-theme="light"] .status-approved,
[data-theme="light"] .status-done {
  background: rgba(25, 160, 107, 0.12); color: var(--neon-green);
}
[data-theme="light"] .status-failed,
[data-theme="light"] .status-rejected {
  background: rgba(216, 27, 147, 0.12); color: var(--neon-magenta);
}
[data-theme="light"] .status-pending {
  background: rgba(0, 191, 198, 0.12); color: var(--neon-cyan);
}

/* Roadmap */
[data-theme="light"] .roadmap-agent {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.70);
  border-left: 3px solid var(--agent-neon, var(--neon-violet));
  border-radius: 10px;
  box-shadow:
    0 1px 2px rgba(20, 15, 60, 0.04),
    0 8px 24px rgba(20, 15, 60, 0.05);
  padding: 14px 18px;
  margin-bottom: 16px;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
}
[data-theme="light"] .roadmap-agent h3 {
  color: var(--neon-violet);
  border-bottom: 1px solid var(--edge-inactive);
}
[data-theme="light"] .roadmap-task:hover { background: rgba(106, 13, 173, 0.04); }
[data-theme="light"] .roadmap-task .bar {
  background: #F0EEF5;
  border: 1px solid var(--edge-inactive);
}
[data-theme="light"] .roadmap-task .bar-fill {
  background: linear-gradient(90deg,
    var(--agent-neon, var(--neon-violet)) 0%,
    rgba(106, 13, 173, 0.35) 100%);
  box-shadow: none;
}

[data-theme="light"] .chat-composer,
[data-theme="light"] .chat-toolbar {
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 18px;
  padding: 6px 10px;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow:
    0 1px 2px rgba(20, 15, 60, 0.04),
    0 8px 24px rgba(20, 15, 60, 0.08);
}

[data-theme="light"] .placeholder,
[data-theme="light"] .empty {
  color: var(--fg-tertiary);
}

/* 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). */
/*
 * Desktop-Layout: Split-View immer aktiv (≥900px).
 * Links = aktiver Tab (Moderation / Tasks / Roadmap), rechts = Chat.
 * Mobile (<900px) fallback auf Tab-Switch (nur ein Panel sichtbar).
 * Tab-Buttons für Moderation/Tasks/Roadmap umschalten die linke Seite.
 * Der "Chat"-Tab-Button ist auf Desktop redundant, bleibt für Mobile
 * und wird visuell dezent markiert.
 */
@media (min-width: 900px) {
  body[data-layout="split"] #main {
    display: grid !important;
    grid-template-columns: var(--split-left, 1fr) 4px var(--split-right, 1fr);
    grid-template-rows: 100%;
  }

  /* Linke Spalte: aktiver Inhalt je nach Tab. */
  body[data-layout="split"] #main[data-active-tab="moderation"] #moderation,
  body[data-layout="split"] #main[data-active-tab="chat"]       #moderation,
  body[data-layout="split"] #main[data-active-tab="tasks"]      #tasks,
  body[data-layout="split"] #main[data-active-tab="roadmap"]    #roadmap {
    display: flex !important;
    grid-column: 1;
    min-width: 0;
    overflow: hidden;
  }

  /* Alle nicht-aktiven Content-Panels ausblenden. */
  body[data-layout="split"] #main #moderation,
  body[data-layout="split"] #main #tasks,
  body[data-layout="split"] #main #roadmap,
  body[data-layout="split"] #main #auth-gate {
    display: none !important;
  }
  body[data-layout="split"] #main[data-active-tab="moderation"] #moderation,
  body[data-layout="split"] #main[data-active-tab="chat"]       #moderation,
  body[data-layout="split"] #main[data-active-tab="tasks"]      #tasks,
  body[data-layout="split"] #main[data-active-tab="roadmap"]    #roadmap {
    display: flex !important;
  }

  /* Split-Handle immer sichtbar (Mitte). */
  body[data-layout="split"] #main #split-handle {
    display: block;
    grid-column: 2;
  }

  /* Rechte Spalte: Chat, immer sichtbar. */
  body[data-layout="split"] #main #chat {
    display: flex !important;
    grid-column: 3;
    min-width: 0;
  }
}

#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); }

/* =========================================================
 * Legacy component bindings — Cyber-Glass on existing HTML
 * ========================================================= */
[data-theme="cyber-glass"] #topbar {
  background: var(--glass-30);
  border-bottom: 1px solid var(--edge-inactive);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  color: var(--fg-primary);
}
[data-theme="cyber-glass"] #topbar nav button {
  background: transparent;
  color: var(--fg-secondary);
  border: 1px solid transparent;
  padding: 0.35rem 0.85rem;
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 150ms, color 150ms, border-color 150ms,
              box-shadow 150ms;
}
[data-theme="cyber-glass"] #topbar nav button:hover {
  background: var(--glass-10);
  color: var(--fg-primary);
}
[data-theme="cyber-glass"] #topbar nav button.active {
  color: var(--fg-primary);
  background: var(--glass-30);
  border-color: var(--neon-cyan);
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.22);
}
[data-theme="cyber-glass"] #topbar .right {
  color: var(--fg-secondary);
}
[data-theme="cyber-glass"] #topbar .right button {
  background: transparent;
  color: var(--fg-secondary);
  border: 1px solid var(--edge-inactive);
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}
[data-theme="cyber-glass"] #topbar .right button:hover {
  color: var(--fg-primary);
  border-color: var(--neon-cyan);
}

[data-theme="cyber-glass"] #queue-list {
  background: var(--glass-10);
  border-right: 1px solid var(--edge-inactive);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
}
[data-theme="cyber-glass"] #queue-list .filter-bar {
  background: var(--glass-30);
  border-bottom: 1px solid var(--edge-inactive);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
}
[data-theme="cyber-glass"] #queue-list .filter-bar input,
[data-theme="cyber-glass"] #queue-list .filter-bar select {
  background: var(--glass-50);
  color: var(--fg-primary);
  border: 1px solid var(--edge-inactive);
  border-radius: 6px;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 13px;
  outline: none;
}
[data-theme="cyber-glass"] #queue-list .filter-bar input:focus,
[data-theme="cyber-glass"] #queue-list .filter-bar select:focus {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.22);
}

[data-theme="cyber-glass"] #queue-list .item {
  background: transparent;
  border-left: 2px solid var(--agent-neon, var(--edge-inactive));
  border-bottom: 1px solid var(--edge-inactive);
  color: var(--fg-primary);
  transition: background 120ms, border-color 120ms, box-shadow 120ms;
}
[data-theme="cyber-glass"] #queue-list .item:hover {
  background: var(--glass-30);
}
[data-theme="cyber-glass"] #queue-list .item.selected {
  background: var(--glass-50);
  border-left-color: var(--neon-cyan);
  box-shadow: inset 0 0 0 1px var(--neon-cyan),
              0 0 18px rgba(0, 229, 255, 0.18);
}
[data-theme="cyber-glass"] #queue-list .item .agent,
[data-theme="cyber-glass"] .agent-badge {
  background: var(--glass-30);
  color: var(--fg-primary);
  border: 1px solid var(--agent-neon, var(--edge-inactive));
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 3px;
}
[data-theme="cyber-glass"] #queue-list .item .score {
  color: var(--fg-secondary);
  font-family: "JetBrains Mono", monospace;
}
[data-theme="cyber-glass"] #queue-list .item .summary {
  color: var(--fg-primary);
  font-size: 14px;
  font-weight: 500;
}
[data-theme="cyber-glass"] #queue-list .item .kind {
  color: var(--fg-secondary);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
}

[data-theme="cyber-glass"] #detail,
[data-theme="cyber-glass"] .detail-pane {
  background: var(--glass-10);
  color: var(--fg-primary);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
}
[data-theme="cyber-glass"] .card,
[data-theme="cyber-glass"] .payload,
[data-theme="cyber-glass"] .header {
  background: var(--glass-30);
  border: 1px solid var(--edge-inactive);
  border-radius: 8px;
  padding: 14px;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
}

[data-theme="cyber-glass"] .actions button,
[data-theme="cyber-glass"] button.approve,
[data-theme="cyber-glass"] button.reject {
  background: transparent;
  color: var(--fg-primary);
  border: 1px solid var(--edge-inactive);
  border-radius: 6px;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 150ms, box-shadow 150ms, background 150ms;
}
[data-theme="cyber-glass"] button.approve {
  border-color: var(--neon-green);
}
[data-theme="cyber-glass"] button.approve:hover {
  box-shadow: 0 0 14px rgba(31, 227, 125, 0.35);
  background: rgba(31, 227, 125, 0.10);
}
[data-theme="cyber-glass"] button.reject {
  border-color: var(--neon-magenta);
}
[data-theme="cyber-glass"] button.reject:hover {
  box-shadow: 0 0 14px rgba(255, 77, 255, 0.30);
  background: rgba(255, 77, 255, 0.10);
}

/* Tasks-Rows */
[data-theme="cyber-glass"] .tasks-row {
  background: var(--glass-30);
  border: 1px solid var(--edge-inactive);
  border-radius: 8px;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  color: var(--fg-primary);
}
[data-theme="cyber-glass"] .tasks-row:hover {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.18);
}
[data-theme="cyber-glass"] .status-badge,
[data-theme="cyber-glass"] .impact-badge {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 3px;
  background: var(--glass-50);
  color: var(--fg-primary);
  border: 1px solid var(--edge-inactive);
}
[data-theme="cyber-glass"] .status-approved,
[data-theme="cyber-glass"] .status-done { border-color: var(--neon-green); }
[data-theme="cyber-glass"] .status-failed,
[data-theme="cyber-glass"] .status-rejected { border-color: var(--neon-magenta); }
[data-theme="cyber-glass"] .status-pending { border-color: var(--neon-cyan); }
[data-theme="cyber-glass"] .status-deferred { border-color: var(--edge-inactive); }

[data-theme="cyber-glass"] .empty {
  color: var(--fg-secondary);
}

[data-theme="cyber-glass"] .chat-composer,
[data-theme="cyber-glass"] .chat-toolbar {
  background: var(--glass-30);
  border: 1px solid var(--edge-inactive);
  border-radius: 10px;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
}
[data-theme="cyber-glass"] .chat-composer input,
[data-theme="cyber-glass"] .chat-composer textarea {
  background: transparent;
  color: var(--fg-primary);
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 14px;
}

/* =========================================================
 * Roadmap Tab — Gantt-Style Rows
 * ========================================================= */
[data-theme="cyber-glass"] #roadmap {
  background: var(--glass-10);
  color: var(--fg-primary);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  padding: 1rem 1.25rem;
  overflow-y: auto;
}
[data-theme="cyber-glass"] #roadmap .filter-bar,
[data-theme="cyber-glass"] #roadmap-filter-agent {
  background: var(--glass-30);
  color: var(--fg-primary);
  border: 1px solid var(--edge-inactive);
  border-radius: 6px;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 13px;
}
[data-theme="cyber-glass"] #roadmap h2,
[data-theme="cyber-glass"] #roadmap .page-title {
  color: var(--fg-primary);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
}
[data-theme="cyber-glass"] .roadmap-agent {
  margin-bottom: 1.75rem;
  padding: 1rem 1.15rem;
  background: var(--glass-30);
  border: 1px solid var(--edge-inactive);
  border-left: 2px solid var(--agent-neon, var(--edge-inactive));
  border-radius: 10px;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
}
[data-theme="cyber-glass"] .roadmap-agent h3 {
  color: var(--fg-primary);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--edge-inactive);
}
[data-theme="cyber-glass"] .roadmap-task {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0.45rem 0.25rem;
  border-radius: 4px;
  transition: background 120ms ease;
}
[data-theme="cyber-glass"] .roadmap-task:hover {
  background: var(--glass-10);
}
[data-theme="cyber-glass"] .roadmap-task .title {
  width: 320px;
  color: var(--fg-primary);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-theme="cyber-glass"] .roadmap-task .title small {
  color: var(--fg-tertiary);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  margin-left: 0.35rem;
}
[data-theme="cyber-glass"] .roadmap-task .bar {
  flex: 1;
  min-width: 120px;
  height: 8px;
  background: var(--glass-50);
  border: 1px solid var(--edge-inactive);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
[data-theme="cyber-glass"] .roadmap-task .bar-fill {
  height: 100%;
  background: linear-gradient(90deg,
    var(--agent-neon, var(--neon-cyan)) 0%,
    rgba(255,255,255,0.15) 100%);
  box-shadow: 0 0 8px var(--agent-neon, rgba(0,229,255,0.25));
  border-radius: 3px;
}
[data-theme="cyber-glass"] .roadmap-task .dates {
  width: 190px;
  text-align: right;
  color: var(--fg-secondary);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
}

/* Priority dots (🔴/🟠/🟡/⚪️ remain, but .priority-X fallback) */
[data-theme="cyber-glass"] .priority-p0,
[data-theme="cyber-glass"] .priority-p1 { color: var(--neon-magenta); }
[data-theme="cyber-glass"] .priority-p2 { color: var(--neon-cyan); }
[data-theme="cyber-glass"] .priority-p3 { color: var(--fg-secondary); }

/* Logo slot (top-left) */
[data-theme="cyber-glass"] #topbar .logo {
  color: var(--fg-primary);
  font-weight: 600;
  letter-spacing: -0.01em;
}
[data-theme="cyber-glass"] #topbar .logo .crab {
  filter: drop-shadow(0 0 6px rgba(255, 77, 255, 0.45));
}

/* Placeholder pane (right side of moderation when nothing selected) */
[data-theme="cyber-glass"] .placeholder {
  color: var(--fg-secondary);
  font-family: inherit;
  font-size: 14px;
}

/* Legend: `--text` / `--text-dim` used by inline styles still resolve
   through body[data-theme='cyber-glass'] override of legacy vars.
   This keeps inline `color:var(--text-dim)` valid without edits. */


/* =====================================================================
 * Moodboard-Alignment (2026-05-05): Panel-Header, Tooltips,
 * Accent-Borders, Send-Button rund, Focus-Glow.
 * Nur Light-Theme-Targetierung, kein Impact auf Cyber-Glass.
 * ===================================================================== */

/* ---- Panel-Header (Kachel-Titel + i-Icon) ---- */
.panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  position: relative;
  background: transparent;
  flex: 0 0 auto;
}
[data-theme="light"] .panel-header {
  border-bottom: 1px solid var(--edge-inactive);
}
.panel-header .panel-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
  color: var(--fg-secondary);
}
[data-theme="light"] .panel-header .panel-title {
  color: var(--fg-primary);
}
.panel-header .panel-info {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid var(--edge-inactive);
  background: transparent;
  color: var(--fg-secondary);
  font-size: 12px;
  line-height: 1;
  padding: 0;
  cursor: help;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--motion-fast) ease;
}
[data-theme="light"] .panel-header .panel-info:hover,
[data-theme="light"] .panel-header .panel-info:focus-visible {
  color: var(--neon-violet);
  border-color: var(--neon-violet);
  background: rgba(106, 13, 173, 0.06);
  outline: none;
}

/* ---- Tooltip / Flyover ---- */
.panel-tooltip {
  position: absolute;
  top: 100%;
  left: 10px;
  margin-top: 6px;
  z-index: 40;
  width: 300px;
  max-width: calc(100vw - 40px);
  padding: 14px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--edge-inactive);
  border-radius: 12px;
  box-shadow:
    0 2px 6px rgba(20, 15, 60, 0.10),
    0 16px 40px rgba(20, 15, 60, 0.14);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  color: var(--fg-primary);
  font-size: 13px;
  line-height: 1.5;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--motion-fast) ease, transform var(--motion-fast) ease, visibility 0s linear var(--motion-fast);
  pointer-events: none;
}
.panel-header:hover .panel-tooltip,
.panel-header:focus-within .panel-tooltip {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--motion-fast) ease, transform var(--motion-fast) ease, visibility 0s linear 0s;
  pointer-events: auto;
}
.panel-tooltip .tt-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--neon-violet);
  background: rgba(106, 13, 173, 0.08);
  border-radius: 4px;
  padding: 2px 8px;
  margin-bottom: 8px;
}
.panel-tooltip p {
  margin: 0 0 8px 0;
  color: var(--fg-primary);
}
.panel-tooltip ul {
  margin: 0;
  padding-left: 18px;
  color: var(--fg-secondary);
  font-size: 12.5px;
}
.panel-tooltip ul li { margin-bottom: 2px; }
.panel-tooltip code {
  font-family: var(--font-mono);
  font-size: 11.5px;
  background: rgba(106, 13, 173, 0.08);
  color: var(--neon-violet);
  padding: 1px 5px;
  border-radius: 3px;
}

/* Detail panel header: Tooltip nach rechts statt unten, da Detail oft breiter ist. */
#detail .panel-tooltip,
#chat .panel-tooltip {
  left: auto;
  right: 10px;
}

/* ---- Accent-Borders pro Panel (data-panel-accent) ---- */
[data-theme="light"] [data-panel-accent] {
  border-top: 3px solid var(--panel-accent, var(--edge-inactive));
}
[data-theme="light"] [data-panel-accent="violet"]  { --panel-accent: var(--neon-violet); }
[data-theme="light"] [data-panel-accent="magenta"] { --panel-accent: var(--neon-magenta); }
[data-theme="light"] [data-panel-accent="cyan"]    { --panel-accent: var(--neon-cyan); }
[data-theme="light"] [data-panel-accent="green"]   { --panel-accent: var(--neon-green); }
[data-theme="light"] [data-panel-accent="amber"]   { --panel-accent: var(--neon-amber); }

/* Mono-Tag in Tooltip matched Accent-Farbe */
[data-panel-accent="violet"]  .panel-tooltip .tt-tag { color: var(--neon-violet);  background: rgba(106, 13, 173, 0.10); }
[data-panel-accent="magenta"] .panel-tooltip .tt-tag { color: var(--neon-magenta); background: rgba(216, 27, 147, 0.10); }
[data-panel-accent="cyan"]    .panel-tooltip .tt-tag { color: var(--neon-cyan);    background: rgba(0, 191, 198, 0.12); }
[data-panel-accent="green"]   .panel-tooltip .tt-tag { color: var(--neon-green);   background: rgba(25, 160, 107, 0.12); }
[data-panel-accent="amber"]   .panel-tooltip .tt-tag { color: var(--neon-amber);   background: rgba(224, 127, 22, 0.12); }

/* ---- Send-Button: rund 40x40 mit SVG-Arrow, Cyan-Fill ---- */
[data-theme="light"] button.send,
[data-theme="light"] .chat-composer .send {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 999px;
  padding: 0;
  border: none;
  background: var(--neon-cyan);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 191, 198, 0.30);
  transition: box-shadow var(--motion-fast) ease, transform var(--motion-fast) ease;
  flex: 0 0 auto;
}
[data-theme="light"] button.send:hover,
[data-theme="light"] .chat-composer .send:hover {
  box-shadow: 0 6px 18px rgba(0, 191, 198, 0.45),
              0 0 0 4px rgba(0, 191, 198, 0.14);
  transform: translateY(-1px);
}
[data-theme="light"] button.send svg { display: block; }

/* ---- Focus-Glow auf aktivem Panel ---- */
[data-theme="light"] #queue-list:focus-within,
[data-theme="light"] #detail:focus-within,
[data-theme="light"] #tasks:focus-within,
[data-theme="light"] #roadmap:focus-within,
[data-theme="light"] #chat:focus-within {
  box-shadow:
    0 1px 2px rgba(20, 15, 60, 0.04),
    0 10px 30px rgba(20, 15, 60, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 0 24px rgba(0, 191, 198, 0.22);
}

/* ---- Realtime-Pill: kleiner + neon-cyan rounded pill ---- */
[data-theme="light"] .realtime-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--neon-cyan);
  background: rgba(0, 191, 198, 0.08);
  color: var(--neon-cyan);
}
[data-theme="light"] .realtime-pill::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 4px currentColor;
}
[data-theme="light"] .realtime-pill[data-state="live"]         { border-color: var(--neon-green);   color: var(--neon-green);   background: rgba(25,160,107,0.10); }
[data-theme="light"] .realtime-pill[data-state="connecting"]   { border-color: var(--neon-amber);   color: var(--neon-amber);   background: rgba(224,127,22,0.10); }
[data-theme="light"] .realtime-pill[data-state="reconnecting"] { border-color: var(--neon-amber);   color: var(--neon-amber);   background: rgba(224,127,22,0.10); }
[data-theme="light"] .realtime-pill[data-state="error"]        { border-color: var(--neon-magenta); color: var(--neon-magenta); background: rgba(216,27,147,0.10); }

/* ---- Chat-Tab Button auf Desktop verstecken (Chat ist immer rechts sichtbar) ---- */
@media (min-width: 900px) {
  body[data-layout="split"] #topbar nav button.nav-chat-only-mobile {
    display: none;
  }
}

/* ---- Panel-Header innerhalb Chat: soll sich mit der Toolbar nicht kollidieren ---- */
#chat .panel-header {
  border-bottom: 1px solid var(--edge-inactive);
}
#chat { display: flex; flex-direction: column; }

/* Panel bleibt overflow:hidden (damit der Rand sauber bleibt) — dafür
   wird der Tooltip beim Hover auf position:fixed umgestellt und nutzt
   dann die Viewport-Koordinaten des Headers. Simpler Ansatz: Tooltip
   stayed absolute inside panel-header, but panel gets a just-enough
   overflow:visible only on the header strip via clip-path none. For
   minimal risk, we allow the panel to clip and instead push the
   tooltip into the content area below the header (where padding-top
   gives it breathing room). */
/* Panel-Header muss sichtbar sein; Tooltip darf im Content-Bereich
   erscheinen und wird dort durch z-index über den Filter-Bar gelegt. */
.panel-header { z-index: 30; }


/* =====================================================================
 * MOODBOARD v3 PASS — PURE LIGHT CYBER-GLASS  (2026-05-05 ~14:05 UTC)
 * Reset des v2-Passes nach Architect-Review:
 *   1. Clean Canvas: weiches Off-White, kein hartes Wireframe-Raster.
 *   2. Weiße Glaskanten (rgba(255,255,255,0.9)) für Lichtbrechung.
 *   3. Weiche, weit gestreute Drop-Shadows statt kurzer harter Schatten.
 *   4. Items mit solidem Weiß, um sich vom Glas abzuheben.
 *   5. Neon-Razor-Edge via `box-shadow: 0 0 0 1px var(--accent)`.
 * ===================================================================== */

/* ---- 1. Void/Canvas: Topological Cyber-Mesh (echtes Asset) ---- */
/*
 * Ebene 1+2: radiale Lichtquellen (Violett oben-rechts, Cyan unten-links) —
 *            die werden durch den Blur der Glas-Panels aufgegriffen.
 * Ebene 3:   bg-mesh.webp  (~31 KB, Moodboard-Asset von Herwig). Deckt das
 *            ganze Viewport ab (cover), fixed-attachment damit Scroll nicht
 *            das Raster mitnimmt, dezent deglaced via blend/opacity.
 *            WebP-Fallback auf JPG über image-set für ältere Browser.
 */
body[data-theme="light"] {
  background-color: #F6F7FA;
  background-image:
    radial-gradient(120vw 100vh at 85% 10%, rgba(106, 13, 173, 0.08) 0%, transparent 60%),
    radial-gradient(100vw  90vh at -10% 110%, rgba(0, 191, 198, 0.10) 0%, transparent 60%),
    image-set(url('/bg-mesh.webp') type('image/webp'),
              url('/bg-mesh.jpg')  type('image/jpeg'));
  background-size: 100vw 100vh, 100vw 100vh, cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}

/* ---- 2. Main-Container Gap ---- */
[data-theme="light"] #main {
  padding: 24px;
  gap: 24px;
}
[data-theme="light"] #moderation {
  gap: 24px;
}

/* ---- 3. The Glass Panels (Rauchglas) ---- */
[data-theme="light"] #queue-list,
[data-theme="light"] #detail,
[data-theme="light"] .detail-pane,
[data-theme="light"] #tasks,
[data-theme="light"] #roadmap,
[data-theme="light"] #chat {
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(24px) saturate(120%);
  -webkit-backdrop-filter: blur(24px) saturate(120%);
  border-radius: 20px;
  box-shadow:
    0 10px 40px -10px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  margin: 0;
  overflow: hidden;
  position: relative;
}

/* Panel-Accent-Border (Neon on Top) — alle 5 Panel-Farben */
[data-theme="light"] [data-panel-accent]::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 20px 20px 0 0;
  pointer-events: none;
  z-index: 5;
}
[data-theme="light"] [data-panel-accent="violet"]::before  { background: linear-gradient(90deg, transparent, rgba(106, 13, 173, 0.80), transparent); }
[data-theme="light"] [data-panel-accent="magenta"]::before { background: linear-gradient(90deg, transparent, rgba(216,  27, 147, 0.80), transparent); }
[data-theme="light"] [data-panel-accent="cyan"]::before    { background: linear-gradient(90deg, transparent, rgba(  0, 191, 198, 0.80), transparent); }
[data-theme="light"] [data-panel-accent="amber"]::before   { background: linear-gradient(90deg, transparent, rgba(224, 127,  22, 0.80), transparent); }
[data-theme="light"] [data-panel-accent="green"]::before   { background: linear-gradient(90deg, transparent, rgba( 25, 160, 107, 0.80), transparent); }

/* ---- 4. Queue Items (Tickets) ---- */
[data-theme="light"] #queue-items {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
[data-theme="light"] #queue-list .item {
  /* Solide weiß, damit sich das Ticket vom Glas-Panel abhebt */
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 1);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
[data-theme="light"] #queue-list .item:hover {
  background: #FFFFFF;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
  transform: translateY(-2px);
}
/* Active: Neon-Razor-Edge via doppeltem Shadow */
[data-theme="light"] #queue-list .item.selected {
  background: #FFFFFF;
  border: 1px solid var(--neon-violet);
  box-shadow:
    0 8px 24px rgba(106, 13, 173, 0.08),
    0 0 0 1px var(--neon-violet);
}
/* Wenn Item eine Agent-Farbe hat, übernimmt die Razor-Edge die Agent-Farbe */
[data-theme="light"] #queue-list .item.selected[data-agent-color] {
  border-color: var(--agent-neon, var(--neon-violet));
  box-shadow:
    0 8px 24px color-mix(in srgb, var(--agent-neon, var(--neon-violet)) 10%, transparent),
    0 0 0 1px var(--agent-neon, var(--neon-violet));
}

/* ---- 5. Typografie & Panel-Header ---- */
[data-theme="light"] .panel-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  background: rgba(255, 255, 255, 0.40);
}
[data-theme="light"] .panel-title {
  font-size: 13px;
  font-weight: 600;
  text-transform: capitalize;
  letter-spacing: 0;
  color: #111827;
}
[data-theme="light"] .panel-info {
  color: #9CA3AF;
  border: none;
  background: transparent;
}

/* ---- 6. Filter-Bar & Inputs (Pills) ---- */
[data-theme="light"] #queue-list .filter-bar,
[data-theme="light"] #tasks .filter-bar,
[data-theme="light"] #roadmap .filter-bar {
  background: transparent;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  padding: 12px 24px;
  gap: 10px;
}
[data-theme="light"] #queue-list .filter-bar input,
[data-theme="light"] #queue-list .filter-bar select,
[data-theme="light"] #tasks .filter-bar input,
[data-theme="light"] #tasks .filter-bar select,
[data-theme="light"] #roadmap-filter-agent {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  color: #111827;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
  transition: all 150ms ease;
}
[data-theme="light"] #queue-list .filter-bar input:focus,
[data-theme="light"] #queue-list .filter-bar select:focus,
[data-theme="light"] #tasks .filter-bar input:focus,
[data-theme="light"] #tasks .filter-bar select:focus,
[data-theme="light"] #roadmap-filter-agent:focus {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 0 3px rgba(0, 191, 198, 0.15);
  outline: none;
}

/* ---- 7. Chat Bubbles ---- */
[data-theme="light"] .turn {
  background: rgba(255, 255, 255, 0.80);
  border: 1px solid rgba(255, 255, 255, 1);
  border-left: 3px solid transparent;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
[data-theme="light"] .turn.role-user {
  background: #FFFFFF;
  border-left-color: var(--neon-cyan);
}
[data-theme="light"] .turn.role-assistant {
  border-left-color: var(--neon-violet);
}
[data-theme="light"] .turn.role-system {
  border-left-color: var(--neon-amber);
}

/* ---- 8. Topbar: clean, flach ---- */
[data-theme="light"] #topbar {
  background: rgba(255, 255, 255, 0.60);
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  backdrop-filter: blur(24px) saturate(170%);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  box-shadow: none;
}

/* ---- 9. Detail-Panel inner cards ---- */
[data-theme="light"] #detail .payload,
[data-theme="light"] #detail .header,
[data-theme="light"] #detail .card {
  background: rgba(255, 255, 255, 0.90);
  border: 1px solid rgba(255, 255, 255, 1);
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}

/* ---- 10. Auth-Card ---- */
[data-theme="light"] #auth-gate .card {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 28px;
  box-shadow:
    0 20px 60px -20px rgba(106, 13, 173, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  backdrop-filter: blur(30px) saturate(150%);
  -webkit-backdrop-filter: blur(30px) saturate(150%);
}
[data-theme="light"] #auth-gate input {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  padding: 10px 16px;
}
[data-theme="light"] #auth-gate #auth-send {
  background: var(--neon-violet);
  color: #FFFFFF;
  border: none;
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 600;
  width: 100%;
  box-shadow: 0 8px 24px rgba(106, 13, 173, 0.25);
  transition: all 150ms ease;
}
[data-theme="light"] #auth-gate #auth-send:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(106, 13, 173, 0.35);
}

/* ---- 11. Reduced Motion ---- */
@media (prefers-reduced-motion: reduce) {
  [data-theme="light"] #queue-list .item { transition: none; }
  [data-theme="light"] #queue-list .item:hover { transform: none; }
  [data-theme="light"] #auth-gate #auth-send:hover { transform: none; }
}

/* =====================================================================
 * PROJECT BLOCK (2026-05-05 — Workflow & Projects Feature-Pass)
 * Marker: project-picker, projects-grid, auto-advance, chat-with-agent,
 * shift-click, schema-aware
 * Nur additiv. v3 Moodboard-Theme bleibt unangetastet.
 * ===================================================================== */

/* ---- Logo-Group (logo + project-picker nebeneinander) ---- */
#topbar .logo-group {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

/* ---- Project-Picker (Pill im Topbar) ---- */
.project-picker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 14px -6px rgba(106, 13, 173, 0.15);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  font-size: 12px;
  font-weight: 500;
  transition: all 150ms ease;
}
.project-picker:hover {
  border-color: rgba(106, 13, 173, 0.25);
  box-shadow: 0 6px 18px -6px rgba(106, 13, 173, 0.25);
}
.project-picker .pp-label {
  color: var(--fg-tertiary, #757575);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.project-picker .pp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--neon-violet, #6A0DAD);
  box-shadow: 0 0 6px currentColor;
  flex-shrink: 0;
}
.project-picker .pp-dot[data-color="violet"]  { background: #6A0DAD; }
.project-picker .pp-dot[data-color="cyan"]    { background: #00E5FF; }
.project-picker .pp-dot[data-color="magenta"] { background: #FF2D95; }
.project-picker .pp-dot[data-color="amber"]   { background: #FFB000; }
.project-picker .pp-dot[data-color="green"]   { background: #00E676; }
.project-picker select {
  background: transparent;
  border: none;
  outline: none;
  font: inherit;
  color: var(--fg-primary, #1a1a1a);
  padding: 2px 4px;
  cursor: pointer;
  max-width: 180px;
}
@media (max-width: 720px) {
  .project-picker .pp-label { display: none; }
  .project-picker select { max-width: 110px; }
}

/* ---- inline-link (Filter-Bar mini-buttons: select-visible / clear) ---- */
#queue-list .filter-bar .inline-link {
  background: transparent;
  border: none;
  color: var(--fg-tertiary, #757575);
  font-size: 11px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color 120ms ease, background 120ms ease;
  white-space: nowrap;
}
#queue-list .filter-bar .inline-link:hover {
  color: var(--neon-violet, #6A0DAD);
  background: rgba(106, 13, 173, 0.06);
}

/* ---- Tab "Projekte" ---- */
#projects {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#projects .filter-bar {
  padding: 0.5rem 1rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
#projects-grid {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  align-content: start;
}
.project-card {
  position: relative;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  padding: 16px 16px 14px;
  cursor: pointer;
  transition: all 160ms ease;
  overflow: hidden;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 4px 14px -8px rgba(106, 13, 173, 0.12);
}
.project-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--project-color, #6A0DAD);
}
.project-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -10px rgba(106, 13, 173, 0.22);
  border-color: var(--project-color, rgba(106, 13, 173, 0.35));
}
.project-card[data-active="true"] {
  border-color: var(--project-color, #6A0DAD);
  box-shadow: 0 0 0 2px var(--project-color, #6A0DAD),
              0 8px 22px -8px var(--project-color, rgba(106, 13, 173, 0.4));
}
.project-card .pc-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--fg-primary, #1a1a1a);
  margin-bottom: 8px;
  line-height: 1.25;
}
.project-card .pc-meta {
  display: flex;
  gap: 10px;
  font-size: 11px;
  color: var(--fg-tertiary, #757575);
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.project-card .pc-meta .pc-num {
  font-weight: 600;
  color: var(--fg-secondary, #4a4a4a);
  font-family: 'JetBrains Mono', monospace;
}
.project-card .pc-status {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(0, 230, 118, 0.12);
  color: #00a050;
}
.project-card .pc-status[data-status="archived"] {
  background: rgba(117, 117, 117, 0.15);
  color: #616161;
}
.project-card .pc-status[data-status="on_hold"] {
  background: rgba(255, 176, 0, 0.15);
  color: #c97e00;
}
.project-card .pc-owner {
  font-size: 11px;
  color: var(--fg-tertiary, #757575);
}

/* ---- Projekt-Farben per data-color attribut ---- */
.project-card[data-color="violet"]  { --project-color: #6A0DAD; }
.project-card[data-color="cyan"]    { --project-color: #00E5FF; }
.project-card[data-color="magenta"] { --project-color: #FF2D95; }
.project-card[data-color="amber"]   { --project-color: #FFB000; }
.project-card[data-color="green"]   { --project-color: #00E676; }

/* ---- Schema-Aware Detail renderer (2026-05-05 schema-aware) ---- */
.schema-render {
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 1rem;
  font-size: 14px;
  line-height: 1.55;
}
.schema-render .sr-meta {
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: var(--fg-tertiary, #757575);
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
  flex-wrap: wrap;
}
.schema-render .sr-meta b {
  color: var(--fg-secondary, #4a4a4a);
  font-weight: 600;
  margin-right: 4px;
}
.schema-render .sr-line {
  margin-bottom: 6px;
}
.schema-render .sr-line .k {
  color: var(--fg-tertiary, #757575);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 6px;
  font-weight: 600;
}
.schema-render .sr-subject {
  font-size: 15px;
  font-weight: 600;
  color: var(--fg-primary, #1a1a1a);
  margin: 6px 0 10px;
}
.schema-render .sr-body {
  white-space: pre-wrap;
  font-family: 'Inter', sans-serif;
  color: var(--fg-primary, #1a1a1a);
  background: rgba(0, 0, 0, 0.025);
  padding: 10px 12px;
  border-radius: 6px;
  border-left: 2px solid var(--neon-violet, #6A0DAD);
}
.schema-render .sr-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.schema-render .sr-chip {
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  background: rgba(0, 229, 255, 0.12);
  color: #006b80;
  border: 1px solid rgba(0, 229, 255, 0.25);
}
.detail-json-toggle {
  font-size: 11px;
  color: var(--fg-tertiary, #757575);
  background: transparent;
  border: 1px dashed rgba(0, 0, 0, 0.15);
  padding: 3px 10px;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 1rem;
}
.detail-json-toggle:hover {
  border-color: var(--neon-violet, #6A0DAD);
  color: var(--neon-violet, #6A0DAD);
}

/* ---- Chat-mit-Agent Button (2026-05-05 chat-with-agent deep-link) ---- */
#detail .actions .action-chat-with {
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.12), rgba(106, 13, 173, 0.12));
  color: var(--neon-violet, #6A0DAD);
  border: 1px solid rgba(106, 13, 173, 0.25);
}
#detail .actions .action-chat-with:hover {
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.2), rgba(106, 13, 173, 0.2));
  border-color: var(--neon-violet, #6A0DAD);
}

/* ---- Tasks-Row Cleanup (2026-05-05) ---- */
.tasks-row .impact-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin: 0 2px;
}
.tasks-row .impact-dot[data-impact="irreversible"] {
  background: #E53935;
  box-shadow: 0 0 4px rgba(229, 57, 53, 0.5);
}
.tasks-row .impact-dot[data-impact="bridge"] {
  background: #FFB000;
}
.tasks-row .impact-dot[data-impact="reversible"] {
  background: #00E676;
}
.tasks-row .tr-meta {
  color: var(--fg-tertiary, #757575);
  font-size: 11px;
  white-space: nowrap;
  flex-shrink: 0;
}
.tasks-row .tr-summary {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  color: var(--fg-primary, #1a1a1a);
  font-size: 13.5px;
}
.tasks-row .tr-score {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--fg-tertiary, #757575);
  width: 52px;
  text-align: right;
  flex-shrink: 0;
}

/* ---- Auto-Advance focus flash (2026-05-05 auto-advance) ---- */
@keyframes advance-flash {
  0%   { background: rgba(106, 13, 173, 0.15); }
  100% { background: transparent; }
}
#queue-list .item.just-advanced {
  animation: advance-flash 500ms ease-out;
}

/* ---- Projekt-Neu Modal ---- */
.project-new-modal .color-row {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.project-new-modal .color-swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 120ms ease;
}
.project-new-modal .color-swatch[data-selected="true"] {
  border-color: #1a1a1a;
  transform: scale(1.15);
}

/* end project block */

/* ---- Chat-Toolbar Button: "+ Neue Session" (2026-05-05) ---- */
[data-theme="light"] #chat-new-session {
  background: #FFFFFF;
  color: var(--neon-violet);
  border: 1px solid rgba(106, 13, 173, 0.30);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 150ms ease;
}
[data-theme="light"] #chat-new-session:hover {
  background: rgba(106, 13, 173, 0.06);
  border-color: var(--neon-violet);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(106, 13, 173, 0.15);
}

/* ---- New-Session-Dialog Inputs ---- */
[data-theme="light"] .chat-new-session-modal .dialog input[type="text"],
[data-theme="light"] .chat-new-session-modal .dialog select {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13px;
  color: #111827;
  width: 100%;
}
[data-theme="light"] .chat-new-session-modal .dialog input[type="text"]:focus,
[data-theme="light"] .chat-new-session-modal .dialog select:focus {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 0 3px rgba(0, 191, 198, 0.15);
  outline: none;
}
[data-theme="light"] .chat-new-session-modal .dialog .primary {
  background: var(--neon-violet);
  color: #FFFFFF;
  border: none;
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(106, 13, 173, 0.25);
}