/* ═══════════════════════════════════════════════════════════════
   ITHUB CLASSROOM — PREMIUM REDESIGN v2.0
   Bootstrap 5 enhanced · Dark Pro Theme · Revenue-Grade UI
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Syne:wght@700;800&display=swap');

/* ── ROOT TOKENS ─────────────────────────────────────────────── */
:root {
    --black: #000000;
    --surface-1: #000000;
    --surface-2: #13131a;
    --surface-3: #1a1a24;
    --surface-4: #22222f;
    --border: rgba(255,255,255,0.06);
    --border-hover: rgba(255,255,255,0.14);
    --white: #ffffff;
    --text-1: #f0f0f8;
    --text-2: #9898b8;
    --text-3: #5a5a7a;
    --accent: #00e5b0;
    --accent-dim: #00b887;
    --accent-glow: rgba(0,229,176,0.18);
    --accent-bg: rgba(0,229,176,0.08);
    --blue: #4f8ef7;
    --blue-dim: #2563eb;
    --blue-glow: rgba(79,142,247,0.2);
    --red: #ff4d6d;
    --red-dim: #c0392b;
    --amber: #f59e0b;
    --purple: #a855f7;
    --green: #22c55e;
    --font: 'Space Grotesk', sans-serif;
    --mono: 'JetBrains Mono', monospace;
    --display: 'Syne', sans-serif;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 24px rgba(0,0,0,0.5);
    --shadow-accent: 0 0 24px var(--accent-glow);
    --shadow-blue: 0 0 20px var(--blue-glow);
    --topbar-h: 60px;
    --sidebar-w: 200px;
    --right-w: 280px;
}

/* ── RESET + BASE ────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    overflow: hidden;
    background: var(--black);
    color: var(--text-1);
    font-family: var(--font);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

    /* Noise texture overlay for depth */
    body::before {
        content: '';
        position: fixed;
        inset: 0;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
        pointer-events: none;
        z-index: 9999;
        opacity: 0.4;
    }

/* ── SCROLLBAR ───────────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--surface-4);
    border-radius: 99px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--text-3);
    }

/* ═══════════════════════════════════════════════════════════════
   TOP BAR
   ═══════════════════════════════════════════════════════════════ */
.cr-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.25rem;
    background: var(--surface-1);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    height: var(--topbar-h);
    gap: 1rem;
    position: relative;
    z-index: 100;
}

    /* Subtle gradient accent line at bottom of topbar */
    .cr-topbar::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--blue) 70%, transparent);
        opacity: 0.3;
    }

.cr-brand {
    font-family: var(--display);
    font-size: 1rem;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: -0.02em;
    text-shadow: 0 0 20px var(--accent-glow);
}

.cr-session-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-1);
    letter-spacing: -0.01em;
    border-left: 1px solid var(--border);
    padding-left: 0.9rem;
    margin-left: 0.3rem;
}

/* ── LIVE badge ── */
.cr-badge-live {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(255,77,109,0.15);
    color: var(--red);
    font-size: 0.62rem;
    font-weight: 800;
    padding: 0.22rem 0.6rem;
    border-radius: 99px;
    border: 1px solid rgba(255,77,109,0.3);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    animation: pulseBadge 2s ease infinite;
}

    .cr-badge-live i {
        font-size: 0.45rem;
    }

@keyframes pulseBadge {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(255,77,109,0.3);
    }

    50% {
        opacity: 0.75;
        box-shadow: 0 0 0 4px rgba(255,77,109,0);
    }
}

/* ── Recording banner (consent/transparency, shown to everyone) ── */
.recording-banner {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: rgba(255,77,109,0.12);
    color: var(--red);
    border-bottom: 1px solid rgba(255,77,109,0.3);
    font-size: 0.74rem;
    font-weight: 600;
    padding: 0.45rem 1rem;
    text-align: center;
}

    .recording-banner .recording-dot {
        font-size: 0.55rem;
        animation: pulseBadge 2s ease infinite;
    }

/* ── Record button active state ── */
.btn-tb#btnRecord.active-record {
    background: rgba(255,77,109,0.15);
    border-color: rgba(255,77,109,0.4);
    color: var(--red);
}

    .btn-tb#btnRecord.active-record #recordIcon {
        animation: pulseBadge 2s ease infinite;
    }

/* ── Bottom-nav Record menu item active state ── */
#menuRecord.active-record {
    color: var(--red);
}

    #menuRecord.active-record #recordIconBottom {
        animation: pulseBadge 2s ease infinite;
    }

/* ── Phase chip ── */
.cr-phase-chip {
    background: var(--accent-bg);
    color: var(--accent);
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.28rem 0.75rem;
    border: 1px solid rgba(0,229,176,0.3);
    border-radius: var(--radius-sm);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ── Timer ── */
.cr-timer {
    font-family: var(--mono);
    font-size: 0.95rem;
    font-weight: 700;
    background: var(--surface-3);
    color: var(--accent);
    padding: 0.32rem 0.85rem;
    border: 1px solid rgba(0,229,176,0.2);
    border-radius: var(--radius-sm);
    letter-spacing: 0.05em;
    text-shadow: 0 0 12px var(--accent-glow);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* ── Topbar action buttons ── */
.cr-topbar-actions {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.btn-tb {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--surface-3);
    border: 1px solid var(--border);
    color: var(--text-2);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.38rem 0.85rem;
    cursor: pointer;
    transition: all 0.18s ease;
    font-family: var(--font);
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

    .btn-tb:hover {
        background: var(--surface-4);
        border-color: var(--border-hover);
        color: var(--text-1);
        transform: translateY(-1px);
        box-shadow: var(--shadow-sm);
    }

    .btn-tb.danger {
        background: rgba(255,77,109,0.08);
        border-color: rgba(255,77,109,0.25);
        color: var(--red);
    }

        .btn-tb.danger:hover {
            background: rgba(255,77,109,0.18);
            border-color: rgba(255,77,109,0.5);
            color: #fff;
        }

/* ── Primary accent button ── */
.btn-accent {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--accent);
    border: none;
    color: #000;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.45rem 1rem;
    cursor: pointer;
    transition: all 0.18s ease;
    font-family: var(--font);
    border-radius: var(--radius-sm);
    letter-spacing: 0.01em;
}

    .btn-accent:hover {
        filter: brightness(1.1);
        box-shadow: var(--shadow-accent);
        transform: translateY(-1px);
    }

/* ═══════════════════════════════════════════════════════════════
   MOBILE SESSION STRIP
   ═══════════════════════════════════════════════════════════════ */
.cr-mobile-session-strip {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════
   MAIN LAYOUT
   ═══════════════════════════════════════════════════════════════ */
.cr-body {
    display: flex;
    flex: 1;
    overflow: hidden;
    height: calc(100vh - var(--topbar-h));
    position: relative; /* positioning context for the collapse toggles below */
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════════════════════════ */
.cr-sidebar {
    width: var(--sidebar-w);
    background: var(--surface-1);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow-y: auto;
    transition: width 0.22s ease, min-width 0.22s ease;
}

    /* ── Collapsed state (left sidebar) ── */
    .cr-sidebar.collapsed {
        width: 0 !important;
        min-width: 0 !important;
        overflow: hidden;
        border-right-color: transparent;
    }

        .cr-sidebar.collapsed > * {
            opacity: 0;
            pointer-events: none;
        }

/* ── Collapse / expand toggle tabs ──
   These live as direct children of .cr-body (NOT inside .cr-sidebar/.cr-right)
   so they're never clipped by those panels' own overflow:hidden. Position is
   kept within .cr-body's bounds (no negative offsets) so .cr-body's overflow
   never clips them either. ── */
.cr-panel-toggle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 52px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 40;
    font-size: 0.65rem;
    transition: left 0.22s ease, right 0.22s ease, background 0.15s, color 0.15s;
}

    .cr-panel-toggle:hover {
        background: var(--accent-bg);
        color: var(--accent);
    }

#sidebarToggleBtn {
    left: var(--sidebar-w);
    border-radius: 0 8px 8px 0;
    border-left: none;
}

    #sidebarToggleBtn.collapsed {
        left: 0;
    }

#rightToggleBtn {
    right: var(--right-w);
    border-radius: 8px 0 0 8px;
    border-right: none;
}

    #rightToggleBtn.collapsed {
        right: 0;
    }



.cr-sidebar-section {
    padding: 0.85rem 1rem 0.5rem;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .cr-sidebar-section span {
        background: var(--surface-3);
        color: var(--text-2);
        font-size: 0.6rem;
        padding: 0.1rem 0.4rem;
        border-radius: 99px;
        font-weight: 700;
    }

#participantList {
    flex: 1;
}

/* ── Sidebar / chat empty states ── */
.sidebar-empty-state,
.chat-empty-state {
    flex: 1;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.3rem;
    padding: 2rem 1.5rem;
    color: var(--text-3);
}

    .sidebar-empty-state.show,
    .chat-empty-state.show {
        display: flex;
    }

    .sidebar-empty-state i,
    .chat-empty-state i {
        font-size: 2.1rem;
        color: var(--text-3);
        opacity: 0.55;
        margin-bottom: 0.6rem;
    }

    .sidebar-empty-state .ses-title,
    .chat-empty-state .ces-title {
        font-size: 0.88rem;
        font-weight: 700;
        color: var(--text-1);
    }

    .sidebar-empty-state .ses-desc,
    .chat-empty-state .ces-desc {
        font-size: 0.74rem;
        color: var(--text-3);
        max-width: 220px;
        line-height: 1.5;
    }

/* ── Participant item ── */
.participant-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
    cursor: default;
}

    .participant-item:hover {
        background: var(--surface-2);
    }

/* Instructor-only "turn camera off" control on each student row. Hidden
   until the row is hovered/focused so the list stays clean otherwise. */
