* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary: #00ff41;
    --primary-dark: #00cc33;
    --primary-glow: #00ff41;
    --secondary: #00ffff;
    --danger: #ff0040;
    --warning: #ffff00;
    --dark: #000000;
    --darker: #0a0a0a;
    --light: #001a00;
    --gray: #00ff41;
    --gray-light: #003300;
    --border: #00ff41;
    --shadow: rgba(0, 255, 65, 0.3);
    --shadow-lg: rgba(0, 255, 65, 0.5);
    --glow: 0 0 5px #00ff41, 0 0 10px #00ff41;
    --glow-strong: 0 0 5px #00ff41, 0 0 10px #00ff41, 0 0 15px #00ff41;
    --chat-font-size: 13px;
    --own-bg: #001a00;
    --own-highlighted-bg: #003300;
    --logo-ghost-a: #00ffff;
    --logo-ghost-b: #ff0040;
}

/* Theme: Cyberpunk (Purple/Pink) */
[data-theme="cyberpunk"] {
    --primary: #ff00ff;
    --primary-dark: #cc00cc;
    --primary-glow: #ff00ff;
    --secondary: #00ffff;
    --light: #1a001a;
    --gray: #ff00ff;
    --gray-light: #330033;
    --border: #ff00ff;
    --shadow: rgba(255, 0, 255, 0.3);
    --shadow-lg: rgba(255, 0, 255, 0.5);
    --glow: 0 0 5px #ff00ff, 0 0 10px #ff00ff;
    --glow-strong: 0 0 5px #ff00ff, 0 0 10px #ff00ff, 0 0 15px #ff00ff;
    --chat-font-size: 13px;
    --own-bg: #1a001a;
    --own-highlighted-bg: #2d002d;
    --logo-ghost-a: #00ffff;
    --logo-ghost-b: #ff0040;
}

/* Theme: Ocean (Blue) */
[data-theme="ocean"] {
    --primary: #00bfff;
    --primary-dark: #0099cc;
    --primary-glow: #00bfff;
    --secondary: #00ff99;
    --light: #001a2a;
    --gray: #00bfff;
    --gray-light: #003355;
    --border: #00bfff;
    --shadow: rgba(0, 191, 255, 0.3);
    --shadow-lg: rgba(0, 191, 255, 0.5);
    --glow: 0 0 5px #00bfff, 0 0 10px #00bfff;
    --glow-strong: 0 0 5px #00bfff, 0 0 10px #00bfff, 0 0 15px #00bfff;
    --chat-font-size: 13px;
    --own-bg: #001a2a;
    --logo-ghost-a: #ff2d95;  /* blue primary: magenta + the theme green */
    --logo-ghost-b: #00ff99;
}

/* Theme: Sunset (Orange/Red) */
[data-theme="sunset"] {
    --primary: #ff6600;
    --primary-dark: #cc5200;
    --primary-glow: #ff6600;
    --secondary: #ffcc00;
    --light: #1a0a00;
    --gray: #ff6600;
    --gray-light: #332200;
    --border: #ff6600;
    --shadow: rgba(255, 102, 0, 0.3);
    --shadow-lg: rgba(255, 102, 0, 0.5);
    --glow: 0 0 5px #ff6600, 0 0 10px #ff6600;
    --glow-strong: 0 0 5px #ff6600, 0 0 10px #ff6600, 0 0 15px #ff6600;
    --chat-font-size: 13px;
    --own-bg: #1a0a00;
    --logo-ghost-a: #00ffff;  /* orange primary: cyan + magenta, its true opposites */
    --logo-ghost-b: #ff00a0;
}

/* Theme: Amber (Classic terminal) */
[data-theme="amber"] {
    --primary: #ffb000;
    --primary-dark: #cc8c00;
    --primary-glow: #ffb000;
    --secondary: #ffd700;
    --light: #1a1000;
    --gray: #ffb000;
    --gray-light: #332800;
    --border: #ffb000;
    --shadow: rgba(255, 176, 0, 0.3);
    --shadow-lg: rgba(255, 176, 0, 0.5);
    --glow: 0 0 5px #ffb000, 0 0 10px #ffb000;
    --glow-strong: 0 0 5px #ffb000, 0 0 10px #ffb000, 0 0 15px #ffb000;
    --chat-font-size: 13px;
    --own-bg: #1a1000;
    --own-highlighted-bg: #332200;
    --logo-ghost-a: #00e5ff;  /* amber primary and secondary are both gold; cyan + magenta restore the split */
    --logo-ghost-b: #ff2d95;
}

/* Theme: Red Team (blood-red matrix)
   Pure red (no blue channel) so it reads red, not pink. Lighter accents warm
   toward orange rather than toward white/pink, and the glow is kept tight and
   deep-red so it doesn't bloom pink over the black background. */
[data-theme="redteam"] {
    --primary: #ff0000;
    --primary-dark: #a30000;
    --primary-glow: #ff0000;
    --secondary: #ff3a2d;
    --danger: #ff0000;
    --warning: #ff7a00;
    --light: #140000;
    --gray: #ff0000;
    --gray-light: #2b0000;
    --border: #e60000;
    --shadow: rgba(255, 0, 0, 0.3);
    --shadow-lg: rgba(255, 0, 0, 0.5);
    --glow: 0 0 4px #ff0000, 0 0 9px #cc0000;
    --glow-strong: 0 0 4px #ff0000, 0 0 9px #cc0000, 0 0 14px #990000;
    --chat-font-size: 13px;
    --own-bg: #140000;
    --own-highlighted-bg: #2b0000;
    /* The logo's chromatic split screen-blends these two channels against the
       red core; they must be distinct hues from red (and each other) or the
       letters collapse into a dotty blur. Cyan + magenta is the classic
       aberration pair other warm themes use — the core stays red, legible. */
    --logo-ghost-a: #00ffff;
    --logo-ghost-b: #ff00a0;
}

/* Matrix-rain backdrop canvas — hidden except under the Red Team theme.
   z-index 0 keeps it above the body background but below the scanline (1),
   video tiles (2) and header (100). The content wrapper is lifted into its
   own layer so the rain only shows through the UI's transparent gaps. */
#matrixRain {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    display: none;
    pointer-events: none;
}
[data-theme="redteam"] #matrixRain { display: block; }
[data-theme="redteam"] .container { position: relative; z-index: 1; }
/* The landing/prejoin screens paint an opaque radial gradient; clear it under
   Red Team so the matrix rain behind the content shows through the gaps. */
[data-theme="redteam"] .join-screen,
[data-theme="redteam"] .prejoin-screen {
    background: transparent;
}

/* Red Team logo: the stock wordmark layers a cyan/magenta chromatic split,
   three tear slices, 13 permanently-ripping scanline bands, margin corruption
   blocks and a dotted scanline overlay — which reads as a pink, dotty mess.
   Strip all of that for this theme and keep only the solid-red core wordmark,
   which still shakes a couple of times per cycle (bf-shake on .bf-root). */
[data-theme="redteam"] .bf-chan-l,
[data-theme="redteam"] .bf-chan-r,
[data-theme="redteam"] .bf-slice-a,
[data-theme="redteam"] .bf-slice-b,
[data-theme="redteam"] .bf-slice-c,
[data-theme="redteam"] [class*="bf-line-"],
[data-theme="redteam"] .bf-scan,
[data-theme="redteam"] .bf-root > g:not([class]),
[data-theme="redteam"] .bf-root > rect {
    display: none;
}
[data-theme="redteam"] .bf-blend { mix-blend-mode: normal; }
[data-theme="redteam"] .bf-jit { animation: none; }   /* no constant micro-jitter */

/* Red Team: let the matrix rain show behind the in-call video area. The grid
   loses its black fill and the tiles go translucent, so the fixed backdrop
   canvas shows through around and behind the feeds. A live <video> still fills
   (and so covers) its own tile; avatar tiles and letterbox bars reveal the rain. */
[data-theme="redteam"] .video-grid { background: transparent; }
[data-theme="redteam"] .video-container { background: rgba(20, 0, 0, 0.25); }
[data-theme="redteam"] .video-container video { background: transparent; }
[data-theme="redteam"] .video-avatar { background: rgba(20, 0, 0, 0.35); }

/* Red Team: the connected status bar hardcodes a dark-GREEN background
   (#001a00), which leaves its red text hard to read. Swap it for near-black
   red so the "CONNECTED" status reads cleanly. */
[data-theme="redteam"] .status-bar.connected {
    background: #140000;
    color: #ff6b5e;                 /* brighter warm red for legibility */
    border-top-color: var(--secondary);
    text-shadow: 0 0 5px var(--secondary);
}

/* Red Team: make any data table read as red as the rest of the UI. */
[data-theme="redteam"] table,
[data-theme="redteam"] .user-table {
    border-collapse: collapse;
    color: var(--primary);
    border: 1px solid var(--border);
    background: rgba(26, 0, 0, 0.6);
}
[data-theme="redteam"] th,
[data-theme="redteam"] td,
[data-theme="redteam"] .user-table th,
[data-theme="redteam"] .user-table td {
    border: 1px solid var(--border);
    color: var(--primary);
    padding: 8px 14px;
}
[data-theme="redteam"] th,
[data-theme="redteam"] .user-table th {
    background: var(--gray-light);
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: var(--glow);
}
[data-theme="redteam"] tr:hover td,
[data-theme="redteam"] .user-table tr:hover td {
    background: rgba(51, 0, 0, 0.7);
}

body {
    font-family: 'Courier New', 'Consolas', 'Monaco', monospace;
    background: #000000;
    min-height: 100vh;
    color: var(--primary);
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
    position: relative;
}

/* CRT Scanline Effect — z-index 1 keeps it below video tiles (z-index 2) */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.15),
        rgba(0, 0, 0, 0.15) 1px,
        transparent 1px,
        transparent 2px
    );
    pointer-events: none;
    z-index: 1;
}

.container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* Header */
.header {
    background: var(--darker);
    padding: 7px 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 0 var(--primary);
    border-bottom: 2px solid var(--primary);
    position: relative;
    z-index: 100;
}

.room-info {
    display: flex;
    gap: 16px;
    align-items: center;
    font-size: 12px;
    color: var(--secondary);
    font-weight: 500;
    text-shadow: 0 0 5px var(--secondary);
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
}

