/* KLYSTRON Management Console
   CRT Phosphor Green Terminal — Physics-accurate rendering
   Matching 121-G iOS aesthetic: P1 green phosphor, scanlines, bloom, vignette, glass
   Generated: 2026-02-11 | Worker: 3282cb7e */

/* ===================================================================
   FONTS
   =================================================================== */
@import url('https://fonts.googleapis.com/css2?family=VT323&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');

/* ===================================================================
   CRT PHOSPHOR PALETTE — Matched to KlystronColors.swift
   =================================================================== */
:root {
    --phosphor-green:     #20C20E;
    --phosphor-dim:       #1D961D;
    --phosphor-bright:    #33FF33;
    --phosphor-glow:      rgba(32, 194, 14, 0.6);
    --phosphor-glow-med:  rgba(32, 194, 14, 0.4);
    --phosphor-glow-soft: rgba(32, 194, 14, 0.15);

    --tungsten-warm:   #FFB000;
    --tungsten-hot:    #ffd980;
    --tungsten-amber:  #ffbf4d;

    --led-green:     #33d933;
    --led-yellow:    #f2d91a;
    --led-red:       #f2261a;
    --led-off:       #141414;
    --led-off-dim:   #262626;

    --dark-glass:     #111411;  /* CRT housing — faint phosphor tint */
    --dark-surface:   #151815;  /* Panel surfaces — era-accurate dark */
    --dim-surface:    #262626;
    --muted-surface:  #333333;
    --subtle-surface: #4d4d4d;
    --muted-label:    #666666;
    --dim-label:      #808080;

    --jewel-green:      #26e633;
    --jewel-amber:      #ffa61a;
    --jewel-red:        #f2261a;
    --jewel-green-warm: #66ff4d;
    --jewel-amber-warm: #ffbf40;
    --jewel-red-warm:   #ff4d1a;

    --text-primary:   var(--phosphor-green);
    --text-secondary: var(--text-dim);
    --text-bright:    var(--phosphor-bright);
    --text-muted:     var(--muted-label);
    --text-warn:      var(--tungsten-warm);
    --text-error:     var(--led-red);
    --bg-screen:      #0D0F0D;  /* P1 phosphor residual glow — not true black */
    --bg-panel:       var(--dark-glass);
    --bg-input:       #0a0d0a;  /* Terminal input — slightly darker than screen */
    --border-glow:    rgba(32, 194, 14, 0.3);
    --border-dim:     var(--dim-surface);

    --font-terminal: 'VT323', 'IBM Plex Mono', 'Courier New', monospace;
    --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

    /* ── Type scale ─────────────────────────────────────── */
    --font-size-xs:   13px;
    --font-size-sm:   15px;
    --font-size-base: 17px;
    --font-size-md:   19px;
    --font-size-lg:   22px;
    --font-size-xl:   28px;

    /* ── Contrast-safe colour aliases ───────────────────── */
    --text-dim: #4DB84D;
    --text-meta: #3D9E3D;
    --text-muted-readable: #808080;

    /* Legacy aliases for JS that reads CSS vars */
    --dos-black:        #0a0a0a;
    --dos-blue:         #0a0a0a;
    --dos-green:        #20C20E;
    --dos-cyan:         #20C20E;
    --dos-red:          #f2261a;
    --dos-magenta:      #FFB000;
    --dos-brown:        #FFB000;
    --dos-lightgray:    #0A520A;
    --dos-darkgray:     #333333;
    --dos-lightblue:    #0A520A;
    --dos-lightgreen:   #20C20E;
    --dos-lightcyan:    #33FF33;
    --dos-lightred:     #f2261a;
    --dos-lightmagenta: #FFB000;
    --dos-yellow:       #f2d91a;
    --dos-white:        #20C20E;
    --jewel-green:      #26e633;
    --jewel-red:        #f2261a;

    --bloom-full:
        0 0 20px rgba(32, 194, 14, 0.6),
        0 0 8px rgba(32, 194, 14, 0.8),
        0 0 3px rgba(51, 255, 51, 0.9);
    --bloom-dim:
        0 0 12px rgba(32, 194, 14, 0.3),
        0 0 4px rgba(32, 194, 14, 0.4);
    --bloom-tungsten:
        0 0 15px rgba(255, 176, 0, 0.5),
        0 0 5px rgba(255, 176, 0, 0.7);
    --bloom-red:
        0 0 12px rgba(242, 38, 26, 0.5),
        0 0 4px rgba(242, 38, 26, 0.7);

    /* Agent phosphor palettes — CRT-accurate P1/P3/P22 */
    --phosphor-amber:      #ffaa33;
    --phosphor-amber-dim:  #8a5c1a;
    --phosphor-amber-glow: rgba(255, 170, 51, 0.5);
    --bloom-amber:
        0 0 12px rgba(255, 170, 51, 0.3),
        0 0 4px rgba(255, 170, 51, 0.5);
    --bloom-amber-full:
        0 0 20px rgba(255, 170, 51, 0.5),
        0 0 8px rgba(255, 170, 51, 0.7),
        0 0 3px rgba(255, 191, 77, 0.9);
    --border-amber:        rgba(255, 170, 51, 0.3);

    --phosphor-cyan:       #33ccff;
    --phosphor-cyan-dim:   #1a6680;
    --phosphor-cyan-glow:  rgba(51, 204, 255, 0.5);
    --bloom-cyan:
        0 0 12px rgba(51, 204, 255, 0.3),
        0 0 4px rgba(51, 204, 255, 0.5);
    --bloom-cyan-full:
        0 0 20px rgba(51, 204, 255, 0.5),
        0 0 8px rgba(51, 204, 255, 0.7),
        0 0 3px rgba(77, 217, 255, 0.9);
    --border-cyan:         rgba(51, 204, 255, 0.3);
}

/* ===================================================================
   RESET
   =================================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border-radius: 0;
}

/* ===================================================================
   CRT EFFECTS — Scanlines, vignette, glass reflection, flicker
   =================================================================== */

.crt-scanlines {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 2px,
        rgba(0, 0, 0, 0.22) 2px,
        rgba(0, 0, 0, 0.22) 3px
    );
    pointer-events: none;
    z-index: 9000;
    animation: scanline-scroll 8s linear infinite;
}

@keyframes scanline-scroll {
    0% { background-position: 0 0; }
    100% { background-position: 0 3px; }
}

.crt-vignette {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(
        ellipse at center,
        transparent 60%,
        rgba(0, 0, 0, 0.06) 85%,
        rgba(0, 0, 0, 0.12) 100%
    );
    pointer-events: none;
    z-index: 9001;
}

.crt-glass {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background:
        radial-gradient(
            ellipse at 25% 15%,
            rgba(255, 255, 255, 0.064) 0%,
            rgba(255, 255, 255, 0.024) 25%,
            transparent 55%
        ),
        radial-gradient(
            ellipse at 20% 10%,
            rgba(255, 255, 255, 0.032) 0%,
            transparent 30%
        );
    pointer-events: none;
    z-index: 9002;
}

@keyframes crt-flicker {
    0%   { opacity: 0.98; }
    5%   { opacity: 1.0; }
    10%  { opacity: 0.97; }
    15%  { opacity: 1.0; }
    50%  { opacity: 0.99; }
    80%  { opacity: 1.0; }
    92%  { opacity: 0.96; }
    95%  { opacity: 1.0; }
    100% { opacity: 0.98; }
}

@keyframes phosphor-pulse {
    0%, 100% { text-shadow: var(--bloom-full); }
    50% { text-shadow:
        0 0 25px rgba(32, 194, 14, 0.7),
        0 0 10px rgba(32, 194, 14, 0.9),
        0 0 4px rgba(51, 255, 51, 1.0);
    }
}

/* Barrel distortion / curvature — REMOVED per David's request (Feb 12, 2026) */

/* Thinking indicator — CRT phosphor green pulse */
.thinking-indicator {
    display: none;
    align-items: center;
    gap: 1ch;
    padding: 4px 0;
    margin: 2px 0;
}
.thinking-indicator.active {
    display: flex;
}
.thinking-label {
    color: var(--phosphor-green);
    text-shadow: var(--bloom-dim);
    font-size: var(--font-size-lg);
    opacity: 0.7;
}
.thinking-dots {
    display: flex;
    gap: 4px;
    align-items: center;
}
.thinking-dot {
    width: 6px;
    height: 6px;
    background: var(--phosphor-green);
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(32, 194, 14, 0.6), 0 0 2px rgba(32, 194, 14, 0.9);
    animation: think-pulse 1.2s ease-in-out infinite;
}
.thinking-dot:nth-child(2) { animation-delay: 0.2s; }
.thinking-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes think-pulse {
    0%, 100% { opacity: 0.15; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); box-shadow: 0 0 10px rgba(32, 194, 14, 0.8), 0 0 4px rgba(32, 194, 14, 1); }
}

/* ===================================================================
   BODY / ROOT
   =================================================================== */
body {
    font-family: var(--font-terminal);
    background: var(--bg-screen);
    color: var(--phosphor-green);
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: unset;
    font-size: var(--font-size-lg);
    line-height: 1.25;
    animation: crt-flicker 4s ease-in-out infinite;
}

/* ===================================================================
   CONSOLE CONTAINER
   =================================================================== */
.console-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 0;
    gap: 0;
    background: var(--bg-screen);
    position: relative;
}

.console-container::before {
    content: '';
    position: fixed;
    top: 50%; left: 50%;
    width: 120%; height: 120%;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center, rgba(32, 194, 14,0.03) 0%, rgba(32, 194, 14,0.015) 30%, transparent 70%);
    pointer-events: none;
    z-index: -1;
}

/* ===================================================================
   ROW 1: MENU BAR
   =================================================================== */
.menu-bar {
    display: flex;
    align-items: center;
    padding: 0 1ch;
    background: var(--dim-surface);
    color: var(--phosphor-green);
    font-size: var(--font-size-lg);
    font-weight: 700;
    line-height: 1.5;
    flex-shrink: 0;
    min-height: 1.5em;
    position: relative;
    z-index: 50;
    border-bottom: 1px solid var(--phosphor-green);
    text-shadow: var(--bloom-dim);
}

.menu-bar-item {
    padding: 0 1ch;
    cursor: pointer;
    white-space: nowrap;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    color: var(--phosphor-green);
    text-shadow: var(--bloom-dim);
    transition: all 0.15s;
}

.menu-bar-item:hover,
.menu-bar-item.active {
    background: var(--phosphor-green);
    color: var(--bg-screen);
    text-shadow: none;
}

.menu-bar-right {
    margin-left: auto;
    padding: 0 1ch;
    color: var(--phosphor-green);
    font-weight: 700;
    text-shadow: var(--bloom-full);
}

.pulldown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--dark-surface);
    color: var(--phosphor-green);
    border: 1px solid var(--border-glow);
    box-shadow: 0 0 15px rgba(32, 194, 14,0.2), 0 4px 12px rgba(0,0,0,0.8);
    min-width: 24ch;
    z-index: 100;
    display: none;
}

.pulldown-menu.active { display: block; }

.pulldown-menu-item {
    padding: 0 2ch;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.5;
    min-height: 44px;
    display: flex;
    align-items: center;
    color: var(--phosphor-green);
    text-shadow: var(--bloom-dim);
}

.pulldown-menu-item:hover {
    background: var(--phosphor-green);
    color: var(--bg-screen);
    text-shadow: none;
}

.pulldown-menu-separator {
    border-top: 1px solid var(--dim-surface);
}

/* ===================================================================
   GRILL HEADER (backward compat)
   =================================================================== */
.grill-header {
    display: flex; align-items: center; padding: 0 1ch;
    background: var(--dark-surface); color: var(--text-dim);
    font-size: var(--font-size-lg); line-height: 1.5; flex-shrink: 0; min-height: 1.5em;
    position: relative; border-bottom: 1px solid var(--border-glow);
}
.grill-header::before, .grill-header::after { display: none; }
.grill-badge {
    font-family: var(--font-terminal); font-size: var(--font-size-lg); font-weight: 700;
    letter-spacing: 1px; text-transform: uppercase; color: var(--phosphor-green);
    text-shadow: var(--bloom-full); user-select: none; margin: 0 auto;
}
.header-status { display: flex; align-items: center; gap: 1ch; font-size: var(--font-size-lg); color: var(--text-dim); z-index: 2; }
.status-dot { display: inline-block; font-size: var(--font-size-lg); line-height: 1; }
.status-dot::before { content: '\25A0'; color: var(--led-red); text-shadow: var(--bloom-red); }
.status-dot.connected::before { color: var(--led-green); text-shadow: 0 0 8px rgba(51,217,51,0.6); }
.header-controls { display: flex; align-items: center; gap: 1ch; z-index: 2; margin-left: auto; }
.sound-toggle { background: none; border: none; color: var(--text-dim); padding: 0 1ch; cursor: pointer; font-family: var(--font-terminal); font-size: var(--font-size-lg); min-height: 44px; }
.sound-toggle:hover { background: var(--phosphor-green); color: var(--bg-screen); text-shadow: none; }
.sound-toggle.active { color: var(--phosphor-green); text-shadow: var(--bloom-dim); }

/* ===================================================================
   ROW 2: STATUS LINE
   =================================================================== */
.status-line {
    display: flex; align-items: center; gap: 2ch; padding: 0 1ch;
    background: var(--bg-screen); color: var(--text-dim);
    font-size: var(--font-size-lg); line-height: 1.5; flex-shrink: 0; min-height: 44px;
    text-shadow: var(--bloom-dim);
}
.status-line-right { margin-left: auto; }
.status-line > span[data-click] { cursor: pointer; padding: 0 0.5ch; min-height: 44px; display: inline-flex; align-items: center; }
.status-line > span[data-click]:hover { background: var(--phosphor-green); color: var(--bg-screen); text-shadow: none; }

.status-bar { display: flex; align-items: center; gap: 2ch; padding: 0 1ch; background: var(--bg-screen); color: var(--text-dim); font-size: var(--font-size-lg); line-height: 1.5; flex-shrink: 0; min-height: 1.5em; }
.status-bar-item { display: flex; align-items: center; gap: 1ch; }
.jewel-mini { display: inline-block; font-size: var(--font-size-lg); line-height: 1; }
.jewel-mini::before { content: '\25A0'; color: var(--led-green); text-shadow: 0 0 6px rgba(51,217,51,0.5); }
.jewel-mini.active::before { color: var(--led-green); text-shadow: 0 0 8px rgba(51,217,51,0.7); }
.jewel-mini.amber::before { color: var(--led-yellow); text-shadow: 0 0 6px rgba(242,217,26,0.5); }
.jewel-mini.off::before { color: var(--muted-surface); text-shadow: none; }
.status-bar-item .jewel-mini { width: auto; height: auto; border-radius: 0; background: none; box-shadow: none; }

/* ===================================================================
   ROW 3: TAB BAR
   =================================================================== */
.tab-bar { display: flex; align-items: center; padding: 0; background: var(--dim-surface); flex-shrink: 0; min-height: 1.5em; border-bottom: 1px solid var(--phosphor-green); }
.tab-bar-item { padding: 0 2ch; color: var(--phosphor-green); cursor: pointer; font-size: var(--font-size-lg); font-weight: 700; line-height: 1.5; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; text-shadow: var(--bloom-dim); transition: all 0.15s; }
.tab-bar-item.active { color: var(--bg-screen); background: var(--phosphor-green); text-shadow: none; }
.tab-bar-item:hover:not(.active) { color: var(--phosphor-bright); text-shadow: var(--bloom-full); }

.tab-nav { display: flex; background: var(--dim-surface); border-bottom: 1px solid var(--phosphor-green); flex-shrink: 0; z-index: 5; }
.tab-btn { flex: 1; padding: 0 1ch; background: var(--dim-surface); border: none; color: var(--phosphor-green); font-family: var(--font-terminal); font-size: var(--font-size-lg); font-weight: 700; cursor: pointer; line-height: 1.5; text-shadow: var(--bloom-dim); min-height: 44px; }
.tab-btn:hover { color: var(--phosphor-bright); text-shadow: var(--bloom-full); }
.tab-btn.active { color: var(--bg-screen); background: var(--phosphor-green); text-shadow: none; }
.tab-btn .tab-key { font-size: var(--font-size-md); color: var(--muted-label); margin-left: 1ch; }
.tab-btn.active .tab-key { color: var(--bg-screen); }

/* ===================================================================
   CRT BEZEL / SCREEN (backward compat)
   =================================================================== */
.crt-bezel { flex: 1; position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--bg-screen); }
.crt-screen { flex: 1; position: relative; background: var(--bg-screen); border: none; overflow: hidden; display: flex; flex-direction: column; }
.crt-screen::before, .crt-screen::after { display: none; }

/* ===================================================================
   TAB CONTENT PANELS
   =================================================================== */
.tab-content { flex: 1; overflow: hidden; position: relative; }
.tab-panel { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow-y: auto; background: var(--bg-screen); scrollbar-width: thin; scrollbar-color: var(--phosphor-dim) var(--bg-screen); }
.tab-panel::-webkit-scrollbar { width: 12px; }
.tab-panel::-webkit-scrollbar-track { background: var(--bg-screen); }
.tab-panel::-webkit-scrollbar-thumb { background: var(--dim-surface); border: 1px solid var(--border-glow); }
.tab-panel.active { display: flex; flex-direction: column; }