.p-revoke-cam-btn {
    flex-shrink: 0;
    margin-left: auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-3);
    border: 1px solid var(--border);
    color: var(--text-3);
    font-size: 0.65rem;
    cursor: pointer;
    opacity: 0;
    transition: all 0.15s ease;
}

    .participant-item:hover .p-revoke-cam-btn,
    .p-revoke-cam-btn:focus-visible {
        opacity: 1;
    }

    .p-revoke-cam-btn:hover {
        background: rgba(255,77,109,0.2);
        border-color: rgba(255,77,109,0.4);
        color: var(--red);
    }

@media (hover: none) {
    .p-revoke-cam-btn {
        opacity: 1;
    }
}

.p-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-weight: 800;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--accent), var(--blue));
    color: #000;
    box-shadow: 0 2px 8px rgba(0,229,176,0.3);
}

    .p-avatar.student {
        background: linear-gradient(135deg, var(--blue), var(--purple));
        color: #fff;
        box-shadow: var(--shadow-blue);
    }

.p-info {
    flex: 1;
    min-width: 0;
}

.p-name {
    font-size: 0.73rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-1);
}

.p-role-tag {
    display: inline-block;
    font-size: 0.55rem;
    font-weight: 700;
    padding: 0.07rem 0.3rem;
    margin-top: 0.1rem;
    border-radius: 3px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

    .p-role-tag.instructor {
        background: var(--accent-bg);
        color: var(--accent);
        border: 1px solid rgba(0,229,176,0.25);
    }

    .p-role-tag.student {
        background: var(--blue-glow);
        color: var(--blue);
        border: 1px solid rgba(79,142,247,0.3);
    }

.p-you {
    font-size: 0.5rem;
    color: var(--text-3);
    margin-left: 0.15rem;
}

.p-status {
    font-size: 0.58rem;
    color: var(--green);
    margin-top: 0.1rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

    .p-status::before {
        content: '';
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--green);
        flex-shrink: 0;
    }

    .p-status.inactive {
        color: var(--text-3);
    }

        .p-status.inactive::before {
            background: var(--text-3);
        }

.p-mute-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-3);
    font-size: 0.6rem;
    cursor: pointer;
    transition: all 0.15s;
    padding: 0.22rem 0.4rem;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

    .p-mute-btn:hover {
        background: rgba(255,77,109,0.15);
        border-color: var(--red);
        color: var(--red);
    }

/* ═══════════════════════════════════════════════════════════════
   CENTER COLUMN
   ═══════════════════════════════════════════════════════════════ */
.cr-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

/* ── TABS ──
   .cr-tabs-list is its own horizontally-scrolling region so that when the
   tab labels don't all fit (mobile, narrow tablet), only the tabs scroll —
   .cr-timer is a pinned sibling that stays visible instead of scrolling
   away with them. */
.cr-tabs {
    display: flex;
    align-items: center;
    background: var(--surface-1);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    padding: 0 0.5rem;
    gap: 0;
}

.cr-tabs-list {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

    .cr-tabs-list::-webkit-scrollbar {
        display: none;
    }

.cr-tabs .cr-timer {
    flex-shrink: 0;
    margin-left: 0.75rem;
}

.cr-tab {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 1rem;
    height: 44px;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text-3);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.18s;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    font-family: var(--font);
    white-space: nowrap;
    flex-shrink: 0;
}

    .cr-tab:hover {
        color: var(--text-2);
    }

    .cr-tab.active {
        color: var(--accent);
        border-bottom-color: var(--accent);
    }

    .cr-tab .live-chip {
        font-size: 0.52rem;
        background: rgba(255,77,109,0.2);
        color: var(--red);
        padding: 0.1rem 0.35rem;
        border-radius: 99px;
        font-weight: 800;
        border: 1px solid rgba(255,77,109,0.3);
        letter-spacing: 0.06em;
        text-transform: uppercase;
        animation: pulseBadge 2s infinite;
    }

/* ── PANELS ── */
.cr-panels {
    flex: 1;
    display: flex;
    position: relative;
    min-height: 0;
    overflow: hidden;
}

.cr-panel {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    overflow: hidden;
}

    .cr-panel.active {
        display: flex;
    }

/* ═══════════════════════════════════════════════════════════════
   VIDEO GRID (CLASS VIEW) — Adaptive layout for any participant count
   ═══════════════════════════════════════════════════════════════ */
#panel-class {
    position: relative;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: var(--black);
}

#videoGrid {
    flex: 1;
    width: 100%;
    height: 100%;
    display: grid;
    gap: 5px;
    background: var(--black);
    padding: 6px;
    box-sizing: border-box;
    overflow: hidden;
    /* Default: 1 person — fill full area */
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-auto-rows: 1fr;
    align-content: stretch;
    justify-content: stretch;
}

    /* 2 participants — side by side */
    #videoGrid.peers-2 {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 1fr;
        grid-auto-rows: 1fr;
    }

    /* 3 participants — 2 top, 1 bottom full width */
    #videoGrid.peers-3 {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-auto-rows: 1fr;
    }

        #videoGrid.peers-3 .video-tile:last-child {
            grid-column: 1 / -1;
        }

    /* 4 participants — 2×2 grid */
    #videoGrid.peers-4 {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-auto-rows: 1fr;
    }

    /* 5 participants — 3 top, 2 bottom centered */
    #videoGrid.peers-5 {
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-auto-rows: 1fr;
    }

        #videoGrid.peers-5 .video-tile:nth-child(1),
        #videoGrid.peers-5 .video-tile:nth-child(2),
        #videoGrid.peers-5 .video-tile:nth-child(3) {
            grid-column: span 2;
        }

        #videoGrid.peers-5 .video-tile:nth-child(4) {
            grid-column: 2 / span 2;
        }

        #videoGrid.peers-5 .video-tile:nth-child(5) {
            grid-column: 4 / span 2;
        }

    /* 6 participants — 3×2 grid */
    #videoGrid.peers-6 {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-auto-rows: 1fr;
    }

    /* 7–9 participants — 3×3 grid */
    #videoGrid.peers-7,
    #videoGrid.peers-8,
    #videoGrid.peers-9 {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr);
        grid-auto-rows: 1fr;
    }

    /* 10–12 participants — 4×3 grid */
    #videoGrid.peers-10,
    #videoGrid.peers-11,
    #videoGrid.peers-12 {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(3, 1fr);
        grid-auto-rows: 1fr;
    }

    /* 13+ participants — 4-col scrollable */
    #videoGrid.peers-many {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: auto;
        grid-auto-rows: minmax(160px, 1fr);
        align-content: start;
        overflow-y: auto;
        height: 100%;
    }

    #videoGrid.gallery-mode {
        align-content: center;
        justify-content: center;
    }


/* ── Video tile ── */
.video-tile {
    position: relative;
    background: var(--surface-2);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    min-width: 0;
    /* Fill the grid cell completely — grid rows/cols control the size */
    cursor: pointer;
    border: 1px solid var(--border);
    transition: border-color 0.2s, box-shadow 0.2s;
    /* Stretch to fill the entire grid cell */
    align-self: stretch;
    justify-self: stretch;
}

    .video-tile:hover {
        border-color: rgba(0,229,176,0.2);
        box-shadow: 0 0 0 1px rgba(0,229,176,0.1);
    }

    .video-tile.speaking {
        border-color: var(--accent);
        box-shadow: 0 0 16px var(--accent-glow);
    }

    .video-tile video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        background: #000;
    }

/* Cam-off overlay — hidden by default; addVideoTile()/setTileCamOff() toggle
   the '.cam-off' class on the parent .video-tile to show it. Sits above the
   <video> element (z-index 2) so a black/blank feed never shows through. */
.cam-off-overlay {
    position: absolute;
    inset: 0;
    background: var(--surface-2);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    color: var(--text-3);
    font-size: 0.78rem;
    z-index: 2;
}

.video-tile.cam-off .cam-off-overlay {
    display: flex;
}

.cam-off-overlay .p-avatar {
    width: 52px;
    height: 52px;
    font-size: 1.1rem;
}

.cam-off-overlay i {
    font-size: 1.8rem;
}

/* Pin button */
.tile-pin-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border);
    color: var(--text-2);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    cursor: pointer;
    z-index: 5;
    transition: all 0.15s;
}

    .tile-pin-btn:hover {
        background: var(--accent);
        border-color: var(--accent);
        color: #000;
    }

.video-tile:hover .tile-pin-btn {
    display: flex;
}

/* Always show the pin/zoom button on touch devices — there is no hover */
@media (hover: none) {
    .tile-pin-btn {
        display: flex;
        background: rgba(0,0,0,0.5);
    }
}

/* ── Tap/click-to-zoom a single tile ──
   Blows one tile up to a large centered overlay without disturbing
   the underlying grid — works the same whether the grid is showing
   2 people or 20, and whether or not a screen share is active. */
.zoom-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(5,5,8,0.9);
    backdrop-filter: blur(4px);
    z-index: 400;
}

    .zoom-backdrop.show {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 3.5rem 1rem 1rem;
    }

.video-tile.zoomed {
    position: fixed;
    inset: 3.5rem 1rem 1rem;
    z-index: 401;
    max-width: 1100px;
    max-height: 100%;
    margin: 0 auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    border-color: var(--accent);
}

    .video-tile.zoomed video {
        object-fit: contain;
        background: #000;
    }

    .video-tile.zoomed .tile-pin-btn {
        display: flex;
        background: var(--accent);
        color: #000;
        border-color: var(--accent);
    }

/* Speaker mode */
#videoGrid.speaker-mode {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 5px;
}

    #videoGrid.speaker-mode .pinned-tile {
        flex: 1;
        min-height: 0;
        width: 100%;
        aspect-ratio: unset;
        border-color: rgba(0,229,176,0.3);
    }

    #videoGrid.speaker-mode .strip-tile {
        height: 120px;
        min-height: 120px;
        max-height: 120px;
        width: auto;
        aspect-ratio: 16 / 9;
        flex-shrink: 0;
    }

