/* =========================================================
   SHADEHUB 2026 — premium iOS 26 design layer
   Loaded last, after settings-tabs.css. Pure visual overlay:
   design tokens, typography, landing, room, sheets, modals,
   micro-interactions. No markup/JS behaviour is required to
   change — everything keeps its element ids and classes.
   Theme-agnostic: every accent/color reads from the active
   theme (var(--accent), --bg, --surface …).
   ========================================================= */

:root {
    /* ---- extended design tokens (consolidated) ---- */
    --sh-r-sm:   12px;
    --sh-r-md:   16px;
    --sh-r-lg:   20px;
    --sh-r-xl:   24px;
    --sh-r-2xl:  32px;
    --sh-r-pill: 999px;

    --sh-space-1: 4px;
    --sh-space-2: 8px;
    --sh-space-3: 12px;
    --sh-space-4: 16px;
    --sh-space-5: 24px;
    --sh-space-6: 32px;
    --sh-space-7: 48px;

    /* kinetic: springy press / decelerated enter */
    --sh-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);
    --sh-ease-out:    cubic-bezier(0.32, 0.72, 0.22, 1);
    --sh-ease-io:     cubic-bezier(0.45, 0.05, 0.25, 1);

    --sh-dur-fast:  150ms;
    --sh-dur-med:   280ms;
    --sh-dur-slow:  480ms;

    /* glass material (refines --lg-* without fighting perf-lite) */
    --sh-glass-bg:     var(--lg-fill, rgba(255, 255, 255, 0.05));
    --sh-glass-bg-2:   var(--lg-fill-2, rgba(255, 255, 255, 0.09));
    --sh-glass-bg-3:   var(--lg-fill-3, rgba(255, 255, 255, 0.14));
    --sh-glass-border: var(--lg-stroke, rgba(255, 255, 255, 0.09));
    --sh-glass-blur:   18px;
    --sh-glass-sat:    160%;

    /* soft premium shadows */
    --sh-shadow-soft: 0 2px 12px -4px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.2);
    --sh-shadow-float: 0 18px 44px -18px rgba(0, 0, 0, 0.55), 0 2px 10px -4px rgba(0, 0, 0, 0.3);
    --sh-shadow-lift: 0 28px 64px -24px rgba(0, 0, 0, 0.65), 0 6px 18px -8px rgba(0, 0, 0, 0.4);
}

/* =========================================================
   ATMOSPHERE — graphite depth, subtle top light
   ========================================================= */
body {
    background-color: color-mix(in oklab, var(--bg) 86%, #000) !important;
}

/* faint cinematic vignette so the edges fall into the dark
   and the centre (glass card / stage) reads brighter */
body::before {
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.035), transparent 55%),
        radial-gradient(90% 70% at 50% 110%, rgba(0, 0, 0, 0.35), transparent 60%) !important;
    opacity: 1 !important;
}

/* =========================================================
   TYPOGRAPHY — crisp SF-like hierarchy
   ========================================================= */
body {
    letter-spacing: -0.006em;
}
h1, h2, h3 { letter-spacing: -0.022em; }
b, strong { font-weight: 600; }

/* =========================================================
   HEADER — floating glass pill, safe-area aware
   ========================================================= */
.hdr {
    padding-left: max(18px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
}
html:not(.app-mobile) .hdr {
    margin-top: max(8px, env(safe-area-inset-top, 0px)) !important;
}
.logo-name {
    font-weight: 700;
    letter-spacing: -0.02em;
}
.icon-btn {
    width: 34px;
    height: 34px;
    border-radius: var(--sh-r-pill) !important;
    background: transparent !important;
    border: 1px solid transparent;
    color: var(--muted) !important;
    transition:
        color var(--sh-dur-fast) ease,
        background var(--sh-dur-fast) ease,
        border-color var(--sh-dur-fast) ease,
        transform var(--sh-dur-slow) var(--sh-spring) !important;
}
.icon-btn:hover { background: var(--sh-glass-bg-2) !important; border-color: var(--lg-stroke); color: var(--text) !important; }
.icon-btn:active { transform: scale(0.9) !important; }

/* header pill — exists quietly, never competes with the hero */
.hdr {
    border-color: color-mix(in oklab, var(--lg-stroke) 55%, transparent) !important;
    box-shadow: 0 14px 36px -22px rgba(0, 0, 0, 0.55), inset 0 1px 0 var(--lg-hi) !important;
}
#connectedBadge {
    background: rgba(255, 255, 255, 0.045) !important;
    border-color: color-mix(in oklab, var(--lg-stroke) 60%, transparent) !important;
}

/* =========================================================
   LANDING — premium SaaS hero
   ========================================================= */
.welcome {
    padding: 48px 24px 72px;
    align-content: start !important;
}

.welcome-card {
    max-width: 960px !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 28px 34px 30px !important;
    border-radius: var(--sh-r-2xl) !important;
    border: 1px solid color-mix(in oklab, var(--lg-stroke) 85%, rgba(255, 255, 255, 0.12)) !important;
    background:
        radial-gradient(ellipse 70% 50% at 50% -20%, color-mix(in oklab, var(--accent) 12%, transparent), transparent 75%),
        var(--sh-glass-bg) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 24px 64px -24px rgba(0, 0, 0, 0.7),
        0 8px 24px -10px color-mix(in oklab, var(--accent) 15%, transparent) !important;
    backdrop-filter: blur(28px) saturate(var(--lg-sat));
    -webkit-backdrop-filter: blur(28px) saturate(var(--lg-sat));
    transition: transform var(--sh-dur-slow) var(--sh-ease-out), opacity var(--sh-dur-slow) var(--sh-ease-out), box-shadow var(--sh-dur-med) ease;
}

/* hide the old animated top swoosh; the glass edge does the job */
.welcome-card::before { display: none !important; }

/* hero block — centered, headline is the visual anchor */
.wc-hero {
    max-width: 800px;
    margin: 0 auto var(--sh-space-5);
    text-align: center;
}

.wc-eyebrow-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 auto var(--sh-space-4);
    padding: 5px 14px;
    border-radius: var(--sh-r-pill);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--lg-stroke);
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 2px 10px -4px rgba(0, 0, 0, 0.3);
}
.wc-eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
    flex: none;
    animation: sh-pulse-dot 2.5s infinite ease-in-out;
}
@keyframes sh-pulse-dot {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.25); opacity: 1; filter: drop-shadow(0 0 6px var(--accent)); }
}
.wc-eyebrow-sep {
    opacity: 0.35;
}
.wc-ping-badge {
    border-radius: var(--sh-r-pill);
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text);
}
.wc-ping-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--good, #45b26b);
    box-shadow: 0 0 6px var(--good, #45b26b);
}

