/* ===================================================================
   WATCH MOVIE — Design System v1.1
   Pure black / white / grayscale. Cinematic. Premium. Responsive.
   - Proper focus mode (dim, not full-screen)
   - Proper theater mode (primary fills stage, controls dim)
   - Speaking wave indicator on tiles + people table
   - People table layout (not cards)
   - Connection quality indicator
   - Leave button (red)
   =================================================================== */

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
    /* --- Color: Grayscale Ramp --- */
    --black:        #000000;
    --gray-950:     #050505;
    --gray-900:     #0a0a0a;
    --gray-850:     #0f0f0f;
    --gray-800:     #141414;
    --gray-750:     #1a1a1a;
    --gray-700:     #1f1f1f;
    --gray-600:     #2a2a2a;
    --gray-500:     #3a3a3a;
    --gray-400:     #4a4a4a;
    --gray-300:     #6a6a6a;
    --gray-200:     #9a9a9a;
    --gray-100:     #c4c4c4;
    --gray-50:      #e8e8e8;
    --white:        #ffffff;

    /* --- Accent / status colors --- */
    --accent-leave:    #e53935;
    --accent-leave-hover: #f44336;
    --status-good:     #4caf50;
    --status-medium:   #ffb300;
    --status-bad:      #f44336;
    --status-muted:    #9a9a9a;
    --status-speaking: #4caf50;

    /* --- Semantic Surfaces --- */
    --bg-base:        var(--gray-950);
    --bg-surface:     var(--gray-900);
    --bg-elevated:    var(--gray-850);
    --bg-overlay:     rgba(10, 10, 10, 0.88);
    --bg-glass:       rgba(20, 20, 20, 0.72);
    --bg-glass-strong:rgba(15, 15, 15, 0.92);
    --bg-hover:       rgba(255, 255, 255, 0.06);
    --bg-active:      rgba(255, 255, 255, 0.12);
    --bg-inverse:     var(--white);

    /* --- Semantic Text --- */
    --text-primary:   var(--white);
    --text-secondary: var(--gray-100);
    --text-muted:     var(--gray-200);
    --text-subtle:    var(--gray-300);
    --text-disabled:  var(--gray-400);
    --text-inverse:   var(--black);

    /* --- Borders --- */
    --border-subtle:  rgba(255, 255, 255, 0.06);
    --border-default: rgba(255, 255, 255, 0.10);
    --border-strong:  rgba(255, 255, 255, 0.18);
    --border-focus:   rgba(255, 255, 255, 0.35);

    /* --- Spacing Scale (4px base) --- */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* --- Radius Scale --- */
    --radius-xs:  4px;
    --radius-sm:  6px;
    --radius-md:  10px;
    --radius-lg:  14px;
    --radius-xl:  20px;
    --radius-2xl: 28px;
    --radius-full: 9999px;

    /* --- Shadow Scale (subtle, used sparingly) --- */
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.35);
    --shadow-md: 0 8px 24px rgba(0,0,0,0.45);
    --shadow-lg: 0 16px 48px rgba(0,0,0,0.6);
    --shadow-xl: 0 24px 80px rgba(0,0,0,0.7);

    /* --- Motion --- */
    /* Motion — tuned for a perceptibly smooth, not sluggish, feel.
       YouTube/Apple-style: most transitions in the 200–400ms range with
       a strong ease-out (decelerating) curve so elements settle quickly
       but gently. The spring curve adds a subtle overshoot for tactile
       elements (buttons, tiles, badges). */
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    /* iOS-style 'snappy' curve — slight acceleration at the start, then
       a longer deceleration. Used for panels/tiles that should feel
       like they snap into place rather than fade in. */
    --ease-snap:   cubic-bezier(0.2, 0.9, 0.3, 1);

    --dur-instant: 100ms;
    --dur-fast:    180ms;
    --dur-normal:  320ms;
    --dur-slow:    460ms;
    --dur-slower:  600ms;

    /* --- Z-Index Hierarchy --- */
    --z-base:        0;
    --z-stage:       10;
    --z-overlay:     20;
    --z-controls:    30;
    --z-topbar:      40;
    --z-sidebar:     50;
    --z-backdrop:    60;
    --z-dropdown:    70;
    --z-modal:       80;
    --z-toast:       90;
    --z-critical:    100;

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

    --text-xs:   11px;
    --text-sm:   13px;
    --text-base: 14px;
    --text-md:   15px;
    --text-lg:   17px;
    --text-xl:   20px;
    --text-2xl:  24px;
    --text-3xl:  32px;

    --leading-tight:  1.2;
    --leading-normal: 1.5;
    --leading-relaxed:1.7;

    --tracking-tight:  -0.01em;
    --tracking-normal:  0;
    --tracking-wide:    0.02em;

    /* --- Layout --- */
    --sidebar-width: 340px;
    --topbar-height: 56px;
    --controls-height: 64px;
    --call-controls-height: 56px;

    /* --- Safe Areas --- */
    --safe-top:    env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left:   env(safe-area-inset-left, 0px);
    --safe-right:  env(safe-area-inset-right, 0px);
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    height: 100%;
    overflow: hidden;
    background: var(--bg-base);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
input, textarea { user-select: text; -webkit-user-select: text; }

/* Focus rings — accessible, consistent */
*:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}
button:focus-visible { outline-offset: 1px; }

/* Scrollbars — minimal, dark */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gray-600); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--gray-500); }

/* Selection */
::selection { background: rgba(255,255,255,0.18); color: var(--white); }

/* Hidden utility */
.hidden { display: none !important; }

/* ============================================================
   3. ANIMATIONS
   ============================================================ */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes popIn { 0% { opacity: 0; transform: scale(0.96); } 100% { opacity: 1; transform: scale(1); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

/* Speaking wave animation (5 bars rising/falling independently) */
@keyframes wave-bar {
    0%, 100% { transform: scaleY(0.3); }
    25%      { transform: scaleY(0.7); }
    50%      { transform: scaleY(1); }
    75%      { transform: scaleY(0.5); }
}

/* ============================================================
   4. LOGIN SCREEN
   ============================================================ */
.login-screen {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at center, var(--gray-800) 0%, var(--black) 75%);
    padding: var(--space-6);
    z-index: var(--z-critical);
}
.login-card {
    width: 100%;
    max-width: 380px;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-2xl);
    padding: var(--space-12) var(--space-8);
    text-align: center;
    box-shadow: var(--shadow-lg);
    animation: popIn var(--dur-slow) var(--ease-out);
}
.login-logo {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-5);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    color: var(--black);
    border-radius: var(--radius-xl);
    animation: breathe 4s var(--ease-in-out) infinite;
}
.login-title {
    font-size: var(--text-2xl);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
    margin-bottom: var(--space-2);
}
.login-subtitle {
    color: var(--text-muted);
    font-size: var(--text-sm);
    margin-bottom: var(--space-8);
}
.login-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.login-form input {
    width: 100%;
    padding: var(--space-4) var(--space-4);
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--text-md);
    text-align: center;
    transition: border-color var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out);
}
.login-form input::placeholder { color: var(--text-subtle); }
.login-form input:focus {
    border-color: var(--border-focus);
    background: var(--gray-800);
    outline: none;
}
#join-btn {
    padding: var(--space-4);
    background: var(--white);
    color: var(--black);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: var(--text-md);
    transition: transform var(--dur-fast) var(--ease-out),
                opacity var(--dur-fast) var(--ease-out);
}
#join-btn:hover { transform: translateY(-1px); }
#join-btn:active { transform: translateY(0) scale(0.99); }
#join-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.connection-status {
    margin-top: var(--space-4);
    font-size: var(--text-xs);
    color: var(--text-muted);
    min-height: 1em;
    letter-spacing: var(--tracking-wide);
}

/* ============================================================
   5. APP SHELL LAYOUT
   .app = flex row (app-main + sidebar)
   .app-main = flex column (stage on top, call-controls at bottom)
   ============================================================ */
.app {
    position: fixed;
    inset: 0;
    display: flex;
    background: var(--bg-base);
    overflow: hidden;
}
.app-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

/* ============================================================
   6. STAGE + UNIFIED GRID (movie + cameras + screens in ONE system)
   ============================================================ */
.stage {
    flex: 1;
    position: relative;
    background: var(--black);
    overflow: hidden;
    min-width: 0;
}

/* Unified grid: primary (focused) on top, strip (thumbnails) on bottom */
.stage-grid {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-2);
    z-index: var(--z-stage);
}
.stage-primary {
    flex: 1;
    min-height: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.stage-strip {
    flex: 0 0 auto;
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    overflow-y: hidden;
    padding: var(--space-1) 0;
    min-height: 0;
    scrollbar-width: thin;
    transition: opacity var(--dur-normal) var(--ease-out);
}
.stage-strip:empty { display: none; }

/* Stage Tile — unified for movie, peer cameras, screen shares */
.stage-tile {
    position: relative;
    background: var(--gray-850);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out),
                transform var(--dur-normal) var(--ease-spring),
                opacity var(--dur-normal) var(--ease-out),
                box-shadow var(--dur-normal) var(--ease-out);
    flex-shrink: 0;
}
.stage-tile.is-focused {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-lg);
    cursor: default;
}
.stage-tile.is-focused video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--black);
}
.stage-tile.is-secondary {
    width: 168px;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-sm);
}
.stage-tile.is-secondary video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--black);
}
.stage-tile.is-secondary:hover {
    border-color: var(--white);
    transform: translateY(-2px);
}
.stage-tile.local video { transform: scaleX(-1); }
.stage-tile.screen-share { aspect-ratio: 16 / 9; }