/* Role badge */
.role-badge {
    font-size: 0.55rem;
    font-weight: 700;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

    .role-badge.instructor {
        background: var(--accent-bg);
        color: var(--accent);
        border: 1px solid rgba(0,229,176,0.3);
    }

/* Mic-off badge */
.mic-off-badge {
    color: var(--red);
    font-size: 0.7rem;
    display: none;
    align-items: center;
}

/* Video label overlay */
.video-label-overlay {
    position: absolute;
    bottom: 0.55rem;
    left: 0.55rem;
    background: rgba(0,0,0,0.72);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.28rem 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: var(--radius-sm);
    z-index: 3;
    max-width: 80%;
    overflow: hidden;
    border: 1px solid var(--border);
}

    .video-label-overlay .live-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--accent);
        flex-shrink: 0;
        box-shadow: 0 0 6px var(--accent-glow);
    }

/* ── LOCAL VIDEO CONTROLS / BOTTOM NAV (desktop) ──
   Sits as its own full-width bar below the video panels — never overlaps
   the camera. On mobile this is overridden back to a floating pill
   (see the max-width:768px block further down). ── */
.local-controls {
    position: relative;
    bottom: auto;
    right: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    flex-shrink: 0;
    background: var(--surface-1);
    border-top: 1px solid var(--border);
    padding: 0.7rem 1rem;
    z-index: 10;
}

.local-ctrl {
    height: 40px;
    padding: 0 1.1rem;
    border-radius: 99px;
    border: 1px solid rgba(255,255,255,0.15);
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 700;
    font-family: var(--font);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--surface-3);
    color: #fff;
    transition: all 0.15s;
    white-space: nowrap;
    letter-spacing: 0.02em;
    position: relative;
}

    .local-ctrl i {
        font-size: 0.8rem;
    }

    .local-ctrl:hover {
        background: rgba(60,60,80,0.9);
        border-color: rgba(255,255,255,0.3);
        box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    }

    .local-ctrl.off,
    .local-ctrl.muted {
        background: rgba(255,77,109,0.2);
        border-color: rgba(255,77,109,0.4);
        color: var(--red);
    }

        .local-ctrl.off:hover,
        .local-ctrl.muted:hover {
            background: rgba(255,77,109,0.3);
            border-color: var(--red);
        }

    .local-ctrl.active {
        background: var(--accent-bg);
        border-color: rgba(0,229,176,0.4);
        color: var(--accent);
    }

    /* ── Pending state — while a camera request is awaiting the instructor's
       response. Button is disabled and shows a small spinner in place of
       feedback that would otherwise never come. ── */
    .local-ctrl.pending {
        background: var(--surface-4);
        border-color: var(--border-hover);
        color: var(--text-2);
        cursor: default;
        pointer-events: none;
        opacity: 0.85;
    }

        .local-ctrl.pending i {
            opacity: 0;
        }

        .local-ctrl.pending::after {
            content: '';
            position: absolute;
            left: 1.15rem;
            top: 50%;
            width: 12px;
            height: 12px;
            margin-top: -6px;
            border-radius: 50%;
            border: 2px solid rgba(255,255,255,0.2);
            border-top-color: var(--text-2);
            animation: spin 0.7s linear infinite;
        }

/* ── Quick reactions popover (opens above the Reactions button) ── */
.rxn-popover {
    display: none;
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 0.6rem;
    z-index: 50;
}

    .rxn-popover.show {
        display: grid;
    }

.rxn-popover {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.3rem;
}

.rxn-emoji-btn {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    background: var(--surface-3);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s;
}

    .rxn-emoji-btn:hover {
        background: var(--accent-bg);
        border-color: rgba(0,229,176,0.3);
        transform: translateY(-2px);
    }

/* ═══════════════════════════════════════════════════════════════
   SCREEN SHARE PANEL
   ═══════════════════════════════════════════════════════════════ */
#panel-screenshare {
    background: var(--black);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}



#screenShareVideo {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: none;
    border-radius: var(--radius-md);
}

    #screenShareVideo.fill-mode {
        object-fit: cover;
    }

.screenshare-fit-toggle {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 6;
    display: none;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    border-radius: 99px;
    background: rgba(13,13,18,0.85);
    border: 1px solid var(--border);
    color: var(--text-2);
    font-size: 0.68rem;
    font-weight: 700;
    cursor: pointer;
    backdrop-filter: blur(10px);
}

#panel-screenshare.has-strip .screenshare-fit-toggle,
#panel-screenshare .screenshare-fit-toggle.show {
    display: flex;
}

.screenshare-fit-toggle:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.screenshare-placeholder {
    text-align: center;
    color: var(--text-3);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

    .screenshare-placeholder i {
        font-size: 3rem;
        color: var(--text-3);
        display: block;
    }

    .screenshare-placeholder p {
        font-size: 0.85rem;
        color: var(--text-3);
    }

/* ═══════════════════════════════════════════════════════════════
   WHITEBOARD PANEL
   ═══════════════════════════════════════════════════════════════ */
#panel-whiteboard {
    flex-direction: column;
    overflow: hidden;
}

.wb-toolbar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.8rem;
    background: var(--surface-1);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    overflow-x: auto;
}

.wb-tool {
    background: var(--surface-3);
    border: 1px solid var(--border);
    color: var(--text-2);
    padding: 0.32rem 0.65rem;
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.15s;
    font-family: var(--font);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

    .wb-tool:hover,
    .wb-tool.active {
        background: var(--accent);
        color: #000;
        border-color: var(--accent);
        box-shadow: 0 0 10px var(--accent-glow);
    }

.wb-sep {
    width: 1px;
    height: 20px;
    background: var(--border);
    margin: 0 0.2rem;
    flex-shrink: 0;
}

#wbCanvas {
    flex: 1;
    cursor: crosshair;
    display: block;
    background: #ffffff;
    touch-action: none;
}

.wb-tool:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
}

    .wb-tool:disabled:hover {
        background: var(--surface-3);
        color: var(--text-2);
        border-color: var(--border);
    }

/* ═══════════════════════════════════════════════════════════════
   DOCUMENT VIEWER — opened from a resource's "eye" icon, lives inside
   the Screen Share panel and lets you draw/annotate over a PDF or image.
   ═══════════════════════════════════════════════════════════════ */
.doc-viewer {
    display: none;
    position: absolute;
    inset: 0;
    flex-direction: column;
    background: var(--surface-0, #0a0a0c);
    z-index: 25;
}

    .doc-viewer.active {
        display: flex;
    }

.doc-toolbar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.8rem;
    background: var(--surface-1);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    flex-wrap: wrap;
    row-gap: 0.4rem;
}

.doc-toolbar-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-1);
    margin-right: auto;
    max-width: 240px;
    overflow: hidden;
}

    .doc-toolbar-title span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .doc-toolbar-title i {
        color: var(--accent);
        flex-shrink: 0;
    }

.doc-toolbar-tools {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

    .doc-toolbar-tools input[type="color"] {
        width: 26px;
        height: 26px;
        border: none;
        background: none;
        cursor: pointer;
        border-radius: 4px;
        padding: 0;
    }

    .doc-toolbar-tools input[type="range"] {
        width: 60px;
        accent-color: var(--accent);
    }

.doc-toolbar-nav {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    color: var(--text-2);
}

    .doc-toolbar-nav span {
        min-width: 3.5rem;
        text-align: center;
    }

.doc-toolbar-zoom {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    color: var(--text-2);
    padding-left: 0.4rem;
    border-left: 1px solid var(--border);
}

    .doc-toolbar-zoom span {
        min-width: 2.8rem;
        text-align: center;
    }

.doc-toolbar-close {
    color: var(--red, #ff4d4f);
}

.doc-canvas-wrap {
    flex: 1;
    overflow: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 1.25rem;
    position: relative;
    background: #16171a;
}

.doc-canvas-stack {
    position: relative;
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.45);
    flex-shrink: 0;
}

#docPageCanvas,
#docAnnotationCanvas {
    display: block;
}

#docAnnotationCanvas {
    position: absolute;
    top: 0;
    left: 0;
    cursor: crosshair;
    touch-action: none;
}

.doc-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--text-2);
    font-size: 0.85rem;
    background: rgba(0, 0, 0, 0.35);
}

/* ═══════════════════════════════════════════════════════════════
   CODE TOGETHER PANEL — toolbar, editor, output console
   ═══════════════════════════════════════════════════════════════ */
#panel-code {
    flex-direction: column;
    overflow: hidden;
    background: var(--black);
}

.code-toolbar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.8rem;
    background: var(--surface-1);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    overflow-x: auto;
}

.code-lang-wrap {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.code-lang-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    font-size: 0.6rem;
    font-weight: 800;
    font-family: var(--mono);
    border: 1px solid;
    flex-shrink: 0;
}

.code-lang-select {
    background: var(--surface-3);
    border: 1px solid var(--border);
    color: var(--text-1);
    padding: 0.32rem 0.6rem;
    font-size: 0.72rem;
    font-family: var(--font);
    font-weight: 500;
    border-radius: var(--radius-sm);
    cursor: pointer;
    flex-shrink: 0;
}

    .code-lang-select:hover,
    .code-lang-select:focus {
        border-color: var(--border-hover);
        outline: none;
    }

.code-toolbar-sep {
    width: 1px;
    height: 20px;
    background: var(--border);
    margin: 0 0.1rem;
    flex-shrink: 0;
}