.wc-hero-text { margin-bottom: var(--sh-space-4) !important; }

/* CRITICAL: never use the `background` shorthand here — it resets
   background-clip to border-box, so the gradient paints a full
   rectangle while the text stays transparent. Use background-image
   and force every text-clip longhand with !important. If clipping
   ever fails, color falls back to a solid --text, never a box. */
.wc-title {
    font-size: clamp(28px, 4.4vw, 46px) !important;
    font-weight: 700 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.025em !important;
    margin: 0 0 var(--sh-space-3) !important;
    background-color: transparent !important;
    background-image: linear-gradient(180deg,
        var(--text) 0%,
        color-mix(in srgb, var(--text) 85%, var(--soft)) 70%,
        color-mix(in srgb, var(--accent) 30%, var(--text)) 135%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: var(--text) !important;
    animation: none !important;
    text-wrap: balance;
}

.wc-sub {
    font-size: 14.5px !important;
    line-height: 1.5 !important;
    color: var(--muted) !important;
    opacity: 0.85;
    max-width: 580px;
    margin: 0 auto;
    text-wrap: pretty;
}

/* 2-column layout grid */
.welcome-body-grid {
    display: grid !important;
    grid-template-columns: 1.12fr 0.88fr !important;
    gap: 20px !important;
    align-items: start !important;
}
@media (max-width: 840px) {
    .welcome-body-grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }
}

/* primary room omnibox action row */
.wc-input-action-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}
.wc-primary-input-wrap {
    flex: 1;
}
.wc-join-primary-btn {
    height: 38px !important;
    min-width: 120px;
    padding: 0 18px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border-radius: var(--sh-r-pill) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    background: linear-gradient(135deg, var(--accent) 0%, color-mix(in oklab, var(--accent) 80%, #000) 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 6px 18px -4px color-mix(in oklab, var(--accent) 55%, transparent) !important;
    border: 1px solid color-mix(in oklab, var(--accent) 80%, rgba(255, 255, 255, 0.3)) !important;
    color: #fff !important;
    cursor: pointer;
    flex-shrink: 0;
    transition:
        transform var(--sh-dur-slow) var(--sh-spring),
        box-shadow var(--sh-dur-med) var(--sh-ease-out),
        filter var(--sh-dur-fast) ease !important;
}
.wc-join-primary-btn:hover:not(:disabled) {
    transform: translateY(-1px) scale(1.02);
    filter: brightness(1.08);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.36),
        0 10px 24px -6px color-mix(in oklab, var(--accent) 70%, transparent) !important;
}
.wc-join-primary-btn:active:not(:disabled) {
    transform: scale(0.97);
}
.wc-join-arrow {
    transition: transform var(--sh-dur-fast) var(--sh-spring);
}
.wc-join-primary-btn:hover .wc-join-arrow {
    transform: translateX(3px);
}
@media (max-width: 480px) {
    .wc-input-action-row {
        flex-direction: column;
        align-items: stretch;
    }
    .wc-join-primary-btn {
        width: 100%;
        height: 42px !important;
    }
}

/* two-column body (form | rooms) rides inside a frosted panel */
.wc-col-right {
    border-left: 0 !important;
    background: rgba(0, 0, 0, 0.16) !important;
    border: 1px solid var(--lg-stroke) !important;
    border-radius: var(--sh-r-xl) !important;
    padding: 16px 18px !important;
    -webkit-backdrop-filter: blur(14px) saturate(var(--lg-sat));
    backdrop-filter: blur(14px) saturate(var(--lg-sat));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
@media (max-width: 768px) {
    .wc-col-right {
        padding: 14px 16px !important;
    }
}

/* form fields — roomier, glassy, glowing focus */
.cv-field {
    border-radius: var(--sh-r-md) !important;
    padding: 12px 14px !important;
    background: rgba(0, 0, 0, 0.20) !important;
    border: 1px solid var(--lg-stroke) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    margin-bottom: 12px;
    transition: border-color var(--sh-dur-fast) ease, box-shadow var(--sh-dur-fast) ease, background var(--sh-dur-fast) ease;
}
.cv-field:focus-within {
    border-color: color-mix(in oklab, var(--accent) 65%, var(--lg-stroke)) !important;
    background: rgba(0, 0, 0, 0.26) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent) !important;
}
.cv-field .composer-label { font-size: 11px !important; font-weight: 600; color: var(--muted); }
.cv-input-wrapper input,
.cv-field input[type="text"],
.cv-field input[type="password"] {
    height: 38px !important;
    min-height: 38px !important;
    font-size: 14.5px !important;
    border-radius: var(--sh-r-sm);
    color: var(--text) !important;
}
.cv-input-icon {
    color: var(--muted);
    font-weight: 600;
}
.cv-field:focus-within .cv-input-icon {
    color: var(--accent);
}

/* random room button */
.wc-random-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    font-size: 11.5px;
    font-weight: 600;
    border-radius: var(--sh-r-pill);
    background: var(--sh-glass-bg-2);
    border: 1px solid var(--lg-stroke);
    color: var(--muted);
    cursor: pointer;
    transition: all var(--sh-dur-fast) ease;
}
.wc-random-btn:hover {
    color: var(--accent);
    background: var(--sh-glass-bg-3);
    border-color: color-mix(in oklab, var(--accent) 40%, var(--lg-stroke));
    transform: translateY(-1px);
}
.wc-random-btn:hover svg {
    transform: rotate(180deg);
    transition: transform 0.4s var(--sh-spring);
}
.wc-random-btn svg {
    transition: transform 0.3s ease;
}

/* preset pills underneath room input */
.wc-presets-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
}
.preset-pill {
    padding: 3px 10px;
    border-radius: var(--sh-r-pill);
    background: var(--sh-glass-bg-2);
    border: 1px solid var(--lg-stroke);
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--sh-dur-fast) var(--sh-spring);
}
.preset-pill:hover {
    color: var(--text);
    background: color-mix(in oklab, var(--accent) 22%, var(--sh-glass-bg-2));
    border-color: color-mix(in oklab, var(--accent) 45%, var(--lg-stroke));
    transform: translateY(-1px) scale(1.04);
    box-shadow: 0 4px 12px -4px color-mix(in oklab, var(--accent) 35%, transparent);
}
.preset-pill:active {
    transform: scale(0.96);
}