.room-info > span,
.room-info .btn {
    padding: 8px 16px;
    background: var(--darker);
    border: 2px solid var(--secondary);
    font-family: 'Courier New', monospace;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: none;
    border-radius: 0;
    line-height: normal;
}

/* Join Screen / Landing Page */
.join-screen, .prejoin-screen {
    flex: 1;
    display: flex;
    /* `safe` matters because this element is also the scroll container: with a
       plain `center`, content taller than the space overflows equally in both
       directions and the top -- the heading -- is pushed under the header where
       it cannot be scrolled back into view. `safe` falls back to flex-start the
       moment it would overflow. The unprefixed value stays first as a fallback
       for anything that does not understand it. */
    align-items: center;
    align-items: safe center;
    justify-content: center;
    padding: 40px 24px;
    background: radial-gradient(circle at 30% 50%, #001a00 0%, #000000 70%);
    overflow-y: auto;
}

/* Two-column landing layout */
.landing-layout {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 48px;
    max-width: 960px;
    width: 100%;
    animation: slideUp 0.4s ease-out;
}

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

/* Left column */
.landing-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
}

/* The single BroFerence wordmark, in the header bar. The artwork (colours,
   glitch animation) lives in client/logo-banner.svg and is inlined into
   app.html by scripts/sync-logo.py, so it can read these theme variables --
   an <img> could not see them. */
.header-banner {
    display: block;
    width: 100%;
    max-width: 232px;
    height: auto;
}

/* The mark sits directly on the header, so its own ground would read as a
   pasted-on box. --logo-ground still matters: the dropout bars use it to punch
   back through the letterforms, so it has to match whatever is behind them. */
.header-banner .bf-plate,
.header-banner .bf-scan {
    display: none;
}

/* Corporate is the one light theme. mix-blend-mode:screen over a light ground
   washes the whole mark out to near-white, so there the channels composite
   normally instead. */
[data-theme="corporate"] .bf-blend {
    mix-blend-mode: normal;
}

.landing-tagline {
    font-size: 15px;
    color: var(--secondary);
    line-height: 1.6;
    margin: 0;
    opacity: 0.85;
}

.landing-features {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.landing-feature {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(0, 255, 65, 0.15);
    background: rgba(0, 255, 65, 0.03);
    transition: border-color 0.2s, background 0.2s;
}

.landing-feature:hover {
    border-color: rgba(0, 255, 65, 0.35);
    background: rgba(0, 255, 65, 0.06);
}

.lf-icon {
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 1px;
}

.landing-feature strong {
    display: block;
    color: var(--primary);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.landing-feature span {
    display: block;
    color: var(--secondary);
    font-size: 12px;
    opacity: 0.75;
    line-height: 1.5;
}

/* Right column: join form */
.landing-form {
    background: var(--darker);
    padding: 28px 32px;
    border: 2px solid var(--primary);
    box-shadow: 0 0 30px var(--shadow-lg), inset 0 0 20px rgba(0, 255, 65, 0.05);
    display: flex;
    flex-direction: column;
    gap: 0;
}

.landing-form h2 {
    margin: 0 0 22px;
    color: var(--primary);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: var(--glow-strong);
    text-align: center;
}

.landing-join-btn {
    width: 100%;
    margin-top: 6px;
    font-size: 15px;
    padding: 12px;
    letter-spacing: 1px;
}

.landing-notice {
    margin: 14px 0 0;
    font-size: 11px;
    color: var(--secondary);
    opacity: 0.55;
    text-align: center;
    line-height: 1.5;
}

.form-label-hint {
    font-weight: 400;
    opacity: 0.55;
    text-transform: none;
    letter-spacing: 0;
    font-size: 11px;
}

.form-group {
    margin-bottom: 14px;
}

.form-group label {
    display: block;
    margin-bottom: 4px;
    font-weight: 700;
    color: var(--primary);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.form-group input {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid var(--primary);
    background: #000000;
    color: var(--primary);
    font-size: 14px;
    transition: all 0.3s ease;
    font-family: 'Courier New', monospace;
    box-sizing: border-box;
}

.form-group input:focus {
    outline: none;
    border-color: var(--secondary);
    box-shadow: var(--glow);
    background: #001100;
}

.form-group input::placeholder {
    color: #003300;
}

.form-group small {
    display: block;
    margin-top: 3px;
    color: var(--secondary);
    font-size: 10px;
}

/* Prejoin Screen */
.prejoin-card {
    max-width: 600px;
    width: 100%;
}

.prejoin-preview {
    margin: 20px 0;
    background: #000;
    border: 2px solid var(--primary);
    aspect-ratio: 16 / 9;
    overflow: hidden;
    box-shadow: var(--glow);
}

.prejoin-preview video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.prejoin-notice {
    margin: 12px 0 0;
    padding: 10px 12px;
    border: 1px solid var(--warning);
    background: rgba(255, 255, 0, 0.07);
    color: var(--warning);
    font-size: 0.8rem;
    line-height: 1.4;
}

/* Waiting on the browser permission prompt — informational, not a problem yet */
.prejoin-notice.pending {
    border-color: var(--secondary);
    background: rgba(0, 255, 255, 0.07);
    color: var(--secondary);
}

.prejoin-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin: 20px 0;
}

.prejoin-controls .btn {
    flex: 1 1 140px;
}

.prejoin-controls .btn:disabled,
.prejoin-device-row select:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
}

.prejoin-controls .btn:disabled:hover {
    box-shadow: none;
    transform: none;
}

.prejoin-devices {
    /* Shared grid so every label column is the same width and all
       selects start/end at the same x, no matter the label text. */
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 8px 10px;
    margin-top: 16px;
}

.prejoin-device-row {
    display: contents;
}

.prejoin-device-row label {
    white-space: nowrap;
    font-size: 0.85rem;
    color: var(--primary);
}

.prejoin-device-row select {
    min-width: 0;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 0.85rem;
}

.prejoin-actions {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-top: 24px;
}

.prejoin-actions .btn {
    flex: 1;
}

.prejoin-controls .btn-secondary.active {
    background: #1a0000;
    border-color: var(--danger);
    color: var(--danger);
    box-shadow: 0 0 8px var(--danger);
}

.btn-status {
    font-size: 0.7em;
    font-weight: bold;
    letter-spacing: 0.05em;
    opacity: 0.85;
    margin-left: 2px;
}

/* Buttons */
.btn {
    padding: 14px 28px;
    border: 2px solid var(--primary);
    background: var(--darker);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Courier New', monospace;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.btn-primary {
    background: #001a00;
    color: var(--primary);
    width: 100%;
    box-shadow: var(--glow);
    text-shadow: 0 0 5px var(--primary);
}

.btn-primary:hover {
    background: #002200;
    box-shadow: var(--glow-strong);
    border-color: var(--secondary);
    color: var(--secondary);
}

.btn-primary:active {
    background: #000a00;
}

.btn-secondary {
    background: #001a1a;
    color: var(--secondary);
    border-color: var(--secondary);
    box-shadow: 0 0 5px var(--secondary);
}

.btn-secondary:hover {
    background: #002222;
    box-shadow: 0 0 10px var(--secondary);
}

.btn-danger {
    background: #1a0000;
    color: var(--danger);
    border-color: var(--danger);
    box-shadow: 0 0 5px var(--danger);
}

.btn-danger:hover {
    background: #220000;
    box-shadow: 0 0 10px var(--danger);
}

.btn-icon {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--primary);
    transition: color 0.2s;
    padding: 8px;
}

.btn-icon:hover {
    color: var(--secondary);
    text-shadow: 0 0 5px var(--secondary);
}

/* Notification Badge */
.notification-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--danger);
    color: white;
    border-radius: 10px;
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 6px;
    box-shadow: 0 0 10px var(--danger);
    animation: pulse-badge 2s infinite;
}

@keyframes pulse-badge {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }
}

/* Conference Screen */
.conference-screen {
    flex: 1;
    display: flex;
    position: relative;
    overflow: hidden;
}

/* Video Grid - Auto-scaling based on participant count */
.video-grid {
    flex: 1;
    display: grid;
    gap: 12px;
    padding: 16px;
    overflow: hidden;
    background: #000000;
    position: relative;
    /* Default: 1 participant - full size */
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    align-items: center;
    justify-items: center;
}

/* 2 participants - side by side */
.video-grid[data-participants="2"] {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
}

