/* ========================================================================
   room-polish.css v1.0.0 — Room UI polish layer
   Loads AFTER shadehub-2026.css (the authoritative style layer), so every
   override here deliberately wins. Scoped off the native app shell
   (html.app-mobile), which has its own chrome (mobile-app.css).
   ======================================================================== */

/* ---- 1. Glass shell: unify side columns with the 2026 glass identity ---- */
html:not(.app-mobile) .col-users,
html:not(.app-mobile) .col-chat {
    background:
        linear-gradient(180deg,
            color-mix(in oklab, var(--lg-fill-2, rgba(255,255,255,.09)) 55%, transparent),
            var(--lg-fill, rgba(255,255,255,.05)) 75%) !important;
    border: 1px solid var(--lg-stroke, rgba(255,255,255,.09)) !important;
    border-radius: var(--sh-r-xl, 24px) !important;
    box-shadow: var(--sh-shadow-float, 0 18px 44px -18px rgba(0,0,0,.55)) !important;
    backdrop-filter: blur(var(--lg-blur, 14px)) saturate(var(--lg-sat, 150%)) !important;
    -webkit-backdrop-filter: blur(var(--lg-blur, 14px)) saturate(var(--lg-sat, 150%)) !important;
}

/* The central stage is the content canvas: keep it quieter, no blur. */
html:not(.app-mobile) .col-stage {
    background:
        linear-gradient(180deg,
            color-mix(in oklab, var(--lg-fill, rgba(255,255,255,.05)) 45%, transparent),
            transparent 80%) !important;
    border: 1px solid var(--lg-stroke, rgba(255,255,255,.09)) !important;
    border-radius: var(--sh-r-xl, 24px) !important;
    box-shadow: var(--sh-shadow-float, 0 18px 44px -18px rgba(0,0,0,.55)) !important;
}

html:not(.app-mobile) .col-head {
    background: transparent !important;
    border-bottom: 1px solid color-mix(in oklab, var(--lg-stroke, rgba(255,255,255,.09)) 70%, transparent) !important;
    padding: 14px 18px !important;
}

/* ---- 2. Hero stats: friendly "room is ready" state instead of raw "0" ---- */
.rh-stats .rh-ready { display: none; }
.rh-stats.hero-empty .rh-ready {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--good, #45b26b);
    font-weight: 600;
}
.rh-stats.hero-empty .rh-stat:not(.rh-ready),
.rh-stats.hero-empty .rh-dot { display: none; }
.rh-ready svg { opacity: .9; }

@media (max-width: 640px) {
    .rh-stats .rh-ready { font-size: 12px; }
}

/* ---- 3. Empty stage: prominent invite CTA ---- */
.stage-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    padding: 72px 24px !important;
    border: 1.5px dashed color-mix(in oklab, var(--lg-stroke-2, rgba(255,255,255,.18)) 85%, var(--accent) 15%) !important;
    background:
        radial-gradient(60% 80% at 50% 0%, color-mix(in oklab, var(--accent) 7%, transparent), transparent 70%),
        rgba(255, 255, 255, 0.02) !important;
}
.stage-empty .se-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(160deg, var(--sh-glass-bg-3, rgba(255,255,255,.14)), var(--sh-glass-bg, rgba(255,255,255,.05))) !important;
    color: var(--accent) !important;
    box-shadow: inset 0 1px 0 var(--lg-hi, rgba(255,255,255,.14)), 0 8px 20px -10px color-mix(in oklab, var(--accent) 45%, transparent);
}
.stage-empty .se-btn { margin-top: 8px; }

.se-btn, .si-btn {
    height: 40px;
    padding: 0 22px;
    border-radius: var(--sh-r-pill, 999px) !important;
    font-size: 13.5px;
    font-weight: 600;
    color: #fff !important;
    background: linear-gradient(150deg, var(--accent), color-mix(in oklab, var(--accent) 82%, #000 10%)) !important;
    border: 1px solid color-mix(in oklab, var(--accent) 55%, white 18%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 10px 24px -12px color-mix(in oklab, var(--accent) 55%, transparent);
    cursor: pointer;
    transition:
        transform var(--sh-dur-fast, 150ms) var(--sh-ease-out, cubic-bezier(.32,.72,.22,1)),
        filter var(--sh-dur-fast, 150ms) ease,
        box-shadow var(--sh-dur-fast, 150ms) ease;
}
.se-btn:hover, .si-btn:hover { transform: translateY(-1px); filter: brightness(1.07); }
.se-btn:active, .si-btn:active { transform: scale(.97); }
.se-btn:focus-visible, .si-btn:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--accent) 60%, transparent);
    outline-offset: 2px;
}