/* nick row — personal glass chip */
.cv-nick-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    border-radius: var(--sh-r-lg) !important;
    padding: 10px 14px !important;
    background:
        radial-gradient(ellipse 60% 80% at 0% 50%, color-mix(in oklab, var(--accent) 12%, transparent), transparent 70%),
        rgba(0, 0, 0, 0.18) !important;
    border: 1px solid var(--lg-stroke) !important;
    margin-bottom: 14px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.cv-nick-avatar {
    width: 34px;
    height: 34px;
    border-radius: var(--sh-r-pill) !important;
    background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 40%, #1a1a24), color-mix(in oklab, var(--accent) 15%, #0d0d12)) !important;
    border: 1.5px solid color-mix(in oklab, var(--accent) 60%, var(--lg-stroke)) !important;
    box-shadow: 0 0 12px -2px color-mix(in oklab, var(--accent) 45%, transparent);
    color: #fff;
    font-weight: 700;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.cv-nick-label {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.cv-nick-label .composer-label {
    font-size: 10.5px !important;
    color: var(--muted);
    font-weight: 600;
    line-height: 1.1;
}
.cv-nick-value {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    color: var(--text) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cv-nick-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
}
.cv-nick-edit, .cv-nick-acc-btn {
    height: 30px !important;
    padding: 0 11px !important;
    border-radius: var(--sh-r-pill) !important;
    font-size: 12px !important;
    font-weight: 600;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: var(--sh-glass-bg-2) !important;
    border: 1px solid var(--lg-stroke) !important;
    color: var(--muted) !important;
    transition: all var(--sh-dur-fast) ease;
}
.cv-nick-edit:hover, .cv-nick-acc-btn:hover {
    color: var(--text) !important;
    background: var(--sh-glass-bg-3) !important;
    border-color: var(--lg-stroke-2) !important;
    transform: translateY(-1px);
}

/* field header actions */
.wc-field-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}
.wc-copy-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 600;
    border-radius: var(--sh-r-pill);
    background: var(--sh-glass-bg-2);
    border: 1px solid var(--lg-stroke);
    color: var(--muted);
    cursor: pointer;
    transition: all var(--sh-dur-fast) ease;
}
.wc-copy-link-btn:hover {
    color: var(--accent);
    background: var(--sh-glass-bg-3);
    border-color: color-mix(in oklab, var(--accent) 40%, var(--lg-stroke));
    transform: translateY(-1px);
}

/* Pre-join Audio & Mic Check box */
.cv-prejoin-box {
    margin-top: 10px;
    padding: 12px 14px;
    border-radius: var(--sh-r-md);
    background: rgba(0, 0, 0, 0.20);
    border: 1px solid var(--lg-stroke);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.cv-prejoin-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
.cv-prejoin-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
}
.cv-prejoin-title svg {
    color: var(--accent);
}
.cv-prejoin-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.cv-mic-test-btn {
    height: 28px !important;
    padding: 0 10px !important;
    font-size: 11.5px !important;
    font-weight: 600;
    border-radius: var(--sh-r-pill) !important;
    background: var(--sh-glass-bg-2) !important;
    border: 1px solid var(--lg-stroke) !important;
    color: var(--text) !important;
    transition: all var(--sh-dur-fast) ease;
}
.cv-mic-test-btn:hover {
    background: var(--sh-glass-bg-3) !important;
    border-color: color-mix(in oklab, var(--accent) 40%, var(--lg-stroke)) !important;
    color: var(--accent) !important;
    transform: translateY(-1px);
}
.cv-mic-test-btn.active {
    background: color-mix(in oklab, var(--good, #45b26b) 20%, transparent) !important;
    border-color: var(--good, #45b26b) !important;
    color: var(--good, #45b26b) !important;
}

/* Mic VU-meter bar */
.cv-mic-meter-wrap {
    margin-top: 10px;
    height: 6px;
    border-radius: var(--sh-r-pill);
    background: rgba(0, 0, 0, 0.4);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.cv-mic-meter-bar {
    height: 100%;
    width: 0%;
    border-radius: var(--sh-r-pill);
    background: linear-gradient(90deg, var(--good, #45b26b), var(--accent), #f59e0b);
    transition: width 60ms ease-out;
    box-shadow: 0 0 8px var(--good, #45b26b);
}

/* Camera Live Preview Mirror */
.cv-cam-preview-wrap {
    margin-top: 10px;
    position: relative;
    border-radius: var(--sh-r-md);
    overflow: hidden;
    background: #000;
    border: 1px solid var(--lg-stroke);
    aspect-ratio: 16 / 9;
    max-height: 180px;
}
.cv-cam-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scaleX(-1);
    display: block;
}
.cv-cam-preview-overlay {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: auto;
}
.cv-cam-badge {
    padding: 3px 8px;
    border-radius: var(--sh-r-pill);
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 10.5px;
    font-weight: 600;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.cv-cam-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 6px #ef4444;
}
.cv-cam-close-btn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 14px;
    display: grid;
    place-items: center;
    cursor: pointer;
    line-height: 1;
    transition: background 0.15s ease;
}
.cv-cam-close-btn:hover {
    background: #ef4444;
}

.cv-prejoin-toggles {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.cv-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--muted);
    cursor: pointer;
    user-select: none;
    transition: color var(--sh-dur-fast) ease;
}
.cv-toggle-label:hover {
    color: var(--text);
}
.cv-toggle-cb {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1.5px solid var(--lg-stroke);
    background: var(--sh-glass-bg-2);
    cursor: pointer;
    position: relative;
    outline: none;
    transition: all var(--sh-dur-fast) ease;
}
.cv-toggle-cb:checked {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 8px color-mix(in oklab, var(--accent) 50%, transparent);
}
.cv-toggle-cb:checked::after {
    content: "✓";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
}

/* Recent rooms section */
.wc-recents-section {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--lg-stroke);
}
.wc-recents-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.wc-recents-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.wc-recents-title svg { color: var(--muted); }
.wc-clear-recents-btn {
    font-size: 11px;
    color: var(--muted);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: color var(--sh-dur-fast) ease;
}
.wc-clear-recents-btn:hover { color: var(--text); text-decoration: underline; }
.recent-rooms-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.recent-room-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--sh-r-pill);
    background: var(--sh-glass-bg-2);
    border: 1px solid var(--lg-stroke);
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    transition: all var(--sh-dur-fast) var(--sh-spring);
}
.recent-room-chip:hover {
    background: color-mix(in oklab, var(--accent) 15%, var(--sh-glass-bg-2));
    border-color: color-mix(in oklab, var(--accent) 40%, var(--lg-stroke));
    transform: translateY(-1px);
    box-shadow: 0 4px 12px -4px color-mix(in oklab, var(--accent) 30%, transparent);
}
.recent-room-chip.is-favorite {
    border-color: rgba(245, 158, 11, 0.38) !important;
    background: rgba(245, 158, 11, 0.08) !important;
    box-shadow: 0 0 10px -4px rgba(245, 158, 11, 0.3) !important;
}
.recent-room-chip.is-favorite:hover {
    background: rgba(245, 158, 11, 0.16) !important;
    border-color: rgba(245, 158, 11, 0.6) !important;
}
.rrc-star {
    font-size: 12.5px;
    line-height: 1;
    opacity: 0.45;
    transition: opacity 0.15s ease, transform 0.2s var(--sh-spring);
}
.rrc-star:hover {
    opacity: 1;
    transform: scale(1.3);
}
.rrc-star.active {
    opacity: 1;
    filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.7));
}
.recent-room-chip .rrc-del {
    color: var(--muted);
    font-size: 13px;
    line-height: 1;
    margin-left: 2px;
    opacity: 0.6;
    transition: opacity 0.15s, color 0.15s;
}
.recent-room-chip:hover .rrc-del:hover {
    opacity: 1;
    color: #ef4444;
}

