/* =========================================================
   LIQUID GLASS — iOS 26 style overlay theme
   Loaded after style.css + mobile-app.css, overrides visuals
   without touching any markup or JS behaviour.
   ========================================================= */

:root {
    /* Glass material tokens — clean thin macOS-style glass */
    --lg-blur: 18px;
    --lg-sat: 160%;
    --lg-fill:      rgba(255, 255, 255, 0.05);
    --lg-fill-2:    rgba(255, 255, 255, 0.08);
    --lg-fill-3:    rgba(255, 255, 255, 0.12);
    --lg-stroke:    rgba(255, 255, 255, 0.12);
    --lg-stroke-2:  rgba(255, 255, 255, 0.20);
    --lg-hi:        rgba(255, 255, 255, 0.18); /* hairline top rim */
    --lg-lo:        rgba(255, 255, 255, 0.04); /* bottom rim */
    --lg-shadow:    0 12px 32px -16px rgba(0, 0, 0, 0.5), 0 2px 8px -4px rgba(0, 0, 0, 0.3);

    /* iOS geometry */
    --radius:    18px;
    --radius-sm: 14px;
    --radius-lg: 26px;
    --lg-pill:   999px;
}

/* Light themes get milkier glass */
body:is([data-theme="white"], [data-theme="nord"]) {
    --lg-fill:     rgba(255, 255, 255, 0.55);
    --lg-fill-2:   rgba(255, 255, 255, 0.68);
    --lg-fill-3:   rgba(255, 255, 255, 0.80);
    --lg-stroke:   rgba(255, 255, 255, 0.75);
    --lg-stroke-2: rgba(255, 255, 255, 0.95);
    --lg-hi:       rgba(255, 255, 255, 0.95);
    --lg-lo:       rgba(255, 255, 255, 0.35);
    --lg-shadow:   0 20px 50px -20px rgba(30, 30, 60, 0.35), 0 4px 14px -8px rgba(30, 30, 60, 0.18);
}

/* =========================================================
   BACKGROUND — vivid aurora so the glass has something
   to refract. Always on, accent-tinted.
   ========================================================= */