/* Tile overlay (label badge) */
.stage-tile-overlay {
    position: absolute;
    bottom: var(--space-2);
    left: var(--space-2);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease-out);
    z-index: 2;
}
.stage-tile.is-secondary .stage-tile-overlay { opacity: 1; }
.stage-primary:hover .stage-tile.is-focused .stage-tile-overlay { opacity: 1; }
.stage-tile-badge {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: var(--radius-xs);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--text-primary);
}

/* Peer tile indicators (mic/camera status) */
.peer-tile-indicators {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    display: flex;
    gap: var(--space-1);
    pointer-events: none;
    z-index: 2;
}
.peer-tile-indicator {
    width: 22px;
    height: 22px;
    background: rgba(0,0,0,0.7);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
}
.peer-tile-indicator.muted {
    background: rgba(255,255,255,0.85);
    color: var(--black);
}
.peer-tile-label {
    position: absolute;
    bottom: var(--space-2);
    left: var(--space-2);
    padding: var(--space-1) var(--space-2);
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--text-primary);
    border-radius: var(--radius-xs);
    font-size: var(--text-xs);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    z-index: 2;
    pointer-events: none;
}

/* Tile speaking wave — bottom of every tile */
.tile-speaking-wave {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 28px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    padding: 4px;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease-out);
}
.tile-speaking-wave.active { opacity: 1; }
.tile-speaking-wave .wave-bar {
    width: 3px;
    height: 100%;
    background: var(--status-speaking);
    border-radius: var(--radius-full);
    transform-origin: bottom;
    transform: scaleY(0.3);
}
.tile-speaking-wave.active .wave-bar {
    animation: wave-bar 0.9s var(--ease-in-out) infinite;
}
.tile-speaking-wave.active .wave-bar:nth-child(1) { animation-delay: 0s; }
.tile-speaking-wave.active .wave-bar:nth-child(2) { animation-delay: 0.15s; }
.tile-speaking-wave.active .wave-bar:nth-child(3) { animation-delay: 0.3s; }
.tile-speaking-wave.active .wave-bar:nth-child(4) { animation-delay: 0.45s; }
.tile-speaking-wave.active .wave-bar:nth-child(5) { animation-delay: 0.6s; }

/* Tile border ring when speaking */
.stage-tile.is-speaking {
    border-color: var(--status-speaking);
    box-shadow: 0 0 0 1px var(--status-speaking), 0 0 16px rgba(76, 175, 80, 0.35);
}

/* Tile border ring when actively screen-sharing (blue, distinct from speaking green).
   IMPORTANT: this class is applied ONLY to screen-share tiles. Camera tiles
   never get this class — so the green (speaking) and blue (screen share) rings
   can never appear on the wrong tile. */
.stage-tile.is-screen-sharing {
    border-color: #2196f3;
    box-shadow: 0 0 0 1px #2196f3, 0 0 16px rgba(33, 150, 243, 0.35);
}

/* Screen-share LIVE badge (top-right of screen-share tiles, blue pulsing) */
.screen-share-badge {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: rgba(33, 150, 243, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: var(--radius-xs);
    font-size: var(--text-xs);
    font-weight: 600;
    color: #fff;
    pointer-events: none;
    z-index: 3;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.screen-share-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
    animation: screen-live-pulse 1.5s var(--ease-in-out) infinite;
}
@keyframes screen-live-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.85); }
}

/* Kick row animation (slides row out with red flash when someone is kicked) */
@keyframes kick-row-animation {
    0% {
        background: rgba(244, 67, 54, 0);
        transform: translateX(0);
        opacity: 1;
    }
    15% {
        background: rgba(244, 67, 54, 0.4);
        transform: translateX(0);
    }
    100% {
        background: rgba(244, 67, 54, 0);
        transform: translateX(100%);
        opacity: 0;
    }
}
tr.is-kicked {
    animation: kick-row-animation 1.2s var(--ease-out) forwards;
    pointer-events: none;
}
tr.is-kicked td {
    pointer-events: none;
}

/* Kick confirm modal — target preview */
.kick-target-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(244, 67, 54, 0.08);
    border: 1px solid rgba(244, 67, 54, 0.2);
    border-radius: 12px;
}
.kick-target-preview .avatar {
    width: 44px;
    height: 44px;
    background: var(--accent-leave);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    flex-shrink: 0;
}
.kick-target-label {
    color: var(--text-secondary);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}
.kick-target-name {
    color: var(--text-primary);
    font-size: var(--text-md);
    font-weight: 600;
}

/* Tile red ring when peer disconnected */
.stage-tile.is-disconnected {
    border-color: var(--status-bad);
    opacity: 0.6;
}
.stage-tile.is-disconnected::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 8px,
        rgba(244, 67, 54, 0.15) 8px,
        rgba(244, 67, 54, 0.15) 16px
    );
    pointer-events: none;
}

/* Hide player controls when non-movie tile is focused */
.stage[data-focused="peer"] .player-controls {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(8px);
}
.stage[data-focused="peer"] .stage-center-play { display: none; }
.stage[data-focused="peer"] .stage-empty { display: none; }

/* Empty state */
.stage-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    text-align: center;
    padding: var(--space-8);
    color: var(--text-muted);
    z-index: var(--z-overlay);
    transition: opacity var(--dur-normal) var(--ease-out);
}
.stage-empty.hidden { opacity: 0; pointer-events: none; }
.stage-empty-icon {
    color: var(--text-subtle);
    margin-bottom: var(--space-2);
    opacity: 0.6;
}
.stage-empty-title {
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: var(--tracking-tight);
}
.stage-empty-subtitle {
    font-size: var(--text-sm);
    color: var(--text-muted);
    max-width: 360px;
    margin-bottom: var(--space-4);
}

/* ============================================================
   7. TOP BAR (overlay, auto-hide)
   ============================================================ */
.stage-topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--topbar-height);
    padding: var(--space-4) var(--space-5);
    padding-top: calc(var(--space-4) + var(--safe-top));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
    z-index: var(--z-topbar);
    pointer-events: none;
    opacity: 0;
    transform: translateY(-100%);
    transition: opacity var(--dur-normal) var(--ease-out),
                transform var(--dur-normal) var(--ease-out);
}
.stage-topbar > * { pointer-events: auto; }
/* Show topbar when stage has show-controls, when paused, or on hover */
.stage.show-controls .stage-topbar,
.stage.paused .stage-topbar {
    opacity: 1;
    transform: translateY(0);
}

.topbar-left, .topbar-right {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-primary);
}
.brand svg { color: var(--white); }
.brand-name {
    font-weight: 600;
    font-size: var(--text-md);
    letter-spacing: var(--tracking-tight);
}
.room-badge {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
}
.room-dot {
    width: 6px;
    height: 6px;
    background: var(--white);
    border-radius: 50%;
    animation: pulse 2s var(--ease-in-out) infinite;
}
.room-label { color: var(--text-muted); }
.room-code { color: var(--text-primary); font-weight: 600; }

/* ============================================================
   8. ICON BUTTONS (top bar)
   ============================================================ */
.icon-btn {
    position: relative;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
}
.icon-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.icon-btn:active { transform: scale(0.94); }
.icon-btn.active {
    background: var(--white);
    color: var(--black);
    border-color: var(--white);
}

/* Tooltip */
.icon-btn[data-tip]:hover::after,
.call-btn[data-tip]:hover::after,
.player-btn[data-tip]:hover::after {
    content: attr(data-tip);
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: var(--space-1) var(--space-2);
    background: var(--gray-800);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    white-space: nowrap;
    pointer-events: none;
    animation: slideUp var(--dur-fast) var(--ease-out);
    z-index: var(--z-dropdown);
}

/* ============================================================
   9. PARTICIPANT TILES — now handled by .stage-tile above (section 6)
   ============================================================ */

/* ============================================================
   10. CENTER PLAY BUTTON
   ============================================================ */
.stage-center-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    width: 72px;
    height: 72px;
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-full);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-overlay);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-normal) var(--ease-out),
                transform var(--dur-normal) var(--ease-spring);
}
.stage-center-play.visible {
    opacity: 1;
    pointer-events: auto;
}
.stage-center-play:hover {
    transform: translate(-50%, -50%) scale(1.08);
    background: rgba(255,255,255,0.2);
}
.stage-center-play:active {
    transform: translate(-50%, -50%) scale(0.96);
}