/* Live Search & Filter bar for rooms */
.wc-rooms-filter-bar {
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.wc-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.wc-search-icon {
    position: absolute;
    left: 12px;
    color: var(--muted);
    pointer-events: none;
}
.wc-search-input {
    width: 100%;
    height: 34px !important;
    padding: 0 12px 0 34px !important;
    border-radius: var(--sh-r-pill) !important;
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid var(--lg-stroke) !important;
    font-size: 12.5px !important;
    color: var(--text) !important;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.wc-search-input:focus {
    border-color: color-mix(in oklab, var(--accent) 55%, var(--lg-stroke)) !important;
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 15%, transparent) !important;
}
.wc-filter-chips {
    display: flex;
    align-items: center;
    gap: 6px;
}
.wc-filter-chip {
    padding: 3px 10px;
    border-radius: var(--sh-r-pill);
    background: transparent;
    border: 1px solid var(--lg-stroke);
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--sh-dur-fast) ease;
}
.wc-filter-chip:hover {
    color: var(--text);
    background: var(--sh-glass-bg-2);
}
.wc-filter-chip.active {
    background: color-mix(in oklab, var(--accent) 20%, transparent);
    border-color: color-mix(in oklab, var(--accent) 45%, transparent);
    color: color-mix(in oklab, var(--accent) 70%, #fff);
    box-shadow: 0 0 8px color-mix(in oklab, var(--accent) 20%, transparent);
}

/* active rooms — calm header, roomier rows */
.wc-rooms-head { margin-bottom: var(--sh-space-3) !important; }
.wc-rooms-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    color: var(--text) !important;
}
.wc-rooms-hint { font-size: 12px !important; margin-bottom: var(--sh-space-3) !important; }
.wc-rooms .rooms-grid { gap: var(--sh-space-2) !important; }
.wc-rooms .rooms-grid .room-item {
    min-height: 44px !important;
    max-height: 44px !important;
    border-radius: 14px !important;
}
.wc-rooms .rooms-grid .room-item::before { box-shadow: none; }
.wc-rooms .rooms-grid .room-item:hover {
    background: color-mix(in oklab, var(--accent) 9%, transparent) !important;
    border-color: color-mix(in oklab, var(--accent) 35%, var(--lg-stroke)) !important;
    transform: translateY(-1px);
}

/* =========================================================
   LANDING FEATURES — Modern Connected VisionOS Tiles
   ========================================================= */
.wc-features {
    margin-top: var(--sh-space-6);
    padding-top: var(--sh-space-5);
    border-top: 1px solid var(--lg-stroke);
}
.wc-how {
    margin-top: var(--sh-space-6);
    padding-top: var(--sh-space-5);
    border-top: 1px solid var(--lg-stroke);
}
.wc-section-title {
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.wc-feat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
@media (max-width: 900px) {
    .wc-feat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .wc-feat-grid {
        grid-template-columns: 1fr;
    }
}
.wc-feat-item {
    border-radius: var(--sh-r-md) !important;
    background: rgba(0, 0, 0, 0.16) !important;
    border: 1px solid var(--lg-stroke) !important;
    padding: 14px 16px !important;
    transition: all var(--sh-dur-fast) ease, transform var(--sh-dur-slow) var(--sh-spring) !important;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.wc-feat-item:hover {
    background: color-mix(in oklab, var(--accent) 12%, rgba(0, 0, 0, 0.25)) !important;
    border-color: color-mix(in oklab, var(--accent) 40%, var(--lg-stroke)) !important;
    transform: translateY(-2px) scale(1.01) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 8px 20px -8px color-mix(in oklab, var(--accent) 35%, transparent) !important;
}
.wc-feat-item > svg {
    width: 20px !important;
    height: 20px !important;
    color: var(--accent) !important;
    stroke-width: 2;
    flex: none;
    padding: 6px;
    box-sizing: content-box;
    border-radius: 8px;
    background: color-mix(in oklab, var(--accent) 15%, transparent);
    border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
    filter: drop-shadow(0 0 6px color-mix(in oklab, var(--accent) 40%, transparent));
    transition: transform var(--sh-dur-med) var(--sh-spring);
}
.wc-feat-item:hover > svg {
    transform: scale(1.12);
    background: color-mix(in oklab, var(--accent) 25%, transparent);
}
.wfi-txt b {
    font-size: 13px !important;
    font-weight: 600;
    color: var(--text);
    display: block;
    margin-bottom: 2px;
}
.wfi-txt span {
    font-size: 11.5px !important;
    color: var(--muted);
    line-height: 1.35;
    display: block;
}

/* how-it-works — quiet, numbered with glow */
.wc-how-title {
    font-size: 13.5px !important;
    font-weight: 700;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    color: var(--text) !important;
    margin-bottom: 14px;
}
.wc-how-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}
.wc-how-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--sh-r-md);
    background: rgba(0, 0, 0, 0.16);
    border: 1px solid var(--lg-stroke);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    transition: transform var(--sh-dur-med) var(--sh-spring), border-color var(--sh-dur-fast) ease, box-shadow var(--sh-dur-med) ease;
}
.wc-how-step:hover {
    transform: translateY(-2px);
    border-color: color-mix(in oklab, var(--accent) 45%, var(--lg-stroke));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 8px 20px -8px color-mix(in oklab, var(--accent) 30%, transparent);
}
.wc-how-num {
    width: 28px !important;
    height: 28px !important;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: var(--sh-r-pill) !important;
    background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 35%, #20202a), color-mix(in oklab, var(--accent) 15%, #101018)) !important;
    border: 1.5px solid color-mix(in oklab, var(--accent) 60%, var(--lg-stroke)) !important;
    box-shadow: 0 0 10px -2px color-mix(in oklab, var(--accent) 45%, transparent);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
}
.wc-how-txt b {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    display: block;
    margin-bottom: 2px;
}
.wc-how-txt span {
    font-size: 11.5px;
    color: var(--muted);
    line-height: 1.4;
    display: block;
}

