:root {
    /* Brand */
    --brand: #667eea;
    --brand-strong: #5a6fd8;
    --brand-deep: #764ba2;
    --brand-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --brand-gradient-strong: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
    --danger: #ef4444;
    --danger-strong: #dc2626;

    /* Surfaces & text */
    --bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --container-bg: rgba(255,255,255,0.95);
    --text-color: #333;
    --text-light: #666;
    --on-brand: rgba(255,255,255,0.92);
    --on-brand-muted: rgba(255,255,255,0.72);
    --chat-bg: rgba(0,0,0,0.05);
    --chat-msg-other: #f0f0f0;
    --chat-msg-other-text: #333;
    --controls-bg: rgba(255,255,255,0.8);
    --status-success-bg: #d4edda;
    --status-success-text: #155724;
    --status-error-bg: #f8d7da;
    --status-error-text: #721c24;
    --input-border: #ddd;
    --input-bg: white;

    /* Typography */
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* Spacing scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    /* Radius scale */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-pill: 999px;

    /* Elevation */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.12);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.18);
    --shadow-brand: 0 6px 20px rgba(102, 126, 234, 0.4);

    /* Focus ring */
    --focus-ring: 0 0 0 3px rgba(102, 126, 234, 0.5);

    /* Brand tints (soft fills / glows / borders derived from --brand) */
    --brand-tint: rgba(102, 126, 234, 0.10);
    --brand-tint-strong: rgba(102, 126, 234, 0.18);
    --brand-border: rgba(102, 126, 234, 0.30);
    --shadow-brand-soft: 0 4px 12px rgba(102, 126, 234, 0.30);

    /* Danger tints (leave / destructive controls) */
    --danger-tint: rgba(239, 68, 68, 0.10);
    --danger-border: rgba(239, 68, 68, 0.20);

    /* Hairline borders on translucent surfaces */
    --border-subtle: 1px solid rgba(255, 255, 255, 0.10);
    --border-card: 1px solid rgba(255, 255, 255, 0.15);

    /* Motion */
    --transition-fast: 0.2s ease;
    --transition: 0.3s ease;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-gradient: #000000;
        --container-bg: rgba(0, 0, 0, 0.95);
        --text-color: #ffffff;
        --text-light: #cccccc;
        --chat-bg: rgba(255,255,255,0.05);
        --chat-msg-other: #1e1e1e;
        --chat-msg-other-text: #ffffff;
        --controls-bg: rgba(0, 0, 0, 0.9);
        --status-success-bg: #27ae60;
        --status-success-text: #ffffff;
        --status-error-bg: #e74c3c;
        --status-error-text: #ffffff;
        --input-border: #333;
        --input-bg: #1e1e1e;
    }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { 
    background: var(--bg-gradient); 
    min-height: 100dvh;
    overscroll-behavior: none;
}
body {
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--bg-gradient);
    min-height: 100dvh; 
    padding: 0; 
    color: var(--text-color);
    overscroll-behavior: none;
    position: relative;
}
body::before {
    content: '';
    position: fixed;
    top: -100vh;
    left: 0;
    right: 0;
    bottom: -100vh;
    background: var(--bg-gradient);
    z-index: -1;
}
.container { background: var(--container-bg); border-radius: 0; padding: 0; max-width: none; margin: 0; min-height: 100dvh; }
h1 { text-align: center; color: var(--text-color); margin-bottom: 30px; }
/* Button System - Small, Medium, Large, CTA */
.button {
    background: var(--brand-gradient);
    color: white;
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    margin: 10px;
    transition: all var(--transition);
    font-weight: 500;
    text-align: center;
    display: inline-block;
    text-decoration: none;
}

.button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-brand-soft);
}

.button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.button:disabled:hover {
    transform: none;
    box-shadow: none;
}

/* Small Button */
.button.small {
    padding: 8px 16px;
    font-size: 14px;
    margin: 5px;
}

/* Medium Button (default) */
.button.medium,
.button {
    padding: 12px 24px;
    font-size: 16px;
}

/* Large Button */
.button.large {
    padding: 16px 32px;
    font-size: 18px;
    font-weight: 600;
}

/* CTA Button (Call to Action - Real Big) */
.button.cta {
    padding: 20px 40px;
    font-size: 20px;
    font-weight: 700;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-brand);
}

.button.cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5);
}
.home-page { text-align: center; padding: 40px 20px; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.hero-section { max-width: 1000px; width: 100%; }
.logo-container { margin-bottom: 60px; }
.logo { margin: 0 0 16px 0; font-size: 36px; font-weight: 700; color: white; }
.logo-img { height: 40px; vertical-align: middle; margin-right: 12px; }
.tagline { font-size: 24px; color: var(--on-brand); margin: 0; font-weight: 300; }

.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; margin: 60px 0; }
.feature { padding: 32px 24px; background: var(--container-bg); border-radius: var(--radius-xl); backdrop-filter: blur(10px); border: var(--border-subtle); transition: transform var(--transition), box-shadow var(--transition); }
.feature:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
.feature-icon { font-size: 48px; margin-bottom: 16px; }
.feature h3 { margin: 0 0 12px 0; font-size: 20px; font-weight: 600; color: var(--text-color); }
.feature p { margin: 0; font-size: 16px; color: var(--text-light); line-height: 1.5; }

.value-prop { font-size: 18px; color: var(--on-brand-muted); margin: 20px 0 0 0; font-weight: 400; max-width: 600px; margin-left: auto; margin-right: auto; line-height: 1.6; }

.cta-section { margin: 60px 0 40px 0; }
.cta-section.primary { margin: 40px 0 120px 0; }
.cta-section.secondary { margin: 40px 0 20px 0; padding: 32px 24px; background: var(--container-bg); border-radius: var(--radius-lg); backdrop-filter: blur(10px); border: var(--border-subtle); }
.cta-section.secondary h2 { margin: 0 0 16px 0; font-size: 32px; font-weight: 700; color: var(--text-color); }
.cta-section.secondary p { margin: 0 0 32px 0; font-size: 18px; color: var(--text-light); font-weight: 400; }
.cta-subtitle { margin: 16px 0 0 0; font-size: 16px; color: var(--on-brand-muted); font-weight: 300; }

.user-status-section {
    margin-bottom: 20px;
}

.user-welcome {
    margin-bottom: 12px;
    font-size: 18px;
    font-weight: 500;
    color: var(--text-color);
}

.user-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}


.room-created { background: var(--container-bg); border-radius: var(--radius-xl); padding: 32px; margin-top: 40px; backdrop-filter: blur(10px); border: var(--border-subtle); }
.success-message h3 { margin: 0 0 8px 0; font-size: 24px; color: var(--text-color); }
.success-message p { margin: 0 0 24px 0; font-size: 16px; color: var(--text-light); }
.room-actions { display: flex; gap: 16px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }
.button.primary { background: var(--brand-gradient); }
.button.secondary { background: var(--container-bg); color: var(--text-color); border: 1px solid var(--input-border); }
.button.secondary:hover { background: var(--container-bg); border-color: var(--brand); }
.button.danger { background: var(--danger-tint); color: var(--danger-strong); border: 1px solid var(--danger-border); }
.button.danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); }
.room-title { cursor: pointer; border-radius: var(--radius-sm); padding: 2px 6px; }
.room-title:hover { background: rgba(255,255,255,0.12); }
.chat-page { display: none; padding: 20px; flex-direction: column; height: 100dvh; }
/* position:relative + z-index lifts the header (and the menu dropdown nested in
   its backdrop-filter stacking context) above the video grid below — otherwise
   the composited screen-share/<video> layers paint over the dropdown. */
.room-header { position: relative; z-index: 30; display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding: 12px 16px; background: var(--container-bg); border-radius: var(--radius-md); backdrop-filter: blur(10px); border: var(--border-subtle); }
.room-lead { display: flex; align-items: center; gap: 12px; min-width: 0; }
.room-info h2 { margin: 0; font-size: 20px; font-weight: 600; color: var(--text-color); }
/* Host profile card, top-left of the room header. Any viewer can tap it to
   open the host's public profile. */