/* ============================================================
   11. PLAYER CONTROLS (YouTube-style auto-hide)
   Lives INSIDE .video-player (which is position: relative).
   Default: opacity 0, pointer-events: none (hidden).
   Visible when:
     - .stage has .show-controls class (set by JS on mousemove/touch)
     - video is paused (.stage.paused)
     - user is hovering the controls themselves
   After 3s of no activity (while playing), JS removes .show-controls.
   ============================================================ */
.player-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    border: none;
    border-radius: 0;
    padding: var(--space-8) var(--space-4) var(--space-3);
    z-index: var(--z-controls);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-normal) var(--ease-out),
                transform var(--dur-normal) var(--ease-out);
}
/* Show when stage has show-controls class */
.stage.show-controls .player-controls,
.player-controls:hover {
    opacity: 1;
    pointer-events: auto;
}
/* Always show when video is paused (JS adds .paused class to stage) */
.stage.paused .player-controls {
    opacity: 1;
    pointer-events: auto;
}
/* Hide controls entirely when a peer/screen tile is focused */
.stage[data-focused="peer"] .player-controls {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Progress bar */
.player-progress {
    position: relative;
    height: 16px;
    display: flex;
    align-items: center;
    margin-bottom: var(--space-2);
    cursor: pointer;
}
.progress-buffered,
.progress-played {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 4px;
    border-radius: var(--radius-full);
    pointer-events: none;
    transition: height var(--dur-fast) var(--ease-out);
}
.progress-buffered {
    width: 0;
    background: rgba(255,255,255,0.15);
}
.progress-played {
    width: 0;
    background: var(--white);
}
.player-progress:hover .progress-buffered,
.player-progress:hover .progress-played {
    height: 6px;
}
.progress-thumb {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 12px;
    height: 12px;
    background: var(--white);
    border-radius: 50%;
    pointer-events: none;
    transition: transform var(--dur-fast) var(--ease-spring);
    box-shadow: var(--shadow-sm);
}
.player-progress:hover .progress-thumb {
    transform: translate(-50%, -50%) scale(1);
}
#seek-bar {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    opacity: 0;
    z-index: 2;
}
#seek-bar::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: transparent;
    cursor: pointer;
}
#seek-bar::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: transparent;
    border: none;
    cursor: pointer;
}

/* Player row */
.player-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
.player-left, .player-right {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.player-center {
    position: relative;
    flex: 1;
    display: flex;
    justify-content: center;
}

/* Player buttons */
.player-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
}
.player-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.player-btn:active { transform: scale(0.92); }
.player-btn.active {
    background: var(--white);
    color: var(--black);
}

.volume-group { display: flex; align-items: center; }
.time-display {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
    margin-left: var(--space-2);
}
.time-sep { color: var(--text-subtle); }

/* Player settings dropdown (YouTube-style: aligned to the right side,
   above the gear button, NOT centered) */
.player-settings-menu {
    position: absolute;
    bottom: 48px;
    right: 8px;
    background: var(--bg-glass-strong);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 0;
    width: 280px;
    max-height: 70vh;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    z-index: var(--z-dropdown);
    animation: slideUp var(--dur-fast) var(--ease-out);
}
/* Hide the menu entirely when a peer tile is focused (so it doesn't float
   over an unrelated tile). */
.stage[data-focused="peer"] .player-settings-menu { display: none !important; }
/* Scrollbar for the settings menu */
.player-settings-menu::-webkit-scrollbar {
    width: 6px;
}
.player-settings-menu::-webkit-scrollbar-track {
    background: transparent;
}
.player-settings-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 20px;
}
.player-settings-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}
.psm-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) 0;
}
.psm-row:not(:last-child) {
    border-bottom: 1px solid var(--border-subtle);
}
.psm-label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}
/* Inline selects inside the player settings menu use a compact glass-select variant */
.psm-row .glass-select-container {
    max-width: 130px;
}
.psm-row .glass-select-display {
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
}
/* Color input inside the player settings menu */
.psm-color-input {
    width: 36px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
}
.psm-color-input::-webkit-color-swatch-wrapper {
    padding: 2px;
}
.psm-color-input::-webkit-color-swatch {
    border: none;
    border-radius: 3px;
}
.psm-color-input::-moz-color-swatch {
    border: none;
    border-radius: 3px;
}

/* ============================================================
   12. CALL CONTROLS (separate div, below the stage — NOT inside .stage)
   This is a static flex item in .app-main, so the stage is always
   ABOVE the call controls. No overlap, no absolute positioning.
   ============================================================ */
.call-controls {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    background: var(--bg-glass-strong);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--border-subtle);
    border-radius: 0;
    padding: var(--space-2) var(--space-4);
    padding-bottom: calc(var(--space-2) + var(--safe-bottom));
    flex-shrink: 0;
    z-index: var(--z-controls);
    transition: opacity var(--dur-normal) var(--ease-out);
}
/* In theater mode (native fullscreen on stage): call-controls are NOT
   inside the fullscreen element, so they're naturally invisible.
   No CSS needed — the browser handles this. */
/* In focus mode: dim call-controls slightly */
.app.focus-mode .call-controls {
    opacity: 0.7;
}
.app.focus-mode .call-controls:hover {
    opacity: 1;
}
.call-btn {
    position: relative;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
}
.call-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.call-btn:active { transform: scale(0.92); }
.call-btn.on {
    background: var(--white);
    color: var(--black);
}
.call-btn.off {
    background: var(--gray-700);
    color: var(--text-primary);
}
.call-btn.off::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-full);
    border: 2px solid var(--white);
    opacity: 0.3;
    animation: pulse 2s var(--ease-in-out) infinite;
}

/* Speaking wave indicator on mic button (local) */
.call-btn .speaking-wave {
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 8px;
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease-out);
    pointer-events: none;
}
.call-btn.is-speaking .speaking-wave {
    opacity: 1;
}
.call-btn .speaking-wave .wave-bar {
    width: 2px;
    height: 100%;
    background: var(--status-speaking);
    border-radius: var(--radius-full);
    transform-origin: bottom;
    transform: scaleY(0.3);
}
.call-btn.is-speaking .speaking-wave .wave-bar {
    animation: wave-bar 0.7s var(--ease-in-out) infinite;
}
.call-btn.is-speaking .speaking-wave .wave-bar:nth-child(1) { animation-delay: 0s; }
.call-btn.is-speaking .speaking-wave .wave-bar:nth-child(2) { animation-delay: 0.1s; }
.call-btn.is-speaking .speaking-wave .wave-bar:nth-child(3) { animation-delay: 0.2s; }
.call-btn.is-speaking .speaking-wave .wave-bar:nth-child(4) { animation-delay: 0.3s; }

.call-divider {
    width: 1px;
    height: 24px;
    background: var(--border-default);
    margin: 0 var(--space-1);
}

/* Leave button — red, sits at the end of call controls */
.call-btn.leave-btn {
    background: var(--accent-leave);
    color: var(--white);
}
.call-btn.leave-btn:hover {
    background: var(--accent-leave-hover);
    color: var(--white);
}
.call-btn.leave-btn:active {
    transform: scale(0.92);
}

/* ============================================================
   13. STAGE OVERLAYS (loading, error)
   ============================================================ */
.stage-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: var(--z-overlay);
    text-align: center;
    padding: var(--space-8);
    animation: fadeIn var(--dur-normal) var(--ease-out);
}
.overlay-spinner {
    width: 40px;
    height: 40px;
    border: 2px solid rgba(255,255,255,0.15);
    border-top-color: var(--white);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
.overlay-icon {
    color: var(--text-muted);
    opacity: 0.7;
}
.overlay-text {
    font-size: var(--text-sm);
    color: var(--text-muted);
    letter-spacing: var(--tracking-wide);
}
.overlay-title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-primary);
}
.error-detail, .overlay-hint {
    font-size: var(--text-sm);
    color: var(--text-muted);
    max-width: 400px;
}

/* ============================================================
   14. BUTTONS (shared)
   ============================================================ */
.btn-primary {
    display: inline-block;
    padding: var(--space-3) var(--space-5);
    background: var(--white);
    color: var(--black);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: var(--text-sm);
    transition: transform var(--dur-fast) var(--ease-out),
                opacity var(--dur-fast) var(--ease-out);
    margin-top: var(--space-2);
}
.btn-primary:hover { transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0) scale(0.98); }

.btn-secondary {
    padding: var(--space-3) var(--space-5);
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    font-weight: 500;
    font-size: var(--text-sm);
    transition: background var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
    margin-top: var(--space-2);
}
.btn-secondary:hover {
    background: var(--gray-750);
    border-color: var(--border-strong);
}

.btn-ghost {
    padding: var(--space-2) var(--space-4);
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    font-weight: 500;
    font-size: var(--text-sm);
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}
.btn-ghost:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.button-row {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-2);
    flex-wrap: wrap;
}
.button-row .btn-primary,
.button-row .btn-secondary { flex: 1; margin-top: 0; min-width: 120px; }