/* 3-4 participants - 2x2 grid */
.video-grid[data-participants="3"],
.video-grid[data-participants="4"] {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

/* 5-6 participants - 3x2 grid */
.video-grid[data-participants="5"],
.video-grid[data-participants="6"] {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

/* 7-9 participants - 3x3 grid */
.video-grid[data-participants="7"],
.video-grid[data-participants="8"],
.video-grid[data-participants="9"] {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
}

/* 10-12 participants - 4x3 grid */
.video-grid[data-participants="10"],
.video-grid[data-participants="11"],
.video-grid[data-participants="12"] {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
}

/* 13+ participants - 4x4 grid */
.video-grid[data-participants="13"],
.video-grid[data-participants="14"],
.video-grid[data-participants="15"],
.video-grid[data-participants="16"] {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
}

.video-grid .video-container {
    width: 100%;
    height: 100%;
    max-height: 100%;
}

/* Spotlight Mode */
.video-grid.spotlight-mode {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.video-grid.spotlight-mode .spotlight-active {
    flex: 1;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
}

.video-grid.spotlight-mode .spotlight-hidden {
    display: none;
}

.exit-spotlight-btn {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 100;
    padding: 12px 24px;
    font-size: 14px;
}

.video-container {
    cursor: pointer;
    transition: all 0.3s ease;
}

.video-container {
    position: relative;
    z-index: 2;
    background: var(--darker);
    border: 2px solid var(--primary);
    overflow: hidden;
    box-shadow: var(--glow);
    transition: all 0.3s ease;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.video-container:hover {
    border-color: var(--secondary);
    box-shadow: 0 0 10px var(--secondary);
}

.video-container.speaking {
    border-color: var(--secondary);
    box-shadow: 0 0 20px var(--secondary);
}

.video-container video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: contrast(1.1) brightness(0.9);
    background: #000000;
}

/* A shared screen gets its own tile, like a second participant. */
.screen-tile {
    border-color: var(--secondary);
}

/* The webcam contrast/brightness grade washes out screen text and makes small
   UI unreadable — screen content must be shown exactly as captured. */
.screen-tile video {
    filter: none;
}

.video-label {
    position: absolute;
    bottom: 16px;
    left: 16px;
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid var(--primary);
    color: var(--primary);
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 700;
    text-shadow: var(--glow);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.mod-crown {
    filter: drop-shadow(0 0 3px gold);
}

.mod-badge {
    filter: drop-shadow(0 0 3px var(--primary));
}

.video-avatar {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: var(--darker);
    border: 3px solid var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    text-shadow: var(--glow);
    box-shadow: 0 0 20px var(--shadow);
    z-index: 2;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.video-container.no-video .video-avatar {
    opacity: 1;
}

/* A peer whose transport died: last frame frozen and dimmed under a countdown
   HUD while their slot is held open for a reconnect. visibility rather than
   display keeps the tile's layout identical, so the grid doesn't twitch. */
.video-container.disconnected video {
    visibility: hidden;
}

.video-container.disconnected .freeze-frame,
.video-container.disconnected .video-avatar {
    filter: grayscale(0.6) brightness(0.35);
}

/* Controls on a held tile act on a peer who may already be gone. */
.video-container.disconnected .remote-audio-controls,
.video-container.disconnected .signal-bars {
    pointer-events: none;
    opacity: 0.25;
}

.freeze-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000000;
    z-index: 3; /* over .video-avatar (2), under the tile controls (5/10) */
}

.disconnect-hud {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 11; /* over every other tile overlay */
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: rgba(0, 0, 0, 0.82);
    border: 2px solid var(--danger);
    color: var(--danger);
    font-family: 'Courier New', monospace;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    white-space: nowrap;
    text-shadow: 0 0 8px var(--danger);
    animation: disconnect-pulse 1.2s ease-in-out infinite;
}

/* Divider keeps the state and the countdown from reading as one run-on string
   once both are uppercased and letter-spaced. */
.disconnect-hud-count {
    font-variant-numeric: tabular-nums; /* digit swaps must not resize the HUD */
    letter-spacing: 1px;
    font-weight: 400;
    opacity: 0.85;
    padding-left: 10px;
    border-left: 1px solid rgba(255, 0, 64, 0.5);
}

@keyframes disconnect-pulse {
    0%, 100% { box-shadow: 0 0 12px rgba(255, 0, 64, 0.35); }
    50%      { box-shadow: 0 0 26px rgba(255, 0, 64, 0.8); }
}

/* Respect a stated preference for less motion — keep the glow, drop the pulse. */
@media (prefers-reduced-motion: reduce) {
    .disconnect-hud {
        animation: none;
        box-shadow: 0 0 22px rgba(255, 0, 64, 0.6);
    }
}

.muted-indicator {
    position: absolute;
    bottom: 52px;
    left: 16px;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid #ff4444;
    padding: 4px 8px;
    font-size: 14px;
    z-index: 10;
    border-radius: 4px;
}

.signal-bars {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    padding: 4px 5px;
    background: rgba(0, 0, 0, 0.85);
    border: 1px solid var(--primary);
    box-shadow: 0 0 8px rgba(0, 255, 65, 0.3);
    cursor: pointer;
    z-index: 10;
}

.signal-bars .bar {
    width: 4px;
    background: #444;
    border-radius: 1px;
    transition: background 0.3s;
}

.signal-bars .bar:nth-child(1) { height: 4px; }
.signal-bars .bar:nth-child(2) { height: 8px; }
.signal-bars .bar:nth-child(3) { height: 12px; }
.signal-bars .bar:nth-child(4) { height: 16px; }

.signal-bars.signal-excellent .bar { background: var(--primary); box-shadow: 0 0 4px var(--primary); }
.signal-bars.signal-good .bar:nth-child(-n+3) { background: var(--primary); box-shadow: 0 0 4px var(--primary); }
.signal-bars.signal-fair .bar:nth-child(-n+2) { background: var(--warning); box-shadow: 0 0 4px var(--warning); }
.signal-bars.signal-poor .bar:nth-child(1) { background: var(--danger); box-shadow: 0 0 4px var(--danger); }

.signal-tooltip {
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 8px;
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid var(--primary);
    padding: 8px 12px;
    font-size: 11px;
    font-family: 'Courier New', monospace;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: 10;
}

.signal-bars:hover .signal-tooltip {
    opacity: 1;
    visibility: visible;
}

.signal-tooltip .stat-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 4px;
}

.signal-tooltip .stat-row:last-child {
    margin-bottom: 0;
}

.signal-tooltip .stat-label {
    color: #888;
}

.signal-tooltip .stat-value {
    font-weight: bold;
}

.signal-tooltip .stat-good { color: var(--primary); }
.signal-tooltip .stat-warning { color: var(--warning); }
.signal-tooltip .stat-bad { color: var(--danger); }

.remote-audio-controls {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    gap: 8px;
    align-items: center;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid var(--primary);
    padding: 8px;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 5;
}

.video-container:hover .remote-audio-controls {
    opacity: 1;
}

.remote-audio-controls button {
    background: none;
    border: 1px solid var(--primary);
    color: var(--primary);
    padding: 4px 8px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s;
}

.remote-audio-controls button:hover {
    background: var(--primary);
    color: #000;
}

.remote-audio-controls button.muted {
    color: var(--danger);
    border-color: var(--danger);
}

.remote-audio-controls input[type="range"] {
    width: 80px;
    height: 4px;
    background: var(--gray-light);
    border: 1px solid var(--primary);
    outline: none;
    -webkit-appearance: none;
}

.remote-audio-controls input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    background: var(--primary);
    cursor: pointer;
    border-radius: 50%;
    box-shadow: var(--glow);
}

.remote-audio-controls input[type="range"]::-moz-range-track {
    height: 4px;
    background: var(--gray-light);
    border: 1px solid var(--primary);
}

.remote-audio-controls input[type="range"]::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: var(--primary);
    cursor: pointer;
    border-radius: 50%;
    box-shadow: var(--glow);
    border: none;
}

.video-controls {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.3s;
}

.video-container:hover .video-controls {
    opacity: 1;
}

.control-btn {
    background: rgba(0, 0, 0, 0.9);
    border: 2px solid var(--primary);
    /* The icons are drawn in currentColor — without this a <button> falls back
       to the UA's black button text and the glyph vanishes into the dark tile. */
    color: var(--primary);
    width: 44px;
    height: 44px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 0 5px var(--primary);
}

.control-btn:hover {
    background: #001100;
    border-color: var(--secondary);
    color: var(--secondary);
    box-shadow: 0 0 10px var(--secondary);
}

.control-btn.active {
    background: #1a0000;
    border-color: var(--danger);
    color: var(--danger);
    box-shadow: 0 0 10px var(--danger);
}

/* Someone else holds the presenter slot */
.control-btn.locked,
.control-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
}

.control-btn.locked:hover,
.control-btn:disabled:hover {
    background: rgba(0, 0, 0, 0.9);
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: none;
}

.control-btn .icon {
    font-size: 20px;
    filter: drop-shadow(0 0 3px currentColor);
}

/* Options Menu */
.options-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

.options-overlay.hidden {
    display: none;
}