.creator-card {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    max-width: 220px;
    padding: 4px 14px 4px 4px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    color: var(--text-color);
    cursor: pointer;
    transition: background 0.15s ease;
    box-shadow: none;
}
.creator-card:hover {
    background: rgba(127,127,127,0.14);
}
.creator-card:active { background: rgba(127,127,127,0.2); }
.creator-card-avatar { width: 36px; height: 36px; }
.creator-card-avatar svg { width: 20px; height: 20px; }
.creator-card-name {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.viewer-count { font-size: 14px; color: var(--text-light); margin-top: 4px; font-weight: 500; }
.header-controls { 
    display: flex; 
    gap: 8px; 
    align-items: center; 
}

/* "Ask to join" request button shown to unapproved signed-in viewers in the
   room header (in place of the camera/mic/screen controls). */
.request-participate-btn {
    margin: 0;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Bare icon buttons — no card background, border, or shadow, so the header
   reads clean. Only the meaningful toggled-on (.active) state gets a fill. */
.control-icon {
    background: transparent;
    color: var(--text-color);
    border: none;
    padding: 0;
    border-radius: var(--radius-pill);
    font-size: 18px;
    cursor: pointer;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
    box-shadow: none;
    position: relative;
}

.control-icon:hover {
    background: rgba(127,127,127,0.15);
}

.control-icon:active {
    background: rgba(127,127,127,0.22);
}

.control-icon:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.control-icon:disabled:hover {
    background: transparent;
}

/* Toggle buttons (mic/camera) carry their state in the icon glyph itself — the
   crossed-out mic/camera variants signal "off" — so the "on" state needs no
   background fill. Keep the bare icon and the shared neutral hover. */
.control-icon.active {
    background: transparent;
    color: var(--text-color);
}

.control-icon.active:hover {
    background: rgba(127,127,127,0.15);
}

/* Specific button variants */
.leave-btn {
    background: var(--danger-tint);
    border-color: var(--danger-border);
    color: var(--danger);
}

.leave-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: var(--danger-strong);
}

.leave-btn::before {
    background: linear-gradient(90deg, transparent, rgba(239, 68, 68, 0.1), transparent);
}

/* Muted/off state: still no background fill — the crossed-out glyph carries the
   meaning. A red tint on the icon flags that it's off at a glance. */
.control-icon.muted {
    background: transparent;
    color: var(--danger);
}

.control-icon.muted:hover {
    background: rgba(127,127,127,0.15);
}

/* Menu dropdown styles */
.menu-container {
    position: relative;
    display: inline-block;
    z-index: 10000;
}

.menu-btn {
    font-weight: bold;
    font-size: 16px;
}

.menu-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--container-bg);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(10px);
    z-index: 99999;
    min-width: 220px;
    margin-top: 4px;
    overflow: hidden;
}

/* In the immersive over-video layout, header control icons are forced white so
   they read over the video. Inside the dropdown they sit on the menu's own
   opaque surface, where white would vanish — restore the normal text color (and
   keep the muted/off red). Higher specificity than the .stream-immersive rule. */
.stream-immersive .menu-controls .control-icon { color: var(--text-color); }
.stream-immersive .menu-controls .control-icon:hover:not(:disabled) { background: rgba(127, 127, 127, 0.15); }
.stream-immersive .menu-controls .control-icon.muted { color: var(--danger); }

/* Row of media-control icons at the top of the "more" menu. The mic/camera/
   switch/screen toggles were moved off the header and live here now, so opening
   the menu reveals the controls and the room options together. */
.menu-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px;
}

/* Hairline separating the control row from the room options below it. */
.menu-divider {
    height: 1px;
    background: rgba(127, 127, 127, 0.2);
}

.menu-item {
    width: 100%;
    background: none;
    border: none;
    padding: 12px 16px;
    text-align: left;
    cursor: pointer;
    color: var(--text-color);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.2s ease;
}

.menu-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.menu-item.leave-item {
    color: #ef4444;
}

.menu-item.leave-item:hover {
    background: rgba(239, 68, 68, 0.1);
}

.menu-icon {
    font-size: 14px;
    width: 16px;
    text-align: center;
}

.menu-text {
    font-size: 14px;
    font-weight: 500;
}

/* Mobile responsive styles for menu dropdown */
/* On touch/mobile widths the dropdown gets bigger, not smaller — larger rows
   (~48px tall) make for comfortable tap targets and easier-to-read labels. */
@media (max-width: 768px) {
    .menu-dropdown {
        min-width: 220px;
        margin-top: 6px;
    }

    .menu-item {
        padding: 14px 18px;
        font-size: 15px;
        gap: 12px;
    }

    .menu-icon {
        font-size: 15px;
        width: 20px;
    }

    .menu-text {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .menu-dropdown {
        min-width: 190px;
        margin-top: 6px;
    }

    .menu-item {
        padding: 14px 16px;
        font-size: 15px;
        gap: 12px;
    }

    .menu-icon {
        font-size: 15px;
        width: 20px;
    }

    .menu-text {
        font-size: 15px;
    }
}
.main-content { position: relative; display: flex; flex-direction: column; gap: 10px; margin: 0; flex: 1; min-height: 0; }
.video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.chat-container { position: relative; width: 100%; max-width: 800px; margin: 0 auto; background: transparent; border-radius: 15px; display: flex; flex-direction: column; min-height: 400px; }
/* `touch-action: pan-y` lets the chat scroll vertically but stops a pinch that
   lands on it (it overlays the video in the immersive layout) from zooming the
   whole page — pinches on the bare video still drive the video's own zoom. */
.chat-messages { flex: 1; padding: 15px; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 4px; min-height: 0; touch-action: pan-y; }
/* Flat, bubble-free chat (TikTok/Twitch live style): a muted semibold name
   followed by the message text inline, wrapping as one block. No background
   pills, no own/other alignment split — your own messages are marked only by a
   brand-tinted name. */
.chat-message { display: flex; align-items: flex-start; gap: 8px; padding: 3px 0; max-width: 100%; word-wrap: break-word; overflow-wrap: anywhere; line-height: 1.4; align-self: stretch; background: none; }
.chat-message.own, .chat-message.other { background: none; color: var(--text-color); align-self: stretch; }
/* Avatar column + the name/text column beside it. */
.chat-avatar { width: 28px; height: 28px; font-size: 11px; margin-top: 1px; }
.chat-body { flex: 1; min-width: 0; }
.chat-message .sender { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; margin-right: 6px; font-size: 14px; font-weight: 600; color: var(--text-light); }
.chat-message.own .sender { color: var(--brand); }
.chat-message .sender-name { min-width: 0; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Host distinction: a bolder name + a small "Host" badge marks the room creator
   in chat (replaces the crown that used to sit in the room title up top). The
   badge is a flex sibling, so it picks up the .sender row's 4px gap. */
.chat-message .sender-name.creator-name { font-weight: 700; }
.chat-message .chat-host-badge {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--brand);
    background: var(--brand-tint);
    padding: 1px 6px;
    border-radius: var(--radius-pill);
    line-height: 1.5;
}
.chat-message .text { display: inline; vertical-align: middle; font-size: 14px; color: var(--text-color); }
/* Friendly placeholder shown in an empty chat log until the first message. */
.chat-empty {
    margin: auto;
    text-align: center;
    color: var(--text-muted, rgba(255,255,255,0.6));
    font-size: 0.9rem;
    padding: 16px;
}
/* Host-only mute icon next to another person's name in chat. */
.chat-mute-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: inherit;
    opacity: 0.65;
    cursor: pointer;
    transition: opacity 0.15s ease, background 0.15s ease;
}
.chat-mute-btn:hover { opacity: 1; background: rgba(127,127,127,0.22); }
.chat-mute-btn:focus-visible { outline: none; opacity: 1; box-shadow: var(--focus-ring); }
.chat-mute-btn svg { width: 15px; height: 15px; }