/* ===================================================================
   CONSOLE TAB — Dual panel
   =================================================================== */
.console-dual-panel { display: flex; flex: 1; overflow: hidden; }
.panel-left { flex: 6; display: flex; flex-direction: column; border: 1px solid var(--border-glow); margin: 2px; overflow: hidden; }
.panel-right { flex: 4; display: flex; flex-direction: column; border: 1px solid var(--border-glow); margin: 2px 2px 2px 0; overflow: hidden; }
.panel-title { background: var(--dark-surface); color: var(--text-dim); padding: 0 1ch; font-size: var(--font-size-lg); line-height: 1.5; flex-shrink: 0; text-align: center; text-shadow: var(--bloom-dim); border-bottom: 1px solid rgba(32, 194, 14,0.15); }

/* ===================================================================
   MESSAGES / CONVERSATION LOG
   =================================================================== */
.message-log { flex: 1; overflow-y: auto; padding: 2px 1ch; font-size: var(--font-size-lg); line-height: 1.25; background: var(--bg-screen); color: var(--phosphor-green); scrollbar-width: thin; scrollbar-color: var(--phosphor-dim) var(--bg-screen); mask-image: linear-gradient(to top, white 0%, white 85%, rgba(255,255,255,0.7) 95%, rgba(255,255,255,0.5) 100%); -webkit-mask-image: linear-gradient(to top, white 0%, white 85%, rgba(255,255,255,0.7) 95%, rgba(255,255,255,0.5) 100%); }
.message-log::-webkit-scrollbar { width: 12px; }
.message-log::-webkit-scrollbar-track { background: var(--bg-screen); }
.message-log::-webkit-scrollbar-thumb { background: var(--dim-surface); }
.msg-entry { padding: 0; }
.msg-time { color: #808080; font-size: var(--font-size-lg); margin-right: 1ch; }
.msg-sender { font-weight: bold; margin-right: 1ch; }

.msg-entry.user .msg-sender { color: var(--tungsten-warm); text-shadow: var(--bloom-tungsten); }
.msg-entry.user .msg-text { color: var(--tungsten-hot); text-shadow: 0 0 12px rgba(255,217,128,0.3), 0 0 4px rgba(255, 176, 0,0.4); }
.msg-entry.assistant .msg-sender { color: var(--phosphor-green); text-shadow: var(--bloom-full); }
.msg-entry.assistant .msg-text { color: var(--phosphor-green); text-shadow: var(--bloom-dim); }
.msg-entry.user-121g .msg-sender { color: var(--tungsten-warm); text-shadow: var(--bloom-tungsten); }
.msg-entry.user-121g .msg-text { color: var(--tungsten-hot); text-shadow: 0 0 12px rgba(255,217,128,0.35), 0 0 4px rgba(255, 176, 0,0.5); }
.msg-entry.user-121g { border-left: 2px solid var(--tungsten-amber); padding-left: 1ch; }
.msg-entry.system .msg-sender, .msg-entry.system .msg-text { color: var(--tungsten-warm); text-shadow: var(--bloom-tungsten); }
.msg-entry.worker .msg-sender, .msg-entry.worker .msg-text { color: var(--tungsten-amber); text-shadow: 0 0 8px rgba(255,191,77,0.4); }
.msg-entry.ack .msg-sender { color: var(--phosphor-green); opacity: 0.7; text-shadow: var(--bloom-dim); }
.msg-entry.ack .msg-text { color: var(--phosphor-green); opacity: 0.7; font-style: italic; text-shadow: var(--bloom-dim); }
.msg-entry.error .msg-sender, .msg-entry.error .msg-text { color: var(--led-red); text-shadow: var(--bloom-red); }

/* Phone call messages — cyan channel */
.msg-entry.phone-in { border-left: 2px solid #4dd2ff; padding-left: 1ch; }
.msg-entry.phone-in .msg-sender { color: #4dd2ff; text-shadow: 0 0 8px rgba(77,210,255,0.5); }
.msg-entry.phone-in .msg-text { color: #80dfff; text-shadow: 0 0 6px rgba(77,210,255,0.3); }
.msg-entry.phone-out { border-left: 2px solid #4dd2ff; padding-left: 1ch; }
.msg-entry.phone-out .msg-sender { color: var(--phosphor-green); text-shadow: var(--bloom-full); }
.msg-entry.phone-out .msg-text { color: var(--phosphor-green); text-shadow: var(--bloom-dim); }
.msg-entry.phone-system .msg-sender { color: #4dd2ff; text-shadow: 0 0 6px rgba(77,210,255,0.3); }
.msg-entry.phone-system .msg-text { color: #80dfff; text-shadow: 0 0 4px rgba(77,210,255,0.2); }

/* SMS messages — magenta channel */
.msg-entry.sms-in { border-left: 2px solid #ff66b2; padding-left: 1ch; }
.msg-entry.sms-in .msg-sender { color: #ff66b2; text-shadow: 0 0 8px rgba(255,102,178,0.5); }
.msg-entry.sms-in .msg-text { color: #ff99cc; text-shadow: 0 0 6px rgba(255,102,178,0.3); }
.msg-entry.sms-out { border-left: 2px solid #ff66b2; padding-left: 1ch; }
.msg-entry.sms-out .msg-sender { color: var(--phosphor-green); text-shadow: var(--bloom-full); }
.msg-entry.sms-out .msg-text { color: var(--phosphor-green); text-shadow: var(--bloom-dim); }

/* Voicemail — amber/orange */
.msg-entry.voicemail { border-left: 2px solid var(--tungsten-warm); padding-left: 1ch; }
.msg-entry.voicemail .msg-sender { color: var(--tungsten-warm); text-shadow: var(--bloom-tungsten); }
.msg-entry.voicemail .msg-text { color: var(--tungsten-hot); }

/* Alfred status bar speaking state */
.alfred-status-text.speaking { color: var(--phosphor-bright); animation: speaking-pulse 1.2s ease-in-out infinite; }
@keyframes speaking-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* ===================================================================
   COMMAND INPUT BAR
   =================================================================== */
.msg-input-bar { display: flex; gap: 1ch; padding: 2px 1ch; border-top: 1px solid var(--border-glow); background: var(--bg-screen); flex-shrink: 0; }
.msg-input-bar select { padding: 0 1ch; background: var(--bg-input); border: 1px solid var(--border-glow); color: var(--phosphor-green); font-family: var(--font-terminal); font-size: var(--font-size-lg); cursor: pointer; min-height: 44px; }
.msg-input-bar input { flex: 1; padding: 0 1ch; background: var(--bg-input); border: 1px solid var(--border-glow); color: var(--phosphor-bright); font-family: var(--font-terminal); font-size: var(--font-size-lg); caret-color: var(--phosphor-bright); text-shadow: var(--bloom-dim); line-height: 1.5; min-height: 44px; }
.msg-input-bar input:focus { outline: none; border-color: var(--phosphor-green); box-shadow: 0 0 8px rgba(32, 194, 14,0.3); }
.msg-input-bar input::placeholder { color: var(--muted-label); text-shadow: none; }
.msg-input-bar button { padding: 0 1ch; background: var(--dark-surface); border: 1px solid var(--border-glow); color: var(--phosphor-green); font-family: var(--font-terminal); font-size: var(--font-size-lg); cursor: pointer; text-shadow: var(--bloom-dim); min-height: 44px; }
.msg-input-bar button::before { content: '[ '; }
.msg-input-bar button::after { content: ' ]'; }
.msg-input-bar button:hover { background: var(--phosphor-green); color: var(--bg-screen); text-shadow: none; box-shadow: 0 0 12px rgba(32, 194, 14,0.4); }

.voice-ctl-btn { padding: 0 1ch; background: var(--bg-input); border: 1px solid var(--dim-surface); color: var(--muted-label); font-family: var(--font-terminal); font-size: var(--font-size-lg); cursor: pointer; white-space: nowrap; min-width: 5ch; text-align: center; min-height: 44px; }
.voice-ctl-btn:hover { border-color: var(--border-glow); color: var(--phosphor-green); }
.voice-ctl-btn.active { background: var(--bg-input); border-color: var(--phosphor-green); color: var(--phosphor-green); text-shadow: 0 0 6px rgba(32,194,14,0.5); }
.voice-ctl-btn.muted { background: var(--bg-input); border-color: var(--text-meta); color: var(--text-meta); text-shadow: none; }

/* ===================================================================
   AGENTS TAB
   =================================================================== */
.agent-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; padding: 2px; flex: 1; overflow: hidden; }
@media (max-width: 1000px) { .agent-grid { grid-template-columns: 1fr; } }
.agent-card { background: var(--bg-screen); border: 1px solid var(--border-glow); display: flex; flex-direction: column; overflow: hidden; max-height: 100%; }
.agent-card:hover { border-color: var(--phosphor-green); box-shadow: 0 0 10px rgba(32, 194, 14,0.2); }
.agent-header { display: flex; align-items: center; gap: 1ch; padding: 0 1ch; background: var(--dark-surface); border-bottom: 1px solid var(--border-glow); line-height: 1.5; }

.agent-jewel { display: inline-block; font-size: var(--font-size-lg); line-height: 1; flex-shrink: 0; }
.agent-jewel::before { content: '\25A0'; color: var(--muted-surface); }
.agent-jewel.active::before { color: var(--jewel-green); text-shadow: 0 0 8px rgba(38,230,51,0.6); }
.agent-jewel.amber::before { color: var(--jewel-amber); text-shadow: 0 0 8px rgba(255,166,26,0.6); }
.agent-jewel.amber.active::before { color: var(--jewel-amber); text-shadow: 0 0 10px rgba(255,166,26,0.8); }
.agent-jewel.cyan::before { color: var(--phosphor-cyan-dim); text-shadow: var(--bloom-cyan); }
.agent-jewel.cyan.active::before { color: var(--phosphor-cyan); text-shadow: var(--bloom-cyan-full); }

.agent-info { flex: 1; }
.agent-role { font-size: var(--font-size-md); color: var(--text-dim); letter-spacing: 1px; text-shadow: var(--bloom-dim); }
.agent-name { font-size: var(--font-size-lg); color: var(--phosphor-green); font-weight: bold; text-shadow: var(--bloom-dim); }
.agent-status { font-size: var(--font-size-lg); padding: 0 1ch; color: var(--led-red); text-shadow: var(--bloom-red); }
.agent-status.active { color: var(--led-green); text-shadow: 0 0 8px rgba(51,217,51,0.6); }

.terminal-frame { flex: 1; min-height: 0; background: var(--bg-input); position: relative; overflow: auto; cursor: pointer; }
.terminal-frame .terminal-output { height: 100%; }
.terminal-frame::before { display: none; }
.agent-controls { display: flex; gap: 1ch; padding: 2px 1ch; background: var(--dark-surface); border-top: 1px solid var(--border-glow); }
.agent-controls button { flex: 1; padding: 0 1ch; background: var(--dark-surface); border: 1px solid var(--border-glow); color: var(--phosphor-green); cursor: pointer; font-family: var(--font-terminal); font-size: var(--font-size-lg); text-shadow: var(--bloom-dim); min-height: 44px; }
.agent-controls button::before { content: '[ '; }
.agent-controls button::after { content: ' ]'; }
.agent-controls button:hover { background: var(--phosphor-green); color: var(--bg-screen); text-shadow: none; box-shadow: 0 0 10px rgba(32, 194, 14,0.3); }

.agent-mini-card { display: flex; align-items: center; gap: 1ch; padding: 0 1ch; line-height: 1.5; color: var(--phosphor-green); cursor: pointer; min-height: 44px; user-select: none; text-shadow: var(--bloom-dim); }
.agent-mini-card:hover { background: var(--phosphor-green); color: var(--bg-screen); text-shadow: none; }
.agent-mini-card:active { background: var(--phosphor-bright); color: var(--bg-screen); }

/* ===================================================================
   WORKERS TAB
   =================================================================== */
.workers-panel { padding: 2px 1ch; }
.section-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; line-height: 1.5; }
.section-title { font-size: var(--font-size-lg); color: var(--phosphor-green); letter-spacing: 1px; text-shadow: var(--bloom-dim); }
.workers-controls { display: flex; align-items: center; gap: 1ch; }
.workers-count { font-size: var(--font-size-lg); color: var(--text-dim); }

.btn-small { padding: 0 1ch; background: var(--dark-surface); border: 1px solid var(--border-glow); color: var(--phosphor-green); cursor: pointer; font-family: var(--font-terminal); font-size: var(--font-size-lg); text-shadow: var(--bloom-dim); min-height: 44px; }
.btn-small::before { content: '[ '; }
.btn-small::after { content: ' ]'; }
.btn-small:hover { background: var(--phosphor-green); color: var(--bg-screen); text-shadow: none; }

.workers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(30ch,1fr)); gap: 4px; }
.worker-empty-state { color: var(--muted-label); font-size: var(--font-size-lg); padding: 2ch; text-align: center; grid-column: 1 / -1; }
.worker-card { background: var(--bg-screen); border: 1px solid var(--border-glow); padding: 2px 1ch; cursor: pointer; min-height: 44px; }
.worker-card:hover { border-color: var(--phosphor-green); background: rgba(32, 194, 14,0.05); box-shadow: 0 0 8px rgba(32, 194, 14,0.15); }
.worker-card:active { background: var(--phosphor-green); color: var(--bg-screen); }
.worker-card-header { display: flex; align-items: center; gap: 1ch; margin-bottom: 2px; }

.worker-jewel { display: inline-block; font-size: var(--font-size-lg); line-height: 1; flex-shrink: 0; }
.worker-jewel::before { content: '\25A0'; color: var(--led-red); text-shadow: var(--bloom-red); }
.worker-jewel.running::before { color: var(--led-green); text-shadow: 0 0 8px rgba(51,217,51,0.6); }
.worker-jewel.thinking::before { color: var(--led-yellow); text-shadow: 0 0 8px rgba(242,217,26,0.5); }
.worker-jewel.complete::before { color: var(--phosphor-green); text-shadow: var(--bloom-dim); }

.worker-name { font-size: var(--font-size-lg); color: var(--phosphor-green); font-weight: bold; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: var(--bloom-dim); }
.worker-spec { font-size: var(--font-size-md); color: var(--text-dim); letter-spacing: 1px; text-transform: uppercase; }
.worker-task { font-size: var(--font-size-lg); color: var(--text-dim); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.worker-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; padding-top: 2px; border-top: 1px solid var(--dim-surface); }
.worker-state { font-size: var(--font-size-lg); padding: 0 1ch; text-transform: uppercase; }
.worker-state.active { color: var(--led-green); text-shadow: 0 0 6px rgba(51,217,51,0.5); }
.worker-state.thinking { color: var(--led-yellow); text-shadow: 0 0 6px rgba(242,217,26,0.5); }
.worker-state.idle { color: var(--muted-label); }
.worker-archive-btn { padding: 0 1ch; background: none; border: 1px solid var(--led-red); color: var(--led-red); cursor: pointer; font-family: var(--font-terminal); font-size: var(--font-size-lg); text-shadow: 0 0 4px rgba(242,38,26,0.4); min-height: 44px; }
.worker-archive-btn:hover { background: var(--led-red); color: var(--bg-screen); text-shadow: none; }

/* Worker LED Grid */
.led-grid { display: flex; gap: 1ch; flex-wrap: wrap; padding: 2px 1ch; }
.led-slot { font-size: var(--font-size-lg); line-height: 1; cursor: pointer; min-width: 2ch; min-height: 2ch; display: inline-flex; align-items: center; justify-content: center; }
.led-slot:hover { background: rgba(32, 194, 14,0.15); }
.led-slot::before { content: '\00B7'; color: var(--muted-surface); }
.led-slot.idle::before { content: '\25A0'; color: var(--led-green); text-shadow: 0 0 6px rgba(51,217,51,0.5); }
.led-slot.working::before { content: '\25A0'; color: var(--tungsten-warm); text-shadow: var(--bloom-tungsten); animation: phosphor-pulse 2s ease-in-out infinite; }
.led-slot.error::before { content: '\25A0'; color: var(--led-red); text-shadow: var(--bloom-red); }
.led-slot.spawning::before { content: '\25A0'; color: var(--led-yellow); text-shadow: 0 0 6px rgba(242,217,26,0.5); }
.led-slot.empty::before { content: '\25A0'; color: var(--muted-surface); font-size: var(--font-size-md); }

/* ===================================================================
   AGENT GRAPH (Force-directed hierarchy)
   =================================================================== */
.agent-graph-container {
    position: relative;
    width: 100%;
    height: 420px;
    background: var(--bg-screen);
    border: 1px solid var(--border-glow);
    margin-bottom: 4px;
    overflow: hidden;
}
#agent-graph-svg { width: 100%; height: 100%; }

/* Graph node circles */
.graph-node { cursor: pointer; }
.graph-node circle { stroke-width: 2px; }
.graph-node.active circle { animation: node-pulse 2s ease-in-out infinite; }
.graph-node.thinking circle { animation: node-pulse-amber 1.5s ease-in-out infinite; }
.graph-node.idle circle { opacity: 0.5; }
.graph-node.completed circle { stroke: var(--phosphor-green); stroke-dasharray: 3 2; }

@keyframes node-pulse {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(32, 194, 14, 0.4)); }
    50% { filter: drop-shadow(0 0 12px rgba(32, 194, 14, 0.8)); }
}
@keyframes node-pulse-amber {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(255, 170, 51, 0.4)); }
    50% { filter: drop-shadow(0 0 12px rgba(255, 170, 51, 0.8)); }
}

/* Graph node labels */
.graph-node text {
    font-family: var(--font-terminal);
    font-size: var(--font-size-base);
    fill: var(--phosphor-green);
    text-shadow: var(--bloom-dim);
    pointer-events: none;
    text-anchor: middle;
}
.graph-node .node-task-label {
    font-size: var(--font-size-sm);
    fill: var(--phosphor-dim);
}

/* Graph edges */
.graph-edge { stroke: var(--border-glow); stroke-width: 1.5px; fill: none; }
.graph-edge.team { stroke: var(--phosphor-dim); stroke-dasharray: 4 2; }
.graph-edge.spawned { stroke: var(--phosphor-green); stroke-width: 1px; }
.graph-edge.controls { stroke: var(--phosphor-amber); stroke-width: 1px; stroke-dasharray: 6 3; }

/* Graph edge arrows */
.graph-arrow { fill: var(--border-glow); }
.graph-arrow.team { fill: var(--phosphor-dim); }
.graph-arrow.spawned { fill: var(--phosphor-green); }
.graph-arrow.controls { fill: var(--phosphor-amber); }

/* Graph tooltip */
.graph-tooltip {
    display: none;
    position: absolute;
    background: var(--dark-glass);
    border: 1px solid var(--phosphor-green);
    padding: 4px 8px;
    font-family: var(--font-terminal);
    font-size: var(--font-size-md);
    color: var(--phosphor-green);
    text-shadow: var(--bloom-dim);
    box-shadow: 0 0 12px rgba(32, 194, 14, 0.2);
    pointer-events: none;
    z-index: 100;
    max-width: 300px;
    white-space: pre-line;
}

/* Graph legend */
.graph-legend {
    position: absolute;
    bottom: 4px;
    left: 8px;
    display: flex;
    gap: 12px;
    font-family: var(--font-terminal);
    font-size: var(--font-size-base);
    color: var(--text-dim);
}
.legend-item { display: flex; align-items: center; gap: 4px; }
.legend-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.legend-dot.conductor { background: var(--phosphor-green); box-shadow: 0 0 6px rgba(32, 194, 14,0.6); }
.legend-dot.lead { background: var(--phosphor-cyan); box-shadow: 0 0 6px rgba(51,204,255,0.6); }
.legend-dot.worker { background: var(--tungsten-warm); box-shadow: 0 0 6px rgba(255, 176, 0,0.6); }
.legend-dot.external { background: var(--phosphor-amber); box-shadow: 0 0 6px rgba(255,170,51,0.6); }

/* Graph toggle button active state */
.graph-toggle.active { background: var(--phosphor-green); color: var(--bg-screen); text-shadow: none; }

/* ===================================================================
   NODES TAB
   =================================================================== */
.nodes-panel { padding: 2px 1ch; }
.nodes-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; margin-bottom: 8px; }
@media (max-width: 800px) { .nodes-grid { grid-template-columns: 1fr; } }
.node-item { display: flex; align-items: center; gap: 1ch; padding: 2px 1ch; background: var(--bg-screen); border: 1px solid var(--border-glow); cursor: pointer; min-height: 44px; }
.node-item:hover { border-color: var(--phosphor-green); background: rgba(32, 194, 14,0.08); box-shadow: 0 0 10px rgba(32, 194, 14,0.2); }
.node-item:hover .node-name, .node-item:hover .node-voice, .node-item:hover .node-ip, .node-item:hover .node-seen { color: var(--phosphor-bright); }
.node-item:active { background: var(--phosphor-green); }

.node-jewel { display: inline-block; font-size: var(--font-size-lg); line-height: 1; flex-shrink: 0; }
.node-jewel::before { content: '\25A0'; color: var(--led-red); text-shadow: var(--bloom-red); }
.node-jewel.connected::before { color: var(--led-green); text-shadow: 0 0 8px rgba(51,217,51,0.6); }
.node-info { flex: 1; }
.node-name { font-size: var(--font-size-lg); color: var(--phosphor-green); font-weight: bold; text-shadow: var(--bloom-dim); }
.node-voice { font-size: var(--font-size-lg); color: var(--text-dim); }
.node-meta { text-align: right; }
.node-ip { font-size: var(--font-size-lg); color: var(--text-dim); }
.node-seen { font-size: var(--font-size-md); color: var(--muted-label); }

.services-section { margin-top: 4px; }
.services-grid { display: flex; gap: 2ch; flex-wrap: wrap; margin-top: 4px; }
.service-item { display: flex; align-items: center; gap: 1ch; padding: 0 1ch; font-size: var(--font-size-lg); color: var(--text-dim); cursor: pointer; min-height: 44px; }
.service-item:hover { background: rgba(32, 194, 14,0.1); color: var(--phosphor-green); }
.service-jewel { display: inline-block; font-size: var(--font-size-lg); line-height: 1; }
.service-jewel::before { content: '\25A0'; color: var(--led-red); text-shadow: var(--bloom-red); }
.service-item.active .service-jewel::before { color: var(--led-green); text-shadow: 0 0 8px rgba(51,217,51,0.6); }
.service-detail { font-size: var(--font-size-lg); color: var(--text-dim); margin-left: 1ch; }

.status-indicator { color: var(--muted-surface); }
.status-indicator.active, .status-indicator.ok { color: var(--led-green); text-shadow: 0 0 6px rgba(51,217,51,0.5); }
.status-indicator.connected { color: var(--led-green); text-shadow: 0 0 6px rgba(51,217,51,0.5); }
.status-indicator.amber { color: var(--led-yellow); text-shadow: 0 0 6px rgba(242,217,26,0.5); }
.status-indicator.warning { color: var(--led-red); text-shadow: 0 0 6px rgba(242,38,26,0.5); }
.status-indicator.cyan { color: var(--phosphor-green); text-shadow: var(--bloom-dim); }

.services-dos-table { font-size: var(--font-size-lg); color: var(--phosphor-green); padding: 2px 1ch; }
.svc-row { display: flex; line-height: 1.5; cursor: pointer; min-height: 44px; align-items: center; padding: 0 0.5ch; }
.svc-row:hover { background: rgba(32, 194, 14,0.1); color: var(--phosphor-bright); }
.svc-row .dots { flex: 1; overflow: hidden; color: var(--dim-surface); }
.svc-row:hover .dots { color: var(--text-dim); }

/* ===================================================================
   GOALS
   =================================================================== */
.goals-summary { font-size: var(--font-size-lg); color: var(--phosphor-green); padding: 2px 1ch; }
.goals-list { padding: 0 1ch; }
.goal-mini-item { font-size: var(--font-size-md); color: var(--text-dim); line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.goal-mini-item .goal-priority { color: var(--phosphor-bright); margin-right: 0.5ch; }
.goal-mini-item.dim { opacity: 0.4; }
.goals-panel { padding: 4px 1ch; }
.goals-counter { font-size: var(--font-size-md); color: var(--text-dim); }
.goals-section-label { font-size: var(--font-size-lg); color: var(--phosphor-bright); letter-spacing: 1px; margin: 4px 0 2px; border-bottom: 1px solid var(--border-glow); padding-bottom: 2px; text-shadow: var(--bloom-dim); }
.goals-full-list { display: flex; flex-direction: column; gap: 4px; }
.goal-card { padding: 4px 1ch; background: var(--bg-screen); border: 1px solid var(--border-glow); font-size: var(--font-size-md); }
.goal-card.goal-done { opacity: 0.5; }
.goal-card-header { display: flex; gap: 1ch; align-items: baseline; }
.goal-status-badge { color: var(--phosphor-bright); font-weight: bold; }
.goal-card.goal-done .goal-status-badge { color: var(--text-dim); }
.goal-title { flex: 1; color: var(--phosphor-green); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.goal-priority-badge { color: var(--phosphor-bright); font-size: var(--font-size-md); }
.goal-card-meta { color: var(--text-dim); font-size: var(--font-size-md); line-height: 1.4; margin-top: 2px; }
.goal-progress, .goal-next { margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.goal-add-btn { background: none; border: 1px solid var(--border-glow); color: var(--phosphor-bright); font-family: inherit; font-size: var(--font-size-md); cursor: pointer; padding: 8px 8px; margin-left: auto; line-height: 1.4; transition: background 0.15s, color 0.15s; min-height: 44px; }
.goal-add-btn:hover { background: var(--phosphor-green); color: var(--bg-body); }
.goal-add-mini { color: var(--text-dim); cursor: pointer; font-size: var(--font-size-md); transition: color 0.15s; }
.goal-add-mini:hover { color: var(--phosphor-bright); text-shadow: var(--bloom-dim); }
.goal-input-row { display: flex; gap: 4px; padding: 4px 0; }
.goal-input { flex: 1; background: var(--bg-screen); border: 1px solid var(--phosphor-green); color: var(--phosphor-bright); font-family: inherit; font-size: var(--font-size-md); padding: 4px 1ch; outline: none; caret-color: var(--phosphor-bright); }
.goal-input::placeholder { color: var(--text-dim); opacity: 0.5; }
.goal-input:focus { border-color: var(--phosphor-bright); box-shadow: 0 0 4px var(--phosphor-green); }
.goal-submit-btn { background: none; border: 1px solid var(--phosphor-green); color: var(--phosphor-bright); font-family: inherit; font-size: var(--font-size-md); cursor: pointer; padding: 4px 1ch; transition: background 0.15s, color 0.15s; }
.goal-submit-btn:hover { background: var(--phosphor-green); color: var(--bg-body); }
/* ===================================================================
   ALFRED AVATAR — CRT Vector Portrait
   =================================================================== */

/* Container acts as the CRT screen */
.alfred-avatar-container {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    overflow: hidden;
    background: var(--bg-screen);
    border: 1px solid var(--phosphor-dim);
    border-radius: 8px;
    box-shadow:
        0 0 20px rgba(32, 194, 14, 0.05),
        0 0 60px rgba(32, 194, 14, 0.03),
        inset 0 0 80px rgba(0,0,0,0.6);
    animation: avatar-hSync 10s ease-in-out infinite;
}

/* Scanlines overlay */
.alfred-avatar-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(0,0,0,0.15) 1px, rgba(0,0,0,0.15) 2px);
    pointer-events: none;
    z-index: 10;
}

/* Vignette / screen curvature */
.alfred-avatar-container::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.4) 85%, rgba(0,0,0,0.7) 100%);
    pointer-events: none;
    z-index: 11;
}