.file-upload-wrapper {
    margin-top: var(--space-2);
    margin-bottom: var(--space-2);
}

/* ============================================================
   15. SIDEBAR (Chat / People)
   Default: COLLAPSED (width: 0). Click chat button to open.
   On desktop: collapses/expands in flex layout.
   On mobile: slides in as a drawer.
   ============================================================ */
.sidebar {
    position: relative;
    width: 0;
    background: var(--bg-surface);
    border-left: 1px solid transparent;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow: hidden;
    z-index: var(--z-sidebar);
    transition: width var(--dur-slow) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
}
.sidebar.open {
    width: var(--sidebar-width);
    border-left-color: var(--border-subtle);
}
/* Inner content keeps fixed width so it doesn't squish during collapse */
.sidebar > * {
    min-width: var(--sidebar-width);
    flex-shrink: 0;
}

/* Drag handle (mobile only) */
.sidebar-handle {
    display: none;
    height: 4px;
    width: 36px;
    background: var(--gray-500);
    border-radius: var(--radius-full);
    margin: var(--space-2) auto var(--space-1);
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4);
    padding-top: calc(var(--space-4) + var(--safe-top));
    border-bottom: 1px solid var(--border-subtle);
}
.user-profile {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}
.avatar {
    width: 40px;
    height: 40px;
    background: var(--gray-600);
    color: var(--text-primary);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: var(--text-md);
    flex-shrink: 0;
    border: 1px solid var(--border-default);
}
.user-info {
    min-width: 0;
    flex: 1;
}
.user-name {
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-status {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--text-muted);
}
.status-dot {
    width: 6px;
    height: 6px;
    background: var(--white);
    border-radius: 50%;
    opacity: 0.6;
}

.sidebar-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-subtle);
    padding: 0 var(--space-2);
}
.tab-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3);
    color: var(--text-muted);
    font-weight: 500;
    font-size: var(--text-sm);
    border-bottom: 2px solid transparent;
    transition: color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
    margin-bottom: -1px;
}
.tab-btn:hover { color: var(--text-secondary); }
.tab-btn.active {
    color: var(--text-primary);
    border-bottom-color: var(--white);
}
.tab-count {
    background: var(--bg-elevated);
    color: var(--text-muted);
    padding: 1px 7px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    min-width: 20px;
    text-align: center;
}

/* Panels */
.panel {
    display: none;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}
.panel.active { display: flex; }

/* ============================================================
   16. CHAT MESSAGES
   ============================================================ */
.messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Empty state */
.empty-state {
    margin: auto;
    text-align: center;
    color: var(--text-subtle);
    padding: var(--space-8);
}
.empty-state svg {
    margin-bottom: var(--space-3);
    opacity: 0.5;
}
.empty-state p {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-muted);
}
.empty-state small {
    font-size: var(--text-xs);
    color: var(--text-subtle);
}

/* Message bubble */
.msg {
    background: var(--bg-elevated);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    max-width: 82%;
    align-self: flex-start;
    position: relative;
    word-break: break-word;
    animation: slideUp var(--dur-fast) var(--ease-out);
    border: 1px solid var(--border-subtle);
}
.msg.mine {
    background: var(--gray-700);
    border-color: var(--border-default);
    align-self: flex-end;
}
.msg-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}
.msg-username {
    font-weight: 600;
    font-size: var(--text-xs);
    color: var(--text-secondary);
    flex: 1;
}
.mine .msg-username { color: var(--text-primary); }
.msg-time {
    font-size: 10px;
    color: var(--text-subtle);
    font-variant-numeric: tabular-nums;
}
.msg-content {
    line-height: var(--leading-normal);
    font-size: var(--text-sm);
    color: var(--text-primary);
}
.mention {
    background: rgba(255,255,255,0.12);
    color: var(--text-primary);
    padding: 1px 6px;
    border-radius: var(--radius-xs);
    font-weight: 500;
}

/* Reply preview */
.reply-preview {
    border-left: 2px solid var(--gray-500);
    padding: var(--space-1) var(--space-2);
    margin-bottom: var(--space-2);
    font-size: var(--text-xs);
    color: var(--text-muted);
    background: rgba(255,255,255,0.03);
    border-radius: var(--radius-xs);
}

/* Message actions */
.msg-actions {
    position: absolute;
    top: -12px;
    right: var(--space-2);
    display: flex;
    gap: 2px;
    opacity: 0;
    background: var(--bg-glass-strong);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 2px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-default);
    transition: opacity var(--dur-fast) var(--ease-out);
}
.msg.mine .msg-actions {
    right: auto;
    left: var(--space-2);
}
.msg:hover .msg-actions { opacity: 1; }
.msg-action-btn {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    font-size: 13px;
    color: var(--text-muted);
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}
.msg-action-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* Reactions */
.msg-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-top: var(--space-2);
}
.reaction-badge {
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border-subtle);
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out);
}
.reaction-badge:hover { background: rgba(255,255,255,0.12); }
.reaction-badge.my-reaction {
    background: rgba(255,255,255,0.18);
    border-color: var(--border-strong);
}

/* ============================================================
   17. CHAT INPUT
   ============================================================ */
.chat-input-area {
    border-top: 1px solid var(--border-subtle);
    padding: var(--space-3);
    padding-bottom: calc(var(--space-3) + var(--safe-bottom));
}
.reply-indicator {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    background: var(--bg-elevated);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-2);
    font-size: var(--text-xs);
    border-left: 2px solid var(--white);
}
.reply-indicator #reply-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
}
#cancel-reply {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    color: var(--text-muted);
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}
#cancel-reply:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.input-row {
    display: flex;
    gap: var(--space-2);
}
#chat-input {
    flex: 1;
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    color: var(--text-primary);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    transition: border-color var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out);
    height: 36px;
}
#chat-input:focus {
    border-color: var(--border-focus);
    background: var(--gray-800);
    outline: none;
}
#chat-input::placeholder { color: var(--text-subtle); }

#send-msg {
    width: 36px;
    height: 36px;
    background: var(--white);
    color: var(--black);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform var(--dur-fast) var(--ease-out),
                opacity var(--dur-fast) var(--ease-out);
}
#send-msg:hover { transform: scale(1.05); }
#send-msg:active { transform: scale(0.95); }
#send-msg:disabled { opacity: 0.4; cursor: not-allowed; }

/* Mention suggestions */
.mention-suggestions {
    position: absolute;
    bottom: 64px;
    left: var(--space-3);
    right: var(--space-3);
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    max-height: 200px;
    overflow-y: auto;
    z-index: var(--z-dropdown);
    box-shadow: var(--shadow-md);
    animation: slideUp var(--dur-fast) var(--ease-out);
}
.mention-suggestion-item {
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    border-bottom: 1px solid var(--border-subtle);
    font-size: var(--text-sm);
    transition: background var(--dur-fast) var(--ease-out);
}
.mention-suggestion-item:last-child { border-bottom: none; }
.mention-suggestion-item:hover { background: var(--bg-hover); }

/* ============================================================
   18. PEOPLE LIST (TABLE LAYOUT)
   ============================================================ */
.people-table-wrap {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-2);
}
.people-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
    table-layout: fixed;
}
.people-table thead th {
    text-align: left;
    padding: var(--space-2);
    color: var(--text-muted);
    font-weight: 500;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    border-bottom: 1px solid var(--border-default);
    background: var(--bg-elevated);
    position: sticky;
    top: 0;
    z-index: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.people-table tbody tr {
    border-bottom: 1px solid var(--border-subtle);
    transition: background var(--dur-fast) var(--ease-out),
                transform var(--dur-normal) var(--ease-spring),
                opacity var(--dur-normal) var(--ease-out);
    animation: rowFadeIn var(--dur-normal) var(--ease-out);
}
.people-table tbody tr:hover {
    background: var(--bg-hover);
    transform: translateX(2px);
}
@keyframes rowFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.people-table tbody tr.is-self {
    background: rgba(255, 255, 255, 0.03);
}
.people-table tbody tr.is-host .col-name .user-name-cell {
    font-weight: 600;
}
.people-table td {
    padding: var(--space-2);
    vertical-align: middle;
    color: var(--text-secondary);
    overflow: hidden;
}
/* Column widths — fixed layout so name column takes remaining space */
.people-table .col-name { width: auto; }
.people-table .col-mic,
.people-table .col-cam {
    width: 36px;
    text-align: center;
}
.people-table .col-conn { width: 72px; }
.people-table .col-actions { width: 36px; text-align: right; }

.user-name-cell {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}
.user-name-cell .avatar {
    width: 28px;
    height: 28px;
    font-size: var(--text-xs);
    flex-shrink: 0;
}
.user-name-cell .name-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
    min-width: 0;
}
.host-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-primary);
    border-radius: var(--radius-xs);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    flex-shrink: 0;
}