/* Floating quick-pick menu for muting a chat user. */
.chat-mute-menu {
    position: fixed;
    z-index: 1000;
    min-width: 200px;
    padding: 6px;
    background: var(--container-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,0.25));
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.chat-mute-menu-title {
    padding: 6px 8px 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
    border-bottom: 1px solid var(--input-border);
    margin-bottom: 4px;
}
.chat-mute-menu button {
    text-align: left;
    padding: 9px 10px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-color);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.chat-mute-menu button:hover { background: rgba(127,127,127,0.15); }
.chat-mute-menu button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.chat-mute-menu .chat-mute-menu-cancel { color: var(--text-light); }

/* Pinned-message banner at the top of the chat (host-pinned, visible to all). */
.pinned-message {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    margin: 10px 10px 0;
    background: var(--chat-msg-other);
    color: var(--chat-msg-other-text);
    border-left: 3px solid var(--brand);
    border-radius: var(--radius-md);
}
.pinned-message[hidden] { display: none; }
.pinned-message-icon { flex-shrink: 0; display: inline-flex; color: var(--brand); margin-top: 1px; }
.pinned-message-icon svg { width: 16px; height: 16px; }
.pinned-message-body { flex: 1; min-width: 0; }
.pinned-message-label {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--brand);
    margin-bottom: 2px;
}
.pinned-message-label > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pinned-message-countdown { flex-shrink: 0; font-weight: 600; opacity: 0.85; }
.pinned-message-text { font-size: 14px; word-wrap: break-word; overflow-wrap: anywhere; }
.pinned-message-close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: inherit;
    opacity: 0.65;
    cursor: pointer;
    transition: opacity 0.15s ease, background 0.15s ease;
}
.pinned-message-close:hover { opacity: 1; background: rgba(127,127,127,0.22); }
.pinned-message-close:focus-visible { outline: none; opacity: 1; box-shadow: var(--focus-ring); }
.pinned-message-close svg { width: 15px; height: 15px; }

/* "Muted in chat" section inside the room user list (creator-only). */
.chat-mute-section {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--input-border);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.chat-mute-section-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-light);
    padding: 2px 10px 6px;
}
.chat-mute-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 10px;
    border-radius: var(--radius-md);
}
.chat-mute-row .user-list-name { display: flex; flex-direction: column; }
.chat-mute-when { font-size: 11px; font-weight: 500; color: var(--text-light); }
.chat-unmute-btn { flex-shrink: 0; }
.chat-input-container { display: flex; align-items: center; gap: 8px; padding: 12px 15px; border-top: none; touch-action: manipulation; }
/* font-size must stay >= 16px: iOS Safari auto-zooms (and distorts the layout)
   when a focused input is smaller than 16px. */
.chat-input-container input { flex: 1; min-width: 0; padding: 11px 14px; border: 1px solid transparent; border-radius: var(--radius-pill); margin-right: 0; outline: none; background: rgba(127,127,127,0.14); color: var(--text-color); font-size: 16px; transition: background 0.15s ease, box-shadow 0.15s ease; }
.chat-input-container input::placeholder { color: var(--text-light); opacity: 0.8; }
.chat-input-container input:focus { background: rgba(127,127,127,0.2); box-shadow: var(--focus-ring); }
/* Flat icon send button — brand-tinted glyph, no fill or border. */
.chat-send-btn { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: none; border-radius: var(--radius-pill); background: transparent; color: var(--brand); cursor: pointer; transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease; }
.chat-send-btn svg { width: 24px; height: 24px; display: block; }
.chat-send-btn:hover:not(:disabled) { background: var(--brand-tint); }
.chat-send-btn:active:not(:disabled) { background: var(--brand-tint-strong); }
.chat-send-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.chat-send-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Immersive full-bleed stream layout ──────────────────────────────────────
   Applied via `.stream-immersive` on #chatPage whenever at least one person is
   streaming (see updateStreamLayout in app.js). The video(s) fill the room area
   edge-to-edge and the chat floats over the bottom of them (TikTok/IG Live
   style). One tile fills the whole area; two-plus tiles auto-arrange into a grid
   that still fills the area — so multi-streamer rooms stay full-bleed too while
   the chat input stays pinned to the bottom and easy to find on small screens.
   Reverts to the stacked grid + chat panel only when nobody is streaming. */
.stream-immersive .video-grid {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    grid-auto-rows: 1fr;
    gap: 2px;
    margin: 0;
    z-index: 0;
    /* Tiles scale down to share the fixed full-bleed area — never scroll.
       Overrides the mobile stacked-grid cap (max-height/overflow-y: auto). */
    max-height: none;
    overflow: hidden;
}
.stream-immersive .video-container {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border-radius: var(--radius-md);
}
/* Chat overlays the lower portion of the video. The container itself is
   click-through (so the video stays tappable/zoomable); only its interactive
   children re-enable pointer events. A gradient scrim (::before) keeps text
   legible over bright frames without boxing the chat in. */
.stream-immersive .chat-container {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: none;
    margin: 0;
    min-height: 0;
    z-index: 2;
    background: transparent;
    pointer-events: none;
}
.stream-immersive .chat-container::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: -48px;
    background: linear-gradient(to top, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.3) 55%, transparent 100%);
    pointer-events: none;
    z-index: -1;
}
.stream-immersive .chat-messages {
    flex: none;
    max-height: 38vh;
    padding-bottom: 4px;
    pointer-events: auto;
    /* Fade the top edge so older lines dissolve into the video. */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 40px);
    mask-image: linear-gradient(to bottom, transparent 0, #000 40px);
}
/* White text + shadow for readability over arbitrary video, regardless of
   light/dark scheme. */
