/* ================================================================
   NebulaRoom.css  —  Nebula visual layer for Room.html
   Loaded AFTER Root.css + Room.css. Pure visual overrides —
   never touches ids/classes that carry JS state logic.
   ================================================================ */

/* ── 1. Body: grid overlay + ambient orbs ─────────────────── */

html, body {
    background: var(--body-bg) !important;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(60rem 40rem at 10% -5%,  rgba(99,102,241,0.15), transparent 60%),
        radial-gradient(50rem 35rem at 105% 10%,  rgba(139,92,246,0.12), transparent 60%),
        radial-gradient(40rem 30rem at 50% 110%, rgba(34,211,238,0.08), transparent 60%);
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.032) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.032) 1px, transparent 1px);
    background-size: 32px 32px;
    opacity: 0.6;
}

/* ── 2. Loading screen ───────────────────────────────────────── */

#loadingDiv {
    background: var(--body-bg) !important;
    z-index: 9999;
}

.spinner-ring {
    border-top-color: #6366f1 !important;
    border-right-color: rgba(99,102,241,0.3) !important;
    border-bottom-color: rgba(99,102,241,0.1) !important;
    border-left-color: rgba(99,102,241,0.1) !important;
}

/* ── 3. Bottom control bar ────────────────────────────────── */

#bottomButtons {
    background:
        linear-gradient(135deg, rgba(20,21,35,0.92), rgba(13,14,22,0.88)) !important;
    backdrop-filter: blur(28px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(160%) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    box-shadow:
        0 8px 40px rgba(0,0,0,0.55),
        0 1px 0 rgba(255,255,255,0.06) inset,
        0 0 0 1px rgba(99,102,241,0.06) !important;
    border-radius: 999px !important;
    padding: 8px 18px !important;
    gap: 4px !important;
    z-index: 10;
}

/* All main buttons in the bar */
#bottomButtons > button,
#bottomButtons .split-btn > button:not(.device-dropdown-toggle) {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(255,255,255,0.09) !important;
    color: rgba(255,255,255,0.82) !important;
    font-size: 15px !important;
    transition: background 0.15s, color 0.15s, transform 0.12s, border-color 0.15s !important;
}

#bottomButtons > button:hover,
#bottomButtons .split-btn > button:not(.device-dropdown-toggle):hover {
    background: rgba(99,102,241,0.2) !important;
    border-color: rgba(99,102,241,0.3) !important;
    color: #c4b5fd !important;
    transform: scale(1.08) !important;
}

/* Split-btn container */
#bottomButtons .split-btn {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

/* Chevron toggle */
#bottomButtons .device-dropdown-toggle {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.45) !important;
    font-size: 9px !important;
    padding: 0 !important;
    transition: background 0.15s, color 0.15s !important;
}

#bottomButtons .device-dropdown-toggle:hover {
    background: rgba(99,102,241,0.2) !important;
    color: #818cf8 !important;
}

/* Exit/leave button — danger red */
#exitButton,
#exitButton:not(:hover) {
    background: rgba(239,68,68,0.15) !important;
    border-color: rgba(239,68,68,0.25) !important;
    color: #f87171 !important;
}

#exitButton:hover {
    background: rgba(239,68,68,0.3) !important;
    border-color: rgba(239,68,68,0.45) !important;
    color: #fca5a5 !important;
    transform: scale(1.08) !important;
}

/* Exit menu */
#bottomButtons #exitMenu {
    background: rgba(12,13,20,0.96) !important;
    backdrop-filter: blur(20px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.55) !important;
    padding: 6px !important;
    overflow: hidden !important;
}

#bottomButtons #exitMenu button {
    width: 100% !important;
    border-radius: 10px !important;
    padding: 9px 14px !important;
    background: transparent !important;
    border: none !important;
    color: rgba(255,255,255,0.75) !important;
    text-align: left !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: background 0.12s !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

#bottomButtons #exitMenu button:hover {
    background: rgba(99,102,241,0.12) !important;
    color: #c4b5fd !important;
}

/* ── 4. Device + settings dropdown menus ──────────────────── */

#bottomButtons .dropdown-menu,
#bottomButtons #startAudioDeviceMenu,
#bottomButtons #startVideoDeviceMenu,
#bottomButtons #settingsExtraMenu {
    background: rgba(12,13,20,0.96) !important;
    backdrop-filter: blur(24px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6) !important;
    padding: 8px !important;
}