/* Mic / cam icon cells */
.mic-cell, .cam-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    color: var(--text-muted);
}
.mic-cell.on { color: var(--status-good); }
.mic-cell.off { color: var(--status-muted); }
.mic-cell.speaking {
    color: var(--status-speaking);
    background: rgba(76, 175, 80, 0.12);
    animation: pulse 1s var(--ease-in-out) infinite;
}
.cam-cell.on { color: var(--text-primary); }
.cam-cell.off { color: var(--text-subtle); }

/* Connection quality indicator */
.conn-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.conn-indicator .conn-bars {
    display: inline-flex;
    align-items: flex-end;
    gap: 1px;
    height: 10px;
}
.conn-indicator .conn-bars .bar {
    width: 2px;
    background: currentColor;
    border-radius: 1px;
    opacity: 0.3;
}
.conn-indicator .conn-bars .bar.on { opacity: 1; }
.conn-indicator .conn-bars .bar:nth-child(1) { height: 30%; }
.conn-indicator .conn-bars .bar:nth-child(2) { height: 55%; }
.conn-indicator .conn-bars .bar:nth-child(3) { height: 80%; }
.conn-indicator .conn-bars .bar:nth-child(4) { height: 100%; }

.conn-indicator.good { color: var(--status-good); background: rgba(76, 175, 80, 0.08); }
.conn-indicator.medium { color: var(--status-medium); background: rgba(255, 179, 0, 0.08); }
.conn-indicator.bad { color: var(--status-bad); background: rgba(244, 67, 54, 0.08); }
.conn-indicator.unknown { color: var(--text-subtle); background: rgba(255, 255, 255, 0.04); }

/* Kick button (host only) */
.kick-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    color: var(--text-muted);
    background: transparent;
    border: 1px solid var(--border-subtle);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
}
.kick-btn:hover {
    background: rgba(244, 67, 54, 0.12);
    color: var(--status-bad);
    border-color: var(--status-bad);
    transform: scale(1.1);
}
.kick-btn:active {
    transform: scale(0.95);
}
.kick-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Empty people state */
.people-empty {
    padding: var(--space-8) var(--space-4);
    text-align: center;
    color: var(--text-subtle);
    font-size: var(--text-sm);
}

/* ============================================================
   19. CONTEXT MENU
   ============================================================ */
.context-menu {
    position: fixed;
    background: var(--bg-glass-strong);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--space-1);
    z-index: var(--z-dropdown);
    min-width: 160px;
    box-shadow: var(--shadow-md);
    animation: popIn var(--dur-fast) var(--ease-spring);
}
.ctx-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}
.ctx-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.ctx-item svg { opacity: 0.7; }

/* ============================================================
   20. EMOJI PICKER
   ============================================================ */
.emoji-picker {
    position: fixed;
    background: var(--bg-glass-strong);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-full);
    padding: var(--space-2) var(--space-3);
    display: flex;
    gap: var(--space-2);
    z-index: var(--z-dropdown);
    box-shadow: var(--shadow-md);
    animation: popIn var(--dur-fast) var(--ease-spring);
}
.emoji-option {
    font-size: var(--text-xl);
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease-spring);
    line-height: 1;
}
.emoji-option:hover { transform: scale(1.25); }

/* ============================================================
   21. SETTINGS MODAL
   ============================================================ */
/* Modals use opacity + transform for a smooth open AND close animation.
   visibility is used purely for accessibility (screen readers + tab order),
   not for the visual transition — it would make the close animation
   disappear instantly because visibility is a step-function.
   display:none is applied via the .hidden class AFTER the close
   animation finishes (handled by JS listening for transitionend), OR
   immediately if the modal has no animation (e.g. SSR/no-JS).

   Pattern:
     .modal.hidden            → display:none, opacity:0, transform: closed
     .modal (no .hidden)      → display:flex, opacity:1, transform: open
   The CSS below sets the open state; the .hidden override below sets
   the closed state with display:none so the global .hidden rule wins
   for non-animated elements (toasts, dropdowns, etc.). For modals, the
   .hidden rule below OVERRIDES that with display:flex + opacity:0 so
   the close animation can play. JS removes .hidden for the next open.
*/
.modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    opacity: 1;
    visibility: visible;
    transition: opacity var(--dur-normal) var(--ease-out),
                visibility 0s linear 0s;
}
.modal.hidden {
    /* Override global .hidden { display:none !important } so the close
       animation can play. The modal is invisible (opacity 0) but stays
       in the DOM so the opacity/transform transitions can run. */
    display: flex !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* visibility:hidden with transition-delay 0s on .modal and transition-delay
       of var(--dur-normal) here ensures visibility is held visible throughout
       the opacity close animation, then flips to hidden at the end. */
    transition: opacity var(--dur-normal) var(--ease-out),
                visibility 0s linear var(--dur-normal);
}
.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 1;
    transition: opacity var(--dur-normal) var(--ease-out);
}
.modal.hidden .modal-backdrop { opacity: 0; }
.modal-content {
    position: relative;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 760px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    /* Open: opacity 1, scale 1, no translateY.
       Close: opacity 0, scale 0.94, slight translateY down. */
    opacity: 1;
    transform: scale(1) translateY(0);
    transition: opacity var(--dur-normal) var(--ease-out),
                transform var(--dur-normal) var(--ease-spring);
}
.modal.hidden .modal-content {
    opacity: 0;
    transform: scale(0.94) translateY(12px);
}
/* Keyframe (kept for documentation / fallback use) */
@keyframes modalSlideUp {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}
.modal-header h2 {
    font-size: var(--text-lg);
    font-weight: 600;
    letter-spacing: var(--tracking-tight);
}

.modal-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Settings nav */
.settings-nav {
    width: 200px;
    border-right: 1px solid var(--border-subtle);
    padding: var(--space-3);
    overflow-y: auto;
    flex-shrink: 0;
    background: var(--bg-base);
}
.nav-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-weight: 500;
    text-align: left;
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
    margin-bottom: var(--space-1);
}
.nav-btn:hover {
    background: var(--bg-hover);
    color: var(--text-secondary);
}
.nav-btn.active {
    background: var(--white);
    color: var(--black);
}
.nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Settings content */
.settings-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-6);
}
.settings-panel {
    display: none;
}
.settings-panel.active {
    display: block;
    animation: panelFadeSlide var(--dur-normal) var(--ease-out);
}
@keyframes panelFadeSlide {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.setting-section {
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--border-subtle);
}
.setting-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.setting-label {
    display: block;
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}
.setting-label-sm {
    display: block;
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-bottom: var(--space-1);
    font-weight: 500;
}
.setting-hint {
    display: block;
    margin-top: var(--space-2);
    color: var(--text-subtle);
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
}

.setting-section input[type="text"],
.setting-section input[type="url"] {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    transition: border-color var(--dur-fast) var(--ease-out);
}
.setting-section input:focus {
    border-color: var(--border-focus);
    outline: none;
}

/* In settings, the glass-select container takes the place of selects */
.setting-section .glass-select-container {
    width: 100%;
    max-width: 100%;
    margin-bottom: var(--space-2);
}
.setting-section .glass-select-display {
    padding: var(--space-3) var(--space-4);
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    border: 1px solid var(--border-default);
    box-shadow: none;
    direction: ltr;
}
.setting-section .glass-select-display:hover {
    border-color: var(--border-strong);
    background: var(--gray-800);
}
.setting-section .glass-select-display.active {
    border-color: var(--border-focus);
}
.setting-section .glass-select-dropdown {
    border-radius: var(--radius-sm);
    direction: ltr;
}
.setting-section .glass-select-option {
    text-align: left;
}

.field-group { margin-bottom: var(--space-3); }
.field-row { display: flex; gap: var(--space-3); }
.field-row > .field-group { flex: 1; margin-bottom: 0; }
.field-row input[type="color"] {
    height: 44px;
    padding: var(--space-1);
    cursor: pointer;
    width: 100%;
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
}

/* Toggle row */
.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}
.toggle-label { font-weight: 500; }

/* Switch */
.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch-track {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--gray-600);
    border-radius: var(--radius-full);
    transition: background var(--dur-fast) var(--ease-out);
}
.switch-track::before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    left: 3px;
    top: 3px;
    background: var(--white);
    border-radius: 50%;
    transition: transform var(--dur-fast) var(--ease-spring);
}
.switch input:checked + .switch-track { background: var(--white); }
.switch input:checked + .switch-track::before {
    transform: translateX(18px);
    background: var(--black);
}

.section-toast {
    display: inline-block;
    margin-top: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    border: 1px solid var(--border-subtle);
}
.section-toast.success {
    background: rgba(255,255,255,0.06);
    color: var(--text-secondary);
}
.section-toast.error {
    background: rgba(255,255,255,0.04);
    color: var(--text-muted);
}

/* Camera preview */
.camera-preview {
    width: 100%;
    max-width: 400px;
    aspect-ratio: 4/3;
    background: var(--black);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-default);
    margin-top: var(--space-2);
    object-fit: cover;
}

/* Mic test */
.mic-test-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-2);
}
.mic-meter {
    flex: 1;
    height: 6px;
    background: var(--bg-elevated);
    border-radius: var(--radius-full);
    overflow: hidden;
}
#mic-meter-fill {
    height: 100%;
    width: 0;
    background: var(--white);
    transition: width 0.05s linear;
}