.options-menu {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 480px;
    max-height: 85vh;
    overflow-y: auto;
    background: var(--darker);
    border: 2px solid var(--primary);
    box-shadow: 0 0 30px rgba(0, 255, 0, 0.3);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.options-menu.hidden {
    opacity: 0;
    pointer-events: none;
}

.options-header {
    padding: 14px 20px;
    border-bottom: 2px solid var(--primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #000000;
}

.options-header h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: var(--glow);
    margin: 0;
}

.options-header .close-btn {
    background: transparent;
    border: 1px solid var(--primary);
    color: var(--primary);
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s;
}

.options-header .close-btn:hover {
    background: var(--primary);
    color: #000;
}

.options-list {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.options-item {
    background: transparent;
    border: 1px solid var(--primary);
    color: var(--primary);
    padding: 0 16px;
    height: 44px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    font-family: 'Courier New', monospace;
    transition: all 0.2s;
}

.options-item:hover {
    background: var(--primary);
    color: #000;
}

.options-item-danger {
    border-color: var(--danger);
    color: var(--danger);
}

.theme-selector {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.theme-selector label {
    color: var(--primary);
    font-weight: 600;
}

.theme-selector select {
    background: var(--darker);
    border: 1px solid var(--primary);
    color: var(--primary);
    padding: 8px 12px;
    width: 200px;
    min-width: 0;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    cursor: pointer;
    outline: none;
}

.theme-selector select:focus {
    box-shadow: var(--glow);
}

.theme-selector select option {
    background: #000;
    color: var(--primary);
}

.options-email-input {
    background: var(--darker);
    border: 1px solid var(--primary);
    color: var(--primary);
    padding: 6px 10px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    outline: none;
    flex: 1;
    min-width: 0;
}

.options-email-input:focus {
    box-shadow: var(--glow);
}

.options-email-input::placeholder {
    color: var(--primary);
    opacity: 0.4;
}

.video-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.options-item-danger:hover {
    background: var(--danger);
    color: #000;
}

.options-item-link {
    text-decoration: none;
}

.options-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.options-toggle .toggle-status {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 3px;
    background: rgba(255, 68, 68, 0.2);
    color: #ff4444;
    border: 1px solid #ff4444;
}

.options-toggle[data-enabled="true"] .toggle-status {
    background: rgba(0, 255, 0, 0.2);
    color: var(--primary);
    border-color: var(--primary);
}

.options-toggle:hover .toggle-status {
    background: transparent;
}

/* Noise Gate Settings */
.noise-gate-settings {
    background: #000000;
    border: 1px solid var(--primary);
    margin: -4px 0 8px 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.noise-gate-settings.hidden {
    display: none;
}

.noise-gate-header {
    padding: 8px 12px;
    border-bottom: 1px solid var(--primary);
    font-size: 12px;
    font-weight: 700;
    color: var(--secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.noise-gate-content {
    padding: 10px 12px;
}

.mic-device-container {
    margin-bottom: 8px;
    padding: 6px 10px;
    background: #001100;
    border: 1px solid var(--primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.mic-device-container label {
    font-size: 11px;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
}

.mic-device-container select {
    flex: 1;
    min-width: 0;
    font-size: 11px;
    font-family: 'Courier New', monospace;
    color: var(--secondary);
    background: #000;
    border: 1px solid var(--primary);
    padding: 4px 6px;
    cursor: pointer;
    outline: none;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mic-device-container select:focus {
    box-shadow: var(--glow);
}

.mic-device-container select option {
    background: #000;
    color: var(--secondary);
}

.mic-level-container {
    margin-bottom: 10px;
}

.mic-level-container label {
    display: block;
    font-size: 11px;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.mic-level-bar {
    height: 18px;
    background: #001100;
    border: 1px solid var(--primary);
    position: relative;
    overflow: hidden;
}

.mic-level-indicator {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: var(--danger);
    transition: width 0.05s ease-out;
    box-shadow: 0 0 10px var(--danger), 0 0 20px var(--danger);
}

.gate-threshold-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--danger);
    box-shadow: 0 0 8px var(--danger);
    left: 5%;
    z-index: 2;
}

.gate-threshold-container {
    margin-bottom: 8px;
}

.gate-threshold-container label {
    display: block;
    font-size: 11px;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.gate-threshold-container label span {
    color: var(--secondary);
    font-weight: 700;
}

.gate-slider {
    width: 100%;
    height: 8px;
    background: #001100;
    border: 1px solid var(--primary);
    outline: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.gate-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: var(--primary);
    cursor: pointer;
    border-radius: 0;
    box-shadow: var(--glow);
}

.gate-slider::-moz-range-track {
    height: 8px;
    background: #001100;
    border: 1px solid var(--primary);
}

.gate-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--primary);
    cursor: pointer;
    border-radius: 0;
    box-shadow: var(--glow);
    border: none;
}

.gate-threshold-container small {
    display: block;
    margin-top: 6px;
    font-size: 10px;
    color: #666;
}

.mic-active-warning {
    padding: 8px 12px;
    background: rgba(255, 0, 64, 0.2);
    border-top: 1px solid var(--danger);
    color: var(--danger);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    animation: warningPulse 1s ease-in-out infinite;
}

.mic-active-warning.hidden {
    display: none;
}

@keyframes warningPulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* Chat Sidebar */
.chat-sidebar {
    width: 320px;
    background: var(--darker);
    display: flex;
    flex-direction: column;
    box-shadow: -2px 0 0 var(--primary);
    border-left: 2px solid var(--primary);
}

.chat-sidebar.hidden {
    display: none;
}

.chat-header {
    padding: 12px 16px;
    border-bottom: 2px solid var(--primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #000000;
}

.chat-header h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: var(--glow);
    cursor: pointer;
    user-select: none;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #000000;
}

.chat-messages::-webkit-scrollbar {
    width: 8px;
}

.chat-messages::-webkit-scrollbar-track {
    background: var(--darker);
}

.chat-messages::-webkit-scrollbar-thumb {
    background: var(--primary);
    border: 1px solid var(--primary);
}

.chat-messages::-webkit-scrollbar-thumb:hover {
    background: var(--secondary);
}

.chat-message {
    background: var(--darker);
    border: 1px solid var(--primary);
    padding: 8px 10px;
    word-wrap: break-word;
    max-width: 100%;
    animation: fadeIn 0.3s ease;
    font-family: 'Courier New', monospace;
}

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

.chat-message.own {
    background: var(--own-bg, #001a00);
    color: var(--primary);
    align-self: flex-end;
    border-color: var(--primary);
    border-left: 3px solid var(--primary);
    box-shadow: 0 0 5px var(--shadow);
}


.chat-message.irc {
    background: #1a1a00;
    border-color: var(--warning);
    color: var(--warning);
    box-shadow: 0 0 5px rgba(255, 255, 0, 0.3);
}

.load-more-btn {
    background: var(--darker);
    border: 1px dashed var(--primary);
    color: var(--primary);
    font-family: 'Courier New', monospace;
    font-size: var(--chat-font-size, 13px);
    padding: 6px 12px;
    cursor: pointer;
    width: 100%;
    text-align: center;
    margin-bottom: 8px;
    opacity: 0.7;
    transition: opacity 0.2s, background 0.2s;
}

.load-more-btn:hover {
    opacity: 1;
    background: var(--light);
}

.chat-message .username {
    font-weight: 700;
    margin-bottom: 2px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.chat-message .text {
    font-size: var(--chat-font-size, 13px);
    line-height: 1.4;
}

.chat-message .timestamp {
    font-size: 11px;
    opacity: 0.7;
    margin-top: 4px;
}

.chat-input-container {
    padding: 10px;
    border-top: 2px solid var(--primary);
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #000000;
}

.chat-input-row {
    display: flex;
    gap: 8px;
}

.chat-input-container input {
    flex: 1;
    padding: 8px 10px;
    border: 2px solid var(--primary);
    background: var(--darker);
    color: var(--primary);
    font-size: 13px;
    font-family: 'Courier New', monospace;
    transition: all 0.3s;
    min-width: 0;
}

.chat-input-container .btn {
    padding: 8px 12px;
    font-size: 12px;
    width: auto;
    flex-shrink: 0;
}

.chat-input-container input:focus {
    outline: none;
    border-color: var(--secondary);
    box-shadow: var(--glow);
    background: #000000;
}

.chat-input-container input::placeholder {
    color: #003300;
}

.chat-image-preview {
    position: relative;
    display: inline-flex;
    align-items: flex-start;
    border: 1px solid var(--primary);
    background: var(--darker);
    padding: 4px;
}

.chat-image-preview.hidden {
    display: none;
}

.chat-image-preview img {
    max-height: 80px;
    max-width: 100%;
    object-fit: contain;
    display: block;
}

.chat-image-cancel {
    position: absolute;
    top: 2px;
    right: 2px;
    background: rgba(0,0,0,0.7);
    border: 1px solid var(--primary);
    color: var(--primary);
    font-size: 10px;
    line-height: 1;
    padding: 2px 4px;
    cursor: pointer;
}

.chat-image-cancel:hover {
    background: var(--primary);
    color: #000;
}

.chat-message .chat-img {
    max-width: 100%;
    max-height: 240px;
    object-fit: contain;
    display: block;
    margin-top: 6px;
    cursor: zoom-in;
    border: 1px solid var(--primary);
}

.irc-status {
    padding: 6px 10px;
    background: #001a00;
    border-top: 2px solid var(--primary);
    font-size: 11px;
    font-weight: 700;
    color: var(--primary);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 0 5px var(--primary);
}

/* Bottom Controls */
.bottom-controls {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 8px;
    z-index: 101;
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
}

.bottom-controls .btn {
    padding: 8px 16px;
    font-size: 13px;
    border-width: 1px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.waffle-icon {
    flex-shrink: 0;
}

/* Status Bar */
.status-bar {
    background: var(--darker);
    color: var(--primary);
    /* The decorative body::before overlay (CRT scanlines, or the tron grid, which
       is at full strength along the bottom edge) is fixed at z-index 1 and would
       otherwise paint straight over the footer. Lift the bar above it, alongside
       the video tiles at z-index 2. */
    position: relative;
    z-index: 2;
    padding: 10px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    font-weight: 700;
    border-top: 2px solid var(--primary);
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 5px var(--primary);
}

.status-bar.connected {
    background: #001a00;
    color: var(--secondary);
    border-top-color: var(--secondary);
    text-shadow: 0 0 5px var(--secondary);
}

.status-bar.error {
    background: #1a0000;
    color: var(--danger);
    border-top-color: var(--danger);
    text-shadow: 0 0 5px var(--danger);
}

/* Which transport is actually carrying signaling right now. The status bar is
   a 3-child flex with space-between, so margin-right:auto keeps this tucked
   beside the status text instead of floating to the centre. */
.transport-badge {
    margin-right: auto;
    margin-left: 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    opacity: 0.75;
    text-shadow: none;
    border: 1px solid currentColor;
    border-radius: 3px;
    padding: 1px 6px;
}

.transport-badge:empty {
    border: 0;
    padding: 0;
    margin-left: 0;
}

.transport-badge[data-transport="quic"] {
    color: var(--secondary);
    opacity: 1;
}

.status-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    color: var(--primary);
    opacity: 0.7;
}

.powered-by {
    font-weight: 600;
    letter-spacing: 1px;
}

.app-version {
    opacity: 0.5;
    letter-spacing: 1px;
}

.bug-report-link {
    text-decoration: none;
}

#defconBtn.active {
    background: var(--danger, #dc3545);
    border-color: var(--danger, #dc3545);
    color: #fff;
}

#lockRoomBtn.active {
    background: var(--warning, #e6a817);
    border-color: var(--warning, #e6a817);
    color: #000;
}

.github-link {
    display: flex;
    align-items: center;
    color: var(--primary);
    text-decoration: none;
    transition: all 0.3s ease;
    filter: drop-shadow(0 0 3px var(--primary));
}

.github-link:hover {
    color: var(--secondary);
    filter: drop-shadow(0 0 5px var(--secondary));
    transform: scale(1.1);
}

.github-link svg {
    width: 20px;
    height: 20px;
}

/* ── Touch devices: always show controls (no hover on touchscreen) ── */
@media (hover: none) {
    .video-controls {
        opacity: 1;
        background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        justify-content: center;
        gap: 12px;
        padding: 8px 0;
    }

    .remote-audio-controls {
        opacity: 1;
        /* Hide volume slider on touch — just keep mute button */
    }

    .remote-audio-controls input[type="range"] {
        display: none;
    }
}

/* ── Tablet and below (768px) ── */
@media (max-width: 768px) {
    /* In-call: pin local media controls as a fixed bottom bar */
    #localContainer .video-controls {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 200;
        border-radius: 0;
        top: auto;
        opacity: 1;
        background: rgba(0, 0, 0, 0.92);
        border-top: 1px solid rgba(0, 255, 65, 0.25);
        padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
        gap: 24px;
        justify-content: center;
    }

    #localContainer .video-controls .control-btn {
        width: 54px;
        height: 54px;
    }

    #localContainer .video-controls .control-btn .icon {
        font-size: 24px;
    }

    /* Push video grid up so it doesn't hide behind the fixed bar */
    .conference-screen {
        padding-bottom: 80px;
    }

    .header {
        padding: 10px 12px;
        flex-wrap: wrap;
        justify-content: space-between; /* title left, controls right */
        gap: 4px;
    }

    .logo-icon {
        font-size: 22px;
    }

    /* Room info: second row, centred */
    .room-info {
        position: static;
        transform: none;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
        font-size: 11px;
        order: 3;
        width: 100%;
        justify-content: center;
    }

    .room-info > span,
    .room-info .btn {
        padding: 4px 10px;
        font-size: 11px;
        border-width: 1px;
    }

    /* Controls: flow naturally to the right of h1 */
    .bottom-controls {
        position: static;
        transform: none;
        order: 2;
        gap: 6px;
    }

    .bottom-controls .btn {
        padding: 6px 10px;
        font-size: 12px;
        border-width: 1px;
    }

    /* Fix iOS auto-zoom: inputs must be >= 16px on mobile */
    .form-group input,
    .form-group select,
    input[type="text"],
    input[type="password"],
    input[type="search"],
    select {
        font-size: 16px !important;
    }

    /* Landing page: stack to single column on tablet, form first */
    .landing-layout {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .landing-info {
        gap: 16px;
        order: 2;
    }

    .landing-form {
        order: 1;
        padding: 20px 20px;
    }

    .header-banner {
        max-width: 190px;
    }

    .landing-features {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .video-grid {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 8px;
    }

    /* Chat: full-width overlay on phones */
    .chat-sidebar {
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        width: 100%;
        max-width: 360px;
        z-index: 100;
    }

    /* Options menu: fit within screen */
    .options-menu {
        width: min(480px, calc(100vw - 16px));
        max-height: 90vh;
    }

    /* Status bar: single line, hide branding to save space */
    .status-bar {
        flex-direction: row;
        padding: 6px 12px;
        font-size: 11px;
    }

    .status-footer {
        display: none;
    }
}

/* ── Small phones (480px) ── */
@media (max-width: 480px) {
    /* Room info: hide participant count, keep room name only */
    .room-info {
        gap: 4px;
    }

    .room-info #participantCount {
        display: none;
    }

    .room-info > span,
    .room-info .btn {
        padding: 3px 8px;
        font-size: 10px;
    }

    /* Chat: fully full-width */
    .chat-sidebar {
        max-width: 100%;
    }

    /* Options menu: full width with margin */
    .options-menu {
        width: calc(100vw - 16px);
        max-height: 92vh;
    }

    .join-screen {
        padding: 16px 12px;
        align-items: flex-start;
    }

    /* Landing: form only — hide features and tagline on phones */
    .landing-layout {
        gap: 12px;
    }

    .landing-features,
    .landing-tagline {
        display: none;
    }

    .landing-info {
        gap: 8px;
    }

    .header-banner {
        max-width: 155px;
    }

    .landing-form {
        padding: 16px 14px;
    }

    .landing-form h2 {
        font-size: 16px;
        margin-bottom: 16px;
    }

    /* Prejoin: scrollable, compact preview, bigger tap targets */
    .prejoin-screen {
        align-items: flex-start;
        overflow-y: auto;
        padding: 12px;
    }

    .prejoin-card {
        padding: 14px 12px;
        margin: 0;
    }

    .prejoin-card h2 {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .prejoin-preview {
        aspect-ratio: unset;
        height: 170px;
        margin: 10px 0;
    }

    .prejoin-controls {
        gap: 8px;
        margin: 10px 0;
    }

    .prejoin-controls .btn {
        padding: 12px 8px;
        font-size: 13px;
    }

    .prejoin-device-row label {
        font-size: 13px;
    }

    .prejoin-device-row select {
        font-size: 15px;
        padding: 8px 6px;
    }

    .prejoin-actions {
        margin-top: 16px;
        gap: 10px;
    }

    .prejoin-actions .btn {
        padding: 14px;
        font-size: 15px;
    }

    /* Tighter video grid */
    .video-grid {
        gap: 6px;
        padding: 6px;
    }

    /* Control buttons slightly smaller on very small screens */
    .control-btn {
        width: 38px;
        height: 38px;
    }
}


/* Scrollbar styling for Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--primary) var(--darker);
}

/* Loading animation */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.loading {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Stream volume controls */
#streamVolumeControls {
    position: absolute;
    bottom: 40px;
    left: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.85);
    border: 1px solid var(--primary);
    border-radius: 6px;
    z-index: 10;
}

#streamVolumeControls span:first-child {
    color: var(--primary);
    font-size: 14px;
}

#streamVolumeSlider {
    flex: 1;
    min-width: 100px;
    height: 6px;
    background: var(--gray-light);
    border: 1px solid var(--primary);
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none;
}

#streamVolumeSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: var(--primary);
    cursor: pointer;
    border-radius: 50%;
    box-shadow: var(--glow);
}

#streamVolumeSlider::-moz-range-track {
    height: 6px;
    background: var(--gray-light);
    border: 1px solid var(--primary);
    border-radius: 3px;
}

#streamVolumeSlider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--primary);
    cursor: pointer;
    border-radius: 50%;
    box-shadow: var(--glow);
    border: none;
}

#streamVolumeValue {
    color: var(--primary);
    font-size: 14px;
    min-width: 40px;
    text-align: right;
}

/* Theme: Corporate (Teams) */
[data-theme="corporate"] {
    --primary: #6264a7;
    --primary-dark: #464775;
    --primary-glow: #6264a7;
    --secondary: #605e5c;
    --danger: #c4314b;
    --warning: #d97706;
    --dark: #f3f2f1;
    --darker: #ffffff;
    --light: #fafafa;
    --gray: #252424;
    --gray-light: #e1dfdd;
    --border: #e1dfdd;
    --shadow: rgba(98, 100, 167, 0.12);
    --shadow-lg: rgba(98, 100, 167, 0.2);
    --glow: none;
    --glow-strong: none;
    --chat-font-size: 14px;
    --own-bg: #e8e8f4;
    --own-highlighted-bg: #dcdce8;
    --logo-ghost-a: #00b7c3;
    --logo-ghost-b: #c4314b;
}

[data-theme="corporate"] body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--dark);
    color: var(--gray);
}

[data-theme="corporate"] * {
    text-shadow: none !important;
}

[data-theme="corporate"] body::before {
    display: none;
}

[data-theme="corporate"] .header {
    background: #ffffff;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

[data-theme="corporate"] .btn {
    border-radius: 4px;
}

[data-theme="corporate"] .btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: none;
}

[data-theme="corporate"] .btn-primary:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    box-shadow: none;
}