/* active rooms — empty state, status, list */
.wc-rooms-hint { font-size: 12px !important; }
.wc-rooms-badge {
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--sh-r-pill);
    background: var(--sh-glass-bg-2);
    border: 1px solid var(--lg-stroke);
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}
.wc-rooms-badge[data-state="ready"] {
    background: color-mix(in oklab, var(--accent) 22%, transparent);
    border-color: color-mix(in oklab, var(--accent) 45%, transparent);
    color: color-mix(in oklab, var(--accent) 60%, var(--text));
    box-shadow: 0 0 8px color-mix(in oklab, var(--accent) 25%, transparent);
}
.wc-refresh-btn { border-radius: var(--sh-r-pill) !important; }

.wc-rooms-empty {
    align-items: center;
    text-align: center;
    padding: 32px 20px !important;
    border: 1.5px dashed color-mix(in oklab, var(--lg-stroke-2) 55%, transparent);
    border-radius: var(--sh-r-lg);
    background: rgba(255, 255, 255, 0.015);
}
.wre-icon {
    width: 46px;
    height: 46px;
    border-radius: var(--sh-r-pill);
    display: grid;
    place-items: center;
    background: var(--sh-glass-bg-2);
    border: 1px solid var(--lg-stroke);
    color: var(--muted);
    margin: 0 auto 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.wre-text { font-size: 14px !important; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.wre-hint { font-size: 12px !important; color: var(--muted); }

.wc-rooms .rooms-grid .room-item {
    border-radius: var(--sh-r-md) !important;
    padding: 12px 16px !important;
    background: rgba(0, 0, 0, 0.18) !important;
    border: 1px solid var(--lg-stroke) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    transition: transform var(--sh-dur-slow) var(--sh-spring), background var(--sh-dur-fast) ease, border-color var(--sh-dur-fast) ease, box-shadow var(--sh-dur-med) ease;
}
.wc-rooms .rooms-grid .room-item:hover {
    background: color-mix(in oklab, var(--accent) 12%, rgba(0, 0, 0, 0.28)) !important;
    border-color: color-mix(in oklab, var(--accent) 45%, var(--lg-stroke)) !important;
    transform: translateY(-2px) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 8px 20px -8px color-mix(in oklab, var(--accent) 40%, transparent) !important;
}
.room-item-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: var(--sh-r-sm) !important;
    display: grid !important;
    place-items: center;
    background: var(--sh-glass-bg-2);
    border: 1px solid var(--lg-stroke);
    color: var(--accent);
    font-size: 15px;
    font-weight: 700;
    flex: none;
}
.room-item-icon svg { display: block; }
.room-item.locked .room-item-icon {
    color: #eab308;
    background: rgba(234, 179, 8, 0.12);
    border-color: rgba(234, 179, 8, 0.4);
    box-shadow: 0 0 8px rgba(234, 179, 8, 0.2);
}
.wc-rooms .rooms-grid .room-name { font-size: 14px !important; font-weight: 600 !important; }
.wc-rooms .rooms-grid .room-count { font-size: 12px !important; }
.room-online-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    background: var(--good, #45b26b);
    margin-right: 6px;
    vertical-align: 1px;
    box-shadow: 0 0 8px var(--good, #45b26b);
    animation: sh-pulse-green 2s infinite ease-in-out;
}
@keyframes sh-pulse-green {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.3); opacity: 1; filter: drop-shadow(0 0 4px var(--good, #45b26b)); }
}
.wc-rooms .rooms-grid .room-item:hover .room-join-arrow {
    opacity: 1;
    transform: translateX(0);
}
.room-join-arrow {
    opacity: 0.55;
    transform: translateX(-3px);
    transition: opacity var(--sh-dur-fast) ease, transform var(--sh-dur-med) var(--sh-ease-out);
}

/* skeleton shimmer */
.room-skeleton .rs-block { background: var(--sh-glass-bg-2) !important; }
.room-skeleton .rs-line { background: linear-gradient(90deg, var(--sh-glass-bg-2), var(--sh-glass-bg-3), var(--sh-glass-bg-2)); background-size: 200% 100%; animation: sh-shimmer 1.4s linear infinite !important; }
@keyframes sh-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* =========================================================
   ROOM — hero banner
   ========================================================= */
.room-hero {
    border-radius: var(--sh-r-lg) !important;
    padding: 14px 18px !important;
    background:
        linear-gradient(135deg,
            color-mix(in oklab, var(--accent) 14%, transparent),
            transparent 55%),
        var(--sh-glass-bg) !important;
}
.rh-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
    font-size: 18px !important;
    background: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 55%, white 12%)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 5px 14px -8px color-mix(in oklab, var(--accent) 45%, transparent);
}
.rh-name { font-size: 18px !important; }
.status-pill {
    padding: 6px 12px !important;
    font-size: 12px !important;
}
.invite-btn { height: 36px !important; }

/* =========================================================
   ROOM — stage: premium member tiles
   ========================================================= */
.stage-grid {
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)) !important;
    gap: 16px !important;
}
.stage-tile {
    border-radius: var(--sh-r-xl) !important;
    padding: 24px 16px 20px !important;
    background: var(--sh-glass-bg) !important;
    border: 1px solid var(--lg-stroke) !important;
    box-shadow:
        inset 0 1px 0 var(--lg-hi),
        0 10px 30px -14px rgba(0, 0, 0, 0.5) !important;
    transition:
        transform var(--sh-dur-slow) var(--sh-spring),
        border-color var(--sh-dur-med) var(--sh-ease-out),
        box-shadow var(--sh-dur-med) var(--sh-ease-out),
        background var(--sh-dur-fast) ease !important;
    animation: sh-tile-in var(--sh-dur-slow) var(--sh-ease-out) backwards;
}
@keyframes sh-tile-in {
    from { opacity: 0; transform: scale(0.92) translateY(10px); }
    to   { opacity: 1; transform: none; }
}
.stage-tile:nth-child(2)  { animation-delay: 40ms; }
.stage-tile:nth-child(3)  { animation-delay: 80ms; }
.stage-tile:nth-child(4)  { animation-delay: 120ms; }
.stage-tile:nth-child(5)  { animation-delay: 160ms; }
.stage-tile:nth-child(6)  { animation-delay: 200ms; }
.stage-tile:hover {
    transform: translateY(-3px);
    box-shadow:
        inset 0 1px 0 var(--lg-hi),
        0 20px 44px -18px rgba(0, 0, 0, 0.6) !important;
}