body {
    background:
        radial-gradient(1100px 700px at 12% -10%, color-mix(in oklab, var(--accent) 34%, transparent), transparent 60%),
        radial-gradient(900px 640px at 105% 15%, color-mix(in oklab, var(--accent) 22%, #2b1a4d 40%), transparent 62%),
        radial-gradient(1000px 800px at 50% 118%, color-mix(in oklab, var(--accent) 26%, #0a3742 30%), transparent 60%),
        var(--bg);
    background-attachment: fixed;
}

body:is([data-theme="white"], [data-theme="nord"]) {
    background:
        radial-gradient(1100px 700px at 12% -10%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 60%),
        radial-gradient(900px 640px at 105% 15%, color-mix(in oklab, var(--accent) 14%, #ffd9ec 50%), transparent 62%),
        radial-gradient(1000px 800px at 50% 118%, color-mix(in oklab, var(--accent) 16%, #d2f4ff 45%), transparent 60%),
        var(--bg);
    background-attachment: fixed;
}

.app-bg {
    opacity: 1 !important;
    background:
        radial-gradient(560px 420px at 78% 74%, color-mix(in oklab, var(--accent) 16%, transparent), transparent 70%),
        radial-gradient(480px 380px at 18% 62%, rgba(255, 255, 255, 0.045), transparent 70%);
    filter: none;
}

/* =========================================================
   THE GLASS MATERIAL
   One recipe, applied to every floating surface.
   ========================================================= */
.hdr,
.welcome-card,
.glass,
.col,
.room-hero,
.dock,
.modal-card,
.modal-content,
.settings-card,
.acc-modal,
.acc-menu,
.wb-panel,
.yt-panel,
.sb-panel,
.dm-win,
.emoji-pop,
.toast,
.chat-row-menu,
.log-pop,
.screen-theater,
.fr-body,
.kbd-hint {
    /* clean thin glass — flat frosted fill, no glare, no distortion */
    background: var(--lg-fill) !important;
    -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
    backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
    border: 1px solid var(--lg-stroke) !important;
    /* single hairline top highlight + soft drop shadow */
    box-shadow:
        inset 0 1px 0 var(--lg-hi),
        var(--lg-shadow) !important;
}

/* kill old pseudo-element sheens from style.css .glass */
.glass::before { display: none !important; }

/* =========================================================
   HEADER — floating glass bar, inset from edges
   ========================================================= */
.hdr {
    margin: 10px 12px 0;
    border-radius: var(--lg-pill) !important;
    padding-left: 18px;
    padding-right: 12px;
}

/* =========================================================
   CARDS / COLUMNS / HERO
   ========================================================= */
.welcome-card       { border-radius: var(--radius-lg) !important; }
.col                { border-radius: var(--radius-lg) !important; }
.room-hero          { border-radius: var(--radius-lg) !important; }
.modal-card,
.modal-content,
.settings-card,
.acc-modal          { border-radius: var(--radius-lg) !important; }
.wb-panel, .yt-panel, .sb-panel, .dm-win, .screen-theater {
    border-radius: var(--radius-lg) !important;
    overflow: hidden;
}
.emoji-pop, .acc-menu, .chat-row-menu, .log-pop { border-radius: var(--radius) !important; }
.toast { border-radius: var(--lg-pill) !important; }

/* modal backdrop: iOS-style dimmed + blurred */
.modal, .modal-overlay, .acc-modal-ov {
    background: rgba(0, 0, 0, 0.35) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* =========================================================
   BUTTONS — glass capsules
   ========================================================= */
.btn {
    border-radius: var(--lg-pill) !important;
    border: 1px solid var(--lg-stroke) !important;
    background: var(--lg-fill-2);
    -webkit-backdrop-filter: blur(16px) saturate(var(--lg-sat));
    backdrop-filter: blur(16px) saturate(var(--lg-sat));
    box-shadow: inset 0 1px 0 var(--lg-hi), 0 2px 10px -4px rgba(0, 0, 0, 0.35);
    color: var(--text);
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.18s ease, box-shadow 0.18s ease;
}
.btn:hover  { background: var(--lg-fill-3); }
.btn:active { transform: scale(0.96); }

.btn-primary {
    background: color-mix(in oklab, var(--accent) 78%, transparent) !important;
    border-color: color-mix(in oklab, var(--accent) 55%, white 20%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        0 8px 24px -8px color-mix(in oklab, var(--accent) 70%, transparent) !important;
    color: #fff !important;
}
.btn-primary:hover {
    background: color-mix(in oklab, var(--accent) 90%, white 6%) !important;
}

.btn-secondary, .btn-ghost, .cv-nick-edit {
    background: var(--lg-fill) !important;
    border: 1px solid var(--lg-stroke) !important;
    border-radius: var(--lg-pill) !important;
    box-shadow: inset 0 1px 0 var(--lg-hi);
}

.icon-btn, .link-btn, .tiny-btn, .acc-btn {
    border-radius: var(--lg-pill) !important;
    border: 1px solid var(--lg-stroke) !important;
    background: var(--lg-fill);
    -webkit-backdrop-filter: blur(14px) saturate(var(--lg-sat));
    backdrop-filter: blur(14px) saturate(var(--lg-sat));
    box-shadow: inset 0 1px 0 var(--lg-hi);
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.18s ease;
}
.icon-btn:hover, .link-btn:hover, .tiny-btn:hover, .acc-btn:hover { background: var(--lg-fill-3); }
.icon-btn:active { transform: scale(0.92); }

/* =========================================================
   INPUTS — frosted capsules
   ========================================================= */
input[type="text"],
input[type="password"],
input[type="number"],
input[type="url"],
textarea,
select,
.mini-input,
.acc-input,
.dm-input {
    background: rgba(0, 0, 0, 0.18) !important;
    border: 1px solid var(--lg-stroke) !important;
    border-radius: var(--radius) !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
    color: var(--text);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
body:is([data-theme="white"], [data-theme="nord"]) input[type="text"],
body:is([data-theme="white"], [data-theme="nord"]) input[type="password"],
body:is([data-theme="white"], [data-theme="nord"]) textarea,
body:is([data-theme="white"], [data-theme="nord"]) select,
body:is([data-theme="white"], [data-theme="nord"]) .mini-input {
    background: rgba(255, 255, 255, 0.55) !important;
    box-shadow: inset 0 1px 3px rgba(30, 30, 60, 0.08);
}
input:focus, textarea:focus, select:focus, .mini-input:focus {
    border-color: color-mix(in oklab, var(--accent) 70%, white 15%) !important;
    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.2),
        0 0 0 4px color-mix(in oklab, var(--accent) 22%, transparent) !important;
    outline: none;
}
.mini-input, .cv-nick-row { border-radius: var(--lg-pill) !important; }

.cv-nick-row {
    background: rgba(0, 0, 0, 0.14) !important;
    border: 1px solid var(--lg-stroke) !important;
}
body:is([data-theme="white"], [data-theme="nord"]) .cv-nick-row {
    background: rgba(255, 255, 255, 0.5) !important;
}

.chat-input-wrap {
    background: rgba(0, 0, 0, 0.18) !important;
    border: 1px solid var(--lg-stroke) !important;
    border-radius: var(--lg-pill) !important;
    -webkit-backdrop-filter: blur(14px) saturate(var(--lg-sat));
    backdrop-filter: blur(14px) saturate(var(--lg-sat));
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.22);
}
body:is([data-theme="white"], [data-theme="nord"]) .chat-input-wrap {
    background: rgba(255, 255, 255, 0.55) !important;
}
.chat-input-wrap input,
.chat-input-wrap #chatInput {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.chat-input-wrap input:focus { box-shadow: none !important; }

/* =========================================================
   DOCK — the signature iOS floating capsule
   ========================================================= */
.dock {
    border-radius: var(--lg-pill) !important;
    padding: 8px 14px;
    --lg-blur: 32px;
}
.dock-btn {
    border-radius: var(--lg-pill) !important;
    border: 1px solid transparent;
    background: transparent;
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.18s ease;
}
.dock-btn:hover {
    background: var(--lg-fill-3);
    border-color: var(--lg-stroke);
    box-shadow: inset 0 1px 0 var(--lg-hi);
}
.dock-btn:active { transform: scale(0.88); }
.dock-btn.active, .dock-btn.on {
    background: color-mix(in oklab, var(--accent) 70%, transparent) !important;
    border-color: color-mix(in oklab, var(--accent) 50%, white 20%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 4px 14px -4px color-mix(in oklab, var(--accent) 60%, transparent);
    color: #fff;
}
.dock-avatar {
    border-radius: var(--lg-pill) !important;
    box-shadow: inset 0 1px 0 var(--lg-hi), 0 2px 8px -2px rgba(0, 0, 0, 0.4);
}
.dock-divider { background: var(--lg-stroke) !important; }

/* =========================================================
   BADGES / PILLS
   ========================================================= */
.badge, .status-pill, .hdr-lock, .acc-chip {
    border-radius: var(--lg-pill) !important;
    background: var(--lg-fill-2) !important;
    border: 1px solid var(--lg-stroke) !important;
    -webkit-backdrop-filter: blur(12px) saturate(var(--lg-sat));
    backdrop-filter: blur(12px) saturate(var(--lg-sat));
    box-shadow: inset 0 1px 0 var(--lg-hi);
}
.badge.on, .badge.connected {
    background: color-mix(in oklab, var(--good) 40%, transparent) !important;
    border-color: color-mix(in oklab, var(--good) 55%, white 15%) !important;
}

/* =========================================================
   ROOM TABS (mobile) — segmented glass control
   ========================================================= */
.room-tabs {
    background: var(--lg-fill) !important;
    border: 1px solid var(--lg-stroke) !important;
    border-radius: var(--lg-pill) !important;
    -webkit-backdrop-filter: blur(20px) saturate(var(--lg-sat));
    backdrop-filter: blur(20px) saturate(var(--lg-sat));
    box-shadow: inset 0 1px 0 var(--lg-hi);
    padding: 4px;
    gap: 4px;
}
.room-tab {
    border-radius: var(--lg-pill) !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    transition: background 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.room-tab.active {
    background: var(--lg-fill-3) !important;
    border-color: var(--lg-stroke) !important;
    box-shadow: inset 0 1px 0 var(--lg-hi), 0 2px 8px -2px rgba(0, 0, 0, 0.3) !important;
}

/* =========================================================
   LISTS — rooms, users, stage tiles
   ========================================================= */
.rooms-grid .room-item {
    background: var(--lg-fill) !important;
    border: 1px solid var(--lg-stroke) !important;
    border-radius: var(--radius) !important;
    -webkit-backdrop-filter: blur(12px) saturate(var(--lg-sat));
    backdrop-filter: blur(12px) saturate(var(--lg-sat));
    box-shadow: inset 0 1px 0 var(--lg-hi);
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.18s ease;
}
.rooms-grid .room-item:hover {
    background: var(--lg-fill-3) !important;
    transform: translateY(-2px) scale(1.01);
}
.rooms-grid .room-item::before { display: none !important; }

.user-card {
    background: var(--lg-fill) !important;
    border: 1px solid var(--lg-stroke) !important;
    border-radius: var(--radius) !important;
    box-shadow: inset 0 1px 0 var(--lg-lo);
}
.user-card:hover { background: var(--lg-fill-2) !important; }

.stage-tile {
    background: var(--lg-fill) !important;
    border: 1px solid var(--lg-stroke) !important;
    border-radius: var(--radius-lg) !important;
    -webkit-backdrop-filter: blur(16px) saturate(var(--lg-sat));
    backdrop-filter: blur(16px) saturate(var(--lg-sat));
    box-shadow: inset 0 1px 0 var(--lg-hi), 0 8px 24px -12px rgba(0, 0, 0, 0.45) !important;
}
.stage-avatar { border-radius: var(--lg-pill) !important; }

/* =========================================================
   CHAT
   ========================================================= */
.chat-bubble {
    background: var(--lg-fill-2) !important;
    border: 1px solid var(--lg-stroke) !important;
    border-radius: 20px !important;
    -webkit-backdrop-filter: blur(10px) saturate(var(--lg-sat));
    backdrop-filter: blur(10px) saturate(var(--lg-sat));
    box-shadow: inset 0 1px 0 var(--lg-lo);
}
.chat-row.self .chat-bubble, .chat-row.me .chat-bubble {
    background: color-mix(in oklab, var(--accent) 55%, transparent) !important;
    border-color: color-mix(in oklab, var(--accent) 45%, white 15%) !important;
}
.chat-system-bubble {
    background: var(--lg-fill) !important;
    border-radius: var(--lg-pill) !important;
    border: 1px solid var(--lg-stroke) !important;
}
.chat-onboard {
    background: transparent !important;
    border: 1px dashed var(--lg-stroke) !important;
    border-radius: var(--radius-lg) !important;
}
.emoji-trigger, .attach-trigger { border-radius: var(--lg-pill) !important; }

/* =========================================================
   SETTINGS
   ========================================================= */
.set-section, .setting-row, .set-row {
    border-radius: var(--radius) !important;
}
.settings-body .set-section {
    background: var(--lg-fill) !important;
    border: 1px solid var(--lg-stroke) !important;
    box-shadow: inset 0 1px 0 var(--lg-lo);
}
.theme-swatch { border-radius: var(--lg-pill) !important; }
.switch { border-radius: var(--lg-pill) !important; }

/* =========================================================
   MICRO-POLISH
   ========================================================= */
.wc-brand-dot, .logo-dot {
    box-shadow: 0 0 12px 2px color-mix(in oklab, var(--accent) 60%, transparent);
    border-radius: 50%;
}
.wc-divider { opacity: 0.7; }

/* scrollbars — thin, glassy */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb {
    background: var(--lg-stroke-2);
    border-radius: 99px;
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-track { background: transparent; }

/* selection tint */
::selection { background: color-mix(in oklab, var(--accent) 40%, transparent); }

/* fallback for browsers without backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .hdr, .welcome-card, .glass, .col, .room-hero, .dock,
    .modal-card, .modal-content, .settings-card, .acc-modal {
        background: color-mix(in oklab, var(--bg) 82%, white 6%) !important;
    }
}

/* respect reduced transparency / motion */
@media (prefers-reduced-transparency: reduce) {
    .hdr, .welcome-card, .glass, .col, .room-hero, .dock,
    .modal-card, .modal-content, .settings-card, .acc-modal {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: var(--surface) !important;
    }
}