.code-btn {
    background: var(--surface-3);
    border: 1px solid var(--border);
    color: var(--text-2);
    padding: 0.32rem 0.65rem;
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.15s;
    font-family: var(--font);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

    .code-btn:hover {
        background: var(--surface-4);
        color: var(--text-1);
        border-color: var(--border-hover);
    }

    .code-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

.code-btn-run {
    background: var(--accent);
    color: #000;
    border-color: var(--accent);
    font-weight: 700;
}

    .code-btn-run:hover:not(:disabled) {
        filter: brightness(1.08);
        box-shadow: 0 0 10px var(--accent-glow);
    }

.code-btn-hint {
    font-size: 0.6rem;
    font-weight: 600;
    opacity: 0.6;
    background: rgba(0,0,0,0.15);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    margin-left: 0.1rem;
}

.code-btn-danger:hover {
    background: var(--red);
    color: #fff;
    border-color: var(--red);
}

.code-editor-status {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--text-3);
    white-space: nowrap;
    flex-shrink: 0;
    padding-left: 0.5rem;
}

/* ── Editor surface ──────────────────────────────────────────── */
.code-mirror-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    position: relative;
    --code-font-size: 0.85rem;
}

.code-autosave {
    position: absolute;
    top: 0.7rem;
    right: 1.1rem;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.68rem;
    color: var(--text-3);
    background: rgba(9,9,16,0.75);
    backdrop-filter: blur(6px);
    padding: 0.25rem 0.6rem;
    border-radius: 99px;
    border: 1px solid var(--border);
    pointer-events: none;
}

.code-autosave-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 6px var(--accent-glow);
    flex-shrink: 0;
}

.code-editor-area {
    flex: 1;
    background: #090910;
    font-family: var(--mono);
    font-size: 0.85rem;
    color: #c9d1d9;
    padding: 1.2rem;
    border: none;
    outline: none;
    resize: none;
    line-height: 1.75;
    width: 100%;
    height: 100%;
    tab-size: 4;
}

    .code-editor-area::placeholder {
        color: var(--text-3);
    }

/* CodeMirror takes over once it finishes loading — make it fill the wrap
   and match the JetBrains Mono / dark theme used everywhere else here. */
.code-mirror-wrap .CodeMirror {
    height: 100%;
    font-family: var(--mono);
    font-size: var(--code-font-size, 0.85rem);
    line-height: 1.65;
    background: #090910 !important;
    padding: 0.4rem 0;
}

.code-mirror-wrap .CodeMirror-placeholder {
    color: var(--text-3) !important;
    opacity: 0.7;
}

.code-mirror-wrap .CodeMirror-gutters {
    background: #0c0c14 !important;
    border-right: 1px solid var(--border);
}

.code-mirror-wrap .CodeMirror-linenumber {
    color: var(--text-3);
}

.code-mirror-wrap .CodeMirror-cursor {
    border-left: 2px solid var(--accent);
}

.code-mirror-wrap .CodeMirror-selected {
    background: var(--accent-bg) !important;
}

/* ── Output console ──────────────────────────────────────────── */
.code-console {
    flex-shrink: 0;
    height: 150px;
    border-top: 1px solid var(--border);
    background: var(--surface-1);
    display: flex;
    flex-direction: column;
}

.code-console-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.45rem 0.8rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-2);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

    .code-console-header i {
        color: var(--accent);
        margin-right: 0.35rem;
    }

.code-console-clear {
    background: none;
    border: none;
    color: var(--text-3);
    font-size: 0.68rem;
    cursor: pointer;
    font-family: var(--font);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

    .code-console-clear:hover {
        color: var(--text-1);
    }

.code-console-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.6rem 0.8rem;
    font-family: var(--mono);
    font-size: 0.78rem;
}

.code-console-empty {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.25rem;
    color: var(--text-3);
    font-family: var(--font);
}

    .code-console-empty i {
        font-size: 1.7rem;
        color: var(--text-3);
        opacity: 0.5;
        margin-bottom: 0.4rem;
    }

    .code-console-empty .cce-title {
        font-size: 0.82rem;
        font-weight: 700;
        color: var(--text-1);
    }

    .code-console-empty .cce-desc {
        font-size: 0.72rem;
        color: var(--text-3);
    }

.code-console-line {
    padding: 0.1rem 0;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text-1);
}

    .code-console-line.code-console-error {
        color: var(--red);
    }

    .code-console-line.code-console-warn {
        color: var(--amber);
    }

    .code-console-line.code-console-info {
        color: var(--text-3);
    }

/* ═══════════════════════════════════════════════════════════════
   RESOURCES PANEL
   ═══════════════════════════════════════════════════════════════ */
#panel-resources {
    flex-direction: column;
    overflow: auto;
    background: var(--surface-1);
    padding: 1.5rem;
    color: var(--text-2);
    font-size: 0.88rem;
}

.resource-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.resource-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-2);
}

.resource-item-icon {
    font-size: 1.15rem;
    color: var(--accent);
    flex-shrink: 0;
    width: 1.5rem;
    text-align: center;
}

.resource-item-info {
    flex: 1;
    min-width: 0;
}

.resource-item-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.resource-item-meta {
    font-size: 0.7rem;
    color: var(--text-3);
    margin-top: 0.1rem;
}

.resource-item-download {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    color: var(--text-2);
    background: var(--surface-3);
    transition: background 0.15s ease, color 0.15s ease;
}

    .resource-item-download:hover {
        background: var(--accent);
        color: #fff;
    }

.resource-item-view {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: none;
    color: var(--text-2);
    background: var(--surface-3);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

    .resource-item-view:hover {
        background: var(--accent);
        color: #fff;
    }

/* ═══════════════════════════════════════════════════════════════
   RIGHT PANEL (Chat / Tools / Notes)
   ═══════════════════════════════════════════════════════════════ */
.cr-right {
    width: var(--right-w);
    background: var(--surface-1);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow: hidden;
    transition: width 0.22s ease, min-width 0.22s ease;
}

    /* ── Collapsed state (right panel) ── */
    .cr-right.collapsed {
        width: 0 !important;
        min-width: 0 !important;
        overflow: hidden;
        border-left-color: transparent;
    }

        .cr-right.collapsed > * {
            opacity: 0;
            pointer-events: none;
        }

.cr-right-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    padding: 0 0.3rem;
}

.cr-right-tab {
    flex: 1;
    padding: 0.6rem 0.4rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    color: var(--text-3);
    border-bottom: 2px solid transparent;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    font-family: var(--font);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    transition: color 0.15s;
}

    .cr-right-tab:hover {
        color: var(--text-2);
    }

    .cr-right-tab.active {
        color: var(--accent);
        border-bottom-color: var(--accent);
    }

.cr-right-panel {
    display: none;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
}

    .cr-right-panel.active {
        display: flex;
    }

/* ── Chat ── */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-height: 0;
}

.chat-msg {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    max-width: 100%;
}

    .chat-msg.mine {
        flex-direction: row-reverse;
    }

    .chat-msg.system {
        justify-content: center;
        text-align: center;
        color: var(--text-3);
        font-size: 0.68rem;
        font-style: italic;
        padding: 0.15rem 0;
    }

.chat-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.56rem;
    font-weight: 800;
    flex-shrink: 0;
    margin-top: 0.1rem;
    background: linear-gradient(135deg, var(--blue), var(--purple));
    color: #fff;
}

.chat-msg.mine .chat-avatar {
    background: linear-gradient(135deg, var(--accent), var(--blue));
    color: #000;
}

.chat-msg-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: calc(100% - 34px);
}

.chat-msg.mine .chat-msg-content {
    align-items: flex-end;
}

.chat-msg-meta {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin-bottom: 0.18rem;
}

.chat-msg-name {
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.chat-msg.mine .chat-msg-name {
    color: var(--accent);
}

.chat-msg-time {
    font-size: 0.57rem;
    color: var(--text-3);
    font-family: var(--mono);
}

.chat-msg-pin-btn {
    background: none;
    border: none;
    color: var(--text-3);
    font-size: 0.6rem;
    cursor: pointer;
    opacity: 0;
    padding: 0 0.15rem;
    transition: opacity 0.15s, color 0.15s;
}

.chat-msg:hover .chat-msg-pin-btn {
    opacity: 1;
}

.chat-msg-pin-btn:hover {
    color: var(--accent);
}

.chat-bubble {
    background: var(--surface-2);
    border-radius: var(--radius-md);
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--border);
    word-break: break-word;
    transition: border-color 0.15s;
}

.chat-msg:hover .chat-bubble {
    border-color: var(--border-hover);
}

.chat-msg.mine .chat-bubble {
    background: var(--accent-bg);
    border-color: rgba(0,229,176,0.2);
}

.chat-msg-body {
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--text-1);
}

/* Pinned message banner */
.chat-pinned {
    display: none;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.6rem 0.75rem;
    background: var(--accent-bg);
    border-bottom: 1px solid rgba(0,229,176,0.2);
    flex-shrink: 0;
}

    .chat-pinned.show {
        display: flex;
    }

.chat-pinned-icon {
    color: var(--accent);
    font-size: 0.8rem;
    margin-top: 0.15rem;
    transform: rotate(45deg);
}

.chat-pinned-body {
    flex: 1;
    min-width: 0;
}

.chat-pinned-label {
    font-size: 0.58rem;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.1rem;
}

.chat-pinned-text {
    font-size: 0.75rem;
    color: var(--text-1);
    line-height: 1.4;
    word-break: break-word;
}

.chat-pinned-close {
    background: none;
    border: none;
    color: var(--text-3);
    cursor: pointer;
    font-size: 0.7rem;
    padding: 0.15rem;
    flex-shrink: 0;
    transition: color 0.15s;
}

    .chat-pinned-close:hover {
        color: var(--text-1);
    }

/* Typing indicator */
.chat-typing {
    min-height: 1.1rem;
    padding: 0 0.85rem;
    font-size: 0.68rem;
    font-style: italic;
    color: var(--text-3);
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Chat input */
.chat-input-row {
    display: flex;
    gap: 0;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    padding: 0.6rem;
    gap: 0.4rem;
    background: var(--surface-1);
}

.chat-input {
    flex: 1;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-1);
    padding: 0.55rem 0.8rem;
    font-family: var(--font);
    font-size: 0.8rem;
    outline: none;
    transition: border-color 0.15s;
}

    .chat-input:focus {
        border-color: rgba(0,229,176,0.4);
    }

    .chat-input::placeholder {
        color: var(--text-3);
    }