.stage-avatar {
    width: 76px !important;
    height: 76px !important;
    font-size: 30px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 10px 24px -10px rgba(0, 0, 0, 0.55);
    transition: transform var(--sh-dur-slow) var(--sh-spring);
}
.stage-tile:hover .stage-avatar { transform: scale(1.04); }

/* speaking: soft breathing halo around the avatar */
.stage-tile.speaking .stage-avatar::after {
    border: 2px solid color-mix(in oklab, var(--accent) 80%, white 10%);
    box-shadow:
        0 0 0 2px color-mix(in oklab, var(--accent) 30%, transparent),
        0 0 26px 2px color-mix(in oklab, var(--accent) 45%, transparent);
    animation: sh-halo 1.5s var(--sh-ease-io) infinite !important;
}
@keyframes sh-halo {
    0%, 100% { transform: scale(1.04); opacity: 0.9; }
    50%      { transform: scale(1.16); opacity: 0.35; }
}
.stage-tile.speaking {
    border-color: color-mix(in oklab, var(--accent) 40%, var(--lg-stroke)) !important;
    background: linear-gradient(160deg,
        color-mix(in oklab, var(--accent) 9%, transparent),
        var(--sh-glass-bg) 60%) !important;
}

/* mic status pill pinned to the avatar corner */
.stage-status {
    width: 26px !important;
    height: 26px !important;
    border-radius: var(--sh-r-pill) !important;
    background: var(--good, #45b26b) !important;
    border: 2.5px solid color-mix(in oklab, var(--bg) 88%, transparent) !important;
    color: #fff !important;
    display: grid;
    place-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.stage-status svg { width: 13px; height: 13px; display: block; }
.stage-status.muted {
    background: var(--elevated, #1d1f23) !important;
    color: var(--muted) !important;
}
.stage-tile.is-muted .stage-name { opacity: 0.62; }

.stage-name {
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
}
.stage-host {
    border-radius: var(--sh-r-pill) !important;
    font-size: 10px !important;
    padding: 3px 8px !important;
}
.stage-host svg { width: 10px; height: 10px; vertical-align: -1px; margin-right: 3px; }
.stage-me {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--sh-r-pill);
    background: var(--sh-glass-bg-2);
    color: var(--muted);
}

/* empty stage */
.stage-empty {
    border-radius: var(--sh-r-xl);
    border: 1.5px dashed var(--lg-stroke-2);
    background: rgba(255, 255, 255, 0.02);
    padding: 64px 24px !important;
}
.se-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--sh-r-pill);
    display: grid;
    place-items: center;
    background: var(--sh-glass-bg-2);
    border: 1px solid var(--lg-stroke);
    color: var(--muted);
    margin-bottom: 4px;
}
.se-icon svg { display: block; }
.se-title { font-size: 16px !important; font-weight: 600 !important; color: var(--text); }
.se-hint { font-size: 13px !important; }

/* invite-your-friends card (alone in a room) */
.stage-invite {
    grid-column: 1 / -1;
    border-radius: var(--sh-r-lg);
    border: 1px dashed var(--lg-stroke-2);
    background: rgba(255, 255, 255, 0.02);
    padding: 22px;
    text-align: center;
}
.si-btn { height: 38px; }

/* =========================================================
   ROOM — users column
   ========================================================= */
.user-card {
    border-radius: var(--sh-r-md) !important;
    padding: 8px 10px !important;
    background: rgba(0, 0, 0, 0.16) !important;
    border: 1px solid var(--lg-stroke) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    transition:
        background var(--sh-dur-fast) ease,
        border-color var(--sh-dur-med) ease,
        transform var(--sh-dur-slow) var(--sh-spring) !important;
}
.user-card:hover {
    background: rgba(0, 0, 0, 0.25) !important;
    border-color: var(--lg-stroke-2) !important;
    transform: translateX(2px);
}
.user-card.speaking {
    border-color: color-mix(in oklab, var(--accent) 60%, var(--lg-stroke)) !important;
    background: linear-gradient(90deg,
        color-mix(in oklab, var(--accent) 16%, transparent),
        rgba(0, 0, 0, 0.22)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 4px 14px -6px color-mix(in oklab, var(--accent) 35%, transparent) !important;
}

/* Fix flex layout for top user row to prevent overlapping */
.user-top {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
}
.user-card .avatar {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}
.user-meta {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    overflow: hidden !important;
}
.user-name-row {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    min-width: 0 !important;
    flex-wrap: nowrap !important;
}
.user-name {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    flex: 0 1 auto !important;
    min-width: 30px !important;
}
.role-badge.host {
    font-size: 9px !important;
    font-weight: 700 !important;
    padding: 1.5px 5px !important;
    border-radius: var(--sh-r-pill) !important;
    background: color-mix(in oklab, var(--accent) 18%, transparent) !important;
    border: 1px solid color-mix(in oklab, var(--accent) 45%, transparent) !important;
    color: var(--accent) !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}
.quality-dot {
    width: 6px !important;
    height: 6px !important;
    margin-left: 0 !important;
    flex-shrink: 0 !important;
}
.conn-type {
    margin-left: 0 !important;
    font-size: 10.5px !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
}
.user-card .voice-bars {
    width: 24px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
}
.mute-badge {
    margin-left: auto !important;
    flex-shrink: 0 !important;
}
.mute-badge:not(.is-muted) {
    display: none !important; /* Hide redundant "Live" text */
}
.mute-badge.is-muted {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 2px 6px !important;
    border-radius: var(--sh-r-pill) !important;
    background: rgba(239, 68, 68, 0.15) !important;
    border: 1px solid rgba(239, 68, 68, 0.35) !important;
    color: #ef4444 !important;
    line-height: 1.1 !important;
}

/* User expandable volume controls */
.user-controls {
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    padding-top: 0;
    border-top: 1px solid transparent !important;
    transition: max-height 0.2s ease, opacity 0.2s ease, margin-top 0.2s ease, padding-top 0.2s ease !important;
}
.user-card.show-controls .user-controls,
.user-card:focus-within .user-controls {
    max-height: 120px !important;
    opacity: 1 !important;
    margin-top: 6px !important;
    padding-top: 6px !important;
    border-top-color: var(--lg-stroke) !important;
}
/* Disable hover-based auto-expansion to prevent sudden card jumping */
.user-card:hover .user-controls {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    padding-top: 0;
    border-top-color: transparent !important;
}
.user-card.show-controls:hover .user-controls,
.user-card:focus-within:hover .user-controls {
    max-height: 120px !important;
    opacity: 1 !important;
    margin-top: 6px !important;
    padding-top: 6px !important;
    border-top-color: var(--lg-stroke) !important;
}
.volume-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
.volume-icon {
    font-size: 13px !important;
    flex-shrink: 0 !important;
    line-height: 1;
}
.volume-slider {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}
.volume-value {
    font-size: 10.5px !important;
    color: var(--muted) !important;
    width: 30px !important;
    text-align: right !important;
    flex-shrink: 0 !important;
}

/* Profile Modal Actions */
.profile-modal-actions {
    margin: 14px 0;
    padding: 12px;
    border-radius: var(--sh-r-md);
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--lg-stroke);
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
}
.profile-vol-box {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.profile-vol-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--muted);
    font-weight: 600;
}
.profile-vol-val {
    color: var(--accent);
    font-weight: 700;
}
.profile-btn-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}
.profile-act-btn {
    width: 100%;
    height: 36px !important;
    padding: 0 12px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    border-radius: var(--sh-r-pill) !important;
    background: var(--sh-glass-bg-2) !important;
    border: 1px solid var(--lg-stroke) !important;
    color: var(--text) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}