.stream-immersive .chat-message .text { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.7); }
.stream-immersive .chat-message .sender { color: rgba(255,255,255,0.82); text-shadow: 0 1px 3px rgba(0,0,0,0.7); }
.stream-immersive .chat-message.own .sender { color: #c7d0ff; }
.stream-immersive .chat-message .chat-host-badge { color: #fff; background: rgba(255,255,255,0.22); text-shadow: none; }
.stream-immersive .chat-empty { color: rgba(255,255,255,0.85); text-shadow: 0 1px 3px rgba(0,0,0,0.7); }
.stream-immersive .pinned-message { pointer-events: auto; }
.stream-immersive .chat-scroll-btn { pointer-events: auto; }
.stream-immersive .chat-input-container { pointer-events: auto; }
.stream-immersive .chat-input-container input {
    background: rgba(255,255,255,0.16);
    border-color: rgba(255,255,255,0.18);
    color: #fff;
    backdrop-filter: blur(8px);
}
.stream-immersive .chat-input-container input::placeholder { color: rgba(255,255,255,0.75); }
.stream-immersive .chat-input-container input:focus { background: rgba(255,255,255,0.24); }
.stream-immersive .chat-send-btn { color: #fff; }
.stream-immersive .chat-send-btn:hover:not(:disabled) { background: rgba(255,255,255,0.18); }

/* Float the room header (host card, title, viewer count + the camera/mic/screen
   controls and menu) over the TOP of the video too, mirroring the chat overlay
   at the bottom — so a stream is fully immersive instead of a solid bar
   pushing the video down. The header itself is click-through; only its
   interactive children re-enable pointer events. A gradient scrim (::before)
   keeps the controls legible over bright frames. Anchored to #chatPage, which
   we make a positioning context in this mode. */
.stream-immersive.chat-page { position: relative; }
.stream-immersive .room-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: 16px 20px;
    background: transparent;
    backdrop-filter: none;
    border: none;
    border-radius: 0;
    z-index: 3;
    pointer-events: none;
}
.stream-immersive .room-header::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: calc(100% + 40px);
    background: linear-gradient(to bottom, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
    pointer-events: none;
    z-index: -1;
}
.stream-immersive .room-lead,
.stream-immersive .header-controls { pointer-events: auto; }
/* White text + shadow for readability over arbitrary video, regardless of
   light/dark scheme. */
.stream-immersive .room-info h2,
.stream-immersive .room-title { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.7); }
.stream-immersive .room-title:hover { background: rgba(255,255,255,0.18); }
.stream-immersive .viewer-count { color: rgba(255,255,255,0.85); text-shadow: 0 1px 3px rgba(0,0,0,0.7); }
.stream-immersive .creator-card { color: #fff; }
.stream-immersive .creator-card-name { text-shadow: 0 1px 3px rgba(0,0,0,0.7); }
.stream-immersive .creator-card:hover { background: rgba(255,255,255,0.16); }
.stream-immersive .control-icon { color: #fff; }
.stream-immersive .control-icon:hover:not(:disabled) { background: rgba(255,255,255,0.18); }
.stream-immersive .control-icon:active:not(:disabled) { background: rgba(255,255,255,0.26); }
/* Keep the toggled-on (brand fill) and request-to-join button as-is — they read
   fine over video and shouldn't be washed out to white. */

@media (prefers-reduced-motion: reduce) {
    .stream-immersive .chat-messages { scroll-behavior: auto; }
}

.video-container { position: relative; background: #000; border-radius: 15px; aspect-ratio: 16/9; overflow: hidden; }
.video-element { width: 100%; height: 100%; object-fit: cover; transition: transform 0.1s ease-out; }
.video-container.zoomable { touch-action: none; }
.video-container.zoomable .video-element { 
    transform-origin: center center; 
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
/* The overlay is just a transparent flex row; each child carries its own pill so
   an overlay with no visible children (e.g. the creator's nameless tile when not
   muted) leaves nothing behind on the video. */
.video-overlay { position: absolute; bottom: 10px; left: 10px; display: inline-flex; align-items: center; gap: 6px; color: white; font-size: 14px; font-weight: 500; }
.video-overlay .username { background: rgba(0,0,0,0.7); padding: 5px 12px; border-radius: 20px; }
.video-disabled-message { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.8); color: white; padding: 15px 20px; border-radius: 10px; font-size: 14px; text-align: center; display: none; }
/* A shared screen rarely matches the 16:9 tile; show it whole instead of cropping. */
.video-container.is-screen .video-element { object-fit: contain; }
/* "Sharing screen" badge, top-left of a tile (the username overlay is bottom-left). */
.screen-badge { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 6px; background: rgba(0,0,0,0.7); color: #fff; padding: 4px 10px; border-radius: 20px; font-size: 13px; font-weight: 500; }
.screen-badge svg { width: 15px; height: 15px; }

/* Active-speaker cue: a subtle brand ring on the tile of whoever is talking.
   The ring is drawn on a ::after overlay (painted ABOVE the <video> child) so it
   looks identical on camera tiles and mic-only placeholder tiles. A plain inset
   box-shadow on the container is painted UNDER the video, so it was hidden behind
   the camera feed but fully exposed on audio-only tiles — making the same cue read
   far more intensely there. The soft outer glow stays on the container (never
   occluded); inset on the ::after keeps the ring inside the tile's clip. */
.video-container.speaking {
    box-shadow: 0 0 12px rgba(102, 126, 234, 0.4);
    transition: box-shadow 0.12s ease-out;
}
.video-container.speaking::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 2px var(--brand);
    pointer-events: none;
}

/* "Reconnecting…" overlay shown on a tile whose media path has dropped. */
.reconnecting-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    z-index: 9;
}
.reconnecting-spinner {
    width: 26px;
    height: 26px;
    border: 3px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: reconnecting-spin 0.8s linear infinite;
}
@keyframes reconnecting-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .reconnecting-spinner { animation: none; }
    .video-container.speaking { transition: none; }
}

/* Full-area "Connecting…" / "Going live…" state shown over the room while we
   wait for the join to confirm, so a viewer never sits on a stuck blank screen.
   Cleared on room-joined (or swapped to a retry prompt if it drags on). */
.connecting-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-4);
    text-align: center;
    background: var(--chat-bg);
    border-radius: 15px;
}
.connecting-overlay.show { display: flex; }
.connecting-text { color: var(--text-color); font-size: 15px; font-weight: 500; max-width: 28ch; }
.connecting-retry { margin-top: var(--space-2); }

/* Floating "jump to latest" pill: shown only when new chat arrives while the
   reader has scrolled up, so they can catch up without losing their place. */
.chat-scroll-btn {
    position: absolute;
    left: 50%;
    bottom: 74px;
    transform: translateX(-50%);
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--brand-gradient);
    color: #fff;
    border: none;
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-brand-soft);
}
.chat-scroll-btn[hidden] { display: none; }
.chat-scroll-btn svg { width: 14px; height: 14px; }

.controls { text-align: center; padding: 20px; background: var(--controls-bg); border-radius: 15px; margin-bottom: 10px; transition: all 0.3s ease; overflow: hidden; }
.controls.hidden { max-height: 0; padding: 0; margin: 0; opacity: 0; }
/* Toasts: a single global region pinned to the top-center of the viewport.
   showStatus() drops one .status child in; it auto-clears after a timeout. */