[data-theme="corporate"] .video-container {
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    background: #edebe9;
}

[data-theme="corporate"] .video-container:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(98,100,167,0.2);
}

[data-theme="corporate"] .video-container.speaking {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary);
}

[data-theme="corporate"] .video-container video {
    background: #edebe9;
    filter: none;
}

[data-theme="corporate"] .video-avatar {
    background: #e8e8f4;
    border-color: var(--primary);
    box-shadow: none;
}

[data-theme="corporate"] .video-label {
    background: rgba(255, 255, 255, 0.92);
    border-color: var(--border);
    color: #252424;
    box-shadow: none;
}

[data-theme="corporate"] .muted-indicator {
    background: rgba(255, 255, 255, 0.92);
    border-color: var(--danger);
    color: var(--danger);
}

[data-theme="corporate"] .signal-bars {
    background: rgba(255, 255, 255, 0.85);
    border-color: var(--border);
    box-shadow: none;
}

[data-theme="corporate"] .signal-bars .bar {
    background: #c8c6c4;
}

[data-theme="corporate"] .signal-tooltip {
    background: #ffffff;
    border: 1px solid var(--border);
    color: #252424;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

[data-theme="corporate"] .chat-sidebar {
    background: #ffffff;
    border-left: 1px solid var(--border);
}

[data-theme="corporate"] .chat-messages {
    background: #ffffff;
}

[data-theme="corporate"] .chat-messages::-webkit-scrollbar-track {
    background: #f3f2f1;
}

[data-theme="corporate"] .chat-messages::-webkit-scrollbar-thumb {
    background: #c8c6c4;
    border-color: #c8c6c4;
}

[data-theme="corporate"] .chat-message {
    background: #faf9f8;
    border: 1px solid var(--border);
    color: #252424;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

[data-theme="corporate"] .chat-message .username {
    color: var(--primary);
    text-transform: none;
    letter-spacing: 0;
}

[data-theme="corporate"] .chat-message.own {
    background: var(--own-bg);
    border-color: #c9c8e0;
    color: #252424;
    box-shadow: none;
}

[data-theme="corporate"] .chat-message.irc {
    background: #fff9e6;
    border-color: #d97706;
    color: #7a5200;
    box-shadow: none;
}

[data-theme="corporate"] .load-more-btn {
    background: #f3f2f1;
    border-color: var(--border);
    color: var(--primary);
    font-family: 'Segoe UI', system-ui, sans-serif;
}

[data-theme="corporate"] .load-more-btn:hover {
    background: #edebe9;
}

[data-theme="corporate"] .chat-input-container {
    background: #ffffff;
    border-top: 1px solid var(--border);
}

[data-theme="corporate"] .chat-input-container input {
    background: #f3f2f1;
    color: #252424;
    border: 1px solid var(--border);
    font-family: 'Segoe UI', system-ui, sans-serif;
}

[data-theme="corporate"] .chat-input-container input:focus {
    background: #ffffff;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(98, 100, 167, 0.2);
}

[data-theme="corporate"] .chat-input-container input::placeholder {
    color: #a19f9d;
}

[data-theme="corporate"] .status-bar {
    background: #ffffff;
    border-top: 1px solid var(--border);
}

/* Corporate: buttons */
[data-theme="corporate"] .btn {
    background: #ffffff;
    border: 1px solid var(--border);
    color: #252424;
    font-family: 'Segoe UI', system-ui, sans-serif;
    text-transform: none;
    letter-spacing: 0;
    box-shadow: none;
}

[data-theme="corporate"] .btn:hover {
    background: #f3f2f1;
    border-color: var(--primary);
    box-shadow: none;
}

[data-theme="corporate"] .btn-secondary {
    background: #ffffff;
    color: #252424;
    border-color: var(--border);
    box-shadow: none;
}

[data-theme="corporate"] .btn-secondary:hover {
    background: #f3f2f1;
    border-color: var(--primary);
    box-shadow: none;
}

[data-theme="corporate"] .btn-danger {
    background: #fdf3f4;
    color: var(--danger);
    border-color: var(--danger);
    box-shadow: none;
}

[data-theme="corporate"] .btn-danger:hover {
    background: var(--danger);
    color: #ffffff;
    box-shadow: none;
}

[data-theme="corporate"] .prejoin-controls .btn-secondary.active {
    background: #fdf3f4;
    border-color: var(--danger);
    color: var(--danger);
    box-shadow: none;
}

[data-theme="corporate"] .room-info .btn {
    background: #f3f2f1;
    border: 1px solid var(--border);
    font-family: 'Segoe UI', system-ui, sans-serif;
    text-transform: none;
    letter-spacing: 0;
    color: #252424;
    box-shadow: none;
}

/* Corporate: chat header */
[data-theme="corporate"] .chat-header {
    background: #ffffff;
    border-bottom: 1px solid var(--border);
}

[data-theme="corporate"] .chat-header h3 {
    text-transform: none;
    letter-spacing: 0;
    color: #252424;
    font-weight: 600;
}

/* Corporate: noise gate settings */
[data-theme="corporate"] .noise-gate-settings {
    background: #fafafa;
    border: 1px solid var(--border);
}

[data-theme="corporate"] .noise-gate-header {
    border-bottom: 1px solid var(--border);
    color: #605e5c;
    text-transform: none;
    letter-spacing: 0;
}

[data-theme="corporate"] .mic-device-container {
    background: #f3f2f1;
    border: 1px solid var(--border);
}

[data-theme="corporate"] .mic-device-container label {
    color: #605e5c;
    text-transform: none;
    letter-spacing: 0;
}

[data-theme="corporate"] .mic-device-container select {
    background: #ffffff;
    color: #252424;
    border: 1px solid var(--border);
    font-family: 'Segoe UI', system-ui, sans-serif;
}

[data-theme="corporate"] .mic-device-container select option {
    background: #ffffff;
    color: #252424;
}

[data-theme="corporate"] .mic-level-container label,
[data-theme="corporate"] .gate-threshold-container label {
    color: #605e5c;
    text-transform: none;
    letter-spacing: 0;
}

[data-theme="corporate"] .mic-level-bar {
    background: #f3f2f1;
    border: 1px solid var(--border);
}

[data-theme="corporate"] .gate-slider {
    background: #e1dfdd;
    border: 1px solid var(--border);
}

[data-theme="corporate"] .gate-slider::-webkit-slider-thumb {
    box-shadow: none;
}

[data-theme="corporate"] .gate-slider::-moz-range-thumb {
    box-shadow: none;
}

[data-theme="corporate"] .gate-threshold-line {
    background: var(--primary);
    box-shadow: none;
}

/* Corporate: options panel */
[data-theme="corporate"] .theme-selector select {
    background: #ffffff;
    border: 1px solid var(--border);
    color: #252424;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

[data-theme="corporate"] .theme-selector select option {
    background: #ffffff;
    color: #252424;
}

/* Corporate: form inputs (join/prejoin screens) */
[data-theme="corporate"] .form-group input,
[data-theme="corporate"] .form-group select,
[data-theme="corporate"] input[type="text"],
[data-theme="corporate"] input[type="password"],
[data-theme="corporate"] input[type="search"],
[data-theme="corporate"] select {
    background: #f8f8f8;
    color: #252424;
    border: 1px solid var(--border);
    font-family: 'Segoe UI', system-ui, sans-serif;
}

[data-theme="corporate"] .form-group input:focus,
[data-theme="corporate"] input[type="text"]:focus,
[data-theme="corporate"] input[type="password"]:focus {
    background: #ffffff;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(98, 100, 167, 0.2);
}

[data-theme="corporate"] .form-group input::placeholder {
    color: #a19f9d;
}

/* Corporate: join/prejoin screen background */
[data-theme="corporate"] .join-screen,
[data-theme="corporate"] .prejoin-screen {
    background: #f3f2f1;
}

[data-theme="corporate"] .landing-form {
    background: #ffffff;
    border-color: var(--border);
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

[data-theme="corporate"] .landing-feature {
    border-color: var(--border);
    background: #ffffff;
}

[data-theme="corporate"] .landing-feature:hover {
    border-color: var(--primary);
    background: #f0f4ff;
}

[data-theme="corporate"] .prejoin-preview {
    background: #edebe9;
    border: 1px solid var(--border);
    box-shadow: none;
}

/* Corporate: video grid background */
[data-theme="corporate"] .video-grid {
    background: #f3f2f1;
}

/* Corporate: options menu */
[data-theme="corporate"] .options-menu {
    background: #ffffff;
    border: 1px solid var(--border);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

[data-theme="corporate"] .options-header {
    background: #ffffff !important;
    border-bottom: 1px solid var(--border) !important;
}

[data-theme="corporate"] .options-header h3 {
    text-transform: none;
    letter-spacing: 0;
    color: #252424;
}

/* Corporate: control bar buttons */
[data-theme="corporate"] .control-btn {
    background: #ffffff;
    border: 1px solid var(--border);
    color: #252424;
    box-shadow: none;
}

[data-theme="corporate"] .control-btn:hover {
    background: #f3f2f1;
    border-color: var(--primary);
    color: #252424;
    box-shadow: none;
}

[data-theme="corporate"] .control-btn.active {
    background: #fdf3f4;
    border-color: var(--danger);
    color: var(--danger);
    box-shadow: none;
}

/* Corporate: status bar states */
[data-theme="corporate"] .status-bar {
    color: #605e5c;
    text-transform: none;
    letter-spacing: 0;
    text-shadow: none;
    font-weight: 400;
}

[data-theme="corporate"] .status-bar.connected {
    background: #ffffff;
    color: #107c10;
    border-top-color: var(--border);
    text-shadow: none;
}

[data-theme="corporate"] .status-bar.error {
    background: #fdf3f4;
    color: var(--danger);
    border-top-color: var(--danger);
    text-shadow: none;
}

/* video-hidden: hide the video feed, show avatar */
.video-container.video-hidden video {
    visibility: hidden;
}

.video-container.video-hidden .video-avatar {
    opacity: 1;
}

/* Hot mic warning toast */
.hotmic-warning {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1100;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #1a0000;
    border: 2px solid var(--danger, #ff0040);
    box-shadow: 0 0 20px rgba(255, 0, 64, 0.5), 0 4px 16px rgba(0,0,0,0.6);
    padding: 10px 14px;
    max-width: 520px;
    width: calc(100vw - 32px);
    animation: hotmic-pulse 1.5s ease-in-out infinite;
}

.hotmic-warning.hidden {
    display: none;
}

@keyframes hotmic-pulse {
    0%, 100% { box-shadow: 0 0 20px rgba(255, 0, 64, 0.5), 0 4px 16px rgba(0,0,0,0.6); }
    50%       { box-shadow: 0 0 35px rgba(255, 0, 64, 0.85), 0 4px 16px rgba(0,0,0,0.6); }
}

/* Server restart countdown — deliberately loud and theme-independent: this is the
   one banner that must be unmissable no matter which palette is active. */
.restart-warning {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 16px;
    background: #c00020;
    color: #fff;
    border-bottom: 2px solid #ff5577;
    font-size: 15px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    flex-wrap: wrap;
    animation: restart-flash 1s steps(1, end) infinite;
}

.restart-warning.hidden {
    display: none;
}

.restart-warning strong {
    font-weight: 700;
}

.restart-warning #restartCountdown {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.restart-sub {
    text-transform: none;
    letter-spacing: 0;
    font-size: 13px;
    opacity: 0.9;
}

@keyframes restart-flash {
    0%, 49%   { background: #c00020; box-shadow: 0 0 24px rgba(255, 0, 64, 0.6); }
    50%, 100% { background: #ff0033; box-shadow: 0 0 44px rgba(255, 0, 64, 0.95); }
}

/* Respect a stated preference for less motion — stay red, stop the strobe. */
@media (prefers-reduced-motion: reduce) {
    .restart-warning {
        animation: none;
        background: #ff0033;
    }
}

.hotmic-icon {
    font-size: 22px;
    flex-shrink: 0;
}

.hotmic-text {
    flex: 1;
    font-size: 13px;
    color: #ffcccc;
    line-height: 1.5;
}

.hotmic-text strong {
    color: #ff6680;
    display: block;
    margin-bottom: 2px;
}

.hotmic-action {
    display: inline-block;
    margin-top: 5px;
    padding: 3px 10px;
    background: var(--danger, #ff0040);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 12px;
    font-family: inherit;
}

.hotmic-action:hover {
    background: #ff3366;
}

.hotmic-dismiss {
    background: none;
    border: none;
    color: #ff6680;
    cursor: pointer;
    font-size: 16px;
    padding: 2px 4px;
    flex-shrink: 0;
    opacity: 0.7;
}

.hotmic-dismiss:hover {
    opacity: 1;
}

/* Changelog modal */
#changelogBtn {
    cursor: pointer;
    text-decoration: underline dotted;
}

#changelogBtn:hover {
    color: var(--secondary);
}

#changelogModal {
    width: 480px;
    max-width: 92vw;
}

.changelog-body {
    padding: 4px 0 12px;
    overflow-y: auto;
    max-height: calc(85vh - 60px);
}

.changelog-version {
    padding: 14px 20px 10px;
    border-bottom: 1px solid var(--gray-light);
}

.changelog-version:last-child {
    border-bottom: none;
}

.changelog-version-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 8px;
}

.changelog-tag {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary);
    text-shadow: var(--glow);
}

.changelog-date {
    font-size: 11px;
    color: var(--primary);
    opacity: 0.5;
}

.changelog-version ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.changelog-version ul li {
    font-size: 12px;
    color: var(--primary);
    opacity: 0.85;
    padding-left: 12px;
    position: relative;
    line-height: 1.5;
}

.changelog-version ul li::before {
    content: '—';
    position: absolute;
    left: 0;
    opacity: 0.4;
}

/* Icons
   Stroke SVGs that inherit colour and size from whatever holds them, so a
   button's existing font-size and color rules keep working unchanged. */
.ic {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.125em;
    flex: none;
}

.ic-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1em;
    flex: none;
}

/* Options rows line their labels up in a column */
.options-item .ic-wrap,
.options-item label .ic-wrap {
    margin-right: 2px;
}

/* Tile controls and the local control bar size their icons off the button */
.remote-audio-controls button .ic {
    width: 1.1em;
    height: 1.1em;
    vertical-align: middle;
}

.control-btn .icon .ic {
    width: 22px;
    height: 22px;
}

.lf-icon .ic {
    width: 1.4em;
    height: 1.4em;
}

/* Utility classes */
.hidden {
    display: none !important;
}

.flex {
    display: flex;
}

.gap-2 {
    gap: 8px;
}

.gap-4 {
    gap: 16px;
}

/* E2EE */
.e2ee-banner {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid var(--primary);
    color: var(--primary);
    text-shadow: var(--glow);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    padding: 4px 12px;
    border-radius: 12px;
    pointer-events: none;
    white-space: nowrap;
}

.e2ee-status-indicator {
    font-size: 12px;
    margin-left: 4px;
    opacity: 0.5;
    vertical-align: middle;
    transition: opacity 0.3s;
}
.e2ee-status-indicator.e2ee-active {
    opacity: 1;
    filter: drop-shadow(0 0 4px var(--primary));
}
.e2ee-lock-badge {
    font-size: 10px;
    margin-left: 4px;
    opacity: 0.75;
}
.chat-message.e2ee-message {
    border-left: 2px solid var(--secondary);
    padding-left: 6px;
}
.chat-message.e2ee-failed {
    opacity: 0.55;
    font-style: italic;
    border-left: 2px solid var(--danger);
    padding-left: 6px;
}

/* ============================================================
   Theme: Tron (The Grid)
   Blue-black void, lightcycle cyan, white-hot cores.
   Orange is reserved for danger/derezzed states.
   ============================================================ */
[data-theme="tron"] {
    --primary: #00e5ff;
    --primary-dark: #00a8bd;
    --primary-glow: #00e5ff;
    --secondary: #d8f7ff;
    --danger: #ff6a00;
    --warning: #ffb300;
    --dark: #030910;
    --darker: #050e18;
    --light: #08131f;
    --gray: #9fdcea;
    --gray-light: #0e2a3c;
    --border: #14455c;
    --shadow: rgba(0, 229, 255, 0.25);
    --shadow-lg: rgba(0, 229, 255, 0.45);
    --glow: 0 0 6px rgba(0, 229, 255, 0.55), 0 0 14px rgba(0, 229, 255, 0.25);
    --glow-strong: 0 0 8px rgba(0, 229, 255, 0.8), 0 0 20px rgba(0, 229, 255, 0.45), 0 0 34px rgba(0, 229, 255, 0.2);
    --chat-font-size: 13px;
    --own-bg: #06202c;
    --own-highlighted-bg: #0a2f3f;
    --logo-ghost-a: #ff6a00;  /* the Grid's own cyan/orange opposition; --secondary is near-white and would just blur */
    --logo-ghost-b: #0a58ff;
}

[data-theme="tron"] body {
    font-family: 'Bahnschrift', 'Segoe UI', 'Helvetica Neue', sans-serif;
    background:
        radial-gradient(ellipse 120% 45% at 50% 0%, rgba(0, 90, 120, 0.35) 0%, transparent 65%) fixed,
        radial-gradient(ellipse 120% 60% at 50% 100%, #071a2b 0%, #040d17 45%, #030910 100%) fixed;
    color: var(--gray);
}

[data-theme="tron"] * {
    text-shadow: none !important;
}

/* Grid floor and sky instead of CRT scanlines: bright at both edges, faded mid-screen */
[data-theme="tron"] body::before {
    background:
        repeating-linear-gradient(90deg, rgba(0, 229, 255, 0.22) 0 1px, transparent 1px 48px),
        repeating-linear-gradient(0deg, rgba(0, 229, 255, 0.18) 0 1px, transparent 1px 48px);
    -webkit-mask-image: linear-gradient(to top,
        rgba(0,0,0,1) 0%, rgba(0,0,0,0.35) 25%, rgba(0,0,0,0.08) 45%,
        rgba(0,0,0,0.08) 60%, rgba(0,0,0,0.3) 80%, rgba(0,0,0,0.9) 100%);
    mask-image: linear-gradient(to top,
        rgba(0,0,0,1) 0%, rgba(0,0,0,0.35) 25%, rgba(0,0,0,0.08) 45%,
        rgba(0,0,0,0.08) 60%, rgba(0,0,0,0.3) 80%, rgba(0,0,0,0.9) 100%);
    opacity: 1;
    animation: tron-grid-flow 3.2s linear infinite;
}

/* Gridlines flow diagonally — flying across the Grid.
   Mask stays put, so the bright floor/sky zones don't drift. */
@keyframes tron-grid-flow {
    0%   { background-position: 0 0, 0 0; }
    100% { background-position: 48px 48px, 48px 48px; }
}

/* Header: glass slab with a lightcycle ribbon running its base edge */
/* No backdrop-filter here: #optionsMenu is a fixed-position child of .header,
   and backdrop-filter would make .header its containing block (menu mis-centers) */
[data-theme="tron"] .header {
    background: rgba(5, 14, 24, 0.92);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 8px 32px -12px rgba(0, 229, 255, 0.25);
}

[data-theme="tron"] .header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(0, 229, 255, 0.9) 42%,
        #eafcff 50%,
        rgba(0, 229, 255, 0.9) 58%,
        transparent 100%);
    background-size: 220% 100%;
    animation: tron-ribbon 7s linear infinite;
    pointer-events: none;
}

@keyframes tron-ribbon {
    0%   { background-position: 200% 0; }
    100% { background-position: -100% 0; }
}

/* Buttons: hard geometry, hairline circuits, base edge lights on hover */
[data-theme="tron"] .btn {
    font-family: 'Bahnschrift', 'Segoe UI', sans-serif;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: rgba(8, 19, 31, 0.85);
    border: 1px solid var(--border);
    color: #bfeefb;
    box-shadow: none;
    transition: all 0.2s ease;
}

[data-theme="tron"] .btn:hover {
    border-color: var(--primary);
    color: var(--secondary);
    box-shadow: inset 0 -2px 0 var(--primary), 0 8px 22px -10px rgba(0, 229, 255, 0.7);
}

[data-theme="tron"] .btn-primary {
    background: linear-gradient(180deg, #0a2436 0%, #06141f 100%);
    border-color: #1d90ad;
    color: var(--secondary);
    box-shadow: inset 0 -2px 0 var(--primary);
}

[data-theme="tron"] .btn-primary:hover {
    background: linear-gradient(180deg, #0d3348 0%, #081b29 100%);
    border-color: var(--primary);
    box-shadow: inset 0 -2px 0 var(--primary), 0 10px 28px -10px rgba(0, 229, 255, 0.8);
}

[data-theme="tron"] .btn-secondary {
    background: rgba(8, 19, 31, 0.85);
    border-color: var(--border);
    color: #bfeefb;
    box-shadow: none;
}

[data-theme="tron"] .btn-secondary:hover {
    background: rgba(13, 33, 49, 0.9);
    border-color: var(--primary);
    box-shadow: inset 0 -2px 0 var(--primary);
}

[data-theme="tron"] .btn-danger,
[data-theme="tron"] .prejoin-controls .btn-secondary.active {
    background: rgba(31, 13, 3, 0.85);
    border-color: var(--danger);
    color: #ffb380;
    box-shadow: none;
}

[data-theme="tron"] .btn-danger:hover {
    background: rgba(51, 21, 4, 0.9);
    box-shadow: inset 0 -2px 0 var(--danger), 0 8px 22px -10px rgba(255, 106, 0, 0.7);
}

/* Video tiles: black glass, lit hairline, identity-disc speaking ring */
[data-theme="tron"] .video-container {
    background: #02070c;
    border: 1px solid var(--border);
    box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.9);
}

[data-theme="tron"] .video-container:hover {
    border-color: rgba(0, 229, 255, 0.6);
    box-shadow: 0 0 18px -4px rgba(0, 229, 255, 0.4);
}

[data-theme="tron"] .video-container.speaking {
    border-color: var(--secondary);
    box-shadow:
        0 0 0 1px rgba(216, 247, 255, 0.9),
        0 0 22px rgba(0, 229, 255, 0.75),
        inset 0 0 18px rgba(0, 229, 255, 0.18);
}

[data-theme="tron"] .video-container video {
    filter: none;
    background: #02070c;
}

[data-theme="tron"] .video-avatar {
    background: radial-gradient(circle, #0a2436 0%, #05101a 70%);
    border: 2px solid var(--primary);
    box-shadow: 0 0 16px rgba(0, 229, 255, 0.5), inset 0 0 12px rgba(0, 229, 255, 0.2);
}

/* Name plate: glass chip with a light rail */
[data-theme="tron"] .video-label {
    background: rgba(3, 14, 22, 0.72);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 229, 255, 0.35);
    border-left: 3px solid var(--primary);
    color: var(--secondary);
    font-family: 'Bahnschrift', 'Segoe UI', sans-serif;
    font-weight: 400;
    letter-spacing: 2px;
    box-shadow: none;
}

[data-theme="tron"] .muted-indicator {
    background: rgba(22, 9, 2, 0.85);
    border-color: var(--danger);
    color: #ffb380;
}

/* Signal meter: light columns with white-hot tips */
[data-theme="tron"] .signal-bars {
    background: rgba(3, 14, 22, 0.72);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border);
    border-radius: 3px;
    box-shadow: none;
}

[data-theme="tron"] .signal-bars .bar {
    background: #12374a;
    border-radius: 2px;
}

[data-theme="tron"] .signal-bars.signal-excellent .bar,
[data-theme="tron"] .signal-bars.signal-good .bar:nth-child(-n+3) {
    background: linear-gradient(180deg, #d8f7ff 0%, var(--primary) 45%);
    box-shadow: 0 0 6px rgba(0, 229, 255, 0.8);
}

[data-theme="tron"] .signal-bars.signal-fair .bar:nth-child(-n+2) {
    background: linear-gradient(180deg, #ffe3b0 0%, var(--warning) 45%);
    box-shadow: 0 0 6px rgba(255, 179, 0, 0.8);
}

[data-theme="tron"] .signal-bars.signal-poor .bar:nth-child(1) {
    background: linear-gradient(180deg, #ffc09b 0%, var(--danger) 45%);
    box-shadow: 0 0 6px rgba(255, 106, 0, 0.8);
}

[data-theme="tron"] .signal-tooltip {
    background: rgba(4, 13, 23, 0.92);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--gray);
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.8);
}

/* Chat: glass panel, messages ride a light rail */
[data-theme="tron"] .chat-sidebar {
    background: rgba(4, 12, 20, 0.92);
    backdrop-filter: blur(12px);
    border-left: 1px solid var(--border);
    box-shadow: none;
}

[data-theme="tron"] .chat-header {
    background: transparent;
    border-bottom: 1px solid var(--border);
}

[data-theme="tron"] .chat-header h3 {
    color: var(--secondary);
    font-weight: 400;
    letter-spacing: 3px;
}

[data-theme="tron"] .chat-messages {
    background: transparent;
}

[data-theme="tron"] .chat-messages::-webkit-scrollbar-track {
    background: transparent;
}

[data-theme="tron"] .chat-messages::-webkit-scrollbar-thumb {
    background: #14455c;
    border: none;
    border-radius: 4px;
}

[data-theme="tron"] .chat-message {
    background: rgba(8, 24, 36, 0.55);
    border: 1px solid rgba(14, 42, 60, 0.9);
    border-left: 2px solid rgba(0, 229, 255, 0.45);
    border-radius: 0 4px 4px 0;
    color: #cfeef8;
    font-family: 'Bahnschrift', 'Segoe UI', sans-serif;
}

[data-theme="tron"] .chat-message .username {
    color: var(--primary);
    letter-spacing: 1px;
}

[data-theme="tron"] .chat-message.own {
    background: var(--own-bg);
    border-left-color: var(--secondary);
    box-shadow: none;
}

[data-theme="tron"] .chat-message.irc {
    background: rgba(31, 17, 3, 0.5);
    border-color: rgba(80, 42, 10, 0.9);
    border-left-color: var(--danger);
    color: #ffd9b8;
    box-shadow: none;
}

[data-theme="tron"] .load-more-btn {
    background: rgba(8, 19, 31, 0.85);
    border-color: var(--border);
    color: #bfeefb;
    font-family: 'Bahnschrift', 'Segoe UI', sans-serif;
    letter-spacing: 1px;
}

[data-theme="tron"] .load-more-btn:hover {
    border-color: var(--primary);
}

[data-theme="tron"] .chat-input-container {
    background: transparent;
    border-top: 1px solid var(--border);
}

[data-theme="tron"] .chat-input-container input {
    background: rgba(3, 10, 17, 0.8);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--secondary);
    font-family: 'Bahnschrift', 'Segoe UI', sans-serif;
}

[data-theme="tron"] .chat-input-container input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary), 0 0 14px rgba(0, 229, 255, 0.35);
}