.profile-act-btn:hover {
    background: var(--sh-glass-bg-3) !important;
    border-color: var(--lg-stroke-2) !important;
    transform: translateY(-1px);
}
.profile-act-btn.btn-danger {
    background: rgba(239, 68, 68, 0.16) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    color: #ef4444 !important;
}
.profile-act-btn.btn-danger:hover {
    background: rgba(239, 68, 68, 0.28) !important;
    border-color: #ef4444 !important;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.3) !important;
}

/* =========================================================
   USER CONTEXT MENU (Right Click)
   ========================================================= */
.user-context-menu {
    position: fixed;
    z-index: 9999;
    min-width: 230px;
    max-width: 280px;
    padding: 8px;
    border-radius: var(--sh-r-md, 14px);
    background: rgba(14, 16, 22, 0.94);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--lg-stroke, rgba(255, 255, 255, 0.12));
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 4px;
    opacity: 0;
    transform: scale(0.96) translateY(-4px);
    pointer-events: none;
    transition: opacity 0.14s ease, transform 0.14s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}
.user-context-menu.open {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}
.ucm-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px 8px;
}
.ucm-avatar {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    flex-shrink: 0;
}
.ucm-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}
.ucm-name-row {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}
.ucm-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text, #fff);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ucm-status {
    font-size: 11px;
    color: var(--muted, rgba(255, 255, 255, 0.5));
}
.ucm-divider {
    height: 1px;
    background: var(--lg-stroke, rgba(255, 255, 255, 0.08));
    margin: 3px 0;
}
.ucm-volume-box {
    padding: 6px 8px 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: rgba(0, 0, 0, 0.22);
    border-radius: var(--sh-r-sm, 8px);
    border: 1px solid rgba(255, 255, 255, 0.04);
}
.ucm-vol-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--muted, rgba(255, 255, 255, 0.7));
}
.ucm-vol-val {
    color: var(--accent, #6366f1);
    font-weight: 700;
}
.ucm-actions {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ucm-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border-radius: var(--sh-r-sm, 8px);
    border: none;
    background: transparent;
    color: var(--text, #e2e8f0);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: all 0.12s ease;
    box-sizing: border-box;
}
.ucm-item:hover {
    background: var(--sh-glass-bg-3, rgba(255, 255, 255, 0.09));
    color: #ffffff;
    transform: translateX(2px);
}
.ucm-item.danger {
    color: #ef4444;
}
.ucm-item.danger:hover {
    background: rgba(239, 68, 68, 0.18);
    color: #ff6b6b;
}
.ucm-item svg {
    flex-shrink: 0;
    opacity: 0.85;
}
.ucm-item:hover svg {
    opacity: 1;
}

/* =========================================================
   ROOM — chat
   ========================================================= */
.col-title { font-size: 15px !important; letter-spacing: -0.014em !important; }
.chat-bubble {
    border-radius: 20px !important;
    box-shadow: inset 0 1px 0 var(--lg-lo) !important;
}
.chat-row { animation: sh-chat-in var(--sh-dur-med) var(--sh-ease-out) backwards; }
@keyframes sh-chat-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}
.cob-icon {
    width: 54px;
    height: 54px;
    border-radius: var(--sh-r-pill);
    display: grid;
    place-items: center;
    background: var(--sh-glass-bg-2);
    border: 1px solid var(--lg-stroke);
    color: var(--accent);
    margin: 0 auto 12px;
}
.cob-icon svg { display: block; }
.cob-icons { display: inline-flex; gap: 7px; margin-right: 8px; vertical-align: -2px; color: var(--muted); }

/* composer */
.chat-input-row {
    gap: 10px;
}
#sendChatBtn {
    height: 44px;
    min-width: 44px;
    border-radius: var(--sh-r-pill) !important;
}

/* =========================================================
   DOCK — Control Center style floating glass bar
   (web layout; the Android app shell keeps its own bar)
   ========================================================= */