.chat-send {
    background: var(--accent);
    border: none;
    color: #000;
    padding: 0 0.85rem;
    cursor: pointer;
    font-weight: 800;
    font-size: 0.8rem;
    border-radius: var(--radius-sm);
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .chat-send:hover {
        filter: brightness(1.12);
        box-shadow: 0 0 12px var(--accent-glow);
    }

/* ── Reactions Panel ── */
.reactions-area {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    padding: 0.85rem;
    flex-shrink: 0;
}

.rxn-btn {
    background: var(--surface-3);
    border: 1px solid var(--border);
    color: var(--text-1);
    padding: 0.6rem 0.5rem;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.18s;
    font-family: var(--font);
    border-radius: var(--radius-sm);
    font-weight: 600;
    text-align: center;
}

    .rxn-btn:hover {
        background: var(--surface-4);
        border-color: var(--border-hover);
        transform: translateY(-2px);
        box-shadow: var(--shadow-sm);
    }

    .rxn-btn:active {
        transform: translateY(0);
    }

    /* Special reaction colors */
    .rxn-btn:nth-child(1):hover {
        border-color: var(--green);
        color: var(--green);
    }

    .rxn-btn:nth-child(2):hover {
        border-color: var(--amber);
        color: var(--amber);
    }

    .rxn-btn:nth-child(3):hover {
        border-color: var(--red);
        color: var(--red);
    }

    .rxn-btn:nth-child(4):hover {
        border-color: var(--accent);
        color: var(--accent);
    }

    .rxn-btn:nth-child(5) {
        grid-column: span 2;
    }

.rxn-feed {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-height: 0;
    border-top: 1px solid var(--border);
}

.rxn-item {
    font-size: 0.75rem;
    color: var(--text-2);
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--border);
}

    .rxn-item:last-child {
        border-bottom: none;
    }

    .rxn-item i {
        color: var(--accent);
        font-size: 0.6rem;
    }

/* ── Notes panel ── */
#rpanel-notes textarea {
    flex: 1;
    background: var(--surface-2);
    border: none;
    color: var(--text-1);
    padding: 0.9rem;
    font-family: var(--font);
    font-size: 0.8rem;
    resize: none;
    outline: none;
    line-height: 1.7;
}

    #rpanel-notes textarea::placeholder {
        color: var(--text-3);
    }

/* ── Floating reaction toast (single centered pop, kept for compatibility) ── */
.reaction-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(13,13,18,0.92);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-hover);
    border-radius: var(--radius-xl);
    padding: 0.55rem 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    z-index: 1000;
    pointer-events: none;
    font-size: 0.85rem;
    box-shadow: var(--shadow-md);
}

.reaction-emoji {
    font-size: 1.3rem;
}

.reaction-name {
    color: var(--text-1);
    font-weight: 600;
    font-size: 0.82rem;
}

@keyframes floatUp {
    0% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-100px);
    }
}

/* ═══════════════════════════════════════════════════════════════
   FLOATING REACTIONS — emoji rise up from the reactions button and
   drift across the active panel (video / whiteboard / screen-share /
   code), like a live-event reaction stream. Sits inside .cr-panels
   so it overlays whichever tab is active, above the content but
   below toasts and modals.
   ═══════════════════════════════════════════════════════════════ */
.floating-reactions-layer {
    position: absolute;
    inset: 0;
    z-index: 40;
    overflow: hidden;
    pointer-events: none;
}

.floating-reaction {
    position: absolute;
    bottom: 4%;
    left: var(--fx-left, 50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    opacity: 0;
    will-change: transform, opacity;
    animation: floatRise var(--fx-duration, 3.6s) cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    filter: drop-shadow(0 4px 14px rgba(0,0,0,0.45));
}

.floating-reaction-emoji {
    font-size: var(--fx-size, 2.1rem);
    line-height: 1;
}

.floating-reaction-name {
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--text-1);
    background: rgba(10,10,14,0.65);
    backdrop-filter: blur(6px);
    padding: 0.12rem 0.5rem;
    border-radius: 99px;
    border: 1px solid var(--border-hover);
    white-space: nowrap;
    opacity: 0.9;
}

@keyframes floatRise {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0.4) rotate(0deg);
    }

    12% {
        opacity: 1;
        transform: translate(calc(var(--fx-drift, 0px) * 0.15), -12%) scale(1.05) rotate(var(--fx-rot, 4deg));
    }

    22% {
        transform: translate(calc(var(--fx-drift, 0px) * 0.3), -24%) scale(1) rotate(0deg);
    }

    100% {
        opacity: 0;
        transform: translate(var(--fx-drift, 0px), -320px) scale(0.85) rotate(calc(var(--fx-rot, 4deg) * -1));
    }
}

/* ═══════════════════════════════════════════════════════════════
   TOAST STACK — hand-raise + camera-request-approval notifications.
   Fixed to the viewport (not the panel), stacked top-right, always
   above the recording banner and the room chrome.
   ═══════════════════════════════════════════════════════════════ */
.toast-stack {
    position: fixed;
    top: calc(var(--topbar-h) + 14px);
    right: 16px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-width: min(340px, calc(100vw - 2rem));
    pointer-events: none;
}

.hand-raised-toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    background: rgba(19,19,26,0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--border-hover);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 0.7rem 0.85rem;
    opacity: 0;
    transform: translateX(24px) scale(0.97);
    animation: toastIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

    .hand-raised-toast.hide {
        animation: toastOut 0.22s ease forwards;
    }

.hand-raised-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-bg);
    color: var(--accent);
    font-size: 0.85rem;
    border: 1px solid rgba(0,229,176,0.3);
}

/* Camera-request toasts use the blue accent so they read as distinct
   from hand-raise notices at a glance. */
.hand-raised-toast.toast-camera .hand-raised-icon {
    background: var(--blue-glow);
    color: var(--blue);
    border-color: rgba(79,142,247,0.35);
}

.hand-raised-text {
    flex: 1;
    font-size: 0.76rem;
    line-height: 1.35;
    color: var(--text-2);
    min-width: 0;
}

    .hand-raised-text strong {
        color: var(--text-1);
        font-weight: 700;
    }

.toast-actions {
    display: flex;
    flex-shrink: 0;
    gap: 0.35rem;
}

.btn-allow-camera,
.btn-deny-camera {
    font-family: var(--font);
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.36rem 0.65rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    border: 1px solid transparent;
}

.btn-allow-camera {
    background: var(--accent);
    color: #00281f;
}

    .btn-allow-camera:hover {
        filter: brightness(1.1);
        box-shadow: 0 0 12px var(--accent-glow);
    }

.btn-deny-camera {
    background: var(--surface-3);
    border-color: var(--border);
    color: var(--text-2);
}

    .btn-deny-camera:hover {
        background: var(--surface-4);
        color: var(--text-1);
        border-color: var(--border-hover);
    }

@keyframes toastIn {
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes toastOut {
    to {
        opacity: 0;
        transform: translateX(24px) scale(0.96);
    }
}

@media (max-width: 480px) {
    .toast-stack {
        left: 12px;
        right: 12px;
        max-width: none;
        top: calc(var(--topbar-h) + 8px);
    }

    .hand-raised-toast {
        flex-wrap: wrap;
    }

    .toast-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ── Connection status ── */
.conn-status {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-2);
    font-size: 0.72rem;
    padding: 0.4rem 1rem;
    border-radius: 99px;
    display: none;
    z-index: 999;
    white-space: nowrap;
    font-weight: 500;
    backdrop-filter: blur(8px);
}

    .conn-status.show {
        display: block;
    }

    .conn-status.error {
        border-color: rgba(255,77,109,0.4);
        color: var(--red);
    }

    .conn-status.ok {
        border-color: rgba(0,229,176,0.4);
        color: var(--accent);
    }

/* ═══════════════════════════════════════════════════════════════
   NAME ENTRY MODAL  —  "Join Session"  (light / blue, standalone
   from the rest of the dark OP HUB theme, on purpose)
   ═══════════════════════════════════════════════════════════════ */
.name-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,18,26,0.72);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 1.25rem;
}

.name-modal {
    --nm-blue: #2563eb;
    --nm-blue-dark: #1d4ed8;
    --nm-ink: #0f172a;
    --nm-text: #64748b;
    --nm-border: #e5e9f0;
    background: #ffffff;
    border: none;
    padding: 2.4rem 2.2rem 2rem;
    width: 440px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    border-radius: 24px;
    box-shadow: 0 30px 70px rgba(15,23,42,0.35), 0 4px 14px rgba(15,23,42,0.08);
    position: relative;
    overflow: hidden;
}

    .name-modal::before {
        display: none;
    }

.name-modal-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(37,99,235,0.1);
    border: 1px solid rgba(37,99,235,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.1rem;
    flex-shrink: 0;
}

    .name-modal-icon i {
        color: var(--nm-blue);
        font-size: 1.5rem;
    }

.name-modal h2 {
    font-family: var(--display);
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--nm-ink);
    letter-spacing: -0.02em;
    margin-bottom: 0.7rem;
}