[data-theme="tron"] .chat-input-container input::placeholder {
    color: #3d7488;
}

/* Control bar: identity discs */
[data-theme="tron"] .control-btn {
    background: rgba(5, 14, 24, 0.85);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border);
    border-radius: 50%;
    box-shadow: none;
    transition: all 0.2s ease;
}

[data-theme="tron"] .control-btn:hover {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.4), 0 0 16px rgba(0, 229, 255, 0.35);
}

[data-theme="tron"] .control-btn.active {
    background: rgba(31, 13, 3, 0.85);
    border-color: var(--danger);
    box-shadow: 0 0 0 1px rgba(255, 106, 0, 0.4), 0 0 14px rgba(255, 106, 0, 0.35);
}

/* Status bar */
[data-theme="tron"] .status-bar {
    background: rgba(5, 14, 24, 0.97);
    border-top: 1px solid var(--border);
    color: #6fb9cc;
    font-family: 'Bahnschrift', 'Segoe UI', sans-serif;
    font-weight: 400;
    letter-spacing: 2px;
}

[data-theme="tron"] .status-bar.connected {
    color: var(--primary);
    border-top-color: var(--border);
}

[data-theme="tron"] .status-bar.error {
    background: rgba(22, 9, 2, 0.97);
    color: var(--danger);
    border-top-color: var(--danger);
}