/* Horizontal scan sweep */
.avatar-scan-line {
    position: absolute; top: 0; left: 0; width: 100%; height: 3px;
    background: linear-gradient(180deg, transparent, rgba(32, 194, 14, 0.06), transparent);
    z-index: 9; animation: avatar-scanSweep 8s linear infinite; pointer-events: none;
}
@keyframes avatar-scanSweep { 0% { top: -3px; } 100% { top: 100%; } }

/* Static noise overlay */
.avatar-static-overlay {
    position: absolute; inset: 0; z-index: 8; pointer-events: none; opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    animation: avatar-noiseShift 0.5s steps(5) infinite;
}
@keyframes avatar-noiseShift {
    0% { transform: translate(0, 0); } 20% { transform: translate(-2px, 1px); }
    40% { transform: translate(1px, -2px); } 60% { transform: translate(-1px, 2px); }
    80% { transform: translate(2px, -1px); } 100% { transform: translate(0, 0); }
}

/* Header text */
.avatar-header-text {
    position: absolute; top: 6px; left: 0; width: 100%; text-align: center;
    font-size: var(--font-size-xs); letter-spacing: 3px; color: var(--text-dim);
    text-shadow: 0 0 4px rgba(32, 194, 14,0.3); z-index: 5; font-family: var(--font-mono);
}