/* Slider */
.slider-input {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: var(--gray-600);
    border-radius: var(--radius-full);
    margin-top: var(--space-2);
    outline: none;
}
.slider-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--white);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}
.slider-input::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: none;
    border-radius: 50%;
    background: var(--white);
    cursor: pointer;
}

.info-box {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* ============================================================
   22. TOASTS
   ============================================================ */
.toast-container {
    position: fixed;
    bottom: calc(var(--call-controls-height) + var(--space-4) + var(--safe-bottom));
    left: var(--space-5);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: 320px;
    pointer-events: none;
}
.toast {
    padding: var(--space-3) var(--space-4);
    background: var(--bg-glass-strong);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    box-shadow: var(--shadow-md);
    font-size: var(--text-sm);
    /* Initial state (before .toast-shown is applied) */
    opacity: 0;
    transform: translateY(12px) scale(0.96);
    transition: opacity var(--dur-normal) var(--ease-out),
                transform var(--dur-normal) var(--ease-spring);
    pointer-events: auto;
    max-width: 100%;
    will-change: opacity, transform;
}
.toast.toast-shown {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.toast.toast-removing {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
    pointer-events: none;
}
/* Legacy keyframe kept for backwards compatibility. */
@keyframes toastSlideIn {
    from { opacity: 0; transform: translateY(8px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.toast.toast-success { border-left: 3px solid var(--status-good); }
.toast.toast-error   { border-left: 3px solid var(--status-bad); }
.toast.toast-warning { border-left: 3px solid var(--status-medium); }

/* ============================================================
   23. (Backdrop removed — sidebar closes on outside click instead)
   ============================================================ */

/* ============================================================
   24. RECONNECT OVERLAY
   ============================================================ */
.screen-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: var(--z-critical);
    display: flex;
    align-items: center;
    justify-content: center;
}
.overlay-content {
    text-align: center;
    color: var(--text-primary);
}
.overlay-content .overlay-spinner { margin: 0 auto var(--space-4); }

/* ============================================================
   25. FOCUS MODE & THEATER MODE
   *
   * FOCUS MODE:
   *   - Closes the sidebar (chat) if open
   *   - Dims the strip (cameras + screen shares) and the topbar
   *   - Does NOT enlarge primary; layout stays the same
   *   - User can still see/hover the strip to bring it back temporarily
   *   - Call controls stay visible but dimmed
   *
   * THEATER MODE (true fullscreen-within-app):
   *   - Closes the sidebar (chat) if open
   *   - Hides the strip entirely (not just dimmed)
   *   - Hides the topbar entirely
   *   - Primary fills the WHOLE app (not just stage) — true cinematic
   *   - Player controls + call controls auto-hide with show-controls logic
   * ============================================================ */

/* ---- FOCUS MODE ---- */
.app.focus-mode .sidebar {
    width: 0 !important;
    border-left-color: transparent !important;
}
.app.focus-mode .stage-strip {
    opacity: 0.15;
}
.app.focus-mode .stage-strip:hover {
    opacity: 1;
}
/* In focus mode, topbar follows the same show-controls logic as player controls */
.app.focus-mode .stage-topbar {
    opacity: 0;
    transform: translateY(-100%);
    pointer-events: none;
}
.app.focus-mode .stage.show-controls .stage-topbar,
.app.focus-mode .stage.paused .stage-topbar {
    opacity: 1;
    transform: translateY(0);
}
.app.focus-mode .stage-topbar > * { pointer-events: auto; }

/* ---- THEATER MODE = native fullscreen on #video-stage ----
   When theater mode is active, JS calls videoStage.requestFullscreen().
   The browser handles making it fill the screen. The CSS below styles
   the stage when it's the fullscreen element. */
/* When #video-stage IS the fullscreen element */
#video-stage:fullscreen,
#video-stage:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    background: var(--black);
}
#video-stage:fullscreen .stage-grid,
#video-stage:-webkit-full-screen .stage-grid {
    padding: 0;
    gap: 0;
}
#video-stage:fullscreen .stage-primary,
#video-stage:-webkit-full-screen .stage-primary {
    width: 100%;
    height: 100%;
}
#video-stage:fullscreen .stage-tile.is-focused,
#video-stage:-webkit-full-screen .stage-tile.is-focused {
    border-radius: 0;
    border: none;
}
#video-stage:fullscreen .stage-strip,
#video-stage:-webkit-full-screen .stage-strip {
    display: none;
}
#video-stage:fullscreen .stage-topbar,
#video-stage:-webkit-full-screen .stage-topbar {
    padding-top: var(--space-4);
}

/* When sidebar is open on desktop, stage shrinks (handled by flex) */
/* Sidebar collapse is now handled by width: 0 (see section 15) */

/* ============================================================
   26. RESPONSIVE — DESKTOP DEFAULTS (already set above)
   ============================================================ */

/* ============================================================
   27. RESPONSIVE — TABLET (<= 1024px)
   ============================================================ */
@media (max-width: 1024px) {
    :root {
        --sidebar-width: 300px;
    }
    .stage-tile.is-secondary { width: 140px; }
    .brand-name { display: none; }
    .modal { padding: var(--space-4); }
    .modal-content { max-width: 95vw; }
    .settings-nav { width: 180px; }
}

/* ============================================================
   28. RESPONSIVE — MOBILE (<= 768px)
   ============================================================ */
@media (max-width: 768px) {
    :root {
        --topbar-height: 50px;
        --call-controls-height: 50px;
    }

    /* App uses full dynamic viewport height — dvh MUST come after vh fallback */
    .app {
        height: 100vh;
        height: 100dvh;
    }

    /* Sidebar = full-screen drawer (overrides desktop collapse behavior) */
    .sidebar {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 100% !important;
        max-width: 360px;
        transform: translateX(100%);
        border-left: 1px solid var(--border-subtle);
        z-index: var(--z-sidebar);
        box-shadow: var(--shadow-lg);
        overflow: visible;
    }
    .sidebar > * {
        min-width: 0;
    }
    .sidebar.open {
        transform: translateX(0);
        width: 100% !important;
    }
    .app.focus-mode .sidebar,
    .app.theater-mode .sidebar {
        transform: translateX(100%) !important;
        width: 100% !important;
        border-left-color: transparent !important;
    }
    .sidebar-handle { display: block; }

    /* Stage grid — strip at bottom, smaller tiles */
    .stage-grid {
        padding: var(--space-1);
        gap: var(--space-1);
    }
    .stage-tile.is-secondary {
        width: 96px;
        border-radius: var(--radius-sm);
    }
    .stage-tile.is-secondary .stage-tile-overlay { opacity: 1; }
    .stage-tile-badge {
        font-size: 10px;
        padding: 2px 6px;
    }

    /* Top bar — compact */
    .stage-topbar {
        padding: var(--space-2) var(--space-3);
        padding-top: calc(var(--space-2) + var(--safe-top));
    }
    .room-badge { display: none; }
    .icon-btn { width: 34px; height: 34px; }

    /* Player controls — compact (inside video-player, bottom: 0) */
    .player-controls {
        bottom: 0;
        width: 100%;
        padding: var(--space-6) var(--space-2) var(--space-2);
        border-radius: 0;
    }
    .player-btn { width: 32px; height: 32px; }
    .player-btn svg { width: 16px !important; height: 16px !important; }
    .time-display { font-size: 11px; }

    /* Call controls — compact (static bar at bottom of app-main) */
    .call-controls {
        padding: var(--space-1) var(--space-2);
        padding-bottom: calc(var(--space-2) + var(--safe-bottom));
        gap: var(--space-1);
    }
    .call-btn { width: 40px; height: 40px; }
    .call-btn svg { width: 18px !important; height: 18px !important; }
    .call-divider { height: 20px; margin: 0; }

    /* Hide tooltips on touch */
    .icon-btn[data-tip]:hover::after,
    .call-btn[data-tip]:hover::after,
    .player-btn[data-tip]:hover::after { display: none; }

    /* Settings modal — full screen */
    .modal { padding: 0; }
    .modal-content {
        max-width: 100vw;
        max-height: 100vh;
        border-radius: 0;
    }
    .modal-body { flex-direction: column; }
    .settings-nav {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border-subtle);
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        padding: var(--space-2);
        gap: var(--space-1);
        flex-shrink: 0;
    }
    .nav-btn {
        white-space: nowrap;
        margin-bottom: 0;
        padding: var(--space-2) var(--space-3);
    }
    .nav-label { font-size: var(--text-xs); }
    .settings-content { padding: var(--space-4); }

    /* Login */
    .login-card { padding: var(--space-8) var(--space-6); }

    /* Toasts — above call controls */
    .toast-container {
        bottom: calc(var(--call-controls-height) + var(--space-10) + var(--safe-bottom));
        left: var(--space-3);
        right: var(--space-3);
        max-width: none;
    }

    /* Center play button */
    .stage-center-play { width: 56px; height: 56px; }
    .stage-center-play svg { width: 28px; height: 28px; }

    /* Empty state */
    .stage-empty-title { font-size: var(--text-lg); }
    .stage-empty-subtitle { font-size: var(--text-xs); }

    /* People table — hide cam column to save space */
    .people-table .col-cam { display: none; }
}