/* Options menu: floating glass console */
[data-theme="tron"] .options-menu {
    background: rgba(4, 12, 20, 0.94);
    backdrop-filter: blur(14px);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.12), 0 24px 64px -16px rgba(0, 0, 0, 0.9), 0 0 48px -12px rgba(0, 229, 255, 0.3);
}

[data-theme="tron"] .options-header {
    background: transparent !important;
    border-bottom: 1px solid var(--border) !important;
}

[data-theme="tron"] .options-header h3 {
    color: var(--secondary);
    font-weight: 400;
    letter-spacing: 3px;
}

[data-theme="tron"] .options-item {
    border: 1px solid var(--gray-light);
    border-radius: 4px;
    color: #bfeefb;
    font-family: 'Bahnschrift', 'Segoe UI', sans-serif;
    letter-spacing: 1px;
    transition: all 0.15s ease;
}

[data-theme="tron"] .options-item:hover {
    background: rgba(0, 229, 255, 0.1);
    border-color: var(--primary);
    color: var(--secondary);
    box-shadow: inset 2px 0 0 var(--primary);
}

[data-theme="tron"] .options-item-danger {
    border-color: rgba(255, 106, 0, 0.4);
    color: #ffb380;
}

[data-theme="tron"] .options-item-danger:hover {
    background: rgba(255, 106, 0, 0.12);
    border-color: var(--danger);
    color: #ffd9b8;
    box-shadow: inset 2px 0 0 var(--danger);
}