/* Visualizer canvas (replaces SVG face) */
#alfred-visualizer-canvas {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Mode selector row (now inside container for fullscreen) */
.viz-mode-selector {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 12;
    display: flex;
    gap: 4px;
    justify-content: center;
}
.viz-mode-btn {
    padding: 4px 10px;
    font-size: var(--font-size-sm);
    font-family: var(--font-mono);
    background: rgba(13, 15, 13, 0.75);
    border: 1px solid rgba(32, 194, 14, 0.2);
    border-radius: 3px;
    color: rgba(32, 194, 14, 0.45);
    cursor: pointer;
    letter-spacing: 1px;
    transition: all 0.2s;
    backdrop-filter: blur(4px);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.viz-mode-btn:hover {
    color: rgba(32, 194, 14, 0.8);
    border-color: rgba(32, 194, 14, 0.45);
    background: rgba(32, 194, 14, 0.06);
}
.viz-mode-btn.active {
    color: var(--phosphor-green);
    border-color: rgba(32, 194, 14, 0.5);
    background: rgba(32, 194, 14, 0.1);
    text-shadow: 0 0 6px rgba(32, 194, 14, 0.5);
}

/* Fullscreen button (inside container) */
.viz-fullscreen-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 15;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(32, 194, 14, 0.15);
    border-radius: 3px;
    background: rgba(13, 15, 13, 0.7);
    color: rgba(32, 194, 14, 0.35);
    font-size: var(--font-size-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    padding: 0;
    line-height: 1;
}
.viz-fullscreen-btn:hover {
    color: var(--phosphor-green);
    border-color: rgba(32, 194, 14, 0.4);
    background: rgba(32, 194, 14, 0.08);
}

/* Text wisps layer (ephemeral TTS transcript overlay) */
.viz-text-wisps {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    overflow: hidden;
}
.viz-text-wisp {
    position: absolute;
    font-family: var(--font-terminal);
    font-size: 32px;
    font-weight: 900;
    color: rgba(32, 194, 14, 0.92);
    -webkit-text-stroke: 1.5px rgba(0, 0, 0, 0.5);
    text-shadow:
        0 0 8px rgba(32, 194, 14, 0.55),
        0 0 22px rgba(32, 194, 14, 0.25),
        0 1px 3px rgba(0, 0, 0, 0.8);
    white-space: normal;
    word-wrap: break-word;
    max-width: 90%;
    text-align: center;
    text-transform: uppercase;
    opacity: 0;
    animation: vizTextWispIn 0.6s ease-out forwards;
    letter-spacing: 3px;
    line-height: 1.4;
}
/* Bars + Wave: green text at TOP in big block letters */
.viz-text-wisp.mode-bars,
.viz-text-wisp.mode-wave {
    color: rgba(32, 194, 14, 0.95);
    text-shadow: 0 0 10px rgba(32, 194, 14, 0.7), 0 0 24px rgba(32, 194, 14, 0.35);
    font-size: 36px;
    letter-spacing: 4px;
    -webkit-text-stroke: 2px rgba(0, 0, 0, 0.5);
}

/* --- Default fade-in (shared by all modes) --- */
@keyframes vizTextWispIn {
    0% { opacity: 0; transform: translate(-50%, 8px) scale(0.92); filter: blur(3px); }
    100% { opacity: 1; transform: translate(-50%, 0) scale(1); filter: blur(0); }
}

/* === KLYSTRON (tube) mode: phosphor glow then scatter upward === */
.viz-text-wisp.mode-klystron {
    animation: vizTextWispIn 0.6s ease-out forwards, klystronDissolve 2.5s ease-in 6s forwards;
}
@keyframes klystronDissolve {
    0%   { opacity: 1; transform: translate(-50%, 0); filter: blur(0); }
    30%  { opacity: 0.8; transform: translate(-50%, -5px); filter: blur(0.5px); }
    100% { opacity: 0; transform: translate(-50%, -40px) scaleX(1.15); filter: blur(6px); }
}

/* === AURORA mode: ripple wave then horizontal drift === */
.viz-text-wisp.mode-aurora {
    animation: vizTextWispIn 0.6s ease-out forwards, auroraDissolve 2.5s ease-in-out 6s forwards;
}
@keyframes auroraDissolve {
    0%   { opacity: 1; transform: translate(-50%, 0) skewX(0deg); filter: blur(0) hue-rotate(0deg); }
    25%  { opacity: 0.9; transform: translate(-45%, -3px) skewX(4deg); filter: blur(0.5px) hue-rotate(30deg); }
    50%  { opacity: 0.7; transform: translate(-55%, 3px) skewX(-4deg); filter: blur(1px) hue-rotate(60deg); }
    75%  { opacity: 0.4; transform: translate(-40%, -5px) skewX(6deg); filter: blur(2px) hue-rotate(90deg); }
    100% { opacity: 0; transform: translate(-30%, -8px) skewX(10deg); filter: blur(5px) hue-rotate(120deg); }
}

/* === SPHERE mode: scale down + spiral inward to center === */
.viz-text-wisp.mode-sphere {
    animation: vizTextWispIn 0.6s ease-out forwards, sphereDissolve 2.5s ease-in 6s forwards;
}
@keyframes sphereDissolve {
    0%   { opacity: 1; transform: translate(-50%, 0) scale(1) rotate(0deg); filter: blur(0); }
    30%  { opacity: 0.8; transform: translate(-50%, -5px) scale(0.85) rotate(5deg); filter: blur(0.5px); }
    60%  { opacity: 0.5; transform: translate(-50%, -15px) scale(0.55) rotate(15deg); filter: blur(1.5px); }
    100% { opacity: 0; transform: translate(-50%, -30px) scale(0.1) rotate(40deg); filter: blur(4px); }
}

/* === BARS mode: Matrix rain drop-down dissolve === */
.viz-text-wisp.mode-bars {
    animation: vizTextWispIn 0.6s ease-out forwards, barsDissolve 2.5s ease-in 6s forwards;
}
@keyframes barsDissolve {
    0%   { opacity: 1; transform: translate(-50%, 0); filter: blur(0); clip-path: inset(0 0 0 0); }
    20%  { opacity: 0.9; transform: translate(-50%, 4px); filter: blur(0); clip-path: inset(0 0 0 0); }
    40%  { opacity: 0.7; transform: translate(-50%, 14px); filter: blur(0.3px); clip-path: inset(15% 0 0 0); }
    60%  { opacity: 0.5; transform: translate(-50%, 28px); filter: blur(0.5px); clip-path: inset(35% 0 0 0); }
    80%  { opacity: 0.25; transform: translate(-50%, 46px); filter: blur(1px); clip-path: inset(60% 0 0 0); }
    100% { opacity: 0; transform: translate(-50%, 70px); filter: blur(2px); clip-path: inset(100% 0 0 0); }
}

/* === WAVE mode: vertical oscillation + sine undulation === */
.viz-text-wisp.mode-wave {
    animation: vizTextWispIn 0.6s ease-out forwards, waveDissolve 2.5s ease-in-out 6s forwards;
}
@keyframes waveDissolve {
    0%   { opacity: 1; transform: translate(-50%, 0) scaleY(1); filter: blur(0); }
    15%  { opacity: 0.95; transform: translate(-50%, -8px) scaleY(1.06); filter: blur(0); }
    30%  { opacity: 0.85; transform: translate(-50%, 6px) scaleY(0.94); filter: blur(0.3px); }
    45%  { opacity: 0.7; transform: translate(-50%, -12px) scaleY(1.1); filter: blur(0.5px); }
    60%  { opacity: 0.5; transform: translate(-50%, 10px) scaleY(0.88); filter: blur(1px); }
    75%  { opacity: 0.3; transform: translate(-50%, -16px) scaleY(1.15); filter: blur(2px); }
    100% { opacity: 0; transform: translate(-50%, 20px) scaleY(0.6); filter: blur(5px); }
}

/* Fullscreen mode for visualizer container (browser fullscreen API) */
.alfred-avatar-container.viz-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10000 !important;
    border-radius: 0 !important;
    border: none !important;
    min-height: 100vh !important;
    width: 100vw !important;
    background: rgb(13, 15, 13) !important;
}
/* Also style when using native fullscreen API */
.alfred-avatar-container:fullscreen {
    background: rgb(13, 15, 13) !important;
    border-radius: 0 !important;
    border: none !important;
}
.alfred-avatar-container.viz-fullscreen .viz-fullscreen-btn,
.alfred-avatar-container:fullscreen .viz-fullscreen-btn {
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    font-size: var(--font-size-lg);
}
.alfred-avatar-container.viz-fullscreen .alfred-status-bar,
.alfred-avatar-container:fullscreen .alfred-status-bar {
    bottom: 80px;
}
.alfred-avatar-container.viz-fullscreen .alfred-status-text,
.alfred-avatar-container:fullscreen .alfred-status-text {
    font-size: var(--font-size-lg);
    letter-spacing: 5px;
}
.alfred-avatar-container.viz-fullscreen .viz-text-wisp,
.alfred-avatar-container:fullscreen .viz-text-wisp {
    font-size: 44px;
    letter-spacing: 4px;
    -webkit-text-stroke: 2px rgba(0, 0, 0, 0.5);
    text-shadow:
        0 0 10px rgba(32, 194, 14, 0.6),
        0 0 28px rgba(32, 194, 14, 0.3),
        0 1px 4px rgba(0, 0, 0, 0.8);
}
/* Bars + Wave keep green text even in fullscreen */
.alfred-avatar-container.viz-fullscreen .viz-text-wisp.mode-bars,
.alfred-avatar-container.viz-fullscreen .viz-text-wisp.mode-wave,
.alfred-avatar-container:fullscreen .viz-text-wisp.mode-bars,
.alfred-avatar-container:fullscreen .viz-text-wisp.mode-wave {
    font-size: 50px;
    letter-spacing: 5px;
    -webkit-text-stroke: 2.5px rgba(0, 0, 0, 0.5);
    text-shadow: 0 0 12px rgba(32, 194, 14, 0.8), 0 0 30px rgba(32, 194, 14, 0.4);
}
.alfred-avatar-container.viz-fullscreen .viz-mode-selector,
.alfred-avatar-container:fullscreen .viz-mode-selector {
    bottom: 30px;
}
.alfred-avatar-container.viz-fullscreen .viz-mode-btn,
.alfred-avatar-container:fullscreen .viz-mode-btn {
    padding: 8px 18px;
    font-size: var(--font-size-md);
    letter-spacing: 2px;
    border-radius: 4px;
}

/* Fullscreen auto-hide: UI fades after 5s of no mouse */
.alfred-avatar-container.viz-ui-hidden .viz-mode-selector,
.alfred-avatar-container.viz-ui-hidden .viz-fullscreen-btn,
.alfred-avatar-container.viz-ui-hidden .alfred-status-bar {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.8s ease;
}
.alfred-avatar-container .viz-mode-selector,
.alfred-avatar-container .viz-fullscreen-btn,
.alfred-avatar-container .alfred-status-bar {
    transition: opacity 0.3s ease;
}

/* CRT wobble */
@keyframes avatar-hSync {
    0%, 100% { transform: translateX(0); } 25% { transform: translateX(0.3px); }
    50% { transform: translateX(-0.2px); } 75% { transform: translateX(0.15px); }
}

/* SVG stroke classes */
.glow-stroke { stroke: var(--phosphor-green); stroke-opacity: 0.25; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.edge-stroke { stroke: var(--phosphor-bright); stroke-opacity: 0.9; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.dim-stroke { stroke: var(--phosphor-dim); stroke-opacity: 0.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fill-dim { fill: var(--phosphor-green); fill-opacity: 0.04; stroke: none; }

/* Blink animation */
.eyelid { opacity: 0; animation: avatar-blink 5s ease-in-out infinite; }
.eyelid-r { opacity: 0; animation: avatar-blink 5s ease-in-out 0.05s infinite; }
@keyframes avatar-blink { 0%, 90%, 100% { opacity: 0; } 93%, 97% { opacity: 1; } }

/* Mouth states hidden by default */
.mouth-tight { opacity: 0; transition: opacity 0.3s; }
.mouth-half, .mouth-open { opacity: 0; }

/* Idle pupil micro-drift */
.pupil-l, .pupil-r { animation: avatar-idleEyeDrift 6s ease-in-out infinite; }
.pupil-r { animation-delay: 0.2s; }
@keyframes avatar-idleEyeDrift {
    0%, 100% { transform: translate(0, 0); } 20% { transform: translate(0.5px, 0.3px); }
    40% { transform: translate(-0.3px, -0.2px); } 60% { transform: translate(0.2px, -0.4px); }
    80% { transform: translate(-0.4px, 0.1px); }
}

/* === TALKING STATE === */
.alfred-avatar-container.talking .mouth-closed { opacity: 0; }
.alfred-avatar-container.talking .mouth-group { animation: none; }
.alfred-avatar-container.talking .mouth-half { animation: avatar-talkHalf 0.18s ease-in-out infinite alternate; }
.alfred-avatar-container.talking .mouth-open { animation: avatar-talkOpen 0.18s ease-in-out 0.05s infinite alternate; }
.alfred-avatar-container.talking .chin-group { animation: avatar-chinMove 0.3s ease-in-out infinite alternate; }
.alfred-avatar-container.talking .alfred-svg {
    filter: drop-shadow(0 0 3px rgba(32, 194, 14,0.9)) drop-shadow(0 0 12px rgba(32, 194, 14,0.45));
}
@keyframes avatar-talkHalf { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: 0; } }
@keyframes avatar-talkOpen { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }
@keyframes avatar-chinMove { 0% { transform: translateY(0); } 100% { transform: translateY(1.5px); } }
.alfred-avatar-container.talking .hud-voice-bar { animation: avatar-voicePulse 0.15s ease-in-out infinite alternate; }
@keyframes avatar-voicePulse { 0% { fill-opacity: 0.15; } 100% { fill-opacity: 0.45; } }
.alfred-avatar-container.talking .alfred-status-text { color: var(--phosphor-bright); text-shadow: 0 0 10px rgba(32, 194, 14,0.7); }

/* === LISTENING STATE === */
.alfred-avatar-container.listening .eye-widen { animation: avatar-eyeWiden 0.6s ease-out forwards; }
.alfred-avatar-container.listening .brow-l,
.alfred-avatar-container.listening .brow-r { animation: avatar-browLift 0.4s ease-out forwards; }
.alfred-avatar-container.listening .frame-border { stroke: var(--phosphor-bright); stroke-opacity: 0.9; }
.alfred-avatar-container.listening .alfred-svg {
    filter: drop-shadow(0 0 4px rgba(51, 255, 51,0.95)) drop-shadow(0 0 18px rgba(32, 194, 14,0.5));
    animation: avatar-ambientPulse 4s ease-in-out infinite, avatar-listenTilt 0.8s ease-out forwards;
}
.alfred-avatar-container.listening .eyelid,
.alfred-avatar-container.listening .eyelid-r { animation: none; opacity: 0; }
.alfred-avatar-container.listening .hud-text { fill-opacity: 0.6; }
.alfred-avatar-container.listening .hud-bar-bright { fill-opacity: 0.5; }
.alfred-avatar-container.listening .alfred-status-text { color: var(--phosphor-green); text-shadow: 0 0 8px rgba(32, 194, 14,0.6); }
@keyframes avatar-eyeWiden { 0% { transform: scaleY(1); } 100% { transform: scaleY(1.18); } }
@keyframes avatar-browLift { 0% { transform: translateY(0); } 100% { transform: translateY(-1.5px); } }
@keyframes avatar-listenTilt { 0% { transform: rotate(0deg); } 100% { transform: rotate(1.5deg); } }

/* === THINKING STATE === */
.alfred-avatar-container.thinking .pupil-l { animation: avatar-pupilDrift 3s ease-in-out infinite !important; }
.alfred-avatar-container.thinking .pupil-r { animation: avatar-pupilDrift 3s ease-in-out 0.3s infinite !important; }
.alfred-avatar-container.thinking .brow-l { animation: avatar-browRaise 2.5s ease-in-out infinite; }
.alfred-avatar-container.thinking .mouth-closed { opacity: 0; }
.alfred-avatar-container.thinking .mouth-tight { opacity: 1; }
.alfred-avatar-container.thinking .alfred-status-text { color: var(--text-dim); }
@keyframes avatar-pupilDrift {
    0%, 100% { transform: translate(0, 0); } 30% { transform: translate(2px, -1px); } 60% { transform: translate(-1.5px, 0.5px); }
}
@keyframes avatar-browRaise {
    0%, 100% { transform: translateY(0); } 40% { transform: translateY(-2.5px); } 60% { transform: translateY(-2.5px); }
}

/* Status bar — positioned below mode selector */
.alfred-status-bar {
    position: absolute; bottom: 4px; left: 0; width: 100%; text-align: center; z-index: 13;
}
.alfred-status-text {
    font-size: var(--font-size-sm); letter-spacing: 2px; color: var(--text-dim);
    text-shadow: 0 0 4px rgba(32, 194, 14,0.3); font-family: var(--font-mono);
    transition: color 0.3s, text-shadow 0.3s;
}
.alfred-status-text::after { content: '_'; animation: avatar-cursorBlink 0.8s step-end infinite; }
@keyframes avatar-cursorBlink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

/* State-based status text styles */
.alfred-avatar-container.talking .alfred-status-text {
    color: var(--phosphor-bright);
    text-shadow: 0 0 10px rgba(32, 194, 14,0.7);
}
.alfred-avatar-container.listening .alfred-status-text {
    color: var(--phosphor-green);
    text-shadow: 0 0 8px rgba(32, 194, 14,0.6);
}
.alfred-avatar-container.thinking .alfred-status-text {
    color: var(--text-dim);
    animation: avatar-thinkPulse 1.5s ease-in-out infinite;
}
@keyframes avatar-thinkPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

/* HUD text elements inside SVG */
.hud-text { font-family: 'Courier New', monospace; font-size: 5.5px; fill: var(--phosphor-dim); fill-opacity: 0.45; letter-spacing: 0.5px; }
.hud-text-bright { font-family: 'Courier New', monospace; font-size: 5px; fill: var(--phosphor-green); fill-opacity: 0.35; letter-spacing: 0.3px; }
.hud-line { stroke: var(--phosphor-dim); stroke-opacity: 0.2; stroke-width: 0.4; fill: none; }
.hud-bar { fill: var(--phosphor-green); fill-opacity: 0.15; }
.hud-bar-bright { fill: var(--phosphor-green); fill-opacity: 0.3; }

/* ===================================================================
   SETTINGS TAB
   =================================================================== */
.settings-panel { padding: 2px 1ch; }
.settings-section { margin-bottom: 8px; padding: 2px 1ch; background: var(--bg-screen); border: 1px solid var(--border-glow); }
.settings-section-title { font-size: var(--font-size-lg); color: var(--phosphor-green); letter-spacing: 1px; margin-bottom: 2px; padding-bottom: 2px; border-bottom: 1px solid var(--border-glow); text-shadow: var(--bloom-dim); }
.info-grid { display: flex; flex-direction: column; gap: 0; }
.info-row { display: flex; justify-content: space-between; align-items: center; padding: 0 1ch; line-height: 1.5; }
.info-row:nth-child(even) { background: rgba(32, 194, 14,0.03); }
.info-label { font-size: var(--font-size-lg); color: var(--text-dim); }
.info-value { font-size: var(--font-size-lg); color: var(--phosphor-green); text-shadow: var(--bloom-dim); }

.voice-list { display: flex; flex-direction: column; gap: 0; }
.voice-item { display: flex; align-items: center; gap: 1ch; padding: 0 1ch; line-height: 1.5; }
.voice-item.dim { opacity: 0.3; }
.voice-jewel { display: inline-block; font-size: var(--font-size-lg); line-height: 1; }
.voice-jewel::before { content: '\25A0'; color: var(--led-green); text-shadow: 0 0 6px rgba(51,217,51,0.5); }
.voice-jewel.cyan::before { color: var(--phosphor-green); text-shadow: var(--bloom-dim); }
.voice-jewel.amber::before { color: var(--tungsten-warm); text-shadow: 0 0 6px rgba(255, 176, 0,0.5); }
.voice-jewel.dim::before { color: var(--muted-surface); text-shadow: none; }
.voice-name { font-size: var(--font-size-lg); color: var(--phosphor-green); font-weight: bold; min-width: 10ch; text-shadow: var(--bloom-dim); }
.voice-endpoint { font-size: var(--font-size-lg); color: var(--text-dim); }

.device-list { display: flex; flex-direction: column; gap: 0; }
.device-item { display: flex; align-items: center; gap: 1ch; padding: 0 1ch; line-height: 1.5; }
.device-icon { font-size: var(--font-size-lg); }
.device-info { flex: 1; }
.device-name { font-size: var(--font-size-lg); color: var(--phosphor-green); }
.device-meta { font-size: var(--font-size-md); color: var(--muted-label); }

.activity-log { max-height: 200px; overflow-y: auto; font-size: var(--font-size-lg); scrollbar-width: thin; scrollbar-color: var(--phosphor-dim) var(--bg-screen); }
.activity-log-entry { padding: 0 1ch; border-bottom: 1px solid var(--dim-surface); display: flex; gap: 1ch; align-items: center; line-height: 1.5; }
.activity-log-slot { font-size: var(--font-size-lg); color: var(--text-dim); min-width: 8ch; }
.activity-log-state { font-size: var(--font-size-lg); padding: 0 1ch; min-width: 8ch; text-align: center; }
.activity-log-state.active { color: var(--led-green); text-shadow: 0 0 4px rgba(51,217,51,0.4); }
.activity-log-state.thinking { color: var(--led-yellow); text-shadow: 0 0 4px rgba(242,217,26,0.4); }
.activity-log-state.idle { color: var(--muted-label); }
.activity-log-bar { flex: 1; height: 1em; background: var(--bg-input); overflow: hidden; border: 1px solid var(--dim-surface); }
.activity-log-fill { height: 100%; background: var(--phosphor-green); box-shadow: 0 0 6px rgba(32, 194, 14,0.4); }
.no-data { color: var(--muted-label); font-size: var(--font-size-lg); text-align: center; padding: 2ch; }

/* ===================================================================
   CONTEXT LINE & F-KEY BAR
   =================================================================== */
.context-line { display: flex; align-items: center; justify-content: space-between; padding: 0 1ch; background: var(--bg-screen); color: var(--text-dim); font-size: var(--font-size-lg); line-height: 1.5; flex-shrink: 0; min-height: 1.5em; text-shadow: var(--bloom-dim); }

.fkey-bar { display: flex; align-items: center; padding: 0; background: var(--dark-surface); flex-shrink: 0; min-height: 44px; line-height: 1.5; border-top: 1px solid var(--border-glow); }
.fkey-item { display: inline-flex; align-items: center; padding: 0 1ch; cursor: pointer; min-height: 44px; user-select: none; }
.fkey-item:hover { background: var(--phosphor-green); }
.fkey-item:hover .fkey-num, .fkey-item:hover .fkey-label { color: var(--bg-screen); text-shadow: none; }
.fkey-item:active { background: var(--phosphor-bright); }
.fkey-item + .fkey-item { border-left: 1px solid var(--dim-surface); }
.fkey-num { color: var(--phosphor-green); margin-right: 0.5ch; text-shadow: var(--bloom-dim); }
.fkey-label { color: var(--text-dim); }

.voice-strip { display: flex; align-items: center; gap: 2ch; padding: 0 1ch; min-height: 1.5em; overflow: hidden; background: var(--dark-surface); border-top: 1px solid var(--border-glow); position: relative; }
.voice-strip::before, .voice-strip::after { display: none; }
.voice-strip-item { display: flex; align-items: center; gap: 1ch; font-size: var(--font-size-lg); color: var(--text-dim); z-index: 1; }
.footer-btn { background: none; border: none; color: var(--phosphor-green); padding: 0 1ch; cursor: pointer; font-family: var(--font-terminal); font-size: var(--font-size-lg); text-shadow: var(--bloom-dim); z-index: 1; min-height: 44px; }
.footer-btn::before { content: '[ '; color: var(--text-dim); }
.footer-btn::after { content: ' ]'; color: var(--text-dim); }
.footer-btn:hover { background: var(--phosphor-green); color: var(--bg-screen); text-shadow: none; }

/* ===================================================================
   DETAIL VIEW
   =================================================================== */
.detail-view { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--bg-screen); z-index: 1000; display: none; flex-direction: column; }
.detail-view.active { display: flex; }
.detail-header { display: flex; align-items: center; justify-content: space-between; padding: 0 1ch; background: var(--dark-surface); color: var(--phosphor-green); border-bottom: 1px solid var(--border-glow); min-height: 1.5em; line-height: 1.5; }
.back-btn { display: flex; align-items: center; gap: 1ch; padding: 0 1ch; background: none; border: none; color: var(--phosphor-green); cursor: pointer; font-family: var(--font-terminal); font-size: var(--font-size-lg); font-weight: bold; text-shadow: var(--bloom-dim); min-height: 44px; }
.back-btn:hover { background: var(--phosphor-green); color: var(--bg-screen); text-shadow: none; }
.back-arrow { font-size: var(--font-size-lg); }
.detail-agent-info { display: flex; align-items: center; gap: 1ch; }
.detail-agent-info .agent-jewel { width: auto; height: auto; }
.detail-agent-name { font-size: var(--font-size-lg); font-weight: bold; color: var(--phosphor-green); text-shadow: var(--bloom-dim); }
.detail-hint { font-size: var(--font-size-lg); color: var(--text-dim); padding: 0 1ch; }
.detail-terminal { flex: 1; position: relative; background: var(--bg-screen); overflow: hidden; }
.detail-terminal::before { display: none; }
body.detail-mode .console-container { display: none; }

/* ===================================================================
   TERMINAL OUTPUT
   =================================================================== */
.terminal-output { font-family: var(--font-terminal); font-size: var(--font-size-lg); line-height: 1.25; color: var(--phosphor-green); background: var(--bg-input); padding: 2px 1ch; margin: 0; overflow-y: auto; overflow-x: hidden; height: 100%; white-space: pre-wrap; word-break: break-all; scrollbar-width: thin; scrollbar-color: var(--phosphor-dim) var(--bg-input); text-shadow: var(--bloom-dim); }
.terminal-output::-webkit-scrollbar { width: 12px; }
.terminal-output::-webkit-scrollbar-track { background: var(--bg-input); }
.terminal-output::-webkit-scrollbar-thumb { background: var(--dim-surface); }
.terminal-output::after { display: none; }

.terminal-cursor { display: inline-block; width: 1ch; height: 1em; background: var(--phosphor-green); animation: terminal-blink 1s step-end infinite; vertical-align: text-bottom; box-shadow: 0 0 6px rgba(32, 194, 14,0.5); }
@keyframes terminal-blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
.terminal-line { display: block; padding: 0; }
.terminal-line:hover { background: rgba(32, 194, 14,0.05); }

/* 1970s CRT Phosphor Line Classes
   P1 green (normal), P1 bright (high beam), P3 amber (warm),
   P4 white (highlight), P22 blue-cyan (cool), dim (low beam) */
.tl-normal { color: var(--phosphor-green); }
.tl-prompt {
    color: var(--phosphor-bright);
    text-shadow: var(--bloom-full);
}
.tl-tool {
    color: var(--phosphor-amber);
    text-shadow: var(--bloom-amber);
}
.tl-thinking {
    color: var(--text-dim);
    text-shadow: 0 0 8px rgba(32, 194, 14, 0.2);
    animation: phosphor-breathe 2s ease-in-out infinite;
}
@keyframes phosphor-breathe {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.9; }
}
.tl-result {
    color: var(--phosphor-green);
    text-shadow: var(--bloom-dim);
}
.tl-separator {
    color: var(--text-dim);
    opacity: 0.4;
}
.tl-error {
    color: var(--phosphor-amber);
    text-shadow: var(--bloom-amber-full);
}
.tl-success {
    color: var(--phosphor-bright);
    text-shadow: var(--bloom-full);
}
.tl-path {
    color: var(--phosphor-cyan);
    text-shadow: var(--bloom-cyan);
}
.tl-meta {
    color: var(--phosphor-cyan-dim);
    text-shadow: 0 0 6px rgba(51, 204, 255, 0.2);
}
.terminal-fullscreen { font-size: var(--font-size-lg); line-height: 1.25; padding: 2px 1ch; }
.terminal-refresh-btn { position: absolute; top: 0; right: 0; padding: 0 1ch; background: var(--dark-surface); border: 1px solid var(--border-glow); color: var(--phosphor-green); cursor: pointer; font-family: var(--font-terminal); font-size: var(--font-size-md); z-index: 5; opacity: 0; text-shadow: var(--bloom-dim); }
.terminal-frame:hover .terminal-refresh-btn { opacity: 1; }
.terminal-refresh-btn:hover { background: var(--phosphor-green); color: var(--bg-screen); text-shadow: none; }