/* ============================================================
   29. RESPONSIVE — SMALL PHONES (<= 480px)
   ============================================================ */
@media (max-width: 480px) {
    .stage-tile.is-secondary { width: 80px; }
    .stage-topbar { padding: var(--space-2); }
    .icon-btn { width: 32px; height: 32px; }
    .player-controls {
        bottom: calc(var(--call-controls-height) + var(--space-1) + var(--safe-bottom));
    }
    .call-btn { width: 38px; height: 38px; }
    .call-btn svg { width: 17px !important; height: 17px !important; }
    .messages { padding: var(--space-3); gap: var(--space-2); }
    .msg { padding: var(--space-2) var(--space-3); }
    /* People table — hide connection column to save space */
    .people-table .col-conn { display: none; }
    .people-table thead th,
    .people-table td { padding: var(--space-2); }
}

/* ============================================================
   30. RESPONSIVE — LANDSCAPE MOBILE
   ============================================================ */
@media (max-height: 500px) and (orientation: landscape) {
    .player-controls { bottom: 0; }
    .login-card { padding: var(--space-6) var(--space-4); }
    .login-title { font-size: var(--text-lg); }
}

/* ============================================================
   31. FULLSCREEN MODE — handled by :fullscreen rules above (section 25)
   Both theater mode and the fullscreen button use native Fullscreen API
   on #video-stage. The CSS in section 25 handles all styling.
   ============================================================ */

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

/* ============================================================
   33. PRINT (just in case)
   ============================================================ */
@media print {
    body { background: white; color: black; }
    .app, .login-screen { display: none; }
}


/* ============================================================
   34. LOGIN SCREEN — PERMISSION TOGGLE BUTTONS
   Two toggle buttons (mic + camera) on the login screen let the
   user grant permission and pre-toggle their state before joining.
   The yellow exclamation indicator (`.perm-warning`) appears on
   the button if permission is denied.
   ============================================================ */
.login-perm-toggles {
    display: flex;
    gap: var(--space-2);
    justify-content: center;
    margin-bottom: var(--space-2);
}
.login-perm-btn {
    position: relative;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-muted);
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-spring);
}
.login-perm-btn:hover {
    background: var(--gray-800);
    color: var(--text-primary);
    border-color: var(--border-strong);
}
.login-perm-btn:active {
    transform: scale(0.94);
}
/* Granted + ON: white-filled (active) state */
.login-perm-btn.is-on {
    background: var(--white);
    color: var(--black);
    border-color: var(--white);
}
/* Unknown/not-asked OR Granted + OFF: gray icon (default style) */
.login-perm-btn.is-off {
    color: var(--text-muted);
}

/* ============================================================
   35. PERMISSION WARNING INDICATOR
   A small yellow circle with "!" overlay shown on the call-control
   mic/camera buttons AND the login-screen permission toggles when
   permission is denied. Has a subtle pulse animation. Disappears
   as soon as permission is granted.
   ============================================================ */
.perm-warning {
    display: none;
    position: absolute;
    top: -3px;
    right: -3px;
    width: 17px;
    height: 17px;
    background: #ffb300;
    color: #000;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    border: 1.5px solid var(--bg-base);
    pointer-events: none;
    z-index: 2;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    transition: transform var(--dur-fast) var(--ease-spring);
}
.perm-warning.visible {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: permWarningPulse 1.6s var(--ease-in-out) infinite;
}
@keyframes permWarningPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.12); opacity: 0.85; }
}

/* ============================================================
   36. PLAY-SYNC LOADER
   Shown inside the video player while waiting for all users to be
   ready (prepare-play cycle). Covers only the video area (not the
   bottom controls) and fades in smoothly.
   ============================================================ */
.play-sync-loader {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: var(--z-overlay);
    text-align: center;
    pointer-events: none;
    opacity: 1;
    transition: opacity var(--dur-normal) var(--ease-out);
}
.play-sync-loader.hidden {
    opacity: 0;
    pointer-events: none;
    /* Keep display: flex so the fade-out transition can play.
       Override the global .hidden { display: none !important; }. */
    display: flex !important;
}
.play-sync-loader .overlay-spinner {
    width: 40px;
    height: 40px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-top-color: var(--white);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
.play-sync-loader .overlay-text {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    letter-spacing: var(--tracking-wide);
}
.play-sync-loader .overlay-sub {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: -8px;
    max-width: 320px;
    text-align: center;
}
/* When play-sync-loader is visible, the center-play button should hide
   so they don't visually conflict. */
.play-sync-loader:not(.hidden) ~ .stage-center-play,
.video-player:has(.play-sync-loader:not(.hidden)) .stage-center-play {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ============================================================
   36b. BUFFERING INDICATOR (local-only, bottom-right pill)
   A minimal pill that appears when the local <video> is buffering.
   Distinct from the play-sync loader (which is for multi-user sync).
   Uses a smaller, less intrusive design so the user can still see
   most of the video while it buffers.
   ============================================================ */
.buffering-indicator {
    position: absolute;
    bottom: 72px;
    right: 16px;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    color: var(--text-primary);
    font-size: var(--text-xs);
    font-weight: 500;
    z-index: var(--z-overlay);
    pointer-events: none;
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--dur-normal) var(--ease-out),
                transform var(--dur-normal) var(--ease-out);
}
.buffering-indicator.hidden {
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    /* Keep display: flex so the fade-out transition can play. */
    display: flex !important;
}
.buffering-spinner {
    width: 14px;
    height: 14px;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    border-top-color: var(--white);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
.buffering-text {
    letter-spacing: var(--tracking-wide);
}

/* ============================================================
   36c. YOUTUBE-STYLE DOUBLE-TAP SEEK OVERLAY
   Two half-screen overlays (left = back, right = forward) that flash
   for ~700ms when the user double-taps/double-clicks. Smooth scale +
   opacity + glow animation; no layout shift. Stays above the video
   but below the controls.
   ============================================================ */
.seek-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 35%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    color: var(--white);
    z-index: var(--z-overlay);
    pointer-events: none;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 220ms var(--ease-out),
                transform 220ms var(--ease-out);
    /* Layered radial gradient — solid center fading to transparent at the
       opposite edge so the seek arrow feels anchored to the tap location. */
}
.seek-overlay-left {
    left: 0;
    background: radial-gradient(ellipse at 15% 50%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 70%);
}
.seek-overlay-right {
    right: 0;
    background: radial-gradient(ellipse at 85% 50%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 70%);
}
.seek-overlay.flash {
    opacity: 1;
    transform: scale(1);
}
.seek-overlay svg {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6));
}
.seek-overlay-left svg { transform: scaleX(1); }

.seek-overlay-amount {
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: var(--tracking-wide);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
/* Each subsequent double-tap (within 1.5s) re-flashes the overlay.
   The animation restarts by toggling the .flash class off and back on
   in app.js. */

/* ============================================================
   37. YOUTUBE-STYLE PLAYER SETTINGS MENU
   The menu has two layers: a main panel (list of categories) and
   sub-panels (one per category). Only one panel is visible at a
   time. Sub-panels slide in from the right with a smooth animation.
   ============================================================ */
.psm-viewport {
    position: relative;
    width: 100%;
    max-height: 70vh;
    overflow: hidden;
}
.psm-panel {
    width: 100%;
    display: flex;
    flex-direction: column;
    /* Sub-panels are absolutely positioned over the main panel and slide in
       from the right. */
    transition: transform var(--dur-normal) var(--ease-out),
                opacity var(--dur-normal) var(--ease-out);
}
.psm-panel.psm-main {
    /* Main panel is always in normal flow */
    position: relative;
    padding: var(--space-2);
    transform: translateX(0);
    opacity: 1;
}
.psm-panel.psm-sub {
    position: absolute;
    inset: 0;
    background: var(--bg-glass-strong);
    /* Hidden state: shifted right + transparent (off-screen) */
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
    overflow-y: auto;
    padding: var(--space-2);
}
/* When the parent menu has a `data-active-sub` attribute matching this
   sub-panel's `data-cat`, the sub-panel slides in and the main panel
   slides out to the left. */
.player-settings-menu[data-active-sub="quality"] .psm-panel.psm-sub[data-cat="quality"],
.player-settings-menu[data-active-sub="speed"] .psm-panel.psm-sub[data-cat="speed"],
.player-settings-menu[data-active-sub="subtitles"] .psm-panel.psm-sub[data-cat="subtitles"],
.player-settings-menu[data-active-sub="audio"] .psm-panel.psm-sub[data-cat="audio"] {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}
.player-settings-menu[data-active-sub] .psm-panel.psm-main {
    transform: translateX(-30%);
    opacity: 0;
    pointer-events: none;
}

/* Main-panel category items */
.psm-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--space-3) var(--space-2);
    gap: var(--space-2);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    text-align: left;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}