html:not(.app-mobile) body:not(.compact) .dock {
    padding: 10px 16px !important;
    gap: 6px;
    border-radius: var(--sh-r-2xl) !important;
    bottom: max(20px, calc(env(safe-area-inset-bottom, 0px) + 12px)) !important;
    box-shadow:
        inset 0 1px 0 var(--lg-hi),
        0 24px 60px -24px rgba(0, 0, 0, 0.7),
        0 4px 16px -6px rgba(0, 0, 0, 0.4) !important;
}
html:not(.app-mobile) body:not(.compact) .dock-btn {
    width: 44px !important;
    height: 44px !important;
    border-radius: var(--sh-r-pill) !important;
    transition:
        transform var(--sh-dur-slow) var(--sh-spring),
        background var(--sh-dur-fast) ease,
        border-color var(--sh-dur-fast) ease,
        box-shadow var(--sh-dur-med) var(--sh-ease-out) !important;
}
html:not(.app-mobile) body:not(.compact) .dock-btn:hover:not(:disabled) {
    background: var(--sh-glass-bg-3);
    border-color: var(--lg-stroke-2);
    transform: translateY(-2px);
}
html:not(.app-mobile) body:not(.compact) .dock-btn:active:not(:disabled) { transform: scale(0.86); }
html:not(.app-mobile) body:not(.compact) .dock-btn.active,
html:not(.app-mobile) body:not(.compact) .dock-btn.on {
    background: linear-gradient(150deg,
        color-mix(in oklab, var(--accent) 85%, white 8%),
        color-mix(in oklab, var(--accent) 65%, transparent)) !important;
    border-color: color-mix(in oklab, var(--accent) 60%, white 18%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        0 0 10px -3px color-mix(in oklab, var(--accent) 40%, transparent) !important;
    animation: none !important;
}
html:not(.app-mobile) body:not(.compact) .dock-leave {
    background: color-mix(in oklab, var(--danger, #e5484d) 22%, transparent) !important;
    border: 1px solid color-mix(in oklab, var(--danger, #e5484d) 45%, transparent) !important;
    color: var(--danger, #ff6b6b);
}
html:not(.app-mobile) body:not(.compact) .dock-leave:hover:not(:disabled) {
    background: color-mix(in oklab, var(--danger, #e5484d) 40%, transparent) !important;
}

.dock-more {
    border-radius: var(--sh-r-lg) !important;
    box-shadow: inset 0 1px 0 var(--lg-hi), var(--sh-shadow-float) !important;
}
.dock-self, .dock-ping { border-radius: var(--sh-r-pill); }
.vu-bar {
    height: 5px;
    border-radius: var(--sh-r-pill);
    background: var(--sh-glass-bg-2);
    overflow: hidden;
}
.vu-fill {
    background: linear-gradient(90deg, var(--good, #45b26b), color-mix(in oklab, var(--good, #45b26b) 60%, white 20%)) !important;
    border-radius: var(--sh-r-pill);
}

/* =========================================================
   MOBILE SHEETS — chat / users rise like iOS bottom sheets
   ========================================================= */
@media (max-width: 860px) {
    .room-view.mtab-chat .col-chat,
    .room-view.mtab-users .col-users {
        border-radius: var(--sh-r-xl) var(--sh-r-xl) 0 0 !important;
        animation: sh-sheet-up var(--sh-dur-slow) var(--sh-ease-out);
        transform-origin: bottom center;
    }
    @keyframes sh-sheet-up {
        from { opacity: 0; transform: translateY(28px) scale(0.985); }
        to   { opacity: 1; transform: none; }
    }
    html.app-mobile .room-view.mtab-chat .col-chat,
    html.app-mobile .room-view.mtab-users .col-users { animation: none; }
}

/* =========================================================
   MODALS — refined glass sheets
   ========================================================= */
.modal {
    background: rgba(5, 6, 8, 0.62) !important;
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
}
.modal-card,
.modal-content,
.settings-card,
.acc-modal {
    border-radius: var(--sh-r-xl) !important;
    box-shadow:
        inset 0 1px 0 var(--lg-hi),
        inset 0 -18px 36px -24px rgba(0, 0, 0, 0.6),
        var(--sh-shadow-lift) !important;
}
.modal-card h2 {
    font-size: 22px !important;
    letter-spacing: -0.022em;
    font-weight: 700;
}
.modal-card p { font-size: 13.5px !important; line-height: 1.55; }

/* password modal inline controls */
#passwordModal .modal-card {
    padding: 26px;
    max-width: 380px;
}

.lightbox {
    background: rgba(2, 3, 4, 0.8) !important;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

/* =========================================================
   TOASTS — dynamic island bubbles
   ========================================================= */
.toast {
    border-radius: var(--sh-r-pill) !important;
    box-shadow:
        inset 0 1px 0 var(--lg-hi),
        0 16px 40px -16px rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(24px) saturate(var(--lg-sat));
    -webkit-backdrop-filter: blur(24px) saturate(var(--lg-sat));
    font-size: 13px !important;
    font-weight: 500;
}

/* =========================================================
   MICRO-POLISH — small springs everywhere
   ========================================================= */
.btn, .icon-btn, .dock-btn, .room-tab, .link-btn, .tiny-btn,
.acc-btn, .emoji-trigger, .attach-trigger, .room-item, .user-card {
    -webkit-tap-highlight-color: transparent;
}
kbd {
    border-radius: var(--sh-r-sm) !important;
    box-shadow: inset 0 1px 0 var(--lg-hi), 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}
::selection { background: color-mix(in oklab, var(--accent) 42%, transparent); }

/* scrollbars stay slim but get a hair of presence */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    background-clip: content-box;
    background-color: var(--lg-stroke-2);
}

/* =========================================================
   ACCESSIBILITY — focus, reduced motion, reduced glass
   ========================================================= */
:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--accent) 75%, white 15%);
    outline-offset: 2px;
    border-radius: var(--sh-r-sm);
}
.stage-tile:focus-visible,
.user-card:focus-visible,
.room-item:focus-visible {
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 70%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    .stage-tile, .chat-row, .room-skeleton .rs-line { animation: none !important; }
    .stage-tile, .stage-tile:hover { transform: none !important; }
    .wc-cta-row .btn, .wc-join-now-btn, .dock-btn, .user-card, .icon-btn { transition: none !important; }
    .wc-join-btn, .wc-join-now-btn { transform: none !important; }
    .room-view.mtab-chat .col-chat,
    .room-view.mtab-users .col-users { animation: none !important; }
    .stage-tile.speaking .stage-avatar::after { animation: none !important; }
}

@media (prefers-reduced-transparency: reduce) {
    .wc-col-right, .wc-cta-row .btn, .wc-join-now-btn {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    .wc-col-right { background: var(--surface-2, var(--surface)) !important; }
}

/* mobile touch targets — must stay >=44px, keep after base chip rule */
@media (max-width: 640px) {
    .cv-nick-edit, .cv-nick-acc-btn { height: 44px !important; }
}