#status {
    position: fixed;
    top: var(--space-4);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    width: max-content;
    max-width: min(92vw, 440px);
    pointer-events: none;
}
#status:empty { display: none; }
.status {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    text-align: center;
    font-weight: 500;
    box-shadow: var(--shadow-lg);
    pointer-events: auto;
    animation: toast-in var(--transition-fast);
}
@keyframes toast-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.status.success { background: var(--status-success-bg); color: var(--status-success-text); }
.status.error { background: var(--status-error-bg); color: var(--status-error-text); }
.status.info { background: var(--brand-gradient); color: #fff; }
.room-url { background: #f8f9fa; border: 2px solid #e9ecef; border-radius: var(--radius-sm); padding: var(--space-4); margin: var(--space-4) 0; word-break: break-all; font-family: monospace; }

/* Mobile responsive styles */
@media (max-width: 768px) {
    .button { padding: 10px 20px; font-size: 14px; margin: 5px; min-height: 44px; }
    .button.small { padding: 6px 12px; font-size: 12px; margin: 2px; min-height: 36px; }
    .container { padding: 0; margin: 0; }
    .home-page { padding: 20px 15px; }
    .logo { font-size: 36px; }
    .tagline { font-size: 20px; }
    .logo-container { margin-bottom: 40px; }
    .features-grid { gap: 24px; margin: 40px 0; }
    .feature { padding: 24px 20px; }
    .feature-icon { font-size: 40px; }
    .feature h3 { font-size: 18px; }
    .feature p { font-size: 14px; }
    .value-prop { font-size: 16px; }
    .cta-section { margin: 40px 0 20px 0; }
    .cta-section.primary { margin: 30px 0 80px 0; }
    .cta-section.secondary { margin: 30px 0 16px 0; padding: 24px 16px; }
    .cta-section.secondary h2 { font-size: 28px; }
    .cta-section.secondary p { font-size: 16px; }
    .room-created { padding: 24px; }
    .chat-page { padding: 15px; }
    .room-header { 
        margin-bottom: 8px; 
        padding: 0; 
        background: none;
        border-radius: 0;
        backdrop-filter: none;
        border: none;
        flex-wrap: wrap;
        gap: 8px;
    }
    .room-lead {
        flex: 1;
        min-width: 0;
        gap: 8px;
    }
    .room-info {
        flex: 1;
        min-width: 0;
    }
    .room-info h2 {
        font-size: 16px;
        margin: 0;
        word-break: break-word;
        line-height: 1.3;
    }
    .viewer-count { 
        font-size: 12px; 
        margin-top: 2px;
    }
    .header-controls { 
        gap: 4px; 
        flex-shrink: 0;
        display: flex;
        align-items: center;
    }
    .control-icon { 
        font-size: 16px; 
        width: 44px; 
        height: 44px; 
        min-width: 44px;
    }
    /* On phones the stacked layout (no tiles yet — i.e. nobody streaming) used to
       let the video grid + a tall min-height chat panel overflow past 100dvh,
       pushing the chat input below the fold so you had to scroll down to type.
       Instead: clip the room area to the viewport, cap the video grid so it can't
       hog the height (it scrolls internally if there are several tiles), and let
       the chat flex to fill whatever's left — keeping its input pinned to the
       bottom of the view. The .stream-immersive overlay layout has higher
       specificity, so its full-bleed video + floating chat are unaffected. */
    .main-content { gap: 8px; overflow: hidden; }
    .video-grid { grid-template-columns: 1fr; gap: 10px; margin: 0; flex: 0 1 auto; min-height: 0; max-height: 45vh; overflow-y: auto; }
    .chat-container { max-width: 100%; min-height: 0; flex: 1 1 auto; }
    .video-container { border-radius: 10px; }
    .controls { padding: 15px; flex-wrap: wrap; display: flex; justify-content: center; gap: 8px; }
    .status { font-size: 14px; }
    .room-url { padding: 12px; font-size: 14px; }
}

@media (max-width: 480px) {
    .button { padding: 12px 16px; font-size: 14px; margin: 4px; min-height: 48px; min-width: 80px; border-radius: 25px; touch-action: manipulation; }
    .container { padding: 0; margin: 0; }
    .home-page { padding: 15px 10px; }
    .logo { font-size: 32px; }
    .tagline { font-size: 18px; }
    .logo-container { margin-bottom: 32px; }
    .value-prop { font-size: 15px; }
    .cta-section.primary { margin: 24px 0 40px 0; }
    .cta-section.secondary { margin: 24px 0 12px 0; padding: 20px 12px; }
    .cta-section.secondary h2 { font-size: 24px; }
    .cta-section.secondary p { font-size: 15px; }
    .features-grid { gap: 20px; margin: 32px 0; grid-template-columns: 1fr; }
    .feature { padding: 20px 16px; }
    .feature-icon { font-size: 36px; }
    .feature h3 { font-size: 16px; }
    .feature p { font-size: 13px; }
    .cta-section { margin: 32px 0 16px 0; }
    .room-created { padding: 20px; }
    .room-actions { flex-direction: column; gap: 12px; }
    .chat-page { padding: 10px; }
    .room-header { 
        margin-bottom: 8px; 
        padding: 0;
        background: none;
        border-radius: 0;
        backdrop-filter: none;
        border: none;
        flex-wrap: wrap;
        gap: 6px;
    }
    .room-lead {
        flex: 1;
        min-width: 0;
        gap: 8px;
    }
    /* Keep the host card compact on phones: avatar only, name hidden. */
    .creator-card { max-width: none; padding: 3px; }
    .creator-card-name { display: none; }
    .creator-card-avatar { width: 34px; height: 34px; }
    .room-info {
        flex: 1;
        min-width: 0;
    }
    .room-info h2 {
        font-size: 14px;
        margin: 0;
        word-break: break-word;
        line-height: 1.2;
    }
    .viewer-count { 
        font-size: 11px; 
        margin-top: 1px;
    }
    .header-controls { 
        gap: 3px; 
        flex-shrink: 0;
    }
    .control-icon { 
        font-size: 14px; 
        width: 40px; 
        height: 40px; 
        min-width: 40px;
    }
    .main-content { gap: 6px; }
    .chat-container { max-width: 100%; min-height: 0; }
    .chat-messages { padding: 10px; gap: 3px; }
    .chat-message { padding: 2px 0; }
    .chat-message .sender, .chat-message .text { font-size: 14px; }
    .chat-input-container { padding: 10px; gap: 6px; }
    /* Keep font-size >= 16px: this media query previously overrode the base
       16px back to 14px, which re-triggered iOS Safari's focus auto-zoom. */
    .chat-input-container input { padding: 10px 14px; font-size: 16px; }
    .chat-send-btn { width: 40px; height: 40px; }
    h1 { font-size: 24px; margin-bottom: 20px; }
    h2 { font-size: 20px; margin-bottom: 15px; }
    .controls { padding: 12px; gap: 6px; }
    .video-grid { gap: 8px; margin: 0; }
    .video-container { border-radius: 8px; }
    .video-overlay { font-size: 13px; padding: 4px 10px; }
    .status { font-size: 13px; padding: 8px; }
    .room-url { padding: 10px; font-size: 12px; }
    
    .peer-controls button {
        min-width: 36px;
        min-height: 36px;
        padding: 8px;
        margin: 2px;
        font-size: 14px;
    }
}

/* Camera switch button styles */
.camera-switch-btn {
    background: rgba(0,0,0,0.7);
    color: white;
    border: none;
    border-radius: 25px;
    padding: 8px 12px;
    font-size: 12px;
    cursor: pointer;
    margin-left: 5px;
}

@media (max-width: 480px) {
    .camera-switch-btn {
        padding: 10px 14px;
        font-size: 14px;
        min-height: 40px;
    }
}

/* Modal styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    /* Fade the scrim in each time the modal is shown (display none→flex
       re-runs the animation). Disabled under prefers-reduced-motion below. */
    animation: modal-overlay-in var(--transition-fast);
}

.modal-content {
    background: var(--container-bg);
    border-radius: var(--radius-xl);
    padding: 0;
    min-width: 400px;
    max-width: 500px;
    width: 90%;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: var(--border-card);
    /* Subtle rise + scale so the dialog feels like it springs from the scrim,
       matching the glassy room UI rather than just blinking into place. */
    animation: modal-pop-in 0.24s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: center;
}

@keyframes modal-overlay-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modal-pop-in {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Modal headers/footers separate from the body with a theme-neutral hairline.
   The white --border-subtle token is invisible on the light (near-white) modal
   surface, which left the sections looking unstructured. */
.modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(127, 127, 127, 0.18);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.modal-header h3 {
    margin: 0;
    color: var(--text-color);
    font-size: 20px;
    font-weight: 600;
}

.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--text-color);
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.modal-close:hover {
    background: rgba(127, 127, 127, 0.15);
}

.modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

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

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-color);
    font-weight: 500;
    font-size: 14px;
}

.form-group input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--input-border);
    border-radius: var(--radius-md);
    background: var(--input-bg);
    color: var(--text-color);
    font-size: 16px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-group input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-tint-strong);
}

/* Inline checkbox row (e.g. the "Private stream" toggle): overrides the default
   block label + full-width input so the box sits beside its label. */
.form-group .checkbox-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
    cursor: pointer;
    font-weight: 600;
}

.form-group .checkbox-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    padding: 0;
    margin: 0;
    border-radius: 4px;
    flex: 0 0 auto;
    accent-color: var(--brand);
    cursor: pointer;
}

/* Small helper/explanatory text under a form field. */
.field-hint {
    margin: 6px 0 0;
    color: var(--text-light);
    font-size: 13px;
    line-height: 1.4;
}

.modal-footer {
    padding: 20px 24px;
    border-top: 1px solid rgba(127, 127, 127, 0.18);
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    flex-shrink: 0;
}

.modal-footer .button {
    margin: 0;
    padding: 10px 20px;
    font-size: 14px;
    /* Footer action buttons (incl. the JS-toggled "Edit Profile"/"Follow"/
       "Report") render as inline-block, so the label centers via text-align
       (inherited from .button) reliably across browsers — note that a <button>
       used as a flex container does NOT center its label dependably in iOS
       Safari, which is why we deliberately avoid display:flex here. The flex
       centering below is only a harmless safety net for any future icon+text
       footer button. */
    justify-content: center;
    align-items: center;
}

/* Auth modal swaps between two footer button rows; mirror the footer's
   flex layout so the buttons get the same spacing as the other modals. */
.auth-footer-actions {
    flex: 1;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

@media (max-width: 480px) {
    /* The overlay already insets the dialog (.modal padding), so the content
       just needs to fill the available width. */
    .modal { padding: 12px; }

    .modal-content {
        min-width: auto;
        width: 100%;
        margin: 0;
    }

    .modal-header, .modal-body, .modal-footer {
        padding: 16px;
    }

    .modal-footer {
        flex-direction: column;
    }

    .modal-footer .button {
        width: 100%;
    }

    .auth-footer-actions {
        flex-direction: column;
    }
}

/* Recently visited rooms styles */
.recent-rooms-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.recent-rooms-header h2 {
    margin: 0;
    font-size: 28px;
    font-weight: 600;
    color: var(--text-color);
}

/* Recent Rooms: one compact line per room, matching the Live Rooms list. */
.recent-rooms-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.recent-room-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--container-bg);
    border-radius: 10px;
    padding: 10px 14px;
    border: var(--border-subtle);
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    backdrop-filter: blur(10px);
}

.recent-room-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
    border-color: var(--brand-border);
}