#bottomButtons .dropdown-menu button,
#bottomButtons #settingsExtraMenu button {
    border-radius: 10px !important;
    background: transparent !important;
    border: none !important;
    color: rgba(255,255,255,0.72) !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: background 0.12s, color 0.12s !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

#bottomButtons .dropdown-menu button:hover,
#bottomButtons #settingsExtraMenu button:hover {
    background: rgba(99,102,241,0.12) !important;
    color: #c4b5fd !important;
}

#bottomButtons #settingsExtraMenu .extra-menu-group,
#bottomButtons .device-menu-header {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,0.3) !important;
    padding: 8px 12px 4px !important;
    margin-top: 4px !important;
}

#bottomButtons .extra-menu-divider,
#bottomButtons .device-menu-divider {
    border-top: 1px solid rgba(255,255,255,0.07) !important;
    margin: 6px 0 !important;
}

/* ── 5. Video tiles ───────────────────────────────────────── */

.Camera {
    border-radius: 18px !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    background: rgba(10,11,15,0.85) !important;
    box-shadow:
        0 4px 24px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(255,255,255,0.05) !important;
    overflow: hidden !important;
    transition: border-color 0.25s, box-shadow 0.25s !important;
}

/* Speaking indicator */
.Camera.speaking-border,
.Camera[data-speaking="true"] {
    border-color: rgba(99,102,241,0.55) !important;
    box-shadow:
        0 0 0 2px rgba(99,102,241,0.3),
        0 4px 24px rgba(0,0,0,0.45) !important;
}

/* Pinned / active video area */
#videoPinMediaContainer {
    border-radius: 18px !important;
    border: 1px solid rgba(99,102,241,0.2) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
    overflow: hidden !important;
}

/* ── 6. Init / pre-join screen ────────────────────────────── */

#initUser {
    background: transparent !important;
    z-index: 100 !important;
}

.init-video-container {
    border-radius: 20px !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    box-shadow:
        0 20px 60px rgba(0,0,0,0.55),
        inset 0 1px 0 rgba(255,255,255,0.06) !important;
    overflow: hidden !important;
    background: rgba(10,11,15,0.88) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

/* Init action buttons row */
.initComands button {
    border-radius: 50% !important;
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: rgba(255,255,255,0.8) !important;
    transition: background 0.15s, color 0.15s, transform 0.12s !important;
}

.initComands button:hover {
    background: rgba(99,102,241,0.2) !important;
    border-color: rgba(99,102,241,0.35) !important;
    color: #c4b5fd !important;
    transform: scale(1.08) !important;
}

.initComands select {
    background: rgba(10,11,15,0.85) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 10px !important;
    color: rgba(255,255,255,0.8) !important;
}

/* ── 7. Settings panel ────────────────────────────────────── */

#mySettings {
    background:
        linear-gradient(180deg, rgba(18,19,30,0.95), rgba(12,13,22,0.92)) !important;
    backdrop-filter: blur(32px) saturate(170%) !important;
    -webkit-backdrop-filter: blur(32px) saturate(170%) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6) !important;
    border-radius: 20px !important;
}

/* Settings tab bar */
.tab {
    background: rgba(255,255,255,0.04) !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}

.tablinks {
    color: rgba(255,255,255,0.5) !important;
    border-radius: 8px 8px 0 0 !important;
    transition: background 0.15s, color 0.15s !important;
}

.tablinks:hover {
    background: rgba(99,102,241,0.1) !important;
    color: rgba(255,255,255,0.85) !important;
}

.tablinks.active,
.tablinks[aria-selected="true"] {
    background: var(--tab-btn-active, #13141f) !important;
    color: #818cf8 !important;
    border-bottom: 2px solid #6366f1 !important;
}

/* ── 8. Chat panel ────────────────────────────────────────── */

#chatRoom {
    background:
        linear-gradient(180deg, rgba(18,19,30,0.94), rgba(12,13,22,0.90)) !important;
    backdrop-filter: blur(28px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(160%) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 20px !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.5) !important;
}

/* Chat message bubbles */
.msg-bubble {
    border-radius: 14px !important;
}

.left-msg .msg-bubble {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}

.right-msg .msg-bubble {
    background: rgba(99,102,241,0.18) !important;
    border: 1px solid rgba(99,102,241,0.25) !important;
}

/* Chat input area */
.chat-textarea,
#chatMessage {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 12px !important;
    color: rgba(255,255,255,0.9) !important;
}

.chat-textarea:focus,
#chatMessage:focus {
    border-color: rgba(99,102,241,0.5) !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.1) !important;
}