.name-modal p {
    font-size: 0.92rem;
    color: var(--nm-text);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.name-modal-input-wrap {
    position: relative;
    width: 100%;
    margin-bottom: 1.1rem;
}

    .name-modal-input-wrap i {
        position: absolute;
        left: 1.1rem;
        top: 50%;
        transform: translateY(-50%);
        color: #94a3b8;
        font-size: 0.95rem;
        pointer-events: none;
    }

.name-modal input {
    background: #fff;
    border: 1.5px solid var(--nm-border);
    color: var(--nm-ink);
    padding: 0.9rem 1.1rem 0.9rem 2.8rem;
    font-family: var(--font);
    font-size: 0.95rem;
    outline: none;
    width: 100%;
    border-radius: 14px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

    .name-modal input:focus {
        border-color: var(--nm-blue);
        box-shadow: 0 0 0 4px rgba(37,99,235,0.12);
    }

    .name-modal input::placeholder {
        color: #94a3b8;
    }

.name-modal button {
    background: var(--nm-blue);
    color: #fff;
    border: none;
    padding: 0.95rem;
    font-family: var(--display);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    width: 100%;
    border-radius: 14px;
    transition: all 0.18s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    letter-spacing: 0.01em;
    box-shadow: 0 8px 20px rgba(37,99,235,0.3);
}

    .name-modal button:hover {
        background: var(--nm-blue-dark);
        box-shadow: 0 10px 26px rgba(37,99,235,0.4);
        transform: translateY(-1px);
    }

    .name-modal button:active {
        transform: translateY(0);
    }

.name-modal-divider {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    margin-top: 1.4rem;
}

    .name-modal-divider::before,
    .name-modal-divider::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--nm-border);
    }

    .name-modal-divider span {
        font-size: 0.78rem;
        color: #94a3b8;
        white-space: nowrap;
    }

/* ═══════════════════════════════════════════════════════════════
   UPGRADE / PRO BADGE — Revenue feature teaser
   ═══════════════════════════════════════════════════════════════ */
.pro-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: linear-gradient(135deg, #f59e0b, #f97316);
    color: #000;
    font-size: 0.55rem;
    font-weight: 800;
    padding: 0.12rem 0.4rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    vertical-align: middle;
    box-shadow: 0 2px 8px rgba(245,158,11,0.35);
}

/* Session stats bar (premium feature strip) */
.session-stats-bar {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--surface-1);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    overflow: hidden;
}

.stat-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.4rem 0.5rem;
    font-size: 0.68rem;
    color: var(--text-3);
    font-weight: 500;
    border-right: 1px solid var(--border);
    font-family: var(--mono);
}

    .stat-item:last-child {
        border-right: none;
    }

    .stat-item strong {
        color: var(--text-2);
        font-family: var(--mono);
    }

    .stat-item i {
        font-size: 0.7rem;
        color: var(--accent);
    }

/* ═══════════════════════════════════════════════════════════════
   MOBILE BOTTOM NAV
   ═══════════════════════════════════════════════════════════════ */
.cr-mobile-nav {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE ( ≤ 768px )
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .cr-topbar {
        padding: 0.5rem 0.8rem;
        flex-wrap: wrap;
        gap: 0.4rem;
        height: auto;
        min-height: 52px;
    }

        .cr-topbar > div:first-child {
            gap: 0.45rem;
        }

    .cr-brand {
        font-size: 0.88rem !important;
    }

    .cr-badge-live {
        font-size: 0.6rem !important;
        padding: 0.15rem 0.45rem !important;
    }

    .cr-session-info {
        display: none;
    }

    .cr-topbar-actions {
        display: none;
    }

    .cr-phase-chip {
        font-size: 0.58rem !important;
        padding: 0.15rem 0.4rem !important;
    }

    .cr-timer {
        font-size: 0.78rem !important;
    }

    .cr-mobile-session-strip {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: rgba(255,255,255,0.03);
        border-bottom: 1px solid var(--border);
        padding: 0.35rem 0.8rem;
        font-size: 0.72rem;
        color: var(--text-2);
        gap: 0.5rem;
    }

        .cr-mobile-session-strip strong {
            color: var(--text-1);
            font-size: 0.78rem;
        }

    .cr-body {
        flex-direction: column !important;
        height: calc(100dvh - 52px - 58px);
        overflow: hidden;
    }

    .cr-sidebar, .cr-right, .cr-panel-toggle {
        display: none !important;
    }

    .cr-center {
        width: 100% !important;
        min-width: 0 !important;
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .cr-tabs {
        display: flex;
        border-bottom: 1px solid var(--border);
        flex-shrink: 0;
        padding: 0 0.2rem;
    }

    .cr-tabs-list {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

        .cr-tabs-list::-webkit-scrollbar {
            display: none;
        }

    .cr-tab {
        flex-shrink: 0;
        font-size: 0.68rem !important;
        padding: 0 0.65rem !important;
        height: 38px !important;
        border-radius: 0 !important;
        white-space: nowrap;
    }

    .cr-tabs .cr-timer {
        padding-right: 0.4rem;
    }

    .cr-panels {
        flex: 1;
        overflow: hidden;
        position: relative;
    }

    .cr-panel {
        position: absolute;
        inset: 0;
    }

    #videoGrid {
        display: grid !important;
        gap: 0.35rem !important;
        padding: 0.35rem !important;
        height: 100% !important;
        width: 100% !important;
        overflow: hidden !important;
        /* 1 person: full screen */
        grid-template-columns: 1fr !important;
        grid-template-rows: 1fr !important;
        grid-auto-rows: 1fr !important;
        align-content: stretch !important;
    }

        /* Mobile: 2 people — side by side, fill height */
        #videoGrid.peers-2 {
            grid-template-columns: repeat(2, 1fr) !important;
            grid-template-rows: 1fr !important;
        }

        /* Mobile: 3–4 people — 2 cols, 2 rows, fill height */
        #videoGrid.peers-3,
        #videoGrid.peers-4 {
            grid-template-columns: repeat(2, 1fr) !important;
            grid-template-rows: repeat(2, 1fr) !important;
        }

        /* Mobile: 5+ — 2 cols, auto scrollable rows */
        #videoGrid.peers-5,
        #videoGrid.peers-6,
        #videoGrid.peers-7,
        #videoGrid.peers-8,
        #videoGrid.peers-9,
        #videoGrid.peers-10,
        #videoGrid.peers-11,
        #videoGrid.peers-12,
        #videoGrid.peers-many {
            grid-template-columns: repeat(2, 1fr) !important;
            grid-template-rows: auto !important;
            grid-auto-rows: minmax(140px, auto) !important;
            align-content: start !important;
            overflow-y: auto !important;
        }

            /* Reset desktop column tricks for mobile — all tiles auto-placed */
            #videoGrid.peers-3 .video-tile:last-child,
            #videoGrid.peers-5 .video-tile:nth-child(n) {
                grid-column: auto !important;
                grid-row: auto !important;
            }

            /* All tiles in mobile grid use aspect ratio so they look good when scrolling */
            #videoGrid.peers-5 > *,
            #videoGrid.peers-6 > *,
            #videoGrid.peers-7 > *,
            #videoGrid.peers-8 > *,
            #videoGrid.peers-9 > *,
            #videoGrid.peers-10 > *,
            #videoGrid.peers-11 > *,
            #videoGrid.peers-12 > *,
            #videoGrid.peers-many > * {
                aspect-ratio: 16 / 9 !important;
                min-height: 0 !important;
            }

    .local-controls {
        position: fixed !important;
        bottom: 66px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        display: flex !important;
        gap: 0.5rem !important;
        z-index: 200 !important;
        background: rgba(10,10,16,0.88) !important;
        padding: 0.4rem 0.8rem !important;
        border-radius: 2rem !important;
        backdrop-filter: blur(14px) !important;
        border: 1px solid var(--border) !important;
    }

    .local-ctrl {
        padding: 0.42rem 0.85rem !important;
        font-size: 0.7rem !important;
    }

    .wb-toolbar {
        flex-wrap: wrap;
        gap: 0.3rem;
        padding: 0.4rem !important;
    }

    .wb-tool {
        font-size: 0.65rem !important;
        padding: 0.28rem 0.5rem !important;
    }

    #wbSize {
        width: 50px !important;
    }

    .code-editor-area,
    .code-mirror-wrap .CodeMirror {
        font-size: 0.76rem !important;
    }

    .code-toolbar {
        flex-wrap: wrap;
        gap: 0.3rem;
        padding: 0.4rem !important;
    }

    .code-btn span,
    .code-editor-status {
        display: none;
    }

    .code-autosave {
        display: none;
    }

    .code-console {
        height: 110px;
    }

    .screenshare-placeholder {
        padding: 1.5rem !important;
    }

    /* Mobile bottom nav */
    .cr-mobile-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 58px;
        background: var(--surface-1);
        border-top: 1px solid var(--border);
        z-index: 300;
        align-items: stretch;
    }

    .cr-mobile-nav-btn {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.18rem;
        font-size: 0.55rem;
        color: var(--text-3);
        background: none;
        border: none;
        cursor: pointer;
        transition: color 0.15s;
        padding: 0;
        font-family: var(--font);
        font-weight: 600;
        letter-spacing: 0.03em;
    }

        .cr-mobile-nav-btn i {
            font-size: 1.05rem;
        }

        .cr-mobile-nav-btn.active,
        .cr-mobile-nav-btn:hover {
            color: var(--accent);
        }

        .cr-mobile-nav-btn.danger {
            color: #9a2020;
        }

            .cr-mobile-nav-btn.danger:hover {
                color: var(--red);
            }

        .cr-mobile-nav-btn .nav-badge {
            position: absolute;
            top: 6px;
            right: calc(50% - 16px);
            background: var(--red);
            color: #fff;
            font-size: 0.5rem;
            border-radius: 99px;
            padding: 0 0.28rem;
            min-width: 14px;
            text-align: center;
            line-height: 14px;
        }

    .cr-mobile-nav-btn {
        position: relative;
    }

    /* Mobile overlays — full screen */
    .cr-mobile-overlay {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 250;
        background: rgba(0,0,0,0.5);
        backdrop-filter: blur(6px);
    }

        .cr-mobile-overlay.open {
            display: flex;
            align-items: stretch;
            justify-content: stretch;
        }

    .cr-mobile-overlay-panel {
        width: 100%;
        flex: 1;
        height: 100%;
        max-height: 100%;
        background: var(--surface-2);
        border-radius: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border-top: none;
        box-shadow: none;
    }

        /* Drag handle — hidden at full screen but keep spacing consistent */
        .cr-mobile-overlay-panel::before {
            display: none;
        }

    .cr-mobile-overlay-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.85rem 1.1rem 0.7rem;
        border-bottom: 1px solid var(--border);
        font-size: 0.9rem;
        font-weight: 700;
        color: var(--text-1);
        flex-shrink: 0;
        /* top safe area for notch/status bar */
        padding-top: calc(0.85rem + env(safe-area-inset-top, 0px));
        background: var(--surface-1);
    }

    .cr-mobile-overlay-close {
        background: var(--surface-4);
        border: 1px solid var(--border);
        color: var(--text-2);
        font-size: 0.85rem;
        cursor: pointer;
        padding: 0.3rem 0.5rem;
        border-radius: 50%;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.15s, color 0.15s;
    }

        .cr-mobile-overlay-close:hover {
            background: var(--red);
            color: #fff;
            border-color: var(--red);
        }

    .cr-mobile-overlay-body {
        flex: 1;
        overflow-y: auto;
        padding: 0.6rem 0;
        -webkit-overflow-scrolling: touch;
    }

        .cr-mobile-overlay-body .chat-messages {
            max-height: calc(100dvh - 130px);
        }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — VERY SMALL ( ≤ 380px )
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
    .cr-tab {
        font-size: 0.6rem !important;
        padding: 0 0.5rem !important;
    }

    .cr-mobile-nav-btn {
        font-size: 0.5rem;
    }

        .cr-mobile-nav-btn i {
            font-size: 0.95rem;
        }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET ( 769–1024px )
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
    :root {
        --sidebar-w: 0px;
    }

    .cr-sidebar {
        display: none !important;
    }

    .cr-center {
        flex: 1 !important;
    }

    .cr-right {
        width: 260px !important;
        min-width: 220px !important;
    }

    .cr-tabs-list {
        overflow-x: auto;
        scrollbar-width: none;
    }

        .cr-tabs-list::-webkit-scrollbar {
            display: none;
        }
}