.stage-invite {
    border: 1.5px dashed color-mix(in oklab, var(--lg-stroke-2, rgba(255,255,255,.18)) 80%, var(--accent) 20%) !important;
    border-radius: var(--sh-r-xl, 24px) !important;
    background:
        linear-gradient(160deg, color-mix(in oklab, var(--accent) 7%, transparent), rgba(255, 255, 255, 0.02) 60%) !important;
    padding: 28px 22px !important;
}
.si-title { font-size: 16px !important; font-weight: 600 !important; color: var(--text) !important; }
.si-hint { font-size: 13px !important; color: var(--muted) !important; }
.si-btn { margin-top: 12px; height: 40px !important; }

@media (max-width: 640px) {
    .stage-empty { padding: 48px 16px !important; }
}

/* ---- 4. Dock: accent-tinted Share/Invite button ---- */
html:not(.app-mobile) .dock-btn.is-invite {
    background: color-mix(in oklab, var(--accent) 16%, transparent) !important;
    border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent) !important;
    color: color-mix(in oklab, var(--accent) 85%, white 10%) !important;
}
html:not(.app-mobile) .dock-btn.is-invite:hover:not(:disabled) {
    background: color-mix(in oklab, var(--accent) 26%, transparent) !important;
    transform: translateY(-2px);
}
html:not(.app-mobile) .dock-btn.is-invite:disabled {
    color: var(--muted) !important;
    background: color-mix(in oklab, var(--muted) 12%, transparent) !important;
    border-color: color-mix(in oklab, var(--lg-stroke) 60%, transparent) !important;
}

/* ---- 5. Invite popover ---- */
.invite-pop {
    position: fixed;
    left: 50%;
    bottom: calc(var(--dock-h, 72px) + var(--sh-space-5, 24px));
    transform: translateX(-50%);
    width: min(400px, calc(100vw - 24px));
    z-index: 70;
    padding: var(--sh-space-4, 16px);
    border-radius: var(--sh-r-2xl, 32px) !important;
    background: var(--sh-glass-bg-2, rgba(255,255,255,.09)) !important;
    border: 1px solid var(--lg-stroke-2, rgba(255,255,255,.18)) !important;
    box-shadow: inset 0 1px 0 var(--lg-hi, rgba(255,255,255,.14)), var(--sh-shadow-lift, 0 28px 64px -24px rgba(0,0,0,.65)) !important;
    backdrop-filter: blur(var(--lg-blur, 18px)) saturate(var(--lg-sat, 160%));
    -webkit-backdrop-filter: blur(var(--lg-blur, 18px)) saturate(var(--lg-sat, 160%));
    animation: sh-pop-up var(--sh-dur-med, 280ms) var(--sh-spring, cubic-bezier(.34,1.56,.64,1));
}
.invite-pop[hidden] { display: none; }
@keyframes sh-pop-up {
    from { opacity: 0; transform: translateX(-50%) translateY(12px) scale(.96); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

.ip-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sh-space-3, 12px);
}
.ip-title { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
.ip-close {
    width: 30px;
    height: 30px;
    border-radius: var(--sh-r-pill, 999px);
    border: 1px solid var(--lg-stroke, rgba(255,255,255,.09));
    background: var(--sh-glass-bg, rgba(255,255,255,.05));
    color: var(--muted);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background var(--sh-dur-fast, 150ms) ease, color var(--sh-dur-fast, 150ms) ease, transform var(--sh-dur-fast, 150ms) ease;
}
.ip-close:hover { background: var(--sh-glass-bg-3, rgba(255,255,255,.14)); color: var(--text); }
.ip-close:active { transform: scale(.92); }
.ip-close:focus-visible { outline: 2px solid color-mix(in oklab, var(--accent) 55%, transparent); outline-offset: 2px; }

.ip-link-row { display: flex; gap: var(--sh-space-2, 8px); }
.ip-link-row input {
    flex: 1;
    min-width: 0;
    height: 42px;
    padding: 0 14px;
    border-radius: var(--sh-r-md, 16px);
    border: 1px solid var(--lg-stroke, rgba(255,255,255,.09));
    background: var(--sh-glass-bg, rgba(255,255,255,.05));
    color: var(--text);
    font-size: 13px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.ip-link-row input:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--accent) 55%, transparent);
    outline-offset: 1px;
    border-color: transparent;
}
#ipCopyBtn {
    height: 42px;
    padding: 0 18px;
    border-radius: var(--sh-r-pill, 999px) !important;
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
}
.ip-hint {
    margin-top: var(--sh-space-3, 12px);
    font-size: 12px;
    color: var(--muted);
    line-height: 1.5;
}