/* ── 9. Lobby / waiting room section ──────────────────────── */

#lobby {
    background:
        linear-gradient(180deg, rgba(18,19,30,0.94), rgba(12,13,22,0.90)) !important;
    backdrop-filter: blur(28px) !important;
    -webkit-backdrop-filter: blur(28px) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 20px !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.5) !important;
}

/* ── 10. Bootstrap select overrides ───────────────────────── */

.form-select,
select.form-select,
.form-select.text-light.bg-dark {
    background-color: rgba(10,11,15,0.9) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 10px !important;
    color: rgba(255,255,255,0.8) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23818cf8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
}

.form-select:focus,
select.form-select:focus {
    border-color: rgba(99,102,241,0.5) !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.15) !important;
    outline: none !important;
}

/* ── 11. Polls panel ──────────────────────────────────────── */

#pollsContainer,
.polls-panel {
    background:
        linear-gradient(180deg, rgba(18,19,30,0.94), rgba(12,13,22,0.90)) !important;
    backdrop-filter: blur(28px) !important;
    -webkit-backdrop-filter: blur(28px) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 20px !important;
}

/* ── 12. Disconnect banner ────────────────────────────────── */

.disconnect-banner__inner {
    background:
        radial-gradient(circle at top left, rgba(239,68,68,0.18), transparent 42%),
        linear-gradient(135deg, rgba(30,10,10,0.94), rgba(14,15,24,0.95)) !important;
    border-color: rgba(239,68,68,0.28) !important;
}

/* ── 13. Whiteboard ───────────────────────────────────────── */

#whiteboard .whiteboard-header,
.whiteboard-header {
    background: rgba(12,13,22,0.92) !important;
    backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

/* ── 14. File transfer cards ──────────────────────────────── */

.file-transfer-card {
    background:
        linear-gradient(135deg, rgba(18,19,30,0.95), rgba(12,13,22,0.92)) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 20px !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.5) !important;
}

/* ── 15. Image URL modal ──────────────────────────────────── */

.imageUrlModal-content {
    background:
        linear-gradient(135deg, rgba(18,19,30,0.97), rgba(12,13,22,0.95)) !important;
    backdrop-filter: blur(28px) !important;
    -webkit-backdrop-filter: blur(28px) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6) !important;
    color: rgba(255,255,255,0.9) !important;
}

.imageUrlModal-content input[type="text"] {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 10px !important;
    color: rgba(255,255,255,0.9) !important;
}

.imageUrlModal-content button {
    border-radius: 10px !important;
    border: none !important;
}

/* ── 16. Breakout toolbar ─────────────────────────────────── */

.breakout-toolbar {
    background:
        linear-gradient(135deg, rgba(18,19,30,0.95), rgba(12,13,22,0.92)) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.45) !important;
}

/* ── 17. Light mode general text ─────────────────────────── */

html[data-theme="light"] {
    color: rgba(15,16,24,0.9);
}

/* Settings panel labels/text */
html[data-theme="light"] #mySettings label,
html[data-theme="light"] #mySettings p,
html[data-theme="light"] #mySettings .text-light {
    color: rgba(15,16,24,0.85) !important;
}

html[data-theme="light"] .tablinks {
    color: rgba(15,16,24,0.58) !important;
}

html[data-theme="light"] .tablinks.active {
    color: #4f46e5 !important;
    border-bottom-color: #6366f1 !important;
}

/* Chat panel text */
html[data-theme="light"] #chatRoom .msg-info,
html[data-theme="light"] #chatRoom .msg-time {
    color: rgba(15,16,24,0.50) !important;
}

html[data-theme="light"] #chatRoom .msg-text,
html[data-theme="light"] #chatRoom p,
html[data-theme="light"] #chatRoom span {
    color: rgba(15,16,24,0.85) !important;
}

html[data-theme="light"] #chatRoom .right-msg .msg-bubble .msg-text {
    color: rgba(15,16,24,0.88) !important;
}

/* ── 18. Theme toggle button (injected by Brand.js) ───────── */

#nebulaThemeToggle {
    position: fixed !important;
    bottom: 110px !important;
    right: 18px !important;
    z-index: 9999 !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    background: rgba(99,102,241,0.13) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    color: #818cf8 !important;
    font-size: 15px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.15s, transform 0.15s !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.35) !important;
}

#nebulaThemeToggle:hover {
    background: rgba(99,102,241,0.28) !important;
    transform: scale(1.1) !important;
}