@media (min-width: 769px) {
    .tools-bottom-panel {
        display: none !important;
    }

    /* ═══════════════════════════════════════
   DESKTOP — top navbar removed, tabs bar
   becomes the top row, timer moves into it
   ═══════════════════════════════════════ */
    .cr-topbar {
        display: none !important;
    }

    .cr-body {
        height: 100vh !important;
    }

    .cr-tabs {
        justify-content: space-between;
    }

    /* ═══════════════════════════════════════
   MOBILE WHITEBOARD FIX
   ═══════════════════════════════════════ */

    #panel-whiteboard {
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
    }

    #wbCanvas {
        width: 100% !important;
        height: calc(100dvh - 140px) !important;
        max-width: 100% !important;
        display: block !important;
        background: #fff;
        border-radius: 0;
        touch-action: none;
        border-top: 1px solid var(--border);
        image-rendering: auto;
        overscroll-behavior: contain;
        -webkit-user-select: none;
        user-select: none;
    }
}

/* ═══════════════════════════════════════════════════════════════
   BOOTSTRAP 5 OVERRIDES / INTEGRATION
   ═══════════════════════════════════════════════════════════════ */

/* Keep Bootstrap tooltips styled */
.tooltip-inner {
    background: var(--surface-4);
    color: var(--text-1);
    font-family: var(--font);
    font-size: 0.72rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}

.bs-tooltip-auto .tooltip-arrow::before,
.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: var(--surface-4);
}

/* Bootstrap badge in our theme */
.badge-live {
    background: rgba(255,77,109,0.15) !important;
    color: var(--red) !important;
    border: 1px solid rgba(255,77,109,0.3) !important;
    font-size: 0.6rem !important;
    font-weight: 800 !important;
    border-radius: 99px !important;
}

/* Bootstrap modal darkened */
.modal-content {
    background: var(--surface-2) !important;
    border: 1px solid var(--border-hover) !important;
    border-radius: var(--radius-lg) !important;
    color: var(--text-1) !important;
}

.modal-header {
    border-bottom: 1px solid var(--border) !important;
    background: var(--surface-3) !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}

.modal-footer {
    border-top: 1px solid var(--border) !important;
    background: var(--surface-1) !important;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
}

.modal-title {
    font-family: var(--display) !important;
    color: var(--accent) !important;
    font-size: 1rem !important;
}

.btn-close {
    filter: invert(1) !important;
    opacity: 0.5 !important;
}

/* Dropdown styled */
.dropdown-menu {
    background: var(--surface-3) !important;
    border: 1px solid var(--border-hover) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-md) !important;
    padding: 0.3rem !important;
}

.dropdown-item {
    color: var(--text-2) !important;
    font-family: var(--font) !important;
    font-size: 0.8rem !important;
    border-radius: var(--radius-sm) !important;
    padding: 0.45rem 0.75rem !important;
}

    .dropdown-item:hover {
        background: var(--surface-4) !important;
        color: var(--text-1) !important;
    }

.dropdown-divider {
    border-color: var(--border) !important;
}

/* ── Active state for toggleable menu items (Live Captions, VB presets) ── */
.dropdown-item.active {
    background: var(--accent-bg) !important;
    color: var(--accent) !important;
}

    .dropdown-item.active::after {
        content: '\f00c';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        margin-left: auto;
        padding-left: 0.5rem;
        font-size: 0.65rem;
    }

.vb-option {
    display: flex !important;
    align-items: center;
}

#menuVirtualBg.loading::after {
    content: '';
    width: 12px;
    height: 12px;
    margin-left: auto;
    border-radius: 50%;
    border: 2px solid var(--text-3);
    border-top-color: var(--accent);
    animation: spin 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ── Live captions overlay ── */
.caption-bar {
    position: absolute;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%);
    max-width: 85%;
    display: none;
    align-items: baseline;
    gap: 0.5rem;
    background: rgba(6,6,10,0.85);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.55rem 1rem;
    font-size: 0.88rem;
    line-height: 1.4;
    z-index: 20;
    box-shadow: var(--shadow-md);
}

    .caption-bar.show {
        display: flex;
    }

.caption-speaker {
    color: var(--accent);
    font-weight: 700;
    flex-shrink: 0;
}

.caption-text {
    color: var(--text-1);
}

/* Progress bar for session progress */
.progress {
    background: var(--surface-3) !important;
    height: 4px !important;
    border-radius: 99px !important;
    overflow: hidden !important;
}

.progress-bar {
    background: linear-gradient(90deg, var(--accent), var(--blue)) !important;
    border-radius: 99px !important;
}


/* Code editor styles */

.code-console-sql-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .76rem;
    font-family: var(--mono);
    margin-bottom: .6rem;
}

    .code-console-sql-table th,
    .code-console-sql-table td {
        border: 1px solid var(--border);
        padding: .3rem .5rem;
        text-align: left;
        white-space: nowrap;
    }

    .code-console-sql-table th {
        background: var(--surface-3);
        color: var(--text-2);
        font-weight: 600;
    }

    .code-console-sql-table tbody tr:nth-child(even) {
        background: var(--surface-2);
    }

.code-preview-frame {
    display: block;
}

/* ═══════════════════════════════════════════════════════════════
   WHITEBOARD MOBILE FIXES — Samsung / Cellphones
   These override existing styles and fix the broken layout
   ═══════════════════════════════════════════════════════════════ */

/* ── Base whiteboard panel fixes ──────────────────────────────── */
#panel-whiteboard {
    flex-direction: column !important;
    overflow: hidden !important;
    width: 100% !important;
    height: 100% !important;
}

/* ── Toolbar: compact, no-wrap, scrollable ───────────────────── */
.wb-toolbar {
    display: flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    padding: 0.4rem 0.5rem !important;
    background: var(--surface-1) !important;
    border-bottom: 1px solid var(--border) !important;
    flex-shrink: 0 !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    min-height: 40px !important;
    max-height: 40px !important;
}

    .wb-toolbar::-webkit-scrollbar {
        display: none !important;
    }

.wb-tool {
    background: var(--surface-3) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-2) !important;
    padding: 0.25rem 0.5rem !important;
    font-size: 0.65rem !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
    font-family: var(--font) !important;
    border-radius: var(--radius-sm) !important;
    white-space: nowrap !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.2rem !important;
    flex-shrink: 0 !important;
    height: 28px !important;
}

    .wb-tool i {
        font-size: 0.7rem !important;
    }

    .wb-tool span {
        display: none !important; /* Icon-only on mobile */
    }

    .wb-tool.active {
        background: var(--accent) !important;
        color: #000 !important;
        border-color: var(--accent) !important;
        box-shadow: 0 0 10px var(--accent-glow) !important;
    }

.wb-sep {
    width: 1px !important;
    height: 18px !important;
    background: var(--border) !important;
    margin: 0 0.15rem !important;
    flex-shrink: 0 !important;
}

/* Color picker and range slider */
.wb-toolbar input[type="color"] {
    width: 24px !important;
    height: 24px !important;
    border: none !important;
    background: none !important;
    cursor: pointer !important;
    border-radius: 4px !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}

.wb-toolbar input[type="range"] {
    width: 50px !important;
    accent-color: var(--accent) !important;
    flex-shrink: 0 !important;
}

/* ── Canvas: fills remaining space properly ──────────────────── */
#wbCanvas {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    height: calc(100% - 40px) !important; /* Subtract toolbar height */
    cursor: crosshair !important;
    display: block !important;
    background: #ffffff !important;
    touch-action: none !important;
    border: none !important;
    border-radius: 0 !important;
    image-rendering: auto !important;
    overscroll-behavior: contain !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
}