.recent-room-avatar {
    width: 36px;
    height: 36px;
    font-size: 14px;
}

.recent-room-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recent-room-meta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-light);
    white-space: nowrap;
}

/* The creator name can be long — let it shrink and ellipsis before the time. */
.recent-room-creator {
    flex-shrink: 1;
    min-width: 0;
    max-width: 45%;
}

.recent-room-creator-name {
    overflow: hidden;
    text-overflow: ellipsis;
}

.recent-room-time {
    opacity: 0.85;
}

.no-recent-rooms {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-light);
    font-style: italic;
}

@media (max-width: 768px) {
    .recent-rooms-header {
        flex-wrap: wrap;
        margin-bottom: 20px;
    }

    .recent-rooms-header h2 {
        font-size: 24px;
    }

    .recent-room-name {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .recent-rooms-header {
        margin-bottom: 16px;
    }

    .recent-rooms-header h2 {
        font-size: 20px;
    }

    /* Tight screens: drop the creator chip so name · time stay on one clean line. */
    .recent-room-creator {
        display: none;
    }
}

/* Clickable username styles */
.clickable-username {
    cursor: pointer;
    color: var(--brand);
    text-decoration: none;
    transition: all 0.2s ease;
    border-radius: 4px;
    padding: 1px 3px;
}

.clickable-username:hover {
    background: var(--brand-tint);
    color: var(--brand-strong);
    text-decoration: underline;
}

.clickable-username:active {
    background: var(--brand-tint-strong);
}

/* Video overlay username styles */
.video-overlay .clickable-username {
    color: #ffffff;
    background: rgba(0, 0, 0, 0.7);
    padding: 5px 12px;
    border-radius: 20px;
    font-weight: 500;
}

.video-overlay .clickable-username:hover {
    background: rgba(0, 0, 0, 0.85);
    color: #ffffff;
    text-decoration: none;
    transform: scale(1.05);
}

/* Loading animation for profile modal */
#userProfileViewLoading {
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* Mobile responsive adjustments for user profile modal */
@media (max-width: 480px) {
    #userProfileDisplayName {
        font-size: 20px !important;
    }
    
    #userProfileUsername {
        font-size: 14px !important;
    }
    
    .user-profile-bio h5 {
        font-size: 14px !important;
    }
    
    #userProfileBio {
        font-size: 13px !important;
        padding: 12px !important;
        text-align: center !important;
    }
}

/* ---------------------------------------------------------------------------
   Accessibility & shared utilities
   --------------------------------------------------------------------------- */

/* Visible keyboard focus for all interactive elements. Mouse clicks stay clean
   thanks to :focus-visible, but keyboard/AT users always get a clear ring. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
.control-icon:focus-visible,
.menu-item:focus-visible,
.modal-close:focus-visible,
.clickable-username:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .button:hover,
    .feature:hover,
    .control-icon:hover,
    .recent-room-item:hover {
        transform: none;
    }
}

/* Inline form error / alert messages (shared across modals). */
.form-error {
    color: #fff;
    margin-bottom: 15px;
    padding: 10px 14px;
    background: var(--danger);
    border-radius: var(--radius-sm);
    font-size: 14px;
}

/* Bio textarea (matches .form-group input styling). */
.form-textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--input-border);
    border-radius: var(--radius-md);
    background: var(--input-bg);
    color: var(--text-color);
    font-size: 16px;
    font-family: inherit;
    outline: none;
    resize: vertical;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-textarea:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-tint-strong);
}

/* Modal loading state. */
.modal-loading {
    text-align: center;
    padding: 20px;
    color: var(--text-light);
}
.modal-loading-icon {
    margin-bottom: 10px;
    color: var(--brand);
}
.modal-loading-icon svg { width: 28px; height: 28px; }

/* ---------------------------------------------------------------------------
   SVG icon system. Icons inherit color via `stroke="currentColor"` and are
   sized per context here (replacing the old emoji glyphs).
   --------------------------------------------------------------------------- */

/* Header control buttons (video / audio / camera / menu). */
.control-icon svg { width: 22px; height: 22px; display: block; }

/* Menu dropdown row icons — scale with the .menu-icon box (16/14/12px). */
.menu-icon { display: inline-flex; align-items: center; justify-content: center; }
.menu-icon svg { width: 100%; height: auto; display: block; }

/* Feature grid icons on the homepage. */
.feature-icon { color: var(--brand); line-height: 0; }
.feature-icon svg { width: 44px; height: 44px; }

/* Viewer count pill: users icon + label. */
.viewer-count { display: inline-flex; align-items: center; gap: 6px; }
.viewer-count svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Icon + label inside buttons (Refresh, Copy Link, Join Room, etc.). */
.button svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; }

/* Inline icons used inside headings / strong text (verify-email modal). */
.heading-icon { display: inline-flex; vertical-align: middle; margin-right: 6px; }
.heading-icon svg { width: 20px; height: 20px; }
.inline-icon { display: inline-flex; vertical-align: -3px; }
.inline-icon svg { width: 16px; height: 16px; }
.overlay-hero-icon { color: var(--brand); margin-bottom: 15px; line-height: 0; }
.overlay-hero-icon svg { width: 48px; height: 48px; }

/* Muted indicator inside video overlays. Only ever holds the mic-off icon (when
   the streamer is muted); it carries its own pill and collapses entirely when
   empty, so unmuting leaves nothing behind. */
.audio-status { display: inline-flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.7); padding: 6px; border-radius: 50%; }
.audio-status:empty { display: none; }
.audio-status svg { width: 14px; height: 14px; display: block; }

/* Single-user icon next to "Created by" in recent rooms. */
.recent-room-creator-icon { display: inline-flex; align-items: center; }
.recent-room-creator-icon svg { width: 14px; height: 14px; }

/* Peer moderation buttons (mute / remove) on video tiles. */
.peer-controls button svg { width: 16px; height: 16px; display: block; }

/* Click-to-play overlay on remote video. */
.video-play-button { display: flex; align-items: center; gap: 6px; }
.video-play-button svg { width: 14px; height: 14px; }

/* Live / offline status dots (replace 🔴 / ⚫). */
.live-dot,
.offline-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
    flex-shrink: 0;
}
.live-dot {
    background: var(--danger);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5);
    animation: live-pulse 2s infinite;
}
.offline-dot { background: var(--text-light); opacity: 0.5; }

@keyframes live-pulse {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); }
    70% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* Spinner for loading icons. */
.spin { animation: icon-spin 0.9s linear infinite; transform-origin: center; }
@keyframes icon-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* The Live Rooms heading lays out the dot + text inline. */
.recent-rooms-header h2 { display: inline-flex; align-items: center; }

/* ---- Home feed (single list + filter dropdown) ---- */
.home-feed-header { justify-content: space-between; }
.home-feed-filter { display: inline-flex; align-items: center; }
.home-feed-select {
    appearance: none;
    -webkit-appearance: none;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-color);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    padding: 4px 28px 4px 6px;
    margin-left: -6px;
    cursor: pointer;
    /* Chevron affordance so it reads as a picker, not a static heading. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
}
.home-feed-select:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.home-feed-select option { color: var(--text-color); background: var(--container-bg); font-size: 16px; font-weight: 600; }

/* ---- Avatars (profile photos with an initials fallback) ----
   One shared base look (round, brand-gradient fill, centered photo/initials).
   `.avatar` + a size modifier (`.avatar-sm/-md/-lg/-xl`) is the canonical API;
   the per-context class names below are kept as size aliases for existing
   markup and all inherit this same base. */
.avatar,
.profile-avatar,
.live-room-avatar,
.creator-card-avatar,
.user-list-avatar,
.notification-icon {
    border-radius: 50%;
    overflow: hidden;
    background: var(--brand-gradient);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 600;
    line-height: 1;
}
.avatar img,
.profile-avatar img,
.live-room-avatar img,
.creator-card-avatar img,
.user-list-avatar img,
.notification-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}
.avatar svg { display: block; }
.avatar-initials { text-transform: uppercase; }