.psm-item:hover {
    background: var(--bg-hover);
}
.psm-item:active {
    background: var(--bg-active);
}
.psm-item-label {
    flex: 1;
    font-size: var(--text-sm);
    font-weight: 500;
}
.psm-item-value {
    font-size: var(--text-xs);
    color: var(--text-muted);
    flex-shrink: 0;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.psm-item-chevron {
    color: var(--text-muted);
    flex-shrink: 0;
    opacity: 0.7;
}

/* Volume row in the main panel */
.psm-volume-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-2);
}
.psm-volume-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    flex-shrink: 0;
}
.psm-volume-input {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: var(--gray-600);
    border-radius: var(--radius-full);
    outline: none;
    cursor: pointer;
}
.psm-volume-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--white);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}
.psm-volume-input::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: none;
    border-radius: 50%;
    background: var(--white);
    cursor: pointer;
}

/* Sub-panel header (back button) */
.psm-sub-header {
    display: flex;
    align-items: center;
    padding: var(--space-1) var(--space-1) var(--space-2);
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: var(--space-1);
}
.psm-back-btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-2);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out);
}
.psm-back-btn:hover {
    background: var(--bg-hover);
}
.psm-back-btn:active {
    background: var(--bg-active);
}
.psm-back-btn svg {
    color: var(--text-muted);
}

/* Sub-panel list (for selectable options) */
.psm-sub-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.psm-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    cursor: pointer;
    /* When rendered as a <button>, reset the default UA styles so the
       option looks identical to the div-based variant. */
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}
.psm-option:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.psm-option.selected {
    color: var(--text-primary);
    font-weight: 500;
}
.psm-option-check {
    display: none;
    color: var(--text-primary);
    flex-shrink: 0;
}
.psm-option.selected .psm-option-check {
    display: flex;
}

/* Sub-panel body (for non-list controls: toggles, selects, etc.) */
.psm-sub-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-1);
}
.psm-sub-divider {
    height: 1px;
    background: var(--border-subtle);
    margin: var(--space-2) 0;
}
/* Re-use existing .psm-row layout for rows inside sub-body */
.psm-sub-body .psm-row {
    padding: var(--space-2) var(--space-1);
}
.psm-sub-body .psm-row:not(:last-child) {
    border-bottom: none;
}

/* Hidden selects preserved for app.js compatibility */
.psm-hidden-select {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}

/* ============================================================
   38. MICRO-INTERACTION POLISH (cubic-bezier press feedback, hover lift,
   smoothness across all interactive elements)
   ============================================================ */
/* Make press-down + release feel snappier with a spring easing on the
   transform property. Background and color stay on a gentler ease-out
   so they don't feel "bouncy" — only the size/position springs. */
.call-btn,
.player-btn,
.icon-btn,
.btn-primary,
.btn-secondary,
.btn-ghost,
.kick-btn,
.tab-btn,
.nav-btn,
.login-perm-btn,
.psm-item,
.psm-back-btn,
.psm-option {
    /* Two separate transitions: spring for transforms (tactile), ease-out
       for everything else (visual). */
    transition:
        background var(--dur-fast) var(--ease-out),
        color var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out),
        box-shadow var(--dur-fast) var(--ease-out),
        transform var(--dur-fast) var(--ease-spring),
        opacity var(--dur-fast) var(--ease-out);
}
/* Hover lift — subtle translateY(-1px) on most buttons so the user
   perceives them as physical objects that can be pressed. Active
   (clicked) state sinks them down. */
.call-btn:hover,
.player-btn:hover,
.icon-btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-ghost:hover,
.tab-btn:hover,
.nav-btn:hover,
.login-perm-btn:hover {
    transform: translateY(-1px);
}
.call-btn:active,
.player-btn:active,
.icon-btn:active,
.btn-primary:active,
.btn-secondary:active,
.btn-ghost:active,
.tab-btn:active,
.nav-btn:active,
.login-perm-btn:active,
.kick-btn:active,
.psm-item:active,
.psm-back-btn:active,
.psm-option:active {
    transform: translateY(0) scale(0.96);
}

/* Subtle scale-on-focus for inputs (already mostly handled by :focus,
   but add a tiny transform for added polish). */
.setting-section input[type="text"]:focus,
.setting-section input[type="url"]:focus,
.login-form input:focus,
#chat-input:focus,
#kick-reason-input:focus {
    transform: scale(1.005);
    transition: border-color var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-spring);
}

/* ============================================================
   38b. STAGE TILE FOCUS — smoother swap between movie/peer tiles
   When the user clicks a peer tile to focus it (or clicks the movie
   to refocus), the focus transition should feel like the two tiles
   swap positions smoothly — not jump. We add a longer transform
   transition and a subtle scale so the focus change has weight.
   ============================================================ */
.stage-tile.is-secondary {
    /* The is-secondary → is-focused swap should be smooth. */
    transition:
        border-color var(--dur-normal) var(--ease-out),
        transform var(--dur-slow) var(--ease-spring),
        opacity var(--dur-normal) var(--ease-out),
        box-shadow var(--dur-normal) var(--ease-out),
        width var(--dur-slow) var(--ease-out),
        height var(--dur-slow) var(--ease-out);
}
.stage-tile.is-secondary:hover {
    border-color: var(--white);
    transform: translateY(-2px) scale(1.03);
    box-shadow: var(--shadow-md);
}
.stage-tile.is-focused {
    transition:
        border-color var(--dur-normal) var(--ease-out),
        transform var(--dur-slow) var(--ease-spring),
        opacity var(--dur-normal) var(--ease-out),
        box-shadow var(--dur-normal) var(--ease-out),
        width var(--dur-slow) var(--ease-out),
        height var(--dur-slow) var(--ease-out),
        border-radius var(--dur-normal) var(--ease-out);
}

/* ============================================================
   38c. SETTINGS PANEL — smoother tab-to-tab slide animation
   When the user clicks a settings tab, the panel content fades and
   slides slightly to the right (instead of instantly swapping). This
   matches the user's mental model of "navigating" between sections.
   ============================================================ */
.settings-panel {
    transition: opacity var(--dur-normal) var(--ease-out),
                transform var(--dur-normal) var(--ease-out);
}
.settings-panel:not(.active) {
    opacity: 0;
    transform: translateX(8px);
    pointer-events: none;
}
.settings-panel.active {
    opacity: 1;
    transform: translateX(0);
    animation: panelFadeSlide var(--dur-slow) var(--ease-out);
}

/* ============================================================
   38d. SIDEBAR OPEN/CLOSE — snappier feel
   The sidebar already had a width transition; bump the easing to
   the spring curve so it overshoots slightly on open/close. This
   matches the "swipe in" feel of mobile drawers.
   ============================================================ */
.sidebar {
    transition:
        width var(--dur-slow) var(--ease-snap),
        border-color var(--dur-fast) var(--ease-out);
}

/* ============================================================
   38e. PLAYER SETTINGS MENU — slide-down on open
   The YouTube-style PSM should feel like it slides down from the
   gear button rather than just appearing. Add a translateY + scale
   transition so the open animation feels physical.
   ============================================================ */
.player-settings-menu {
    transform-origin: bottom right;
}
.player-settings-menu:not(.hidden) {
    animation: psmOpen var(--dur-normal) var(--ease-spring);
}
@keyframes psmOpen {
    from { opacity: 0; transform: translateY(8px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================================
   38f. PARTICIPANT ROW ADD/REMOVE — smoother fade
   Override the rowFadeIn keyframe with a longer, gentler curve so
   new rows slide in from above with a slight overshoot.
   ============================================================ */
@keyframes rowFadeIn {
    0%   { opacity: 0; transform: translateY(-8px); }
    60%  { opacity: 1; transform: translateY(2px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   38g. MUTE BUTTON — visible press feedback
   When the user clicks mute/unmute, the icon should swap with a
   quick scale pulse so the click feels confirmed.
   ============================================================ */
#mute-btn .player-btn,
.call-btn.mic-toggle,
.call-btn.camera-toggle {
    transition: transform var(--dur-fast) var(--ease-spring),
                background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}

/* ============================================================
   38h. PROGRESS BAR — wider on hover with smooth grow
   The progress bar already grows on hover, but the grow should be
   smooth (already had it). Strengthen the visual so it feels like
   the bar is being grabbed.
   ============================================================ */
.player-progress {
    transition: height var(--dur-fast) var(--ease-spring);
}

/* ============================================================
   38i. REDUCED MOTION — respect user's OS preference
   If the user has set "reduce motion" in their OS, drop all the
   spring/transition timing to near-instant so the app still works
   but feels static. This is a key accessibility best practice.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   39. RECONNECT OVERLAY — smooth fade-in
   ============================================================ */
.screen-overlay {
    animation: fadeIn var(--dur-normal) var(--ease-out);
}

/* ============================================================
   40. END OF ADDITIONS
   ============================================================ */