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

:root {
    --tinychats-left-sidebar-text-scale: 1;
}

/* Prevent mobile browser from zooming/scaling on load (no horizontal overflow) */
html {
    overflow-x: hidden;
    max-width: 100vw;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    color-scheme: dark;
}

/* Admin Panel Collapsible Sections */
.admin-section-header {
    transition: background 0.2s ease;
}

.admin-section-header:hover {
    background: #3a3a3a !important;
}

.admin-section-content {
    transition: max-height 0.3s ease, opacity 0.3s ease;
    overflow: hidden;
}

.admin-section-content.collapsed {
    display: none !important;
}

/* Sidebar admin panel blocks – match Settings panel look */
#admin-panel,
#admin-panel-room {
    background: rgba(28, 28, 32, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    padding: 10px !important;
    margin-top: 6px !important;
    margin-bottom: 6px !important;
}
#admin-panel-room {
    border-color: rgba(16, 185, 129, 0.35) !important;
}
#admin-panel-toggle-header,
#admin-panel-toggle-header-room {
    color: #94a3b8 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
#admin-panel-toggle-header:hover,
#admin-panel-toggle-header-room:hover {
    color: #e2e8f0 !important;
}
.room-admin-hub-btn {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    color: #e2e8f0 !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    transition: background 0.2s, border-color 0.2s, color 0.2s !important;
}
.room-admin-hub-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
    color: #fff !important;
    filter: none !important;
    transform: none !important;
    box-shadow: none !important;
}
.room-admin-hub-btn:active {
    transform: none !important;
    box-shadow: none !important;
}

/* Ensure admin section toggles don't affect chat buttons */
.admin-section-content.collapsed ~ .chat-input-container,
.admin-section.collapsed ~ .chat-input-container,
#admin-panel-room .admin-section-content.collapsed ~ .chat-input-container {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.admin-section-content.collapsed ~ .chat-buttons-group,
.admin-section.collapsed ~ .chat-buttons-group,
#admin-panel-room .admin-section-content.collapsed ~ .chat-buttons-group {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Compact admin panel buttons and list items - match user list style */
#admin-panel .unban-room-btn,
#admin-panel .unban-user-btn {
    padding: 3px 6px !important;
    font-size: 9px !important;
    border-radius: 3px !important;
    min-height: 20px !important;
    margin-top: 2px !important;
    height: auto !important;
}

#banned-rooms-list > div,
#banned-users-list > div {
    padding: 4px !important;
    margin-bottom: 4px !important;
    border-radius: 3px !important;
    gap: 3px !important;
}

#banned-rooms-list > div > div:first-child,
#banned-users-list > div > div:first-child {
    font-size: 10px !important;
}

#banned-rooms-list > div > div:last-of-type:not(button),
#banned-users-list > div > div:last-of-type:not(button) {
    font-size: 9px !important;
}

.section-toggle-icon {
    transition: transform 0.3s ease;
    display: inline-block;
    font-size: 12px;
    color: #aaa;
}

.section-toggle-icon.collapsed {
    transform: rotate(-90deg);
}

#admin-panel-content,
#admin-panel-content-room {
    transition: max-height 0.3s ease, opacity 0.3s ease;
    overflow: hidden;
}

#admin-panel-content.collapsed,
#admin-panel-content-room.collapsed {
    display: none !important;
}

/* Ensure chat buttons are always visible regardless of admin panel state or any section toggles */
#chat-screen .chat-input-container,
.sidebar #chat-screen .chat-input-container,
.chat-input-container {
    position: relative !important;
    z-index: 100 !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#chat-screen .chat-buttons-group,
.sidebar #chat-screen .chat-buttons-group,
.chat-input-container .chat-buttons-group,
.chat-buttons-group {
    position: relative !important;
    z-index: 101 !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Hide character counter so it doesn’t sit under the button row */
#chat-char-counter,
#private-char-counter {
    display: none !important;
}

/* Ensure admin panel and all its sections (collapsed or expanded) don't affect chat buttons */
#admin-panel-room ~ .chat-input-container,
#admin-panel-room ~ .chat-buttons-group,
#admin-panel-room .admin-section ~ .chat-input-container,
#admin-panel-room .admin-section ~ .chat-buttons-group,
#admin-panel-room .admin-section-content ~ .chat-input-container,
#admin-panel-room .admin-section-content ~ .chat-buttons-group,
#admin-panel-room .admin-section-content.collapsed ~ .chat-input-container,
#admin-panel-room .admin-section-content.collapsed ~ .chat-buttons-group,
.sidebar #admin-panel-room ~ .chat-input-container,
.sidebar #admin-panel-room ~ .chat-buttons-group {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#admin-panel-toggle-icon,
#admin-panel-toggle-icon-room {
    transition: transform 0.3s ease;
    display: inline-block;
    font-size: 12px;
    margin-right: 5px;
}

#admin-panel-toggle-icon.collapsed,
#admin-panel-toggle-icon-room.collapsed {
    transform: rotate(-90deg);
}


/* Custom scrollbar for admin panel lists */
#banned-rooms-list::-webkit-scrollbar,
#banned-users-list::-webkit-scrollbar,
#user-list::-webkit-scrollbar {
    width: 8px;
}

#banned-rooms-list::-webkit-scrollbar-track,
#banned-users-list::-webkit-scrollbar-track,
#user-list::-webkit-scrollbar-track {
    background: #1a1a1a;
    border-radius: 4px;
}

#banned-rooms-list::-webkit-scrollbar-thumb,
#banned-users-list::-webkit-scrollbar-thumb,
#user-list::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 4px;
}

#banned-rooms-list::-webkit-scrollbar-thumb:hover,
#banned-users-list::-webkit-scrollbar-thumb:hover,
#user-list::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* User list: blue border to match PM / Conversations panel */
#user-list-container {
    border: 1px solid rgba(102, 126, 234, 0.5) !important;
    box-shadow: 0 0 14px rgba(102, 126, 234, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    border-radius: 8px !important;
}

/* Modern role change buttons */
.role-btn {
    padding: 3px 6px;
    font-size: 12px;
    font-weight: 600;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    min-width: 24px;
}

.role-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.role-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.role-btn-mod {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

.role-btn-mod:hover {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
}

.role-btn-broadcaster {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.role-btn-broadcaster:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

.role-btn-remove {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

.role-btn-remove:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
}

.role-btn-message {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    width: 24px;
    padding: 3px 0;
    font-size: 12px;
}

.role-btn-message:hover {
    background: linear-gradient(135deg, #764ba2 0%, #5a3d7a 100%);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: #0a0a0a;
    color: #fff;
    height: 100vh;
    overflow: hidden;
    display: flex;
}

/* Left sidebar (Discord-style, darker channel list) - width set by JS / CSS var */
.web-left-sidebar {
    --wls-bg: #1e1f22;
    --wls-bg-elevated: #232428;
    --wls-bg-hover: #2b2d31;
    --wls-bg-active: #35373c;
    --wls-border: #111214;
    --wls-border-soft: rgba(0, 0, 0, 0.42);
    --wls-text-muted: #949ba4;
    --wls-text-secondary: #b5bac1;
    width: var(--web-left-sidebar-width, 52px);
    min-width: 52px;
    max-width: 360px;
    /* Zoom scales painted size; shrink layout height so rail + profile bar stay in the viewport */
    min-height: 0;
    height: calc(100vh / var(--tinychats-left-sidebar-text-scale, 1));
    max-height: calc(100vh / var(--tinychats-left-sidebar-text-scale, 1));
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
    transition: width 0.2s ease, min-width 0.2s ease;
    background: var(--wls-bg);
    border-right: 1px solid var(--wls-border);
    box-shadow: 2px 0 20px rgba(0, 0, 0, 0.55);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 18px 10px 0;
    flex-shrink: 0;
    z-index: 100;
    position: relative;
    container-type: inline-size;
    container-name: web-left-sidebar;
    zoom: var(--tinychats-left-sidebar-text-scale, 1);
}

@supports (height: 100dvh) {
    .web-left-sidebar {
        height: calc(100dvh / var(--tinychats-left-sidebar-text-scale, 1));
        max-height: calc(100dvh / var(--tinychats-left-sidebar-text-scale, 1));
    }
}
.web-left-sidebar.hidden {
    display: none !important;
}
.web-left-sidebar.collapsed {
    width: 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-right: none !important;
    box-shadow: none !important;
}
.web-left-sidebar.collapsed .web-left-sidebar-top,
.web-left-sidebar.collapsed .web-left-sidebar-rooms,
.web-left-sidebar.collapsed .web-left-sidebar-bottom,
.web-left-sidebar.collapsed .web-left-sidebar-resize-handle {
    display: none !important;
}
/* Resize handle on right edge of left sidebar (like right sidebar's handle) */
.web-left-sidebar-resize-handle {
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 14px;
    cursor: col-resize;
    z-index: 1000;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    pointer-events: auto;
    background: linear-gradient(270deg, rgba(0, 0, 0, 0.35), transparent);
    border-radius: 6px 0 0 6px;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}
.web-left-sidebar-resize-handle::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 3px;
    height: 24px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 3px;
    pointer-events: none;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}
.web-left-sidebar-resize-handle:hover {
    background: linear-gradient(270deg, rgba(255, 255, 255, 0.06), transparent);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.04);
}
.web-left-sidebar-resize-handle:hover::before {
    background: rgba(255, 255, 255, 0.35);
    box-shadow: none;
}
.web-left-sidebar-resize-handle:active,
.web-left-sidebar-resize-handle.dragging {
    background: linear-gradient(270deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.15));
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.06);
}
.web-left-sidebar-resize-handle:active::before,
.web-left-sidebar-resize-handle.dragging::before {
    background: rgba(255, 255, 255, 0.5);
    box-shadow: none;
}
@media (min-width: 769px) {
    body:not(.web-left-sidebar-collapsed) .web-left-sidebar .web-left-sidebar-resize-handle {
        display: block;
    }
}
/* Shared edge-rail tab size/position (left nav + right sidebar toggles) */
.web-left-sidebar-show-btn,
.sidebar-toggle {
    --edge-rail-toggle-w: 18px;
    --edge-rail-toggle-h: 34px;
    --edge-rail-toggle-font: 10px;
    width: var(--edge-rail-toggle-w);
    height: var(--edge-rail-toggle-h);
    min-width: var(--edge-rail-toggle-w);
    min-height: var(--edge-rail-toggle-h);
    padding: 0;
    border: none;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    font-size: var(--edge-rail-toggle-font);
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    box-sizing: border-box;
    transition: color 0.15s, background 0.15s, left 0.2s ease, right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Single toggle tab: same position open or closed (left edge, vertically centered) – not in bottom */
.web-left-sidebar-show-btn {
    position: fixed;
    left: 0;
    border-radius: 0 6px 6px 0;
    background: #161719;
    color: #949ba4;
    z-index: 101;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.5);
    border-right: 1px solid #111214;
}
.web-left-sidebar-show-btn:hover {
    color: #f2f3f5;
    background: #1e1f22;
}
/* When sidebar is open, tab sits on its right edge (width set by JS via --web-left-sidebar-width) */
body:not(.web-left-sidebar-collapsed) .web-left-sidebar-show-btn {
    left: var(--web-left-sidebar-width, 52px);
}
/* Open sidebar (home or room): same width from JS (--web-left-sidebar-width); stretch layout matches in-room */
body:not(.web-left-sidebar-collapsed) .web-left-sidebar {
    align-items: stretch;
    padding-left: 8px;
    padding-right: 18px;
}
body:not(.web-left-sidebar-collapsed) .web-left-sidebar-top,
body:not(.web-left-sidebar-collapsed) .web-left-sidebar-bottom {
    align-items: center;
}
body:not(.web-left-sidebar-collapsed) .web-left-sidebar-rooms {
    align-items: center;
    width: 100%;
}
body.web-left-sidebar-collapsed .web-left-sidebar-show-btn {
    left: 0;
}
.web-left-sidebar-top {
    padding: 0 0 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--wls-border-soft, rgba(0, 0, 0, 0.42));
    flex-shrink: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
/* Discord-style room header (when in room) */
.web-left-sidebar-room-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 8px 8px;
    background: var(--wls-bg-elevated, #232428);
    border-bottom: 1px solid var(--wls-border, #111214);
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
}
.web-left-sidebar-room-header-inner {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    flex: 1;
}
.web-left-sidebar-room-header-name {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.web-left-sidebar-room-header-chevron {
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #b9bbbe;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s;
}
.web-left-sidebar-room-header-chevron:hover {
    color: #fff;
    background: rgba(255,255,255,0.08);
}
.web-left-sidebar-room-header-actions {
    display: flex;
    align-items: center;
    gap: 2px;
}
.web-left-sidebar-room-header-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #b9bbbe;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
}
.web-left-sidebar-room-header-btn:hover {
    color: #fff;
    background: rgba(255,255,255,0.08);
}
/* Collapsible category headers (Discord-style) */
.web-left-sidebar-category-toggle {
    cursor: pointer;
    user-select: none;
}
.web-left-sidebar-category-toggle:hover {
    background: rgba(0, 0, 0, 0.22);
}
.web-left-sidebar-channels-header.web-left-sidebar-category-toggle:hover {
    background: rgba(255, 255, 255, 0.04);
}
.web-left-sidebar-category-chevron {
    font-size: 10px;
    color: #949ba4;
    margin-right: 4px;
    transition: transform 0.2s ease;
    display: inline-block;
}
.web-left-sidebar-channels-wrap.collapsed .web-left-sidebar-category-chevron,
.web-left-sidebar-camera-channels-wrap.collapsed .web-left-sidebar-category-chevron {
    transform: rotate(-90deg);
}
.web-left-sidebar-channels-wrap.collapsed .web-left-sidebar-channels-list,
.web-left-sidebar-camera-channels-wrap.collapsed #web-left-sidebar-camera-channels-list {
    display: none !important;
}
.web-left-sidebar-rooms {
    flex: 1;
    min-height: 0;
    padding: 4px 0;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    -webkit-overflow-scrolling: touch;
}
.web-left-sidebar-rooms.collapsed {
    display: none !important;
}
.web-left-sidebar-rooms-spacer {
    flex: 1;
    min-height: 0;
    flex-shrink: 1;
}
.web-left-sidebar-channels-wrap {
    width: 100%;
    padding: 4px 4px 8px;
    border-top: 1px solid var(--wls-border-soft, rgba(0, 0, 0, 0.42));
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: stretch;
}
/* Discord-style category header: "Text channels" + [+][⚙] on the right */
.web-left-sidebar-channels-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 4px 2px 2px;
    gap: 4px;
    cursor: default;
    border-radius: 4px;
    min-height: 18px;
}
.web-left-sidebar-channels-header:hover .web-left-sidebar-channels-header-actions {
    opacity: 1;
}
.web-left-sidebar-channels-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #949ba4;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.web-left-sidebar-channels-header-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    opacity: 0.85;
}
.web-left-sidebar-channel-header-btn {
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #949ba4;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
}
.web-left-sidebar-channel-header-btn:hover {
    color: #dbdee1;
    background: rgba(255,255,255,0.08);
}
.web-left-sidebar-channels-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 220px;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
    align-items: stretch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.2) transparent;
}
.web-left-sidebar-channels-list::-webkit-scrollbar {
    width: 6px;
}
.web-left-sidebar-channels-list::-webkit-scrollbar-track {
    background: transparent;
}
.web-left-sidebar-channels-list::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2);
    border-radius: 3px;
}
.web-left-sidebar-channels-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.3);
}
/* Discord-style channel row: left-aligned, # + name, active = left bar */
.web-left-sidebar-channel-btn,
.web-left-sidebar-channel-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 4px 8px 4px 10px;
    border-radius: 4px;
    border: none;
    border-left: 3px solid transparent;
    background: transparent;
    color: #949ba4;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.25;
    cursor: pointer;
    width: 100%;
    min-width: 0;
    text-align: left;
    gap: 2px;
    transition: background 0.12s ease, color 0.12s ease, border-left-color 0.12s ease;
}
.web-left-sidebar-channel-btn .channel-hash,
.web-left-sidebar-channel-item .channel-hash {
    flex-shrink: 0;
    color: #80848e;
    font-weight: 500;
}
.web-left-sidebar-channel-btn .channel-name,
.web-left-sidebar-channel-item .channel-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.web-left-sidebar-channel-btn:hover,
.web-left-sidebar-channel-item:hover {
    background: var(--wls-bg-hover, #2b2d31);
    color: #dbdee1;
    border-left-color: rgba(88, 101, 242, 0.35);
}
.web-left-sidebar-channel-btn:hover .channel-hash,
.web-left-sidebar-channel-item:hover .channel-hash {
    color: #949ba4;
}
.web-left-sidebar-channel-btn.active,
.web-left-sidebar-channel-item.active {
    background: var(--wls-bg-active, #35373c);
    color: #f2f3f5;
    border-left-color: #5865f2;
    font-weight: 600;
}
.web-left-sidebar-channel-btn.active .channel-hash,
.web-left-sidebar-channel-item.active .channel-hash {
    color: rgba(255,255,255,0.9);
}
.web-left-sidebar-channels-manage {
    font-size: 14px;
}

/* Friends list (Discord-style, left sidebar) */
.web-left-sidebar-friends-wrap {
    width: 100%;
    padding: 6px 4px 4px;
    border-bottom: 1px solid var(--wls-border-soft, rgba(0, 0, 0, 0.42));
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: stretch;
}
.web-left-sidebar-friends-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 200px;
    min-height: 0;
}
.web-left-sidebar-friends-subtabs {
    display: flex;
    gap: 2px;
    padding: 2px 4px 4px;
}
.web-left-sidebar-friends-subtab {
    flex: 1;
    padding: 4px 2px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #949ba4;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.web-left-sidebar-friends-subtab:hover {
    color: #dbdee1;
    background: rgba(255, 255, 255, 0.06);
}
.web-left-sidebar-friends-subtab.active {
    color: #fff;
    background: rgba(88, 101, 242, 0.18);
}

/* Friends Online / All / Pending: avoid clipping in narrow left rail (mobile portrait, slim drag width) */
@container web-left-sidebar (max-width: 300px) {
    .web-left-sidebar-friends-subtabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
        padding: 2px 2px 6px;
    }
    .web-left-sidebar-friends-subtab {
        flex: unset;
        width: auto;
        min-width: 0;
        max-width: 100%;
        padding: 6px 2px;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0;
        text-transform: none;
        text-align: center;
        line-height: 1.2;
        white-space: normal;
        overflow-wrap: break-word;
        hyphens: manual;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .web-left-sidebar-friends-subtabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px 3px;
        padding: 2px 2px 8px;
    }
    .web-left-sidebar-friends-subtab {
        flex: unset;
        min-width: 0;
        max-width: 100%;
        padding: 7px 2px;
        font-size: 11px;
        letter-spacing: 0;
        text-transform: none;
        text-align: center;
        line-height: 1.2;
        white-space: normal;
        overflow-wrap: break-word;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.web-left-sidebar-friends-list {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 160px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.2) transparent;
    padding: 0 2px 4px;
    position: relative;
    z-index: 2;
}
.web-left-sidebar-friends-empty {
    font-size: 11px;
    color: #72767d;
    padding: 8px 6px;
    text-align: center;
}
.web-left-sidebar-friend-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 3px 6px;
    border-radius: 4px;
    min-height: 28px;
    font-size: 13px;
    color: #dcddde;
}
.web-left-sidebar-friend-row:hover {
    background: rgba(255, 255, 255, 0.06);
}
/* Double-click row (except 💬/⋯) opens PM; 💬 is single-click */
.web-left-sidebar-friend-row:not(.web-left-sidebar-friend-pending):not(.web-left-sidebar-friend-outgoing) {
    cursor: pointer;
}
.web-left-sidebar-friend-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    align-items: stretch;
    padding-top: 1px;
}
.web-left-sidebar-friend-activity {
    font-size: 10px;
    font-weight: 500;
    line-height: 1.25;
    color: #949ba4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.web-left-sidebar-friend-row:hover .web-left-sidebar-friend-activity {
    color: #b5bac1;
}
.web-left-sidebar-friend-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #5865f2;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: center;
}
.web-left-sidebar-friend-avatar.dim {
    opacity: 0.65;
}
/* Discord-style rings: green = online, amber = idle / away, grey = offline */
.web-left-sidebar-friend-avatar.presence-online {
    box-shadow: 0 0 0 2px #3ba55d;
}
.web-left-sidebar-friend-avatar.presence-idle {
    box-shadow: 0 0 0 2px #faa81a;
}
.web-left-sidebar-friend-avatar.presence-dnd {
    box-shadow: 0 0 0 2px #ed4245;
}
.web-left-sidebar-friend-avatar.presence-offline {
    opacity: 0.75;
    filter: grayscale(0.3);
}
.web-left-sidebar-friend-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    pointer-events: auto;
    position: relative;
    z-index: 1;
}
.web-left-sidebar-friend-msg-btn,
.web-left-sidebar-friend-remove-btn {
    align-self: center;
}
.web-left-sidebar-friend-msg-btn,
.web-left-sidebar-friend-remove-btn,
.web-left-sidebar-friend-mini-btn {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #b9bbbe;
    font-size: 12px;
    cursor: pointer;
    line-height: 1;
}
.web-left-sidebar-friend-msg-btn:hover,
.web-left-sidebar-friend-mini-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}
.web-left-sidebar-friend-remove-btn,
.web-left-sidebar-friend-mini-btn {
    font-size: 11px;
}
.web-left-sidebar-friend-pending {
    flex-wrap: wrap;
}
.web-left-sidebar-friend-pending-actions {
    display: flex;
    gap: 2px;
    margin-left: auto;
}
.web-left-sidebar-friend-outgoing .web-left-sidebar-friend-name {
    color: #949ba4;
}

/* Ctrl+K quick switcher */
.quick-switcher-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 15000;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    align-items: flex-start;
    justify-content: center;
    padding-top: min(12vh, 120px);
    box-sizing: border-box;
}
.quick-switcher-panel {
    width: min(520px, 92vw);
    max-height: min(72vh, 560px);
    background: #2b2d31;
    border-radius: 8px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.quick-switcher-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 4px;
    cursor: pointer;
    color: #dbdee1;
    font-size: 14px;
    transition: background 0.1s ease;
}
.quick-switcher-row:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}
.quick-switcher-row.is-selected {
    background: rgba(88, 101, 242, 0.28) !important;
}

/* Text channel item with optional toggle + member list (Discord-style) */
.text-channel-item.web-left-sidebar-channel-item-wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 0;
}
.text-channel-row {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 0;
}
.text-channel-row .web-left-sidebar-channel-btn {
    flex: 1;
    min-width: 0;
}
.text-channel-toggle {
    width: auto;
    height: auto;
    padding: 0 4px;
    margin-left: 2px;
    border: none;
    background: transparent;
    color: #80848e;
    cursor: pointer;
    font-size: 10px;
    flex-shrink: 0;
}
.text-channel-toggle:hover {
    color: #949ba4;
}
.text-channel-members {
    padding: 4px 0 4px 20px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.text-channel-member,
.camera-channel-member {
    padding: 4px 8px;
    font-size: 12px;
    color: #949ba4;
    cursor: default;
    border-radius: 4px;
}
.text-channel-member:hover,
.camera-channel-member:hover {
    background: rgba(255,255,255,0.06);
    color: #dbdee1;
}
.text-channel-member-empty,
.camera-channel-member-empty {
    padding: 6px 8px;
    font-size: 11px;
    color: #80848e;
}
/* Camera channel item with toggle and member list (Discord-style) */
.camera-channel-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 0;
}
.camera-channel-row {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    gap: 0;
}
.camera-channel-row .web-left-sidebar-channel-btn {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 2px;
    text-align: left;
}
/* Toggle inside button, right after channel name */
.camera-channel-toggle {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    padding: 0;
    margin: 0;
    margin-left: 0;
    border: none;
    border-radius: 2px;
    background: transparent;
    color: #b9bbbe;
    font-size: 10px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.12s ease, background 0.12s ease;
    opacity: 0.85;
}
.camera-channel-toggle:hover {
    color: #dcddde;
    background: rgba(255,255,255,0.06);
}
.camera-channel-expanded .camera-channel-toggle {
    opacity: 1;
    color: #dcddde;
}
.camera-channel-members {
    display: flex;
    flex-direction: column;
    padding: 4px 0 4px 24px;
    gap: 2px;
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.camera-channel-members::-webkit-scrollbar {
    width: 4px;
}
.camera-channel-members::-webkit-scrollbar-track {
    background: transparent;
}
.camera-channel-members::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
    border-radius: 2px;
}
.camera-channel-members::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.25);
}
.camera-channel-member {
    padding: 4px 8px;
    font-size: 13px;
    color: #949ba4;
    border-radius: 4px;
    cursor: default;
    transition: background 0.1s, color 0.1s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.camera-channel-member:hover {
    background: rgba(255,255,255,0.06);
    color: #dbdee1;
}
.camera-channel-member-empty {
    padding: 4px 8px;
    font-size: 12px;
    color: #6e7378;
    font-style: italic;
    text-align: center;
}
/* Discord-style right-click context menu for channels */
.channel-context-menu {
    position: fixed;
    z-index: 10003;
    min-width: 180px;
    padding: 4px 0;
    background: #313338;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.4);
    border: 1px solid rgba(0,0,0,0.2);
    display: none;
}
.channel-context-menu[aria-hidden="false"] {
    display: block;
}
.channel-context-menu-item {
    padding: 8px 12px;
    font-size: 14px;
    color: #dbdee1;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
    -webkit-user-select: none;
    user-select: none;
}
.channel-context-menu-item:hover {
    background: #5865f2;
    color: #fff;
}
.channel-context-menu-item.danger:hover {
    background: #da373c;
    color: #fff;
}

/* —— Manage channels modal (Discord-style: settings shell + side nav) —— */
.room-channels-manage-modal {
    position: fixed;
    inset: 0;
    z-index: 10002;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(2px);
}
.room-channels-manage-dialog {
    width: 100%;
    max-width: 800px;
    max-height: min(88vh, 720px);
    display: flex;
    flex-direction: column;
    background: #313338;
    border-radius: 8px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    border: 1px solid #1f2023;
}
.room-channels-manage-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: #313338;
    border-bottom: 1px solid #1e1f22;
    flex-shrink: 0;
}
.room-channels-manage-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #f2f3f5;
    letter-spacing: -0.02em;
}
.room-channels-manage-close {
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #b5bac1;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
}
.room-channels-manage-close:hover {
    color: #f2f3f5;
    background: #2b2d31;
}
.room-channels-manage-body {
    display: flex;
    flex: 1;
    min-height: 0;
}
.room-channels-manage-nav {
    width: 200px;
    flex-shrink: 0;
    background: #2b2d31;
    border-right: 1px solid #1e1f22;
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
}
.room-channels-manage-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #949ba4;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.room-channels-manage-nav-item:hover {
    background: #35373c;
    color: #dbdee1;
}
.room-channels-manage-nav-item.is-active {
    background: #404249;
    color: #f2f3f5;
}
.room-channels-manage-nav-icon {
    width: 22px;
    text-align: center;
    font-size: 15px;
    opacity: 0.9;
}
.room-channels-manage-content {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #313338;
    position: relative;
}
.room-channels-manage-panel {
    display: none;
    flex: 1;
    min-height: 0;
    flex-direction: column;
    gap: 12px;
    padding: 16px 20px 20px;
    overflow: hidden;
}
.room-channels-manage-panel.is-active {
    display: flex;
}
.room-channels-manage-hint {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: #b5bac1;
    max-width: 52em;
}
.room-channels-manage-hint-kbd {
    color: #dbdee1;
    font-weight: 600;
}
.room-channels-manage-list {
    flex: 1;
    min-height: 120px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: #1e1f22 transparent;
}
.room-channels-manage-list--camera {
    max-height: 280px;
}
.room-channels-manage-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding-top: 4px;
    flex-shrink: 0;
}
.room-channels-manage-btn {
    padding: 10px 16px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background 0.15s, color 0.15s;
}
.room-channels-manage-btn--primary {
    background: #5865f2;
    color: #fff;
}
.room-channels-manage-btn--primary:hover {
    background: #4752c4;
}
.room-channels-manage-btn--secondary {
    background: transparent;
    color: #f2f3f5;
    border: 1px solid #4e5058;
}
.room-channels-manage-btn--secondary:hover {
    background: #2b2d31;
    border-color: #6d6f78;
}
.room-channels-manage-msg {
    margin: 0;
    font-size: 12px;
    color: #949ba4;
    min-height: 1.2em;
}
.room-channels-manage-row {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 10px 12px;
    background: #2b2d31;
    border: 1px solid #1e1f22;
    border-radius: 8px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.room-channels-manage-row:hover {
    border-color: #3f4147;
}
.room-channels-manage-row--locked {
    opacity: 0.98;
}
.room-channels-manage-row-grid {
    display: grid;
    grid-template-columns: auto auto minmax(100px, 1fr) minmax(120px, 1.4fr) auto;
    gap: 10px;
    align-items: center;
}
.room-channels-manage-row-grid--locked {
    grid-template-columns: auto minmax(100px, 1fr) minmax(120px, 1.4fr) auto;
}
@media (max-width: 680px) {
    .room-channels-manage-body {
        flex-direction: column;
    }
    .room-channels-manage-nav {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        border-right: none;
        border-bottom: 1px solid #1e1f22;
    }
    .room-channels-manage-nav-item {
        flex: 1;
        min-width: 140px;
        justify-content: center;
    }
    .room-channels-manage-row-grid,
    .room-channels-manage-row-grid--locked,
    .room-channels-manage-row-grid--camera {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .room-channels-manage-row-grid .channel-drag-handle {
        justify-self: start;
    }
}
.room-channels-manage-row-grid--camera {
    grid-template-columns: auto auto minmax(120px, 1fr) auto;
}
.channel-drag-handle {
    cursor: grab;
    color: #72767d;
    font-size: 14px;
    padding: 6px 4px;
    user-select: none;
    letter-spacing: -2px;
    line-height: 1;
    flex-shrink: 0;
}
.channel-drag-handle:active {
    cursor: grabbing;
}
.room-channels-manage-channel-type {
    color: #949ba4;
    font-size: 16px;
    width: 22px;
    text-align: center;
    flex-shrink: 0;
}
.room-channels-manage-input {
    width: 100%;
    min-width: 0;
    padding: 8px 10px;
    border-radius: 4px;
    border: 1px solid #1e1f22;
    background: #1e1f22;
    color: #dbdee1;
    font-size: 14px;
    box-sizing: border-box;
    transition: border-color 0.15s;
}
.room-channels-manage-input:focus {
    outline: none;
    border-color: #5865f2;
}
.room-channels-manage-input::placeholder {
    color: #6d6f78;
}
.room-channels-manage-input--locked,
.room-channels-manage-input:read-only {
    background: #232428;
    color: #949ba4;
    cursor: not-allowed;
}
.room-channels-manage-input--locked:focus,
.room-channels-manage-input:read-only:focus {
    border-color: #1e1f22;
}
.room-channels-manage-badge {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #72767d;
    padding: 6px 8px;
    white-space: nowrap;
}
.room-channels-manage-delete {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #ed4245;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.room-channels-manage-delete:hover {
    background: rgba(237, 66, 69, 0.12);
    color: #f87171;
}

/* Channel permissions modal – matches settings / Room Admin style */
.channel-permissions-modal { align-items: center; justify-content: center; }
.channel-permissions-sidebar .channel-perm-channel-item {
    display: flex; align-items: center; padding: 10px 14px; color: #94a3b8; font-size: 13px; cursor: pointer;
    border: none; background: none; width: 100%; text-align: left; border-radius: 0; transition: background 0.2s, color 0.2s;
}
.channel-permissions-sidebar .channel-perm-channel-item:hover {
    background: #333; color: #fff;
}
.channel-permissions-sidebar .channel-perm-channel-item.selected {
    background: #252525; color: #10b981; border-left: 3px solid #10b981; padding-left: 11px;
}
.channel-permissions-sidebar .channel-perm-channel-item .channel-perm-hash { color: #64748b; margin-right: 6px; }
.channel-perm-row {
    display: flex; align-items: center; justify-content: space-between; padding: 12px 14px;
    border-bottom: 1px solid #444; color: #e2e8f0; font-size: 14px;
}
.channel-perm-row:last-child { border-bottom: none; }
.channel-perm-row .channel-perm-name { flex: 1; }
.channel-perm-toggle {
    display: flex; align-items: center; gap: 0; border-radius: 6px; overflow: hidden;
    border: 1px solid #444; background: #1a1a1a;
}
.channel-perm-toggle button {
    width: 34px; height: 30px; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 14px; color: #64748b; background: transparent; padding: 0; transition: background 0.2s, color 0.2s;
}
.channel-perm-toggle button:hover { color: #fff; background: #333; }
.channel-perm-toggle button.allow.active { color: #fff; background: #10b981; }
.channel-perm-toggle button.deny.active { color: #fff; background: #ef4444; }

/* Room Admin Hub – same sleek look as Settings panel */
.room-admin-hub-panel {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: min(24px, 4vw);
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.room-admin-hub-inner {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(28, 28, 32, 0.98) 0%, rgba(18, 18, 22, 0.99) 100%);
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.room-admin-hub-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}
.room-admin-hub-title {
    margin: 0;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
}
.room-admin-hub-close {
    background: #3a3a3a;
    color: #fff;
    border: 1px solid #555;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    width: 32px;
    height: 32px;
    padding: 0;
    line-height: 1;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s;
}
.room-admin-hub-close:hover {
    background: #444;
    border-color: #666;
}
.room-admin-hub-subtitle {
    margin: 0 24px 12px;
    color: #94a3b8;
    font-size: 12px;
    text-align: center;
}
.room-admin-hub-nav {
    display: flex;
    flex-direction: column;
    padding: 0 12px 12px;
    gap: 2px;
    align-items: center;
}
.room-admin-hub-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 320px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.04);
    color: #aaa;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    white-space: nowrap;
}
.room-admin-hub-item:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
}
.room-admin-hub-icon {
    font-size: 16px;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}
.room-admin-hub-footer {
    margin-top: 4px;
    padding: 12px 24px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: center;
}
.room-admin-hub-close-btn {
    min-width: 120px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.2s, border-color 0.2s;
}
.room-admin-hub-close-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.15);
}

/*
 * Discord-style flyout: docked to the *right edge of the left sidebar* (submenu from channel list),
 * not centered on the screen.
 */
#channel-overlay-panel.channel-overlay-panel {
    position: fixed;
    top: 0;
    left: var(--web-left-sidebar-width, 52px);
    transform: none;
    width: min(540px, calc(100vw - var(--web-left-sidebar-width, 52px) - 8px));
    height: 100vh;
    max-width: none;
    max-height: none;
    right: auto;
    bottom: auto;
    margin: 0;
    z-index: 10050;
    display: none;
    flex-direction: column;
    background: #1e1f22;
    border: 1px solid #111214;
    border-left: none;
    border-radius: 0 12px 12px 0;
    box-shadow: 12px 0 48px rgba(0, 0, 0, 0.65);
    overflow: hidden;
}
body.web-left-sidebar-collapsed #channel-overlay-panel.channel-overlay-panel {
    left: 0;
    width: min(540px, calc(100vw - 8px));
    border-left: 1px solid #111214;
    border-radius: 0 12px 12px 0;
}
/* Desktop client: no web sidebar, so channel panel flush to left (shell sidebar edge) – no gap */
body.is-desktop-client #channel-overlay-panel.channel-overlay-panel {
    left: 0;
    width: min(540px, calc(100vw - 8px));
    border-left: 1px solid #111214;
    border-radius: 0 12px 12px 0;
}
@media (max-width: 768px) {
    #channel-overlay-panel.channel-overlay-panel {
        left: 0 !important;
        width: min(100vw, 567px) !important;
        border-left: 1px solid #111214;
    }
}
#channel-overlay-panel.channel-overlay-panel.visible {
    display: flex !important;
}

/* Friend / DM panel docked from left sidebar (same idea as text channel overlay) */
body.pm-dock-left-open #private-message-popup.pm-popup-docked-left {
    position: fixed !important;
    top: 0 !important;
    left: var(--web-left-sidebar-width, 52px) !important;
    right: auto !important;
    bottom: auto !important;
    width: min(540px, calc(100vw - var(--web-left-sidebar-width, 52px) - 8px)) !important;
    height: 100vh !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    z-index: 10050 !important;
    border-radius: 0 12px 12px 0 !important;
    border: 1px solid #111214 !important;
    border-left: none !important;
    box-shadow: 12px 0 48px rgba(0, 0, 0, 0.65) !important;
    background: #1e1f22 !important;
}
body.pm-dock-left-open #private-message-popup.pm-popup-docked-left #private-message-header {
    border-bottom: 1px solid #111214;
    background: #232428;
}
body.web-left-sidebar-collapsed.pm-dock-left-open #private-message-popup.pm-popup-docked-left {
    left: 0 !important;
    width: min(540px, calc(100vw - 8px)) !important;
    border-left: 1px solid #111214 !important;
}
@media (max-width: 768px) {
    body.pm-dock-left-open #private-message-popup.pm-popup-docked-left {
        left: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        border-left: none !important;
        border-radius: 0 !important;
    }
}
/* Channel overlay now overlays the video feeds instead of shifting them */
/* Removed margin-left shifts - overlay sits on top with z-index */
.channel-overlay-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: #232428;
    border-bottom: 1px solid #111214;
    flex-shrink: 0;
}
.channel-overlay-title {
    font-weight: 700;
    font-size: 14px;
    color: #f2f3f5;
}
.channel-overlay-close {
    background: transparent;
    border: none;
    color: #949ba4;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}
.channel-overlay-topic {
    font-size: 10px;
    color: #949ba4;
    margin: 0;
    padding: 6px 12px;
    border-bottom: 1px solid #111214;
    flex-shrink: 0;
}
.channel-overlay-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 10px;
    font-size: 12px;
    line-height: 1.35;
}
/* Cloned sidebar bubbles in #chatroom overlay — match main chat look */
.channel-overlay-messages .chat-message {
    max-width: 100%;
    box-sizing: border-box;
}
.channel-overlay-messages .chat-msg-line {
    margin-bottom: 8px;
    word-break: break-word;
}
.channel-overlay-input-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch;
    gap: 10px;
    padding: 10px 12px;
    border-top: 1px solid #111214;
    flex-shrink: 0;
    background: #111214;
    min-height: 0;
}
/* Input takes all remaining space; send button fixed size – IDs override any generic input/button rules */
#channel-overlay-panel #channel-overlay-input,
.channel-overlay-input-row #channel-overlay-input {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    width: 0 !important; /* flex basis 0 + grow 1 = fills space */
    min-height: 42px !important;
    padding: 10px 14px !important;
    border-radius: 8px;
    border: 1px solid #2b2d31;
    background: #1e1f22;
    color: #dbdee1;
    font-size: 14px !important;
    box-sizing: border-box !important;
}
#channel-overlay-panel #channel-overlay-send,
.channel-overlay-input-row #channel-overlay-send {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 72px !important;
    max-width: 96px !important;
    padding: 10px 16px !important;
    border-radius: 8px;
    border: none;
    background: #5865F2;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    font-size: 13px !important;
    white-space: nowrap;
    box-sizing: border-box;
}
.web-left-sidebar-rooms-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}
/* Room cards like client: icon + name + close, draggable */
.web-left-room-btn-wrap {
    width: 100%;
    padding: 6px 4px;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    position: relative;
    transition: background 0.15s;
    flex-shrink: 0;
}
.web-left-room-btn-wrap:hover {
    background: var(--wls-bg-hover, #2b2d31);
}
.web-left-room-btn-wrap.active {
    background: var(--wls-bg-active, #35373c);
    box-shadow: inset 0 0 0 1px rgba(88, 101, 242, 0.35);
}
.web-left-room-btn-wrap.active .web-left-room-name {
    color: #f2f3f5;
}
.web-left-room-btn-wrap.dragging {
    opacity: 0.5;
    cursor: grabbing;
}
.web-left-room-btn-wrap.drop-target {
    outline: 2px dashed #5865f2;
    outline-offset: 2px;
}
.web-left-room-icon-wrap {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    background: linear-gradient(145deg, #2b2d31 0%, #1e1f22 100%);
    border: 2px solid rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: #888;
}
.web-left-room-btn-wrap.active .web-left-room-icon-wrap {
    color: #f2f3f5;
    border-color: rgba(88, 101, 242, 0.45);
}
.web-left-room-name {
    font-size: 9px;
    font-weight: 600;
    color: #949ba4;
    text-align: center;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.2;
    word-break: break-word;
}
.web-left-room-close {
    position: absolute;
    right: 2px;
    top: 2px;
    width: 16px;
    height: 16px;
    border: none;
    border-radius: 6px;
    background: rgba(0,0,0,0.4);
    color: #888;
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s, background 0.2s, color 0.2s, transform 0.15s;
}
.web-left-room-btn-wrap:hover .web-left-room-close {
    opacity: 1;
}
.web-left-room-close:hover {
    background: rgba(248, 113, 113, 0.25);
    color: #f87171;
    transform: scale(1.1);
}
.web-left-sidebar-rooms .web-left-sidebar-btn {
    flex-shrink: 0;
}
.web-left-sidebar-bottom {
    padding: 10px 4px 12px 0;
    padding-right: 20px;
    margin-top: auto;
    border-top: 1px solid var(--wls-border-soft, rgba(0, 0, 0, 0.42));
    flex-shrink: 0;
    min-height: 90px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    z-index: 1001;
}
/* Discord-style: one horizontal bar — left: avatar + username/status, right: icon buttons */
.web-left-sidebar-user-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 52px;
    padding: 6px 8px;
    background: #111214;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.5);
    margin: 0 4px 6px 0;
}
.web-left-sidebar-user-bar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
    padding: 4px 6px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
}
.web-left-sidebar-user-bar-left:hover {
    background: rgba(255,255,255,0.06);
}
.web-left-sidebar-user-bar-left.web-left-sidebar-btn-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.web-left-sidebar-user-bar-left.web-left-sidebar-btn-disabled:hover {
    background: transparent;
}
.web-left-sidebar-avatar-wrap {
    position: relative;
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    background: #1e1f22;
    border: 2px solid #2b2d31;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.web-left-sidebar-avatar-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.web-left-sidebar-avatar-placeholder {
    font-size: 15px;
    font-weight: 600;
    color: #888;
}
.web-left-sidebar-status-indicator {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #23a559;
    border: 2px solid #111214;
}
.web-left-sidebar-status-indicator.muted {
    background: #ed4245;
}
.web-left-sidebar-status-indicator.away {
    background: #faa81a;
}
.web-left-sidebar-status-indicator.offline {
    background: #80848e;
}
.web-left-sidebar-status-indicator.invisible {
    background: #747f8d;
}
.web-left-sidebar-user-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}
.web-left-sidebar-status-line {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}
.web-left-sidebar-status-message {
    min-width: 0;
    flex: 1;
    font-size: 12px;
    color: #b9bbbe;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
}
.web-left-sidebar-status-picker {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #949ba4;
    font-size: 10px;
    line-height: 1;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
}
.web-left-sidebar-status-picker:hover {
    color: #f2f3f5;
    background: rgba(255, 255, 255, 0.08);
}
.friend-presence-menu {
    position: fixed;
    z-index: 10020;
    min-width: 220px;
    max-width: 280px;
    padding: 6px 0;
    background: #111214;
    border: 1px solid #1f2023;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    display: none;
}
.friend-presence-menu.is-open {
    display: block;
}
.friend-presence-menu-title {
    padding: 6px 12px 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #949ba4;
}
.friend-presence-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: #dbdee1;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s ease;
}
.friend-presence-option:hover {
    background: #5865f2;
    color: #fff;
}
.friend-presence-option.is-active {
    background: rgba(88, 101, 242, 0.2);
}
.friend-presence-option-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid #111214;
}
.friend-presence-option-dot.auto {
    background: linear-gradient(135deg, #3ba55d 0%, #faa81a 100%);
}
.friend-presence-option-dot.online {
    background: #3ba55d;
}
.friend-presence-option-dot.idle {
    background: #faa81a;
}
.friend-presence-option-dot.dnd {
    background: #ed4245;
}
.friend-presence-option-dot.invisible {
    background: #747f8d;
}
.web-left-sidebar-username {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
}
.web-left-sidebar-username.empty {
    color: #b9bbbe;
}
.web-left-sidebar-guest-age-notice {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    line-height: 1.3;
    color: #9ca3af;
    font-weight: 400;
}
.web-left-sidebar-guest-age-notice[hidden] {
    display: none !important;
}
.guest-age-notice {
    margin: 8px 0 0;
    padding: 0;
    font-size: 12px;
    line-height: 1.45;
    color: #9ca3af;
    text-align: center;
}
#login-form .guest-age-notice {
    margin-top: 8px;
    margin-bottom: 0;
}
.register-field-label {
    display: block;
    margin-top: 10px;
    margin-bottom: 4px;
    color: #9ca3af;
    font-size: 12px;
    font-weight: 500;
}
.register-birthdate-row {
    display: grid;
    grid-template-columns: 1.2fr 0.75fr 0.9fr;
    gap: 8px;
    margin-bottom: 10px;
    align-items: start;
}
.register-birthdate-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.register-birthdate-col-label {
    font-size: 11px;
    color: #6b7280;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.register-birthdate-select {
    width: 100%;
    min-width: 0;
    padding: 12px 10px;
    background: #2a2a2a;
    border: 1px solid #3a3a3a;
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    box-sizing: border-box;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239ca3af' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
}
.register-birthdate-select:focus {
    outline: none;
    border-color: #f59e0b;
}
.register-birthdate-select option {
    background: #2a2a2a;
    color: #fff;
}
.register-birthdate-select option:disabled {
    color: #6b7280;
}
#register-form .register-age-notice {
    margin-top: 2px;
    margin-bottom: 10px;
    text-align: left;
}
.register-terms-checkbox-label {
    display: flex;
    align-items: flex-start;
    margin-top: 6px;
    margin-bottom: 10px;
    color: #9ca3af;
    font-size: 12px;
    line-height: 1.45;
    cursor: pointer;
}
.register-terms-checkbox-label input[type="checkbox"] {
    width: auto;
    min-width: 16px;
    margin: 2px 8px 0 0;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
}
#register-form .register-terms-link {
    color: #667eea;
    text-decoration: underline;
}
.web-left-sidebar-user-bar-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}
.web-left-sidebar-action-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #b9bbbe;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
    text-decoration: none;
}
.web-left-sidebar-action-btn:hover {
    color: #fff;
    background: rgba(255,255,255,0.06);
}
.web-left-sidebar-action-btn.muted {
    color: #ed4245;
}
.web-left-sidebar-mic-indicator {
    pointer-events: none;
    cursor: default;
}
.web-left-sidebar-mic-indicator:hover {
    background: transparent;
    color: inherit;
}
.web-left-sidebar-action-btn#web-left-sidebar-mic-btn.muted {
    position: relative;
}
.web-left-sidebar-action-btn#web-left-sidebar-mic-btn.muted::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 120%;
    height: 2px;
    background: #ed4245;
    transform: translate(-50%, -50%) rotate(-45deg);
    pointer-events: none;
}
/* Stack profile card when sidebar is sized narrow (like before the bar update) */
@container web-left-sidebar (max-width: 200px) {
    .web-left-sidebar-user-bar {
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: 8px;
        min-height: auto;
    }
    .web-left-sidebar-user-bar-left {
        flex: none;
        justify-content: center;
        width: 100%;
    }
    .web-left-sidebar-user-bar-actions {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        width: 100%;
    }
}
body.web-left-sidebar-in-room:not(.web-left-sidebar-collapsed) .web-left-sidebar-avatar-wrap {
    width: 36px;
    height: 36px;
    min-width: 36px;
}
.web-left-sidebar-top .web-left-sidebar-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
}
.web-left-sidebar-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: #949ba4;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.web-left-sidebar-btn:hover {
    background: var(--wls-bg-hover, #2b2d31);
    color: #f2f3f5;
}
.web-left-sidebar-btn:active {
    transform: scale(0.98);
}
.web-left-sidebar-btn-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: auto;
}
.web-left-sidebar-btn-disabled:hover {
    background: transparent;
    color: #949ba4;
}

.app-container {
    display: flex;
    height: 100vh;
    flex: 1;
    min-width: 0;
}

/* Sidebar – min-width fits the bottom button row (Rules, Ghost, Aa, color, emoji, Send) */
.sidebar {
    width: 350px;
    min-width: 320px;
    background: #1a1a1a;
    border-left: 1px solid #2a2a2a;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0.0, 0.2, 1), min-width 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    position: relative;
    order: 2; /* Put sidebar on the right */
    overflow-y: auto; /* Allow sidebar to scroll */
    overflow-x: hidden;
    height: 100vh; /* Full height */
    z-index: 10;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    container-type: inline-size;
    container-name: sidebar;
}

/* Mobile: narrower default than desktop 350px — toggle position (JS) follows actual sidebar width */
@media (max-width: 768px) {
    .sidebar:not(.hidden) {
        width: min(85vw, 320px);
        min-width: min(200px, 72vw);
    }
}

/* When hidden: width collapses instantly (like left sidebar) so feeds expand; only transform animates */
.sidebar.hidden {
    transform: translate3d(100%, 0, 0);
    -webkit-transform: translate3d(100%, 0, 0);
    width: 0 !important;
    min-width: 0 !important;
    border: none;
    overflow: hidden;
    padding: 0;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    /* no transition on width so layout reflows immediately and video grid expands */
}

/* Desktop only: draggable resize handle – modern, on-brand (purple/amber), clear hover/drag states */
.sidebar-resize-handle {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 10px;
    cursor: col-resize;
    z-index: 20;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    background: linear-gradient(90deg, rgba(102, 126, 234, 0.2), rgba(102, 126, 234, 0.08));
    border-radius: 0 6px 6px 0;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.sidebar-resize-handle::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 3px;
    height: 24px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 3px;
    pointer-events: none;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}
.sidebar-resize-handle:hover {
    background: linear-gradient(90deg, rgba(102, 126, 234, 0.5), rgba(118, 75, 162, 0.25));
    box-shadow: 0 0 12px rgba(102, 126, 234, 0.35), inset 1px 0 0 rgba(255, 255, 255, 0.08);
}
.sidebar-resize-handle:hover::before {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 8px rgba(102, 126, 234, 0.4);
}
.sidebar-resize-handle:active,
.sidebar-resize-handle.dragging {
    background: linear-gradient(90deg, #667eea, rgba(118, 75, 162, 0.9));
    box-shadow: 0 0 16px rgba(102, 126, 234, 0.5), inset 1px 0 0 rgba(255, 255, 255, 0.12);
}
.sidebar-resize-handle:active::before,
.sidebar-resize-handle.dragging::before {
    background: #fff;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}
@media (min-width: 769px) {
    .sidebar:not(.hidden) .sidebar-resize-handle {
        display: block;
    }
    /* Clear resize handle so logo and "Please login" don't clip into it */
    .sidebar:not(.hidden) {
        padding-left: 14px;
    }
}

/* Right sidebar toggle - mirror left rail tab (same dimensions, colors, vertical center) */
.sidebar-toggle {
    position: fixed;
    right: 350px; /* Flush against sidebar left edge when open */
    left: auto;
    background: #161719;
    color: #949ba4;
    border-radius: 6px 0 0 6px;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.5);
    border-left: 1px solid #111214;
    z-index: 100;
}

/* Legacy span (if present); arrow text normally lives on the button like the left rail tab */
.sidebar-toggle #toggle-arrow {
    font-size: inherit;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    pointer-events: none;
    width: 100%;
    height: 100%;
    overflow: visible;
    color: inherit;
}

.sidebar-toggle:hover {
    color: #f2f3f5;
    background: #1e1f22;
}

/* Landscape: move toggle up 100px so it sits higher on short viewports */
@media (orientation: landscape) and (max-height: 768px) {
    .sidebar-toggle {
        top: auto !important;
        bottom: calc(75px + 100px + env(safe-area-inset-bottom, 0px)) !important;
        transform: none !important;
        -webkit-transform: none !important;
    }
}

.sidebar h1 {
    font-size: 24px;
    padding: 20px;
    border-bottom: 1px solid #2a2a2a;
    color: #fff;
    text-align: center;
}

.sidebar h2 {
    font-size: 18px;
    padding: 10px 20px 5px;
    color: #fff;
    text-align: center;
    margin: 0;
    flex-shrink: 0;
    border-bottom: 1px solid #2a2a2a;
    margin-bottom: 10px;
}

/* Reduce spacing for room title in chatroom sidebar */
#chat-screen h2#room-title {
    padding: 4px 15px 2px !important;
    margin-bottom: 2px !important;
    font-size: 16px !important;
}

.screen {
    display: none;
    flex: 1;
    padding: 20px;
    overflow-y: auto; /* Allow scrolling on homepage screens */
    overflow-x: hidden;
    min-height: 0;
    background: transparent;
    position: relative;
    z-index: 1;
}

/* Reduce padding for chat screen to minimize space under logo and maximize chat area */
#chat-screen.screen {
    padding-top: 4px !important;
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 4px !important;
    overflow-y: hidden; /* Prevent chat screen from scrolling, but allow chat-messages to scroll */
    overflow-x: hidden;
    gap: 0 !important; /* Remove gap between chat messages and input */
}

/* Expand chat + Users toggle row: only visible when in a room (chat screen active) */
#chat-screen:not(.active) #chat-full-sidebar-wrap {
    display: none !important;
}
/* Gap arrow row from Admin above; keep arrow close to Private Messages below */
#admin-panel-room {
    margin-bottom: 4px;
}
/* In full-sidebar only: Room Bans and Ban Log are in the modal; hide from sidebar there.
   Old (collapsed) sidebar keeps them as originally. */
#chat-screen.chat-full-sidebar #admin-panel-room .admin-section:has(#banned-users-header-room),
#chat-screen.chat-full-sidebar #admin-panel-room .admin-section:has(#ban-log-header-room) {
    display: none !important;
}
/* In full-sidebar only: Admin button is in the row; hide duplicate in panel. Old sidebar keeps the button. */
#chat-screen.chat-full-sidebar #admin-panel-room #room-admin-hub-section {
    display: none !important;
}
/* Chat screen: flex column so order and row layout work */
#chat-screen.active.chat-full-sidebar {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
}
#chat-screen.active #chat-full-sidebar-wrap {
    display: block !important;
    width: 100% !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
    margin-top: 6px !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
#chat-screen #private-messages-container {
    margin-top: -8px !important;
}
/* Users + Private Messages row: Users left, PM half width (only in full-sidebar) */
#sidebar-users-pm-row {
    display: none !important;
    flex-shrink: 0 !important;
}
#chat-screen.chat-full-sidebar #sidebar-users-pm-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    width: 100% !important;
    min-height: 0 !important;
    flex-shrink: 0 !important;
    order: 4 !important;
    margin-top: 4px !important;
    margin-bottom: 0 !important;
    overflow: visible !important;
}
/* No gap between Users/PM row and input box */
#chat-screen.chat-full-sidebar .chat-input-container,
.sidebar #chat-screen.chat-full-sidebar .chat-input-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
/* Users button in row: same style as Private Messages – emoji left of text, same size */
#chat-screen.chat-full-sidebar #sidebar-users-pm-row #sidebar-users-full-toggle {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 22px !important;
    max-height: 22px !important;
    height: 22px !important;
    padding: 3px 5px !important;
    border-radius: 3px !important;
}
#chat-screen.chat-full-sidebar #sidebar-users-pm-row #sidebar-users-full-toggle .sidebar-row-emoji {
    flex-shrink: 0 !important;
    font-size: 1em !important;
    line-height: 1 !important;
}
#chat-screen.chat-full-sidebar #sidebar-users-pm-row #sidebar-users-full-toggle .sidebar-row-label {
    flex: 1 !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
#chat-screen.chat-full-sidebar #sidebar-users-pm-row #private-messages-container {
    display: block !important;
    flex: 0 0 50% !important;
    width: 50% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    align-self: stretch !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    overflow: visible !important;
}
/* PM conversations list only: full width of sidebar when opened from the row */
#chat-screen.chat-full-sidebar #sidebar-users-pm-row #private-message-conversations {
    left: -100% !important; /* Align left edge with row (don’t extend over buttons) */
    right: auto !important;
    width: 200% !important;
    box-sizing: border-box !important;
    top: auto !important;
    bottom: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 6px !important;
}
/* PM popup (actual chat window) opens upward above the button */
#chat-screen.chat-full-sidebar #sidebar-users-pm-row #private-message-popup {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    top: auto !important;
    bottom: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 6px !important;
}
#chat-screen.chat-full-sidebar #sidebar-users-pm-row #private-messages-btn {
    min-height: 22px !important;
    max-height: 22px !important;
    height: 22px !important;
    padding: 3px 5px !important;
    font-size: 9px !important;
    overflow: hidden !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
#chat-screen.chat-full-sidebar #sidebar-users-pm-row #private-messages-title {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
#chat-full-sidebar-wrap,
#chat-full-sidebar-buttons {
    overflow: visible !important;
}
#chat-full-sidebar-buttons,
#chat-screen.active #chat-full-sidebar-buttons {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 4px !important;
    width: 100% !important;
}
/* Full-sidebar row buttons: emoji on top, label below – both clearly visible */
.sidebar-row-btn-stack {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1px !important;
    white-space: nowrap !important;
}
#chat-screen.chat-full-sidebar .sidebar-row-btn-stack {
    min-height: 22px !important;
    padding: 3px 5px !important;
    font-size: 9px !important;
}
/* Emoji on top – full opacity, drop shadow so it stands out on any button color */
.sidebar-row-emoji {
    line-height: 1 !important;
    font-size: 1.1em !important;
    filter: drop-shadow(0 0 1px rgba(0,0,0,0.8)) drop-shadow(0 1px 1px rgba(0,0,0,0.6)) !important;
}
/* Label – same readable style as Private Messages: white, bold, clear text shadow */
.sidebar-row-label {
    line-height: 1.1 !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #fff !important;
    text-align: center !important;
    text-shadow: 0 0 2px rgba(0,0,0,0.95), 0 1px 3px rgba(0,0,0,0.9), 0 1px 1px rgba(0,0,0,0.95) !important;
}
#chat-screen.chat-full-sidebar .sidebar-row-label {
    font-size: 10px !important;
}

/* Sidebar wider: scale up button, emoji and label together */
@container sidebar (min-width: 380px) {
    #chat-full-sidebar-buttons .sidebar-row-btn-stack {
        min-height: 24px !important;
        padding: 4px 6px !important;
        font-size: 10px !important;
    }
    #chat-full-sidebar-buttons .sidebar-row-label {
        font-size: 10px !important;
    }
    #chat-full-sidebar-buttons .sidebar-row-emoji {
        font-size: 1.2em !important;
    }
}
@container sidebar (min-width: 420px) {
    #chat-full-sidebar-buttons .sidebar-row-btn-stack {
        min-height: 26px !important;
        padding: 4px 8px !important;
        font-size: 10px !important;
    }
    #chat-full-sidebar-buttons .sidebar-row-label {
        font-size: 10px !important;
    }
    #chat-full-sidebar-buttons .sidebar-row-emoji {
        font-size: 1.3em !important;
    }
}
@container sidebar (min-width: 480px) {
    #chat-full-sidebar-buttons .sidebar-row-btn-stack {
        min-height: 28px !important;
        padding: 5px 10px !important;
        font-size: 11px !important;
    }
    #chat-full-sidebar-buttons .sidebar-row-label {
        font-size: 11px !important;
    }
    #chat-full-sidebar-buttons .sidebar-row-emoji {
        font-size: 1.35em !important;
    }
}

/* When toggled: arrow shrinks, Users appears next to it */
#chat-screen.chat-full-sidebar #chat-full-sidebar-buttons {
    justify-content: flex-start !important;
}
/* Expand/collapse toggle hidden – we always use full sidebar in a room (no compact layout) */
#chat-full-sidebar-toggle {
    display: none !important;
}
/* Admin button: hidden by default; JS removes this class for room owner/mod/admin/super/blake */
#sidebar-admin-btn.sidebar-admin-btn-hidden {
    display: none !important;
}
/* Promote button: hidden when room is promoted; JS adds/removes class from updatePromotionUI */
#sidebar-promote-btn.sidebar-promote-btn-hidden {
    display: none !important;
}
/* Users button: only visible when toggled (full sidebar expanded) */
#sidebar-users-full-toggle {
    display: none !important;
}
#chat-screen.chat-full-sidebar #sidebar-users-full-toggle {
    display: inline-flex !important;
    flex: 1 1 auto !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 60px !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* When in a room: always hide old compact rows (Gift Shop/Promote row and Users/Leave row); use full sidebar only */
#chat-screen.active > div:nth-child(2),
#chat-screen.active > div:nth-child(3) {
    display: none !important;
}
/* Full-sidebar mode: hide user list until Users is clicked */
#chat-screen.chat-full-sidebar #user-list-container {
    display: none !important;
}
#chat-screen.chat-full-sidebar.sidebar-show-users #user-list-container {
    display: flex !important;
}
/* Full-sidebar: promotion status above the tree and button row */
#chat-screen.chat-full-sidebar #promotion-status {
    order: 1 !important;
    flex-shrink: 0 !important;
    margin: 2px 0 !important;
    padding: 3px 6px !important;
    border-radius: 3px !important;
}
#chat-screen.chat-full-sidebar #chatroom-tree-widget {
    order: 1 !important; /* same as promotion so Room Promoted sits directly above tree (DOM order) */
}
#chat-screen.chat-full-sidebar #promotion-status > div:first-child {
    font-size: 9px !important;
    margin-bottom: 0 !important;
}
#chat-screen.chat-full-sidebar #promotion-status #promotion-end-date {
    font-size: 8px !important;
}
#chatroom-tree-widget-close:hover {
    background: rgba(34, 197, 94, 0.3) !important;
    color: #fff !important;
}
#chatroom-tree-widget-close:focus {
    outline: 1px solid rgba(34, 197, 94, 0.6);
    outline-offset: 1px;
}
/* Giving Tree widget – compact card */
#chatroom-tree-widget {
    padding: 6px 10px 6px 10px !important;
    padding-right: 24px !important;
    margin-bottom: 6px !important;
    border-radius: 6px !important;
}
#chatroom-tree-widget-close {
    top: 4px !important;
    right: 4px !important;
    width: 16px !important;
    height: 16px !important;
    font-size: 12px !important;
}
#chatroom-tree-widget .tree-widget-main-row {
    gap: 6px !important;
    width: 100%;
}
#chatroom-tree-widget .tree-growth-line {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px 8px !important;
    line-height: 1.25 !important;
    margin-bottom: 2px !important;
}
#chatroom-tree-widget .giving-tree-inline-icons {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    flex-shrink: 0 !important;
}
#chatroom-tree-widget .giving-tree-inline-emoji {
    font-size: 18px !important;
    line-height: 1 !important;
}
#chatroom-tree-widget .tree-widget-growth-col {
    min-width: 70px !important;
}
#chatroom-tree-widget #tree-growth-text {
    font-size: 11px !important;
}
#chatroom-tree-widget .tree-widget-growth-col > div:last-of-type {
    height: 6px !important;
    margin-top: 2px !important;
    border-radius: 3px !important;
}
#chatroom-tree-widget #tree-growth-bar {
    border-radius: 3px !important;
}
#chatroom-tree-widget #tree-water-btn {
    padding: 4px 10px !important;
    font-size: 12px !important;
    border-radius: 4px !important;
}
#chatroom-tree-widget #tree-water-cooldown {
    font-size: 10px !important;
    min-width: 60px !important;
}
#chatroom-tree-widget #tree-leaderboard {
    font-size: 10px !important;
}
#chatroom-tree-widget #tree-apples-drop-zone {
    min-height: 100px !important;
    margin-top: 6px !important;
    border-radius: 4px !important;
}
/* Full-sidebar: hide the Admin section box; access is only via 🔨 button in the row */
#chat-screen.chat-full-sidebar #admin-panel-room {
    display: none !important;
}
/* Order: promotion, button row, then messages, then Users/PM row above input, then input */
#chat-screen.chat-full-sidebar #private-messages-container { order: 2 !important; }
#chat-screen.chat-full-sidebar #chat-messages { order: 3 !important; }
#chat-screen.chat-full-sidebar #sidebar-users-pm-row { order: 4 !important; }
#chat-screen.chat-full-sidebar .chat-input-container { order: 5 !important; }
/* Keep toggle wrap and Private Messages visible when toggled; ensure arrow row is above PM button */
#chat-screen.chat-full-sidebar #chat-full-sidebar-wrap,
#chat-screen.chat-full-sidebar #private-messages-container {
    display: block !important;
    flex-shrink: 0 !important;
}
/* Explicit order: room title, then (full-sidebar) promotion, then button row, then PM/messages/input */
#chat-screen #room-title { order: 0; }
#chat-screen #chat-full-sidebar-wrap { order: 1; }
#chat-screen.chat-full-sidebar #chat-full-sidebar-wrap { order: 2 !important; }
#chat-screen #private-messages-container { order: 2; }
#chat-screen #chat-messages { order: 3; }
#chat-screen .chat-input-container { order: 4; }
/* Keep room title visible above toggle (room name + 🎥 video count 👥 viewer count); compact in full-sidebar */
#chat-screen.chat-full-sidebar #room-title {
    display: block !important;
    flex-shrink: 0 !important;
    margin: 0 0 0 0 !important;
    padding: 2px 10px 0 !important;
    font-size: 14px !important;
}
#chat-screen.chat-full-sidebar #room-title span:last-child {
    margin-left: 6px !important;
    font-size: 12px !important;
}
/* Full-sidebar + Users view: Users+PM row above (order 4), user list fills space below it (order 4) */
#chat-screen.chat-full-sidebar.sidebar-show-users #private-messages-container {
    order: 2 !important;
}
#chat-screen.chat-full-sidebar.sidebar-show-users #user-list-container {
    display: flex !important;
    flex: 1 1 0 !important;
    flex-direction: column !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    order: 4 !important;
}
/* Full-sidebar Users view (toggle arrow → Users): fill space and scroll with visible scrollbar */
#chat-screen.chat-full-sidebar.sidebar-show-users #user-list-container #user-list {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
#chat-screen.chat-full-sidebar.sidebar-show-users #chat-messages,
#chat-screen.chat-full-sidebar.sidebar-show-users #chat-messages + .chat-input-container {
    display: none !important;
}

/* PM view: same as Users – PM panel replaces chat messages + input (in-flow, no overlay) */
#chat-screen.chat-full-sidebar.sidebar-show-pm #chat-messages,
#chat-screen.chat-full-sidebar.sidebar-show-pm #chat-messages + .chat-input-container {
    display: none !important;
}
#chat-screen.chat-full-sidebar.sidebar-show-pm #user-list-container {
    display: none !important;
}
/* Users/PM row below PM panel (under the "Type a message" area) when in PM view */
#chat-screen.chat-full-sidebar.sidebar-show-pm #sidebar-users-pm-row {
    order: 5 !important;
}
#chat-screen.chat-full-sidebar.sidebar-show-pm #private-message-popup {
    order: 4 !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    position: static !important;
    width: 100% !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
}
#chat-screen.chat-full-sidebar.sidebar-show-pm #private-message-popup #private-message-messages {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
}
#chat-screen.chat-full-sidebar.sidebar-show-pm #private-message-popup #private-message-header {
    flex-shrink: 0 !important;
}
#chat-screen.chat-full-sidebar.sidebar-show-pm #private-message-popup #private-message-input-container {
    flex-shrink: 0 !important;
    margin-top: auto !important;
}

#chat-screen.chat-full-sidebar {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    padding-top: 4px !important;
}
#chat-screen.chat-full-sidebar #chat-messages {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}

/* When chat is expanded, hide logo and create room so chat fills entire sidebar */
.sidebar.chat-full-sidebar .sidebar-logo,
.sidebar.chat-full-sidebar #create-room-btn,
.sidebar.chat-full-sidebar #create-room-login-message,
.sidebar.chat-full-sidebar #room-creation {
    display: none !important;
}
.sidebar.chat-full-sidebar #chat-screen {
    flex: 1 1 0 !important;
    min-height: 0 !important;
}

.screen.active {
    display: flex;
    flex-direction: column;
}

input[type="text"] {
    width: 100%;
    padding: 12px;
    margin-bottom: 10px;
    background: #2a2a2a;
    border: 1px solid #3a3a3a;
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
}

input[type="text"]:focus {
    outline: none;
    border-color: #f59e0b;
}

button {
    width: 100%;
    padding: 12px;
    margin-bottom: 10px;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

button:hover {
    background: #5568d3;
}

#leave-room-btn {
    background: #e74c3c;
    padding: 4px 6px;
    font-size: 10px;
    min-height: 24px;
    border-radius: 6px;
}

#leave-room-btn:hover {
    background: #c0392b;
}

/* Show Users Button - simple style, emoji color stands out */
#show-users-btn {
    background: #2a2a2a !important;
    color: #fff !important;
    border: 1px solid #3a3a3a !important;
    border-radius: 6px;
    padding: 4px;
    font-size: 16px !important;
    line-height: 1 !important;
    font-weight: normal !important;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 24px;
    text-transform: none !important;
    letter-spacing: 0;
}
#show-users-btn span {
    font-size: 20px !important;
    line-height: 1 !important;
    filter: brightness(1.25) contrast(1.1);
}

/* When button shows "Hide Users", use smaller font size */
#show-users-btn.hide-users-mode {
    font-size: 10px !important;
    padding: 4px 6px !important;
}

#show-users-btn:hover {
    background: #333 !important;
    border-color: #444;
}
#show-users-btn:hover span {
    filter: brightness(1.4) contrast(1.1);
}

#show-users-btn:active {
    transform: scale(0.98);
}

#show-users-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(100, 116, 139, 0.5) !important;
}

/* Gift Shop and Promote Room - compact, rounded 6px */
#gift-shop-btn-room {
    padding: 4px 6px !important;
    font-size: 10px !important;
    border-radius: 6px !important;
    min-height: 24px !important;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3) !important;
}
#promote-room-btn {
    padding: 4px 6px !important;
    font-size: 10px !important;
    border-radius: 6px !important;
    min-height: 24px !important;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3) !important;
}

/* Leaderboards and Camera time - match rounded corners */
#gift-leaderboards-btn-room,
#camera-time-leaderboard-btn-room {
    border-radius: 6px !important;
}

/* Shine effect for Gift Shop and Leaderboards buttons */
.sidebar-btn-shine {
    position: relative !important;
    overflow: hidden !important;
}
.sidebar-btn-shine > * {
    position: relative;
    z-index: 1;
}
.sidebar-btn-shine::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    animation: sidebarBtnShine 2.8s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}
@keyframes sidebarBtnShine {
    0% { left: -100%; }
    100% { left: 200%; }
}

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

@keyframes gradientShift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.app-fullscreen-btn {
    background: #667eea;
    width: calc(100% - 40px);
    margin: 10px 20px;
    padding: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    border-radius: 8px;
    color: #fff;
    transition: background 0.2s;
    position: sticky;
    top: 0;
    z-index: 10;
}

.app-fullscreen-btn:hover {
    background: #5568d3;
}

#create-room-btn:hover {
    background: #38a169 !important;
}

/* Authentication UI */
.auth-mode-toggle {
    display: flex;
    gap: 5px;
    margin-bottom: 15px;
    margin-top: 6px;
    border-bottom: 1px solid #2a2a2a;
    padding-bottom: 10px;
}

.auth-mode-btn {
    flex: 1;
    padding: 8px;
    background: #2a2a2a;
    color: #aaa;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.auth-mode-btn:hover {
    background: #333;
    color: #fff;
}

.auth-mode-btn.active {
    background: #667eea;
    color: #fff;
}

.auth-form {
    margin-top: 10px;
}

.auth-form input[type="password"],
.auth-form input[type="email"] {
    margin-top: 10px;
}

#login-submit-btn,
#register-submit-btn {
    margin-top: 20px;
}

#remember-password-checkbox {
    accent-color: #667eea;
    cursor: pointer;
}

#remember-password-checkbox + label {
    user-select: none;
}

.auth-message {
    margin-top: 10px;
    margin-bottom: 0;
    padding: 8px;
    border-radius: 6px;
    font-size: 12px;
    text-align: center;
    display: none;
}

/* When auth-message is above auth-mode-toggle, reduce spacing */
#login-screen > #auth-message {
    margin-top: 0;
    margin-bottom: 6px;
}

.auth-message.success {
    background: #27ae60;
    color: #fff;
    display: block;
}

.auth-message.error {
    background: #e74c3c;
    color: #fff;
    display: block;
}

#user-status {
    font-size: 12px;
}

#logout-btn {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
    font-size: 12px;
    padding: 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

#logout-btn:hover {
    background: rgba(239, 68, 68, 0.25);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.5);
}

#back-to-login-btn {
    background: #444;
}

#back-to-login-btn:hover {
    background: #555;
}

.rooms-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.rooms-controls button {
    flex: 1;
    margin-bottom: 0;
}

#rooms-stats {
    padding: 10px;
    background: #2a2a2a;
    border-radius: 8px;
    margin-bottom: 15px;
    font-size: 12px;
    color: #999;
}

#rooms-list {
    flex: 1;
}

/* Hide delete buttons in sidebar rooms list - override all inline styles including !important */
.sidebar #rooms-list .home-room-delete-btn,
.sidebar #rooms-list button.home-room-delete-btn,
.sidebar #rooms-list .room-item .home-room-delete-btn,
#rooms-list .home-room-delete-btn,
#rooms-list .home-room-delete-btn[data-room-id],
#rooms-list .room-item .home-room-delete-btn,
#rooms-list .room-item .home-room-delete-btn[data-room-id],
#rooms-list button.home-room-delete-btn,
#rooms-list button.home-room-delete-btn[data-room-id],
.sidebar .home-room-delete-btn,
.sidebar button.home-room-delete-btn,
.sidebar [class*="home-room-delete"],
#rooms-list [class*="home-room-delete"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    right: -9999px !important;
    pointer-events: none !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

.room-item {
    background: #2a2a2a;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
    border: 1px solid transparent;
}

.room-item:hover {
    background: #333;
    border-color: #667eea;
}

.room-item h3 {
    color: #fff;
    font-size: 16px;
    margin-bottom: 5px;
}

.room-item p {
    color: #999;
    font-size: 12px;
}

/* Main Content - flex column so home container can fill and scroll */
.main-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    min-width: 0;
    position: relative;
    background: transparent;
    overflow: hidden;
    transition: width 0.3s ease;
}

/* When sidebar is open: dark background; videos use fit (contain) so entire feed is visible */
.sidebar:not(.hidden) ~ .main-content {
    background: #000;
}

/* When right sidebar is closed: remove from flow (same as ghost mode) so main-content and feeds expand */
.sidebar.hidden {
    position: fixed !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    z-index: 20 !important;
}
.sidebar.hidden ~ .main-content {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    min-width: 0 !important;
}

/* Camera feeds: contain so full face/body is visible */
.video-wrapper:not([id$="-screen"]) .video-feed-area video,
.video-wrapper:not([id$="-screen"]) video,
#local-video-container .video-feed-area video,
#local-video-container video {
    object-fit: contain !important;
    object-position: center center !important;
}

/* Screen share tiles: fill the frame (reverted from unified contain path) */
#local-screen-container video,
.video-wrapper[id$="-screen"] video {
    object-fit: fill !important;
    object-position: center center !important;
}

/* Mobile: Make main content responsive to sidebar */
@media (max-width: 768px) {
    /* Hide left rail in landscape only; portrait uses slide-over (see block below) */
    @media (orientation: landscape) {
        .web-left-sidebar {
            display: none !important;
        }
        .web-left-sidebar-show-btn {
            display: none !important;
        }
    }
    /* Use dynamic viewport height so sidebar (and chatroom) fits visible screen; buttons at bottom stay visible */
    body,
    .app-container {
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
    }
    .sidebar {
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
    }
    .main-content {
        width: 100%;
        transition: width 0.3s ease, margin-right 0.3s ease;
    }
    
    /* When sidebar is visible on mobile, shrink main content */
    .sidebar:not(.hidden) ~ .main-content {
        width: calc(100% - 50vw);
        margin-right: 50vw;
    }
    
    /* Video container should adapt smoothly */
    #video-container {
        transition: grid-template-columns 0.3s ease, grid-template-rows 0.3s ease;
    }
}

/* Mobile portrait: left Discord-style rail as slide-over (default closed via JS + web-left-sidebar-collapsed) */
@media (max-width: 768px) and (orientation: portrait) {
    body:not(.is-desktop-client) .web-left-sidebar {
        display: flex !important;
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        width: min(86vw, 300px) !important;
        min-width: 52px !important;
        max-width: min(360px, 92vw) !important;
        z-index: 2600 !important;
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1) !important;
        -webkit-transition: -webkit-transform 0.26s cubic-bezier(0.4, 0, 0.2, 1) !important;
        flex-shrink: 0 !important;
        box-shadow: 4px 0 28px rgba(0, 0, 0, 0.55) !important;
        pointer-events: auto !important;
    }
    body:not(.is-desktop-client).web-left-sidebar-collapsed .web-left-sidebar {
        transform: translate3d(-100%, 0, 0) !important;
        -webkit-transform: translate3d(-100%, 0, 0) !important;
        pointer-events: none !important;
    }
    /* In portrait overlay mode JS omits .collapsed on the aside so width stays for the slide */
    body:not(.is-desktop-client) .web-left-sidebar-show-btn {
        display: flex !important;
        z-index: 2601 !important;
    }
}

/* Home page: scrollable area; min height so full room cards are visible when scrolling */
#home-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 12px 60px;
    position: relative;
    z-index: 2;
    background: transparent;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(102, 126, 234, 0.5) transparent;
}
#home-container > .homepage-header {
    flex-shrink: 0;
    order: 0;
}
html.arena-site-off [data-arena-home] {
    display: none !important;
}

html.home-page-music-off #home-music-toggle {
    display: none !important;
}
#home-container > .home-explore-strip {
    flex-shrink: 0;
    order: 2;
    width: 100%;
    align-self: stretch;
    margin: 0 0 10px;
    padding: 6px 10px 8px;
    background: linear-gradient(135deg, rgba(124, 92, 255, 0.1) 0%, rgba(0, 229, 192, 0.05) 100%);
    border: 1px solid rgba(124, 92, 255, 0.28);
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(124, 92, 255, 0.08);
    text-align: center;
    box-sizing: border-box;
}
.home-explore-head {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-bottom: 4px;
}
.home-explore-title {
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
    min-width: 0;
}
.home-explore-badge {
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 1px 5px;
    border-radius: 3px;
    background: linear-gradient(135deg, #7c5cff, #00e5c0);
    color: #0d0f14;
    flex-shrink: 0;
}
.home-explore-badge-v1 {
    background: linear-gradient(135deg, #00e5c0, #00b894);
}
.home-explore-cta-btn {
    font-size: 10px;
    font-weight: 600;
    color: #0d0f14;
    text-decoration: none;
    padding: 3px 8px;
    border-radius: 6px;
    background: linear-gradient(135deg, #7c5cff, #5a3fd4);
    color: #fff;
    white-space: nowrap;
    flex-shrink: 0;
    transition: filter 0.2s, transform 0.15s;
}
.home-explore-cta-btn:hover {
    filter: brightness(1.12);
    transform: translateY(-1px);
}
.home-explore-desc {
    margin: 0 auto 5px;
    font-size: 9px;
    color: #9ca3af;
    line-height: 1.35;
    max-width: 440px;
}
.home-explore-desc strong {
    color: #c4b5fd;
    font-weight: 600;
}
.home-explore-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    align-items: center;
}
.home-explore-chip {
    font-size: 10px;
    color: #d4c8ff;
    text-decoration: none;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(124, 92, 255, 0.35);
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.home-explore-chip:hover {
    background: rgba(124, 92, 255, 0.35);
    border-color: rgba(0, 229, 192, 0.5);
    color: #fff;
}
.home-explore-chip-feature {
    border-color: rgba(0, 229, 192, 0.55);
    background: rgba(0, 229, 192, 0.1);
    color: #a7f3e8;
}
.home-explore-chip-feature:hover {
    background: rgba(0, 229, 192, 0.22);
    border-color: #00e5c0;
}
@media (max-width: 768px) and (orientation: portrait) {
    #home-container > .home-explore-strip {
        margin: 0 0 8px;
        padding: 5px 6px 6px;
    }
    .home-explore-head {
        flex-direction: column;
        align-items: center;
        gap: 2px;
        margin-bottom: 3px;
    }
    .home-explore-title {
        font-size: 9px;
    }
    .home-explore-cta-btn {
        font-size: 9px;
        padding: 2px 7px;
    }
    .home-explore-desc {
        font-size: 8px;
        margin-bottom: 4px;
    }
    .home-explore-chips {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 3px;
        width: 100%;
    }
    .home-explore-chip {
        text-align: center;
        box-sizing: border-box;
        font-size: 9px;
        padding: 3px 2px;
        border-radius: 6px;
    }
}
#home-container > .home-platform-strip {
    flex-shrink: 0;
    order: 1;
    width: 100%;
    align-self: stretch;
}
#home-container > .promoted-slideshow {
    flex-shrink: 0;
    order: 3;
}
#home-container > .home-rooms {
    flex-shrink: 0;
    order: 4;
}
#home-container > .homepage-footer {
    order: 5;
}

/* Compact homepage link to /tools/about */
.home-platform-strip {
    width: 100%;
    margin: -12px 0 18px;
    padding: 10px 12px 12px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.12) 0%, rgba(118, 75, 162, 0.08) 100%);
    border: 1px solid rgba(102, 126, 234, 0.28);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    text-align: center;
    box-sizing: border-box;
}
.home-platform-strip-top {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-bottom: 8px;
    text-decoration: none;
    color: inherit;
}
.home-platform-strip-top:hover .home-platform-strip-cta {
    color: #c7d2fe;
}
.home-platform-strip-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
}
.home-platform-strip-cta {
    font-size: 12px;
    font-weight: 600;
    color: #a5b4fc;
    white-space: nowrap;
    transition: color 0.15s;
}
.home-platform-strip-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    align-items: center;
    overflow: visible;
    padding-bottom: 0;
}
.home-platform-chip {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.82);
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.1);
    white-space: nowrap;
}

@media (max-width: 768px) and (orientation: portrait) {
    .home-platform-strip {
        width: 100%;
        margin: -6px 0 12px;
        padding: 8px 8px 10px;
    }
    .home-platform-strip-top {
        flex-direction: column;
        align-items: center;
        gap: 2px;
        margin-bottom: 6px;
    }
    .home-platform-strip-label {
        font-size: 10px;
        letter-spacing: 0.03em;
    }
    .home-platform-strip-cta {
        font-size: 11px;
    }
    .home-platform-strip-chips {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
        width: 100%;
    }
    .home-platform-chip {
        font-size: 9px;
        font-weight: 600;
        padding: 4px 2px;
        border-radius: 6px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
        width: 100%;
        text-align: center;
        display: block;
        box-sizing: border-box;
    }
}
/* Rooms section: minimum height so at least one full room card + header fits and page scrolls */
.home-rooms {
    min-height: 780px;
}

/* === SPECTRUM AUDIO WAVE BACKGROUND === */
#audio-visualizer-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: #0a0a0a;
    overflow: hidden;
    pointer-events: none;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Vertical bars - original simple version without grid */
#audio-visualizer-bg .bars {
    position: absolute;
    inset: 0;
    background: transparent;
    mask-image: linear-gradient(
        to top,
        transparent 0%,
        white 50%,
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to top,
        transparent 0%,
        white 50%,
        transparent 100%
    );
    animation: shimmer 18s linear infinite;
    opacity: 0.55;
}

/* Rainbow color overlay - original */
#audio-visualizer-bg .bars::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        #ff0080,
        #8a2be2,
        #0066ff,
        #00ffff,
        #00ff66,
        #ffff00,
        #ff9900
    );
    mix-blend-mode: screen;
    animation: hueShift 22s linear infinite;
}

/* Simple horizontal movement - original */
@keyframes shimmer {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-60px);
    }
}

/* Slow color drift - original */
@keyframes hueShift {
    from {
        filter: hue-rotate(0deg);
    }
    to {
        filter: hue-rotate(360deg);
    }
}

/* Promoted Rooms Slideshow - same preview size as room cards below */
.promoted-slideshow {
    margin-bottom: 20px;
    min-height: 430px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    border: 2px solid rgba(255, 215, 0, 0.3);
    border-radius: 12px;
    padding: 16px;
    padding-bottom: 40px; /* room for slideshow dots inside the box */
    box-shadow: 0 20px 60px rgba(255, 215, 0, 0.2), 0 0 40px rgba(255, 215, 0, 0.1);
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.promoted-slideshow::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255, 215, 0, 0.05) 0%, transparent 50%, rgba(255, 215, 0, 0.05) 100%);
    pointer-events: none;
}

.promoted-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
    gap: 10px;
}

.promoted-header h3 {
    font-size: 20px;
    font-weight: 700;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
    margin: 0;
    flex: 1;
    text-align: center;
}

.slideshow-controls {
    position: absolute;
    right: 0;
    display: flex;
    gap: 8px;
}

.slideshow-btn {
    background: rgba(255, 215, 0, 0.2);
    border: 2px solid rgba(255, 215, 0, 0.5);
    color: #ffd700;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.slideshow-btn:hover {
    background: rgba(255, 215, 0, 0.4);
    border-color: #ffd700;
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
}

.promoted-slideshow-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 400px;
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 8px;
    box-sizing: border-box;
}

.promoted-slideshow-track {
    display: flex;
    align-items: flex-start;
    width: 100%;
    min-height: 400px;
    position: relative;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    box-sizing: border-box;
}

.promoted-slide {
    flex: 0 0 20%;
    width: 20%;
    min-width: 0;
    max-width: 20%;
    padding: 0 8px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.5;
}

.promoted-slide.active {
    opacity: 1;
}

.promoted-slide-title {
    font-size: 16px;
    font-weight: 700;
    color: #ffd700;
    margin: 0;
    text-align: center;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.promoted-slide-header-stats {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    margin: 4px 0 6px 0;
    flex-shrink: 0;
}

.promoted-slide-header-stats .promoted-header-stat {
    color: rgba(255, 255, 255, 0.95);
    font-size: 12px;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    padding: 3px 8px;
    background: rgba(255, 215, 0, 0.15);
    border-radius: 6px;
    border: 1px solid rgba(255, 215, 0, 0.4);
}

/* Promoted cards: compact height (join row removed; bio uses freed space) */
.promoted-slide-card {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    background: radial-gradient(circle at top left, rgba(255, 215, 0, 0.1) 0, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.5) 100%);
    border: 2px solid rgba(255, 215, 0, 0.2);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
    box-sizing: border-box;
    height: 360px;
    min-height: 360px;
    max-height: 360px;
}

.promoted-slide-card:hover {
    border-color: rgba(255, 215, 0, 1);
    transform: translateY(-8px) scale(1.02);
    box-shadow: 
        0 15px 50px rgba(0, 0, 0, 0.8),
        0 0 50px rgba(255, 215, 0, 0.8),
        0 0 100px rgba(255, 215, 0, 0.5),
        0 20px 60px rgba(0, 0, 0, 0.6),
        inset 0 0 40px rgba(255, 215, 0, 0.15);
    z-index: 10;
}

.promoted-slide.active .promoted-slide-card {
    border-color: rgba(255, 215, 0, 0.6);
    box-shadow: 0 10px 40px rgba(255, 215, 0, 0.3);
}

.promoted-slide-preview {
    flex: 0 0 auto;
    width: 100%;
    height: 168px;
    min-height: 168px;
    max-height: 168px;
    border-radius: 0;
    overflow: hidden;
    background: #000;
    border-bottom: 3px solid rgba(255, 215, 0, 0.6);
    box-shadow: 
        inset 0 0 30px rgba(255, 215, 0, 0.2),
        0 0 20px rgba(255, 215, 0, 0.3);
    position: relative;
}

.promoted-slide-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.promoted-slide-card:hover .promoted-slide-preview {
    border-color: rgba(255, 215, 0, 1);
    box-shadow: 
        inset 0 0 50px rgba(255, 215, 0, 0.4),
        0 0 40px rgba(255, 215, 0, 0.6);
}

/* Bio slot under preview (grows in card; no join row below) */
.promoted-slide-bio {
    flex: 1 1 auto;
    min-height: 88px;
    height: auto;
    max-height: none;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
    padding: 8px 12px;
    border-top: 2px solid rgba(255, 215, 0, 0.25);
    border-bottom: 2px solid rgba(255, 215, 0, 0.15);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    hyphens: auto;
}

.promoted-slide-description {
    font-size: 12px;
    font-weight: 600;
    color: #f0f0f0;
    line-height: 1.4;
    margin: 0;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    word-wrap: break-word;
    overflow-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.promoted-slide-content {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
    min-height: 0;
    margin-top: auto;
}

.promoted-slide-gifts {
    padding: 4px 6px;
    background: rgba(245, 158, 11, 0.1);
    border-top: 1px solid rgba(245, 158, 11, 0.2);
    min-height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.promoted-slide-gifts img {
    width: 14px;
    height: 14px;
    object-fit: contain;
}

.promoted-slide-footer {
    text-align: center;
    padding: 4px 0;
}

.promoted-slide-footer span {
    font-size: 12px;
    color: #aaa;
}

.promoted-join-btn {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    color: #000;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
    width: 100%;
}

.promoted-join-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(255, 215, 0, 0.6);
    background: linear-gradient(135deg, #ffed4e 0%, #ffd700 100%);
}

/* Home room list cards: same full-width join as promotion, blue theme */
.home-room-card .home-room-gifts {
    flex-shrink: 0;
}

.home-room-card .home-room-join-wrap {
    margin-top: auto;
}

.home-room-join-wrap {
    padding: 6px 10px 4px;
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
}

.home-room-join-btn {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.35);
    width: 100%;
    box-sizing: border-box;
}

.home-room-join-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(37, 99, 235, 0.55);
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
}

.home-room-join-btn:active {
    transform: translateY(0);
}

/* Slideshow dots: inside .promoted-slideshow, anchored to bottom of promotion box */
#promoted-slideshow .slideshow-indicators {
    display: flex;
    justify-content: center;
    gap: 8px;
    position: absolute;
    bottom: 6px;
    left: 0;
    right: 0;
    z-index: 5;
    flex-shrink: 0;
    pointer-events: auto;
}

.slideshow-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid rgba(255, 215, 0, 0.5);
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.slideshow-indicator.active {
    background: #ffd700;
    border-color: #ffd700;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
    transform: scale(1.2);
}

.slideshow-indicator:hover {
    border-color: #ffd700;
    transform: scale(1.1);
}

.promoted-empty-message {
    text-align: center;
    padding: 40px 20px;
    color: #888;
    font-size: 16px;
    font-style: italic;
}

.promoted-empty-message p {
    margin: 0;
}

/* Sound Wave Line Under Promotion - Behind the logo */
.promotion-sound-line {
    margin: 0;
    padding: 6px 0;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    overflow: visible;
    width: 70%;
    max-width: 900px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 0;
    pointer-events: none;
}

.sound-wave {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1px;
    height: 40px;
    position: relative;
    width: 100%;
    padding: 0 20%;
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 10%,
        black 90%,
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 10%,
        black 90%,
        transparent 100%
    );
    opacity: 0.3;
}

.wave-bar {
    flex: 1;
    min-width: 2px;
    max-width: 3px;
    height: 100%;
    position: relative;
    animation: waveAnimation 2.5s ease-in-out infinite;
    transform-origin: center;
    z-index: 1;
}

/* Create bars that extend up and down from center */
.wave-bar::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    width: 100%;
    height: 20px;
    transform: translateY(-50%);
    background: currentColor;
    border-radius: 1px;
    box-shadow: 0 0 4px currentColor, 0 0 8px currentColor;
    opacity: 0.25;
    filter: brightness(0.4);
}

.wave-bar:nth-child(1) { color: #ff0080; }
.wave-bar:nth-child(2) { color: #ff0066; }
.wave-bar:nth-child(3) { color: #cc00ff; }
.wave-bar:nth-child(4) { color: #8a2be2; }
.wave-bar:nth-child(5) { color: #6a5acd; }
.wave-bar:nth-child(6) { color: #4169e1; }
.wave-bar:nth-child(7) { color: #0066ff; }
.wave-bar:nth-child(8) { color: #0099ff; }
.wave-bar:nth-child(9) { color: #00ccff; }
.wave-bar:nth-child(10) { color: #00ffff; }
.wave-bar:nth-child(11) { color: #00ffcc; }
.wave-bar:nth-child(12) { color: #00ff99; }
.wave-bar:nth-child(13) { color: #00ff66; }
.wave-bar:nth-child(14) { color: #33ff66; }
.wave-bar:nth-child(15) { color: #66ff66; }
.wave-bar:nth-child(16) { color: #99ff33; }
.wave-bar:nth-child(17) { color: #ccff00; }
.wave-bar:nth-child(18) { color: #ffff00; }
.wave-bar:nth-child(19) { color: #ffcc00; }
.wave-bar:nth-child(20) { color: #ff9900; }
.wave-bar:nth-child(21) { color: #ff6600; }
.wave-bar:nth-child(22) { color: #ff3300; }
.wave-bar:nth-child(23) { color: #ff0066; }
.wave-bar:nth-child(24) { color: #ff0080; }
.wave-bar:nth-child(25) { color: #ff0066; }
/* Create repeating 30-bar rainbow pattern - define the cycle */
.wave-bar:nth-child(26) { color: #ff0080; }
.wave-bar:nth-child(27) { color: #ff0066; }
.wave-bar:nth-child(28) { color: #cc00ff; }
.wave-bar:nth-child(29) { color: #8a2be2; }
.wave-bar:nth-child(30) { color: #6a5acd; }
.wave-bar:nth-child(31) { color: #4169e1; }
.wave-bar:nth-child(32) { color: #0066ff; }
.wave-bar:nth-child(33) { color: #0099ff; }
.wave-bar:nth-child(34) { color: #00ccff; }
.wave-bar:nth-child(35) { color: #00ffff; }
.wave-bar:nth-child(36) { color: #00ffcc; }
.wave-bar:nth-child(37) { color: #00ff99; }
.wave-bar:nth-child(38) { color: #00ff66; }
.wave-bar:nth-child(39) { color: #33ff66; }
.wave-bar:nth-child(40) { color: #66ff66; }
.wave-bar:nth-child(41) { color: #99ff33; }
.wave-bar:nth-child(42) { color: #ccff00; }
.wave-bar:nth-child(43) { color: #ffff00; }
.wave-bar:nth-child(44) { color: #ffcc00; }
.wave-bar:nth-child(45) { color: #ff9900; }
.wave-bar:nth-child(46) { color: #ff6600; }
.wave-bar:nth-child(47) { color: #ff3300; }
.wave-bar:nth-child(48) { color: #ff0066; }
.wave-bar:nth-child(49) { color: #ff0080; }
.wave-bar:nth-child(50) { color: #ff0066; }
.wave-bar:nth-child(51) { color: #cc00ff; }
.wave-bar:nth-child(52) { color: #8a2be2; }
.wave-bar:nth-child(53) { color: #6a5acd; }
.wave-bar:nth-child(54) { color: #4169e1; }
.wave-bar:nth-child(55) { color: #0066ff; }
/* Colors for remaining bars are applied dynamically via JavaScript in applyWaveBarColors() */

/* Animation delays are now applied dynamically via JavaScript for smooth continuous wave */

@keyframes waveAnimation {
    0%, 100% { transform: scaleY(0.4); }
    20% { transform: scaleY(0.7); }
    40% { transform: scaleY(0.5); }
    50% { transform: scaleY(0.9); }
    60% { transform: scaleY(0.6); }
    80% { transform: scaleY(0.8); }
}

.wave-bar:nth-child(1)::before { height: 8px; }
.wave-bar:nth-child(2)::before { height: 15px; }
.wave-bar:nth-child(3)::before { height: 22px; }
.wave-bar:nth-child(4)::before { height: 18px; }
.wave-bar:nth-child(5)::before { height: 25px; }
.wave-bar:nth-child(6)::before { height: 12px; }
.wave-bar:nth-child(7)::before { height: 28px; }
.wave-bar:nth-child(8)::before { height: 16px; }
.wave-bar:nth-child(9)::before { height: 24px; }
.wave-bar:nth-child(10)::before { height: 10px; }
.wave-bar:nth-child(11)::before { height: 26px; }
.wave-bar:nth-child(12)::before { height: 14px; }
.wave-bar:nth-child(13)::before { height: 20px; }
.wave-bar:nth-child(14)::before { height: 30px; }
.wave-bar:nth-child(15)::before { height: 9px; }
.wave-bar:nth-child(16)::before { height: 23px; }
.wave-bar:nth-child(17)::before { height: 17px; }
.wave-bar:nth-child(18)::before { height: 27px; }
.wave-bar:nth-child(19)::before { height: 11px; }
.wave-bar:nth-child(20)::before { height: 19px; }
.wave-bar:nth-child(21)::before { height: 29px; }
.wave-bar:nth-child(22)::before { height: 13px; }
.wave-bar:nth-child(23)::before { height: 21px; }
.wave-bar:nth-child(24)::before { height: 16px; }
.wave-bar:nth-child(25)::before { height: 25px; }

.home-rooms {
    background: linear-gradient(135deg, rgba(10, 10, 10, 0.7) 0%, rgba(17, 17, 17, 0.7) 50%, rgba(10, 10, 10, 0.7) 100%);
    border: 2px solid rgba(102, 126, 234, 0.3);
    border-radius: 20px;
    padding: 16px;
    padding-bottom: 24px;
    box-shadow: 
        0 25px 60px rgba(0, 0, 0, 0.8),
        0 0 40px rgba(102, 126, 234, 0.2),
        inset 0 0 30px rgba(102, 126, 234, 0.05);
    position: relative;
    overflow: visible;
    z-index: 1;
}

.home-rooms::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.3), transparent);
    animation: sidebar-shine 3s ease-in-out infinite;
    pointer-events: none;
}


.homepage-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 30px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-radius: 12px;
    border: 2px solid transparent;
    background-clip: padding-box;
    position: relative;
    overflow: visible;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.home-music-toggle {
    position: absolute;
    top: auto;
    bottom: 10px;
    right: 10px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    padding: 0;
    border: 1px solid rgba(102, 126, 234, 0.45);
    border-radius: 50%;
    background: rgba(15, 15, 22, 0.65);
    color: #c7d2fe;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}
.home-music-toggle:hover {
    background: rgba(102, 126, 234, 0.35);
    border-color: rgba(167, 139, 250, 0.7);
    color: #fff;
    transform: scale(1.05);
}
.home-music-toggle:focus-visible {
    outline: 2px solid #a5b4fc;
    outline-offset: 2px;
}
.home-music-toggle-icon {
    display: block;
    flex-shrink: 0;
    pointer-events: none;
}
.home-music-toggle.is-playing .home-music-toggle-play {
    display: none;
}
.home-music-toggle:not(.is-playing) .home-music-toggle-pause {
    display: none;
}

@media (max-width: 768px) and (orientation: portrait) {
    .home-music-toggle {
        top: auto;
        bottom: 8px;
        right: 8px;
        width: 30px;
        height: 30px;
        min-width: 30px !important;
        min-height: 30px !important;
        padding: 0 !important;
        font-size: 12px !important;
        border-radius: 50% !important;
    }
}

.homepage-header:hover {
    opacity: 0.8;
}

.homepage-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.3), transparent);
    animation: sidebar-shine 3s ease-in-out infinite;
}



.homepage-title {
    font-size: 48px;
    font-weight: 900;
    margin: 0;
    text-align: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    z-index: 1;
}

/* Homepage Logo Speech Bubble with Eye */
.homepage-logo-icon-speech-bubble {
    width: 60px;
    height: 60px;
    position: relative;
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 50%, #3b82f6 100%);
    border-radius: 50%;
    box-shadow: 
        inset -3px -3px 12px rgba(0, 0, 0, 0.3),
        inset 3px 3px 12px rgba(255, 255, 255, 0.3),
        0 0 25px rgba(59, 130, 246, 0.6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    animation: float 2s ease-in-out infinite;
    margin-right: 12px;
}

.homepage-logo-icon-speech-bubble::after {
    content: '';
    position: absolute;
    bottom: -10px;
    right: 15px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 14px solid #3b82f6;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3));
}

.homepage-logo-eye {
    width: 38px;
    height: 38px;
    background: white;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.1);
}

.homepage-logo-iris {
    width: 26px;
    height: 26px;
    background: radial-gradient(circle, #1e40af 0%, #1e3a8a 100%);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid #1e3a8a;
}

.homepage-logo-pupil {
    width: 12px;
    height: 12px;
    background: #000;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.homepage-logo-highlight {
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 10px;
    left: 10px;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.9);
}

.homepage-logo-text {
    display: inline-block;
    letter-spacing: -1px;
    position: relative;
    font-weight: 700;
}

.homepage-logo-text-tiny {
    font-weight: 800;
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.5px;
    position: relative;
    z-index: 1;
}

.homepage-logo-text-chats {
    font-weight: 800;
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.5px;
    position: relative;
    z-index: 1;
}

.homepage-logo-text::after {
    display: none;
}

@keyframes gradient-shift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

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

/* Sidebar Logo Styling */
.sidebar-logo {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-radius: 12px;
    margin: 5px 5px 2px 5px !important;
    padding: 8px 15px !important;
    border: 2px solid transparent;
    background-clip: padding-box;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.sidebar-logo:hover {
    opacity: 0.8;
}

.sidebar-logo::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.3), transparent);
    animation: sidebar-shine 3s ease-in-out infinite;
}

/* Logo Speech Bubble with Eye */
.logo-icon-speech-bubble {
    width: 32px;
    height: 32px;
    position: relative;
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 50%, #3b82f6 100%);
    border-radius: 50%;
    box-shadow: 
        inset -2px -2px 8px rgba(0, 0, 0, 0.3),
        inset 2px 2px 8px rgba(255, 255, 255, 0.3),
        0 0 15px rgba(59, 130, 246, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-icon-speech-bubble::after {
    content: '';
    position: absolute;
    bottom: -6px;
    right: 8px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid #3b82f6;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.logo-eye {
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.logo-iris {
    width: 14px;
    height: 14px;
    background: radial-gradient(circle, #1e40af 0%, #1e3a8a 100%);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #1e3a8a;
}

.logo-pupil {
    width: 6px;
    height: 6px;
    background: #000;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.logo-highlight {
    width: 4px;
    height: 4px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 6px;
    left: 6px;
    box-shadow: 0 0 2px rgba(255, 255, 255, 0.8);
}

.sidebar-logo .logo-text {
    font-weight: 800;
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.5px;
    position: relative;
    z-index: 1;
}

@keyframes sidebar-shine {
    0% {
        left: -100%;
    }
    50%, 100% {
        left: 100%;
    }
}

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

.homepage-tagline {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    margin: 12px 0 0 0;
    letter-spacing: 1.5px;
    position: relative;
    z-index: 1;
    text-align: center;
    text-transform: uppercase;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    position: relative;
    z-index: 1;
}

.mobile-notice {
    display: none;
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.15) 0%, rgba(192, 57, 43, 0.15) 100%);
    border: 2px solid rgba(231, 76, 60, 0.4);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 30px;
    text-align: center;
}

.mobile-notice p {
    margin: 0;
    color: #e74c3c;
    font-size: 16px;
    font-weight: 600;
}

@media (max-width: 768px) {
    .mobile-notice {
        display: block;
    }
}

.home-rooms-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 12px;
    position: relative;
    padding: 0;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
}

.home-rooms-header::before,
.home-rooms-header::after {
    display: none !important;
    content: none !important;
}

.home-rooms-header h3 {
    font-size: 24px;
    font-weight: 800;
    text-align: center;
    margin: 0 0 4px 0;
    color: #fff;
    text-shadow: none !important;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: inherit;
    line-height: 1.2;
    box-shadow: none !important;
    filter: none !important;
}

.home-rooms-header span {
    font-size: 14px;
    font-weight: 500;
    color: #ffd700;
    text-align: center;
    letter-spacing: 0.02em;
}

/* Promotion option hover effect */
.promotion-option:hover {
    border-color: #667eea !important;
    background: #222 !important;
}

.promotion-option input[type="radio"]:checked + div {
    color: #667eea;
}

.promotion-option input[type="radio"]:checked ~ div {
    color: #667eea;
}

/* Fix for radio button styling */
.promotion-option input[type="radio"]:checked {
    accent-color: #667eea;
}

.home-rooms-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    align-items: stretch;
}

.home-room-card {
    background: linear-gradient(135deg, rgba(10, 10, 10, 0.85) 0%, rgba(26, 26, 26, 0.85) 50%, rgba(10, 10, 10, 0.85) 100%);
    border: 2px solid rgba(102, 126, 234, 0.4);
    border-radius: 12px;
    padding: 0;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.6),
        0 0 20px rgba(102, 126, 234, 0.3),
        inset 0 0 20px rgba(102, 126, 234, 0.05);
    height: 420px;
    min-height: 420px;
    max-height: 420px;
    z-index: 2;
}

.home-room-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(102, 126, 234, 0.1) 0%, 
        transparent 50%,
        rgba(118, 75, 162, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 0;
}

.home-room-card:hover::before {
    opacity: 1;
}

@keyframes subtleGlow {
    0%, 100% {
        box-shadow: 
            0 0 15px rgba(102, 126, 234, 0.2),
            0 0 30px rgba(102, 126, 234, 0.1),
            inset 0 0 20px rgba(102, 126, 234, 0.05);
        border-color: rgba(102, 126, 234, 0.3);
    }
    50% {
        box-shadow: 
            0 0 25px rgba(102, 126, 234, 0.4),
            0 0 50px rgba(102, 126, 234, 0.2),
            inset 0 0 30px rgba(102, 126, 234, 0.1);
        border-color: rgba(102, 126, 234, 0.5);
    }
}

.home-room-card:hover {
    border-color: rgba(102, 126, 234, 1);
    transform: translateY(-8px) scale(1.02);
    box-shadow: 
        0 15px 50px rgba(0, 0, 0, 0.8),
        0 0 50px rgba(102, 126, 234, 0.8),
        0 0 100px rgba(118, 75, 162, 0.5),
        0 20px 60px rgba(0, 0, 0, 0.6),
        inset 0 0 40px rgba(102, 126, 234, 0.15);
    z-index: 10;
}

.home-room-card:active {
    transform: translateY(-4px) scale(1.01);
}

.home-room-header {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-bottom: 2px solid rgba(102, 126, 234, 0.3);
    position: relative;
    z-index: 1;
    min-height: 76px;
    max-height: 76px;
    flex-shrink: 0;
}

.home-room-title {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    width: 100%;
    text-shadow: 
        0 0 10px rgba(102, 126, 234, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.8);
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.home-room-header-stats {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: center;
}

.home-room-header-stats .header-stat {
    color: rgba(255, 255, 255, 0.95);
    font-size: 13px;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    padding: 4px 8px;
    background: rgba(102, 126, 234, 0.15);
    border-radius: 6px;
    border: 1px solid rgba(102, 126, 234, 0.3);
}

/* Live room preview: broadcaster name — top center, no pill background */
.room-preview-username-overlay {
    position: absolute;
    left: 8px;
    right: 8px;
    top: 0;
    bottom: auto;
    padding: 1px 4px 2px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    text-shadow:
        0 0 6px rgba(0, 0, 0, 1),
        0 1px 2px rgba(0, 0, 0, 1),
        0 2px 10px rgba(0, 0, 0, 0.85);
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    z-index: 3;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.promoted-slide-preview .room-preview-username-overlay {
    font-size: 11px;
    padding: 1px 4px 2px;
    left: 6px;
    right: 6px;
    top: 0;
    bottom: auto;
}

.home-room-preview {
    width: 100%;
    height: 168px;
    max-height: 168px;
    background: #000;
    border: 3px solid rgba(102, 126, 234, 0.6);
    overflow: hidden;
    position: relative;
    box-shadow: 
        inset 0 0 30px rgba(102, 126, 234, 0.2),
        0 0 20px rgba(102, 126, 234, 0.3);
    z-index: 1;
    flex-shrink: 0;
}

.home-room-card:hover .home-room-preview {
    border-color: rgba(102, 126, 234, 1);
    box-shadow: 
        inset 0 0 50px rgba(102, 126, 234, 0.4),
        0 0 40px rgba(102, 126, 234, 0.6);
}

/* Bio slot: grows in card (no join row below) */
.home-room-footer {
    flex: 1 1 auto;
    min-height: 88px;
    height: auto;
    max-height: none;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
    padding: 8px 12px;
    color: rgba(255, 255, 255, 0.9);
    border-top: 2px solid rgba(102, 126, 234, 0.3);
    border-bottom: 2px solid rgba(102, 126, 234, 0.2);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    text-align: center;
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    hyphens: auto;
}

/* Room bio under preview: wraps in the slot; ellipsis if longer (no scroll) */
.home-room-footer .room-description-text {
    font-size: 12px;
    font-weight: 600;
    color: #f0f0f0;
    line-height: 1.4;
    margin: 0;
    max-width: 100% !important;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-rooms-pagination {
    margin-top: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    background: rgba(102, 126, 234, 0.08);
    border: 1px solid rgba(102, 126, 234, 0.35);
    border-radius: 14px;
}

.home-page-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border-radius: 10px;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: transform 0.2s, box-shadow 0.2s;
}

.home-page-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(102, 126, 234, 0.5);
}

/* Homepage Footer */
.homepage-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 4px 20px 6px;
    text-align: center;
    border-top: 1px solid rgba(102, 126, 234, 0.15);
    background: rgba(10, 10, 10, 0.25);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    z-index: 100;
}

.homepage-footer-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.homepage-footer .copyright-text {
    color: #e8e8e8;
    font-size: 8px;
    line-height: 1.2;
    margin: 0;
    font-weight: 600;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.9), 0 1px 2px rgba(0, 0, 0, 0.8);
    letter-spacing: 0.02em;
}

.contact-button {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    text-decoration: none;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    display: inline-block;
}

.contact-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

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

.donation-button {
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    color: #fff;
    text-decoration: none;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    display: inline-block;
}

.donation-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
    background: linear-gradient(135deg, #ef4444 0%, #f59e0b 100%);
}

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

.footer-link-button {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    color: #fff;
    text-decoration: none;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    display: inline-block;
}

.footer-link-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(100, 116, 139, 0.4);
    background: linear-gradient(135deg, #475569 0%, #64748b 100%);
}

.footer-link-button:active {
    transform: translateY(0);
}

.home-page-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.home-page-label {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.home-no-rooms {
    color: #888;
    text-align: center;
    padding: 20px 0;
}

#video-container {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    background: transparent;
    box-sizing: border-box;
    overflow: hidden;
    padding: 0;
    margin: 0;
    position: relative;
    z-index: 10;
}
/* Room bio: wraps to multiple lines; dark panel grows with content */
#room-bio.room-bio-panel {
    flex-shrink: 0;
    width: 100%;
    max-width: 640px;
    margin: 0 auto 2px auto;
    padding: 6px 12px;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 4px;
    text-align: center;
    box-sizing: border-box;
    min-height: 0;
    max-height: 10rem;
    overflow-x: hidden;
    overflow-y: auto;
    white-space: normal;
    display: flex;
    align-items: center;
    justify-content: center;
}
#room-bio #room-bio-text {
    font-size: 11px;
    line-height: 1.45;
    color: #a1a1aa;
    letter-spacing: 0.01em;
    display: block;
    width: 100%;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}
/* Camera channel bar: name/selector above video grid (Main or room camera channels) */
.camera-channel-bar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px 6px;
    min-height: 0;
}
.camera-channel-label {
    font-size: 12px;
    color: #949ba4;
    font-weight: 600;
}
.camera-channel-select {
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid #444;
    background: #2a2a2a;
    color: #e2e8f0;
    font-size: 13px;
    cursor: pointer;
    min-width: 120px;
}
#video-container #video-grid-area {
    flex: 1 1 0;
    min-height: 0;
    background: transparent;
    position: relative;
}

@media (max-width: 768px) {
    #video-grid {
        gap: 0 !important;
        padding: 0 !important;
    }
    #video-grid .video-wrapper,
    #video-grid .video-wrapper.video-wrapper-dragging,
    #video-grid .video-wrapper.video-wrapper-drag-over {
        border-radius: 6px !important;
    }
}

#room-gifts-dropdown {
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

#close-room-gifts-btn:hover {
    background: #444 !important;
    transform: rotate(90deg);
}

#toggle-room-gifts-btn.room-gifts-btn-faded {
    opacity: 0.5;
}
#toggle-room-gifts-btn:hover {
    opacity: 1;
}
/* Corner placement above video feeds: solid dark, no orange/transparent */
#room-gifts-corner-wrap {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 100;
}
#room-gifts-corner-wrap #toggle-room-gifts-btn.room-gifts-btn-faded {
    opacity: 0.5;
    background: #1a1a1a;
    color: #a1a1aa;
    border-color: #333;
}
#room-gifts-corner-wrap #toggle-room-gifts-btn:hover {
    opacity: 1;
    background: #374151;
    color: #fff;
    border-color: #4b5563;
}

/* Room Gifts button: more compact on mobile (icon-only, smaller tap target) */
@media (max-width: 768px) {
    #room-gifts-corner-wrap {
        top: 6px;
        left: 6px;
    }
    #room-gifts-corner-wrap #toggle-room-gifts-btn {
        padding: 4px 6px !important;
        font-size: 10px !important;
        min-height: 28px !important;
        border-radius: 6px !important;
    }
    #room-gifts-corner-wrap #toggle-room-gifts-btn .room-gifts-btn-label {
        display: none;
    }
}

#room-gifts-container::-webkit-scrollbar {
    display: none;
}

#gifts-prev-btn:hover,
#gifts-next-btn:hover {
    background: rgba(245, 158, 11, 0.9) !important;
    transform: translateY(-50%) scale(1.1);
}

.gift-indicator:hover {
    transform: scale(1.2);
}

#remote-videos {
    /* Flatten remote wrappers so the parent does not consume its own grid cell */
    display: contents;
}

/* Glowing border for speaking users (camera only; screen share uses orange-on-audio below) */
.video-wrapper:not([id$="-screen"]).speaking,
#local-video-container.speaking {
    outline: none !important;
}

.video-wrapper:not([id$="-screen"]).speaking::after,
#local-video-container.speaking::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
    pointer-events: none;
    z-index: 20;
    box-shadow: inset 0 0 0 3px #22c55e,
                inset 0 0 15px rgba(34, 197, 94, 0.5),
                inset 0 0 25px rgba(34, 197, 94, 0.25);
    animation: speakingPulse 2s ease-in-out infinite;
}

/* Screen share: solid orange border when tab/window audio is heard – no glow, no flash */
.video-wrapper[id$="-screen"].speaking,
#local-screen-container.speaking {
    outline: none !important;
}
.video-wrapper[id$="-screen"].speaking::after,
#local-screen-container.speaking::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
    pointer-events: none;
    z-index: 20;
    animation: none;
    box-shadow: inset 0 0 0 3px rgb(249, 115, 22);
}

/* Screen share with no audio: solid red border */
.video-wrapper[id$="-screen"].screen-share-no-audio,
#local-screen-container.screen-share-no-audio {
    outline: none !important;
}
.video-wrapper[id$="-screen"].screen-share-no-audio::after,
#local-screen-container.screen-share-no-audio::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
    pointer-events: none;
    z-index: 20;
    animation: none;
    box-shadow: inset 0 0 0 3px rgb(220, 38, 38);
}

/* Open mic but quiet - dark blue (::after overlay) */
.video-wrapper.mic-quiet,
#local-video-container.mic-quiet {
    outline: none !important;
}

.video-wrapper.mic-quiet::after,
#local-video-container.mic-quiet::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
    pointer-events: none;
    z-index: 20;
    box-shadow: inset 0 0 0 3px #5568d3,
                inset 0 0 12px rgba(85, 104, 211, 0.4),
                inset 0 0 20px rgba(85, 104, 211, 0.2);
    animation: micQuietPulse 2.5s ease-in-out infinite;
}

/* Mobile only: solid green border when open mic is on (no level-based red/blue) */
@media (max-width: 768px) {
    #local-video-container.open-mic-on {
        outline: none !important;
    }
    #local-video-container.open-mic-on::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 4px;
        pointer-events: none;
        z-index: 20;
        animation: none;
        box-shadow: inset 0 0 0 3px #22c55e,
                    inset 0 0 15px rgba(34, 197, 94, 0.5),
                    inset 0 0 25px rgba(34, 197, 94, 0.25);
    }
}

@keyframes micQuietPulse {
    0%, 100% {
        box-shadow: inset 0 0 0 3px #5568d3,
                    inset 0 0 12px rgba(85, 104, 211, 0.4),
                    inset 0 0 20px rgba(85, 104, 211, 0.2);
    }
    50% {
        box-shadow: inset 0 0 0 3px #5568d3,
                    inset 0 0 18px rgba(85, 104, 211, 0.6),
                    inset 0 0 28px rgba(85, 104, 211, 0.3);
    }
}

@keyframes speakingPulse {
    0%, 100% {
        box-shadow: inset 0 0 0 3px #22c55e,
                    inset 0 0 15px rgba(34, 197, 94, 0.5),
                    inset 0 0 25px rgba(34, 197, 94, 0.25);
    }
    50% {
        box-shadow: inset 0 0 0 3px #22c55e,
                    inset 0 0 20px rgba(34, 197, 94, 0.7),
                    inset 0 0 35px rgba(34, 197, 94, 0.4);
    }
}

/* Drawing board in grid: same grid item as YouTube, show panel with flex */
.drawing-board-wrapper {
    display: flex !important;
    flex-direction: column;
    min-height: 280px;
    background: #1e1e1e;
}
.drawing-board-wrapper #drawing-board-panel {
    flex: 1;
    min-height: 0;
    display: flex !important;
    flex-direction: column;
}
/* Drawing board tile: compact close like other video-control icon buttons */
.drawing-board-close-btn {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    padding: 0 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    top: 6px !important;
    right: 6px !important;
    border-radius: 6px !important;
}
.drawing-board-close-btn:hover {
    background: rgba(239, 68, 68, 0.9) !important;
}

/* Drawing popup: color input as proper square swatch */
#drawing-color-popup {
    display: block;
    overflow: hidden;
}
#drawing-color-popup::-webkit-color-swatch-wrapper { padding: 2px; }
#drawing-color-popup::-webkit-color-swatch { border: none; border-radius: 4px; }
#drawing-color-popup::-moz-color-swatch { border: none; border-radius: 4px; }

.drawing-board-wrapper #drawing-canvas {
    flex: 1;
    min-height: 200px;
    max-height: 100%;
}

/* Drawing preview in grid: fit inside tile so nothing is cut off (contain, not fill) */
.drawing-board-wrapper .drawing-preview-fit-wrap {
    aspect-ratio: 320 / 200;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
}
.drawing-board-wrapper .drawing-preview-fit-wrap #drawing-preview-canvas {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
}

.video-wrapper {
    position: relative;
    background: #000;
    overflow: hidden;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: none;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    z-index: 1;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Drag to reorder feeds */
.video-wrapper.video-wrapper-draggable {
    cursor: grab;
}
.video-wrapper.video-wrapper-draggable:active {
    cursor: grabbing;
}
.video-wrapper.video-wrapper-dragging {
    opacity: 0.9;
    cursor: grabbing;
    border: 3px solid rgba(255, 200, 80, 0.95);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    z-index: 10;
    border-radius: 10px;
}
.video-wrapper.video-wrapper-drag-over {
    border: 3px dashed rgba(100, 200, 255, 0.9);
    background: rgba(100, 200, 255, 0.12);
    box-shadow: inset 0 0 0 2px rgba(100, 200, 255, 0.3);
    border-radius: 10px;
}
.video-wrapper.video-wrapper-dragging.video-wrapper-drag-over {
    border-color: rgba(255, 200, 80, 0.95);
    background: transparent;
}

.video-wrapper > .video-feed-area {
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-wrapper:fullscreen {
    width: 100vw;
    height: 100vh;
    background: #000;
    position: relative;
    display: block;
    border-radius: 0;
    box-shadow: none;
}
.video-wrapper:fullscreen .video-label,
.video-wrapper:fullscreen .video-label-bar {
    display: none;
}
.video-wrapper:fullscreen .video-feed-area {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.video-wrapper:-webkit-full-screen,
.video-wrapper:-moz-full-screen,
.video-wrapper:-ms-fullscreen {
    width: 100vw;
    height: 100vh;
    background: #000;
    position: relative;
    display: block;
}
.video-wrapper:-webkit-full-screen .video-label,
.video-wrapper:-webkit-full-screen .video-label-bar,
.video-wrapper:-moz-full-screen .video-label,
.video-wrapper:-moz-full-screen .video-label-bar,
.video-wrapper:-ms-fullscreen .video-label,
.video-wrapper:-ms-fullscreen .video-label-bar {
    display: none;
}
.video-wrapper:-webkit-full-screen .video-feed-area,
.video-wrapper:-moz-full-screen .video-feed-area,
.video-wrapper:-ms-fullscreen .video-feed-area {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Local video container fullscreen styles */
#local-video-container:fullscreen,
#local-video-container:-webkit-full-screen,
#local-video-container:-moz-full-screen,
#local-video-container:-ms-fullscreen {
    width: 100vw;
    height: 100vh;
    background: #000;
    position: relative;
    display: block;
}
#local-video-container:fullscreen .video-label,
#local-video-container:-webkit-full-screen .video-label,
#local-video-container:-moz-full-screen .video-label,
#local-video-container:-ms-fullscreen .video-label {
    display: none;
}
#local-video-container:fullscreen .video-feed-area,
#local-video-container:-webkit-full-screen .video-feed-area,
#local-video-container:-moz-full-screen .video-feed-area,
#local-video-container:-ms-fullscreen .video-feed-area {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Tap fullscreen on mobile (no native Fullscreen API) */
.video-wrapper.mobile-fullscreen {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #000 !important;
    overflow: hidden;
}
.video-wrapper.mobile-fullscreen .video-feed-area {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Ensure video fills fullscreen wrapper; portrait centering is done in JS (don't override with !important) */
.video-wrapper:fullscreen video,
.video-wrapper:-webkit-full-screen video,
.video-wrapper:-moz-full-screen video,
.video-wrapper:-ms-fullscreen video,
#local-video-container:fullscreen video,
#local-video-container:-webkit-full-screen video,
#local-video-container:-moz-full-screen video,
#local-video-container:-ms-fullscreen video,
#local-screen-container:fullscreen video,
#local-screen-container:-webkit-full-screen video,
#local-screen-container:-moz-full-screen video,
#local-screen-container:-ms-fullscreen video {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    object-position: center center !important;
    transform-origin: center center !important;
    image-orientation: from-image !important;
}

/* Screen share fullscreen: fill viewport, no JS rotation/sizing */
#local-screen-container:fullscreen,
#local-screen-container:-webkit-full-screen,
#local-screen-container:-moz-full-screen,
#local-screen-container:-ms-fullscreen,
.video-wrapper[id$="-screen"]:fullscreen,
.video-wrapper[id$="-screen"]:-webkit-full-screen,
.video-wrapper[id$="-screen"]:-moz-full-screen,
.video-wrapper[id$="-screen"]:-ms-fullscreen {
    width: 100vw;
    height: 100vh;
    background: #000;
    position: relative;
    display: block;
    border-radius: 0;
    box-shadow: none;
}
#local-screen-container:fullscreen .video-label,
#local-screen-container:fullscreen .video-label-bar,
#local-screen-container:-webkit-full-screen .video-label,
#local-screen-container:-webkit-full-screen .video-label-bar,
.video-wrapper[id$="-screen"]:fullscreen .video-label,
.video-wrapper[id$="-screen"]:fullscreen .video-label-bar {
    display: none;
}
#local-screen-container:fullscreen .video-feed-area,
#local-screen-container:-webkit-full-screen .video-feed-area,
.video-wrapper[id$="-screen"]:fullscreen .video-feed-area,
.video-wrapper[id$="-screen"]:-webkit-full-screen .video-feed-area {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
#local-screen-container:fullscreen video,
#local-screen-container:-webkit-full-screen video,
.video-wrapper[id$="-screen"]:fullscreen video,
.video-wrapper[id$="-screen"]:-webkit-full-screen video {
    object-fit: contain !important;
    transform: none !important;
}

/* Pin video to wrapper so it can't shift left/right – fills same area as the overlay buttons */
.video-wrapper video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100% !important;
    height: 100% !important;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain !important;
    object-position: center center;
    background: #000;
    box-sizing: border-box;
    /* Mobile-specific: Ensure video is visible and plays inline */
    -webkit-playsinline: true;
    -moz-playsinline: true;
    playsinline: true;
    display: block;
    visibility: visible;
    /* Allow transforms for rotation correction - don't force transform: none */
    transform-origin: center center;
    /* Ensure transforms can be applied via JavaScript */
    will-change: transform;
}

/* Desktop: fit (contain) for all camera feeds so entire feed is visible; grid adjusts when more users join */
@media (min-width: 769px) {
    .video-wrapper.video-feed-portrait:not([id$="-screen"]) video {
        object-fit: contain !important;
    }
}

/* Mobile landscape: keep fit (contain) so toggling sidebar doesn't make feed suddenly fill and get larger */
@media (max-height: 500px) {
    .video-wrapper video {
        object-fit: contain !important;
    }
}

/* ========== Feed overlay / filter effects (per-viewer choice) ========== */
.video-wrapper {
    position: relative;
    overflow: hidden;
}
/* Border when a filter is active (user feed or my feed) – inset so it’s not covered by video */
.video-wrapper.feed-filter-active,
.video-feed-area.feed-filter-active,
#local-video-container.feed-filter-active {
    box-sizing: border-box;
    border-radius: 8px;
    box-shadow: inset 0 0 0 2px rgba(102, 126, 234, 0.9), 0 0 14px rgba(102, 126, 234, 0.4);
}
.video-wrapper.feed-overlay-vignette::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.6) 100%);
}
.video-wrapper.feed-overlay-frame::before {
    content: '';
    position: absolute;
    inset: 8px;
    z-index: 2;
    pointer-events: none;
    border: 3px solid rgba(102, 126, 234, 0.7);
    border-radius: 12px;
    box-shadow: inset 0 0 20px rgba(102, 126, 234, 0.2);
}
.video-wrapper.feed-overlay-grayscale video {
    filter: grayscale(1);
}
.video-wrapper.feed-overlay-sepia video {
    filter: sepia(0.8);
}
.video-wrapper.feed-overlay-warm video {
    filter: sepia(0.25) saturate(1.15);
}
.video-wrapper.feed-overlay-cool video {
    filter: hue-rotate(190deg) saturate(0.9);
}
.video-wrapper.feed-overlay-cinema::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 25%, rgba(0,0,0,0.75) 100%);
    box-shadow: inset 0 0 60px 20px rgba(0,0,0,0.4);
}
.video-wrapper.feed-overlay-cinema video {
    filter: contrast(1.05);
}
.video-wrapper.feed-overlay-neon::before {
    content: '';
    position: absolute;
    inset: 4px;
    z-index: 2;
    pointer-events: none;
    border: 2px solid rgba(0, 255, 255, 0.8);
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.5), inset 0 0 15px rgba(0, 255, 255, 0.15);
}
.video-wrapper.feed-overlay-neon video {
    filter: contrast(1.1) saturate(1.1);
}

/* Same overlays when applied to .video-feed-area (remote feeds) */
.video-feed-area.feed-overlay-vignette::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.6) 100%);
}
.video-feed-area.feed-overlay-frame::before {
    content: '';
    position: absolute;
    inset: 8px;
    z-index: 2;
    pointer-events: none;
    border: 3px solid rgba(102, 126, 234, 0.7);
    border-radius: 12px;
    box-shadow: inset 0 0 20px rgba(102, 126, 234, 0.2);
}
.video-feed-area.feed-overlay-grayscale video { filter: grayscale(1); }
.video-feed-area.feed-overlay-sepia video { filter: sepia(0.8); }
.video-feed-area.feed-overlay-warm video { filter: sepia(0.25) saturate(1.15); }
.video-feed-area.feed-overlay-cool video { filter: hue-rotate(190deg) saturate(0.9); }
.video-feed-area.feed-overlay-cinema::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 25%, rgba(0,0,0,0.75) 100%);
    box-shadow: inset 0 0 60px 20px rgba(0,0,0,0.4);
}
.video-feed-area.feed-overlay-cinema video { filter: contrast(1.05); }
.video-feed-area.feed-overlay-neon::before {
    content: '';
    position: absolute;
    inset: 4px;
    z-index: 2;
    pointer-events: none;
    border: 2px solid rgba(0, 255, 255, 0.8);
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.5), inset 0 0 15px rgba(0, 255, 255, 0.15);
}
.video-feed-area.feed-overlay-neon video { filter: contrast(1.1) saturate(1.1); }

.video-wrapper > .video-label {
    flex-shrink: 0;
    padding: 6px 12px;
    text-align: center;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    border-radius: 0;
}

/* Username bar: fixed positions so speaker/gifts never move the username */
/* z-index 10 so it stays above .remote-no-camera-placeholder (z-index 5) on no-mic feeds */
.video-label-bar {
    display: block;
    flex-shrink: 0;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    position: relative;
    z-index: 10;
    overflow: visible;
    min-height: 28px;
    line-height: 1.2;
}
/* No-mic (no camera) tiles: pin label bar to bottom so speaker is bottom-right like other feeds */
.video-wrapper:has(.remote-no-camera-placeholder) .video-label-bar {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
}
.video-label-bar .video-label {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    max-width: calc(100% - 120px);
    text-align: center;
    background: none;
    padding: 0;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    z-index: 12; /* above quick-gift-bar so username never sits under it (portrait) */
}
.video-label-bar .video-bottom-right-controls {
    position: absolute;
    bottom: auto !important;   /* override base bottom: 30px so controls stay in label bar row, not above it */
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    margin: 0;
    z-index: 2;
}
.video-label-bar .video-bottom-right-controls .hide-video-btn,
.video-label-bar .video-bottom-right-controls .video-eye-standalone {
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    padding: 0 !important;
    font-size: 10px !important;
    position: relative;
    z-index: 26;
}
.video-label-bar .video-volume-control {
    position: relative;
    bottom: auto;
    right: auto;
    padding: 1px 2px !important;
    min-height: 0 !important;
    z-index: 2;
}
.video-label-bar .video-volume-control::before {
    width: 40px;
    height: 64px;
}
.video-label-bar .video-volume-control .volume-icon-row .volume-icon-btn {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    font-size: 10px !important;
}
.video-label-bar .video-volume-control .volume-percentage-badge {
    min-width: 18px !important;
    height: 18px !important;
    font-size: 9px !important;
}
.video-label-bar .video-volume-control.volume-expanded {
    position: relative;
    z-index: 25;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    padding: 1px 3px !important;
}
.video-label-bar .video-volume-control.volume-expanded .volume-icon-row {
    position: relative;
}
.video-label-bar .video-volume-control.volume-expanded .volume-slider,
.video-label-bar .video-volume-control:hover .volume-slider,
.video-label-bar .video-volume-control.volume-hover-sticky .volume-slider {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 6px;
    z-index: 25;
    display: flex;
    height: 62px;
    min-height: 62px;
    width: 14px;
    background: rgba(0, 0, 0, 0.9);
    padding: 8px 6px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.video-label-bar .video-volume-control.volume-expanded .volume-slider::-webkit-slider-thumb,
.video-label-bar .video-volume-control:hover .volume-slider::-webkit-slider-thumb {
    width: 24px;
    height: 24px;
}
.video-label-bar .video-volume-control.volume-expanded .volume-slider::-moz-range-thumb,
.video-label-bar .video-volume-control:hover .volume-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
}
.video-label-bar .video-volume-control:hover,
.video-label-bar .video-volume-control.volume-hover-sticky {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    padding: 1px 3px !important;
    position: relative;
    z-index: 25;
}
.video-label-bar .quick-gift-bar {
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-58%) !important;
    bottom: auto !important;
    flex-shrink: 0;
    padding: 0 2px !important;
    margin: 0 !important;
}
.video-label-bar .quick-gift-bar .quick-gift-toggle-btn,
.video-label-bar .quick-gift-bar .quick-gift-btn {
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    font-size: 12px !important;
    padding: 2px !important;
}

.video-feed-area video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100% !important;
    height: 100% !important;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain !important;
    object-position: center center;
    background: #000;
    box-sizing: border-box;
    -webkit-playsinline: true;
    -moz-playsinline: true;
    playsinline: true;
    display: block;
    visibility: visible;
    transform-origin: center center;
    will-change: transform;
}

.video-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 5px;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 15;
    pointer-events: auto;
}

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

.video-control-btn {
    background: rgba(0, 0, 0, 0.8);
    color: white;
    border: none;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    transition: background 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8), 0 2px 8px rgba(0, 0, 0, 0.6);
    margin: 2px;
    min-height: 32px;
}

.video-control-btn:hover {
    background: rgba(0, 0, 0, 0.95);
}

.video-control-btn.mute-btn {
    background: rgba(52, 152, 219, 0.8);
}

.video-control-btn.block-btn {
    background: rgba(0, 0, 0, 0.8);
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    padding: 0;
    font-size: 9px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    transition: background 0.2s, box-shadow 0.2s;
}

.video-control-btn.block-btn:hover {
    background: rgba(231, 76, 60, 0.8);
}

/* Fullscreen and filter overlay: same icon-button size */
.video-control-btn.fullscreen-btn,
.video-control-btn.filter-overlay-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.video-control-btn.fullscreen-btn {
    background: rgba(0, 0, 0, 0.8);
    border: none;
    outline: none;
    box-shadow: none;
    transition: background 0.2s;
}
.video-control-btn.fullscreen-btn:focus {
    outline: none;
    box-shadow: none;
}
.video-control-btn.fullscreen-btn:hover {
    background: rgba(155, 89, 182, 0.8);
}

.video-control-btn.report-btn,
.video-control-btn.refresh-btn,
.video-control-btn.stop-stream-btn,
.video-control-btn.ban-btn {
    background: rgba(0, 0, 0, 0.8);
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    padding: 0;
    font-size: 9px;
    font-weight: 700;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    transition: background 0.2s, box-shadow 0.2s;
}

.video-control-btn.report-btn:hover {
    background: rgba(231, 76, 60, 0.9);
}

.video-control-btn.stop-stream-btn:hover {
    background: rgba(220, 38, 38, 0.8);
}

.video-control-btn.ban-btn:hover {
    background: rgba(220, 38, 38, 0.8);
}

.video-control-btn.gift-btn {
    background: rgba(245, 158, 11, 0.8);
}

.video-control-btn.gift-btn:hover {
    background: rgba(245, 158, 11, 0.95);
}

/* Filter overlay button – color shows which filter is active; no border/shadow (size shared with fullscreen above) */
.video-control-btn.filter-overlay-btn {
    background: rgba(0, 0, 0, 0.8);
    border: none;
    outline: none;
    box-shadow: none;
}
.video-control-btn.filter-overlay-btn:focus {
    outline: none;
    box-shadow: none;
}
.video-control-btn.filter-overlay-btn--none { background: rgba(0, 0, 0, 0.8); }
.video-control-btn.filter-overlay-btn--vignette { background: rgba(75, 0, 130, 0.85); }
.video-control-btn.filter-overlay-btn--frame { background: rgba(30, 144, 255, 0.85); }
.video-control-btn.filter-overlay-btn--grayscale { background: rgba(105, 105, 105, 0.9); }
.video-control-btn.filter-overlay-btn--sepia { background: rgba(139, 90, 43, 0.85); }
.video-control-btn.filter-overlay-btn--warm { background: rgba(205, 92, 92, 0.85); }
.video-control-btn.filter-overlay-btn--cool { background: rgba(70, 130, 180, 0.85); }
.video-control-btn.filter-overlay-btn--cinema { background: rgba(40, 40, 40, 0.9); }
.video-control-btn.filter-overlay-btn--neon { background: rgba(0, 255, 127, 0.5); }
.video-control-btn.filter-overlay-btn:hover { filter: brightness(1.15); }

/* Feed overlay dropdown – border around the selected option */
.feed-overlay-option.feed-overlay-option--selected {
    border: 2px solid rgba(102, 126, 234, 0.95) !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 0 8px rgba(102, 126, 234, 0.4) !important;
    background: rgba(102, 126, 234, 0.2) !important;
}

/* Desktop + all viewports: filter picker scrollable so all options are reachable */
.feed-overlay-dropdown {
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Mobile: compact so bottom options show; position is set by JS per-feed so it stays on screen */
@media (max-width: 768px) {
    .feed-overlay-dropdown {
        max-width: calc(100vw - 16px) !important;
        min-width: 80px !important;
        padding: 2px !important;
        max-height: 65vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
    }
    .feed-overlay-dropdown .feed-overlay-option {
        padding: 2px 5px !important;
        margin: 0 !important;
        font-size: 9px !important;
        min-height: 0 !important;
        line-height: 1.15 !important;
    }
}

/* Portrait: make filter picker scrollable so all options are reachable */
@media (orientation: portrait) and (max-width: 768px) {
    .feed-overlay-dropdown {
        max-height: 60vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* Landscape (short viewport): make filter picker scrollable so all options are reachable */
@media (orientation: landscape) and (max-height: 600px) {
    .feed-overlay-dropdown {
        max-height: 55vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* Feed left-click context dropdown (PiP, PM, View profile + feed actions) – very compact */
.feed-context-dropdown {
    position: fixed;
    z-index: 10004;
    min-width: 120px;
    max-width: 160px;
    background: #1a1a1a;
    border: 1px solid #444;
    border-radius: 6px;
    padding: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}
.feed-context-dropdown-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border-bottom: 1px solid #333;
    background: rgba(255, 255, 255, 0.04);
}
.feed-context-dropdown-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    background: #2a2a2a;
    flex-shrink: 0;
}
.feed-context-dropdown-avatar-placeholder {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    font-weight: 700;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.feed-context-dropdown-username {
    font-weight: 600;
    color: #fff;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.feed-context-dropdown-actions {
    padding: 2px 0;
    max-height: 55vh;
    overflow-y: auto;
}
.feed-context-dropdown-option {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    padding: 3px 6px;
    border: none;
    background: none;
    color: #e0e0e0;
    font-size: 10px;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s;
}
.feed-context-dropdown-option:hover {
    background: rgba(255, 255, 255, 0.08);
}
.feed-context-dropdown-option:active {
    background: rgba(255, 255, 255, 0.12);
}
.feed-context-dropdown-option-icon {
    font-size: 12px;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}
.feed-context-dropdown-sep {
    margin: 1px 4px;
}
.feed-context-dropdown-sub {
    background: #1a1a1a;
    border: 1px solid #444;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}
.feed-context-dropdown-sub .feed-context-dropdown-option {
    padding: 3px 6px;
    font-size: 10px;
}
.feed-context-dropdown-sub .feed-context-dropdown-option--selected {
    border: 1px solid rgba(102, 126, 234, 0.95);
    border-radius: 4px;
    background: rgba(102, 126, 234, 0.2);
    box-shadow: 0 0 0 1px rgba(102, 126, 234, 0.3);
}

/* Portrait: user list scrollable with visible scrollbar when many users */
@media (orientation: portrait) {
    #user-list-container #user-list {
        max-height: min(250px, 45vh) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
}

/* Landscape: user list scrollable with visible scrollbar when many users */
@media (orientation: landscape) and (max-height: 600px) {
    #user-list-container #user-list {
        max-height: min(250px, 50vh) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
}

/* Bottom right area: eye (standalone) + volume pill (speaker only) - align to bottom so eye doesn't move when pill expands */
.video-bottom-right-controls {
    position: absolute;
    bottom: 30px;
    right: 10px;
    display: flex;
    flex-direction: row;
    z-index: 16;
    pointer-events: auto;
    align-items: flex-end;
    gap: 6px;
    z-index: 10;
}
/* Volume control - rounded rectangle so it fits inside tile border (no pill overhang) */
.video-volume-control {
    position: absolute;
    bottom: 30px;
    right: 10px;
    display: flex;
    flex-direction: column-reverse; /* Reverse order so slider appears above button */
    align-items: center;
    gap: 4px;
    background: rgba(0, 0, 0, 0.8);
    padding: 4px;
    border-radius: 6px;
    width: auto;
    min-height: auto;
    height: auto;
    z-index: 16;
    pointer-events: auto;
    opacity: 0.9;
    transition: opacity 0.2s, height 0.2s;
    transform-origin: bottom center;
    overflow: visible;
}
/* Invisible hover bridge above the pill so moving cursor to slider doesn’t lose hover */
.video-volume-control::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 90px;
    margin-bottom: -4px;
    z-index: 24;
    pointer-events: auto;
}
/* When inside bottom-right wrapper, positioning comes from wrapper */
.video-bottom-right-controls .video-volume-control {
    position: static;
    bottom: auto;
    right: auto;
}

.video-volume-control.volume-expanded {
    height: 98px;
    max-height: 98px;
    padding: 6px 8px 4px 8px; /* same bottom as collapsed so icon row doesn't move when expanded */
}

/* Desktop: Position bottom-right wrapper and volume at corner; eye/speaker fixed size so nothing moves on click */
@media (min-width: 769px) {
    .video-bottom-right-controls {
        bottom: 5px;
        right: 5px;
    }
    .video-volume-control {
        bottom: 5px;
        right: 5px;
    }
    /* Fixed size so eye never moves when speaker is clicked; no bottom padding so eye at bottom; slightly larger eye */
    .video-bottom-right-controls .hide-video-btn,
    .video-bottom-right-controls .video-eye-standalone {
        box-sizing: border-box !important;
        width: 28px !important;
        min-width: 28px !important;
        height: 28px !important;
        min-height: 28px !important;
        padding-bottom: 0 !important;
        font-size: 14px !important;
    }
    /* Subtle pushed-in look when eye button is active (desktop) */
    .video-bottom-right-controls .hide-video-btn:active,
    .video-bottom-right-controls .video-eye-standalone:active {
        background: rgba(255, 255, 255, 0.12) !important;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4) !important;
    }
}

.video-wrapper:hover .video-volume-control {
    opacity: 1;
}

.volume-icon-btn {
    font-size: 16px;
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

/* Speaker row inside the volume pill */
.video-volume-control .volume-icon-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    flex-shrink: 0;
}
.video-volume-control .volume-icon-row .volume-icon-btn,
.video-volume-control .volume-icon-row .hide-video-btn {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    line-height: 1;
    flex-shrink: 0;
}
.video-volume-control .volume-icon-row .volume-icon-btn {
    background: rgba(0, 0, 0, 0.7);
    border-radius: 3px;
}
.video-volume-control .volume-icon-row .hide-video-btn {
    background: rgba(0, 0, 0, 0.7);
    border-radius: 3px;
}
.video-volume-control .hide-video-btn {
    margin: 0;
}

.volume-icon-btn:hover {
    transform: scale(1.1);
}

/* When showing percentage in place of speaker (after sliding) */
.video-volume-control.volume-show-percentage .volume-icon-btn {
    display: none !important;
}
.video-volume-control .volume-percentage-badge {
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: white;
    cursor: pointer;
    padding: 0;
    min-width: 32px;
    height: 32px;
    line-height: 1;
    border: none;
    background: none;
    flex-shrink: 0;
}
.video-volume-control.volume-show-percentage .volume-percentage-badge {
    display: flex;
}
.video-volume-control.volume-show-percentage .volume-percentage-badge:hover {
    opacity: 0.9;
}

.video-volume-control.volume-expanded {
    padding: 8px 8px 4px 8px;
}

.video-volume-control .volume-slider {
    display: none;
}

.video-volume-control.volume-expanded .volume-slider,
.video-volume-control:hover .volume-slider,
.video-volume-control.volume-hover-sticky .volume-slider {
    display: flex;
}
.video-volume-control.volume-expanded,
.video-volume-control.volume-hover-sticky {
    padding: 6px 8px 4px 8px;
}
.video-volume-control.volume-expanded,
.video-volume-control.volume-hover-sticky {
    height: 98px;
    max-height: 98px;
}

/* No percentage above slider – we show percentage in the badge at bottom instead */
/* Expand container on hover so slider is visible (same as volume-expanded) */
.video-volume-control:hover {
    height: 98px;
    max-height: 98px;
    padding: 6px 8px 4px 8px;
}

.volume-percentage {
    font-size: 10px;
    color: white;
    font-weight: 600;
    min-height: 12px;
    text-align: center;
    width: 100%;
}

.volume-slider {
    flex: 0 0 auto;
    width: 10px;
    height: 62px;
    max-height: 62px;
    min-height: 62px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    outline: none;
    cursor: pointer;
    writing-mode: vertical-lr; /* Standard vertical writing mode */
    direction: rtl; /* Reverse direction so 0 is at bottom, 100 at top */
    padding: 4px 0; /* Bigger touch area */
    box-sizing: content-box;
}

/* Larger thumb for easier touch */
.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    background: #667eea;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s;
    margin: 0 -6px; /* Extend hit area into track */
}

.volume-slider::-webkit-slider-thumb:hover {
    background: #5568d3;
}

.volume-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    background: #667eea;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    transition: background 0.2s;
}

.volume-slider::-moz-range-thumb:hover {
    background: #5568d3;
}

/* Settings panel: Output Volume slider horizontal (left to right) */
.media-controls-panel #settings-output-volume,
.media-controls-panel .volume-slider-wrap .volume-slider {
    writing-mode: horizontal-tb;
    direction: ltr;
    width: 120px;
    min-width: 120px;
    height: 8px;
    max-height: 8px;
    min-height: 8px;
    padding: 0 4px;
}
.media-controls-panel .volume-slider-wrap .volume-slider::-webkit-slider-thumb {
    margin: 0 -6px;
}
.media-controls-panel .volume-slider-wrap .volume-slider::-moz-range-thumb {
    /* horizontal track – thumb same as global */
}

#local-video-container {
    border: none;
    position: relative;
    z-index: 1;
}

/* Mobile: hide local video container until user has camera up (avoids black box) */
@media (max-width: 768px) {
    #local-video-container:not(.local-cam-ready) {
        display: none !important;
    }
}

.video-placeholder {
    width: 100%;
    height: 100%;
    background: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #666;
    font-size: 14px;
}

.block-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #666;
    font-size: 14px;
}

.muted-indicator {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 11px;
    z-index: 10;
}

/* Top Control Bar */
.top-controls {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    width: auto;
    max-width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.top-controls.show {
    opacity: 1;
    visibility: visible;
}

/* Ensure all top control buttons are visible when top-controls is shown - all buttons treated equally */
.top-controls.show .top-control-btn {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.top-control-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
    user-select: none;
}

.top-control-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.top-control-btn:active {
    transform: translateY(0px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* Mute-all dropdown: volume bar below the mute button */
.mute-all-dropdown-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}
/* Invisible bridge so hover isn't lost when moving from button to dropdown */
.mute-all-dropdown-wrap::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 10px;
}
/* Fullscreen and mute (speaker) – identical size and shape so they match */
.top-controls #app-fullscreen-btn,
.top-controls #mute-all-btn,
.mute-all-dropdown-wrap #mute-all-btn {
    flex-shrink: 0;
    width: 36px;
    height: 32px;
    min-width: 36px;
    min-height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    box-sizing: border-box;
}
.mute-all-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 2px;
    padding: 10px 14px;
    background: rgba(30, 30, 40, 0.98);
    border: 1px solid rgba(102, 126, 234, 0.4);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    min-width: 140px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    z-index: 1000000;
}
.mute-all-dropdown-wrap:hover .mute-all-dropdown,
.mute-all-dropdown-wrap.open .mute-all-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.mute-all-dropdown-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #aaa;
    margin-bottom: 6px;
}
.master-volume-slider {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    outline: none;
}
.master-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.master-volume-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* Ensure My Room button matches other top control buttons exactly (same size as home/emoji buttons) */
#my-room-btn.top-control-btn {
    padding: 8px 16px !important; /* Reduced padding to match emoji button size */
    font-size: 10px !important; /* Smaller font to match emoji button visual size */
    font-weight: 600 !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    border: none !important;
    cursor: pointer !important;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35) !important;
    user-select: none !important;
    min-width: auto !important;
    max-width: fit-content !important;
    width: auto !important;
    height: auto !important;
    line-height: 1.1 !important; /* Allow 2 lines with tight spacing */
    white-space: normal !important; /* Allow text to wrap to 2 lines */
    word-break: break-word !important;
    overflow: visible !important;
    /* Match exact height of emoji buttons */
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    text-align: center !important;
}

#my-room-btn.top-control-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
}

#my-room-btn.top-control-btn:active {
    transform: translateY(0px) !important;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4) !important;
}

/* Top Control Bar */
.top-controls {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    width: auto;
    max-width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.top-controls.show {
    opacity: 1;
    visibility: visible;
}

/* Base styling for all top control buttons - ensures no overlaying, all buttons identical */
.top-control-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
    user-select: none;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    margin: 0;
    display: block;
}

.top-control-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.top-control-btn:active {
    transform: translateY(0px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
}

/* Broadcast Buttons */
.bottom-controls {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    width: auto;
    max-width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Ensure top and bottom controls are visible even in fullscreen mode */
:fullscreen .top-controls,
:-webkit-full-screen .top-controls,
:-moz-full-screen .top-controls,
:-ms-fullscreen .top-controls,
:fullscreen .bottom-controls,
:-webkit-full-screen .bottom-controls,
:-moz-full-screen .bottom-controls,
:-ms-fullscreen .bottom-controls {
    z-index: 999999 !important;
    position: fixed !important;
}

/* Top controls show class works in fullscreen too (via JavaScript hover events) */
.top-controls.show {
    opacity: 1 !important;
    visibility: visible !important;
}

.bottom-controls.show {
    opacity: 1;
    visibility: visible;
}

/* Hide media/broadcast bar until user clicks Verify */
/* Verify modal + 18+ pre-join gate (body-level) */
@keyframes verify-spin {
    to { transform: rotate(360deg); }
}
.verify-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 3000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.85);
}
.verify-modal-card {
    background: #2a2a2a;
    padding: 32px 28px;
    border-radius: 12px;
    max-width: 400px;
    width: 90%;
    border: 2px solid #667eea;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    text-align: center;
}
.verify-display {
    opacity: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid rgba(102, 126, 234, 0.4);
    border-top-color: #667eea;
    animation: verify-spin 0.7s linear infinite;
    margin: 0 auto 20px;
}
.verify-modal.age-gate-mode .verify-display,
.verify-modal.room-intro-once-mode .verify-display,
.verify-modal.room-verify-mode .verify-display {
    display: none;
}
.verify-modal.refresh-verify-mode .verify-display {
    display: block;
    opacity: 1;
}
.verify-modal.refresh-verify-mode .verify-title,
.verify-modal.refresh-verify-mode .verify-message,
.verify-modal.refresh-verify-mode .verify-guest-skip-tip {
    display: none !important;
}
.verify-title {
    margin: 0 0 12px;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
}
.verify-message {
    display: none;
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
    margin: 0 0 16px;
    line-height: 1.5;
}
.verify-modal.age-gate-mode .verify-message,
.verify-modal.room-intro-once-mode .verify-message,
.verify-modal.room-verify-mode .verify-message {
    display: block;
}
.verify-guest-skip-tip {
    display: none;
    margin: 0 0 14px;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.45;
    color: #c4b5fd;
    background: rgba(124, 92, 255, 0.12);
    border: 1px solid rgba(124, 92, 255, 0.3);
    border-radius: 8px;
}
.verify-modal.age-gate-mode .verify-guest-skip-tip,
.verify-modal.room-verify-mode .verify-guest-skip-tip {
    display: block;
}
.verify-btn {
    display: none;
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    margin-bottom: 12px;
}
.verify-btn:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}
.verify-tips {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    line-height: 1.45;
}
.verify-tips-age {
    margin-top: 8px;
    color: rgba(255, 200, 120, 0.9);
    font-size: 11px;
}

.bottom-controls.hidden-until-verify {
    display: none !important;
}

/* Desktop app: hide in-page settings (sidebar has one) */
body.is-desktop-client #video-settings-container {
    display: none !important;
}

/* Desktop app: use web sidebar (same as site); shell sidebar is hidden when app is visible */
body.is-desktop-client {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
/* Always show web left sidebar in desktop client (override mobile @media hide) */
body.is-desktop-client .web-left-sidebar {
    display: flex !important;
}
body.is-desktop-client .web-left-sidebar.hidden {
    position: absolute !important;
    left: -9999px !important;
    width: 0 !important;
    min-width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}
/* Show button stays visible in desktop client so user can collapse/expand web sidebar */
body.is-desktop-client .web-left-sidebar-show-btn,
body.is-desktop-client #web-left-sidebar-show-btn {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
}
body.is-desktop-client .app-container {
    flex: 1 1 100% !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Desktop app: hide profile UI in sidebar and rooms to avoid conflict with guest/login flow */
body.is-desktop-client .settings-nav-btn[data-section="profile"],
body.is-desktop-client .settings-nav-item[data-section="profile"],
body.is-desktop-client #profile-section,
body.is-desktop-client #profile-settings {
    display: none !important;
}

#start-broadcast-container,
#stop-broadcast-container,
#video-settings-container,
#youtube-video-container,
#microphone-container {
    position: static;
    display: flex;
    align-items: center;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Text buttons - rectangular/pill-shaped */
#start-broadcast-btn,
#stop-broadcast-btn,
#video-settings-btn,
#youtube-video-btn,
#screen-share-container #screen-share-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: auto;
    width: auto;
    height: auto;
    min-height: 44px;
    margin: 0;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4),
                0 0 10px rgba(118, 75, 162, 0.3);
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    gap: 6px;
}

/* Mic button - circular (icon only), blue when inactive */
#microphone-btn {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    border: none;
    padding: 0;
    font-size: 28px;
    font-weight: 600;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 56px;
    height: 56px;
    min-width: 56px;
    min-height: 56px;
    margin: 0;
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4),
                0 0 15px rgba(37, 99, 235, 0.3);
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
    line-height: 1;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

#microphone-btn > * {
    position: relative;
    z-index: 1;
}

#start-broadcast-btn {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

#start-broadcast-btn.broadcast-cancelled {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    border-color: #dc2626 !important;
    color: #fff !important;
}

#stop-broadcast-btn {
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
}

#video-settings-btn {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
}

#youtube-video-btn {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
}

#start-broadcast-btn:hover,
#stop-broadcast-btn:hover,
#video-settings-btn:hover,
#youtube-video-btn:hover,
#screen-share-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6),
                0 0 15px rgba(118, 75, 162, 0.4);
}

#microphone-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s;
    z-index: 0;
    pointer-events: none;
}

#microphone-btn:hover::before {
    left: 100%;
}

#microphone-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 12px 30px rgba(59, 130, 246, 0.6),
                0 0 25px rgba(37, 99, 235, 0.5);
}

@keyframes mic-pulse {
    0%, 100% {
        transform: translateY(-1px) scale(1.05);
        box-shadow: 0 8px 25px rgba(34, 197, 94, 0.6), 0 0 20px rgba(34, 197, 94, 0.4);
    }
    50% {
        transform: translateY(-1px) scale(1.12);
        box-shadow: 0 8px 30px rgba(34, 197, 94, 0.8), 0 0 35px rgba(34, 197, 94, 0.6);
    }
}

#microphone-btn:active,
#microphone-btn.mic-active {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    transition: background 0.2s ease;
}
#microphone-btn.mic-active {
    animation: mic-pulse 0.9s ease-in-out infinite;
}

#microphone-btn.mic-inactive {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    transform: scale(1);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4),
                0 0 15px rgba(37, 99, 235, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Make mic container relative so label can float without affecting height */
/* Desktop: mic sits in bottom control bar. Mobile: when visible, CSS positions it fixed above sidebar (see @media). */
#microphone-container {
    position: relative;
    display: inline-flex;
    opacity: 1 !important;
    visibility: visible !important;
    align-items: center;
    flex-direction: column;
}

/* Desktop: mic stays in bottom control bar (no fixed positioning). Mobile only: see @media below. */

/* Mic open checkbox styling */
.mic-open-label {
    position: absolute;
    top: -6px;
    right: -10px;
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 9px;
    color: #ccc;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.65);
    line-height: 1;
}

/* Hide mic open label when room doesn't allow open mic */
.mic-open-label.hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

#mic-open-checkbox {
    margin: 0;
    accent-color: #22c55e;
    transform: scale(0.75);
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

/* While reordering feeds, let pointer hit the wrapper so dragover/drop resolve (iframes are cross-origin). */
body.video-feed-reorder-dragging .youtube-video-wrapper .youtube-media-stack iframe {
    pointer-events: none !important;
}

/* Drag rail: bottom overlay (no layout height) — grip + “Drag to reorder” on hover */
.youtube-video-wrapper > .video-youtube-drag-rail {
    position: absolute;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    height: 22px;
    z-index: 35;
    cursor: grab;
    box-sizing: border-box;
    background: transparent;
    transition: background 0.12s ease;
}
.youtube-video-wrapper > .video-youtube-drag-rail:hover {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.18) 100%);
}
/* Six-dot grip — hidden until rail hover (cursor still grab on strip) */
.youtube-video-wrapper > .video-youtube-drag-rail::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 3px;
    height: 3px;
    margin-left: -4.5px;
    margin-top: -6.5px;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
    background: rgba(255, 255, 255, 0.85);
    box-shadow:
        6px 0 0 rgba(255, 255, 255, 0.85),
        0 5px 0 rgba(255, 255, 255, 0.85),
        6px 5px 0 rgba(255, 255, 255, 0.85),
        0 10px 0 rgba(255, 255, 255, 0.85),
        6px 10px 0 rgba(255, 255, 255, 0.85);
    pointer-events: none;
}
.youtube-video-wrapper > .video-youtube-drag-rail:hover::before {
    opacity: 1;
}
.youtube-video-wrapper > .video-youtube-drag-rail:active {
    cursor: grabbing;
}
.youtube-video-wrapper > .video-youtube-drag-rail:active::before {
    opacity: 1;
    background: rgba(199, 210, 254, 0.98);
    box-shadow:
        6px 0 0 rgba(199, 210, 254, 0.98),
        0 5px 0 rgba(199, 210, 254, 0.98),
        6px 5px 0 rgba(199, 210, 254, 0.98),
        0 10px 0 rgba(199, 210, 254, 0.98),
        6px 10px 0 rgba(199, 210, 254, 0.98);
}
/* Label above the bottom strip (into video), only when hovering the rail */
.youtube-video-wrapper > .video-youtube-drag-rail::after {
    content: 'Drag to reorder';
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    top: auto;
    transform: translateX(-50%);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.82);
    color: rgba(255, 255, 255, 0.92);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
    z-index: 36;
}
.youtube-video-wrapper > .video-youtube-drag-rail:hover::after {
    opacity: 1;
}

.youtube-video-wrapper {
    position: relative;
    background: #000;
    overflow: visible;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 16 / 9;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    align-self: center;
    justify-self: center;
}

/* Iframe fills stack; clip rounded corners here so wrapper can overflow:visible for drag tooltip */
.youtube-media-stack {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 10px;
}

.youtube-media-stack iframe {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    border: none;
}

/* Playlist / embed: hide (+ SoundCloud volume) bottom-right over video */
.youtube-media-stack .video-label-bar {
    position: absolute;
    top: auto;
    right: 2px;
    bottom: 2px;
    left: auto;
    width: auto;
    max-width: calc(100% - 8px);
    z-index: 40;
    pointer-events: auto;
    padding: 4px 2px 4px 6px;
    min-height: 0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.youtube-media-stack .video-label-bar .video-bottom-right-controls {
    position: static !important;
    transform: none !important;
    top: auto !important;
    bottom: auto !important;
    right: auto !important;
    margin: 0;
}

/* SoundCloud only: constrain height so it matches other grid tiles (iframe can't force wrapper taller) */
.youtube-video-wrapper.media-embed-soundcloud {
    height: auto;
    max-height: 280px !important;
    display: flex;
    flex-direction: column;
}

.youtube-video-wrapper.media-embed-soundcloud .youtube-media-stack {
    position: relative;
    min-height: 120px;
    flex: 1 1 auto;
}

/* Twitch JS player mount (channel/VOD) — player injects its own iframe */
.youtube-video-wrapper.media-embed-twitch .twitch-player-mount,
.youtube-video-wrapper.media-embed-twitch .twitch-player-mount iframe {
    width: 100% !important;
    height: 100% !important;
    min-width: 0;
    min-height: 0;
    border: none;
}

.youtube-video-wrapper.media-embed-soundcloud .youtube-media-stack iframe {
    position: absolute !important;
    left: 0;
    top: 0;
    width: 100% !important;
    height: 100% !important;
}

.youtube-video-wrapper.youtube-active {
    border: 2px solid #e74c3c;
    box-shadow: 0 0 10px rgba(231, 76, 60, 0.5);
}

/* Screen share tiles (remote + local): same glow border as “now playing” media feed */
/* Screen share: orange glow when hears audio (.speaking) - see rule above */

.youtube-video-wrapper:not(.youtube-active) {
    opacity: 0.7;
}

.youtube-video-wrapper:not(.youtube-active):hover {
    opacity: 1;
}

.youtube-play-btn {
    background: rgba(39, 174, 96, 0.8) !important;
}

.youtube-pause-btn {
    background: rgba(241, 196, 15, 0.8) !important;
}

.waiting {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #666;
    font-size: 18px;
    display: none;
    z-index: 100;
}

.waiting.active {
    display: block;
}

/* Media Controls: full-screen dimmed backdrop; centered modal (~90% viewport) */
#media-controls.media-controls-panel {
    position: fixed;
    inset: 0;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: min(24px, 4vw);
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
/* Inner card — most of the page, not edge-to-edge */
#media-controls .media-controls-modal {
    width: min(92vw, 960px);
    height: min(88vh, 820px);
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(28, 28, 32, 0.98) 0%, rgba(18, 18, 22, 0.99) 100%);
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
/* Profile settings panel (separate id) — keep full overlay or match; user asked settings — profile unchanged class */
.media-controls-panel#profile-settings {
    position: fixed;
    inset: 0;
    z-index: 1001;
    background: linear-gradient(135deg, rgba(28, 28, 32, 0.98) 0%, rgba(22, 22, 26, 0.99) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    border: none;
}

/* Settings content scrollbar */

/* Settings panel header + layout */
.media-controls-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    padding-bottom: 10px;
    flex-shrink: 0;
}

.media-controls-header h3 {
    color: #fff;
    font-size: 16px;
    margin: 0;
}

/* Settings sections: compact spacing */
.settings-section {
    margin-bottom: 8px;
}
.settings-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    cursor: pointer;
    background: rgba(0,0,0,0.2);
    border-radius: 6px;
    margin-bottom: 4px;
    user-select: none;
}
.settings-section-header .section-title {
    font-size: 13px;
    color: #e2e8f0;
}
.settings-section-header .section-toggle {
    font-size: 10px;
    color: #94a3b8;
}
.settings-section-content {
    padding-left: 4px;
    padding-right: 4px;
    padding-bottom: 4px;
}

/* Settings Navigation Buttons */
.settings-nav-buttons {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

/* Legacy nav btn (unused, kept for compat) */
.settings-nav-btn { display: none; }

/* === Desktop-client style settings layout === */
.media-controls-panel .settings-layout {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    margin: 0;
}
.media-controls-panel .settings-sidebar {
    width: 160px;
    flex-shrink: 0;
    background: rgba(0,0,0,0.25);
    border-right: 1px solid rgba(255,255,255,0.06);
    padding: 8px 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.media-controls-panel .settings-nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 14px;
    border: none;
    background: transparent;
    color: #aaa;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    font-family: inherit;
}
.media-controls-panel .settings-nav-item:hover {
    background: rgba(255,255,255,0.06);
    color: #fff;
}
.media-controls-panel .settings-nav-item.active {
    background: rgba(102, 126, 234, 0.15);
    color: #667eea;
    font-weight: 500;
    box-shadow: inset 3px 0 0 #667eea;
}
.media-controls-panel .settings-nav-item .nav-icon {
    font-size: 15px;
    width: 20px;
    text-align: center;
}
/* FAQ row: link styled like sidebar buttons; opens /tools/faq in a new tab */
.media-controls-panel a.settings-nav-item.settings-nav-external {
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
}
.media-controls-panel .settings-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 16px 20px;
    min-height: 0;
    max-width: 520px;
}
.media-controls-panel .settings-content::-webkit-scrollbar { width: 6px; }
.media-controls-panel .settings-content::-webkit-scrollbar-track { background: transparent; }
.media-controls-panel .settings-content::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
.media-controls-panel .settings-content::-webkit-scrollbar-thumb:hover { background: #555; }

/* Web settings: camera preview (same idea as desktop shell AV) */
.media-controls-panel .settings-video-preview-wrap.video-preview-wrap,
.media-controls-panel .video-preview-wrap {
    position: relative;
    width: 100%;
    max-width: 320px;
    aspect-ratio: 16 / 9;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 4px;
}
.media-controls-panel .video-preview {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    vertical-align: top;
}
.media-controls-panel .video-preview-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    font-size: 13px;
    text-align: center;
    padding: 12px;
    background: rgba(0, 0, 0, 0.35);
    pointer-events: none;
}
.media-controls-panel .video-preview-wrap.has-stream .video-preview-placeholder {
    display: none;
}

.media-controls-panel .settings-tab-panel {
    display: none;
    flex-direction: column;
    gap: 12px;
}
.media-controls-panel .settings-tab-panel.active {
    display: flex;
}
.media-controls-panel .settings-tab-panel .settings-section {
    margin-bottom: 0;
    background: rgba(255,255,255,0.04);
    border-radius: 10px;
    padding: 12px 16px;
    border: 1px solid rgba(255,255,255,0.06);
}
.media-controls-panel .settings-section-title {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.media-controls-panel .setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    gap: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.media-controls-panel .setting-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.media-controls-panel .setting-row:first-child {
    padding-top: 0;
}
.media-controls-panel .setting-row-stack {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}
.media-controls-panel .setting-info {
    flex: 1;
    min-width: 0;
}
.media-controls-panel .setting-label {
    font-size: 13px;
    color: #e2e8f0;
    font-weight: 500;
}
.media-controls-panel .setting-desc {
    font-size: 11px;
    color: #888;
    margin-top: 2px;
}
.media-controls-panel .setting-msg {
    font-size: 11px;
    color: #888;
    margin-top: 4px;
}
/* Fixed-width controls like client – no stretch */
.media-controls-panel .setting-input,
.media-controls-panel .settings-tab-panel select.device-select {
    width: 180px;
    min-width: 140px;
    max-width: 180px;
    flex-shrink: 0;
    padding: 8px 10px;
    font-size: 13px;
    background: #1e1e28;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    color: #e2e8f0;
}
.media-controls-panel .setting-row-stack .setting-input,
.media-controls-panel .setting-row-stack select.device-select,
.media-controls-panel .setting-row-stack .setting-textarea {
    width: 100% !important;
    max-width: none;
}
.media-controls-panel .settings-quick-actions {
    margin-bottom: 6px;
}
.media-controls-panel .settings-quick-actions .control-btn {
    width: auto;
    min-width: 120px;
}
/* Compact toggle: slider + ON/OFF badge as one unit (no overflow) */
.media-controls-panel .setting-row .toggle-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    min-width: 0;
    flex-shrink: 0;
    flex-direction: row-reverse; /* slider first (left), status badge next to it (right) */
}
.media-controls-panel .setting-row .toggle-switch .toggle-label {
    display: none;
}
.media-controls-panel .setting-row .toggle-switch .toggle-status {
    margin-left: 0;
    flex-shrink: 0;
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 6px;
    min-width: 28px;
    text-align: center;
}
.media-controls-panel .setting-row .toggle-switch .slider-round {
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}
.media-controls-panel .setting-row .toggle-switch .slider-round::before {
    width: 18px;
    height: 18px;
    left: 2px;
    bottom: 2px;
}
.media-controls-panel .setting-row .toggle-switch input:checked + .slider-round::before {
    transform: translateX(20px);
}

/* Voice tab: same toggle unit (slider + status) as other setting-rows */
#voice-section .setting-row .toggle-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    min-width: 0;
    flex-shrink: 0;
    flex-direction: row-reverse;
}
#voice-section .setting-row .toggle-switch .toggle-status {
    margin-left: 0;
    flex-shrink: 0;
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 6px;
    min-width: 28px;
    text-align: center;
}
#voice-section .setting-row .toggle-switch .slider-round {
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

/* Settings header: no border (sidebar handles separation) */
.media-controls-panel .control-group {
    margin-bottom: 6px;
}
.media-controls-panel .control-group label {
    margin-bottom: 3px;
    font-size: 11px;
}
.media-controls-panel .device-select {
    padding: 6px 8px;
    font-size: 11px;
}
.media-controls-panel .control-btn {
    padding: 8px;
    margin-bottom: 6px;
    font-size: 11px;
}
.media-controls-panel .control-btn-apply {
    margin-top: 6px;
    padding: 8px;
    font-size: 12px;
    min-height: 32px;
}
.media-controls-panel small {
    margin-top: 2px !important;
    font-size: 9px !important;
}
.media-controls-panel .toggle-switch .toggle-status {
    font-size: 10px;
    padding: 3px 8px;
    margin-left: 0;
    border-radius: 6px;
    min-width: 28px;
    text-align: center;
}
.media-controls-panel .toggle-switch .toggle-label {
    font-size: 11px;
}
/* Control-group toggles: label | [slider][status] as one unit */
.media-controls-panel .control-group .toggle-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}
.media-controls-panel .control-group .toggle-switch .toggle-label { order: 0; }
.media-controls-panel .control-group .toggle-switch .slider-round { order: 1; flex-shrink: 0; }
.media-controls-panel .control-group .toggle-switch .toggle-status { order: 2; }

.close-btn {
    background: #3a3a3a;
    color: #fff;
    border: 1px solid #555;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    padding: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s;
    flex-shrink: 0;
}

.close-btn:hover {
    background: #ef4444;
    color: #fff;
    border-color: #dc2626;
    transform: scale(1.1);
}

.control-group {
    margin-bottom: 10px;
}

.control-group label {
    display: block;
    font-size: 12px;
    color: #999;
    margin-bottom: 5px;
}

.device-select {
    width: 100%;
    padding: 8px;
    background: #1e1e28;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 6px;
    color: #fff;
    font-size: 12px;
    color-scheme: dark;
}

.device-select option {
    background: #1e1e28;
    color: #fff;
}

.device-select:focus {
    outline: none;
    border-color: #667eea;
}

.control-btn {
    width: 48%;
    margin-right: 4%;
    margin-bottom: 8px;
    padding: 10px;
    font-size: 12px;
}

.control-btn-apply {
    width: 100%;
    background: #27ae60;
    margin-top: 10px;
}

.control-btn-apply:hover {
    background: #229954;
}

/* Room chat – warm theme (amber/gold) so it’s clearly different from Private Messages */
#chat-messages {
    flex: 1;
    overflow-y: auto; /* Chat messages should scroll */
    overflow-x: hidden;
    margin-bottom: 0;
    padding: 6px;
    background: #1a1a1a;
    border-radius: 8px;
    border: 1px solid rgba(102, 126, 234, 0.5);
    box-shadow: 0 0 12px rgba(102, 126, 234, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.03);
    min-height: 350px; /* 50px shorter (was 400px) */
    scrollbar-width: thin;
    scrollbar-color: #f59e0b #1a1a1a;
}
#chat-messages::-webkit-scrollbar {
    width: 8px;
}
#chat-messages::-webkit-scrollbar-track {
    background: #1a1a1a;
    border-radius: 4px;
}
#chat-messages::-webkit-scrollbar-thumb {
    background: #f59e0b;
    border-radius: 4px;
}
#chat-messages::-webkit-scrollbar-thumb:hover {
    background: #d97706;
}

/* Chrome-specific fix - reduce chat height on desktop (Chrome renders taller than Edge) */
@supports (-webkit-appearance: none) and (not (-moz-appearance: none)) {
    #chat-messages {
        min-height: 330px !important; /* 50px shorter (was 380px) */
    }
}

.chat-message {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    position: relative;
    margin-bottom: 2px;
    padding: 2px 5px;
    background: #2a2a2a;
    border-radius: 4px;
    font-size: 11px;
    line-height: 1.25;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: visible;
}
/* Room admin: delete message – show X on hover only */
.chat-message-admin-delete {
    position: absolute;
    top: 2px;
    right: 4px;
    z-index: 3;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: rgba(127, 29, 29, 0.85);
    color: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s, background 0.15s;
}
.chat-message-has-delete:hover .chat-message-admin-delete {
    opacity: 1;
    pointer-events: auto;
}
.chat-message-admin-delete:hover {
    background: #b91c1c;
}
.chat-message-has-delete .chat-message-line {
    padding-right: 22px;
}
.chat-message-reactions {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 4px;
    width: 100%;
    min-width: 0;
    margin-top: 2px;
    align-items: flex-start;
    overflow: visible;
    flex: 0 0 auto;
}
.chat-message-reaction-pills {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    overflow: hidden;
}
.chat-reaction-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-radius: 999px;
    font-size: 10px;
    width: 44px;
    min-width: 44px;
    height: 20px;
    padding: 0;
    cursor: pointer;
    flex: 0 0 auto;
}
.chat-reaction-pill.mine {
    border-color: rgba(244, 114, 182, 0.85);
    background: rgba(244, 114, 182, 0.2);
}
.chat-message-reaction-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    white-space: nowrap;
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    max-height: 0;
    transition: opacity 0.15s ease;
}
.chat-message:hover .chat-message-reaction-actions,
.chat-message:focus-within .chat-message-reaction-actions {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    max-height: none;
    overflow: visible;
}
@media (hover: none) {
    .chat-message .chat-message-reaction-actions {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        max-height: none;
        overflow: visible;
    }
}
.chat-reaction-action-btn {
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
    border-radius: 999px;
    width: 24px;
    min-width: 24px;
    height: 24px;
    padding: 0;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    box-sizing: border-box;
}
.chat-reaction-action-btn:hover,
.chat-reaction-pill:hover {
    background: rgba(255, 255, 255, 0.15);
}
.chat-reaction-picker {
    position: fixed;
    z-index: 100050;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    background: rgba(18, 18, 22, 0.98);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.chat-reaction-picker-btn {
    border: none;
    background: transparent;
    color: #fff;
    border-radius: 8px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 18px;
}
.chat-reaction-picker-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}
.chat-message.has-avatar {
    align-items: flex-start;
}
.chat-message.has-avatar .username {
    display: inline-flex !important;
    align-items: center !important;
}
/* Line wrapper: one inline content box so wrapped lines start at left (under username) */
.chat-message-line {
    flex: 0 1 auto;
    width: 100%;
    min-width: 0;
    display: block;
    overflow-wrap: break-word;
    word-break: break-word;
    overflow: visible;
    max-width: 100%;
}
.chat-message-line-content {
    display: inline;
    max-width: 100%;
    overflow: visible;
}
.chat-message-line-content .username,
.chat-message-line-content .message {
    display: inline !important;
    vertical-align: baseline;
}
.chat-message-line-content .message {
    overflow-wrap: break-word;
    word-break: normal;
    white-space: normal;
    margin-left: 2px;
    max-width: 100%;
}
/* Center link images shared in chat (image URL messages); keep inside container */
.chat-message-line-content .message img[alt="Shared image"] {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    box-sizing: border-box !important;
}
/* Center shared images in PM (same as chatroom) */
.pm-message-row-has-image {
    max-width: 100% !important;
    width: 100% !important;
}
.pm-message-row-has-image > div:first-child {
    width: 100% !important;
    max-width: 100% !important;
}
.pm-message-text.pm-message-has-image {
    width: 100% !important;
}
.pm-message-text img[alt="Shared image"] {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
/* Same gap for everyone; force break so first part stays on line 1 (avatar) */
.chat-message.has-avatar .chat-message-line-content .message {
    overflow-wrap: break-word;
    word-break: normal;
}
.chat-message.has-avatar .chat-message-line-content .username {
    display: inline-flex !important;
    align-items: center !important;
}
/* Avatar floated left so text flows beside then under it (proper wrap under avatar) */
.chat-message.has-avatar .chat-message-line-content {
    display: block;
}
/* Block so text wrap takes full width: first line beside avatar, rest goes under avatar */
.chat-message.has-avatar .chat-message-text-wrap {
    display: block;
}
/* Only center when single line */
.chat-message.has-avatar.message-single-line .chat-message-text-wrap {
    transform: translateY(calc((var(--chat-avatar-height, 48px) - 1.25em) / 2));
}
.chat-message.has-avatar .chat-message-avatar-col {
    float: left;
    width: var(--chat-avatar-offset, 50px);
    height: var(--chat-avatar-height, 48px);
    position: relative;
    margin-right: 2px;
}
.chat-message.has-avatar .chat-message-avatar-col img {
    position: absolute;
    left: 0;
    top: 0;
    object-fit: cover;
    border-radius: 50%;
    /* width/height from JS so avatar fully shows */
}
/* Guest avatar: grayscale tint to match guest username styling */
.chat-message.has-avatar .chat-message-avatar-col img.chat-message-avatar-guest {
    filter: grayscale(1) brightness(0.85);
    opacity: 0.9;
}
/* Bot avatar fallback (emoji when image fails) — same slot as img */
.chat-message.has-avatar .chat-message-avatar-col .chat-message-avatar-bot-emoji {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.chat-message.has-avatar .chat-message-avatar-col .chat-message-avatar-trivia-bot-emoji {
    background: rgba(167, 139, 250, 0.25);
    border-color: rgba(167, 139, 250, 0.4);
}
/* No-avatar: same break behavior so first row stays next to username */
.chat-message:not(.has-avatar) .chat-message-line-content .message {
    overflow-wrap: break-word;
    word-break: normal;
}

.chat-message .username {
    flex-shrink: 0;
    font-weight: 600;
    color: #667eea;
    margin-right: 0;
    font-size: 11px;
}

/* Room owner (admin) usernames - gold, stands out without rainbow */
.chat-message .username-admin {
    font-weight: 700;
    margin-right: 0;
    font-size: 11px;
    color: #fbbf24;
    text-shadow: 0 0 8px rgba(251, 191, 36, 0.6), 0 0 12px rgba(251, 191, 36, 0.3);
}

/* Super user username styling - gold, shade darker than admin, with glow */
.chat-message .username-super {
    font-weight: 700;
    margin-right: 0;
    font-size: 11px;
    color: #ca8a04;
    text-shadow: 0 0 8px rgba(202, 138, 4, 0.6), 0 0 12px rgba(202, 138, 4, 0.3);
}

/* Mod username styling - orange/amber */
.chat-message .username-mod {
    font-weight: 600;
    margin-right: 0;
    font-size: 11px;
    color: #f59e0b;
}

/* Broadcaster username styling - green */
.chat-message .username-broadcaster {
    font-weight: 600;
    margin-right: 0;
    font-size: 11px;
    color: #10b981;
}

/* Guest username styling - gray */
.chat-message .username-guest {
    font-weight: 600;
    margin-right: 0;
    font-size: 11px;
    color: #9ca3af;
}

@keyframes rainbow-flow {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 200% 50%;
    }
}

/* Rainbow animation for mass broadcast messages (entire message) */
.chat-message.mass-broadcast-message {
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.3);
}

.chat-message.mass-broadcast-message .message,
.chat-message.mass-broadcast-message .username {
    background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3, #ff0000);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: rainbow-flow 3s linear infinite;
    font-weight: 600;
}

/* Message when direct child (no-avatar / bot): flex so it can wrap on same row */
.chat-message > .message {
    flex: 1 1 0%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-break: break-word;
    text-align: left;
    color: #fff;
    font-size: 11px;
    line-height: 1.25;
}
.chat-message.has-avatar > .message {
    align-self: flex-start;
    text-align: left;
}
/* Fallback for .message not in line wrapper (e.g. room bot) - font-size from user setting in JS */
.chat-message .message {
    color: #fff;
    line-height: 1.25;
    text-align: left;
}
.chat-message .message::first-letter {
    text-transform: uppercase;
}

/* Room Bot: name always blue, message text white, distinct font */
.chat-message.room-bot-message .username,
.chat-message.room-bot-message .username-room-bot,
.chat-message.room-bot-message .message {
    font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    letter-spacing: 0.02em;
}
.chat-message.room-bot-message .username,
.chat-message.room-bot-message .username-room-bot {
    color: #3b82f6 !important;
}
.chat-message.room-bot-message .message {
    color: #22c55e !important;
}

/* Trivia Bot message and profile card - purple/violet style, distinct font */
.chat-message.trivia-bot-message .username,
.chat-message.trivia-bot-message .username-trivia-bot,
.chat-message.trivia-bot-message .message {
    font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    letter-spacing: 0.02em;
}
.chat-message.trivia-bot-message .username,
.chat-message.trivia-bot-message .username-trivia-bot {
    color: #a78bfa !important;
}
.chat-message.trivia-bot-message .message {
    color: #e2e8f0 !important;
}
.trivia-bot-profile-card-chat {
    border-color: rgba(167, 139, 250, 0.35);
    background: linear-gradient(145deg, #1e1a2a 0%, #15121c 50%, #0f0c14 100%);
}
.trivia-bot-profile-card-chat .trivia-bot-profile-card-bg {
    background: radial-gradient(ellipse 120% 80% at 20% 50%, rgba(167, 139, 250, 0.08) 0%, transparent 50%),
                radial-gradient(ellipse 80% 60% at 80% 50%, rgba(167, 139, 250, 0.05) 0%, transparent 45%);
}
.trivia-bot-profile-card-chat .trivia-bot-profile-card-avatar {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.25) 0%, rgba(139, 92, 246, 0.15) 100%);
    border-color: rgba(167, 139, 250, 0.4);
}
.trivia-bot-profile-card-chat .room-bot-profile-card-tagline {
    color: #c4b5fd;
}
.trivia-bot-profile-card-chat .trivia-bot-profile-card-badge {
    color: rgba(167, 139, 250, 0.95);
    background: rgba(167, 139, 250, 0.15);
    border-color: rgba(167, 139, 250, 0.35);
}
.profile-tooltip-bot:has(.trivia-bot-profile-card-chat) {
    border-color: rgba(167, 139, 250, 0.4);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(167, 139, 250, 0.2);
}

/* Toke Bot message and profile card - own amber/gold style (like Room Bot green, Trivia purple), distinct font */
.chat-message.toke-bot-message {
    border-left: 3px solid rgba(245, 158, 11, 0.5);
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.04) 0%, transparent 12%);
    border-radius: 0 8px 8px 0;
}
.chat-message.toke-bot-message .username,
.chat-message.toke-bot-message .username-toke-bot,
.chat-message.toke-bot-message .message {
    font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    letter-spacing: 0.02em;
}
.chat-message.toke-bot-message .username,
.chat-message.toke-bot-message .username-toke-bot {
    color: #f59e0b !important;
    font-weight: 600;
}
.chat-message.toke-bot-message .message {
    color: #e2e8f0 !important;
}

/* Chuck Norris bot - red/strong style, distinct font */
.chat-message.chuck-norris-message .username,
.chat-message.chuck-norris-message .username-chuck-norris,
.chat-message.chuck-norris-message .message {
    font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    letter-spacing: 0.02em;
}
.chat-message.chuck-norris-message .username,
.chat-message.chuck-norris-message .username-chuck-norris {
    color: #dc2626 !important;
    font-weight: 600;
}
.chat-message.chuck-norris-message .message {
    color: #fecaca !important;
}
.chat-message.chuck-norris-message {
    border-left: 3px solid rgba(220, 38, 38, 0.6);
    background: linear-gradient(90deg, rgba(220, 38, 38, 0.06) 0%, transparent 12%);
    border-radius: 0 8px 8px 0;
}

/* Bruce Lee bot - amber/gold style */
.chat-message.bruce-lee-message .username,
.chat-message.bruce-lee-message .username-bruce-lee,
.chat-message.bruce-lee-message .message {
    font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    letter-spacing: 0.02em;
}
.chat-message.bruce-lee-message .username,
.chat-message.bruce-lee-message .username-bruce-lee {
    color: #d97706 !important;
    font-weight: 600;
}
.chat-message.bruce-lee-message .message {
    color: #fde68a !important;
}
.chat-message.bruce-lee-message {
    border-left: 3px solid rgba(217, 119, 6, 0.6);
    background: linear-gradient(90deg, rgba(217, 119, 6, 0.06) 0%, transparent 12%);
    border-radius: 0 8px 8px 0;
}

/* Snapple Facts bot - green / apple style */
.chat-message.snapple-facts-message .username,
.chat-message.snapple-facts-message .username-snapple-facts,
.chat-message.snapple-facts-message .message {
    font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    letter-spacing: 0.02em;
}
.chat-message.snapple-facts-message .username,
.chat-message.snapple-facts-message .username-snapple-facts {
    color: #16a34a !important;
    font-weight: 600;
}
.chat-message.snapple-facts-message .message {
    color: #86efac !important;
}
.chat-message.snapple-facts-message {
    border-left: 3px solid rgba(22, 163, 74, 0.6);
    background: linear-gradient(90deg, rgba(22, 163, 74, 0.06) 0%, transparent 12%);
    border-radius: 0 8px 8px 0;
}

/* Roast Bot - orange / fire style */
.chat-message.roast-bot-message .username,
.chat-message.roast-bot-message .username-roast-bot,
.chat-message.roast-bot-message .message {
    font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    letter-spacing: 0.02em;
}
.chat-message.roast-bot-message .username,
.chat-message.roast-bot-message .username-roast-bot {
    color: #ea580c !important;
    font-weight: 600;
}
.chat-message.roast-bot-message .message {
    color: #fdba74 !important;
}
.chat-message.roast-bot-message {
    border-left: 3px solid rgba(234, 88, 12, 0.6);
    background: linear-gradient(90deg, rgba(234, 88, 12, 0.06) 0%, transparent 12%);
    border-radius: 0 8px 8px 0;
}

/* Giving Tree bot - green */
.chat-message.tree-bot-message .username,
.chat-message.tree-bot-message .username-tree-bot,
.chat-message.tree-bot-message .message {
    font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    letter-spacing: 0.02em;
}
.chat-message.tree-bot-message .username,
.chat-message.tree-bot-message .username-tree-bot {
    color: #22c55e !important;
    font-weight: 600;
}
.chat-message.tree-bot-message .message {
    color: #86efac !important;
}
.chat-message.tree-bot-message {
    border-left: 3px solid rgba(34, 197, 94, 0.6);
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.06) 0%, transparent 12%);
    border-radius: 0 8px 8px 0;
}

/* Mortal Kombat bot - dark red / fatality style */
.chat-message.mortal-kombat-message .username,
.chat-message.mortal-kombat-message .username-mortal-kombat,
.chat-message.mortal-kombat-message .message {
    font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    letter-spacing: 0.02em;
}
.chat-message.mortal-kombat-message .username,
.chat-message.mortal-kombat-message .username-mortal-kombat {
    font-weight: 600;
    /* color is set per-character in JS (MORTAL_KOMBAT_CARD_INFO[].color) */
}
.chat-message.mortal-kombat-message .message {
    color: #fecaca !important;
}
.chat-message.mortal-kombat-message {
    border-left: 3px solid rgba(185, 28, 28, 0.6);
    background: linear-gradient(90deg, rgba(185, 28, 28, 0.06) 0%, transparent 12%);
    border-radius: 0 8px 8px 0;
}
.chat-message.has-avatar .chat-message-avatar-col .chat-message-avatar-mortal-kombat-emoji {
    background: linear-gradient(135deg, rgba(185, 28, 28, 0.35) 0%, rgba(153, 27, 27, 0.25) 100%);
    border-color: rgba(185, 28, 28, 0.5);
}
.mortal-kombat-profile-card-chat {
    border-color: rgba(185, 28, 28, 0.4);
    background: linear-gradient(145deg, #1f1414 0%, #181010 50%, #120c0c 100%);
}
.mortal-kombat-profile-card-chat .room-bot-profile-card-name { color: #fca5a5; }
.mortal-kombat-profile-card-chat .room-bot-profile-card-tagline { color: #fecaca; opacity: 0.9; }
.mortal-kombat-profile-card-chat .room-bot-profile-card-avatar-mk-emoji { font-size: 28px; }

.chat-message.has-avatar .chat-message-avatar-col .chat-message-avatar-bruce-lee-emoji {
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.35) 0%, rgba(180, 83, 9, 0.25) 100%);
    border-color: rgba(217, 119, 6, 0.5);
}

.toke-bot-profile-card-chat {
    border-color: rgba(245, 158, 11, 0.4);
    background: linear-gradient(145deg, #1f1a14 0%, #181510 50%, #120f0c 100%);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(245, 158, 11, 0.12),
                0 0 0 1px rgba(255, 255, 255, 0.03);
}
.toke-bot-profile-card-chat .toke-bot-profile-card-bg {
    background: radial-gradient(ellipse 120% 80% at 20% 50%, rgba(245, 158, 11, 0.1) 0%, transparent 50%),
                radial-gradient(ellipse 80% 60% at 80% 50%, rgba(245, 158, 11, 0.06) 0%, transparent 45%);
}
.toke-bot-profile-card-chat .toke-bot-profile-card-avatar,
.toke-bot-profile-card-chat .room-bot-profile-card-avatar {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.3) 0%, rgba(217, 119, 6, 0.2) 100%);
    border-color: rgba(245, 158, 11, 0.5);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.toke-bot-profile-card-chat .room-bot-profile-card-name {
    color: #fcd34d;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.toke-bot-profile-card-chat .room-bot-profile-card-tagline {
    color: #fcd34d;
    opacity: 0.95;
}
.toke-bot-profile-card-chat .toke-bot-profile-card-badge {
    color: rgba(251, 191, 36, 0.98);
    background: rgba(245, 158, 11, 0.2);
    border-color: rgba(245, 158, 11, 0.45);
}
.profile-tooltip-bot:has(.toke-bot-profile-card-chat) {
    border-color: rgba(245, 158, 11, 0.5);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(245, 158, 11, 0.25);
}
.chat-message.has-avatar .chat-message-avatar-col .chat-message-avatar-toke-bot-emoji {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.35) 0%, rgba(217, 119, 6, 0.25) 100%);
    border-color: rgba(245, 158, 11, 0.5);
}
.chat-message.has-avatar .chat-message-avatar-col img.chat-message-avatar-chuck-norris {
    object-fit: contain;
    object-position: center;
    background: linear-gradient(145deg, #1f1414 0%, #181010 100%);
}
.chat-message.has-avatar .chat-message-avatar-col .chat-message-avatar-chuck-norris-emoji {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.35) 0%, rgba(185, 28, 28, 0.25) 100%);
    border-color: rgba(220, 38, 38, 0.5);
}

/* Chuck Norris profile card in chat - red theme */
.chuck-norris-profile-card-chat {
    border-color: rgba(220, 38, 38, 0.4);
    background: linear-gradient(145deg, #1f1414 0%, #181010 50%, #120c0c 100%);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(220, 38, 38, 0.12),
                0 0 0 1px rgba(255, 255, 255, 0.03);
}
.chuck-norris-profile-card-chat .chuck-norris-profile-card-bg {
    background: radial-gradient(ellipse 120% 80% at 20% 50%, rgba(220, 38, 38, 0.1) 0%, transparent 50%),
                radial-gradient(ellipse 80% 60% at 80% 50%, rgba(220, 38, 38, 0.06) 0%, transparent 45%);
}
.chuck-norris-profile-card-chat .chuck-norris-profile-card-avatar,
.chuck-norris-profile-card-chat .room-bot-profile-card-avatar {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.3) 0%, rgba(185, 28, 28, 0.2) 100%);
    border-color: rgba(220, 38, 38, 0.5);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.chuck-norris-profile-card-chat .room-bot-profile-card-avatar-img.chuck-norris-avatar-img {
    object-fit: contain;
    object-position: center;
}
.chuck-norris-profile-card-chat .room-bot-profile-card-name {
    color: #fca5a5;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.chuck-norris-profile-card-chat .room-bot-profile-card-tagline {
    color: #fca5a5;
    opacity: 0.95;
}
.chuck-norris-profile-card-chat .chuck-norris-profile-card-badge {
    color: rgba(254, 202, 202, 0.98);
    background: rgba(220, 38, 38, 0.2);
    border-color: rgba(220, 38, 38, 0.45);
}
.profile-tooltip-bot:has(.chuck-norris-profile-card-chat) {
    border-color: rgba(220, 38, 38, 0.5);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(220, 38, 38, 0.25);
}

/* Dexter / Murder Mystery profile card in chat - blood red theme */
.dexter-bot-profile-card-chat {
    border-color: rgba(185, 28, 28, 0.45);
    background: linear-gradient(145deg, #1f1414 0%, #181010 50%, #120c0c 100%);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(185, 28, 28, 0.12),
                0 0 0 1px rgba(255, 255, 255, 0.03);
}
.dexter-bot-profile-card-chat .dexter-bot-profile-card-bg {
    background: radial-gradient(ellipse 120% 80% at 20% 50%, rgba(185, 28, 28, 0.1) 0%, transparent 50%),
                radial-gradient(ellipse 80% 60% at 80% 50%, rgba(185, 28, 28, 0.06) 0%, transparent 45%);
}
.dexter-bot-profile-card-chat .dexter-bot-profile-card-avatar,
.dexter-bot-profile-card-chat .room-bot-profile-card-avatar {
    background: linear-gradient(135deg, rgba(185, 28, 28, 0.35) 0%, rgba(153, 27, 27, 0.25) 100%);
    border-color: rgba(185, 28, 28, 0.5);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.dexter-bot-profile-card-chat .room-bot-profile-card-name {
    color: #fca5a5;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.dexter-bot-profile-card-chat .room-bot-profile-card-tagline {
    color: #fecaca;
    opacity: 0.95;
}
.dexter-bot-profile-card-chat .dexter-bot-profile-card-badge {
    color: rgba(254, 202, 202, 0.98);
    background: rgba(185, 28, 28, 0.25);
    border: 1px solid rgba(185, 28, 28, 0.45);
}
.profile-tooltip-bot:has(.dexter-bot-profile-card-chat) {
    border-color: rgba(185, 28, 28, 0.5);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(185, 28, 28, 0.25);
}

/* Giving Tree profile card in chat - green theme */
.tree-bot-profile-card-chat {
    border-color: rgba(34, 197, 94, 0.35);
    background: linear-gradient(145deg, #141f18 0%, #101810 50%, #0c140f 100%);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(34, 197, 94, 0.12),
                0 0 0 1px rgba(255, 255, 255, 0.03);
}
.tree-bot-profile-card-chat .tree-bot-profile-card-bg {
    background: radial-gradient(ellipse 120% 80% at 20% 50%, rgba(34, 197, 94, 0.08) 0%, transparent 50%),
                radial-gradient(ellipse 80% 60% at 80% 50%, rgba(34, 197, 94, 0.05) 0%, transparent 45%);
}
.tree-bot-profile-card-chat .tree-bot-profile-card-avatar,
.tree-bot-profile-card-chat .room-bot-profile-card-avatar {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.3) 0%, rgba(22, 163, 74, 0.2) 100%);
    border-color: rgba(34, 197, 94, 0.45);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.tree-bot-profile-card-chat .room-bot-profile-card-name {
    color: #86efac;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.tree-bot-profile-card-chat .room-bot-profile-card-tagline {
    color: #bbf7d0;
    opacity: 0.95;
}
.tree-bot-profile-card-chat .tree-bot-profile-card-badge {
    color: rgba(187, 247, 208, 0.98);
    background: rgba(34, 197, 94, 0.2);
    border: 1px solid rgba(34, 197, 94, 0.4);
}
.profile-tooltip-bot:has(.tree-bot-profile-card-chat) {
    border-color: rgba(34, 197, 94, 0.45);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(34, 197, 94, 0.2);
}

.chat-message.has-avatar .chat-message-avatar-col .chat-message-avatar-dexter-bot-emoji {
    background: linear-gradient(135deg, rgba(185, 28, 28, 0.35) 0%, rgba(153, 27, 27, 0.25) 100%);
    border-color: rgba(185, 28, 28, 0.5);
}

/* Bruce Lee profile card in chat - amber theme */
.bruce-lee-profile-card-chat {
    border-color: rgba(217, 119, 6, 0.4);
    background: linear-gradient(145deg, #1f1a14 0%, #181510 50%, #120f0c 100%);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(217, 119, 6, 0.12),
                0 0 0 1px rgba(255, 255, 255, 0.03);
}
.bruce-lee-profile-card-chat .bruce-lee-profile-card-bg {
    background: radial-gradient(ellipse 120% 80% at 20% 50%, rgba(217, 119, 6, 0.1) 0%, transparent 50%),
                radial-gradient(ellipse 80% 60% at 80% 50%, rgba(217, 119, 6, 0.06) 0%, transparent 45%);
}
.bruce-lee-profile-card-chat .room-bot-profile-card-avatar,
.bruce-lee-profile-card-chat .bruce-lee-profile-card-avatar {
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.3) 0%, rgba(180, 83, 9, 0.2) 100%);
    border-color: rgba(217, 119, 6, 0.5);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.bruce-lee-profile-card-chat .room-bot-profile-card-name {
    color: #fcd34d;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.bruce-lee-profile-card-chat .room-bot-profile-card-tagline {
    color: #fde68a;
    opacity: 0.95;
}
.bruce-lee-profile-card-chat .bruce-lee-profile-card-badge {
    color: rgba(254, 243, 199, 0.98);
    background: rgba(217, 119, 6, 0.2);
    border-color: rgba(217, 119, 6, 0.45);
}
.profile-tooltip-bot:has(.bruce-lee-profile-card-chat) {
    border-color: rgba(217, 119, 6, 0.5);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(217, 119, 6, 0.25);
}

/* Bruce Lee popup feed on video grid – amber theme */
.video-wrapper.bruce-lee-feed .video-feed-area {
    background: linear-gradient(145deg, #1f1a14 0%, #181510 50%);
}
.video-wrapper.bruce-lee-feed .bruce-lee-feed-img {
    object-fit: contain;
    object-position: center;
}
.video-wrapper.bruce-lee-feed .bruce-lee-feed-overlay {
    font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    letter-spacing: 0.02em;
}

/* Chuck Norris popup feed on video grid – transparent PNG, contain so full figure shows */
.video-wrapper.chuck-norris-feed .video-feed-area {
    background: linear-gradient(145deg, #1f1414 0%, #181010 50%);
}
.video-wrapper.chuck-norris-feed .chuck-norris-feed-img {
    object-fit: contain;
    object-position: center;
}
.video-wrapper.chuck-norris-feed .chuck-norris-feed-overlay {
    font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    letter-spacing: 0.02em;
}
.video-wrapper.roast-bot-feed .video-feed-area {
    background: linear-gradient(145deg, #2a1a14 0%, #1a1410 50%);
}
.video-wrapper.roast-bot-feed .roast-bot-feed-overlay {
    font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    letter-spacing: 0.02em;
}

/* Giving Tree inline icons sized in #chatroom-tree-widget rules above */

/* Giving Tree – falling apples: sky at top, clear ground at bottom */
#tree-apples-drop-zone.tree-apples-ground,
#chatroom-tree-widget #tree-apples-drop-zone {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg,
        rgba(15, 42, 20, 0.25) 0%,
        rgba(22, 55, 34, 0.4) 50%,
        rgba(34, 70, 42, 0.7) 75%,
        rgba(69, 90, 56, 0.95) 90%,
        #3d5c34 100%
    );
    border: 2px solid #166534;
    border-radius: 6px;
    box-shadow: inset 0 -10px 0 rgba(0,0,0,0.25);
}
.tree-ground-line {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 14px;
    background: linear-gradient(180deg, #2d4a26 0%, #1e3619 100%);
    border-top: 2px solid #4a7c3e;
    border-radius: 0 0 4px 4px;
    pointer-events: none;
    z-index: 1;
}
.tree-apples-hint {
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #dcfce7;
    text-align: center;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.tree-apples-catch-label {
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 600;
    color: #86efac;
    text-align: center;
    pointer-events: none;
}
.tree-apple {
    position: absolute;
    font-size: 32px;
    cursor: pointer;
    user-select: none;
    z-index: 2;
    transition: transform 0.1s;
    padding: 8px;
    margin: -8px;
}
.tree-apple:hover {
    transform: scale(1.2);
}
.tree-apple.caught {
    opacity: 0.5;
    pointer-events: none;
}
.tree-apple.missed {
    opacity: 0.3;
    pointer-events: none;
}
.tree-apple-catcher-name {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    font-weight: bold;
    color: #fff;
    background: rgba(0, 0, 0, 0.6);
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    margin-top: 2px;
}
.tree-apple-early-name {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    font-weight: bold;
    color: #fca5a5;
    background: rgba(153, 27, 27, 0.8);
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    margin-top: 2px;
    animation: fadeOut 2s forwards;
}
@keyframes fadeOut {
    0% { opacity: 1; }
    70% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes tree-apple-fall {
    to { top: 100%; transform: translateX(0); }
}
@keyframes tree-apple-fall-sway-left {
    25% { transform: translateX(-12%); }
    50% { transform: translateX(4%); }
    75% { transform: translateX(-8%); }
    to { top: 100%; transform: translateX(0); }
}
@keyframes tree-apple-fall-sway-right {
    25% { transform: translateX(12%); }
    50% { transform: translateX(-4%); }
    75% { transform: translateX(8%); }
    to { top: 100%; transform: translateX(0); }
}
@keyframes tree-apple-fall-drift-left {
    to { top: 100%; transform: translateX(-18%); }
}
@keyframes tree-apple-fall-drift-right {
    to { top: 100%; transform: translateX(18%); }
}
@keyframes tree-apple-fall-wobble {
    20% { transform: translateX(6%); }
    40% { transform: translateX(-10%); }
    60% { transform: translateX(8%); }
    80% { transform: translateX(-6%); }
    to { top: 100%; transform: translateX(0); }
}

/* System messages - red text */
.chat-message.system-message .message,
.chat-message.system-message .username {
    color: #ef4444 !important;
}

/* FAQ/help messages - green text */
.chat-message.system-message.faq-message .message,
.chat-message.system-message.faq-message .username {
    color: #22c55e !important;
}

/* Welcome/join messages - yellow text */
.chat-message.welcome-message .message,
.chat-message.welcome-message .username {
    color: #fbbf24 !important;
}

/* Room rules (!rules) - yellow for visibility */
.chat-message.room-rules-message .message,
.chat-message.room-rules-message .username {
    color: #facc15 !important;
    font-weight: 500;
}

/* Bare sidebar (ghost-style look when in room, but sidebar stays in flow – feeds do not go behind it) */
/* Same visual treatment as ghost UI; no position:fixed or main-content expansion */
body:has(#chat-screen.active):not(.ghost-ui) .sidebar {
    background: transparent !important;
    border-left-color: transparent !important;
}
body:has(#chat-screen.active):not(.ghost-ui) .sidebar > *:not(#chat-screen) {
    opacity: 0.06 !important;
}
/* Desktop only: nudge toggle over resize handle; mobile keeps glyph inside the tab */
@media (min-width: 769px) {
    body:has(#chat-screen.active):not(.ghost-ui) #sidebar-toggle:not(.sidebar-hidden-state) {
        opacity: 1 !important;
        transform: translateY(-50%) translateX(18px) !important;
        -webkit-transform: translateY(-50%) translateX(18px) !important;
    }
}
body:has(#chat-screen.active):not(.ghost-ui) #sidebar-toggle {
    opacity: 1 !important;
    transform: translateY(-50%) !important;
    -webkit-transform: translateY(-50%) !important;
}
body:has(#chat-screen.active):not(.ghost-ui):has(.sidebar.hidden) #sidebar-toggle {
    opacity: 1 !important;
    transform: translateY(-50%) !important;
    -webkit-transform: translateY(-50%) !important;
}
/* Home page sidebar toggle – match left sidebar style */
body:has(#rooms-screen.active):not(.ghost-ui) #sidebar-toggle,
body:has(#login-screen.active):not(.ghost-ui) #sidebar-toggle {
    opacity: 1 !important;
}
body:has(#rooms-screen.active):not(.ghost-ui):has(.sidebar.hidden) #sidebar-toggle,
body:has(#login-screen.active):not(.ghost-ui):has(.sidebar.hidden) #sidebar-toggle {
    opacity: 1 !important;
}
body:has(#chat-screen.active):not(.ghost-ui) .sidebar-resize-handle {
    display: block !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    background: linear-gradient(90deg, rgba(102, 126, 234, 0.85), rgba(102, 126, 234, 0.5)) !important;
    border-radius: 0 6px 6px 0 !important;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3) !important;
}
body:has(#chat-screen.active):not(.ghost-ui) .sidebar-resize-handle::before {
    background: rgba(255, 255, 255, 0.9) !important;
    border-radius: 3px !important;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.2) !important;
}
body:has(#chat-screen.active):not(.ghost-ui) .sidebar-resize-handle:hover {
    background: linear-gradient(90deg, rgba(102, 126, 234, 0.95), rgba(118, 75, 162, 0.7)) !important;
    box-shadow: 0 0 14px rgba(102, 126, 234, 0.5), inset 1px 0 0 rgba(255, 255, 255, 0.2) !important;
}
body:has(#chat-screen.active):not(.ghost-ui) .sidebar-resize-handle:hover::before {
    background: #fff !important;
    box-shadow: 0 0 10px rgba(102, 126, 234, 0.5) !important;
}
body:has(#chat-screen.active):not(.ghost-ui) .sidebar-resize-handle:active,
body:has(#chat-screen.active):not(.ghost-ui) .sidebar-resize-handle.dragging {
    background: linear-gradient(90deg, #667eea, #5a3d8a) !important;
    box-shadow: 0 0 18px rgba(102, 126, 234, 0.65), inset 1px 0 0 rgba(255, 255, 255, 0.25) !important;
}
body:has(#chat-screen.active):not(.ghost-ui) .sidebar-resize-handle:active::before,
body:has(#chat-screen.active):not(.ghost-ui) .sidebar-resize-handle.dragging::before {
    background: #fff !important;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.8) !important;
}
/* Chat screen interior – match ghost */
body:has(#chat-screen.active):not(.ghost-ui) #chat-screen #sidebar-users-pm-row {
    background: rgba(26, 26, 26, 0.25) !important;
    border-radius: 6px !important;
}
body:has(#chat-screen.active):not(.ghost-ui) #chat-screen #sidebar-users-pm-row .sidebar-row-btn-stack,
body:has(#chat-screen.active):not(.ghost-ui) #chat-screen #sidebar-users-pm-row #private-messages-btn {
    opacity: 0.85 !important;
}
body:has(#chat-screen.active):not(.ghost-ui) #chat-screen #promotion-status {
    opacity: 0.85 !important;
    background: transparent !important;
    border-color: transparent !important;
}
body:has(#chat-screen.active):not(.ghost-ui) #chat-screen #chatroom-tree-widget {
    opacity: 0.95 !important;
    /* keep widget background and border visible in non-ghost (no transparent override) */
}
/* Non-ghost: room title only – same standout treatment as room promotion display */
body:has(#chat-screen.active):not(.ghost-ui) #chat-screen #room-title,
body:has(#chat-screen.active):not(.ghost-ui) #chat-screen #room-title * {
    opacity: 1 !important;
    color: inherit;
}
body:has(#chat-screen.active):not(.ghost-ui) #chat-screen #room-title {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%) !important;
    border: 2px solid rgba(102, 126, 234, 0.45) !important;
    border-radius: 10px !important;
    color: #e2e8f0 !important;
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3), 0 0 24px rgba(102, 126, 234, 0.12) !important;
}
body:has(#chat-screen.active):not(.ghost-ui) #chat-screen #room-title + div {
    opacity: 0.85 !important;
    background: rgba(26, 26, 26, 0.25) !important;
    border-radius: 6px !important;
}
body:has(#chat-screen.active):not(.ghost-ui) #chat-screen #room-title + div button {
    opacity: 1 !important;
}
body:has(#chat-screen.active):not(.ghost-ui) #chat-screen #room-title + div + div {
    opacity: 0.85 !important;
    background: rgba(26, 26, 26, 0.25) !important;
    border-radius: 6px !important;
}
body:has(#chat-screen.active):not(.ghost-ui) #chat-screen #room-title + div + div button {
    opacity: 1 !important;
}
body:has(#chat-screen.active):not(.ghost-ui) #chat-screen #chat-full-sidebar-wrap {
    opacity: 0.85 !important;
}
body:has(#chat-screen.active):not(.ghost-ui) #chat-screen #chat-full-sidebar-buttons {
    background: rgba(26, 26, 26, 0.25) !important;
    border-radius: 6px !important;
    opacity: 0.85 !important;
}
body:has(#chat-screen.active):not(.ghost-ui) #chat-screen #chat-full-sidebar-buttons .sidebar-row-btn-stack {
    opacity: 1 !important;
}
body:has(#chat-screen.active):not(.ghost-ui) #chat-screen #chat-messages,
body:has(#chat-screen.active):not(.ghost-ui) #chat-screen #chat-messages .chat-message,
body:has(#chat-screen.active):not(.ghost-ui) #chat-screen #chat-messages .chat-message *:not(.timestamp):not(.chat-message-admin-delete) {
    opacity: 1 !important;
}
body:has(#chat-screen.active):not(.ghost-ui) #chat-screen #chat-messages .chat-message .timestamp {
    opacity: 0 !important;
    transition: opacity 0.15s ease;
}
body:has(#chat-screen.active):not(.ghost-ui) #chat-screen #chat-messages .chat-message:hover .timestamp {
    opacity: 1 !important;
}
body:has(#chat-screen.active):not(.ghost-ui) #chat-screen #chat-messages {
    background: rgba(26, 26, 26, 0.28) !important;
    border-color: rgba(102, 126, 234, 0.35) !important;
    box-shadow: none !important;
}
body:has(#chat-screen.active):not(.ghost-ui) #chat-screen #chat-messages::-webkit-scrollbar-track {
    background: rgba(26, 26, 26, 0.2) !important;
}
body:has(#chat-screen.active):not(.ghost-ui) #chat-screen #chat-messages::-webkit-scrollbar-thumb {
    background: rgba(245, 158, 11, 0.35) !important;
}
body:has(#chat-screen.active):not(.ghost-ui) #chat-screen #chat-messages::-webkit-scrollbar-thumb:hover {
    background: rgba(245, 158, 11, 0.5) !important;
}
body:has(#chat-screen.active):not(.ghost-ui) #user-list::-webkit-scrollbar-track,
body:has(#chat-screen.active):not(.ghost-ui) #private-message-messages::-webkit-scrollbar-track {
    background: rgba(26, 26, 26, 0.2) !important;
}
body:has(#chat-screen.active):not(.ghost-ui) #user-list::-webkit-scrollbar-thumb,
body:has(#chat-screen.active):not(.ghost-ui) #private-message-messages::-webkit-scrollbar-thumb {
    background: rgba(102, 126, 234, 0.35) !important;
}
body:has(#chat-screen.active):not(.ghost-ui) #user-list::-webkit-scrollbar-thumb:hover,
body:has(#chat-screen.active):not(.ghost-ui) #private-message-messages::-webkit-scrollbar-thumb:hover {
    background: rgba(102, 126, 234, 0.5) !important;
}
body:has(#chat-screen.active):not(.ghost-ui) .sidebar::-webkit-scrollbar-track {
    background: rgba(26, 26, 26, 0.15) !important;
}
body:has(#chat-screen.active):not(.ghost-ui) .sidebar::-webkit-scrollbar-thumb {
    background: rgba(58, 58, 58, 0.4) !important;
}
body:has(#chat-screen.active):not(.ghost-ui) .sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(74, 74, 74, 0.5) !important;
}
body:has(#chat-screen.active):not(.ghost-ui) #chat-screen .chat-input-container {
    opacity: 0.85 !important;
    background: rgba(26, 26, 26, 0.25) !important;
    border-radius: 6px !important;
}
body:has(#chat-screen.active):not(.ghost-ui) #chat-screen .chat-input-container #chat-input,
body:has(#chat-screen.active):not(.ghost-ui) #chat-screen .chat-input-container .chat-char-counter,
body:has(#chat-screen.active):not(.ghost-ui) #chat-screen .chat-buttons-group,
body:has(#chat-screen.active):not(.ghost-ui) #chat-screen .chat-buttons-group button {
    opacity: 1 !important;
}
body:has(#chat-screen.active):not(.ghost-ui) #private-message-conversations,
body:has(#chat-screen.active):not(.ghost-ui) #private-message-conversations #conversations-list {
    background: rgba(26, 26, 26, 0.6) !important;
}
body:has(#chat-screen.active):not(.ghost-ui) #private-message-conversations {
    border-color: rgba(102, 126, 234, 0.5) !important;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.4) !important;
}
body:has(#chat-screen.active):not(.ghost-ui) #private-message-conversations * {
    opacity: 1 !important;
}
body:has(#chat-screen.active):not(.ghost-ui) #private-message-conversations > div:first-child {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.6) 0%, rgba(118, 75, 162, 0.6) 100%) !important;
}
body:has(#chat-screen.active):not(.ghost-ui) #private-message-popup {
    background: rgba(26, 26, 26, 0.35) !important;
    border-color: rgba(102, 126, 234, 0.4) !important;
    box-shadow: none !important;
}
body:has(#chat-screen.active):not(.ghost-ui) #private-message-popup #private-message-header,
body:has(#chat-screen.active):not(.ghost-ui) #private-message-popup #private-message-messages,
body:has(#chat-screen.active):not(.ghost-ui) #private-message-popup #private-message-input-container,
body:has(#chat-screen.active):not(.ghost-ui) #private-message-popup #private-message-header *,
body:has(#chat-screen.active):not(.ghost-ui) #private-message-popup #private-message-messages *,
body:has(#chat-screen.active):not(.ghost-ui) #private-message-popup #private-message-input-container * {
    opacity: 1 !important;
}
body:has(#chat-screen.active):not(.ghost-ui) #user-list-container {
    background: rgba(26, 26, 26, 0.35) !important;
    border-color: rgba(102, 126, 234, 0.4) !important;
    box-shadow: none !important;
}
body:has(#chat-screen.active):not(.ghost-ui) #user-list-container * {
    opacity: 1 !important;
}
body:has(#chat-screen.active):not(.ghost-ui) #user-list-container #user-list {
    background: transparent !important;
}

/* Ghost UI: only when chat screen is active (in room). Slight transparency so video shows through a little. */
/* Sidebar overlays so video feeds expand to full width. Width not forced – uses current/resized width (inline style) so drag resize works and is remembered. */
body.ghost-ui:has(#chat-screen.active) .sidebar {
    position: fixed !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    /* Do not set width/min-width/max-width here: let inline style (from resize handle + localStorage) control width so user can drag and it persists */
    background: transparent !important;
    border-color: transparent !important;
    z-index: 20 !important;
    pointer-events: auto !important;
}
/* Ghost mode: keep resize handle visible and grabbable (don’t fade it with .sidebar > *) */
body.ghost-ui:has(#chat-screen.active) .sidebar-resize-handle {
    display: block !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    background: linear-gradient(90deg, rgba(102, 126, 234, 0.85), rgba(102, 126, 234, 0.5)) !important;
    border-radius: 0 6px 6px 0 !important;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3) !important;
}
body.ghost-ui:has(#chat-screen.active) .sidebar-resize-handle::before {
    background: rgba(255, 255, 255, 0.9) !important;
    border-radius: 3px !important;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.2) !important;
}
body.ghost-ui:has(#chat-screen.active) .sidebar-resize-handle:hover {
    background: linear-gradient(90deg, rgba(102, 126, 234, 0.95), rgba(118, 75, 162, 0.7)) !important;
    box-shadow: 0 0 14px rgba(102, 126, 234, 0.5), inset 1px 0 0 rgba(255, 255, 255, 0.2) !important;
}
body.ghost-ui:has(#chat-screen.active) .sidebar-resize-handle:hover::before {
    background: #fff !important;
    box-shadow: 0 0 10px rgba(102, 126, 234, 0.5) !important;
}
body.ghost-ui:has(#chat-screen.active) .sidebar-resize-handle:active,
body.ghost-ui:has(#chat-screen.active) .sidebar-resize-handle.dragging {
    background: linear-gradient(90deg, #667eea, #5a3d8a) !important;
    box-shadow: 0 0 18px rgba(102, 126, 234, 0.65), inset 1px 0 0 rgba(255, 255, 255, 0.25) !important;
}
body.ghost-ui:has(#chat-screen.active) .sidebar-resize-handle:active::before,
body.ghost-ui:has(#chat-screen.active) .sidebar-resize-handle.dragging::before {
    background: #fff !important;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.8) !important;
}
@media (max-width: 768px) {
    body.ghost-ui:has(#chat-screen.active) .sidebar {
        width: 50vw;
        min-width: 50vw;
        max-width: min(500px, 95vw);
    }
    /* Show resize handle so user can drag sidebar wider in ghost mode on mobile */
    body.ghost-ui:has(#chat-screen.active) .sidebar:not(.hidden) .sidebar-resize-handle {
        display: block !important;
        width: 20px !important;
        left: -6px !important;
    }
    body.ghost-ui:has(#chat-screen.active) .main-content {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        flex: 1 1 100% !important;
    }
}
/* Ghost mode: same mobile layout in landscape (phone sideways = short height, so use max-height) */
@media (orientation: landscape) and (max-height: 768px) {
    body.ghost-ui:has(#chat-screen.active) .sidebar {
        width: 50vw;
        min-width: 50vw;
        max-width: min(500px, 95vw);
    }
    body.ghost-ui:has(#chat-screen.active) .sidebar:not(.hidden) .sidebar-resize-handle {
        display: block !important;
        width: 20px !important;
        left: -6px !important;
    }
    body.ghost-ui:has(#chat-screen.active) .main-content {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        flex: 1 1 100% !important;
    }
}
body.ghost-ui:has(#chat-screen.active) .main-content {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    min-width: 0 !important;
    transition: width 0.3s ease !important;
}
body.ghost-ui:has(#chat-screen.active) .sidebar > *:not(#chat-screen) {
    opacity: 0.06 !important;
}
body.ghost-ui:has(#chat-screen.active) #sidebar-toggle {
    opacity: 0.3 !important;
}
/* When sidebar is toggled closed in ghost mode, show toggle arrow at full opacity so it's visible and clickable */
body.ghost-ui:has(#chat-screen.active):has(.sidebar.hidden) #sidebar-toggle {
    opacity: 1 !important;
}
body.ghost-ui:has(#chat-screen.active) .main-content #top-controls:not(.show),
body.ghost-ui:has(#chat-screen.active) .main-content .top-controls:not(.show) {
    opacity: 0 !important;
    visibility: hidden !important;
}
body.ghost-ui:has(#chat-screen.active) .main-content #top-controls.show,
body.ghost-ui:has(#chat-screen.active) .main-content .top-controls.show {
    opacity: 1 !important;
    visibility: visible !important;
}
/* When controls are moved to body (ghost + sidebar 40%+), let clicks pass through to chat input; only buttons receive clicks */
body.ghost-controls-floating #top-controls,
body.ghost-controls-floating #bottom-controls {
    pointer-events: none !important;
}
body.ghost-controls-floating #top-controls *,
body.ghost-controls-floating #bottom-controls * {
    pointer-events: auto !important;
}
body.ghost-ui:has(#chat-screen.active) #chat-screen #sidebar-users-pm-row {
    background: rgba(26, 26, 26, 0.25) !important;
    border-radius: 6px !important;
}
/* Fade only the buttons so the conversations list popup (when open) stays solid */
body.ghost-ui:has(#chat-screen.active) #chat-screen #sidebar-users-pm-row .sidebar-row-btn-stack,
body.ghost-ui:has(#chat-screen.active) #chat-screen #sidebar-users-pm-row #private-messages-btn {
    opacity: 0.55 !important;
}
body.ghost-ui:has(#chat-screen.active) #chat-screen #promotion-status {
    opacity: 0.08 !important;
    background: transparent !important;
    border-color: transparent !important;
}
body.ghost-ui:has(#chat-screen.active) #chat-screen #chatroom-tree-widget {
    opacity: 0.08 !important;
    background: transparent !important;
    border-color: transparent !important;
}
body.ghost-ui:has(#chat-screen.active) #chat-screen #room-title,
body.ghost-ui:has(#chat-screen.active) #chat-screen #room-title * {
    opacity: 0.5 !important;
    color: inherit;
}
body.ghost-ui:has(#chat-screen.active) #chat-screen #room-title {
    background: rgba(26, 26, 26, 0.25) !important;
    border-radius: 6px !important;
    color: #e2e8f0 !important;
}
body.ghost-ui:has(#chat-screen.active) #chat-screen #room-title + div {
    opacity: 0.55 !important;
    background: rgba(26, 26, 26, 0.25) !important;
    border-radius: 6px !important;
}
body.ghost-ui:has(#chat-screen.active) #chat-screen #room-title + div button {
    opacity: 1 !important;
}
body.ghost-ui:has(#chat-screen.active) #chat-screen #room-title + div + div {
    opacity: 0.55 !important;
    background: rgba(26, 26, 26, 0.25) !important;
    border-radius: 6px !important;
}
body.ghost-ui:has(#chat-screen.active) #chat-screen #room-title + div + div button {
    opacity: 1 !important;
}
body.ghost-ui:has(#chat-screen.active) #chat-screen #chat-full-sidebar-wrap {
    opacity: 0.55 !important;
}
body.ghost-ui:has(#chat-screen.active) #chat-screen #chat-full-sidebar-buttons {
    background: rgba(26, 26, 26, 0.25) !important;
    border-radius: 6px !important;
    opacity: 0.55 !important;
}
body.ghost-ui:has(#chat-screen.active) #chat-screen #chat-full-sidebar-buttons .sidebar-row-btn-stack {
    opacity: 1 !important;
}
body.ghost-ui:has(#chat-screen.active) #chat-screen #chat-messages,
body.ghost-ui:has(#chat-screen.active) #chat-screen #chat-messages .chat-message,
body.ghost-ui:has(#chat-screen.active) #chat-screen #chat-messages .chat-message *:not(.timestamp):not(.chat-message-admin-delete) {
    opacity: 1 !important;
}
body.ghost-ui:has(#chat-screen.active) #chat-screen #chat-messages .chat-message .timestamp {
    opacity: 0 !important;
    transition: opacity 0.15s ease;
}
body.ghost-ui:has(#chat-screen.active) #chat-screen #chat-messages .chat-message:hover .timestamp {
    opacity: 1 !important;
}
/* Ghost mode: transparent message rows (no gray bubble behind each line); mass broadcast + gift cards keep full styling */
body.ghost-ui:has(#chat-screen.active) #chat-screen #chat-messages .chat-message:not(.mass-broadcast-message):not(.gift-message) {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border-left: none !important;
}
body.ghost-ui:has(#chat-screen.active) #chat-screen #chat-messages {
    background: rgba(26, 26, 26, 0.28) !important;
    border-color: rgba(102, 126, 234, 0.35) !important;
    box-shadow: none !important;
}
body.ghost-ui:has(#chat-screen.active) #chat-screen #chat-messages::-webkit-scrollbar-track {
    background: rgba(26, 26, 26, 0.2) !important;
}
body.ghost-ui:has(#chat-screen.active) #chat-screen #chat-messages::-webkit-scrollbar-thumb {
    background: rgba(245, 158, 11, 0.35) !important;
}
body.ghost-ui:has(#chat-screen.active) #chat-screen #chat-messages::-webkit-scrollbar-thumb:hover {
    background: rgba(245, 158, 11, 0.5) !important;
}
body.ghost-ui:has(#chat-screen.active) #user-list::-webkit-scrollbar-track,
body.ghost-ui:has(#chat-screen.active) #private-message-messages::-webkit-scrollbar-track {
    background: rgba(26, 26, 26, 0.2) !important;
}
body.ghost-ui:has(#chat-screen.active) #user-list::-webkit-scrollbar-thumb,
body.ghost-ui:has(#chat-screen.active) #private-message-messages::-webkit-scrollbar-thumb {
    background: rgba(102, 126, 234, 0.35) !important;
}
body.ghost-ui:has(#chat-screen.active) #user-list::-webkit-scrollbar-thumb:hover,
body.ghost-ui:has(#chat-screen.active) #private-message-messages::-webkit-scrollbar-thumb:hover {
    background: rgba(102, 126, 234, 0.5) !important;
}
body.ghost-ui:has(#chat-screen.active) .sidebar::-webkit-scrollbar-track {
    background: rgba(26, 26, 26, 0.15) !important;
}
body.ghost-ui:has(#chat-screen.active) .sidebar::-webkit-scrollbar-thumb {
    background: rgba(58, 58, 58, 0.4) !important;
}
body.ghost-ui:has(#chat-screen.active) .sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(74, 74, 74, 0.5) !important;
}
/* Ghost mode: input container fades like rest of sidebar; input + buttons stay full opacity so readable (no padding change so toggling ghost doesn't move input/buttons) */
body.ghost-ui:has(#chat-screen.active) #chat-screen .chat-input-container {
    opacity: 0.55 !important;
    background: rgba(26, 26, 26, 0.25) !important;
    border-radius: 6px !important;
}
body.ghost-ui:has(#chat-screen.active) #chat-screen .chat-input-container #chat-input,
body.ghost-ui:has(#chat-screen.active) #chat-screen .chat-input-container .chat-char-counter,
body.ghost-ui:has(#chat-screen.active) #chat-screen .chat-buttons-group,
body.ghost-ui:has(#chat-screen.active) #chat-screen .chat-buttons-group button {
    opacity: 1 !important;
}
/* Ghost button active state: classic “toggle on” look – ring + glow, no size change */
body.ghost-ui:has(#chat-screen.active) #transparent-ui-btn {
    opacity: 1 !important;
    box-sizing: border-box !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border: 2px solid #fff !important;
    outline: 2px solid rgba(102, 126, 234, 0.9) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 12px rgba(102, 126, 234, 0.8) !important;
}
/* In ghost mode, conversations list (dropdown with usernames): semi-transparent to match ghost feel */
body.ghost-ui:has(#chat-screen.active) #private-message-conversations,
body.ghost-ui:has(#chat-screen.active) #private-message-conversations #conversations-list {
    background: rgba(26, 26, 26, 0.6) !important;
}
body.ghost-ui:has(#chat-screen.active) #private-message-conversations {
    border-color: rgba(102, 126, 234, 0.5) !important;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.4) !important;
}
body.ghost-ui:has(#chat-screen.active) #private-message-conversations * {
    opacity: 1 !important;
}
/* Conversations header bar: stronger purple so "Conversations" stands out */
body.ghost-ui:has(#chat-screen.active) #private-message-conversations > div:first-child {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.6) 0%, rgba(118, 75, 162, 0.6) 100%) !important;
}
/* PM popup (open thread) stays transparent in ghost mode */
body.ghost-ui:has(#chat-screen.active) #private-message-popup {
    background: rgba(26, 26, 26, 0.35) !important;
    border-color: rgba(102, 126, 234, 0.4) !important;
    box-shadow: none !important;
}
body.ghost-ui:has(#chat-screen.active) #private-message-popup #private-message-header,
body.ghost-ui:has(#chat-screen.active) #private-message-popup #private-message-messages,
body.ghost-ui:has(#chat-screen.active) #private-message-popup #private-message-input-container,
body.ghost-ui:has(#chat-screen.active) #private-message-popup #private-message-header *,
body.ghost-ui:has(#chat-screen.active) #private-message-popup #private-message-messages *,
body.ghost-ui:has(#chat-screen.active) #private-message-popup #private-message-input-container * {
    opacity: 1 !important;
}
body.ghost-ui:has(#chat-screen.active) #user-list-container {
    background: rgba(26, 26, 26, 0.35) !important;
    border-color: rgba(102, 126, 234, 0.4) !important;
    box-shadow: none !important;
}
body.ghost-ui:has(#chat-screen.active) #user-list-container * {
    opacity: 1 !important;
}
body.ghost-ui:has(#chat-screen.active) #user-list-container #user-list {
    background: transparent !important;
}

/* Role / promotion messages (e.g. "HashMan has been promoted to Super by Blifted") - gold/amber so it feels celebratory, not red */
.chat-message.role-message .message,
.chat-message.role-message .username {
    color: #fbbf24 !important;
}

/* YouTube playlist messages - blue text */
.chat-message.youtube-playlist-message .message,
.chat-message.youtube-playlist-message .username {
    color: #3b82f6 !important;
}

/* YouTube modal: shorter playlist area on mobile so "Add video" stays visible */
@media (max-width: 768px) {
    #playlist-container {
        max-height: 35vh;
    }
}

/* Gift messages - glowing gold card; gifts above sender (column layout) */
.chat-message.gift-message {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    border: 2px solid rgba(255, 215, 0, 0.5);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.25), inset 0 0 20px rgba(255, 215, 0, 0.06);
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.12) 0%, rgba(255, 193, 7, 0.06) 100%);
    padding: 8px 10px;
    margin: 8px 0;
    border-radius: 8px;
    animation: giftMessagePulse 2s ease-in-out infinite;
}

/* Gift icons row: stack above the "X sent to Y" line */
.chat-message.gift-message .gift-message-gifts {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-bottom: 4px;
}

/* Sender line stays below the gifts */
.chat-message.gift-message .gift-message-sender-line {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

/* Hide any default username+message line inside gift messages (no double row) */
.chat-message.gift-message .chat-message-line {
    display: none !important;
}

.chat-message.gift-message .message,
.chat-message.gift-message .username {
    color: #ffed4e !important;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
    font-weight: 700;
    font-size: 13px !important;
}

@keyframes giftMessagePulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.25), inset 0 0 20px rgba(255, 215, 0, 0.06);
    }
    50% {
        box-shadow: 0 0 28px rgba(255, 215, 0, 0.4), inset 0 0 24px rgba(255, 215, 0, 0.08);
    }
}

.chat-message .timestamp {
    position: absolute;
    bottom: 3px;
    right: 8px;
    left: auto;
    top: auto;
    font-size: 8px;
    color: #555;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
    white-space: nowrap;
    letter-spacing: -0.02em;
}
.chat-message:hover .timestamp {
    opacity: 1;
}

/* Chat Buttons Group */
.chat-buttons-group {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* Emoji Picker Styles */
.emoji-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s;
    flex-shrink: 0;
    min-width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.emoji-btn:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    transform: scale(1.05);
}

/* Font Size Adjuster Styles */
.font-size-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s;
    flex-shrink: 0;
    min-width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.font-size-btn:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    transform: scale(1.05);
}

.chat-color-btn {
    background: linear-gradient(135deg, #0d9488 0%, #059669 100%);
    color: white;
    border: none;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s;
    flex-shrink: 0;
    min-width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.chat-color-btn:hover {
    filter: brightness(1.15);
    transform: scale(1.05);
}

.font-size-picker {
    position: absolute;
    bottom: 60px;
    left: 10px;
    width: 280px;
    background: #1a1a1a;
    border: 2px solid #444;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    z-index: 999999;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

.font-size-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #2a2a2a;
    border-bottom: 1px solid #444;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

.close-font-size-btn {
    background: transparent;
    border: none;
    color: #aaa;
    cursor: pointer;
    font-size: 16px;
    padding: 2px 6px;
    border-radius: 4px;
    transition: all 0.2s;
}

.close-font-size-btn:hover {
    background: #444;
    color: #fff;
}

.font-size-picker-content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#font-size-slider {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: #333;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

#font-size-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

#font-size-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.font-size-display {
    text-align: center;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

/* Chat font & background color picker */
.chat-color-picker {
    position: absolute;
    bottom: 60px;
    left: 10px;
    width: 280px;
    background: #1a1a1a;
    border: 2px solid #444;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    z-index: 999999;
    display: none;
    flex-direction: column;
    overflow: hidden;
}
.chat-color-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #2a2a2a;
    border-bottom: 1px solid #444;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}
.close-chat-color-btn {
    background: transparent;
    border: none;
    color: #aaa;
    cursor: pointer;
    font-size: 16px;
    padding: 2px 6px;
    border-radius: 4px;
    transition: all 0.2s;
}
.close-chat-color-btn:hover {
    background: #444;
    color: #fff;
}
.chat-color-picker-content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.chat-color-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.chat-color-row label {
    color: #ccc;
    font-size: 12px;
    min-width: 70px;
}
.chat-color-row input[type="color"] {
    width: 44px;
    height: 32px;
    padding: 2px;
    border: 1px solid #444;
    border-radius: 6px;
    background: #333;
    cursor: pointer;
}
.chat-color-default-btn {
    margin-left: auto;
    padding: 4px 10px;
    font-size: 11px;
    background: #333;
    color: #aaa;
    border: 1px solid #444;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}
.chat-color-default-btn:hover {
    background: #444;
    color: #fff;
}

#font-size-value {
    color: #667eea;
}

.emoji-picker {
    position: absolute;
    bottom: 60px;
    left: auto;
    right: 20px;
    width: 296px;
    max-width: calc(100% - 40px);
    max-height: 400px;
    background: #1a1a1a;
    border: 2px solid #444;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    z-index: 999999;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

/* Main chat / sidebar: make picker as wide as the sidebar, move up so it doesn't block the input */
.sidebar .chat-input-container .emoji-picker,
#chat-screen .chat-input-container .emoji-picker {
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    bottom: 75px;
}

.emoji-picker.show {
    display: flex;
}

.emoji-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #2a2a2a;
    border-bottom: 1px solid #444;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

.close-emoji-btn {
    background: transparent;
    border: none;
    color: #aaa;
    cursor: pointer;
    font-size: 16px;
    padding: 2px 6px;
    border-radius: 4px;
    transition: all 0.2s;
}

.close-emoji-btn:hover {
    background: #444;
    color: #fff;
}

.emoji-picker-content {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 24px 8px 8px;
    max-height: 360px;
}

.emoji-picker-content::-webkit-scrollbar {
    width: 6px;
}

.emoji-picker-content::-webkit-scrollbar-track {
    background: #1a1a1a;
}

.emoji-picker-content::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 3px;
}

.emoji-picker-content::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.emoji-category {
    margin-bottom: 12px;
}

.emoji-category-title {
    color: #aaa;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 6px;
    padding: 4px 0;
    border-bottom: 1px solid #333;
}

.emoji-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
}

.emoji-item {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    padding: 6px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s;
    user-select: none;
}

.emoji-item:hover {
    background: #333;
    transform: scale(1.2);
}

.emoji-item:active {
    transform: scale(1.1);
}

.chat-input-container {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    padding: 4px 6px 6px 6px;
    background: transparent;
    border: none;
}

/* Sidebar: chat input container matches chatroom (purple/blue border), equal left/right padding so input spacing matches beginning and end */
.sidebar #chat-screen .chat-input-container {
    background: rgba(26, 26, 26, 0.95);
    border: 1px solid rgba(102, 126, 234, 0.5);
    border-radius: 8px;
    padding: 4px 6px 6px 6px;
    box-shadow: 0 0 12px rgba(102, 126, 234, 0.12);
}


.chat-input-container input {
    flex: 1;
    margin-bottom: 0;
    width: 100%;
    padding: 6px 10px 6px 10px !important; /* equal left/right so end spacing matches beginning */
    font-size: 15px !important; /* readable default; JS applies user's chatFontSize */
    min-height: 28px !important;
    height: 28px !important;
    border: 1px solid rgba(102, 126, 234, 0.35) !important;
    background: #2a2a2a !important;
    border-radius: 4px !important;
    color: #fff !important;
}

.chat-input-container input:focus {
    outline: none !important;
    border-color: rgba(102, 126, 234, 0.5) !important;
}

/* Prevent mobile zoom when focusing chat inputs: iOS/Android zoom if font-size < 16px */
@media (max-width: 768px), (hover: none) {
    #chat-input,
    #private-message-input {
        font-size: 16px !important;
    }
}

.chat-buttons-group {
    display: flex;
    gap: 4px;
    width: 100%;
    justify-content: flex-end;
}

.chat-input-container button {
    width: auto;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 11px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-buttons-group button {
    margin-bottom: 0;
}

/* Rules + Ghost buttons: emoji above text, same height as other chat buttons (28px) */
.chat-buttons-group button.ghost-btn-stack {
    flex: 0 0 auto !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    padding: 2px 2px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    overflow: hidden !important;
}
/* Rules button: same style as Ghost (emoji on top, label below) but wider + bigger font, fixed width so it stays on the left when sidebar is dragged */
.chat-buttons-group #room-rules-display-btn.ghost-btn-stack {
    flex: 0 0 auto !important;
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
}
.chat-buttons-group #room-rules-display-btn.ghost-btn-stack .ghost-btn-emoji {
    font-size: 13px !important;
}
.chat-buttons-group #room-rules-display-btn.ghost-btn-stack .ghost-btn-label {
    font-size: 11px !important;
}
.chat-buttons-group button.ghost-btn-stack .ghost-btn-emoji {
    display: block !important;
    line-height: 1 !important;
    font-size: 11px !important;
}
.chat-buttons-group button.ghost-btn-stack .ghost-btn-label {
    display: block !important;
    font-size: 8px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

/* Profile Tooltip Styles */
.profile-tooltip {
    position: fixed;
    z-index: 10000;
    background: #1a1a1a;
    border: 2px solid #444;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
    min-width: 250px;
    max-width: 300px;
    pointer-events: none;
}

.profile-tooltip[data-pinned="true"] {
    pointer-events: auto;
}

.profile-tooltip-actions {
    pointer-events: auto;
}

.profile-tooltip-pm-btn {
    pointer-events: auto;
}

.profile-tooltip-close {
    pointer-events: auto;
    z-index: 10001;
}

.profile-tooltip-content {
    padding: 12px;
}

.profile-tooltip-header {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #333;
}

.profile-tooltip-picture {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #444;
    flex-shrink: 0;
}

.profile-tooltip-picture-placeholder {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    border: 2px solid #444;
    flex-shrink: 0;
}

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

.profile-tooltip-username {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 4px;
    word-break: break-word;
}

.profile-tooltip-role {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.profile-tooltip-bio {
    font-size: 12px;
    color: #ccc;
    line-height: 1.4;
    margin-bottom: 10px;
    word-wrap: break-word;
}

.profile-tooltip-bio-empty {
    font-size: 11px;
    color: #888;
    font-style: italic;
    margin-bottom: 10px;
}

.profile-tooltip-footer {
    font-size: 10px;
    color: #666;
    padding-top: 8px;
    border-top: 1px solid #333;
}

.username-hoverable:hover {
    text-decoration: underline;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #1a1a1a;
}

::-webkit-scrollbar-thumb {
    background: #3a3a3a;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #4a4a4a;
}

/* Landscape / short viewport: mic stays in bottom bar, before YouTube; bar above sidebar */
@media (max-height: 768px) {
    .bottom-controls:has(#microphone-container.mic-visible),
    .bottom-controls:has(.control-group-mic.mic-visible) {
        z-index: 2500 !important;
    }
    #microphone-container.mic-visible,
    #microphone-container[style*="display: block"],
    .control-group-mic.mic-visible,
    .control-group-mic[style*="display: block"] {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        order: 0 !important;
        position: relative !important;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #youtube-video-container {
        order: 1 !important;
    }
    #screen-share-container,
    .control-group-screen-share {
        order: 2 !important;
    }
    #start-broadcast-container,
    #stop-broadcast-container,
    .control-group-main {
        order: 3 !important;
    }
    #video-settings-container,
    .control-group-right {
        order: 4 !important;
    }
}

/* Mobile Optimizations */
/* Mobile Footer - Compact buttons to fit in one row */
@media (max-width: 768px) {
    /* Hide sound wave bars on mobile to improve performance */
    .promotion-sound-line,
    .sound-wave,
    .wave-bar {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    .homepage-footer {
        padding: 3px 4px 4px !important;
        gap: 1px !important;
        flex-direction: column !important;
    }
    
    .homepage-footer .copyright-text {
        font-size: 6px !important;
        white-space: nowrap;
        margin: 0 !important;
    }
    
    .homepage-footer-buttons {
        display: flex !important;
        gap: 2px !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        justify-content: center !important;
    }
    
    .contact-button,
    .donation-button,
    .footer-link-button {
        padding: 2px 6px !important;
        font-size: 7px !important;
        border-radius: 6px !important;
        white-space: nowrap;
        flex-shrink: 0;
        min-width: fit-content;
    }
    
    /* Hide fullscreen buttons on mobile (mobile browsers don't support fullscreen) */
    .fullscreen-btn,
    #app-fullscreen-btn {
        display: none !important;
    }
    
    /* Larger touch targets for mobile - minimum 48px for better usability */
    button {
        min-height: 48px !important;
        padding: 16px 24px !important;
        font-size: 17px !important;
        font-weight: 600 !important;
        border-radius: 16px !important;
        -webkit-tap-highlight-color: rgba(102, 126, 234, 0.3);
        touch-action: manipulation;
    }

    /* Home music toggle: bottom-right in header (override global mobile button sizing) */
    #home-music-toggle.home-music-toggle {
        position: absolute !important;
        top: auto !important;
        bottom: 10px !important;
        right: 10px !important;
        left: auto !important;
        transform: none !important;
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        max-width: 34px !important;
        max-height: 34px !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 50% !important;
        font-size: 0 !important;
        line-height: 1 !important;
        font-weight: 400 !important;
    }
    #home-music-toggle.home-music-toggle:hover {
        transform: scale(1.05) !important;
    }
    
    /* Sidebar row buttons (Users, Home, Gift, etc.) – keep compact on mobile portrait */
    #chat-full-sidebar-buttons button,
    #chat-full-sidebar-buttons .sidebar-row-btn-stack,
    #chat-full-sidebar-toggle {
        min-height: 24px !important;
        padding: 3px 4px !important;
        font-size: 9px !important;
        font-weight: 600 !important;
        border-radius: 4px !important;
    }
    #chat-full-sidebar-buttons .sidebar-row-label {
        font-size: 10px !important;
    }
    #chat-full-sidebar-buttons .sidebar-row-emoji {
        font-size: 1.15em !important;
    }
    #sidebar-users-pm-row .sidebar-row-label {
        font-size: 10px !important;
    }
    #sidebar-users-pm-row .sidebar-row-emoji {
        font-size: 1.15em !important;
    }
    #chat-full-sidebar-buttons {
        gap: 3px !important;
    }
    
    /* Mobile: row 1 = Home through Admin (one row); row 2 = Users + Private Messages */
    #chat-full-sidebar-buttons {
        flex-wrap: nowrap !important;
        width: 100% !important;
    }
    #chat-full-sidebar-buttons > button {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        max-width: none !important;
    }
    #chat-screen.chat-full-sidebar #sidebar-users-pm-row {
        margin-top: 4px !important;
        width: 100% !important;
    }
    
    /* Chat screen compact rows (Gift Shop, Promote, Leaderboards, Users, Leave) – keep compact on mobile */
    #chat-screen #gift-shop-btn-room,
    #chat-screen #promote-room-btn,
    #chat-screen #gift-leaderboards-btn-room,
    #chat-screen #camera-time-leaderboard-btn-room,
    #chat-screen #show-users-btn,
    #chat-screen #leave-room-btn {
        min-height: 28px !important;
        padding: 4px 6px !important;
        font-size: 10px !important;
        border-radius: 6px !important;
    }
    
    /* Home sidebar: compact View my camera time callout on mobile */
    #camera-time-giveaways-callout {
        margin-top: 8px !important;
        padding: 8px !important;
        border-radius: 8px !important;
    }
    #camera-time-giveaways-callout > div:first-child {
        font-size: 10px !important;
        margin-bottom: 2px !important;
    }
    #camera-time-giveaways-callout > div:nth-child(2) {
        font-size: 9px !important;
        margin-bottom: 6px !important;
    }
    #camera-time-link-all-users {
        padding: 6px 10px !important;
        font-size: 11px !important;
        border-radius: 6px !important;
    }
    
    /* Override for chat buttons - keep them compact and visible */
    .chat-buttons-group button,
    #send-btn,
    #emoji-btn,
    #font-size-btn,
    #chat-color-btn,
    #room-rules-display-btn,
    #transparent-ui-btn {
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
        padding: 6px 12px !important;
        font-size: 12px !important;
    }

    /* Portrait: chat reactions — fit one row, no scroll */
    @media (orientation: portrait) {
        .chat-reaction-pill,
        .channel-overlay-messages .chat-reaction-pill {
            flex: 1 1 0 !important;
            min-width: 0 !important;
            width: auto !important;
            max-width: none !important;
            height: 16px !important;
            min-height: 16px !important;
            max-height: 16px !important;
            padding: 0 !important;
            font-size: 8px !important;
            border-radius: 999px !important;
            gap: 1px !important;
        }
        .chat-reaction-pill .chat-reaction-emoji {
            font-size: 9px !important;
            line-height: 1 !important;
        }
        .chat-reaction-pill .chat-reaction-count {
            font-size: 7px !important;
            line-height: 1 !important;
        }
        .chat-message-reaction-pills,
        .channel-overlay-messages .chat-message-reaction-pills {
            display: flex !important;
            flex-wrap: nowrap !important;
            gap: 1px !important;
            width: 100% !important;
            overflow: hidden !important;
        }
        .chat-reaction-action-btn,
        .channel-overlay-messages .chat-reaction-action-btn {
            width: 100% !important;
            min-width: 0 !important;
            height: 22px !important;
            min-height: 22px !important;
            max-height: none !important;
            padding: 0 !important;
            font-size: 12px !important;
            border-radius: 999px !important;
            line-height: 1 !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            overflow: visible !important;
        }
        .chat-message-reaction-actions,
        .channel-overlay-messages .chat-message-reaction-actions,
        .chat-message:hover .chat-message-reaction-actions,
        .chat-message:focus-within .chat-message-reaction-actions {
            display: grid !important;
            grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
            gap: 1px !important;
            max-height: none !important;
            overflow: visible !important;
            flex-wrap: nowrap !important;
            white-space: nowrap !important;
            width: 100% !important;
            max-width: 100% !important;
        }
        .chat-message-reactions,
        .channel-overlay-messages .chat-message-reactions {
            gap: 3px !important;
            margin-top: 2px !important;
            overflow: visible !important;
        }
        .chat-message-line,
        .chat-message-line-content,
        .channel-overlay-messages .chat-message-line,
        .channel-overlay-messages .chat-message-line-content {
            overflow: visible !important;
        }
        .chat-message-has-delete .chat-message-line {
            padding-right: 18px !important;
        }
        .chat-message.has-avatar.message-single-line .chat-message-text-wrap {
            transform: none !important;
        }
        .chat-reaction-picker-btn {
            width: 26px !important;
            min-width: 26px !important;
            height: 26px !important;
            min-height: 26px !important;
            max-height: 26px !important;
            padding: 0 !important;
            font-size: 14px !important;
            border-radius: 6px !important;
        }
        .chat-reaction-picker {
            padding: 4px !important;
            gap: 3px !important;
        }
        .chat-message-admin-delete,
        .channel-overlay-messages .chat-message-admin-delete {
            width: 18px !important;
            min-width: 18px !important;
            height: 18px !important;
            min-height: 18px !important;
            max-height: 18px !important;
            padding: 0 !important;
            font-size: 12px !important;
            border-radius: 4px !important;
            top: 2px !important;
            right: 3px !important;
            line-height: 1 !important;
        }
    }
    
    input[type="text"],
    input[type="password"],
    input[type="email"],
    textarea {
        min-height: 48px !important;
        font-size: 16px !important; /* Prevents zoom on iOS */
        padding: 16px !important;
        border-radius: 12px !important;
    }
    
    /* Top controls - better mobile layout */
    .top-controls {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
        top: 10px;
        left: 10px;
        right: 10px;
        transform: none;
        max-width: 100%;
        padding: 10px;
        background: rgba(26, 26, 26, 0.95);
        backdrop-filter: blur(10px);
        border-radius: 16px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    }
    
    .top-controls.show {
        display: flex;
    }
    
    .top-control-btn {
        padding: 6px 12px !important;
        font-size: 10px !important;
        min-height: 36px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        flex: 1;
        min-width: auto;
        border-radius: 12px !important;
    }
    
    /* Bottom controls - FIXED ACTION BAR for mobile */
    .bottom-controls {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
        padding: 12px 10px !important;
        max-width: 100% !important;
        background: transparent !important;
        backdrop-filter: none !important;
        border-top: none !important;
        box-shadow: none !important;
        z-index: 1001 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .bottom-controls.show {
        display: flex !important;
    }
    
    /* Bottom controls: one row – YouTube (left of Stop), Start/Stop, Settings. Even gaps throughout. */
    .bottom-controls {
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
        position: relative;
        gap: 10px;
        padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0)) !important;
    }
    
    /* YouTube + Flip: left side of Stop, same row – match Stop button height (56px) for alignment */
    .control-group-left,
    #youtube-video-container {
        flex: 0 0 auto;
        order: 1;
        width: auto;
        max-width: none;
        height: 56px !important;
        min-height: 56px !important;
        display: flex !important;
        justify-content: center;
        align-items: center;
        align-self: center;
        gap: 10px;
        margin: 0;
        padding: 0;
        border: none;
        box-sizing: border-box;
    }
    
    /* Screen share hidden via body.is-mobile-device (works in any orientation) */
    
    /* Start, Stop, Settings: same row – don't let main grow so no extra gap before Settings */
    #start-broadcast-container {
        flex: 0 1 auto;
        order: 2;
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: 0;
    }
    
    #stop-broadcast-container {
        order: 2;
        flex: 0 1 auto;
    }
    
    .control-group-right {
        flex: 0 0 auto;
        order: 3;
        align-self: center;
    }
    
    /* YouTube: match Settings button style */
    #youtube-video-container #youtube-video-btn,
    #youtube-video-container #drawing-board-btn {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-shrink: 0;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        box-sizing: border-box !important;
    }
    /* Flip camera: same style as Settings; nudge down to align with Stop button */
    #youtube-video-container #flip-camera-btn {
        width: 52px !important;
        height: 56px !important;
        min-width: 52px !important;
        min-height: 56px !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-shrink: 0;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 18px !important;
        line-height: 1 !important;
        align-self: center !important;
        box-sizing: border-box !important;
        border: none !important;
        border-radius: 12px !important;
        background: linear-gradient(135deg, #64748b 0%, #475569 100%) !important;
        color: white !important;
        box-shadow: 0 4px 15px rgba(71, 85, 105, 0.4) !important;
        cursor: pointer !important;
        transform: translateY(6px) !important;
    }
    #youtube-video-container #flip-camera-btn:hover {
        transform: translateY(4px) scale(1.02) !important;
        box-shadow: 0 6px 20px rgba(71, 85, 105, 0.5) !important;
    }
    /* Flip camera button: center camera emoji in button */
    #flip-camera-btn .flip-camera-icon {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        display: block !important;
    }
    #flip-camera-btn .flip-camera-icon-base {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, calc(-50% - 4px)) !important;
        font-size: 38px !important;
        line-height: 1 !important;
    }
    #flip-camera-btn .flip-camera-icon-overlay {
        transform: translate(calc(-50% + 3px), -50%) !important;
    }
    
    /* Main row: Screen share same size as other icons */
    #screen-share-container #screen-share-btn {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        margin: 0 !important;
    }
    
    /* PRIMARY ACTION BUTTON - Start/Stop Broadcast (most prominent) */
    #start-broadcast-btn,
    #stop-broadcast-btn {
        padding: 18px 28px !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        min-height: 56px !important;
        width: 100%;
        max-width: 280px;
        background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
        box-shadow: 0 6px 25px rgba(34, 197, 94, 0.5),
                    0 0 15px rgba(34, 197, 94, 0.3) !important;
        border-radius: 16px !important;
        letter-spacing: 0.5px;
    }
    
    #stop-broadcast-btn {
        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
        box-shadow: 0 6px 25px rgba(239, 68, 68, 0.5),
                    0 0 15px rgba(239, 68, 68, 0.3) !important;
    }
    
    /* MICROPHONE BUTTON - On mobile, hide mic until broadcasting starts (mic doesn't work until then) */
    #microphone-container,
    .control-group-mic {
        display: none !important; /* Force hidden by default on mobile */
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    /* Show mic only when broadcasting - JS sets display: block + .mic-visible. Fixed so it floats above sidebar. */
    #microphone-container.mic-visible,
    #microphone-container[style*="display: block"],
    .control-group-mic.mic-visible,
    .control-group-mic[style*="display: block"] {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: fixed !important;
        left: 50% !important;
        bottom: 100px !important;
        top: auto !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        -webkit-transform: translateX(-50%) !important;
        order: 0 !important;
        z-index: 2500 !important;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    
    /* Portrait: mic lower (closer to bottom controls); no pulse – solid green only */
    @media (max-width: 768px) and (orientation: portrait) {
        #microphone-container.mic-visible,
        #microphone-container[style*="display: block"],
        .control-group-mic.mic-visible,
        .control-group-mic[style*="display: block"] {
            bottom: 75px !important;
        }
        #microphone-btn,
        #microphone-btn.mic-active,
        #microphone-btn:active.mic-active {
            animation: none !important;
        }
    }
    
    /* Landscape: mic higher so not too low */
    @media (max-width: 768px) and (orientation: landscape) {
        #microphone-container.mic-visible,
        #microphone-container[style*="display: block"],
        .control-group-mic.mic-visible,
        .control-group-mic[style*="display: block"] {
            bottom: 200px !important;
        }
    }
    
    #microphone-btn {
        width: 72px !important;
        height: 72px !important;
        min-width: 72px !important;
        min-height: 72px !important;
        padding: 0 !important;
        font-size: 32px !important;
        border-radius: 50% !important;
        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
        box-shadow: 0 8px 30px rgba(59, 130, 246, 0.5),
                    0 0 20px rgba(37, 99, 235, 0.4),
                    inset 0 2px 10px rgba(255, 255, 255, 0.2) !important;
        border: 3px solid rgba(255, 255, 255, 0.3) !important;
        margin: 0 !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        animation: mic-pulse 2s ease-in-out infinite !important;
        touch-action: none !important;
        -webkit-tap-highlight-color: transparent !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        position: relative !important;
        z-index: 2501 !important;
    }
    
    #microphone-btn:hover {
        transform: scale(1.1) !important;
        box-shadow: 0 10px 40px rgba(59, 130, 246, 0.6),
                    0 0 30px rgba(37, 99, 235, 0.5) !important;
    }
    
    #microphone-btn:active,
    #microphone-btn.mic-active {
        animation: mic-pulse 0.9s ease-in-out infinite !important;
        background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    }
    
    #microphone-btn.mic-inactive {
        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
        transform: scale(1) !important;
    }
    
    /* Green-only pulse when active (no blue in animation – avoids flicker) */
    @keyframes mic-pulse {
        0%, 100% {
            box-shadow: 0 8px 30px rgba(34, 197, 94, 0.5),
                        0 0 20px rgba(22, 163, 74, 0.4),
                        inset 0 2px 10px rgba(255, 255, 255, 0.2);
        }
        50% {
            box-shadow: 0 8px 35px rgba(34, 197, 94, 0.7),
                        0 0 25px rgba(22, 163, 74, 0.6),
                        inset 0 2px 10px rgba(255, 255, 255, 0.2);
        }
    }
    
    /* Mic open label - better positioning on mobile (above floating mic) */
    .mic-open-label {
        font-size: 11px !important;
        padding: 4px 8px !important;
        border-radius: 6px !important;
        top: -20px !important;
        right: auto !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        min-height: 24px !important;
        white-space: nowrap;
        background: rgba(0, 0, 0, 0.8) !important;
        border: 1px solid rgba(245, 158, 11, 0.3) !important;
    }
    
    /* SECONDARY BUTTONS - Settings, YouTube, etc. */
    #video-settings-btn,
    #youtube-video-btn {
        padding: 16px 24px !important;
        font-size: 16px !important;
        min-height: 52px !important;
        flex: 1;
        min-width: 120px;
        border-radius: 14px !important;
    }
    
    /* Sidebar - half screen width on mobile (match ghost; override any inline width from JS). In ghost mode width is not !important so user can drag to resize. */
    body:not(.ghost-ui) .sidebar {
        width: 50vw !important;
        min-width: 50vw !important;
        max-width: min(350px, 100vw) !important;
    }
    /* Mobile: sidebar transparent when in room (same as desktop) without needing ghost mode */
    body:has(#chat-screen.active):not(.ghost-ui) .sidebar {
        background: transparent !important;
        border-left-color: transparent !important;
    }
    .sidebar {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        z-index: 2000;
        transform: translate3d(100%, 0, 0);
        -webkit-transform: translate3d(100%, 0, 0);
        transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
        -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
        will-change: transform;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    }
    
    /* When sidebar is open, ensure toggle button area is not blocked */
    .sidebar:not(.hidden) {
        /* Leave space for toggle button on the left edge */
        padding-left: 0;
    }
    
    .sidebar:not(.hidden) {
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
    }
    
    .sidebar.hidden {
        transform: translate3d(100%, 0, 0);
        -webkit-transform: translate3d(100%, 0, 0);
    }
    
    /* Mobile: left + right rail toggles — same size, same vertical slot (viewport center) */
    .web-left-sidebar-show-btn,
    .sidebar-toggle {
        --edge-rail-toggle-w: 24px;
        --edge-rail-toggle-h: 34px;
        --edge-rail-toggle-font: 11px;
        top: 50% !important;
        bottom: auto !important;
        transform: translateY(-50%) !important;
        -webkit-transform: translateY(-50%) !important;
        will-change: right, left, transform;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }
    .web-left-sidebar-show-btn {
        z-index: 2601 !important;
        border-radius: 0 6px 6px 0 !important;
    }
    .sidebar-toggle {
        z-index: 2001;
        border-radius: 6px 0 0 6px !important;
        color: #949ba4 !important;
        overflow: visible !important;
    }
    body:has(#chat-screen.active) #sidebar-toggle,
    body:has(#rooms-screen.active) #sidebar-toggle,
    body:has(#login-screen.active) #sidebar-toggle {
        transform: translateY(-50%) !important;
        -webkit-transform: translateY(-50%) !important;
    }
    
    /* Chatroom: arrow above chat + Users button – much smaller on mobile */
    #chat-full-sidebar-toggle {
        padding: 2px 6px !important;
        font-size: 10px !important;
        min-height: 22px !important;
        min-width: 36px !important;
        max-width: 50% !important;
    }
    #chat-screen.chat-full-sidebar #chat-full-sidebar-toggle {
        flex: 0 0 24px !important;
        width: 24px !important;
        max-width: 24px !important;
        min-width: 24px !important;
        min-height: 22px !important;
        padding: 2px 4px !important;
        font-size: 9px !important;
    }
    #chat-screen.chat-full-sidebar #sidebar-users-full-toggle {
        min-width: 36px !important;
        padding: 2px 6px !important;
        font-size: 9px !important;
        font-weight: 600 !important;
        min-height: 22px !important;
    }
    #chat-full-sidebar-buttons {
        gap: 4px !important;
    }
    
    /* Promoted slideshow - show 2 cards on mobile, fixed width regardless of sidebar */
    .promoted-slideshow {
        padding: 12px 0 !important;
        margin-bottom: 20px !important;
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
    }
    
    /* Slideshow dots: small dots, lower so they don't cover viewers */
    #promoted-slideshow .slideshow-indicators {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 4px !important;
        bottom: 4px !important;
    }
    
    #promoted-slideshow .slideshow-indicator,
    #promoted-slideshow .slideshow-indicator.active,
    #promoted-slideshow .slideshow-indicator:hover {
        width: 6px !important;
        height: 6px !important;
        min-width: 6px !important;
        max-width: 6px !important;
        min-height: 6px !important;
        max-height: 6px !important;
        padding: 0 !important;
        border-width: 1px !important;
        border-radius: 50% !important;
        transform: none !important;
        -webkit-transform: none !important;
    }
    
    .promoted-slideshow .slideshow-controls {
        display: none !important;
    }
    
    .promoted-slideshow-container {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        border-radius: 0 !important;
        touch-action: pan-y !important;
        min-height: 400px !important;
    }
    
    .promoted-slideshow-track {
        gap: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        align-items: flex-start !important;
        flex-shrink: 0 !important;
        /* width set by JS for mobile (N*100%) so slides sit side by side */
    }
    
    .promoted-slide {
        padding: 0 8px !important;
        margin: 0 !important;
        gap: 8px !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 400px !important;
        /* flex and max-width set by JS on mobile so each slide is (100/N)% of track */
    }
    
    .promoted-slide-card {
        box-sizing: border-box !important;
        width: 100% !important;
        margin: 0 !important;
        max-width: 100% !important;
        height: 360px !important;
        min-height: 360px !important;
        max-height: 360px !important;
        display: flex !important;
        flex-direction: column !important;
        flex: 0 0 auto !important;
    }
    
    .promoted-slide-title {
        font-size: 16px !important;
        flex-shrink: 0 !important;
    }
    
    .promoted-slide-header-stats {
        flex-shrink: 0 !important;
    }
    
    .promoted-slide-preview {
        height: 168px !important;
        min-height: 168px !important;
        max-height: 168px !important;
        flex: 0 0 auto !important;
    }
    
    .promoted-slide-content {
        padding: 10px 12px !important;
        gap: 8px !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        margin-top: auto !important;
    }
    
    .promoted-slide-bio {
        flex: 1 1 auto !important;
        min-height: 88px !important;
        height: auto !important;
        max-height: none !important;
    }

    .promoted-slide-description {
        font-size: 12px !important;
        -webkit-line-clamp: 6 !important;
        line-clamp: 6 !important;
    }

    .promoted-slide-gifts {
        padding: 4px 6px !important;
        min-height: 24px !important;
    }
    
    .promoted-slide-footer {
        padding: 4px 0 !important;
    }
    
    .promoted-slide-footer span {
        font-size: 12px !important;
    }
    
    .promoted-join-btn {
        padding: 6px 10px !important;
        font-size: 12px !important;
        min-height: 0 !important;
        line-height: 1.2 !important;
    }

    .home-room-join-btn {
        padding: 6px 10px !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
    }

    .home-room-join-wrap {
        padding: 4px 8px 2px !important;
    }
    
    .promoted-slideshow {
        padding: 12px 0 !important;
        margin-bottom: 20px !important;
    }
    
    .promoted-slideshow-container {
        margin-bottom: 10px !important;
        padding: 0 !important;
        width: 100% !important;
    }
    
    /* Video grid - simpler layout on mobile, allow scrolling for multiple rows */
    #video-container {
        gap: 1px;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        height: calc(100vh - 140px) !important; /* Account for bottom controls and spacing */
        min-height: calc(100vh - 140px) !important;
        max-height: none !important; /* Allow container to grow to fit all rows */
    }
    
    @media (max-width: 768px) and (orientation: portrait) {
        #video-container {
            max-height: none !important; /* Allow container to grow so all feeds visible */
        }
        .video-wrapper {
            min-height: 100px !important;
        }
    }
    
    /* Ensure video wrappers maintain proper sizing in grid */
    .video-wrapper {
        min-height: 200px !important; /* Minimum height for each video cell */
        height: 100% !important;
    }
    
    /* Mobile video fixes */
    .video-wrapper video {
        -webkit-playsinline: true !important;
        -moz-playsinline: true !important;
        playsinline: true !important;
        display: block !important;
        visibility: visible !important;
        width: 100% !important;
        height: 100% !important;
        object-position: center center !important;
    }
    
    /* Ensure video containers are visible on mobile */
    .video-wrapper {
        display: flex !important;
        visibility: visible !important;
    }
    
    /* Homepage rooms - fewer columns on mobile */
    .home-rooms-list {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
    }
    
    .home-room-card {
        padding: 0;
        flex-direction: column;
        text-align: center;
        height: 420px;
        min-height: 420px;
        max-height: 420px;
    }
    
    .home-room-thumb {
        width: 100%;
        height: 120px;
        margin-bottom: 8px;
    }
    
    /* Media controls panel - floating on mobile (old way, no full overlay) */
    .media-controls-panel {
        inset: auto !important;
        top: auto !important;
        left: 10px !important;
        right: 10px !important;
        bottom: 80px !important;
        min-width: 0 !important;
        max-width: none !important;
        width: calc(100% - 20px) !important;
        max-height: calc(100vh - 120px) !important;
        padding: 10px 10px 0 !important;
        border-radius: 12px !important;
        background: #2a2a2a !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
        border: 1px solid rgba(255,255,255,0.08) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    /* Compact vertical sidebar (tabs on the left) – all tabs visible at a glance */
    .media-controls-panel .settings-layout {
        flex-direction: row;
        margin: 0 -8px -8px;
        border-radius: 0 0 10px 10px;
    }
    .media-controls-panel .settings-sidebar {
        width: 72px !important;
        min-width: 72px !important;
        flex-direction: column !important;
        flex-shrink: 0;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 4px 0;
        border-right: 1px solid rgba(255,255,255,0.06);
        border-bottom: none;
        gap: 0;
    }
    .media-controls-panel .settings-nav-item {
        padding: 6px 6px;
        font-size: 10px;
        line-height: 1.2;
        white-space: nowrap;
        flex-shrink: 0;
        width: 100%;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
    }
    .media-controls-panel .settings-nav-item .nav-icon {
        font-size: 16px;
        display: block;
        margin-right: 0;
    }
    .media-controls-panel .settings-content {
        padding: 6px 8px 8px;
        max-height: calc(100vh - 200px);
        flex: 1;
        min-width: 0;
    }
    .media-controls-header {
        margin-bottom: 4px !important;
        padding: 8px 12px 6px !important;
    }
    .media-controls-header h3 {
        font-size: 13px !important;
    }
    .media-controls-panel .close-btn {
        width: 22px !important;
        height: 22px !important;
        font-size: 14px !important;
    }
    .media-controls-panel .settings-section {
        margin-bottom: 6px !important;
    }
    .media-controls-panel .settings-section-header {
        padding: 5px 6px !important;
        margin-bottom: 3px !important;
    }
    .media-controls-panel .settings-section-header .section-title {
        font-size: 12px !important;
    }
    .media-controls-panel .settings-section-content {
        padding-left: 2px !important;
        padding-right: 2px !important;
        padding-bottom: 2px !important;
    }
    .media-controls-panel .control-group {
        margin-bottom: 4px !important;
    }
    .media-controls-panel .control-group label {
        margin-bottom: 2px !important;
        font-size: 10px !important;
    }
    .media-controls-panel .device-select {
        padding: 5px 6px !important;
        font-size: 10px !important;
        min-height: 28px !important;
    }
    .media-controls-panel .control-btn {
        padding: 6px 8px !important;
        margin-bottom: 4px !important;
        font-size: 10px !important;
    }
    .media-controls-panel .control-btn-apply {
        margin-top: 4px !important;
        padding: 6px 8px !important;
        font-size: 11px !important;
        min-height: 28px !important;
    }
    .media-controls-panel small {
        margin-top: 1px !important;
        font-size: 8px !important;
    }
    .media-controls-panel .toggle-switch .toggle-label {
        font-size: 10px !important;
    }
    .media-controls-panel .toggle-switch .toggle-status {
        font-size: 9px !important;
        padding: 1px 4px !important;
    }
    .media-controls-panel .toggle-switch .slider-round {
        width: 36px !important;
        height: 18px !important;
    }
    .media-controls-panel .toggle-switch .slider-round::before {
        width: 14px !important;
        height: 14px !important;
    }
    .media-controls-panel .toggle-switch input:checked + .slider-round::before {
        transform: translateX(18px) !important;
    }
    .media-controls-panel #profile-content textarea,
    .media-controls-panel #profile-content input[type="text"] {
        min-height: 28px !important;
        padding: 4px 6px !important;
        font-size: 10px !important;
    }
    .media-controls-panel #profile-content label {
        font-size: 9px !important;
    }
    
    /* Chat messages - larger text */
    .chat-message {
        font-size: 14px;
        padding: 10px;
    }
    
    /* Room creation inputs */
    #room-creation input {
        min-height: 44px;
        font-size: 16px;
    }
    
    /* Active/pressed state for mobile (better feedback) */
    #start-broadcast-btn:active,
    #stop-broadcast-btn:active,
    #video-settings-btn:active,
    #youtube-video-btn:active,
    #microphone-btn:active,
    .top-control-btn:active {
        transform: scale(0.96) !important;
        opacity: 0.9;
    }
    
    /* Video controls - compact on mobile for better UX */
    .video-control-btn {
        min-height: 32px !important;
        padding: 6px 10px !important;
        font-size: 11px !important;
        border-radius: 6px !important;
        margin: 2px !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8), 0 2px 8px rgba(0, 0, 0, 0.6) !important;
    }
    /* Keep fullscreen and filter overlay as same 32×32 icon size on mobile */
    .video-control-btn.fullscreen-btn,
    .video-control-btn.filter-overlay-btn {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        padding: 0 !important;
        box-shadow: none !important;
    }
    
    /* Same 32px size as fullscreen/filter for report, refresh, block, stop stream, ban */
    .video-control-btn.block-btn,
    .video-control-btn.report-btn,
    .video-control-btn.refresh-btn,
    .video-control-btn.stop-stream-btn,
    .video-control-btn.ban-btn {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        padding: 0 !important;
        font-size: 9px !important;
        border-radius: 6px !important;
        margin: 2px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
    }
    
    /* User list buttons - more compact on mobile */
    .role-btn {
        padding: 2px 6px !important;
        font-size: 9px !important;
        border-radius: 3px !important;
        gap: 2px !important;
        min-height: 24px !important;
    }
    
    /* User list items - more compact on mobile */
    #user-list-container > div {
        padding: 3px 4px !important;
        margin: 1px 0 !important;
        font-size: 10px !important;
    }
    
    /* User list username text - smaller on mobile */
    #user-list-container span {
        font-size: 10px !important;
    }
    
    /* Sidebar buttons - very compact, chat-focused styling (applies to both homepage and room) */
    .app-fullscreen-btn,
    #create-room-btn,
    #confirm-create-btn,
    #cancel-create-btn,
    #show-users-btn,
    #leave-room-btn,
    #apply-username-btn,
    #login-submit-btn,
    #register-submit-btn,
    #back-to-login-btn,
    #refresh-rooms-btn,
    #back-from-payment-history-btn,
    #refresh-payment-history-btn,
    #logout-btn,
    #payment-history-btn,
    #gift-shop-btn,
    #gift-shop-btn-room,
    #promote-room-btn,
    #promote-room-btn-home,
    #gift-leaderboards-btn-room,
    #camera-time-leaderboard-btn-room,
    #private-messages-btn {
        min-height: 20px !important;
        padding: 3px 6px !important;
        font-size: 9px !important;
        font-weight: 600 !important;
        border-radius: 6px !important;
        background: rgba(102, 126, 234, 0.2) !important;
        color: #aaa !important;
        border: 1px solid rgba(102, 126, 234, 0.3) !important;
        box-shadow: none !important;
        transition: all 0.2s ease !important;
        width: 100% !important;
        margin: 1px 0 !important;
    }
    
    .app-fullscreen-btn:hover,
    #create-room-btn:hover,
    #confirm-create-btn:hover,
    #show-users-btn:hover,
    #leave-room-btn:hover,
    #apply-username-btn:hover,
    #login-submit-btn:hover,
    #register-submit-btn:hover,
    #logout-btn:hover,
    #payment-history-btn:hover,
    #gift-shop-btn:hover,
    #gift-shop-btn-room:hover,
    #promote-room-btn:hover,
    #promote-room-btn-home:hover,
    #gift-leaderboards-btn-room:hover,
    #camera-time-leaderboard-btn-room:hover,
    #private-messages-btn:hover {
        background: rgba(102, 126, 234, 0.3) !important;
        color: #fff !important;
        border-color: rgba(102, 126, 234, 0.5) !important;
    }
    
    #create-room-btn {
        background: rgba(34, 197, 94, 0.15) !important;
        color: #4ade80 !important;
        border-color: rgba(34, 197, 94, 0.3) !important;
    }
    
    #create-room-btn:hover {
        background: rgba(34, 197, 94, 0.25) !important;
        color: #22c55e !important;
    }
    
    #leave-room-btn,
    #logout-btn {
        background: rgba(239, 68, 68, 0.15) !important;
        color: #f87171 !important;
        border-color: rgba(239, 68, 68, 0.3) !important;
    }
    
    #leave-room-btn:hover,
    #logout-btn:hover {
        background: rgba(239, 68, 68, 0.25) !important;
        color: #ef4444 !important;
    }
    
    #payment-history-btn {
        background: rgba(102, 126, 234, 0.15) !important;
        color: #a78bfa !important;
        border-color: rgba(102, 126, 234, 0.3) !important;
    }
    
    #payment-history-btn:hover {
        background: rgba(102, 126, 234, 0.25) !important;
        color: #8b5cf6 !important;
    }
    
    #gift-shop-btn,
    #gift-shop-btn-room {
        background: rgba(245, 158, 11, 0.15) !important;
        color: #fbbf24 !important;
        border-color: rgba(245, 158, 11, 0.3) !important;
    }
    
    #gift-shop-btn:hover,
    #gift-shop-btn-room:hover {
        background: rgba(245, 158, 11, 0.25) !important;
        color: #f59e0b !important;
    }
    
    #promote-room-btn,
    #promote-room-btn-home {
        background: rgba(102, 126, 234, 0.15) !important;
        color: #a78bfa !important;
        border-color: rgba(102, 126, 234, 0.3) !important;
    }
    
    #promote-room-btn:hover,
    #promote-room-btn-home:hover {
        background: rgba(102, 126, 234, 0.25) !important;
        color: #8b5cf6 !important;
    }
    
    #gift-leaderboards-btn-room {
        background: rgba(245, 158, 11, 0.15) !important;
        color: #fbbf24 !important;
        border-color: rgba(245, 158, 11, 0.3) !important;
    }
    #gift-leaderboards-btn-room:hover {
        background: rgba(245, 158, 11, 0.25) !important;
        color: #f59e0b !important;
    }
    #camera-time-leaderboard-btn-room {
        background: rgba(16, 185, 129, 0.15) !important;
        color: #34d399 !important;
        border-color: rgba(16, 185, 129, 0.3) !important;
    }
    #camera-time-leaderboard-btn-room:hover {
        background: rgba(16, 185, 129, 0.25) !important;
        color: #10b981 !important;
    }
    
    #private-messages-btn {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%) !important;
        color: #aaa !important;
    }
    
    #private-messages-btn:hover {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.3) 0%, rgba(118, 75, 162, 0.3) 100%) !important;
        color: #fff !important;
    }
    
    .app-fullscreen-btn:active,
    #create-room-btn:active,
    #confirm-create-btn:active,
    #cancel-create-btn:active,
    #show-users-btn:active,
    #leave-room-btn:active,
    #apply-username-btn:active,
    #login-submit-btn:active,
    #register-submit-btn:active,
    #logout-btn:active,
    #payment-history-btn:active,
    #gift-shop-btn:active,
    #gift-shop-btn-room:active,
    #promote-room-btn:active,
    #promote-room-btn-home:active,
    #gift-leaderboards-btn-room:active,
    #camera-time-leaderboard-btn-room:active,
    #private-messages-btn:active {
        transform: scale(0.98) !important;
    }
    
    /* Very compact chat input container on mobile */
    .chat-input-container {
        flex-direction: column !important;
        gap: 0 !important;
        padding: 4px 4px 6px 4px !important;
        background: transparent !important;
        border: none !important;
        border-top: none !important;
        border-bottom: none !important;
        position: relative !important;
        z-index: 100 !important; /* Ensure it's above other elements */
        flex-shrink: 0 !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }
    
    /* Very compact chat input field on mobile */
    #chat-input {
        min-height: 24px !important;
        font-size: 16px !important; /* 16px prevents iOS auto-zoom */
        padding: 4px 8px 4px 8px !important; /* equal left/right so end matches beginning */
        border-radius: 4px !important;
        border: 1px solid rgba(245, 158, 11, 0.2) !important;
        background: rgba(26, 26, 26, 0.9) !important;
        color: #fff !important;
        width: 100% !important;
        box-sizing: border-box !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: rgba(245, 158, 11, 0.3);
        z-index: 100 !important;
        position: relative !important;
    }
    
    #chat-input:focus {
        outline: none !important;
        border-color: rgba(245, 158, 11, 0.5) !important;
        background: rgba(26, 26, 26, 0.9) !important;
        pointer-events: auto !important;
    }
    
    #chat-input:disabled,
    #chat-input[disabled] {
        pointer-events: none !important;
        opacity: 0.5 !important;
    }
    
    #chat-input:not(:disabled) {
        pointer-events: auto !important;
    }
    
    /* Very compact buttons below input on mobile - smaller so Rules/font/emoji/Send all fit */
    .chat-buttons-group {
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-end !important;
        gap: 3px !important;
        width: 100% !important;
        margin-top: 2px !important;
        margin-bottom: 0 !important;
        flex-shrink: 0 !important;
        position: relative !important;
        z-index: 11 !important;
    }
    
    #send-btn,
    #emoji-btn,
    #font-size-btn,
    #chat-color-btn,
    #room-rules-display-btn,
    #transparent-ui-btn {
        height: 26px !important;
        min-height: 26px !important;
        max-height: 26px !important;
        min-width: 28px !important;
        padding: 4px 6px !important;
        font-size: 10px !important;
        border-radius: 4px !important;
        background: rgba(102, 126, 234, 0.5) !important;
        border: 1px solid rgba(102, 126, 234, 0.6) !important;
        color: #fff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        position: relative !important;
        z-index: 12 !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        width: auto !important;
    }
    
    /* Color button stays green on mobile but same shape/size as others */
    #chat-color-btn {
        background: linear-gradient(135deg, #0d9488 0%, #059669 100%) !important;
        border: 1px solid rgba(13, 148, 136, 0.7) !important;
    }
    
    #send-btn:hover,
    #emoji-btn:hover,
    #font-size-btn:hover {
        background: rgba(102, 126, 234, 0.3) !important;
        color: #fff !important;
        border-color: rgba(102, 126, 234, 0.5) !important;
    }
    
    #chat-color-btn:hover {
        background: linear-gradient(135deg, #0faca0 0%, #06a876 100%) !important;
        border-color: rgba(13, 148, 136, 0.9) !important;
        color: #fff !important;
    }
    
    #send-btn {
        flex: 0 0 auto;
        min-width: 38px !important;
    }
    
    #emoji-btn {
        flex: 0 0 auto;
        font-size: 10px !important;
    }
    
    #font-size-btn {
        flex: 0 0 auto;
        font-size: 9px !important;
        font-weight: 600 !important;
    }
    
    #chat-color-btn {
        flex: 0 0 auto;
        font-size: 10px !important;
    }
    
    /* Rules + Ghost on mobile: icon-only so they fit - override desktop .ghost-btn-stack */
    .chat-buttons-group #room-rules-display-btn.ghost-btn-stack,
    .chat-buttons-group #transparent-ui-btn.ghost-btn-stack,
    #chat-screen .chat-buttons-group #transparent-ui-btn,
    .sidebar #chat-screen .chat-buttons-group #transparent-ui-btn {
        flex: 0 0 auto !important;
        width: 28px !important;
        min-width: 28px !important;
        max-width: 28px !important;
        height: 26px !important;
        min-height: 26px !important;
        max-height: 26px !important;
        padding: 4px !important;
        overflow: hidden !important;
        flex-direction: row !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .chat-buttons-group #room-rules-display-btn .ghost-btn-label,
    .chat-buttons-group #transparent-ui-btn .ghost-btn-label,
    #chat-screen .chat-buttons-group #transparent-ui-btn .ghost-btn-label {
        display: none !important;
    }
    .chat-buttons-group #room-rules-display-btn .ghost-btn-emoji,
    .chat-buttons-group #transparent-ui-btn .ghost-btn-emoji,
    #chat-screen .chat-buttons-group #transparent-ui-btn .ghost-btn-emoji {
        display: block !important;
        font-size: 14px !important;
        line-height: 1 !important;
    }
    
    /* Emoji picker on mobile: same 5-column, ~5-row layout as desktop (chatroom + PM) */
    .emoji-picker {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: none !important;
        max-height: 380px !important;
    }
    #chat-screen .chat-input-container .emoji-picker,
    .sidebar #chat-screen .chat-input-container .emoji-picker {
        bottom: 75px !important;
    }
    /* Chat color picker – move left on mobile so it doesn't get cut off */
    .chat-color-picker,
    .chat-input-container .chat-color-picker,
    #chat-screen .chat-input-container .chat-color-picker,
    .sidebar #chat-screen .chat-input-container .chat-color-picker {
        left: 0 !important;
        right: auto !important;
        max-width: calc(100% - 8px) !important;
        width: calc(100% - 8px) !important;
        min-width: 0 !important;
        bottom: 75px !important;
    }
    /* Chat color picker inner – much smaller buttons and controls on mobile */
    .chat-color-picker .chat-color-picker-header {
        padding: 4px 8px !important;
        font-size: 10px !important;
    }
    .chat-color-picker .close-chat-color-btn {
        min-height: 0 !important;
        padding: 2px 6px !important;
        font-size: 12px !important;
    }
    .chat-color-picker .chat-color-picker-content {
        padding: 8px !important;
        gap: 6px !important;
    }
    .chat-color-picker .chat-color-row {
        gap: 6px !important;
    }
    .chat-color-picker .chat-color-row label {
        font-size: 9px !important;
        min-width: 52px !important;
    }
    .chat-color-picker .chat-color-row input[type="color"] {
        width: 28px !important;
        height: 22px !important;
        padding: 1px !important;
    }
    .chat-color-picker .chat-color-default-btn {
        min-height: 0 !important;
        padding: 2px 6px !important;
        font-size: 9px !important;
    }
    /* Font size picker – same as color picker: left, fit width, smaller inner on mobile */
    .font-size-picker,
    .chat-input-container .font-size-picker,
    #chat-screen .chat-input-container .font-size-picker,
    .sidebar #chat-screen .chat-input-container .font-size-picker {
        left: 0 !important;
        right: auto !important;
        max-width: calc(100% - 8px) !important;
        width: calc(100% - 8px) !important;
        min-width: 0 !important;
        bottom: 75px !important;
    }
    .font-size-picker .font-size-picker-header {
        padding: 4px 8px !important;
        font-size: 10px !important;
    }
    .font-size-picker .close-font-size-btn {
        min-height: 0 !important;
        padding: 2px 6px !important;
        font-size: 12px !important;
    }
    .font-size-picker .font-size-picker-content {
        padding: 8px !important;
        gap: 6px !important;
    }
    .font-size-picker .font-size-display,
    .font-size-picker #font-size-value {
        font-size: 10px !important;
    }
    .font-size-picker #font-size-slider {
        height: 4px !important;
    }
    .font-size-picker #font-size-slider::-webkit-slider-thumb {
        width: 14px !important;
        height: 14px !important;
    }
    .font-size-picker #font-size-slider::-moz-range-thumb {
        width: 14px !important;
        height: 14px !important;
    }
    .emoji-picker-content {
        max-height: 340px !important; /* ~5 rows visible */
    }
    .emoji-grid {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 6px !important;
    }
    .emoji-item {
        font-size: 22px !important;
        padding: 8px !important;
        min-height: 40px !important;
        min-width: 40px !important;
    }
    
    /* Room action buttons in sidebar - compact (match original mobile size) */
    #show-users-btn,
    #leave-room-btn {
        width: 100% !important;
        margin: 1px 0 !important;
        padding: 3px 6px !important;
        font-size: 9px !important;
        min-height: 20px !important;
        border-radius: 6px !important;
    }
    
    #show-users-btn {
        font-size: 14px !important;
        line-height: 1 !important;
        padding: 3px !important;
    }
    
    #show-users-btn.hide-users-mode {
        font-size: 9px !important;
        padding: 3px 6px !important;
    }
    
    /* Gift shop, leaderboards, promote room, camera time - compact on mobile */
    #gift-shop-btn-room,
    #promote-room-btn,
    #gift-leaderboards-btn-room,
    #camera-time-leaderboard-btn-room {
        padding: 3px 6px !important;
        font-size: 9px !important;
        min-height: 20px !important;
        border-radius: 6px !important;
        margin: 1px 0 !important;
    }
    
    /* Very compact private messages on mobile */
    #private-messages-btn {
        padding: 3px 6px !important;
        font-size: 9px !important;
        min-height: 20px !important;
        border-radius: 3px !important;
        margin: 1px 0 !important;
    }
    
    #private-messages-badge {
        padding: 1px 4px !important;
        font-size: 9px !important;
        min-width: 16px !important;
    }
    
    #private-message-popup {
        border-radius: 8px !important;
        bottom: 100% !important;
        margin-bottom: 6px !important;
        min-height: calc(100vh - 500px) !important; /* 20px smaller (was 480px) */
        max-height: calc(100vh - 500px) !important;
        width: 100% !important;
    }
    
    #private-message-messages {
        min-height: calc(100vh - 550px) !important; /* 20px smaller (was 530px) */
        max-height: calc(100vh - 550px) !important;
        padding: 6px !important;
    }
    
    #private-message-header {
        padding: 6px 8px !important;
        font-size: 11px !important;
    }
    
    #private-message-input {
        padding: 4px 6px !important;
        font-size: 16px !important; /* 16px prevents iOS auto-zoom */
        min-height: 24px !important;
    }
    
    #send-private-message-btn {
        padding: 4px 6px !important;
        font-size: 10px !important;
        min-height: 24px !important;
    }
    
    /* Sidebar input fields - compact */
    .sidebar input[type="text"],
    .sidebar input[type="password"],
    .sidebar input[type="email"],
    .sidebar textarea {
        min-height: 40px !important;
        font-size: 14px !important;
        padding: 10px 12px !important;
        border-radius: 8px !important;
        border: 1px solid rgba(102, 126, 234, 0.2) !important;
        background: rgba(26, 26, 26, 0.6) !important;
    }
    
    /* Sidebar auth mode toggle container - very compact on mobile */
    .auth-mode-toggle {
        gap: 2px !important;
        margin-bottom: 6px !important;
        margin-top: 3px !important;
        padding-bottom: 4px !important;
    }
    
    /* Sidebar auth mode buttons - very compact on mobile */
    .auth-mode-btn {
        min-height: 20px !important;
        padding: 3px 6px !important;
        font-size: 9px !important;
        font-weight: 500 !important;
        border-radius: 4px !important;
        margin: 1px 2px !important;
    }
    
    /* Very compact spacing in sidebar for more chat focus */
    .sidebar {
        padding: 6px !important;
        overflow-y: auto !important; /* Allow sidebar to scroll on mobile */
        overflow-x: hidden !important;
    }
    
    /* Chat screen in sidebar: fill height so flex messages area can auto-adjust */
    .sidebar #chat-screen {
        overflow: visible !important;
        padding-bottom: 20px !important; /* Room so buttons not cut off */
        padding-top: 2px !important;
        max-height: none !important;
        flex: 1 1 0 !important; /* Fill sidebar so messages area can flex */
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    .sidebar #chat-screen .chat-input-container {
        overflow: visible !important;
        padding-bottom: 14px !important;
        padding-top: 2px !important;
        margin-bottom: 0 !important;
    }
    
    /* Ensure sidebar doesn't clip chat screen */
    .sidebar {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-bottom: 8px !important; /* Add bottom padding */
    }
    
    .sidebar h1,
    .sidebar h2 {
        font-size: 14px !important;
        padding: 6px 8px !important;
        margin: 0 0 4px 0 !important;
    }
    
    /* Very compact chat screen elements – less padding so chat is longer */
    #chat-screen {
        padding: 2px 6px 4px 6px !important;
    }
    #chat-screen.active #chat-full-sidebar-wrap {
        margin-top: 6px !important;
    }
    
    /* Compact gift shop and promote room button container */
    #gift-shop-btn-room,
    #promote-room-btn {
        margin: 2px 0 !important;
    }
    
    /* Promote room banner: remove padding-right since X is gone */
    #promotion-status {
        padding-right: 6px !important;
    }
    
    /* Giving Tree widget – compact on mobile (narrow sidebar) */
    #chatroom-tree-widget {
        padding: 4px 8px 4px 8px !important;
        padding-right: 20px !important;
        margin-bottom: 4px !important;
    }
    #chatroom-tree-widget-close {
        top: 3px !important;
        right: 3px !important;
        width: 14px !important;
        height: 14px !important;
        min-width: 14px !important;
        min-height: 14px !important;
        font-size: 10px !important;
    }
    #chatroom-tree-widget .tree-widget-main-row {
        gap: 4px !important;
    }
    #chatroom-tree-widget .giving-tree-inline-emoji {
        font-size: 16px !important;
    }
    #chatroom-tree-widget .tree-widget-growth-col {
        min-width: 0 !important;
        flex: 1 1 60px !important;
    }
    #chatroom-tree-widget #tree-growth-text {
        font-size: 10px !important;
    }
    #chatroom-tree-widget .tree-widget-growth-col > div:last-of-type {
        height: 5px !important;
        margin-top: 1px !important;
    }
    #chatroom-tree-widget #tree-water-btn {
        padding: 6px 10px !important;
        min-height: 32px !important;
        font-size: 11px !important;
        -webkit-tap-highlight-color: transparent;
    }
    #chatroom-tree-widget #tree-water-cooldown {
        font-size: 9px !important;
        min-width: 0 !important;
    }
    #chatroom-tree-widget #tree-leaderboard {
        font-size: 9px !important;
        flex-basis: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    #chatroom-tree-widget #tree-apples-drop-zone {
        min-height: 80px !important;
        margin-top: 4px !important;
    }
    
    /* Compact button containers */
    div[style*="display: flex"][style*="gap"] {
        gap: 4px !important;
        margin-bottom: 3px !important;
    }
    
    /* Chat messages on mobile: flex to fill all remaining space – a bit longer, fits above buttons */
    #chat-messages {
        flex: 1 1 0 !important; /* Take all remaining space */
        min-height: 120px !important; /* Ensure chat area is visibly longer */
        max-height: none !important;
        padding: 4px 6px !important;
        border: 2px solid rgba(102, 126, 234, 0.5) !important;
        background: #1a1a1a !important;
        box-shadow: 0 0 10px rgba(245, 158, 11, 0.1), inset 0 0 20px rgba(245, 158, 11, 0.05) !important;
        overflow-y: auto !important;
        margin-bottom: 0 !important;
        margin-top: 0 !important;
    }
    
    /* Sidebar chat messages - same flex auto-adjust */
    .sidebar #chat-messages {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        max-height: none !important;
    }
    
    /* Ensure chat screen uses flexbox so messages area can fill space on mobile */
    #chat-screen.screen {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        min-height: 0 !important; /* Let flex children shrink */
        max-height: 100vh !important;
        max-height: 100dvh !important; /* Dynamic viewport (mobile browser UI) */
        overflow: visible !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important; /* Only safe area so buttons sit at bottom */
        padding-top: 2px !important;
        gap: 0 !important;
    }
    
    /* Ensure input container stays visible at bottom - RIGHT BELOW chat messages */
    #chat-screen .chat-input-container,
    .sidebar #chat-screen .chat-input-container {
        flex-shrink: 0 !important;
        margin-top: 0 !important; /* NO gap between chat and input */
        margin-bottom: 0 !important;
        width: 100% !important;
        padding: 4px 4px calc(6px + env(safe-area-inset-bottom, 0px)) 4px !important; /* Minimal bottom; safe area on notched phones */
        position: relative !important;
        z-index: 100 !important;
        overflow: visible !important;
        min-height: 90px !important; /* Enough for input + buttons row without cut-off */
        max-height: 115px !important; /* Prevent it from growing too large */
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important; /* Small gap between input and buttons */
        /* Always visible regardless of admin panel state */
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }
    
    /* Ensure buttons group is always visible in sidebar chatroom - RIGHT BELOW INPUT */
    #chat-screen .chat-buttons-group,
    .sidebar #chat-screen .chat-buttons-group,
    .chat-input-container .chat-buttons-group {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        min-height: 40px !important; /* Space for buttons */
        max-height: 50px !important; /* Prevent overflow */
        flex-shrink: 0 !important;
        overflow: visible !important;
        position: relative !important;
        z-index: 15 !important;
        margin-top: 4px !important; /* Small gap from input */
        margin-bottom: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        /* Always visible regardless of admin panel state or any section toggles */
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Ensure admin section toggles (banned rooms, banned users, etc.) don't hide chat buttons on mobile */
    #admin-panel-room .admin-section-content.collapsed ~ .chat-input-container,
    #admin-panel-room .admin-section-content.collapsed ~ .chat-buttons-group,
    .sidebar #admin-panel-room .admin-section-content.collapsed ~ .chat-input-container,
    .sidebar #admin-panel-room .admin-section-content.collapsed ~ .chat-buttons-group,
    #admin-panel-room .admin-section ~ .chat-input-container,
    #admin-panel-room .admin-section ~ .chat-buttons-group {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Ensure buttons are visible in sidebar chatroom on mobile - compact to fit */
    .sidebar #chat-screen #send-btn,
    .sidebar #chat-screen #emoji-btn,
    .sidebar #chat-screen #font-size-btn,
    .sidebar #chat-screen #chat-color-btn,
    #chat-screen #send-btn,
    #chat-screen #emoji-btn,
    #chat-screen #font-size-btn,
    #chat-screen #chat-color-btn,
    .chat-buttons-group #send-btn,
    .chat-buttons-group #emoji-btn,
    .chat-buttons-group #font-size-btn,
    .chat-buttons-group #chat-color-btn,
    .chat-buttons-group #room-rules-display-btn,
    .chat-buttons-group #transparent-ui-btn {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: 26px !important;
        min-height: 26px !important;
        max-height: 26px !important;
        width: auto !important;
        min-width: 28px !important;
        padding: 4px 6px !important;
        font-size: 10px !important;
        background: rgba(102, 126, 234, 0.7) !important;
        border: 1px solid rgba(102, 126, 234, 0.8) !important;
        color: #fff !important;
        position: relative !important;
        z-index: 20 !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
        border-radius: 4px !important;
    }
    .chat-buttons-group #chat-color-btn,
    #chat-screen #chat-color-btn,
    .sidebar #chat-screen #chat-color-btn {
        background: linear-gradient(135deg, #0d9488 0%, #059669 100%) !important;
        border: 1px solid rgba(13, 148, 136, 0.7) !important;
    }
    .chat-buttons-group #room-rules-display-btn {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: 35% !important;
        font-size: 9px !important;
        padding: 4px 5px !important;
    }
    .chat-buttons-group #transparent-ui-btn {
        flex: 0 0 auto !important;
        width: 28px !important;
        min-width: 28px !important;
        max-width: 28px !important;
        height: 26px !important;
        min-height: 26px !important;
        max-height: 26px !important;
        padding: 4px !important;
        overflow: hidden !important;
    }
    
    /* Hide chat screen entirely on mobile when on homepage (not in a room) */
    /* Only show chat screen when it has the 'active' class (meaning user is in a room) */
    #chat-screen.screen:not(.active) {
        display: none !important;
    }
    /* Hide home-only "back to top" button when in a room (same .active logic as above) */
    body:has(#chat-screen.active) #back-to-top-btn {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    /* Also hide all room-related content from chat screen on mobile when not active */
    #chat-screen:not(.active) #room-title,
    #chat-screen:not(.active) #show-users-btn,
    #chat-screen:not(.active) #leave-room-btn,
    #chat-screen:not(.active) #user-list-container,
    #chat-screen:not(.active) #admin-panel-room,
    #chat-screen:not(.active) #gift-shop-btn-room,
    #chat-screen:not(.active) #promote-room-btn,
    #chat-screen:not(.active) #promotion-status,
    #chat-screen:not(.active) #private-messages-container {
        display: none !important;
    }
    
    /* Compact admin panel on mobile homepage sidebar - match user list style */
    #admin-panel {
        margin-top: 6px !important;
        margin-bottom: 6px !important;
        padding: 6px !important;
        border: 1px solid #444 !important;
        border-radius: 4px !important;
    }
    
    #admin-panel-toggle-header {
        margin-bottom: 4px !important;
        font-size: 12px !important;
    }
    
    .admin-section {
        margin-bottom: 4px !important;
    }
    
    .admin-section:last-of-type {
        margin-top: 4px !important;
    }
    
    .admin-section-header {
        padding: 4px 6px !important;
    }
    
    .admin-section-header h4 {
        font-size: 11px !important;
    }
    
    #banned-rooms-count,
    #banned-users-count {
        padding: 1px 4px !important;
        font-size: 9px !important;
    }
    
    .admin-section-content {
        padding: 0 !important;
    }
    
    #banned-rooms-list,
    #banned-users-list {
        padding: 4px !important;
        max-height: 120px !important;
    }
    
    #refresh-banned-rooms-btn,
    #refresh-banned-users-btn {
        padding: 4px !important;
        font-size: 10px !important;
        min-height: 24px !important;
    }
    
    #mass-broadcast-btn {
        padding: 6px !important;
        font-size: 10px !important;
        min-height: 24px !important;
    }
    
    /* Make all unban buttons compact in admin panel on mobile */
    #admin-panel .unban-room-btn,
    #admin-panel .unban-user-btn {
        padding: 3px 6px !important;
        font-size: 9px !important;
        border-radius: 3px !important;
        margin-top: 2px !important;
        min-height: auto !important;
    }
    
    /* Compact admin panel list items on mobile homepage - override inline styles */
    #banned-rooms-list > div,
    #banned-users-list > div {
        padding: 4px !important;
        margin-bottom: 4px !important;
        border-radius: 3px !important;
        gap: 3px !important;
    }
    
    #banned-rooms-list > div > div:first-child,
    #banned-users-list > div > div:first-child {
        font-size: 10px !important;
        gap: 2px !important;
    }
    
    #banned-rooms-list > div > div:first-child > div:first-child,
    #banned-users-list > div > div:first-child {
        font-size: 10px !important;
    }
    
    #banned-rooms-list > div > div:first-child > div:last-child {
        font-size: 9px !important;
    }
    
    /* Force compact button styles on mobile - override all inline styles */
    #admin-panel #banned-rooms-list button.unban-room-btn,
    #admin-panel #banned-users-list button.unban-user-btn {
        padding: 3px 6px !important;
        font-size: 9px !important;
        border-radius: 3px !important;
        margin-top: 2px !important;
        min-height: auto !important;
        height: auto !important;
        line-height: 1.2 !important;
    }
    
    /* Ensure list containers are compact */
    #admin-panel #banned-rooms-list,
    #admin-panel #banned-users-list {
        padding: 4px !important;
    }
    
    /* Ensure all text in list items is compact */
    #admin-panel #banned-rooms-list div[style*="font-size"],
    #admin-panel #banned-users-list div[style*="font-size"] {
        font-size: 10px !important;
    }
    
    /* Make list items compact in admin panel */
    #banned-rooms-list > div,
    #banned-users-list > div {
        padding: 4px !important;
        margin-bottom: 4px !important;
        border-radius: 3px !important;
        gap: 3px !important;
    }
    
    #banned-rooms-list > div > div,
    #banned-users-list > div > div {
        font-size: 10px !important;
    }
    
    #banned-rooms-list > div > div:last-child,
    #banned-users-list > div > div:last-child {
        font-size: 9px !important;
    }
    
    .chat-message {
        padding: 8px 10px !important;
        font-size: 13px !important;
        margin-bottom: 6px !important;
    }
    
    /* Bottom right wrapper: eye + volume pill on mobile - flex-end keeps eye fixed when pill expands */
    .video-bottom-right-controls {
        bottom: 5px !important;
        right: 5px !important;
        gap: 4px !important;
        align-items: flex-end !important;
    }
    /* Standalone eye button - 3px bottom padding to line up with speaker; slightly larger eye */
    .video-bottom-right-controls .hide-video-btn,
    .video-bottom-right-controls .video-eye-standalone {
        box-sizing: border-box !important;
        width: 20px !important;
        height: 23px !important;
        min-width: 20px !important;
        min-height: 23px !important;
        padding-bottom: 3px !important;
        font-size: 11px !important;
    }
    /* Volume control - small narrow black pill on mobile */
    .video-volume-control {
        position: static !important;
        bottom: auto !important;
        right: auto !important;
        flex-direction: column-reverse !important;
        align-items: center !important;
        gap: 1px !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: 40px !important;
        height: auto !important;
        max-height: none !important;
        padding: 2px 2px !important;
        background: rgba(0, 0, 0, 0.85) !important;
        border-radius: 6px !important;
        z-index: 10 !important;
        opacity: 1 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    
    /* Expanded state - narrow box, slider full size; same bottom padding (2px) so nothing moves on tap */
    .video-volume-control.volume-expanded,
    .video-volume-control:hover {
        height: 92px !important;
        max-height: 92px !important;
        min-height: 92px !important;
        max-width: 48px !important;
        padding: 4px 6px 4px 6px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }
    
    /* Override hover effect on mobile - keep it always visible */
    .video-wrapper:hover .video-volume-control {
        opacity: 1 !important;
    }
    
    .video-volume-control .volume-icon-row {
        min-height: 18px !important;
        flex-shrink: 0 !important;
    }
    .video-volume-control .volume-icon-row .volume-icon-btn,
    .video-volume-control .volume-icon-row .hide-video-btn {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        min-height: 18px !important;
        padding: 0 !important;
    }
    .video-volume-control .volume-percentage-badge {
        min-width: 18px !important;
        height: 18px !important;
        font-size: 9px !important;
    }
    .volume-icon-btn {
        font-size: 11px !important;
    }
    
    .video-volume-control .volume-slider {
        width: 12px !important;
        height: 48px !important;
        max-height: 48px !important;
        min-height: 48px !important;
        flex: 0 0 48px !important;
        margin: 0 !important;
        padding: 4px 0 !important;
    }
    .video-volume-control .volume-percentage {
        margin: 0 !important;
        flex: 0 0 auto !important;
    }
    
    .volume-slider::-webkit-slider-thumb {
        width: 28px !important;
        height: 28px !important;
    }
    
    .volume-slider::-moz-range-thumb {
        width: 28px !important;
        height: 28px !important;
    }
    
    .volume-percentage {
        font-size: 8px !important;
        min-height: 10px !important;
    }
    
    /* Mic checkbox - larger on mobile */
    .mic-open-label {
        font-size: 11px;
        padding: 3px 8px;
        top: -8px;
        right: -12px;
    }
    
    /* Hide mute all button and dropdown on mobile */
    #mute-all-btn,
    #mute-all-dropdown-wrap {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Hide fullscreen button on mobile */
    #app-fullscreen-btn {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    #mic-open-checkbox {
        width: 16px;
        height: 16px;
        transform: scale(1);
    }
}

/* Very small phones */
@media (max-width: 480px) {
    .home-rooms-list {
        grid-template-columns: 1fr !important;
    }
    
    .bottom-controls {
        gap: 10px 12px;
        padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0)) !important;
    }
    
    /* Start/Stop: compact but tappable */
    #start-broadcast-btn,
    #stop-broadcast-btn {
        padding: 12px 18px !important;
        font-size: 14px !important;
        min-height: 44px !important;
        max-width: 220px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* Settings + second row icons: 44px min touch target */
    #video-settings-btn {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
        font-size: 18px !important;
    }
    
#youtube-video-container #youtube-video-btn,
#youtube-video-container #drawing-board-btn,
#youtube-video-container #risk-game-btn,
#screen-share-container #screen-share-btn {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }
    #youtube-video-container #flip-camera-btn {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        min-height: 50px !important;
    }
    
    #microphone-btn {
        width: 60px !important;
        height: 60px !important;
        min-width: 60px !important;
        min-height: 60px !important;
        font-size: 26px !important;
        transition: transform 0.2s ease, width 0.2s ease, height 0.2s ease, font-size 0.2s ease !important;
    }
    
    /* Make mic button bigger when pressed/active on mobile with pulsing animation */
    #microphone-btn.mic-active {
        width: 80px !important;
        height: 80px !important;
        min-width: 80px !important;
        min-height: 80px !important;
        font-size: 36px !important;
        animation: micPulse 0.6s ease-in-out infinite !important;
    }
    
    /* Also support :active pseudo-class as fallback */
    #microphone-btn:active.mic-active {
        width: 80px !important;
        height: 80px !important;
        min-width: 80px !important;
        min-height: 80px !important;
        font-size: 36px !important;
        animation: micPulse 0.6s ease-in-out infinite !important;
    }
    
    @keyframes micPulse {
        0%, 100% {
            transform: scale(1.1) !important;
            box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4),
                        0 0 15px rgba(37, 99, 235, 0.3) !important;
        }
        50% {
            transform: scale(1.2) !important;
            box-shadow: 0 12px 30px rgba(34, 197, 94, 0.6),
                        0 0 25px rgba(22, 163, 74, 0.5) !important;
        }
    }
    
    /* Portrait: no pulse on mic – solid green only */
    @media (max-width: 768px) and (orientation: portrait) {
        #microphone-btn.mic-active,
        #microphone-btn:active.mic-active {
            animation: none !important;
        }
    }
    
    .top-control-btn {
        font-size: 10px !important;
        padding: 6px 12px !important;
        min-height: 36px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

.toggle-switch {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    width: 100%;
}
.toggle-switch input {
    display: none;
}
.toggle-switch .slider-round {
    position: relative;
    width: 42px;
    height: 22px;
    background: #ef4444; /* red when off */
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s ease;
}
.toggle-switch .slider-round::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 2px;
    top: 2px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.2s ease;
}
.toggle-switch input:checked + .slider-round {
    background: #22c55e; /* green when on */
}
.toggle-switch input:checked + .slider-round::before {
    transform: translateX(20px);
}
.toggle-switch .toggle-label {
    color: #e2e8f0;
}
.toggle-switch .toggle-status {
    margin-left: auto;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #334155;
    color: #cbd5e1;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.toggle-switch .toggle-status.on {
    background: #22c55e;
    color: #0b1f12;
}
.toggle-switch .toggle-status.off {
    background: #ef4444; /* red badge when off */
}

/* Room Bot profile card - compact, cool look at top of bot modal */
.room-bot-profile-card {
    position: relative;
    margin-bottom: 20px;
    padding: 18px 16px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(16, 185, 129, 0.35);
    background: linear-gradient(145deg, #1e2a24 0%, #151c1a 50%, #0f1412 100%);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(16, 185, 129, 0.12),
                0 0 0 1px rgba(255, 255, 255, 0.03);
    display: flex;
    align-items: center;
    gap: 14px;
}
.room-bot-profile-card-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 120% 80% at 20% 50%, rgba(16, 185, 129, 0.08) 0%, transparent 50%),
                radial-gradient(ellipse 80% 60% at 80% 50%, rgba(16, 185, 129, 0.05) 0%, transparent 45%);
    pointer-events: none;
}
.room-bot-profile-card-bot-tag {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 2px 6px;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(16, 185, 129, 0.35);
    border: 1px solid rgba(16, 185, 129, 0.5);
    border-radius: 6px;
    z-index: 2;
    pointer-events: none;
}
.room-bot-profile-card-avatar {
    position: relative;
    width: 56px;
    height: 56px;
    min-width: 56px;
    min-height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25) 0%, rgba(5, 150, 105, 0.15) 100%);
    border: 1px solid rgba(16, 185, 129, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    line-height: 1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
    overflow: hidden;
}
.room-bot-profile-card-avatar .room-bot-profile-card-avatar-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}
.room-bot-profile-card-avatar .room-bot-profile-card-avatar-emoji {
    position: relative;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: inherit;
}
.room-bot-profile-card-body {
    position: relative;
    flex: 1;
    min-width: 0;
}
.room-bot-profile-card-name {
    margin: 0 0 4px 0;
    font-size: 17px;
    font-weight: 700;
    color: #f0fdf4;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.room-bot-profile-card-tagline {
    margin: 0 0 8px 0;
    font-size: 12px;
    color: #86efac;
    opacity: 0.95;
    line-height: 1.35;
}
.room-bot-profile-card-badge {
    display: inline-block;
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(16, 185, 129, 0.95);
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.35);
    border-radius: 20px;
}

/* Bot profile card in chat (tooltip) — same look, compact */
.profile-tooltip-bot {
    padding: 0;
    border-color: rgba(16, 185, 129, 0.4);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(16, 185, 129, 0.2);
}
.room-bot-profile-card-chat {
    margin: 0;
    border-radius: 12px;
    border: none;
    box-shadow: none;
}
.room-bot-profile-card-chat .room-bot-profile-card-avatar {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    font-size: 24px;
}
.room-bot-profile-card-chat .room-bot-profile-card-avatar .room-bot-profile-card-avatar-emoji {
    font-size: 24px;
}
.room-bot-profile-card-chat .room-bot-profile-card-name {
    font-size: 15px;
}
.room-bot-profile-card-chat .room-bot-profile-card-tagline {
    font-size: 11px;
    margin-bottom: 6px;
}
.room-bot-profile-card-chat .room-bot-profile-card-badge {
    padding: 3px 8px;
    font-size: 9px;
}

/* Room Bot modal toggles: dark when off, green when on, both match */
#room-bot-modal .room-bot-toggle .slider-round {
    position: relative;
    width: 40px;
    height: 22px;
    background: #444;
    border-radius: 11px;
    cursor: pointer;
    transition: background 0.2s ease;
}
#room-bot-modal .room-bot-toggle .slider-round::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 2px;
    top: 2px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.2s ease;
}
#room-bot-modal .room-bot-toggle input:checked + .slider-round {
    background: #10b981;
}
#room-bot-modal .room-bot-toggle input:checked + .slider-round::before {
    transform: translateX(18px);
}

/* Bot messages popout modal - matches View / Edit rules popout colors */
.room-bot-messages-popout-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10002;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}
.room-bot-messages-popout-box {
    background: #1a1a1a;
    border: 2px solid #10b981;
    border-radius: 12px;
    padding: 20px;
    width: 100%;
    max-width: 560px;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
.room-bot-messages-popout-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #444;
}
.room-bot-messages-popout-title {
    margin: 0;
    color: #10b981;
    font-size: 16px;
    font-weight: 600;
}
.room-bot-messages-popout-close-x {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    padding: 0;
    width: 28px;
    height: 28px;
    line-height: 1;
}
.room-bot-messages-popout-close-x:hover {
    opacity: 0.8;
}
.room-bot-messages-popout-hint {
    margin: 0 0 10px 0;
    font-size: 11px;
    color: #94a3b8;
}
.room-bot-messages-popout-add {
    margin-bottom: 12px;
}
.room-bot-messages-popout-label {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    color: #94a3b8;
    font-weight: 500;
}
.room-bot-messages-popout-add-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.room-bot-messages-popout-textarea {
    flex: 1;
    min-width: 0;
    min-height: 56px;
    padding: 10px;
    background: #1a1a1a;
    color: #fff;
    border: 1px solid #444;
    border-radius: 6px;
    font-size: 12px;
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
}
.room-bot-messages-popout-textarea::placeholder {
    color: #64748b;
}
.room-bot-messages-popout-add-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.room-bot-messages-popout-min-input {
    width: 52px;
    padding: 6px;
    background: #2a2a2a;
    color: #fff;
    border: 1px solid #444;
    border-radius: 4px;
    font-size: 12px;
    box-sizing: border-box;
}
.room-bot-messages-popout-btn-add {
    padding: 8px 16px;
    background: #10b981;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.room-bot-messages-popout-btn-add:hover {
    background: #059669;
}
.room-bot-messages-popout-interval {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.room-bot-messages-popout-interval-input {
    width: 70px;
    padding: 6px;
    background: #2a2a2a;
    color: #fff;
    border: 1px solid #444;
    border-radius: 4px;
    font-size: 12px;
    box-sizing: border-box;
}
.room-bot-messages-popout-min-label {
    font-size: 11px;
    color: #94a3b8;
}
.room-bot-messages-popout-list-section {
    flex: 1;
    min-height: 200px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
}
.room-bot-messages-popout-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px;
    background: #1a1a1a;
    border: 1px solid #444;
    border-radius: 6px;
}
.room-bot-messages-popout-empty {
    margin: 0;
    padding: 12px;
    font-size: 12px;
    color: #94a3b8;
}
.room-bot-messages-popout-msg {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin-bottom: 6px;
    background: #2a2a2a;
    border: 1px solid #404040;
    border-radius: 6px;
    width: 100%;
    box-sizing: border-box;
}
.room-bot-messages-popout-msg:last-child { margin-bottom: 0; }
.room-bot-messages-popout-msg-text {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    color: #e2e8f0;
    line-height: 1.4;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
}
.room-bot-messages-popout-msg-meta {
    color: #94a3b8;
    font-size: 11px;
    flex-shrink: 0;
}
.room-bot-messages-popout-msg-delete {
    flex-shrink: 0;
    width: 56px;
    padding: 6px 8px;
    background: #7f1d1d;
    color: #fecaca;
    border: none;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.room-bot-messages-popout-msg-delete:hover {
    background: #991b1b;
}
.room-bot-messages-popout-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.room-bot-messages-popout-btn-save {
    padding: 8px 16px;
    background: #10b981;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.room-bot-messages-popout-btn-save:hover {
    background: #059669;
}
.room-bot-messages-popout-status {
    font-size: 12px;
    color: #86efac;
    display: none;
}
.room-bot-messages-popout-status.is-visible { display: inline; }
.room-bot-messages-popout-btn-close {
    padding: 8px 16px;
    background: #444;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
}
.room-bot-messages-popout-btn-close:hover {
    background: #555;
}

/* Private Messages Styles */
#private-messages-container {
    margin-bottom: 3px;
    margin-top: 3px;
}

#private-messages-btn {
    padding: 4px 6px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #fff !important;
    border-radius: 3px !important;
    min-height: 24px !important;
    text-shadow: 0 0 2px rgba(0,0,0,0.95), 0 1px 3px rgba(0,0,0,0.9), 0 1px 1px rgba(0,0,0,0.95) !important;
}
#private-messages-btn #private-messages-title {
    color: #fff !important;
    font-weight: 600 !important;
    text-shadow: 0 0 2px rgba(0,0,0,0.95), 0 1px 3px rgba(0,0,0,0.9), 0 1px 1px rgba(0,0,0,0.95) !important;
}

#private-messages-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* Glow when there are unread private messages – warm accent so it’s easy to spot */
#private-messages-btn.pm-has-unread {
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.7), 0 0 16px rgba(102, 126, 234, 0.6), 0 0 28px rgba(245, 158, 11, 0.35) !important;
    animation: pm-glow-pulse 1.4s ease-in-out infinite;
}
@keyframes pm-glow-pulse {
    0%, 100% {
        box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.6), 0 0 16px rgba(102, 126, 234, 0.6), 0 0 28px rgba(245, 158, 11, 0.3);
    }
    50% {
        box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.95), 0 0 22px rgba(102, 126, 234, 0.75), 0 0 40px rgba(245, 158, 11, 0.5);
    }
}

#private-messages-badge {
    padding: 1px 4px !important;
    font-size: 9px !important;
    min-width: 16px !important;
    border-radius: 8px !important;
}

/* PM panel – purple theme so it’s clearly different from room chat (amber) */
#private-message-popup {
    border-radius: 8px !important;
    top: auto !important;
    bottom: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 6px !important;
    min-height: 330px !important; /* 20px smaller (was 350px) */
    max-height: 330px !important; /* 20px smaller */
    width: 100% !important; /* Match chatroom width */
    border: 1px solid rgba(102, 126, 234, 0.5) !important;
    box-shadow: 0 0 14px rgba(102, 126, 234, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    background: #16161a !important; /* Slightly different from room chat #1a1a1a */
}
/* When visible, PM popup must sit in front of chat area and sidebar content.
   Cancel "open upward" positioning and height limits so positionPMPopupToCoverChat() can control placement and full overlay. */
#private-message-popup.pm-popup-visible {
    z-index: 10000 !important;
    bottom: auto !important;
    margin-bottom: 0 !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}
/* Full-sidebar: same override when popup is visible so JS positioning works */
#chat-screen.chat-full-sidebar #sidebar-users-pm-row #private-message-popup.pm-popup-visible {
    bottom: auto !important;
    margin-bottom: 0 !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
}

#private-message-header.pm-header,
#private-message-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid #333 !important;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%) !important;
    border-radius: 6px 6px 0 0 !important;
    flex-shrink: 0 !important;
    min-height: 40px !important;
    box-sizing: border-box !important;
}

.pm-header-left {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

.pm-header-center {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
    min-width: 0 !important;
    padding: 0 8px !important;
}

.pm-header-right {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
    padding-left: 10px !important;
    border-left: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.pm-header-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    cursor: pointer !important;
    transition: background 0.15s, color 0.15s !important;
    border-radius: 4px !important;
    font-family: inherit !important;
}

.pm-header-back,
.pm-header-close {
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    background: transparent !important;
    color: #e4e4e7 !important;
    font-size: 16px !important;
    line-height: 1 !important;
}

.pm-header-back:hover,
.pm-header-close:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

.pm-header-close {
    font-size: 18px !important;
    font-weight: 300 !important;
}

.pm-header-username {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #fff !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: center !important;
}

.pm-header-block {
    padding: 4px 10px !important;
    height: 28px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    background: rgba(239, 68, 68, 0.15) !important;
    color: #fca5a5 !important;
    border: 1px solid rgba(239, 68, 68, 0.4) !important;
}

.pm-header-block:hover {
    background: rgba(239, 68, 68, 0.25) !important;
    color: #fecaca !important;
    border-color: rgba(239, 68, 68, 0.6) !important;
}

#private-message-username {
    font-size: 13px !important;
}

#close-private-message {
    width: 28px !important;
    height: 28px !important;
    font-size: 18px !important;
}

#private-message-messages {
    padding: 6px !important; /* Match chatroom padding */
    min-height: 280px !important; /* 20px smaller (was 300px) */
    max-height: 280px !important; /* 20px smaller */
    gap: 4px !important;
    flex: 1 !important; /* Fill available space like chatroom */
    overflow-y: auto !important; /* Match chatroom scrolling */
    overflow-x: hidden !important;
}

#private-message-input-container {
    /* Uses chat-input-container class styling - same as chatroom */
    border-top: 1px solid #333 !important;
    background: #1a1a1a !important;
    border-radius: 0 0 6px 6px !important;
}

#private-message-input {
    /* Uses same styling as #chat-input */
    flex: 1 !important;
    width: 100% !important;
    padding: 6px 8px !important;
    background: #2a2a2a !important;
    border: 1px solid #444 !important;
    border-radius: 4px !important;
    color: #fff !important;
    font-size: 11px !important;
    outline: none !important;
    min-height: 28px !important;
    height: 28px !important;
    box-sizing: border-box !important;
}

#private-message-input:focus {
    border-color: rgba(245, 158, 11, 0.5) !important;
    background: #2a2a2a !important;
}

#private-message-input-container .chat-buttons-group {
    /* Uses same styling as chatroom buttons group */
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 4px !important;
}

#send-private-message-btn {
    /* Uses same styling as #send-btn */
    padding: 6px 12px !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    transition: opacity 0.2s !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#send-private-message-btn:hover {
    opacity: 0.8 !important;
}

#private-message-input-container #pm-font-size-btn,
#private-message-input-container #pm-emoji-btn {
    height: 28px !important;
    min-width: 28px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#private-message-popup {
    animation: slideUp 0.3s ease-out;
}

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

#private-message-messages::-webkit-scrollbar {
    width: 6px;
}

#private-message-messages::-webkit-scrollbar-track {
    background: #1a1a1a;
}

#private-message-messages::-webkit-scrollbar-thumb {
    background: #667eea;
    border-radius: 3px;
}

#private-message-messages::-webkit-scrollbar-thumb:hover {
    background: #764ba2;
}

#private-message-input:focus {
    border-color: #f59e0b;
    outline: none;
}

#send-private-message-btn:hover {
    opacity: 0.9;
}

#close-private-message:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

/* Mobile styles for private messages */
@media (max-width: 768px) {
    /* Very compact gift shop and promote room buttons on homepage */
    #gift-shop-btn,
    #promote-room-btn-home {
        padding: 4px 6px !important;
        font-size: 9px !important;
        min-height: 24px !important;
        margin-top: 2px !important;
    }
    
    /* Gift shop and promote room buttons in room - rounded */
    #gift-shop-btn-room,
    #promote-room-btn {
        padding: 4px 6px !important;
        font-size: 9px !important;
        min-height: 24px !important;
        border-radius: 6px !important;
    }
    
    /* Compact private messages - match chatroom size on mobile */
    #private-message-popup {
        min-height: calc(100vh - 430px) !important; /* Match chatroom mobile height */
        max-height: calc(100vh - 430px) !important;
        width: 100% !important;
    }
    
    #private-message-messages {
        min-height: calc(100vh - 480px) !important; /* Match chatroom messages mobile height */
        max-height: calc(100vh - 480px) !important;
        padding: 6px !important;
    }
    
    #private-messages-btn {
        font-size: 11px !important;
        padding: 6px 10px !important;
        min-height: 32px !important;
    }
}

/* Mobile landscape: PM popup as right-side sidebar (sidebar size), not full screen */
@media (orientation: landscape) and (max-height: 768px) {
    #private-message-popup.pm-popup-visible {
        top: 8px !important;
        right: 8px !important;
        left: auto !important;
        width: min(350px, 50vw) !important;
        max-width: min(350px, 50vw) !important;
        height: calc(100vh - 16px) !important;
        max-height: calc(100vh - 16px) !important;
        min-height: 0 !important;
        margin-top: 0 !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        z-index: 10000 !important;
        position: fixed !important;
        border-radius: 8px !important;
        box-shadow: -4px 0 20px rgba(0,0,0,0.4) !important;
    }
    
    #private-message-popup.pm-popup-visible #private-message-header {
        flex-shrink: 0 !important;
    }
    
    #private-message-popup.pm-popup-visible #private-message-messages {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
        padding: 6px !important;
    }
    
    #private-message-popup.pm-popup-visible #private-message-input-container {
        flex-shrink: 0 !important;
    }
}

/* Room Preview System Styles - No Conflicts */
.room-preview-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1 !important;
    background: #000 !important;
}

.preview-placeholder {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: #fff !important;
    font-size: 12px !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    z-index: 1 !important;
}

.preview-placeholder div:first-child {
    font-size: 24px !important;
    margin-bottom: 4px !important;
}

.preview-placeholder div:last-child {
    font-size: 10px !important;
    opacity: 0.9 !important;
}

@media (max-width: 768px) {
    #private-messages-title {
        font-size: 11px !important;
    }
    
    #private-messages-badge {
        font-size: 9px !important;
        padding: 1px 4px !important;
        min-width: 16px !important;
    }
    
    #private-message-header {
        padding: 6px 8px !important;
        font-size: 11px !important;
    }
    
    #private-message-input {
        padding: 6px 8px !important;
        font-size: 16px !important; /* 16px prevents iOS auto-zoom */
        min-height: 32px !important;
    }
    
    #send-private-message-btn,
    #close-private-message {
        padding: 6px 10px !important;
        font-size: 11px !important;
        min-height: 32px !important;
    }
}

/* ========== Overrides: button row + screen share ========== */
/* Screen share button hidden by default (shown when in #screen-share-container for layout) */
#screen-share-btn {
    display: none !important;
}
#screen-share-container #screen-share-btn {
    display: inline-flex !important;
}
#screen-share-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    height: 44px;
    min-height: 44px;
}
/* Share audio: only in screen share flow (browser dialog), not in bottom bar */
.screen-share-audio-label {
    display: none !important;
}
.screen-share-audio-label.in-screen-share-area {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255,255,255,0.85);
    cursor: pointer;
    user-select: none;
}
.screen-share-audio-label input { accent-color: #667eea; cursor: pointer; }

/* No audio labels/buttons in bottom bar – only in screen share area */
#screen-share-container #screen-share-mute-audio-btn {
    display: none !important;
}

#screen-share-mute-audio-btn.screen-share-mute-audio {
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    cursor: pointer;
}
#screen-share-mute-audio-btn.screen-share-mute-audio:hover {
    background: rgba(255,255,255,0.15);
}

/* Bottom bar: align all control groups on same baseline */
.bottom-controls {
    align-items: center !important;
}

/* Left group (YouTube + Screen share): buttons in a row, same baseline as other controls */
#youtube-video-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    align-self: center !important;
    gap: 8px;
    height: auto;
    min-height: 44px;
}
#youtube-video-container > button {
    flex-shrink: 0;
    align-self: center !important;
    margin: 0 !important;
}

/* YouTube + Drawing + Risk + Screen share + Settings: compact icon buttons, same size, no overlap */
#youtube-video-btn,
#drawing-board-btn,
#risk-game-btn,
#screen-share-btn,
#video-settings-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px;
    border-radius: 12px;
    box-sizing: border-box;
    line-height: 1 !important;
    vertical-align: middle;
    align-self: center !important;
    flex-shrink: 0;
}

/* Risk game button: distinct color so it fits the row visually */
#risk-game-btn {
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%) !important;
    box-shadow: 0 4px 15px rgba(13, 148, 136, 0.4), 0 0 10px rgba(15, 118, 110, 0.3);
}
#risk-game-btn:hover {
    box-shadow: 0 6px 20px rgba(13, 148, 136, 0.6), 0 0 15px rgba(15, 118, 110, 0.4);
}

/* Mobile device (JS sets body.is-mobile-device): hide screen share in any orientation – mobile can't screen share */
body.is-mobile-device .bottom-controls .control-group-screen-share,
body.is-mobile-device .bottom-controls #screen-share-container,
body.is-mobile-device #screen-share-container,
body.is-mobile-device #screen-share-container #screen-share-btn {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
}
body.is-mobile-device #local-screen-container {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Fullscreen and mute-all: hidden on mobile in any orientation (fullscreen not supported; mute-all mobile UX) */
body.is-mobile-device .fullscreen-btn,
body.is-mobile-device #app-fullscreen-btn {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}
body.is-mobile-device #mute-all-btn,
body.is-mobile-device #mute-all-dropdown-wrap {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* On mobile viewport: layout tweaks (screen share hidden via body.is-mobile-device above) */
@media (max-width: 768px) {
    #youtube-video-container {
        display: flex !important;
        flex-direction: row !important;
    }
}

/* Playlist sidebar rows */
.playlist-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px;
    margin-bottom: 8px;
    border-radius: 8px;
    cursor: default;
    transition: background 0.2s, opacity 0.2s, box-shadow 0.15s;
    font-size: 12px;
    position: relative;
    background: #2a2a2a;
}
.playlist-item--active {
    background: #667eea;
}
.playlist-item--next {
    background: #764ba2;
}
.playlist-item-main {
    display: flex;
    gap: 10px;
    flex: 1;
    min-width: 0;
    cursor: default;
    align-items: flex-start;
}
.playlist-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.playlist-item-top-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.playlist-item-queue {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #b8c4d4;
}
.playlist-item-type {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid transparent;
}
.playlist-item-type--youtube {
    color: #fecaca;
    background: rgba(220, 38, 38, 0.32);
    border-color: rgba(248, 113, 113, 0.45);
}
.playlist-item-type--twitch {
    color: #e9d5ff;
    background: rgba(145, 70, 255, 0.32);
    border-color: rgba(167, 139, 250, 0.45);
}
.playlist-item-type--soundcloud {
    color: #fed7aa;
    background: rgba(255, 85, 0, 0.28);
    border-color: rgba(251, 146, 60, 0.45);
}
.playlist-item-type--kick {
    color: #d9f99d;
    background: rgba(83, 252, 24, 0.14);
    border-color: rgba(134, 239, 172, 0.4);
}
.playlist-item-title {
    font-size: 13px;
    font-weight: 600;
    color: #f3f6ff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.35;
}
.playlist-item-added {
    font-size: 11px;
    color: #c4cad4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.playlist-item-duration {
    font-size: 11px;
    color: #aeb8c8;
    min-height: 14px;
    font-variant-numeric: tabular-nums;
}
.playlist-item-chip {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1px 6px;
    border-radius: 999px;
}
.playlist-item-chip--live {
    color: #ecfdf5;
    background: rgba(16, 120, 72, 0.55);
}
.playlist-item-chip--next {
    color: #fffbeb;
    background: rgba(180, 110, 20, 0.55);
}
.playlist-item--active .playlist-item-queue,
.playlist-item--next .playlist-item-queue {
    color: rgba(255, 255, 255, 0.92);
}
.playlist-item--active .playlist-item-type--youtube,
.playlist-item--next .playlist-item-type--youtube {
    color: #fff;
    background: rgba(185, 28, 28, 0.72);
    border-color: rgba(254, 202, 202, 0.55);
}
.playlist-item--active .playlist-item-type--twitch,
.playlist-item--next .playlist-item-type--twitch {
    color: #fff;
    background: rgba(109, 40, 217, 0.72);
    border-color: rgba(216, 180, 254, 0.55);
}
.playlist-item--active .playlist-item-type--soundcloud,
.playlist-item--next .playlist-item-type--soundcloud {
    color: #fff;
    background: rgba(234, 88, 12, 0.72);
    border-color: rgba(254, 215, 170, 0.55);
}
.playlist-item--active .playlist-item-type--kick,
.playlist-item--next .playlist-item-type--kick {
    color: #14532d;
    background: rgba(83, 252, 24, 0.88);
    border-color: rgba(21, 128, 61, 0.45);
}
.playlist-item--active .playlist-item-title,
.playlist-item--next .playlist-item-title {
    color: #ffffff;
}
.playlist-item--active .playlist-item-added,
.playlist-item--next .playlist-item-added,
.playlist-item--active .playlist-item-duration,
.playlist-item--next .playlist-item-duration {
    color: rgba(255, 255, 255, 0.9);
}
.playlist-item--active .playlist-drag-handle,
.playlist-item--next .playlist-drag-handle {
    color: rgba(255, 255, 255, 0.78);
}
.playlist-item--active .playlist-drag-handle:hover,
.playlist-item--next .playlist-drag-handle:hover {
    color: #ffffff !important;
}

/* Playlist drag-and-drop: drop target highlight */
.playlist-item-drop-target {
    box-shadow: inset 0 0 0 2px rgba(102, 126, 234, 0.8) !important;
    background: rgba(102, 126, 234, 0.15) !important;
}
.playlist-drag-handle {
    cursor: grab;
    color: #b0bac9;
    font-size: 14px;
    line-height: 1;
    padding: 4px 2px;
    margin: -4px 0 -4px -2px;
    align-self: center;
    user-select: none;
}
.playlist-drag-handle:hover {
    color: #e2e8f0 !important;
}
.playlist-drag-handle:active {
    cursor: grabbing !important;
}