/* ===================================================================
   MODAL SYSTEM
   =================================================================== */
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.85); z-index: 2000; display: none; align-items: center; justify-content: center; }
.modal-overlay.active { display: flex; }
.modal { width: 90%; max-width: 60ch; max-height: 80vh; background: var(--dark-surface); border: 1px solid var(--phosphor-green); display: flex; flex-direction: column; box-shadow: 0 0 30px rgba(32, 194, 14,0.2), 0 0 60px rgba(32, 194, 14,0.1), 0 0 2px rgba(32, 194, 14,0.8); color: var(--phosphor-green); position: relative; }
.modal.modal-wide { max-width: 72ch; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 0 1ch; background: rgba(32, 194, 14,0.1); color: var(--phosphor-green); border-bottom: 1px solid var(--border-glow); line-height: 1.5; }
.modal-title { font-size: var(--font-size-lg); color: var(--phosphor-green); letter-spacing: 1px; font-weight: bold; text-shadow: var(--bloom-dim); }
.modal-close { background: none; border: none; color: var(--text-dim); cursor: pointer; font-family: var(--font-terminal); font-size: var(--font-size-lg); padding: 0 1ch; min-height: 44px; min-width: 44px; }
.modal-close:hover { color: var(--led-red); text-shadow: var(--bloom-red); }
.modal-body { padding: 4px 1ch; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--phosphor-dim) var(--dark-surface); color: var(--phosphor-green); }
.modal-section { margin-bottom: 8px; }
.modal-section:last-child { margin-bottom: 0; }
.modal-section-title { font-size: var(--font-size-lg); color: var(--phosphor-green); letter-spacing: 1px; margin-bottom: 4px; padding-bottom: 2px; border-bottom: 1px solid var(--border-glow); font-weight: bold; text-shadow: var(--bloom-dim); }
.modal-label { display: block; font-size: var(--font-size-lg); color: var(--text-dim); margin-bottom: 2px; }
.modal-textarea { width: 100%; padding: 2px 1ch; background: var(--bg-input); border: 1px solid var(--border-glow); color: var(--phosphor-green); font-family: var(--font-terminal); font-size: var(--font-size-lg); resize: vertical; text-shadow: var(--bloom-dim); }
.modal-textarea:focus { outline: none; border-color: var(--phosphor-green); box-shadow: 0 0 8px rgba(32, 194, 14,0.3); }
.modal-actions { display: flex; gap: 1ch; margin-top: 8px; padding-top: 4px; border-top: 1px solid var(--dim-surface); justify-content: center; }

.dos-dialog { background: var(--dark-surface); border: 1px solid var(--phosphor-green); color: var(--phosphor-green); position: relative; box-shadow: 0 0 20px rgba(32, 194, 14,0.15); }
.dos-dialog-title { background: rgba(32, 194, 14,0.1); color: var(--phosphor-green); padding: 0 1ch; text-align: center; font-weight: bold; line-height: 1.5; text-shadow: var(--bloom-dim); }
.dos-dialog-shadow { position: absolute; top: 2px; left: 2px; right: -2px; bottom: -2px; background: rgba(0,0,0,0.5); z-index: -1; }

/* ===================================================================
   BUTTONS
   =================================================================== */
.btn-primary { padding: 0 1ch; background: rgba(32, 194, 14,0.15); border: 1px solid var(--phosphor-green); color: var(--phosphor-green); cursor: pointer; font-family: var(--font-terminal); font-size: var(--font-size-lg); font-weight: bold; text-shadow: var(--bloom-dim); }
.btn-primary::before { content: '[ '; }
.btn-primary::after { content: ' ]'; }
.btn-primary:hover { background: var(--phosphor-green); color: var(--bg-screen); text-shadow: none; box-shadow: 0 0 12px rgba(32, 194, 14,0.4); }
.btn-secondary { padding: 0 1ch; background: var(--dark-surface); border: 1px solid var(--dim-surface); color: var(--text-dim); cursor: pointer; font-family: var(--font-terminal); font-size: var(--font-size-lg); }
.btn-secondary::before { content: '[ '; }
.btn-secondary::after { content: ' ]'; }
.btn-secondary:hover { background: var(--phosphor-dim); color: var(--bg-screen); text-shadow: none; }
.btn-danger { padding: 0 1ch; background: var(--dark-surface); border: 1px solid var(--led-red); color: var(--led-red); cursor: pointer; font-family: var(--font-terminal); font-size: var(--font-size-lg); text-shadow: 0 0 4px rgba(242,38,26,0.4); }
.btn-danger::before { content: '[ '; }
.btn-danger::after { content: ' ]'; }
.btn-danger:hover { background: var(--led-red); color: var(--bg-screen); text-shadow: none; }
.btn-primary:disabled { opacity: 0.3; cursor: not-allowed; }
.btn-primary:disabled:hover { background: rgba(32, 194, 14,0.15); color: var(--phosphor-green); }

.worker-task-full { font-size: var(--font-size-lg); color: var(--phosphor-green); line-height: 1.25; padding: 2px 1ch; background: var(--bg-input); white-space: pre-wrap; word-break: break-word; max-height: 200px; overflow-y: auto; border: 1px solid var(--border-glow); text-shadow: var(--bloom-dim); }

/* ===================================================================
   KEYBOARD NAVIGATION
   =================================================================== */
.nav-focusable { outline: none; }
.nav-focusable:focus { outline: none; }
.nav-focusable.nav-focused, .nav-focusable:focus-visible { outline: none; background: rgba(32, 194, 14,0.15); box-shadow: 0 0 8px rgba(32, 194, 14,0.3); z-index: 10; }
.agent-card.nav-focused { border-color: var(--phosphor-green); box-shadow: 0 0 15px rgba(32, 194, 14,0.3); }
button.nav-focused, button:focus-visible { background: rgba(32, 194, 14,0.2) !important; color: var(--phosphor-bright) !important; border-color: var(--phosphor-green) !important; box-shadow: 0 0 8px rgba(32, 194, 14,0.4); }
.nav-section-indicator { position: fixed; top: 3em; right: 1ch; background: var(--dark-surface); border: 1px solid var(--phosphor-green); padding: 0 1ch; font-size: var(--font-size-lg); color: var(--phosphor-green); text-transform: uppercase; letter-spacing: 1px; z-index: 100; opacity: 0; box-shadow: 0 0 12px rgba(32, 194, 14,0.3); text-shadow: var(--bloom-dim); }
.nav-section-indicator.visible { opacity: 1; }
.nav-hint { position: fixed; bottom: 3em; right: 1ch; background: var(--dark-surface); border: 1px solid var(--border-glow); padding: 0 1ch; font-size: var(--font-size-lg); color: var(--phosphor-green); z-index: 100; opacity: 0; box-shadow: 0 0 8px rgba(32, 194, 14,0.2); }
.nav-hint.visible { opacity: 1; }
.nav-hint kbd { display: inline-block; padding: 0; margin: 0 0.5ch; background: rgba(32, 194, 14,0.2); border: 1px solid var(--border-glow); font-family: var(--font-terminal); color: var(--phosphor-green); font-size: var(--font-size-lg); }
.nav-click-feedback { display: none; }

/* ===================================================================
   WAVE 2 DIALOGS
   =================================================================== */
.modal.modal-dos { border: 1px solid var(--phosphor-green); box-shadow: 0 0 30px rgba(32, 194, 14,0.2), 0 0 60px rgba(32, 194, 14,0.1); }
.radio-group { display: flex; flex-wrap: wrap; gap: 1ch 2ch; padding: 2px 0; }
.radio-group label, .checkbox-group label { display: inline-flex; align-items: center; gap: 0.5ch; color: var(--phosphor-green); font-family: var(--font-terminal); font-size: var(--font-size-lg); cursor: pointer; }
.radio-group input[type="radio"], .checkbox-group input[type="checkbox"] { accent-color: var(--phosphor-green); cursor: pointer; }
.checkbox-group { display: flex; flex-wrap: wrap; gap: 1ch 2ch; padding: 2px 0; }
.modal-input { width: 100%; padding: 0 1ch; background: var(--bg-input); border: 1px solid var(--border-glow); color: var(--phosphor-green); font-family: var(--font-terminal); font-size: var(--font-size-lg); line-height: 1.5; caret-color: var(--phosphor-green); text-shadow: var(--bloom-dim); }
.modal-input:focus { outline: none; border-color: var(--phosphor-green); box-shadow: 0 0 8px rgba(32, 194, 14,0.3); }
.modal-input::placeholder { color: var(--muted-label); text-shadow: none; }
.modal-select { padding: 0 1ch; background: var(--bg-input); border: 1px solid var(--border-glow); color: var(--phosphor-green); font-family: var(--font-terminal); font-size: var(--font-size-lg); line-height: 1.5; cursor: pointer; }
.modal-select:focus { outline: none; border-color: var(--phosphor-green); box-shadow: 0 0 8px rgba(32, 194, 14,0.3); }
.route-decision-panel { border: 1px solid var(--border-glow); padding: 4px 1ch; background: rgba(32, 194, 14, 0.05); }
.route-decision-panel.hidden { display: none; }
.route-inline-checkbox { display: flex; align-items: center; gap: 0.7ch; cursor: pointer; }
.route-inline-checkbox input[type="checkbox"] { accent-color: var(--phosphor-green); cursor: pointer; }
.route-decision-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 1ch; }
.route-decision-hint { color: var(--text-dim); font-size: var(--font-size-md); line-height: 1.25; margin-top: 4px; }
@media (max-width: 920px) {
    .route-decision-grid { grid-template-columns: 1fr; }
}