/* ─────────────────────────────────────────────────────────────
   LIGHT MODE OVERRIDES
───────────────────────────────────────────────────────────── */

[data-theme="light"] html,
[data-theme="light"] body,
html[data-theme="light"],
html[data-theme="light"] body {
    background: linear-gradient(135deg, #f0f0ff, #f5f5ff) !important;
    color: rgba(15,16,24,0.9) !important;
}

[data-theme="light"] body::before {
    background:
        radial-gradient(60rem 40rem at 10% -5%,  rgba(99,102,241,0.1), transparent 60%),
        radial-gradient(50rem 35rem at 105% 10%, rgba(139,92,246,0.08), transparent 60%),
        radial-gradient(40rem 30rem at 50% 110%, rgba(34,211,238,0.06), transparent 60%);
}

[data-theme="light"] body::after {
    background-image:
        linear-gradient(rgba(99,102,241,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99,102,241,0.06) 1px, transparent 1px);
}

/* Control bar in light mode */
html[data-theme="light"] #bottomButtons {
    background: rgba(255,255,255,0.88) !important;
    border-color: rgba(99,102,241,0.15) !important;
    box-shadow: 0 8px 40px rgba(99,102,241,0.12), 0 1px 0 rgba(255,255,255,0.8) inset !important;
}

html[data-theme="light"] #bottomButtons > button,
html[data-theme="light"] #bottomButtons .split-btn > button:not(.device-dropdown-toggle) {
    background: rgba(99,102,241,0.07) !important;
    border-color: rgba(99,102,241,0.12) !important;
    color: rgba(15,16,24,0.75) !important;
}

html[data-theme="light"] #bottomButtons > button:hover,
html[data-theme="light"] #bottomButtons .split-btn > button:not(.device-dropdown-toggle):hover {
    background: rgba(99,102,241,0.15) !important;
    color: #4f46e5 !important;
}

html[data-theme="light"] #exitButton,
html[data-theme="light"] #exitButton:not(:hover) {
    background: rgba(239,68,68,0.1) !important;
    color: #dc2626 !important;
}

html[data-theme="light"] #exitButton:hover {
    background: rgba(239,68,68,0.2) !important;
    color: #b91c1c !important;
}

/* Dropdowns in light mode */
html[data-theme="light"] #bottomButtons .dropdown-menu,
html[data-theme="light"] #bottomButtons #exitMenu,
html[data-theme="light"] #bottomButtons #settingsExtraMenu {
    background: rgba(255,255,255,0.97) !important;
    border-color: rgba(99,102,241,0.14) !important;
    box-shadow: 0 12px 40px rgba(99,102,241,0.14) !important;
}

html[data-theme="light"] #bottomButtons .dropdown-menu button,
html[data-theme="light"] #bottomButtons #settingsExtraMenu button,
html[data-theme="light"] #bottomButtons #exitMenu button {
    color: rgba(15,16,24,0.72) !important;
}

html[data-theme="light"] #bottomButtons .dropdown-menu button:hover,
html[data-theme="light"] #bottomButtons #settingsExtraMenu button:hover,
html[data-theme="light"] #bottomButtons #exitMenu button:hover {
    background: rgba(99,102,241,0.08) !important;
    color: #4f46e5 !important;
}

/* Video tiles in light mode */
html[data-theme="light"] .Camera {
    border-color: rgba(99,102,241,0.12) !important;
    background: rgba(240,240,255,0.6) !important;
    box-shadow: 0 4px 24px rgba(99,102,241,0.1) !important;
}

/* Settings in light mode */
html[data-theme="light"] #mySettings {
    background: rgba(255,255,255,0.94) !important;
    border-color: rgba(99,102,241,0.14) !important;
    color: rgba(15,16,24,0.9) !important;
}

html[data-theme="light"] #chatRoom {
    background: rgba(255,255,255,0.92) !important;
    border-color: rgba(99,102,241,0.14) !important;
    color: rgba(15,16,24,0.9) !important;
}

/* Selects in light mode */
html[data-theme="light"] .form-select,
html[data-theme="light"] select.form-select,
html[data-theme="light"] .form-select.text-light.bg-dark {
    background-color: rgba(240,240,255,0.85) !important;
    border-color: rgba(99,102,241,0.2) !important;
    color: rgba(15,16,24,0.85) !important;
}

/* Theme toggle in light mode */
html[data-theme="light"] #nebulaThemeToggle {
    background: rgba(99,102,241,0.1) !important;
    border-color: rgba(99,102,241,0.2) !important;
    color: #6366f1 !important;
}