/* ── Whiteboard container to ensure proper flex layout ───────── */
#panel-whiteboard > .wb-toolbar + #wbCanvas,
#panel-whiteboard > .wb-toolbar + canvas {
    flex: 1 1 auto !important;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE-SPECIFIC (max-width: 768px) — Override existing broken styles
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    #panel-whiteboard {
        position: absolute !important;
        inset: 0 !important;
        display: none !important; /* Hidden by default, shown via .active */
        flex-direction: column !important;
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
        background: var(--black) !important;
    }

        #panel-whiteboard.active {
            display: flex !important;
        }

        /* Ensure the canvas wrapper/area fills space */
        #panel-whiteboard > *:not(.wb-toolbar) {
            flex: 1 1 auto !important;
            min-height: 0 !important;
            overflow: hidden !important;
        }

    .wb-toolbar {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        min-height: 40px !important;
        max-height: 40px !important;
        padding: 0.35rem 0.4rem !important;
    }

    .wb-tool {
        padding: 0.2rem 0.4rem !important;
        font-size: 0.6rem !important;
        height: 26px !important;
    }

        .wb-tool i {
            font-size: 0.65rem !important;
        }

    #wbSize {
        width: 45px !important;
    }

    #wbCanvas {
        width: 100% !important;
        height: calc(100% - 40px) !important;
        max-width: 100% !important;
        max-height: calc(100% - 40px) !important;
        touch-action: none !important;
        -webkit-user-select: none !important;
        user-select: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   SMALL PHONES (max-width: 480px) — Samsung etc.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {

    #panel-whiteboard {
        width: 100% !important;
        height: 100% !important;
    }

    .wb-toolbar {
        min-height: 36px !important;
        max-height: 36px !important;
        padding: 0.3rem 0.35rem !important;
        gap: 0.15rem !important;
    }

    .wb-tool {
        padding: 0.15rem 0.3rem !important;
        font-size: 0.55rem !important;
        height: 24px !important;
        gap: 0.1rem !important;
    }

        .wb-tool i {
            font-size: 0.6rem !important;
        }

    .wb-sep {
        height: 16px !important;
        margin: 0 0.1rem !important;
    }

    .wb-toolbar input[type="color"] {
        width: 20px !important;
        height: 20px !important;
    }

    .wb-toolbar input[type="range"] {
        width: 40px !important;
    }

    #wbCanvas {
        height: calc(100% - 36px) !important;
        max-height: calc(100% - 36px) !important;
    }

    /* Prevent the Mic/Cam/Raise Hand/More bar from overflowing off-screen
       (it's centered with translateX(-50%), so on narrow phones the last
       button — usually "More" — gets pushed past the right edge). */
    .local-controls {
        max-width: calc(100vw - 1rem) !important;
        overflow-x: auto !important;
        -ms-overflow-style: none !important;
        scrollbar-width: none !important;
    }

        .local-controls::-webkit-scrollbar {
            display: none;
        }

    .local-ctrl span {
        display: none !important;
    }

    .local-ctrl {
        padding: 0 0.65rem !important;
        gap: 0 !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   EXTRA SMALL PHONES (max-width: 360px)
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 360px) {

    .wb-toolbar {
        min-height: 32px !important;
        max-height: 32px !important;
        padding: 0.25rem 0.3rem !important;
        gap: 0.1rem !important;
    }

    .wb-tool {
        padding: 0.12rem 0.25rem !important;
        font-size: 0.5rem !important;
        height: 22px !important;
    }

        .wb-tool i {
            font-size: 0.55rem !important;
        }

    .wb-sep {
        height: 14px !important;
    }

    .wb-toolbar input[type="color"] {
        width: 18px !important;
        height: 18px !important;
    }

    .wb-toolbar input[type="range"] {
        width: 35px !important;
    }

    #wbCanvas {
        height: calc(100% - 32px) !important;
        max-height: calc(100% - 32px) !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   FIX: Override the broken (min-width: 769px) wbCanvas rule
   that was incorrectly applying to all screen sizes
   ═══════════════════════════════════════════════════════════════ */

@media (min-width: 769px) {
    #panel-whiteboard {
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
        flex-direction: column !important;
    }

    #wbCanvas {
        width: 100% !important;
        height: calc(100% - 40px) !important;
        max-width: 100% !important;
        display: block !important;
        background: #fff !important;
        border-radius: 0 !important;
        touch-action: none !important;
        border: none !important;
        image-rendering: auto !important;
        overscroll-behavior: contain !important;
        -webkit-user-select: none !important;
        user-select: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE MORE DROPDOWN — merged with Settings
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* ── The "More" dropdown wrapper inside the bottom control bar ──
       We force position:relative so the absolute menu positions against
       this wrapper, not the whole viewport. This prevents the menu from
       flying off-screen when the bar is centered with translateX(-50%). */
    .local-controls .dropdown,
    .local-controls .btn-group {
        position: relative !important;
    }

    /* ── Override Bootstrap's dynamic (Popper) positioning ──
       data-bs-display="static" on the toggle disables Popper.
       We then manually position the menu so it opens UP and is
       centered above the button, never clipping off the screen. */
    .local-controls .dropdown-menu {
        position: absolute !important;
        inset: auto auto 100% 50% !important; /* bottom:100%, left:50% */
        transform: translateX(-50%) !important; /* center horizontally */
        margin-bottom: 0.5rem !important;
        margin-top: 0 !important;
        top: auto !important;
        right: auto !important;
        bottom: 100% !important;
        /* sizing: fit the phone screen with safe padding */
        min-width: 200px !important;
        max-width: calc(100vw - 1.5rem) !important;
        width: max-content !important;
        max-height: 60vh !important;
        overflow-y: auto !important;
        /* visual */
        background: var(--surface-2) !important;
        border: 1px solid var(--border-hover) !important;
        border-radius: var(--radius-md) !important;
        box-shadow: 0 -8px 32px rgba(0,0,0,0.6) !important;
        padding: 0.4rem !important;
        z-index: 1050 !important;
        /* prevent transform/position from being overridden by JS */
        will-change: auto !important;
    }

        .local-controls .dropdown-menu .dropdown-header {
            padding: 0.4rem 0.7rem;
            font-size: 0.55rem;
            letter-spacing: 0.12em;
        }

        .local-controls .dropdown-menu .dropdown-item {
            padding: 0.5rem 0.7rem;
            font-size: 0.78rem;
            border-radius: var(--radius-sm);
            color: var(--text-2);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

            .local-controls .dropdown-menu .dropdown-item:hover {
                background: var(--surface-3);
                color: var(--text-1);
            }

        .local-controls .dropdown-menu .dropdown-divider {
            border-color: var(--border);
            margin: 0.3rem 0.5rem;
        }

    /* ── Submenu (Virtual Background) ──
       On mobile the submenu can't open to the right (screen edge).
       Open it as a slide-down panel inside the same menu instead. */
    .local-controls .dropend .dropdown-menu {
        position: static !important;
        transform: none !important;
        inset: auto !important;
        margin: 0.3rem 0 0 0 !important;
        box-shadow: none !important;
        border: 1px solid var(--border) !important;
        background: var(--surface-3) !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: none; /* Bootstrap toggles this */
    }

        .local-controls .dropend.show .dropdown-menu,
        .local-controls .dropend .dropdown-menu.show {
            display: block !important;
        }

    /* Active states */
    .local-controls .vb-option.active {
        background: var(--accent-bg) !important;
        color: var(--accent) !important;
    }

    .local-controls #menuLiveCaptionsMobile.active {
        background: var(--accent-bg) !important;
        color: var(--accent) !important;
    }

    /* ── Very narrow phones (≤380px): shrink menu further ── */
    .local-controls .dropdown-menu {
        min-width: 180px !important;
        font-size: 0.75rem !important;
    }
}

/* Very small screens — make submenu appear above instead of right */
@media (max-width: 380px) {
    .local-controls .dropend .dropdown-menu {
        position: static !important;
        margin-left: 0;
        margin-top: 0.2rem;
        box-shadow: none;
        border: 1px solid var(--border);
        background: var(--surface-3);
    }

    .local-controls .dropend .dropdown-item {
        font-size: 0.72rem;
        padding: 0.4rem 0.6rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   MICRO-INTERACTIONS POLISH — tactile press feedback, hover lift on
   card-like rows, visible keyboard focus, and a reduced-motion
   escape hatch. Same colors/tokens/layout throughout, additive only.
   ═══════════════════════════════════════════════════════════════ */

/* ── Tactile press feedback on every clickable control ── */
.btn-tb,
.btn-accent,
.local-ctrl,
.cr-tab,
.rxn-emoji-btn,
.wb-tool,
.dropdown-item,
.tile-pin-btn,
.chat-send,
.resource-item-view,
.resource-item-download,
.btn-allow-camera,
.btn-deny-camera {
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1);
}

    .btn-tb:active,
    .btn-accent:active,
    .local-ctrl:not(.pending):active,
    .rxn-emoji-btn:active,
    .wb-tool:not(:disabled):active,
    .dropdown-item:active,
    .tile-pin-btn:active,
    .chat-send:active,
    .resource-item-view:active,
    .resource-item-download:active,
    .btn-allow-camera:active,
    .btn-deny-camera:active {
        transform: scale(0.94);
    }

/* ── Card-row hover lift — participants & resources feel more alive
   without changing their resting layout or colors. ── */
.participant-item,
.resource-item {
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

    .participant-item:hover,
    .resource-item:hover {
        transform: translateX(2px);
    }

    .resource-item:hover {
        box-shadow: var(--shadow-sm);
    }

/* ── Video tile hover — slightly stronger lift to match rxn-btn's
   existing pattern elsewhere in this file. ── */
.video-tile {
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

/* ── Chat bubbles ease in when they arrive instead of popping in ── */
.chat-msg {
    animation: msgIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes msgIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

button:focus-visible,
.local-ctrl:focus-visible,
.btn-tb:focus-visible,
.cr-tab:focus-visible,
.rxn-emoji-btn:focus-visible,
.wb-tool:focus-visible,
.dropdown-item:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

@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;
    }

    .floating-reaction {
        opacity: 0 !important;
    }
}