/* Size modifiers */
.avatar-sm { width: 36px; height: 36px; font-size: 14px; }
.avatar-sm svg { width: 20px; height: 20px; }
.avatar-md { width: 40px; height: 40px; font-size: 15px; }
.avatar-md svg { width: 20px; height: 20px; }
.avatar-lg { width: 72px; height: 72px; font-size: 26px; }
.avatar-xl { width: 88px; height: 88px; font-size: 32px; }

/* Profile view modal: avatar + larger identity text (no redundant title bar). */
.user-profile-header { text-align: center; }
.profile-avatar {
    width: 88px;
    height: 88px;
    font-size: 32px;
    margin: 4px auto 18px;
}
.profile-display-name {
    margin: 0 0 4px 0;
    font-size: 28px;
    font-weight: 700;
    color: var(--text-color);
    word-break: break-word;
}
.profile-handle {
    margin: 0 0 16px 0;
    font-size: 18px;
    color: var(--text-light);
    opacity: 0.85;
    word-break: break-word;
}
.profile-bio {
    margin: 0;
    font-size: 16px;
    color: var(--text-color);
    line-height: 1.55;
}

/* Edit-profile modal: avatar preview + upload/remove actions. */
.profile-avatar-edit {
    display: flex;
    align-items: center;
    gap: 16px;
}
.profile-avatar-lg { width: 72px; height: 72px; font-size: 26px; margin: 0; }
.profile-avatar.uploading { opacity: 0.5; }
.profile-avatar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.profile-avatar-actions .button { margin: 0; padding: 8px 14px; font-size: 14px; line-height: 1.2; width: auto; display: inline-flex; align-items: center; justify-content: center; }

/* Viewer count becomes a button for the host (opens the room user list). */
.viewer-count-clickable {
    cursor: pointer;
    border-radius: var(--radius-pill);
    padding: 1px 4px;
    margin-left: -4px;
    transition: color 0.15s ease, background 0.15s ease;
}
.viewer-count-clickable:hover { color: var(--text-color); background: rgba(127,127,127,0.12); }
.viewer-count-clickable:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Room user list (creator-only "In this room" modal). */
.user-list { display: flex; flex-direction: column; gap: 2px; }
.user-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: transparent;
    border-radius: var(--radius-md);
    color: var(--text-color);
    text-align: left;
    font: inherit;
}
button.user-list-item { cursor: pointer; transition: background 0.15s ease; }
button.user-list-item:hover { background: rgba(127,127,127,0.12); }
button.user-list-item:active { background: rgba(127,127,127,0.2); }
button.user-list-item:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.user-list-avatar { width: 40px; height: 40px; font-size: 15px; }
.user-list-avatar svg { width: 20px; height: 20px; }
.user-list-name {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.user-list-you { margin-left: 6px; font-weight: 500; font-size: 12px; color: var(--text-light); }
.user-list-badge {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--brand);
    background: var(--brand-tint);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
}
.user-list-guests { color: var(--text-light); cursor: default; }

/* ---- Live Rooms list: one compact line per room ---- */
.live-rooms-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* Friendly empty / loading state for the room lists. */
.rooms-empty {
    text-align: center;
    padding: 18px 14px;
    color: var(--text-muted, rgba(255,255,255,0.65));
    font-size: 0.9rem;
    background: var(--container-bg);
    border: 1px dashed rgba(255,255,255,0.18);
    border-radius: 10px;
}
.live-room-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--container-bg);
    border: var(--border-subtle);
    border-radius: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    backdrop-filter: blur(10px);
}
.live-room-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
    border-color: var(--brand-border);
}
.live-room-item.offline { opacity: 0.6; }
.live-room-item.offline:hover { opacity: 0.85; }
.live-room-avatar {
    width: 36px;
    height: 36px;
    font-size: 14px;
}
.live-room-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.live-room-meta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    color: var(--text-light);
    white-space: nowrap;
}
.live-room-duration {
    justify-content: flex-end;
    min-width: 40px;
    opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
    .live-room-item { transition: none; }
    .live-room-item:hover { transform: none; }
}

/* ---- Homepage user-action icons (profile / bell / admin / sign out) ----
   One uniform round 40px icon-button look so the row reads as a set. */
.user-action-icon {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

/* Profile button shows the user's avatar (photo or initials) filling the
   button; a brand ring on hover/focus gives the icon-button affordance the
   neutral hover fill can't (the avatar covers it). */
.profile-icon-btn { padding: 0; }
.user-action-avatar { width: 40px; height: 40px; font-size: 15px; }
.profile-icon-btn:hover { background: transparent; }
.profile-icon-btn:hover .user-action-avatar,
.profile-icon-btn:focus-visible .user-action-avatar {
    box-shadow: 0 0 0 2px var(--brand);
}

/* ---- Notification bell + unread badge (homepage user actions) ---- */
.notification-bell {
    border-color: var(--input-border);
}
.notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: var(--danger);
    border-radius: var(--radius-pill);
    box-shadow: 0 0 0 2px var(--container-bg);
}

/* ---- Profile view: follower stats, friend badge, follow button ---- */
.profile-stats {
    display: flex;
    justify-content: center;
    gap: var(--space-5);
    margin: 0 0 16px 0;
}
.profile-stat { font-size: 15px; color: var(--text-light); }
.profile-stat strong { color: var(--text-color); font-weight: 700; }
.profile-stat-label { opacity: 0.85; }
.friend-badge {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--brand);
    background: var(--brand-tint);
    padding: 3px 10px;
    border-radius: var(--radius-pill);
}
.follow-btn {
    margin-top: 18px;
    width: auto;
    min-width: 140px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* ---- Friends list reuses the recent-room row look ---- */
.friend-item .recent-room-creator { opacity: 0.85; }

/* ---- Notifications center ---- */
.notifications-list { display: flex; flex-direction: column; gap: 2px; }
.notification-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px;
    border-radius: var(--radius-md);
    color: var(--text-color);
}
.notification-item.unread { background: var(--brand-tint); }
.notification-clickable { cursor: pointer; transition: background 0.15s ease; }
.notification-clickable:hover { background: rgba(127,127,127,0.12); }
.notification-icon { width: 36px; height: 36px; }
.notification-icon svg { width: 18px; height: 18px; }
.notification-text {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    line-height: 1.4;
    color: var(--text-color);
}
.notification-text strong { font-weight: 700; }
.notification-reply {
    display: block;
    margin-top: 4px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    background: rgba(127,127,127,0.12);
    font-size: 14px;
    color: var(--text-color);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.notification-time {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-light);
}
.notifications-empty {
    padding: 24px 8px;
    text-align: center;
    color: var(--text-light);
    font-size: 15px;
    line-height: 1.5;
}

/* ---- Admin dashboard ---------------------------------------------------- */
.admin-page {
    display: none;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: var(--space-5) var(--space-4) var(--space-8);
}
.admin-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}
.admin-header > .button:first-child { justify-self: start; }
.admin-header > .button:last-child { justify-self: end; }
.admin-title {
    margin: 0;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-color);
}
.admin-section { margin-bottom: var(--space-6); }
.admin-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.admin-section-title {
    margin: 0 0 var(--space-3) 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color);
}
.admin-section-head .admin-section-title { margin-bottom: 0; }

.admin-notice {
    margin-bottom: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--status-success-bg);
    color: var(--status-success-text);
    font-size: 14px;
    font-weight: 600;
}
.admin-notice-error {
    background: var(--danger-tint);
    color: var(--danger-strong);
}
.admin-section-hint {
    margin: 0 0 var(--space-3) 0;
    font-size: 14px;
    color: var(--text-light);
}
.admin-rules-input {
    width: 100%;
    font-family: inherit;
    resize: vertical;
}
.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--space-3);
}
.admin-stat-card {
    background: var(--container-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    box-shadow: var(--shadow-sm);
}
.admin-stat-value {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--brand);
}
.admin-stat-label {
    margin-top: var(--space-1);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
}
.admin-stat-sub {
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-light);
}