/* Meters and sliders: light beams and disc thumbs */
[data-theme="tron"] .noise-gate-settings {
    background: rgba(3, 10, 17, 0.7);
    border: 1px solid var(--gray-light);
    border-radius: 4px;
}

[data-theme="tron"] .noise-gate-header {
    border-bottom: 1px solid var(--gray-light);
    color: #6fb9cc;
    letter-spacing: 2px;
}

[data-theme="tron"] .mic-device-container {
    background: rgba(3, 10, 17, 0.7);
    border: 1px solid var(--gray-light);
    border-radius: 4px;
}

[data-theme="tron"] .mic-level-bar {
    background: #04101a;
    border: 1px solid var(--gray-light);
    border-radius: 999px;
}

[data-theme="tron"] .mic-level-indicator {
    background: linear-gradient(90deg, #007e94 0%, var(--primary) 65%, #d8f7ff 100%);
    border-radius: 999px;
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.6);
}

[data-theme="tron"] .gate-threshold-line {
    background: var(--danger);
    box-shadow: 0 0 8px rgba(255, 106, 0, 0.7);
}

[data-theme="tron"] input[type="range"] {
    background: #0c2837;
    border: none;
    border-radius: 999px;
    accent-color: var(--primary);
}

[data-theme="tron"] input[type="range"]::-webkit-slider-thumb {
    background: #06181f;
    border: 2px solid var(--primary);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.7);
}

[data-theme="tron"] input[type="range"]::-moz-range-track {
    background: #0c2837;
    border: none;
    border-radius: 999px;
}

[data-theme="tron"] input[type="range"]::-moz-range-thumb {
    background: #06181f;
    border: 2px solid var(--primary);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.7);
}

/* Forms and selects */
[data-theme="tron"] .form-group input,
[data-theme="tron"] .form-group select,
[data-theme="tron"] input[type="text"],
[data-theme="tron"] input[type="password"],
[data-theme="tron"] input[type="search"],
[data-theme="tron"] select {
    background: rgba(3, 10, 17, 0.8);
    color: var(--secondary);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-family: 'Bahnschrift', 'Segoe UI', sans-serif;
    letter-spacing: 1px;
}

[data-theme="tron"] .form-group input:focus,
[data-theme="tron"] input[type="text"]:focus,
[data-theme="tron"] input[type="password"]:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary), 0 0 14px rgba(0, 229, 255, 0.35);
}

[data-theme="tron"] .form-group input::placeholder {
    color: #3d7488;
}

[data-theme="tron"] select option,
[data-theme="tron"] .theme-selector select option,
[data-theme="tron"] .mic-device-container select option {
    background: #071420;
    color: var(--secondary);
}

/* Join / prejoin / landing: let the grid floor show through */
[data-theme="tron"] .join-screen,
[data-theme="tron"] .prejoin-screen,
[data-theme="tron"] .video-grid {
    background: transparent;
}

[data-theme="tron"] .landing-form {
    background: rgba(4, 12, 20, 0.88);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    border-top: 2px solid var(--primary);
    border-radius: 6px;
    box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.9), 0 0 48px -12px rgba(0, 229, 255, 0.25);
}

[data-theme="tron"] .landing-feature {
    background: rgba(8, 19, 31, 0.6);
    border-color: var(--gray-light);
    border-radius: 4px;
}

[data-theme="tron"] .landing-feature:hover {
    border-color: var(--primary);
    background: rgba(0, 229, 255, 0.08);
}

[data-theme="tron"] .prejoin-preview {
    background: #02070c;
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 0 24px -8px rgba(0, 229, 255, 0.3);
}

/* Room info pills */
[data-theme="tron"] .room-info .btn {
    background: rgba(8, 19, 31, 0.85);
    border: 1px solid var(--border);
    color: #bfeefb;
    font-family: 'Bahnschrift', 'Segoe UI', sans-serif;
    letter-spacing: 1px;
    box-shadow: none;
}

/* Theme select */
[data-theme="tron"] .theme-selector select {
    background: rgba(3, 10, 17, 0.8);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--secondary);
    font-family: 'Bahnschrift', 'Segoe UI', sans-serif;
}

[data-theme="tron"] .mic-device-container select {
    background: rgba(3, 10, 17, 0.8);
    color: var(--secondary);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-family: 'Bahnschrift', 'Segoe UI', sans-serif;
}

/* E2EE banner */
[data-theme="tron"] .e2ee-banner {
    background: rgba(4, 12, 20, 0.8);
    backdrop-filter: blur(8px);
    border-color: var(--border);
    color: var(--primary);
}

/* Respect reduced-motion: park the ribbon and the grid */
@media (prefers-reduced-motion: reduce) {
    [data-theme="tron"] .header::after {
        animation: none;
        background-position: 50% 0;
    }

    [data-theme="tron"] body::before {
        animation: none;
    }
}