.fabric-results-list { scrollbar-width: thin; scrollbar-color: var(--phosphor-dim) var(--dark-surface); }
.fabric-result-item { padding: 4px 1ch; border-bottom: 1px solid var(--dim-surface); }
.fabric-result-item:last-child { border-bottom: none; }
.fabric-result-header { display: flex; align-items: center; gap: 1ch; line-height: 1.5; }
.fabric-result-num { color: var(--phosphor-green); font-weight: bold; min-width: 2ch; text-shadow: var(--bloom-dim); }
.fabric-result-score { color: var(--led-green); font-size: var(--font-size-lg); text-shadow: 0 0 4px rgba(51,217,51,0.4); }
.fabric-result-source { color: var(--muted-label); font-size: var(--font-size-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fabric-result-snippet { color: var(--text-dim); font-size: var(--font-size-lg); line-height: 1.25; padding: 2px 0 2px 3ch; white-space: pre-wrap; word-break: break-word; max-height: 4em; overflow: hidden; }

/* ===================================================================
   MDI WINDOW SYSTEM
   =================================================================== */
#mdi-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 150; }
.mdi-window { position: absolute; pointer-events: all; border: 1px solid var(--phosphor-green); background: var(--bg-screen); min-width: 40ch; min-height: 15em; display: flex; flex-direction: column; box-shadow: 0 0 20px rgba(32, 194, 14,0.2), 0 4px 16px rgba(0,0,0,0.8); }
.mdi-titlebar { display: flex; justify-content: space-between; align-items: center; background: var(--dark-surface); color: var(--text-dim); padding: 0 1ch; cursor: move; user-select: none; line-height: 1.5; font-size: var(--font-size-lg); flex-shrink: 0; border-bottom: 1px solid var(--border-glow); }
.mdi-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.mdi-controls { display: flex; gap: 0; flex-shrink: 0; }
.mdi-btn { cursor: pointer; padding: 0 0.5ch; font-family: var(--font-terminal); font-size: var(--font-size-lg); color: var(--text-dim); }
.mdi-btn:hover { background: var(--phosphor-green); color: var(--bg-screen); }
.mdi-content { flex: 1; overflow: hidden; position: relative; background: var(--bg-input); }
.mdi-content .xterm { width: 100% !important; height: 100% !important; }
.mdi-content .xterm-viewport { overflow-y: auto !important; }
.mdi-content .xterm-screen { height: 100% !important; }
.mdi-resize-handle { position: absolute; bottom: 0; right: 0; width: 16px; height: 16px; cursor: se-resize; z-index: 5; }
.mdi-resize-handle::after { content: '\2592'; position: absolute; bottom: 0; right: 2px; color: var(--text-dim); font-size: var(--font-size-md); line-height: 1; }
.mdi-window.focused .mdi-titlebar { background: rgba(32, 194, 14,0.1); color: var(--phosphor-green); text-shadow: var(--bloom-dim); }
.mdi-window:not(.focused) .mdi-titlebar { background: var(--dark-surface); color: var(--muted-label); }
.mdi-window.minimized { display: none; }
.mdi-window.maximized { top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; }
.mdi-window-list { display: inline-flex; gap: 1ch; margin-left: 1ch; }
.mdi-window-list-item { cursor: pointer; padding: 0 0.5ch; color: var(--text-dim); font-size: var(--font-size-lg); }
.mdi-window-list-item:hover { background: rgba(32, 194, 14,0.15); color: var(--phosphor-green); }
.mdi-window-list-item.active { color: var(--phosphor-green); text-shadow: var(--bloom-dim); }

/* ===================================================================
   BOOT SPLASH SEQUENCE
   =================================================================== */
.boot-splash { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--bg-screen); z-index: 9999; display: flex; align-items: center; justify-content: center; font-family: var(--font-terminal); font-size: var(--font-size-lg); }
.boot-splash.hidden { display: none; }
.boot-frame { border: 1px solid var(--phosphor-green); padding: 16px 32px; max-width: 60ch; width: 100%; box-shadow: 0 0 40px rgba(32, 194, 14,0.15), 0 0 80px rgba(32, 194, 14,0.05); }
.boot-title { text-align: center; color: var(--phosphor-green); font-size: var(--font-size-lg); font-weight: bold; letter-spacing: 2px; text-shadow: var(--bloom-full); }
.boot-subtitle { text-align: center; color: var(--text-dim); margin-bottom: 16px; text-shadow: var(--bloom-dim); }
.boot-status { color: var(--tungsten-warm); margin-bottom: 8px; text-shadow: var(--bloom-tungsten); }
.boot-check-item { display: flex; color: var(--phosphor-green); line-height: 1.6; }
.boot-check-item .boot-check-jewel { flex-shrink: 0; width: 2ch; }
.boot-check-item .boot-check-name { color: var(--phosphor-green); flex-shrink: 0; text-shadow: var(--bloom-dim); }
.boot-check-item .boot-check-dots { flex: 1; color: var(--dim-surface); overflow: hidden; margin: 0 0.5ch; white-space: nowrap; }
.boot-check-item .boot-check-detail { color: var(--text-dim); flex-shrink: 0; text-align: right; }
.boot-check-item.ok .boot-check-jewel { color: var(--led-green); text-shadow: 0 0 6px rgba(51,217,51,0.5); }
.boot-check-item.ok .boot-check-detail { color: var(--led-green); text-shadow: 0 0 4px rgba(51,217,51,0.4); }
.boot-check-item.degraded .boot-check-jewel { color: var(--led-yellow); text-shadow: 0 0 6px rgba(242,217,26,0.5); }
.boot-check-item.degraded .boot-check-detail { color: var(--led-yellow); }
.boot-check-item.fail .boot-check-jewel { color: var(--led-red); text-shadow: var(--bloom-red); }
.boot-check-item.fail .boot-check-detail { color: var(--led-red); }
.boot-check-item.checking .boot-check-jewel { color: var(--muted-surface); }
.boot-check-item.checking .boot-check-detail { color: var(--muted-surface); }
.boot-prompt { text-align: center; color: var(--tungsten-warm); margin-top: 16px; cursor: pointer; user-select: none; text-shadow: var(--bloom-tungsten); animation: phosphor-pulse 2s ease-in-out infinite; }
.boot-prompt:hover { color: var(--phosphor-bright); text-shadow: var(--bloom-full); }
.boot-spacer { height: 8px; }

/* ===================================================================
   FABRIC GRAPH
   =================================================================== */
.fabric-graph-svg { width: 100%; height: 100%; background: var(--bg-screen); }
.fabric-graph-svg text { font-family: var(--font-terminal); font-size: var(--font-size-base); fill: var(--phosphor-green); }
.fabric-node-preview { position: fixed; background: var(--dark-surface); border: 1px solid var(--border-glow); color: var(--phosphor-green); padding: 4px 1ch; font-family: var(--font-terminal); font-size: var(--font-size-md); max-width: 40ch; z-index: 300; pointer-events: none; line-height: 1.4; white-space: pre-wrap; word-break: break-word; box-shadow: 0 0 12px rgba(32, 194, 14,0.2); text-shadow: var(--bloom-dim); }

/* ===================================================================
   TERMINAL MODAL (xterm.js)
   =================================================================== */
.terminal-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.85); z-index: 2000; display: none; align-items: center; justify-content: center; }
.terminal-modal-overlay.active { display: flex; }
.terminal-modal { width: 95%; height: 80%; display: flex; flex-direction: column; border: 1px solid var(--phosphor-green); background: var(--bg-screen); box-shadow: 0 0 40px rgba(32, 194, 14,0.2); }
.terminal-modal-header { display: flex; align-items: center; justify-content: space-between; background: rgba(32, 194, 14,0.1); color: var(--phosphor-green); padding: 0 1ch; min-height: 1.5em; line-height: 1.5; font-size: var(--font-size-lg); flex-shrink: 0; border-bottom: 1px solid var(--border-glow); }
.terminal-modal-title { font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; text-shadow: var(--bloom-dim); }
.terminal-modal-hint { font-size: var(--font-size-lg); color: var(--text-dim); padding: 0 2ch; }
.terminal-modal-close { background: none; border: none; color: var(--text-dim); cursor: pointer; font-family: var(--font-terminal); font-size: var(--font-size-lg); font-weight: bold; padding: 0 1ch; flex-shrink: 0; }
.terminal-modal-close:hover { color: var(--led-red); text-shadow: var(--bloom-red); }
.terminal-modal-body { flex: 1; overflow: hidden; position: relative; background: var(--bg-screen); width: 100%; min-width: 0; }
.terminal-modal-body .xterm { width: 100% !important; height: 100% !important; }
.terminal-modal-body .xterm-viewport { overflow-y: auto !important; width: 100% !important; }
.terminal-modal-body .xterm-screen { height: 100% !important; }
.terminal-modal-body .xterm-helpers { width: 100% !important; }

/* ===================================================================
   TMUX INDICATORS
   =================================================================== */
.tmux-indicator { font-size: var(--font-size-sm); color: var(--muted-surface); margin-left: 0.5ch; vertical-align: middle; }
.tmux-indicator.active { color: var(--led-green); text-shadow: 0 0 4px rgba(51,217,51,0.5); }

/* ===================================================================
   SELECTION COLORS
   =================================================================== */
::selection { background: rgba(32, 194, 14,0.3); color: var(--phosphor-bright); }
::-moz-selection { background: rgba(32, 194, 14,0.3); color: var(--phosphor-bright); }

/* ===================================================================
   SETTINGS SUB-TABS
   =================================================================== */
.settings-subtab-bar {
    display: flex;
    align-items: center;
    padding: 0;
    background: var(--bg-screen);
    border-bottom: 1px solid var(--border-glow);
    flex-shrink: 0;
}

.settings-subtab {
    padding: 0 2ch;
    color: var(--text-dim);
    cursor: pointer;
    font-family: var(--font-terminal);
    font-size: var(--font-size-lg);
    line-height: 1.5;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    text-shadow: var(--bloom-dim);
    transition: all 0.15s;
}

.settings-subtab:hover:not(.active) {
    color: var(--phosphor-bright);
    text-shadow: var(--bloom-full);
}

.settings-subtab.active {
    color: var(--bg-screen);
    background: var(--phosphor-green);
    text-shadow: none;
}

.settings-subpanel {
    display: none;
    overflow-y: auto;
    flex: 1;
}

.settings-subpanel.active {
    display: block;
}

/* ===================================================================
   CONFIG EDITORS (IDENTITY.md, SOUL.md)
   =================================================================== */
.cfg-editor-wrap {
    position: relative;
}

.cfg-editor {
    width: 100%;
    min-height: 200px;
    padding: 4px 1ch;
    background: var(--bg-input);
    border: 1px solid var(--border-glow);
    color: var(--phosphor-green);
    font-family: var(--font-terminal);
    font-size: var(--font-size-lg);
    line-height: 1.4;
    resize: vertical;
    white-space: pre-wrap;
    word-break: break-word;
    text-shadow: var(--bloom-dim);
    caret-color: var(--phosphor-bright);
    scrollbar-width: thin;
    scrollbar-color: var(--phosphor-dim) var(--bg-input);
}

.cfg-editor:focus {
    outline: none;
    border-color: var(--phosphor-green);
    box-shadow: 0 0 8px rgba(32, 194, 14,0.3);
}

.cfg-editor::placeholder {
    color: var(--muted-label);
    text-shadow: none;
}

.cfg-editor-tall {
    min-height: 400px;
}

.cfg-editor-actions {
    display: flex;
    align-items: center;
    gap: 1ch;
    margin-top: 4px;
    padding-top: 4px;
}

.cfg-save-status {
    font-size: var(--font-size-lg);
    color: var(--phosphor-green);
    text-shadow: var(--bloom-dim);
    margin-left: 1ch;
}

.cfg-save-status.error {
    color: var(--led-red);
    text-shadow: var(--bloom-red);
}

/* ===================================================================
   CONFIG INPUTS & UPLOAD FORM
   =================================================================== */
.cfg-input {
    padding: 0 1ch;
    background: var(--bg-input);
    border: 1px solid var(--border-glow);
    color: var(--phosphor-green);
    font-family: var(--font-terminal);
    font-size: var(--font-size-lg);
    line-height: 1.5;
    caret-color: var(--phosphor-bright);
    text-shadow: var(--bloom-dim);
}

.cfg-input:focus {
    outline: none;
    border-color: var(--phosphor-green);
    box-shadow: 0 0 8px rgba(32, 194, 14,0.3);
}

.cfg-input::placeholder {
    color: var(--muted-label);
    text-shadow: none;
}

.cfg-input[type="file"] {
    padding: 2px 1ch;
    cursor: pointer;
}

.cfg-input[type="file"]::file-selector-button {
    background: var(--dark-surface);
    border: 1px solid var(--border-glow);
    color: var(--phosphor-green);
    font-family: var(--font-terminal);
    font-size: var(--font-size-lg);
    cursor: pointer;
    padding: 0 1ch;
    margin-right: 1ch;
    text-shadow: var(--bloom-dim);
}

.cfg-input[type="file"]::file-selector-button:hover {
    background: var(--phosphor-green);
    color: var(--bg-screen);
    text-shadow: none;
}

.cfg-upload-form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ===================================================================
   NODE LIST (Settings Nodes Sub-Tab)
   =================================================================== */
.node-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.node-list .node-item {
    display: flex;
    align-items: center;
    gap: 2ch;
    padding: 0 1ch;
    line-height: 1.5;
    cursor: pointer;
    min-height: 44px;
    border: none;
    border-bottom: 1px solid var(--dim-surface);
}

.node-list .node-item:hover {
    background: rgba(32, 194, 14,0.08);
    box-shadow: none;
}

.node-id {
    font-size: var(--font-size-lg);
    color: var(--phosphor-green);
    font-weight: bold;
    min-width: 12ch;
    text-shadow: var(--bloom-dim);
}

.node-host {
    font-size: var(--font-size-lg);
    color: var(--text-dim);
    min-width: 16ch;
}

.node-actions {
    margin-left: auto;
}

.node-delete {
    color: var(--led-red);
    cursor: pointer;
    font-family: var(--font-terminal);
    font-size: var(--font-size-lg);
    text-shadow: 0 0 4px rgba(242,38,26,0.4);
}

.node-delete:hover {
    color: var(--bg-screen);
    background: var(--led-red);
    text-shadow: none;
}

/* ===================================================================
   VOICE ITEM DYNAMIC (Voice config list with test button)
   =================================================================== */
.voice-item-dynamic {
    display: flex;
    align-items: center;
    gap: 1ch;
    padding: 0 1ch;
    line-height: 1.5;
    min-height: 44px;
}

.voice-item-dynamic:hover {
    background: rgba(32, 194, 14,0.05);
}

.voice-play-btn {
    color: var(--text-dim);
    cursor: pointer;
    font-family: var(--font-terminal);
    font-size: var(--font-size-lg);
    padding: 0 0.5ch;
    margin-left: auto;
    text-shadow: var(--bloom-dim);
}

.voice-play-btn:hover {
    background: var(--phosphor-green);
    color: var(--bg-screen);
    text-shadow: none;
}

/* ===================================================================
   ONBOARDING WIZARD OVERLAY
   =================================================================== */
.onboarding-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.onboarding-box {
    width: 90%;
    max-width: 56ch;
    background: var(--dark-surface);
    border: 1px solid var(--phosphor-green);
    padding: 16px 2ch;
    box-shadow:
        0 0 40px rgba(32, 194, 14,0.2),
        0 0 80px rgba(32, 194, 14,0.08),
        0 0 2px rgba(32, 194, 14,0.8);
}

.onboarding-title {
    text-align: center;
    font-size: var(--font-size-lg);
    font-weight: bold;
    color: var(--phosphor-green);
    letter-spacing: 2px;
    text-shadow: var(--bloom-full);
    margin-bottom: 4px;
}

.onboarding-subtitle {
    text-align: center;
    font-size: var(--font-size-lg);
    color: var(--text-dim);
    text-shadow: var(--bloom-dim);
    margin-bottom: 16px;
}

.onboarding-step {
    display: none;
    margin-bottom: 16px;
}

.onboarding-step.active {
    display: block;
}

.onboarding-step-title {
    font-size: var(--font-size-lg);
    font-weight: bold;
    color: var(--phosphor-green);
    letter-spacing: 1px;
    text-shadow: var(--bloom-dim);
    margin-bottom: 4px;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--border-glow);
}

.onboarding-step-desc {
    font-size: var(--font-size-lg);
    color: var(--text-dim);
    margin-bottom: 8px;
    line-height: 1.4;
}

.onboarding-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1ch;
    padding-top: 8px;
    border-top: 1px solid var(--border-glow);
}

.onboarding-progress {
    font-size: var(--font-size-lg);
    color: var(--text-dim);
    text-shadow: var(--bloom-dim);
}

.ob-input {
    width: 100%;
    margin-top: 4px;
}

.ob-editor {
    width: 100%;
    min-height: 160px;
    margin-top: 4px;
}

/* ===================================================================
   ONBOARDING VOICE PICKER
   =================================================================== */
.ob-voice-option {
    display: flex;
    align-items: center;
    gap: 1ch;
    padding: 2px 1ch;
    cursor: pointer;
    line-height: 1.5;
    min-height: 44px;
    color: var(--text-dim);
    transition: all 0.15s;
}

.ob-voice-option:hover {
    background: rgba(32, 194, 14,0.1);
    color: var(--phosphor-green);
}

.ob-voice-option.selected {
    color: var(--phosphor-green);
    background: rgba(32, 194, 14,0.08);
    text-shadow: var(--bloom-dim);
}

.ob-voice-radio {
    font-family: var(--font-terminal);
    font-size: var(--font-size-lg);
    color: var(--text-dim);
    min-width: 3ch;
}

.ob-voice-option.selected .ob-voice-radio {
    color: var(--phosphor-green);
    text-shadow: var(--bloom-full);
}

/* Onboarding Slot Cards (Step 4) */
.ob-slots-grid { display: flex; gap: 1ch; flex-wrap: wrap; margin-top: 8px; }
.ob-slot-card { flex: 1; min-width: 14ch; background: var(--bg-screen); border: 1px solid var(--border-glow); padding: 6px 1ch; }
.ob-slot-label { font-size: var(--font-size-md); color: var(--phosphor-bright); letter-spacing: 1px; margin-bottom: 4px; text-shadow: var(--bloom-dim); }
.ob-slot-card select { width: 100%; }