.admin-filter { display: inline-flex; gap: var(--space-1); }
.admin-filter-btn {
    border: 1px solid var(--input-border);
    background: var(--container-bg);
    color: var(--text-light);
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.admin-filter-btn.is-active {
    background: var(--brand-gradient);
    color: var(--on-brand);
    border-color: transparent;
}
.admin-filter-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.admin-list { display: flex; flex-direction: column; gap: var(--space-3); }
.admin-empty {
    padding: var(--space-5);
    text-align: center;
    color: var(--text-light);
    font-size: 15px;
}
.admin-card {
    background: var(--container-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    box-shadow: var(--shadow-sm);
}
.admin-card-compact { padding: var(--space-3) var(--space-4); }
.admin-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}
.admin-card-title { font-weight: 600; color: var(--text-color); }
.admin-card-line {
    font-size: 14px;
    color: var(--text-color);
    margin-top: 2px;
}
.admin-card-details {
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--chat-bg);
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--text-color);
    white-space: pre-wrap;
    word-break: break-word;
}
.admin-card-meta {
    margin-top: var(--space-2);
    font-size: 12px;
    color: var(--text-light);
}
.admin-card-actions {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-3);
}
.admin-status-pill {
    font-size: 12px;
    font-weight: 700;
    text-transform: capitalize;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}
.admin-status-pending { background: var(--status-error-bg); color: var(--status-error-text); }
.admin-status-actioned { background: var(--status-success-bg); color: var(--status-success-text); }
.admin-status-dismissed,
.admin-status-reviewed { background: var(--chat-bg); color: var(--text-light); }

/* ---- Invite-only pending banner ----------------------------------------- */
.pending-notice {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: var(--space-3) auto 0;
    max-width: 420px;
    padding: var(--space-3) var(--space-4);
    background: var(--brand-tint);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-md);
    color: var(--text-color);
    font-size: 14px;
    line-height: 1.45;
    text-align: center;
}

/* ---- Banned lockout screen ---------------------------------------------- */
.banned-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background: var(--bg-color, #000);
}
.banned-card {
    max-width: 420px;
    width: 100%;
    padding: var(--space-6, 32px) var(--space-5, 24px);
    background: var(--container-bg);
    border: 1px solid var(--danger-border);
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: var(--shadow-lg, 0 10px 40px rgba(0,0,0,0.3));
}
.banned-title {
    margin: 0 0 var(--space-3) 0;
    font-size: 22px;
    color: var(--danger-strong);
}
.banned-text {
    margin: 0 0 var(--space-3) 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-color);
}
.banned-text-muted { color: var(--text-light); font-size: 13px; }
.banned-card .button { margin-top: var(--space-2); }

/* ---- Stream-ended takeover (creator left / room closed) ----------------- */
.stream-ended-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background: var(--bg-color, #000);
}
.stream-ended-card {
    max-width: 420px;
    width: 100%;
    padding: var(--space-6, 32px) var(--space-5, 24px);
    background: var(--container-bg);
    border: var(--border-subtle);
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: var(--shadow-lg, 0 10px 40px rgba(0,0,0,0.3));
}
.stream-ended-title {
    margin: 0 0 var(--space-3) 0;
    font-size: 22px;
    color: var(--text-color);
}
.stream-ended-text {
    margin: 0 0 var(--space-3) 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-light);
}
.stream-ended-card .button { margin-top: var(--space-2); }

/* ---- Signup terms checkbox ---------------------------------------------- */
.form-check {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}
.form-check input[type="checkbox"] {
    margin-top: 3px;
    width: auto;
    flex-shrink: 0;
}
.form-check label {
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-light);
    font-weight: 400;
}
.form-check a { color: var(--brand); }

/* ---- Account danger zone (profile modal) -------------------------------- */
.account-danger-zone {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--danger-border);
}
.account-danger-title { margin: 0 0 var(--space-1) 0; font-size: 14px; color: var(--text-color); }
.account-danger-text { margin: 0 0 var(--space-3) 0; font-size: 13px; color: var(--text-light); }
.account-danger-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ---- Site footer -------------------------------------------------------- */
.site-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-6);
    padding: var(--space-4) 0;
    flex-wrap: wrap;
}
.footer-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 13px;
    color: var(--text-light);
    cursor: pointer;
    text-decoration: none;
}
.footer-link:hover { color: var(--brand); text-decoration: underline; }
.footer-sep { color: var(--text-light); font-size: 13px; }

/* ---- Legal pages (terms / privacy) -------------------------------------- */
.legal-page {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-5) var(--space-8);
    line-height: 1.6;
}
.legal-page h1 { font-size: 28px; margin-bottom: var(--space-2); }
.legal-page h2 { font-size: 19px; margin-top: var(--space-6); margin-bottom: var(--space-2); }
.legal-page p, .legal-page li { color: var(--text-color); }
.legal-page .legal-updated { color: var(--text-light); font-size: 14px; margin-bottom: var(--space-5); }
.legal-page .legal-disclaimer {
    background: var(--brand-tint);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    font-size: 14px;
    margin-bottom: var(--space-5);
}
.legal-page a { color: var(--brand); }
.legal-page .legal-back { display: inline-block; margin-top: var(--space-6); font-size: 14px; }

/* ---- Report modal ------------------------------------------------------- */
.report-target {
    margin: 0 0 var(--space-3) 0;
    font-size: 15px;
    color: var(--text-light);
}
.report-target { font-weight: 600; }
/* Shown via JS as inline-flex, so center its label explicitly — a flex
   container ignores text-align, leaving the text stuck at the start otherwise. */
.report-link-btn { color: var(--danger); justify-content: center; align-items: center; }
select.form-textarea {
    height: auto;
    min-height: 0;
    resize: none;
    appearance: auto;
}

/* ---- Stream info + tags (discovery) -------------------------------------- */

/* The room-info textarea in the edit modal matches the .form-group input look. */
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--input-border);
    border-radius: var(--radius-md);
    background: var(--input-bg);
    color: var(--text-color);
    font-size: 16px;
    font-family: inherit;
    line-height: 1.4;
    outline: none;
    resize: vertical;
    min-height: 72px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-group textarea:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-tint-strong);
}

/* In-room "about" line under the room title. */
.room-description {
    margin: 4px 0 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-light);
    max-width: 60ch;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Topic-tag chips — shown in search results only (not in the stream view). */
.room-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.room-tag {
    display: inline-block;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--brand);
    background: var(--brand-tint);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

/* ---- Home search --------------------------------------------------------- */

.home-search {
    margin: 24px 0 8px 0;
}
.home-search-bar {
    position: relative;
    display: flex;
    align-items: center;
}
.home-search-icon {
    position: absolute;
    left: 16px;
    width: 18px;
    height: 18px;
    color: var(--text-light);
    pointer-events: none;
}
#homeSearchInput {
    width: 100%;
    padding: 14px 16px 14px 46px;
    border: 1px solid var(--input-border);
    border-radius: var(--radius-pill);
    background: var(--input-bg);
    color: var(--text-color);
    font-size: 16px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#homeSearchInput:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.18);
}

.search-results {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.search-empty {
    padding: 16px;
    text-align: center;
    color: var(--text-light);
    font-size: 14px;
}
.search-signin-hint {
    padding: 12px 16px;
}
/* Inline text-link styled as a button (e.g. "Sign in" inside a hint). */
.link-button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--brand);
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}
.link-button:hover { color: var(--brand-strong); }
.search-group-heading {
    display: flex;
    align-items: center;
    margin: 10px 4px 2px 4px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-light);
}
.search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    background: var(--container-bg);
    border: var(--border-subtle);
    border-radius: 10px;
    padding: 10px 14px;
    cursor: pointer;
    color: var(--text-color);
    font: inherit;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    backdrop-filter: blur(10px);
}
.search-result-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
    border-color: var(--brand-border);
}
.search-result-item:disabled {
    cursor: default;
    opacity: 0.7;
    transform: none;
    box-shadow: none;
}
.search-result-avatar {
    width: 36px;
    height: 36px;
    font-size: 14px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: var(--brand-gradient);
    color: #fff;
    font-weight: 600;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.search-result-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.search-result-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}
.search-result-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-result-handle {
    font-weight: 500;
    color: var(--text-light);
    font-size: 13px;
}
.search-result-sub {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: var(--text-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-result-tags {
    margin-top: 4px;
}