/* ---- 6. Connection banner (connecting / lost / reconnect) ---- */
.conn-banner {
    position: fixed;
    top: calc(var(--hdr-h, 50px) + 10px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 80;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px 9px 12px;
    border-radius: var(--sh-r-pill, 999px);
    background: color-mix(in oklab, var(--surface, #14161c) 74%, transparent);
    border: 1px solid var(--lg-stroke-2, rgba(255,255,255,.18));
    box-shadow: inset 0 1px 0 var(--lg-hi, rgba(255,255,255,.14)), var(--sh-shadow-float, 0 18px 44px -18px rgba(0,0,0,.55));
    backdrop-filter: blur(var(--lg-blur, 16px)) saturate(var(--lg-sat, 150%));
    -webkit-backdrop-filter: blur(var(--lg-blur, 16px)) saturate(var(--lg-sat, 150%));
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text);
    animation: sh-pop-down var(--sh-dur-med, 280ms) var(--sh-ease-out, cubic-bezier(.32,.72,.22,1));
}
.conn-banner[hidden] { display: none; }
@keyframes sh-pop-down {
    from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.conn-spinner {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid color-mix(in oklab, var(--accent) 25%, transparent);
    border-top-color: var(--accent);
    animation: conn-spin .8s linear infinite;
}
@keyframes conn-spin { to { transform: rotate(360deg); } }
.conn-banner.is-lost .conn-spinner {
    border-color: color-mix(in oklab, var(--danger, #e5484d) 25%, transparent);
    border-top-color: var(--danger, #e5484d);
}
.conn-retry {
    height: 28px;
    padding: 0 12px;
    border-radius: var(--sh-r-pill, 999px);
    border: 1px solid color-mix(in oklab, var(--accent) 45%, transparent);
    background: color-mix(in oklab, var(--accent) 16%, transparent);
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--sh-dur-fast, 150ms) ease, transform var(--sh-dur-fast, 150ms) ease;
}
.conn-retry:hover { background: color-mix(in oklab, var(--accent) 26%, transparent); }
.conn-retry:active { transform: scale(.94); }
.conn-retry:focus-visible { outline: 2px solid color-mix(in oklab, var(--accent) 55%, transparent); outline-offset: 2px; }

@media (max-width: 640px) {
    .conn-banner { top: calc(var(--hdr-h, 50px) + 6px); max-width: calc(100vw - 16px); }
    .invite-pop {
        left: 12px;
        right: 12px;
        width: auto;
        bottom: calc(var(--dock-h, 72px) + var(--sh-space-3, 12px));
        transform: none;
        animation: sh-pop-up-m var(--sh-dur-med, 280ms) var(--sh-ease-out, cubic-bezier(.32,.72,.22,1));
    }
    @keyframes sh-pop-up-m {
        from { opacity: 0; transform: translateY(16px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    /* Dock: keep the pill scrollable on narrow screens, drop the name/ping
       meta so the essential controls stay one-tap reachable. */
    .dock {
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .dock::-webkit-scrollbar { display: none; }
    .dock-meta, .dock-ping { display: none; }
}

/* ---- 7. Tool panels: smooth appearance, no layout jump ---- */
.wb-panel:not(.hidden),
.yt-panel:not(.hidden),
.sb-panel:not(.hidden) {
    animation: sh-panel-in var(--sh-dur-med, 280ms) var(--sh-ease-out, cubic-bezier(.32,.72,.22,1));
}
@keyframes sh-panel-in {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- 8. Speaking indicator: subtle, no excessive glow ---- */
.stage-tile.speaking .stage-avatar::after {
    border-width: 2px !important;
    box-shadow:
        0 0 0 2px color-mix(in oklab, var(--accent) 26%, transparent),
        0 0 14px 1px color-mix(in oklab, var(--accent) 28%, transparent) !important;
}
@keyframes sh-halo {
    0%, 100% { transform: scale(1.02); opacity: 0.8; }
    50%      { transform: scale(1.09); opacity: 0.35; }
}

/* ---- 9. Ping chip: hidden until first real measurement ---- */
.dock-ping:has(.ping-value:empty) { display: none !important; }

/* ---- 10. Reduced motion / transparency / coarse pointers ---- */
@media (prefers-reduced-motion: reduce) {
    .conn-spinner,
    .stage-tile.speaking .stage-avatar::after { animation: none !important; }
    .invite-pop, .conn-banner,
    .wb-panel:not(.hidden), .yt-panel:not(.hidden), .sb-panel:not(.hidden) { animation: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
    .col-users, .col-chat, .invite-pop, .conn-banner {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    .col-users, .col-chat { background: var(--surface, #14161c) !important; }
}
@media (max-width: 820px) and (pointer: coarse) {
    .col-users, .col-chat, .invite-pop, .conn-banner {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}