/* Hub Slot Cards (Agents sub-tab) */
.hub-slot-grid { display: flex; gap: 1ch; flex-wrap: wrap; }
.hub-slot-card { background: var(--bg-screen); border: 1px solid var(--border-glow); padding: 4px 1ch; min-width: 18ch; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.hub-slot-card:hover { border-color: var(--phosphor-green); box-shadow: 0 0 10px rgba(32, 194, 14,0.2); }
.hub-slot-header { display: flex; align-items: center; gap: 1ch; }
.hub-slot-icon { font-size: var(--font-size-lg); font-weight: bold; color: var(--phosphor-bright); text-shadow: var(--bloom-full); width: 2ch; text-align: center; }
.hub-slot-num { font-size: var(--font-size-base); color: var(--text-dim); letter-spacing: 1px; }
.hub-slot-badge { font-size: var(--font-size-sm); color: var(--phosphor-green); border: 1px solid var(--border-glow); padding: 0 4px; letter-spacing: 1px; }
.hub-slot-swarm { font-size: var(--font-size-sm); color: var(--amber, #ffb300); border: 1px solid var(--amber, #ffb300); padding: 0 3px; letter-spacing: 1px; }
.hub-slot-name { font-size: var(--font-size-lg); color: var(--phosphor-green); text-shadow: var(--bloom-dim); }
.hub-slot-session { font-size: var(--font-size-base); color: var(--text-dim); font-family: var(--font-terminal); }
.hub-slot-card .btn-small { margin-top: 4px; align-self: flex-start; }
.hub-slot-status { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.hub-slot-status.active { background: var(--led-green); box-shadow: 0 0 6px var(--led-green), 0 0 2px var(--led-green); }
.hub-slot-status.idle { background: var(--led-off-dim); border: 1px solid var(--dim-surface); }
.settings-section-desc { font-size: var(--font-size-md); color: var(--text-dim); margin-bottom: 4px; }

/* Hub Slot Editor Modal */
.hub-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.75); z-index: 8000; display: flex; align-items: center; justify-content: center; }
.hub-modal { background: var(--bg-screen); border: 1px solid var(--phosphor-green); box-shadow: var(--bloom-dim), 0 0 40px rgba(0, 0, 0, 0.8); max-width: 40ch; width: 90%; padding: 1ch 2ch 2ch; font-family: var(--font-terminal); }
.hub-modal-title { font-size: var(--font-size-lg); color: var(--phosphor-bright); text-shadow: var(--bloom-full); letter-spacing: 2px; text-align: center; padding-bottom: 1ch; border-bottom: 1px solid var(--border-glow); margin-bottom: 1ch; }
.hub-modal-body { display: flex; flex-direction: column; gap: 6px; }
.hub-modal-body .info-row { display: flex; align-items: center; gap: 1ch; }
.hub-modal-body .info-label { min-width: 8ch; font-size: var(--font-size-md); color: var(--text-dim); }
.hub-modal-body .cfg-input { flex: 1; }
.hub-modal-actions { display: flex; gap: 1ch; align-items: center; margin-top: 1ch; padding-top: 1ch; border-top: 1px solid var(--border-glow); }
.hub-swarm-check { font-size: var(--font-size-md); color: var(--text-dim); cursor: pointer; display: flex; align-items: center; gap: 6px; }
.hub-swarm-check input[type="checkbox"] { accent-color: var(--phosphor-green); }

/* ===================================================================
   AMBIENT PANEL
   =================================================================== */
.ambient-panel { height: 100%; display: flex; flex-direction: column; }
.ambient-panel .console-dual-panel { flex: 1; }
.ambient-transcript-log { flex: 1; overflow-y: auto; padding: 2px 1ch; font-size: var(--font-size-md); min-height: 0; background: var(--bg-screen); }
.ambient-empty-state { color: var(--text-dim); font-style: italic; padding: 16px 0; text-align: center; }
.ambient-entry { padding: 2px 0; border-bottom: 1px solid rgba(32, 194, 14,0.08); display: flex; gap: 1ch; }
.ambient-entry-time { color: var(--text-dim); font-size: var(--font-size-base); flex-shrink: 0; width: 8ch; }
.ambient-entry-speaker { color: var(--tungsten-warm); font-weight: bold; flex-shrink: 0; min-width: 10ch; }
.ambient-entry-speaker.david { color: var(--phosphor-bright); text-shadow: var(--bloom-dim); }
.ambient-entry-text { color: var(--phosphor-green); flex: 1; }
.ambient-entry-confidence { color: var(--text-dim); font-size: var(--font-size-base); flex-shrink: 0; width: 4ch; text-align: right; }

.ambient-toggle-row { display: flex; justify-content: center; padding: 4px 0; }
.ambient-toggle-btn { background: var(--bg-screen); border: 2px solid var(--border-glow); color: var(--phosphor-green); padding: 4px 2ch; font-family: var(--font-terminal); font-size: var(--font-size-lg); cursor: pointer; display: flex; align-items: center; gap: 1ch; letter-spacing: 1px; }
.ambient-toggle-btn:hover { border-color: var(--phosphor-green); box-shadow: 0 0 10px rgba(32, 194, 14,0.3); }
.ambient-toggle-btn.active { border-color: var(--phosphor-bright); background: rgba(32, 194, 14,0.1); }
.ambient-toggle-btn.active .status-indicator { color: var(--led-green); text-shadow: 0 0 6px var(--led-green); }

.ambient-engagement-card { padding: 2px 1ch; }
.ambient-engagement-card .info-row { font-size: var(--font-size-md); }
.ambient-prosody-card { padding: 2px 1ch; }
.ambient-prosody-card .info-row { font-size: var(--font-size-md); }

.ambient-speaker-list { padding: 2px 1ch; }
.ambient-speaker-item { display: flex; align-items: center; gap: 1ch; padding: 2px 0; font-size: var(--font-size-md); }
.ambient-speaker-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.ambient-speaker-dot.david { background: var(--phosphor-bright); box-shadow: 0 0 6px var(--phosphor-glow); }
.ambient-speaker-dot.other { background: var(--tungsten-warm); }
.ambient-speaker-name { color: var(--phosphor-green); }
.ambient-speaker-count { color: var(--text-dim); margin-left: auto; }

.amb-state-active { color: var(--phosphor-bright); text-shadow: var(--bloom-dim); font-weight: bold; }
.amb-state-attentive { color: var(--tungsten-warm); }
.amb-state-silent { color: var(--text-dim); }
.amb-state-dormant { color: var(--led-off-dim, #333); }

/* Connected Accounts */
.account-card { background: var(--dark-surface); border: 1px solid var(--border-glow); padding: 12px 16px; margin-bottom: 8px; }
.account-header { display: flex; align-items: center; gap: 8px; }
.account-icon { opacity: 0.7; }
.account-name { flex: 1; font-size: var(--font-size-lg); color: var(--phosphor-green); }
.account-badge { font-size: var(--font-size-base); padding: 2px 8px; border: 1px solid var(--border-glow); }
.account-badge.connected { color: var(--phosphor-green); border-color: var(--phosphor-green); }
.account-badge.disconnected { color: var(--text-dim); }
.account-badge.expiring { color: var(--tungsten-warm); border-color: var(--tungsten-warm); }
.account-detail { font-size: var(--font-size-base); color: var(--text-dim); margin: 4px 0 4px 26px; }
.account-actions { margin-top: 6px; display: flex; gap: 8px; }
.btn-connect { }
.btn-disconnect { color: var(--tungsten-warm) !important; border-color: var(--tungsten-warm) !important; }
.btn-disconnect:hover { background: var(--tungsten-warm) !important; color: var(--bg-screen) !important; }

/* =================================================================
   SWARM TAB — status bar + graph panel
   ================================================================= */
/* panel-agents: fixed flex column, no outer scroll — inner sections handle overflow */
#panel-agents { overflow: hidden; }

.swarm-status-bar {
    display: flex; align-items: center; gap: 0;
    padding: 6px 12px;
    background: rgba(10,82,10,0.12);
    border-bottom: 1px solid var(--dos-darkgray);
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: var(--font-size-md);
}
.swarm-agent-badge {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 14px;
    cursor: pointer;
    border-right: 1px solid var(--dos-darkgray);
    transition: background 0.12s;
}
.swarm-agent-badge:hover { background: rgba(32,194,14,0.08); }
.swarm-badge-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--dos-darkgray);
    flex-shrink: 0;
    transition: background 0.2s, box-shadow 0.2s;
}
.swarm-badge-dot.active { background: var(--dos-green); box-shadow: 0 0 6px var(--dos-green); }
.swarm-badge-dot.amber { background: var(--dos-darkgray); }
.swarm-badge-dot.amber.active { background: #FFB000; box-shadow: 0 0 6px #FFB000; }
.swarm-badge-dot.cyan { background: var(--dos-darkgray); }
.swarm-badge-dot.cyan.active { background: #4FC3F7; box-shadow: 0 0 6px #4FC3F7; }
.swarm-badge-name {
    color: var(--dos-green);
    font-size: var(--font-size-md);
    letter-spacing: 1px;
    text-shadow: 0 0 6px rgba(32,194,14,0.4);
}
.swarm-badge-status {
    color: var(--dos-darkgray);
    font-size: var(--font-size-base);
    letter-spacing: 0.5px;
    min-width: 40px;
    text-transform: uppercase;
}
.swarm-badge-status.active { color: var(--dos-green); }
.swarm-badge-task {
    color: #FFB000;
    font-size: var(--font-size-base);
    max-width: 160px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    opacity: 0.8;
}
.swarm-status-sep { color: var(--dos-darkgray); padding: 0 4px; font-size: var(--font-size-md); }
.swarm-status-spacer { flex: 1; }
.swarm-worker-count {
    color: var(--dos-darkgray);
    font-size: var(--font-size-base);
    letter-spacing: 0.5px;
    padding: 0 6px;
}
.swarm-worker-count.has-workers { color: #FFB000; }
.swarm-graph-wrap { flex: 1 1 0; overflow: hidden; min-height: 0; }

/* Agent Comms Feed — lower third of swarm tab */
/* Bottom row: comms + kanban side by side */
.swarm-bottom-row {
    flex: 0 0 38%;
    min-height: 0;
    display: flex;
    flex-direction: row;
    border-top: 1px solid #1a3a1a;
}
.swarm-comms-wrap {
    flex: 1;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #1a3a1a;
    background: #060806;
}
.swarm-comms-wrap,
.swarm-pipeline-wrap,
.fabric-status-bar,
.fabric-query-pane,
.lobby-section,
.kanban-board-wrap {
    font-family: var(--font-mono);
}
.swarm-comms-header {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    font-size: var(--font-size-xs);
    color: #20C20E;
    opacity: 0.8;
    border-bottom: 1px solid #1a3a1a;
    flex-shrink: 0;
    font-family: var(--font-mono);
}
.swarm-comms-feed {
    flex: 1;
    overflow-y: auto;
    padding: 6px 10px;
    font-size: var(--font-size-xs);
    font-family: monospace;
    line-height: 1.6;
    min-height: 0;
}
.comms-event {
    padding: 3px 0;
    border-bottom: 1px solid #0a1a0a;
    color: #20C20E;
}
.comms-event.lobby-msg { color: #4FC3F7; }
.comms-event .ev-ts   { color: var(--text-meta); font-size: var(--font-size-xs); margin-right: 6px; }
.comms-event .ev-type { color: var(--text-meta); margin-right: 6px; font-size: var(--font-size-xs); }
.comms-event .ev-from { color: #FFB000; }
.comms-event .ev-to   { color: #4FC3F7; }
.comms-event .ev-user { color: #20C20E; }
.comms-event .ev-ack  { color: var(--text-meta); font-style: italic; }
.comms-event .ev-coord { color: #20C20E; font-weight: bold; }
.comms-event .ev-body { color: #ccc; }
.comms-event .ev-hash { color: var(--text-meta); font-size: var(--font-size-xs); margin-left: 4px; }

/* =================================================================
   SWARM PIPELINE — lobby task queue inline in Swarm tab
   ================================================================= */
.swarm-pipeline-wrap {
    flex: 1;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: #05080a;
}
.swarm-pipeline-feed {
    flex: 1;
    overflow-y: auto;
    padding: 4px 10px;
    font-size: var(--font-size-xs);
    font-family: monospace;
    line-height: 1.6;
    min-height: 0;
}
.pipeline-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 2px 0;
    border-bottom: 1px solid #0a1218;
    white-space: nowrap;
    overflow: hidden;
}
.pipeline-row.queued  { color: #4FC3F7; }
.pipeline-row.working { color: #20C20E; }
.pipeline-row.stale   { color: #FFB000; }
.pipeline-row.empty   { color: var(--text-muted-readable); font-style: italic; }
.pipeline-badge {
    font-size: var(--font-size-xs);
    padding: 1px 4px;
    border-radius: 2px;
    flex-shrink: 0;
}
.pipeline-badge.queued  { background: rgba(79,195,247,0.15); color: #4FC3F7; }
.pipeline-badge.working { background: rgba(32,194,14,0.15);  color: #20C20E; }
.pipeline-badge.stale   { background: rgba(255,176,0,0.15);  color: #FFB000; }
.pipeline-title { flex: 1; overflow: hidden; text-overflow: ellipsis; opacity: 0.85; }
.pipeline-age   { color: var(--text-meta); font-size: var(--font-size-xs); flex-shrink: 0; }
.pipeline-section { margin-bottom: 4px; }
.pipeline-section-hdr {
    font-size: var(--font-size-xs);
    letter-spacing: 1px;
    padding: 3px 8px;
    opacity: 0.6;
    border-bottom: 1px solid #111;
}
.pipeline-section-hdr.working { color: #20C20E; }
.pipeline-section-hdr.queued  { color: #4FC3F7; }
.pipeline-section-hdr.done    { color: var(--text-meta); }
.pipeline-section-hdr.failed  { color: #FF6B6B; }
.pipeline-row.done { color: var(--text-meta); }
.k-empty { color: var(--text-muted-readable); font-size: var(--font-size-xs); font-style: italic; padding: 6px; }

/* =================================================================
   FABRIC TAB — status bar + graph panel
   ================================================================= */
/* panel-fabric uses .tab-panel.active { display:flex; flex-direction:column } — no ID override needed */

.fabric-status-bar {
    display: flex; align-items: center; gap: 0;
    padding: 5px 10px;
    background: rgba(255,176,0,0.08);
    border-bottom: 1px solid rgba(255,176,0,0.18);
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--dos-darkgray);
}
.fabric-status-title {
    color: #FFB000;
    text-shadow: 0 0 6px rgba(255,176,0,0.25);
    letter-spacing: 1px;
    padding-right: 6px;
}
.fabric-status-sep { color: rgba(255,176,0,0.3); padding: 0 6px; }
.fabric-stat {
    color: var(--dos-darkgray);
    font-size: var(--font-size-xs);
    letter-spacing: 0.5px;
    padding-right: 10px;
}
.fabric-stat span {
    color: #f4c36a;
    margin-left: 4px;
}
.fabric-status-spacer { flex: 1; }

/* Fabric tab body — two-column split */
.fabric-body {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* Left query pane */
.fabric-query-pane {
    width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-dim);
    background: rgba(13,15,13,0.6);
    overflow: hidden;
}
.fabric-query-header {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--phosphor-green);
    padding: 8px 10px 6px;
    border-bottom: 1px solid var(--border-dim);
    flex-shrink: 0;
    opacity: 0.8;
}
.fabric-query-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border-dim);
}
.fabric-tab-input {
    flex: 1;
    background: var(--dark-surface);
    border: 1px solid var(--border-dim);
    color: var(--phosphor-green);
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    padding: 3px 6px;
    outline: none;
    min-width: 0;
}
.fabric-tab-input:focus {
    border-color: var(--phosphor-green);
    box-shadow: 0 0 4px rgba(32,194,14,0.3);
}
.fabric-tab-limit {
    background: var(--dark-surface);
    border: 1px solid var(--border-dim);
    color: var(--phosphor-green);
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    padding: 3px 2px;
    width: 40px;
    outline: none;
}
.fabric-tab-results {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--phosphor-dim) var(--dark-surface);
}
.fabric-tab-results .fabric-result-item {
    padding: 5px 8px;
    border-bottom: 1px solid rgba(32,194,14,0.08);
    cursor: default;
}
.fabric-tab-results .fabric-result-item:hover {
    background: rgba(32,194,14,0.05);
}

/* ===================================================================
   COBOL DESIGN SYSTEM — Mainframe / IBM 3270 field discipline
   ALL-CAPS labels, dot-fill leaders, box-drawing dividers
   Applied globally: info-rows, section headers, new panels
   =================================================================== */

/* Uppercase all field labels — COBOL data division discipline */
.info-label {
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Dot-fill leader after each label (NOMINAL........: VALUE) */
.info-label::after {
    content: "················";
    display: inline-block;
    color: rgba(32, 194, 14, 0.18);
    letter-spacing: 3px;
    font-size: var(--font-size-sm);
    vertical-align: middle;
    padding-left: 0.5ch;
    overflow: hidden;
}

/* Panel titles use box-drawing divider style */
.panel-title {
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* === Box-Drawing Section Divider === */
.cobol-divider {
    font-family: var(--font-terminal);
    color: var(--text-dim);
    text-align: center;
    font-size: var(--font-size-md);
    letter-spacing: 1px;
    padding: 2px 1ch;
    text-shadow: var(--bloom-dim);
    text-transform: uppercase;
    flex-shrink: 0;
    user-select: none;
    background: var(--dark-surface);
    border-top: 1px solid rgba(32, 194, 14, 0.15);
    border-bottom: 1px solid rgba(32, 194, 14, 0.15);
}

/* === COBOL Field Row — used in new panels === */
.cobol-row {
    display: flex;
    align-items: baseline;
    padding: 0 1ch;
    line-height: 1.5;
    font-family: var(--font-terminal);
    font-size: var(--font-size-md);
}
.cobol-row:hover { background: rgba(32, 194, 14, 0.04); }
.cobol-lbl {
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex: 0 0 auto;
    white-space: nowrap;
}
.cobol-dots {
    flex: 1;
    overflow: hidden;
    color: rgba(32, 194, 14, 0.18);
    white-space: nowrap;
    font-size: var(--font-size-sm);
    padding: 0 0.25ch;
    letter-spacing: 3px;
    user-select: none;
    line-height: inherit;
    align-self: center;
}
.cobol-val {
    color: var(--phosphor-green);
    text-shadow: var(--bloom-dim);
    flex: 0 0 auto;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.cobol-val.amber { color: var(--tungsten-warm); text-shadow: var(--bloom-tungsten); }
.cobol-val.bright { color: var(--phosphor-bright); text-shadow: var(--bloom-full); }
.cobol-val.dim { color: var(--text-dim); text-shadow: none; }

/* F-key COBOL labels — upgraded uppercase verbs */
.fkey-label { text-transform: uppercase; letter-spacing: 0.5px; }

/* ===================================================================
   CONVERSATION HISTORY PANEL (Ambient Tab)
   =================================================================== */
.ambient-panel .panel-left {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.ambient-transcript-wrapper {
    flex: 1 1 50%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.conv-history-section {
    flex: 1 1 50%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-top: 1px solid rgba(32, 194, 14, 0.2);
}
.conv-history-list {
    flex: 1;
    overflow-y: auto;
    background: var(--bg-screen);
    scrollbar-width: thin;
    scrollbar-color: var(--phosphor-dim) var(--bg-screen);
}
.conv-history-list::-webkit-scrollbar { width: 8px; }
.conv-history-list::-webkit-scrollbar-thumb { background: var(--dim-surface); }
.conv-session-row {
    padding: 2px 1ch;
    border-bottom: 1px solid rgba(32, 194, 14, 0.06);
    cursor: pointer;
    font-size: var(--font-size-md);
}
.conv-session-row:hover { background: rgba(32, 194, 14, 0.06); }
.conv-session-row.expanded {
    background: rgba(32, 194, 14, 0.04);
    border-left: 2px solid var(--phosphor-green);
    padding-left: calc(1ch - 2px);
}
.conv-session-meta {
    display: flex;
    gap: 2ch;
    color: var(--text-dim);
    font-size: var(--font-size-md);
    flex-wrap: nowrap;
    overflow: hidden;
}
.sess-ts { color: var(--phosphor-green); flex: 0 0 auto; }
.sess-dur { color: var(--tungsten-warm); flex: 0 0 auto; }
.sess-speakers { color: var(--text-dim); flex: 0 0 auto; }
.sess-turns { color: var(--text-dim); margin-left: auto; flex: 0 0 auto; }
.conv-session-detail {
    display: none;
    padding: 2px 0 4px 2ch;
    border-top: 1px solid rgba(32, 194, 14, 0.08);
    background: rgba(32, 194, 14, 0.02);
    max-height: 200px;
    overflow-y: auto;
}
.conv-session-detail.open { display: block; }
.conv-turn-line {
    display: flex;
    gap: 1ch;
    font-size: var(--font-size-base);
    line-height: 1.4;
    padding: 1px 0;
}
.conv-turn-speaker {
    color: var(--tungsten-warm);
    font-weight: bold;
    flex: 0 0 auto;
    min-width: 10ch;
    text-transform: uppercase;
}
.conv-turn-speaker.david { color: var(--phosphor-bright); text-shadow: var(--bloom-dim); }
.conv-turn-speaker.alfred { color: var(--phosphor-green); text-shadow: var(--bloom-dim); }
.conv-turn-speaker.unknown { color: var(--text-dim); }
.conv-turn-text { color: var(--phosphor-green); flex: 1; }
.conv-history-empty {
    color: var(--text-dim);
    font-style: italic;
    padding: 16px 1ch;
    font-size: var(--font-size-md);
}
.conv-history-loading {
    color: var(--text-dim);
    padding: 4px 1ch;
    font-size: var(--font-size-md);
    animation: speaking-pulse 1.2s ease-in-out infinite;
}
.conv-session-load-error { color: var(--led-red); padding: 4px 1ch; font-size: var(--font-size-base); }

/* ===================================================================
   SPEAKER REGISTRY PANEL (Ambient Tab)
   =================================================================== */
.speaker-registry-section {
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(32, 194, 14, 0.2);
    margin-top: 4px;
    flex-shrink: 0;
    max-height: 200px;
}
.speaker-registry-table {
    flex: 1;
    overflow-y: auto;
    background: var(--bg-screen);
    scrollbar-width: thin;
    scrollbar-color: var(--phosphor-dim) var(--bg-screen);
}
.speaker-reg-header-row,
.speaker-reg-row {
    display: flex;
    align-items: center;
    gap: 1ch;
    padding: 0 1ch;
    line-height: 1.5;
    font-size: var(--font-size-md);
}
.speaker-reg-header-row {
    background: var(--dark-surface);
    border-bottom: 1px solid var(--border-glow);
    font-size: var(--font-size-base);
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}
.speaker-reg-row {
    border-bottom: 1px solid rgba(32, 194, 14, 0.05);
    cursor: pointer;
}
.speaker-reg-row:hover { background: rgba(32, 194, 14, 0.06); }
.speaker-reg-row.renaming { background: rgba(32, 194, 14, 0.04); border-left: 2px solid var(--phosphor-green); }
.col-uuid  { flex: 0 0 9ch;  color: var(--text-dim); font-size: var(--font-size-base); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-name  { flex: 1;        color: var(--phosphor-green); text-shadow: var(--bloom-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-turns { flex: 0 0 5ch;  text-align: right; color: var(--text-dim); }
.col-seen  { flex: 0 0 10ch; text-align: right; color: var(--muted-label); font-size: var(--font-size-base); }
.speaker-reg-header-row .col-uuid  { color: var(--text-dim); }
.speaker-reg-header-row .col-name  { color: var(--text-dim); text-shadow: none; }
.speaker-reg-header-row .col-turns { color: var(--text-dim); }
.speaker-reg-header-row .col-seen  { color: var(--text-dim); }
.speaker-reg-empty {
    color: var(--text-dim);
    font-style: italic;
    padding: 8px 1ch;
    font-size: var(--font-size-md);
}
.speaker-rename-row {
    display: flex;
    gap: 0.5ch;
    padding: 2px 1ch;
    background: rgba(32, 194, 14, 0.04);
    border-top: 1px solid var(--border-glow);
    border-left: 2px solid var(--phosphor-green);
    flex-shrink: 0;
}
.speaker-rename-input {
    flex: 1;
    background: var(--bg-input);
    border: 1px solid var(--phosphor-green);
    color: var(--phosphor-bright);
    font-family: var(--font-terminal);
    font-size: var(--font-size-md);
    padding: 0 1ch;
    outline: none;
    caret-color: var(--phosphor-bright);
    border-radius: 0;
}
.speaker-rename-input:focus { border-color: var(--phosphor-bright); box-shadow: 0 0 6px rgba(32, 194, 14, 0.3); }
.speaker-rename-save {
    padding: 0 1ch;
    background: var(--dark-surface);
    border: 1px solid var(--border-glow);
    color: var(--phosphor-green);
    font-family: var(--font-terminal);
    font-size: var(--font-size-md);
    cursor: pointer;
}
.speaker-rename-save:hover { background: var(--phosphor-green); color: var(--bg-screen); }
.speaker-rename-cancel {
    color: var(--muted-label);
    cursor: pointer;
    font-size: var(--font-size-md);
    padding: 0 0.5ch;
    display: flex;
    align-items: center;
}
.speaker-rename-cancel:hover { color: var(--led-red); }
.fabric-graph-wrap { flex: 1; overflow: hidden; min-height: 0; }

/* ============================================
   LOBBY TAB — Message Bus Panel
   ============================================ */
.lobby-stats-row {
    display: flex;
    padding: 12px 0;
    font-size: var(--font-size-sm);
    color: #20C20E;
    border-bottom: 1px solid #1a3a1a;
    flex-wrap: wrap;
    gap: 0;
}
.lobby-section {
    margin-top: 18px;
}
.section-header {
    color: #20C20E;
    font-size: var(--font-size-xs);
    margin-bottom: 10px;
    opacity: 0.7;
}
.lobby-messages-list {
    font-size: var(--font-size-xs);
    max-height: 260px;
    overflow-y: auto;
    background: #050705;
    padding: 10px;
    border: 1px solid #1a3a1a;
}
.lobby-msg-row {
    padding: 4px 0;
    border-bottom: 1px solid #0a1a0a;
    color: #20C20E;
}
.lobby-msg-row .msg-meta { color: var(--text-meta); font-size: var(--font-size-xs); }
.lobby-msg-row .msg-from { color: #FFB000; }
.lobby-msg-row .msg-to   { color: #4FC3F7; }
.lobby-slot-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    font-size: var(--font-size-xs);
}
.slot-cell {
    padding: 6px 10px;
    border: 1px solid #1a3a1a;
    background: #050705;
    color: #20C20E;
}
.slot-cell.active  { border-color: #20C20E; color: #20C20E; }
.slot-cell.ondeck  { border-color: #FFB000; color: #FFB000; }
.slot-cell.free    { color: var(--text-muted-readable); }
.lobby-post-form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    font-size: var(--font-size-xs);
    color: #20C20E;
    padding: 12px 0;
}
.lobby-input {
    background: #050705;
    border: 1px solid #20C20E;
    color: #20C20E;
    font-family: monospace;
    font-size: var(--font-size-xs);
    padding: 4px 10px;
    outline: none;
}
.lobby-btn {
    background: #0a1a0a;
    border: 1px solid #20C20E;
    color: #20C20E;
    font-family: monospace;
    font-size: var(--font-size-xs);
    padding: 4px 16px;
    cursor: pointer;
}
.lobby-btn:hover { background: #1a3a1a; }

/* =================================================================
   LOBBY TAB — Kanban board
   ================================================================= */
.kanban-board-wrap {
    display: flex;
    gap: 10px;
    flex: 1;
    min-height: 0;
    padding: 10px 0;
    overflow-x: auto;
}
.kanban-col {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    background: #050705;
    border: 1px solid #1a3a1a;
    min-height: 0;
}
.kanban-col-header {
    padding: 7px 12px;
    font-size: var(--font-size-xs);
    font-weight: bold;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    border-bottom: 1px solid #1a3a1a;
}
.kanban-col-header.queued  { color: #4FC3F7; border-bottom-color: #4FC3F7; }
.kanban-col-header.working { color: #20C20E; border-bottom-color: #20C20E; }
.kanban-col-header.done    { color: var(--text-meta); }
.kanban-col-header.failed  { color: #FF6B6B; border-bottom-color: rgba(255,107,107,0.4); }
.kcol-count {
    background: rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 1px 7px;
    font-size: var(--font-size-xs);
}
.kanban-cards {
    flex: 1;
    overflow-y: auto;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.k-card {
    padding: 8px 10px;
    border: 1px solid #1a3a1a;
    background: #060a06;
    font-size: var(--font-size-xs);
    line-height: 1.4;
}
.k-card.queued  { border-left: 3px solid rgba(79,195,247,0.6); }
.k-card.working { border-left: 3px solid rgba(32,194,14,0.8); background: #060c06; }
.k-card.working.stale { border-left-color: #FFB000; background: #0a0a04; }
.k-card.done    { border-left: 3px solid #333; opacity: 0.7; }
.k-card.failed  { border-left: 3px solid rgba(255,107,107,0.6); background: #0a0606; }
.k-card-id   { font-size: var(--font-size-xs); color: var(--text-meta); margin-bottom: 3px; display: flex; align-items: center; gap: 4px; }
.k-card-title { color: #ccc; margin-bottom: 4px; word-break: break-word; }
.k-card.working .k-card-title { color: #20C20E; }
.k-card-meta  { font-size: var(--font-size-xs); color: var(--text-meta); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.k-card-notes { font-size: var(--font-size-xs); color: #FF6B6B; margin-top: 3px; opacity: 0.8; }
.k-badge {
    font-size: var(--font-size-xs);
    padding: 1px 4px;
    border-radius: 2px;
    text-transform: uppercase;
    flex-shrink: 0;
}
.k-slot {
    background: rgba(32,194,14,0.15);
    color: #20C20E;
    padding: 1px 5px;
    font-size: var(--font-size-xs);
    border-radius: 2px;
}
.k-slot.orphan { background: rgba(255,176,0,0.15); color: #FFB000; }
.k-stale { color: #FFB000; font-size: var(--font-size-xs); }

/* ===================================================================
   KLY AVATAR — Menu bar mascot + expression state + health panel
   =================================================================== */

/* Avatar container in menu bar */
.kly-avatar-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 1ch;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
}

/* Circular ring around avatar */
.kly-avatar-ring {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid var(--phosphor-dim);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-screen);
    transition: all 0.3s ease;
    box-shadow: 0 0 4px rgba(32, 194, 14, 0.15);
}
.kly-avatar-ring:hover {
    width: 40px;
    height: 40px;
    border-color: var(--phosphor-green);
    box-shadow: 0 0 10px rgba(32, 194, 14, 0.4);
}

/* SVG container — fills the ring */
.kly-avatar-svg {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kly-avatar-svg svg {
    width: 100%;
    height: 100%;
}

/* Expression-driven ring states */
.kly-avatar-ring.kly-ring-calm {
    border-color: var(--phosphor-dim);
}
.kly-avatar-ring.kly-ring-thinking {
    border-color: var(--phosphor-green);
    animation: kly-ring-pulse 1.5s ease-in-out infinite;
}
.kly-avatar-ring.kly-ring-speaking {
    border-color: var(--phosphor-green);
    box-shadow: 0 0 8px rgba(32, 194, 14, 0.5);
    animation: kly-ring-speak 0.4s ease-in-out infinite;
}
.kly-avatar-ring.kly-ring-alert {
    border-color: var(--tungsten-warm);
    box-shadow: 0 0 10px rgba(255, 176, 0, 0.5);
    animation: kly-ring-alert 0.8s ease-in-out infinite;
}
.kly-avatar-ring.kly-ring-sleeping {
    border-color: var(--phosphor-dim);
    opacity: 0.5;
}

@keyframes kly-ring-pulse {
    0%, 100% { box-shadow: 0 0 4px rgba(32, 194, 14, 0.2); }
    50% { box-shadow: 0 0 10px rgba(32, 194, 14, 0.5); }
}
@keyframes kly-ring-speak {
    0%, 100% { box-shadow: 0 0 6px rgba(32, 194, 14, 0.3); }
    50% { box-shadow: 0 0 14px rgba(32, 194, 14, 0.6); }
}
@keyframes kly-ring-alert {
    0%, 100% { box-shadow: 0 0 6px rgba(255, 176, 0, 0.3); }
    50% { box-shadow: 0 0 14px rgba(255, 176, 0, 0.6); }
}

/* Health panel dropdown */
.kly-health-panel {
    position: fixed;
    top: 36px;
    right: 12ch;
    width: 280px;
    background: var(--bg-panel);
    border: 1px solid var(--phosphor-dim);
    border-radius: 4px;
    padding: 8px 10px;
    z-index: 9999;
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--text-dim);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 8px rgba(32, 194, 14, 0.1);
}
.kly-panel-header {
    color: var(--phosphor-green);
    text-shadow: 0 0 6px rgba(32, 194, 14, 0.4);
    margin-bottom: 4px;
    font-size: var(--font-size-sm);
}
.kly-panel-row {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
    border-bottom: 1px solid rgba(32, 194, 14, 0.06);
}
.kly-panel-label {
    color: var(--phosphor-dim);
}
.kly-panel-separator {
    height: 1px;
    background: var(--phosphor-dim);
    margin: 6px 0;
    opacity: 0.3;
}
.kly-panel-gates {
    max-height: 120px;
    overflow-y: auto;
}
.kly-gate-row {
    display: flex;
    align-items: center;
    gap: 1ch;
    padding: 2px 0;
}
.kly-gate-ok { color: var(--led-green); }
.kly-gate-warn { color: var(--led-yellow); }
.kly-gate-fail { color: var(--led-red); }

/* ===================================================================
   ACCESSIBILITY — REDUCED MOTION
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    body {
        animation: none !important;
    }
}