/* REVO / ECLIPSE — cinematic artwork, quiet surfaces, clear voice state.
   Sections: tokens · base · motion · shell · topbar · voice area · chat ·
   console · stage · sheets and settings · menus · rooms page · themes ·
   responsive. Voice level arrives from room.js as --level (0…1) on cards,
   camera tiles and the console avatar. */

/* ---------- Tokens ---------- */
:root {
    color-scheme: dark;
    --bg: #07080b;
    --surface: #0f1217;
    --surface-2: #141920;
    --surface-3: #1b212b;
    --line: rgba(255, 255, 255, .07);
    --line-2: rgba(255, 255, 255, .11);
    --line-3: rgba(255, 255, 255, .19);
    --text: #eef2f8;
    --text-2: #b7c1cf;
    --muted: #919daf;
    --faint: #707c8e;
    --silver: #dce6f3;
    --accent: #c4d6ee;
    --voice: #8fe6b9;
    --green: var(--voice);
    --danger: #f2909c;
    --warn: #e6c486;
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    /* Eclipse light: the silver-white of the accretion ring. Voice activity
       uses it; --voice stays for connection and success signals. */
    --ice: #e6efff;
    --ice-rgb: 222 234 252;
    --glass: linear-gradient(180deg, rgba(20, 24, 32, .8), rgba(10, 13, 18, .88));
    --glass-line: rgba(255, 255, 255, .08);
    --specular: linear-gradient(90deg, transparent, rgba(236, 243, 252, .34), transparent);
    --shadow-deep: 0 30px 70px -30px rgba(0, 0, 0, .8);
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --ease-spring: cubic-bezier(.34, 1.45, .64, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --sans: 'Sora', system-ui, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, monospace;
    --chat-size: 14px;
}

/* Six calm tints; room.js picks one per name so a person keeps their colour. */
[data-hue="0"] { --avatar-a: #4c607d; --avatar-b: #273242; --hue: 150 176 208; }
[data-hue="1"] { --avatar-a: #5e5079; --avatar-b: #2f2944; --hue: 172 156 212; }
[data-hue="2"] { --avatar-a: #3f6658; --avatar-b: #213a34; --hue: 142 204 177; }
[data-hue="3"] { --avatar-a: #75505f; --avatar-b: #3c2a33; --hue: 216 160 177; }
[data-hue="4"] { --avatar-a: #6f6247; --avatar-b: #393226; --hue: 212 191 150; }
[data-hue="5"] { --avatar-a: #3f646a; --avatar-b: #22393d; --hue: 142 196 202; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }
button:disabled { opacity: .5; cursor: wait; }
svg { display: block; }
button svg { pointer-events: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: rgba(126, 157, 198, .38); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .13); border: 2px solid transparent; border-radius: 8px; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, .24); }
kbd { font: 500 10px/1 var(--mono); padding: 4px 6px; border-radius: 5px; border: 1px solid var(--line-2); border-bottom-width: 2px; background: rgba(255, 255, 255, .035); color: var(--text-2); }
.eyebrow { font: 500 9.5px/1.6 var(--mono); letter-spacing: 2.2px; text-transform: uppercase; color: var(--muted); }

/* ---------- Motion ---------- */
@keyframes rise-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes panel-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes message-in { from { opacity: 0; transform: translateY(8px) scale(.985); } }
@keyframes menu-in { from { opacity: 0; transform: scale(.94) translateY(-4px); } }
@keyframes breathe { 50% { opacity: .35; } }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(143, 230, 185, .55); } 70%, 100% { box-shadow: 0 0 0 8px rgba(143, 230, 185, 0); } }
@keyframes warn-pulse { 0% { box-shadow: 0 0 0 0 rgba(230, 196, 134, .6); } 70%, 100% { box-shadow: 0 0 0 7px rgba(230, 196, 134, 0); } }
@keyframes bar-dance { 0%, 100% { transform: scaleY(.62); } 50% { transform: scaleY(1); } }
@keyframes typing-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-3px); opacity: 1; } }
@keyframes float { 50% { transform: translateY(-5px) rotate(-7deg); } }
@keyframes nudge-down { 50% { transform: translateY(2px); } }
@keyframes ripple { from { transform: scale(.9); opacity: .55; } to { transform: scale(1.55); opacity: 0; } }
@keyframes copied { 40% { transform: scale(.96); } }
@keyframes corona-spin { to { transform: rotate(1turn); } }
@keyframes corona-in { from { opacity: 0; } }

/* ---------- Shell ---------- */
body.room-app { height: 100dvh; overflow: hidden; padding-top: var(--tb-height, 0px); }
.ambient-background {
    position: fixed; inset: 0; pointer-events: none;
    background:
        radial-gradient(55% 45% at 84% -8%, rgba(150, 174, 206, .12), transparent 70%),
        radial-gradient(45% 40% at 6% 108%, rgba(96, 118, 146, .08), transparent 70%),
        radial-gradient(130% 110% at 50% 45%, transparent 55%, rgba(0, 0, 0, .6));
}
/* A breath of film grain keeps the large dark planes from looking flat. */
body.room-app::after {
    content: ''; position: fixed; inset: 0; z-index: 120; pointer-events: none; opacity: .03;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.6 -.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
.app { height: 100%; max-width: 2000px; margin: auto; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 68px minmax(0, 1fr) auto; }
.mobile-room-tabs { display: none; }

/* ---------- Topbar ---------- */
.topbar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 28px; animation: fade-in .5s var(--ease-out) both; }
.topbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .09) 18%, rgba(255, 255, 255, .09) 82%, transparent); }
.topbar__brand, .topbar__meta { display: flex; align-items: center; gap: 18px; min-width: 0; }
.wordmark { display: flex; align-items: center; gap: 9px; font-size: 23px; font-weight: 500; letter-spacing: -1.2px; white-space: nowrap; }
.brand-symbol { width: 26px; height: 26px; color: var(--silver); transition: transform .5s var(--ease-spring); }
.wordmark:hover .brand-symbol { transform: scaleY(1.12); }
.wordmark__dot { margin-left: -8px; color: #9fb3cc; }
.topbar__rule { height: 28px; width: 1px; background: linear-gradient(180deg, transparent, var(--line-3), transparent); }
.channel { min-width: 0; }
.channel .eyebrow { display: block; font-size: 8.5px; letter-spacing: 2.6px; }
.channel__name { font-size: 15px; font-weight: 500; letter-spacing: -.3px; margin: 3px 0 0; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-code-badge {
    display: flex; align-items: center; gap: 12px; height: 34px; padding: 0 4px 0 14px;
    border: 1px solid var(--line-2); border-radius: 999px; background: rgba(255, 255, 255, .025);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
    font-size: 12px; color: var(--text-2);
    transition: background .2s, border-color .2s, transform .2s var(--ease-out);
}
.room-code-badge:hover { background: rgba(255, 255, 255, .05); border-color: var(--line-3); transform: translateY(-1px); }
.room-code-badge .code { font: 500 11px var(--mono); letter-spacing: 1.6px; color: var(--muted); }
.copy-icon { padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .07); color: var(--text); font-size: 11.5px; font-weight: 500; transition: background .25s, color .25s; }
.room-code-badge:hover .copy-icon { background: #e9eff7; color: #111822; }
.room-code-badge.is-copied { border-color: rgba(143, 230, 185, .45); animation: copied .4s var(--ease-out); }
.room-code-badge.is-copied .copy-icon { background: rgba(143, 230, 185, .14); color: var(--voice); }
.status { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 10px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .025); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03); font-size: 12px; font-weight: 500; color: var(--text-2); white-space: nowrap; }
.status-dot-wrap { display: grid; place-items: center; width: 10px; height: 10px; }
.status-dot { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); animation: warn-pulse 1.6s ease-out infinite; }
.status-dot.connected { background: var(--voice); animation: live-pulse 2.8s ease-out infinite; }
.status[data-state=connected] { border-color: rgba(143, 230, 185, .18); }
.status[data-state=reconnecting] { color: var(--warn); border-color: rgba(230, 196, 134, .25); }
.count, .connection-latency { font: 500 11px var(--mono); color: var(--muted); white-space: nowrap; }
.connection-latency { padding-left: 16px; border-left: 1px solid var(--line-2); }

/* ---------- Room grid ---------- */
.room { display: grid; grid-template-columns: minmax(0, 1fr) 360px; min-height: 0; gap: 18px; padding: 18px 24px 0; overflow: hidden; }
.room-side { display: contents; }
.panel {
    position: relative; min-width: 0; min-height: 0; overflow: hidden;
    background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--radius-2xl);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), var(--shadow-deep);
    animation: rise-in .6s var(--ease-out) both;
}
/* Every glass surface catches a thin line of light along its top edge. */
.panel::after { content: ''; position: absolute; top: 0; left: 14%; right: 14%; height: 1px; z-index: 3; background: var(--specular); opacity: .6; pointer-events: none; }

/* ---------- Voice area ---------- */
/* The artwork fills the whole voice area and fades into the glass below it;
   everything else floats above it on its own layer. */
.participants-panel { grid-area: 1 / 1; display: flex; flex-direction: column; padding: 0 26px 16px; }
.participants-panel > :not(.room-hero) { position: relative; z-index: 1; }
.lounge-nav { height: 50px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; font: 500 8.5px var(--mono); letter-spacing: 2.8px; color: rgba(183, 196, 213, .6); }
.lounge-nav::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .05) 55%, transparent); }
.sidebar-back { display: inline-flex; align-items: center; gap: 7px; margin-left: -10px; padding: 7px 12px 7px 10px; border-radius: 999px; font: 500 12px var(--sans); letter-spacing: 0; color: var(--text-2); transition: color .2s, background .2s; }
.sidebar-back span { transition: transform .3s var(--ease-out); }
.sidebar-back:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.sidebar-back:hover span { transform: translateX(-3px); }
.lounge-nav__live { width: 7px; height: 7px; border-radius: 50%; background: var(--voice); animation: live-pulse 2.8s ease-out infinite; }

.room-hero { flex: 0 0 auto; }
.room-hero__atmosphere {
    position: absolute; top: 0; left: 0; right: 0; height: 88%; z-index: 0; pointer-events: none;
    background:
        linear-gradient(90deg, rgba(7, 9, 12, .94) 0%, rgba(7, 9, 12, .55) 30%, rgba(7, 9, 12, 0) 60%),
        radial-gradient(80% 70% at 68% 38%, transparent 45%, rgba(7, 9, 12, .45)),
        url('/img/atmosphere/revo-eclipse.png') 72% 28% / cover;
    -webkit-mask-image: linear-gradient(180deg, #000 36%, rgba(0, 0, 0, .42) 66%, transparent 94%);
    mask-image: linear-gradient(180deg, #000 36%, rgba(0, 0, 0, .42) 66%, transparent 94%);
    --ambient-scene-opacity: .7;
}
.room-hero__content { position: relative; z-index: 1; max-width: 520px; padding: 36px 0 30px; }
.room-hero .eyebrow { display: flex; align-items: center; gap: 12px; font-size: 8.5px; letter-spacing: 2.8px; color: #aebbcc; animation: rise-in .7s .15s var(--ease-out) both; }
.room-hero .eyebrow::before { content: ''; width: 28px; height: 1px; background: linear-gradient(90deg, rgba(226, 236, 250, .8), rgba(226, 236, 250, .1)); }
.room-hero h2 {
    font-size: 48px; font-weight: 300; letter-spacing: -2.4px; line-height: 1.06; margin: 16px 0 12px;
    background: linear-gradient(180deg, #ffffff 30%, #a9b9cd 115%); -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: rise-in .8s .22s var(--ease-out) both;
}
.room-hero p { font-size: 13px; line-height: 1.7; letter-spacing: .1px; color: #a2afc0; margin: 0; font-weight: 300; animation: rise-in .8s .3s var(--ease-out) both; }
.room-hero__coordinate { position: absolute; top: 74px; right: 24px; z-index: 1; writing-mode: vertical-rl; font: 500 7.5px var(--mono); letter-spacing: 3.2px; color: rgba(190, 204, 222, .42); }

.salon__head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-shrink: 0; }
.salon__head::after { content: ''; order: 1; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .02)); }
.panel-title { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 13.5px; font-weight: 500; letter-spacing: -.1px; }
/* A tiny eclipse: a dark disc inside a thin ring of light. */
.section-mark, .chat-live-dot { width: 9px; height: 9px; flex-shrink: 0; border-radius: 50%; background: #05070a; box-shadow: 0 0 0 1px rgba(228, 238, 252, .8), 0 0 9px rgba(200, 220, 246, .5); }
.salon__tagline { order: 2; margin: 0; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(8, 10, 14, .55); font: 500 10.5px var(--mono); color: var(--text-2); white-space: nowrap; }

.participant-list {
    position: relative; flex: 1 1 auto; min-height: 0; list-style: none; margin: 0; padding: 8px 6px 14px;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); grid-auto-rows: 180px; gap: 16px;
    align-content: start; overflow: auto;
}
/* room.js measures the free space and sets these for the current head count. */
.participant-list.is-fitted { grid-template-columns: repeat(var(--cols), var(--tile-w)); grid-auto-rows: var(--tile-h); justify-content: center; align-content: center; }
.participant-list.is-fitted.is-overflowing { align-content: start; }

/* Cards are frosted plates over the artwork. */
.voice-card {
    --avatar-size: clamp(40px, calc(var(--tile-h, 180px) * .3), 88px);
    position: relative; isolation: isolate; min-width: 0; container-type: inline-size;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    padding: 18px 14px 24px; border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, .075);
    background:
        radial-gradient(90% 65% at 50% 0%, rgb(var(--hue, 150 176 208) / .1), transparent 72%),
        linear-gradient(180deg, rgba(24, 29, 38, .68), rgba(11, 14, 19, .8));
    -webkit-backdrop-filter: blur(18px) saturate(125%); backdrop-filter: blur(18px) saturate(125%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 22px 44px -24px rgba(0, 0, 0, .85);
    transition: border-color .4s var(--ease-out), box-shadow .4s var(--ease-out), transform .3s var(--ease-out);
}
.voice-card:not(.invite-slot)::before {
    content: ''; position: absolute; top: -1px; left: 24%; right: 24%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(236, 243, 252, .42), transparent); opacity: .7;
    transition: left .5s var(--ease-out), right .5s var(--ease-out), opacity .4s, background .4s;
}
/* A pool of light spills from the top edge while the person speaks. */
.voice-card:not(.invite-slot)::after {
    content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
    background: radial-gradient(75% 55% at 50% 0%, rgb(var(--ice-rgb) / .15), transparent 72%);
    opacity: 0; transition: opacity .4s var(--ease-out);
}
.participant:not(.you) { cursor: pointer; }
.participant:not(.you):hover { border-color: rgba(255, 255, 255, .15); transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 30px 54px -24px rgba(0, 0, 0, .95); }
.participant:not(.you):hover::before { left: 12%; right: 12%; opacity: 1; }
.voice-card.is-leaving { pointer-events: none; z-index: 0; }
.voice-card > :is(.avatar-wrap, .name, .participant-status) { flex-shrink: 0; }

.avatar {
    display: inline-flex; justify-content: center; align-items: center; object-fit: cover; flex-shrink: 0;
    border-radius: 50%; width: 54px; height: 54px;
    background: radial-gradient(120% 120% at 30% 18%, var(--avatar-a, #46566c), var(--avatar-b, #28313f) 72%);
    color: #eef3fa; font-size: 21px; font-weight: 400; border: 1px solid rgba(255, 255, 255, .1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -10px 18px rgba(0, 0, 0, .28);
}
.avatar-wrap { position: relative; display: inline-grid; place-items: center; padding: 6px; border-radius: 50%; }
.avatar-wrap::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .1); transition: border-color .3s; }
/* The halo follows the voice: brighter and wider on every syllable. */
.avatar-wrap::after {
    content: ''; position: absolute; inset: -16px; z-index: -1; border-radius: 50%;
    background: radial-gradient(closest-side, rgb(var(--ice-rgb) / .46), rgb(150 186 236 / .14) 58%, transparent 78%);
    opacity: 0; transform: scale(calc(.8 + var(--level, 0) * .5));
    transition: opacity .35s var(--ease-out);
}
.voice-card .avatar { width: var(--avatar-size); height: var(--avatar-size); font-size: calc(var(--avatar-size) * .4); }
.voice-card .name { max-width: 100%; font-size: 14px; font-weight: 500; letter-spacing: -.2px; color: #f2f6fb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.participant.you .name::after { content: 'sen'; display: inline-block; margin-left: 7px; padding: 2px 6px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .12); font: 500 8.5px/1.3 var(--mono); letter-spacing: .9px; text-transform: uppercase; color: var(--muted); vertical-align: 2px; }
.participant-status { max-width: 100%; margin-top: -6px; font-size: 11.5px; line-height: 1.4; letter-spacing: .1px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .25s, text-shadow .25s; }
.mod-chip { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 7px; border-radius: 999px; border: 1px solid rgba(226, 204, 158, .26); background: linear-gradient(180deg, rgba(226, 204, 158, .11), rgba(226, 204, 158, .04)); font: 500 8.5px/1.2 var(--mono); letter-spacing: 1.2px; text-transform: uppercase; color: #eadab5; }
.mod-chip::before { content: '✦'; font-size: 8px; color: #f3e5c4; }
/* On a narrow card the badge keeps only its star, clear of the avatar. */
@container (max-width: 170px) { .mod-chip { gap: 0; padding: 4px 6px; font-size: 0; letter-spacing: 0; } }
.state-icons { position: absolute; right: 12px; top: 12px; display: flex; gap: 5px; }
.state-icons svg { width: 24px; height: 24px; padding: 5px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .08); background: rgba(6, 8, 11, .5); color: var(--text-2); animation: menu-in .3s var(--ease-spring); }
.state-icons svg.is-off { border-color: rgba(242, 144, 156, .22); background: rgba(58, 20, 28, .5); color: #f3a6b0; }
.meter { position: absolute; right: 14px; bottom: 13px; display: flex; align-items: center; gap: 2px; height: 14px; opacity: 0; transition: opacity .3s; }
.meter .bar {
    --k: 1; width: 2px; height: 100%; border-radius: 2px; background: rgba(255, 255, 255, .2);
    scale: 1 min(1, calc(.18 + var(--level, 0) * var(--k)));
    transition: scale .08s linear, background-color .25s, box-shadow .25s;
}
.meter .bar:nth-child(1), .meter .bar:nth-child(5) { --k: .55; }
.meter .bar:nth-child(2), .meter .bar:nth-child(4) { --k: 1; }
.meter .bar:nth-child(3) { --k: 1.45; }

/* Speaking: the avatar is eclipsed by a turning corona of silver light. */
.voice-card.speaking { border-color: rgb(var(--ice-rgb) / .28); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 1px rgb(var(--ice-rgb) / .05), 0 26px 60px -24px rgb(150 186 236 / .32); }
.voice-card.speaking::before { left: 6%; right: 6%; opacity: 1; background: linear-gradient(90deg, transparent, rgb(var(--ice-rgb) / .95), transparent); }
.voice-card.speaking::after { opacity: calc(.4 + var(--level, 0) * .9); }
.voice-card.speaking .avatar-wrap::before {
    inset: -1px; border: 0; padding: 2px;
    background: conic-gradient(rgb(var(--ice-rgb)), rgb(var(--ice-rgb) / .12) 28%, rgb(150 182 228 / .45) 52%, rgb(var(--ice-rgb) / .1) 76%, rgb(var(--ice-rgb)));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
    animation: corona-in .5s var(--ease-out), corona-spin 3.6s linear infinite;
}
.voice-card.speaking .avatar-wrap::after { opacity: calc(.35 + var(--level, 0) * .9); }
.voice-card.speaking .avatar { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -10px 18px rgba(0, 0, 0, .28), 0 0 calc(10px + var(--level, 0) * 22px) rgb(var(--ice-rgb) / .28); }
.voice-card.speaking .meter { opacity: 1; }
.voice-card.speaking .bar { background: var(--ice); box-shadow: 0 0 6px rgb(var(--ice-rgb) / .55); animation: bar-dance .9s ease-in-out infinite; }
.voice-card.speaking .bar:nth-child(2) { animation-delay: -.3s; }
.voice-card.speaking .bar:nth-child(3) { animation-delay: -.55s; }
.voice-card.speaking .bar:nth-child(4) { animation-delay: -.15s; }
.voice-card.speaking .bar:nth-child(5) { animation-delay: -.7s; }
.voice-card[data-voice-state=speaking] .participant-status { color: var(--ice); text-shadow: 0 0 14px rgb(var(--ice-rgb) / .45); }
.voice-card[data-voice-state=error] .participant-status, .voice-card[data-voice-state=listener] .participant-status { color: var(--warn); }
.voice-card[data-voice-state=muted] .participant-status, .voice-card[data-voice-state=deafened] .participant-status { color: #d9a3ad; }
.voice-card[data-voice-state=muted] .avatar-wrap::before, .voice-card[data-voice-state=deafened] .avatar-wrap::before { border-color: rgba(242, 144, 156, .26); }
.voice-card[data-voice-state=muted] .avatar, .voice-card[data-voice-state=deafened] .avatar { filter: saturate(.5) brightness(.86); }
.voice-card[data-voice-state=connecting] .participant-status { animation: breathe 1.6s ease-in-out infinite; }
.voice-card.is-silenced .participant-status::after { content: ' · sende sessiz'; color: var(--danger); }

.invite-slot { border: 1px dashed rgba(214, 226, 242, .17); background: rgba(10, 13, 18, .32); box-shadow: none; padding: 0; transition: border-color .25s, background-color .25s; }
.invite-slot:hover { border-color: rgba(214, 226, 242, .42); background: rgba(214, 226, 242, .04); }
.invite-slot button { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px; padding: 18px 10px; border: 0; border-radius: inherit; background: transparent; color: var(--text-2); }
.invite-slot__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .14); background: radial-gradient(circle at 50% 25%, rgba(255, 255, 255, .07), transparent 70%); color: var(--silver); transition: transform .5s var(--ease-spring), background .25s, border-color .25s, color .25s, box-shadow .3s; }
.invite-slot__icon svg { width: 20px; height: 20px; }
.invite-slot:hover .invite-slot__icon { transform: rotate(90deg) scale(1.06); border-color: rgb(var(--ice-rgb) / .45); box-shadow: 0 0 18px rgb(var(--ice-rgb) / .16); }
.invite-slot button.is-copied .invite-slot__icon { border-color: var(--voice); color: var(--voice); }
.invite-slot__label { font-size: 12.5px; font-weight: 500; color: var(--text); }
.invite-slot__action { font-size: 11px; color: var(--muted); transition: color .2s; }
.invite-slot:hover .invite-slot__action { color: var(--text-2); }
.salon-invite { display: none !important; }

.lounge-foot { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 10px; padding-top: 13px; font-size: 11px; color: var(--faint); flex-shrink: 0; }
.lounge-foot::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)); }
.connection-quality { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.connection-quality::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #9aa8ba; transition: background .3s, box-shadow .3s; }
.connection-quality[data-route=direct]::before, .connection-quality[data-route=relay]::before { background: var(--voice); box-shadow: 0 0 8px rgba(143, 230, 185, .6); }

/* ---------- Chat ---------- */
.chat-panel { grid-area: 1 / 2; display: flex; flex-direction: column; animation-delay: .08s; }
.chat-heading { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 20px 22px 17px; flex-shrink: 0; }
.chat-heading::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)); }
.chat-heading .eyebrow { display: block; margin-bottom: 8px; font-size: 8.5px; letter-spacing: 2.6px; }
.chat-heading .panel-title { font-size: 14.5px; letter-spacing: -.2px; }
.chat-heading .panel-title > span { font-size: 18px; font-weight: 200; color: var(--faint); }
.messages { flex: 1; min-height: 0; overflow-y: auto; overflow-wrap: anywhere; padding: 10px 10px 8px; scroll-behavior: smooth; }
.chat-empty { height: 100%; min-height: 175px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 10px; animation: fade-in .6s .2s both; }
.chat-empty__icon { width: 66px; height: 66px; padding: 19px; margin-bottom: 24px; border-radius: 20px; border: 1px solid rgba(200, 216, 240, .14); background: linear-gradient(140deg, rgba(41, 52, 64, .6), #13191f); box-shadow: 0 16px 36px rgba(0, 0, 0, .3); transform: rotate(-7deg); animation: float 6s ease-in-out infinite; }
.chat-empty__icon svg { width: 100%; height: 100%; transform: rotate(7deg); color: #b3c3d8; }
.chat-empty > .eyebrow { font-size: 8.5px; }
.chat-empty h3 { font-size: 16px; font-weight: 500; letter-spacing: -.3px; margin: 12px 0 0; color: #dae1ea; }
.chat-empty p { font-size: 12px; line-height: 1.8; color: var(--muted); margin: 10px 0 0; }
.has-chat .chat-empty { display: none; }

.message { position: relative; margin-top: 8px; padding: 5px 10px 5px 52px; border-radius: 10px; font-size: var(--chat-size); line-height: 1.6; animation: message-in .34s var(--ease-out) both; transition: background-color .15s; }
.message:hover { background: rgba(255, 255, 255, .028); }
.message > .avatar { position: absolute; left: 10px; top: 7px; width: 32px; height: 32px; font-size: 13px; }
.message__meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 1px; }
.message .who { font-size: 13px; font-weight: 600; color: #e1e8f1; }
.message .when { font: 10px var(--mono); color: var(--faint); }
.message .when--hover { position: absolute; left: 6px; top: 8px; width: 40px; text-align: center; font-size: 9px; opacity: 0; transition: opacity .15s; }
.message.grouped { margin-top: 0; padding-top: 2px; }
.message.grouped:hover .when--hover { opacity: 1; }
.message__text { white-space: pre-wrap; color: #d4dce7; }
.message--self .who::after { content: 'sen'; margin-left: 7px; padding: 1px 6px; border-radius: 999px; background: rgba(196, 214, 238, .1); font: 500 9px/1.6 var(--mono); letter-spacing: .5px; color: var(--accent); vertical-align: 1px; }
.message--mention { background: rgba(146, 164, 192, .09); box-shadow: inset 2px 0 0 var(--accent); }
.message.system {
    display: flex; align-items: center; gap: 8px; width: fit-content; max-width: 94%; margin: 12px auto; padding: 6px 13px;
    border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03);
    font-size: 11.5px; line-height: 1.5; color: var(--muted); white-space: normal;
}
.message.system:hover { background: rgba(255, 255, 255, .03); }
.message.system::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); flex-shrink: 0; }
.message.system[data-kind=join]::before { background: var(--voice); box-shadow: 0 0 8px rgba(143, 230, 185, .7); }
.message.system[data-kind=error] { color: #f1b5bd; border-color: rgba(242, 144, 156, .25); background: rgba(242, 144, 156, .06); }
.message.system[data-kind=error]::before { background: var(--danger); }

.jump-latest {
    position: absolute; left: 50%; bottom: 112px; z-index: 2;
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px 8px 11px; white-space: nowrap;
    border-radius: 999px; border: 1px solid rgba(160, 185, 215, .35); background: rgba(30, 40, 54, .94);
    font-size: 12px; font-weight: 500; box-shadow: 0 10px 28px rgba(0, 0, 0, .4);
    opacity: 0; visibility: hidden; transform: translate(-50%, 10px) scale(.95);
    transition: opacity .2s, transform .35s var(--ease-spring), visibility 0s .35s;
}
.jump-latest.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.jump-latest svg { width: 14px; height: 14px; animation: nudge-down 1.4s ease-in-out infinite; }
.jump-latest:hover { background: rgba(40, 53, 70, .96); }

.typing { display: flex; align-items: center; gap: 8px; height: 24px; padding: 0 20px; font-size: 11.5px; color: var(--muted); flex-shrink: 0; overflow: hidden; }
.typing__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.typing__dots { display: none; gap: 3px; }
.typing.is-active .typing__dots { display: inline-flex; }
.typing__dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: typing-dot 1.2s ease-in-out infinite; }
.typing__dots i:nth-child(2) { animation-delay: .15s; }
.typing__dots i:nth-child(3) { animation-delay: .3s; }

.message-form { display: flex; align-items: center; gap: 8px; margin: 0 12px; padding: 6px 6px 6px 14px; border-radius: 16px; border: 1px solid var(--line-2); background: rgba(6, 8, 12, .5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03); flex-shrink: 0; transition: border-color .2s, box-shadow .25s, background .2s; }
.message-form:focus-within { border-color: rgb(var(--ice-rgb) / .34); box-shadow: 0 0 0 4px rgb(var(--ice-rgb) / .06), inset 0 1px 0 rgba(255, 255, 255, .04); background: rgba(8, 11, 16, .7); }
.composer-hash { font-size: 16px; color: var(--faint); }
.message-form input { flex: 1; min-width: 0; padding: 10px 0; border: 0; background: none; outline: none !important; font-size: 13.5px; color: var(--text); }
.message-form input::placeholder { color: #7d899a; }
.message-form button { display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border: 0; border-radius: 12px; background: linear-gradient(180deg, #eef3f9, #c6d2e1); color: #121a24; box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset; transition: transform .25s var(--ease-spring), box-shadow .25s, opacity .25s; }
.message-form button:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 8px 20px rgba(200, 216, 236, .22); }
.message-form button:active { transform: scale(.92); }
.message-form:has(input:placeholder-shown) button { opacity: .5; box-shadow: none; }
.message-form button svg { width: 16px; height: 16px; transition: transform .35s var(--ease-spring); }
.message-form button:hover svg { transform: translateX(2px) rotate(-10deg); }
.message-form button span { display: none; }
.composer-note { display: flex; justify-content: space-between; gap: 10px; margin: 9px 16px 14px; font-size: 10.5px; color: var(--faint); }
.composer-note kbd { font-size: 9.5px; padding: 2px 5px; margin-right: 3px; }

/* ---------- Console ---------- */
/* No bar: the controls sit in one small dock in the middle, identity and exit
   rest on the page to either side. room.js writes your transmitted level as
   --level on .console; the microphone glyph fills with it. */
.console {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 20px;
    margin: 14px 24px 18px;
    animation: rise-in .6s .12s var(--ease-out) both;
}
.console, .console__cluster, .ctrl-btn { min-width: 0; }
.console__identity { justify-self: start; display: flex; align-items: center; gap: 11px; min-width: 0; max-width: 100%; padding-left: 2px; }
.console__identity > .avatar { width: 34px; height: 34px; font-size: 13px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 0 calc(var(--level, 0) * 3px) rgba(255, 255, 255, .2); transition: box-shadow .1s linear; }
.console__identity-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.self-chip-name { font-size: 13px; font-weight: 500; letter-spacing: -.1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.self-chip-state { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.self-chip-state::before { content: ''; width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; background: var(--voice); }
.self-chip-state[data-state=muted]::before, .self-chip-state[data-state=deafened]::before { background: #ef7485; }
.self-chip-state[data-state=listener], .self-chip-state[data-state=preparing] { color: var(--warn); }
.self-chip-state[data-state=listener]::before, .self-chip-state[data-state=preparing]::before { background: var(--warn); animation: breathe 1.6s infinite; }
.self-chip-state[data-state=testing]::before { background: var(--accent); }

.console__cluster {
    display: flex; justify-content: center; align-items: center; gap: 2px; padding: 5px;
    border-radius: 16px; border: 1px solid rgba(255, 255, 255, .07); background: #0e1115;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 14px 34px -14px rgba(0, 0, 0, .8);
}
.console__divider { width: 1px; height: 20px; margin: 0 6px; background: rgba(255, 255, 255, .09); flex-shrink: 0; }
.ctrl-btn {
    position: relative; isolation: isolate; flex-shrink: 0; width: 44px; height: 44px;
    display: grid; place-items: center;
    border: 0; border-radius: 11px; background: transparent; color: #a7b1bf;
    transition: background-color .15s, color .15s, transform .15s var(--ease-out);
}
.ctrl-btn svg { width: 20px; height: 20px; }
.ctrl-btn:hover { background: rgba(255, 255, 255, .065); color: #fff; }
.ctrl-btn:active { transform: scale(.94); }
.ctrl-btn:focus-visible { outline-offset: 1px; }
/* Names live in aria-label and the tooltip; the dock shows glyphs only. */
.ctrl-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ctrl-slash { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .25s var(--ease-out); }
/* The capsule of the microphone fills from the bottom while your voice goes out. */
.mic-fill { clip-path: inset(max(0%, calc(100% - var(--level, 0) * 170%)) 0 0 0) fill-box; color: #fff; }
.ctrl-btn--toggle[aria-pressed=true] { background: rgba(236, 96, 116, .15); color: #ff8fa0; }
.ctrl-btn--toggle[aria-pressed=true]:hover { background: rgba(236, 96, 116, .22); color: #ffa9b6; }
.ctrl-btn--toggle[aria-pressed=true] .ctrl-slash { stroke-dashoffset: 0; }
.ctrl-btn--toggle[aria-pressed=true] .mic-fill { opacity: 0; }
/* On air: camera and screen invert, so it is plain that others can see you. */
.ctrl-btn--live[aria-pressed=true] { background: #eef2f7; color: #0d1116; }
.ctrl-btn--live[aria-pressed=true]:hover { background: #fff; color: #0d1116; }
/* A quiet mode, not a broadcast: a dot under the glyph, as in a dock. */
#noiseSuppressionButton[aria-pressed=true] { background: transparent; color: #fff; }
#noiseSuppressionButton[aria-pressed=true]:hover { background: rgba(255, 255, 255, .065); }
#noiseSuppressionButton::after { content: ''; position: absolute; left: 50%; bottom: 4px; width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; background: currentColor; opacity: 0; transform: scale(0); transition: opacity .2s, transform .3s var(--ease-spring); }
#noiseSuppressionButton[aria-pressed=true]::after { opacity: 1; transform: none; }
/* Shortcut hints for mouse users; a phone-width bar has no room for them. */
@media (hover: hover) and (pointer: fine) and (min-width: 641px) {
    .ctrl-btn[data-tip]::before {
        content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 14px); z-index: 5;
        padding: 6px 9px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .08); background: #1a1f27; color: #dfe5ee;
        font: 500 11px/1 var(--sans); white-space: nowrap; pointer-events: none;
        box-shadow: 0 8px 20px rgba(0, 0, 0, .45);
        opacity: 0; transform: translate(-50%, 3px);
        transition: opacity .12s, transform .16s var(--ease-out);
    }
    .ctrl-btn[data-tip]:hover::before, .ctrl-btn[data-tip]:focus-visible::before { opacity: 1; transform: translate(-50%, 0); transition-delay: .35s; }
}

.console__aside { justify-self: end; display: flex; align-items: center; justify-content: flex-end; gap: 16px; min-width: 0; }
.mic-mode { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mic-mode__meta { order: -1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.mode-group { position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 10px; background: rgba(255, 255, 255, .045); }
.mode-thumb { position: absolute; z-index: -1; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 7px; background: #242a34; box-shadow: 0 1px 2px rgba(0, 0, 0, .45); transition: transform .35s var(--ease-out); }
.mode-group[data-mode=ptt] .mode-thumb { transform: translateX(100%); }
.mode-pill { padding: 6px 11px; border: 0; border-radius: 7px; background: transparent; font-size: 11.5px; font-weight: 500; color: var(--muted); white-space: nowrap; transition: color .15s; }
.mode-pill:hover { color: var(--text-2); }
.mode-pill.active { color: var(--text); }
.tx-indicator { display: flex; align-items: center; gap: 7px; min-width: 0; font: 500 10.5px var(--mono); color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .15s; }
.tx-indicator::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.tx-indicator.on { color: var(--text); }
.tx-indicator[data-state=listener], .self-chip-state[data-state=listener] { color: var(--warn); }
.tx-indicator[data-state=muted], .tx-indicator[data-state=deafened] { color: #d98f9c; }
.ptt-key-button { flex-shrink: 0; padding: 3px 7px; border-radius: 6px; border: 1px solid var(--line-2); border-bottom-width: 2px; background: rgba(255, 255, 255, .035); font: 500 10px var(--mono); color: var(--text-2); }
.ptt-key-button.listening { border-color: var(--accent); color: #fff; animation: breathe 1s infinite; }
.console__aside:has(#micModeRow[data-mode=always]) .ptt-key-button { display: none; }
.leave-button {
    display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 13px; flex-shrink: 0;
    border: 0; border-radius: 12px; background: #c93f4e; color: #fff;
    font-size: 13px; font-weight: 500;
    transition: background-color .15s, transform .15s var(--ease-out);
}
.leave-button svg { width: 18px; height: 18px; transition: transform .35s var(--ease-out); }
.leave-button:hover { background: #d64b5b; }
.leave-button:hover svg { transform: rotate(-10deg); }
.leave-button:active { transform: scale(.96); background: #b73847; }

/* ---------- Stage: cameras and screen sharing ---------- */
.stage { display: none; flex-direction: column; background: linear-gradient(180deg, rgba(10, 12, 16, .92), rgba(5, 7, 10, .96)); }
.room.is-media { grid-template-rows: minmax(220px, 1fr) 150px; }
.room.is-media .stage { display: flex; grid-area: 1 / 1; }
.room.is-media .participants-panel { grid-area: 2 / 1; padding: 10px 14px; }
.room.is-media .chat-panel { grid-area: 1 / 2 / span 2; }
.room.is-media :is(.room-hero, .lounge-nav, .lounge-foot, .salon-invite) { display: none !important; }
.room.is-media .salon__head { margin-bottom: 8px; }
.room.is-media .participant-list { display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; padding: 2px 2px 4px; }
.room.is-media .voice-card { --avatar-size: 34px; flex: 0 0 128px; min-height: 0; padding: 8px 8px 16px; gap: 5px; }
.room.is-media .voice-card .name { font-size: 11px; }
.room.is-media .participant-status { font-size: 9.5px; margin-top: -3px; }
.room.is-media .mod-chip { top: 5px; left: 5px; gap: 0; padding: 3px 5px; font-size: 0; letter-spacing: 0; }
.room.is-media .state-icons { top: 5px; right: 5px; flex-direction: column; gap: 3px; }
.room.is-media .state-icons svg { width: 18px; height: 18px; padding: 3px; }
.room.is-media .avatar-wrap { padding: 3px; }
.room.is-media .meter { display: none; }
.room.is-media .invite-slot { display: none; }
.stage__bar { display: flex; align-items: center; gap: 9px; padding: 12px 16px; border-bottom: 1px solid var(--line); flex-shrink: 0; transition: opacity .3s, transform .3s var(--ease-out); }
.stage__dot { width: 7px; height: 7px; border-radius: 50%; background: #f07c8d; animation: breathe 1.8s ease-in-out infinite; }
.stage__label { font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.stage__btn { display: grid; place-items: center; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .04); font-size: 11px; font-weight: 500; transition: background .2s; }
.stage__btn:hover { background: rgba(255, 255, 255, .09); }
.stage__btn svg { width: 14px; height: 14px; }
.stage__btn--stop { color: #f4b5bd; border-color: rgba(242, 144, 156, .3); }
.stage__body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 10px; }
.stage__main { flex: 1; min-height: 0; display: flex; justify-content: center; overflow: hidden; border-radius: 16px; background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); }
.stage__main video { max-width: 100%; height: 100%; object-fit: contain; }
.stage__gallery { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.cam-tile { position: relative; min-height: 0; overflow: hidden; border-radius: 16px; border: 1px solid var(--line-2); background: radial-gradient(80% 80% at 50% 30%, #1a212b, #0b0e13); transition: border-color .25s, box-shadow .15s linear; }
.cam-tile video { display: block; width: 100%; height: 100%; object-fit: cover; }
.cam-tile video.is-self { transform: scaleX(-1); }
.cam-tile__name { position: absolute; left: 12px; bottom: 12px; padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(6, 9, 14, .6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 11px; font-weight: 500; }
.cam-tile.speaking { border-color: rgb(var(--ice-rgb) / .7); box-shadow: 0 0 0 calc(1px + var(--level, 0) * 3px) rgb(var(--ice-rgb) / .25), 0 0 32px rgb(var(--ice-rgb) / .14); }
.room.is-sharing .stage__gallery { flex: 0 0 100px; display: flex; }
.room.is-sharing .stage__gallery:empty { display: none; }
.room.is-sharing .cam-tile { width: 150px; }
.stage:fullscreen, .stage.is-faux-fullscreen { position: fixed; inset: 0; z-index: 1000; display: flex; width: 100%; height: 100%; border-radius: 0; }
.stage.is-idle { cursor: none; }
.stage.is-idle .stage__bar { opacity: 0; transform: translateY(-6px); }

/* ---------- Sheets and settings ---------- */
.overlay {
    position: fixed; inset: var(--tb-height, 0px) 0 0; z-index: 200;
    display: flex; align-items: center; justify-content: center; padding: 24px;
    background: rgba(3, 5, 9, .62); backdrop-filter: blur(10px) saturate(115%);
    opacity: 0; transition: opacity .26s var(--ease-out);
}
.overlay.is-open { opacity: 1; }
.overlay .sheet { transform: translateY(16px) scale(.97); transition: transform .24s var(--ease-out); }
.overlay.is-open .sheet { transform: none; }
.sheet {
    width: 440px; max-width: 100%; max-height: 90dvh; overflow: auto; padding: 28px;
    border-radius: var(--radius-xl); border: 1px solid rgba(196, 213, 237, .15);
    background: linear-gradient(180deg, #171c25, #12161d);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 40px 120px rgba(0, 0, 0, .6);
}
.sheet > h2 { font-size: 24px; font-weight: 500; letter-spacing: -.6px; margin: 12px 0 6px; }
.sheet--confirm { width: 420px; }
.sheet__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.chip { font: 500 9px var(--mono); letter-spacing: 2px; color: var(--muted); }
.sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.sheet__head h2 { font-size: 27px; font-weight: 500; letter-spacing: -.9px; margin: 6px 0; }
.icon-btn { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .04); color: var(--text-2); transition: background .2s, color .2s, transform .3s var(--ease-spring); }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn:hover { background: rgba(255, 255, 255, .09); color: var(--text); transform: rotate(90deg); }

/* The header and close action stay put while the settings scroll. */
.settings-sheet { display: flex; flex-direction: column; overflow: hidden; padding: 0; width: 860px; max-height: calc(100dvh - var(--tb-height, 0px) - 60px); }
.settings-header { flex-shrink: 0; padding: 26px 32px 18px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #181e27, #151a22); }
.settings-intro { margin: 8px 0 18px; font-size: 12.5px; color: var(--muted); }
.settings-tabs { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; border-radius: 12px; border: 1px solid var(--line); background: rgba(0, 0, 0, .25); }
.settings-tabs__thumb {
    position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 20px) / 4);
    border-radius: 9px; border: 1px solid rgba(180, 198, 221, .14); background: linear-gradient(180deg, #2b3646, #232c39);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .3);
    transform: translateX(calc(var(--tab-index, 0) * (100% + 4px))); transition: transform .45s var(--ease-spring);
}
.settings-tab { padding: 10px 8px; border: 0; border-radius: 9px; background: transparent; font-size: 12px; font-weight: 500; color: var(--muted); transition: color .2s; }
.settings-tab:hover { color: var(--text-2); }
.settings-tab.active { color: var(--text); }
.settings-body { overflow: auto; min-height: 0; padding: 0 32px 22px; scrollbar-gutter: stable; }
[data-settings-panel]:not([hidden]) { animation: panel-in .35s var(--ease-out); }
.sheet-section { padding: 22px 0; border-bottom: 1px solid var(--line); }
.sheet-section:last-child { border-bottom: 0; }
.sheet-kicker { display: flex; align-items: center; gap: 8px; margin: 0 0 18px; font-size: 13px; font-weight: 600; color: #e0e8f3; }
.sheet-kicker::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #05070a; box-shadow: 0 0 0 1px rgba(228, 238, 252, .75), 0 0 7px rgba(200, 220, 246, .4); }
/* Stacked, the columns read devices first, then processing; side by side,
   each column flows on its own so a tall section leaves no hole beside it. */
.settings-column:not(:last-child) > .sheet-section:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 950px) {
    #settingsAudio { display: grid; grid-template-columns: 1fr 1fr; column-gap: 30px; }
    #settingsAudio > .settings-column > .sheet-section:last-child { border-bottom: 0; }
    #settingsAudio > .settings-column + .settings-column { padding-left: 28px; border-left: 1px solid var(--line); }
    #settingsAudio .test-row { display: block; }
    #settingsAudio .test-row .hint { margin: 10px 0 0; }
}

.field { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.field > span { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; font-weight: 500; color: var(--text-2); }
.field output { padding: 2px 7px; border-radius: 6px; background: rgba(255, 255, 255, .05); font: 500 10.5px var(--mono); color: var(--silver); }
.field select {
    appearance: none; width: 100%; padding: 12px 38px 12px 13px; border-radius: 10px;
    border: 1px solid var(--line-2); color: #e2e8f1; font-size: 13px;
    background: #0d1219 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aebbcc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 15px;
    transition: border-color .2s, box-shadow .25s;
}
.field select:hover { border-color: var(--line-3); }
.field select:focus-visible { outline: none; border-color: rgba(170, 195, 225, .55); box-shadow: 0 0 0 4px rgba(150, 180, 215, .12); }
.field select:disabled { opacity: .4; }
.field select option { background: #12171f; }

/* room-ui.js keeps --fill in step with the value. */
input[type=range] { --fill: 50%; -webkit-appearance: none; appearance: none; width: 100%; height: 22px; margin: 0; background: transparent; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, #c8d7ea var(--fill), rgba(255, 255, 255, .1) var(--fill)); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; border: 0; border-radius: 50%; background: #f3f7fc; box-shadow: 0 0 0 4px rgba(199, 214, 234, .16), 0 2px 8px rgba(0, 0, 0, .45); transition: transform .25s var(--ease-spring), box-shadow .2s; }
input[type=range]:hover::-webkit-slider-thumb { transform: scale(1.1); }
input[type=range]:active::-webkit-slider-thumb { transform: scale(1.2); box-shadow: 0 0 0 7px rgba(199, 214, 234, .14), 0 2px 8px rgba(0, 0, 0, .45); }
input[type=range]:focus-visible { outline: none; }
input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--accent), 0 2px 8px rgba(0, 0, 0, .45); }
input[type=range]::-moz-range-track { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .1); }
input[type=range]::-moz-range-progress { height: 6px; border-radius: 999px; background: #c8d7ea; }
input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: #f3f7fc; }
input[type=range]:disabled { opacity: .4; cursor: not-allowed; }

.meter-label { display: flex; justify-content: space-between; gap: 12px; margin: 4px 0 10px; font-size: 11px; color: var(--muted); }
#micMeterHint { transition: color .2s; }
/* Segmented level meter; the marker shows where the voice gate opens. */
.mic-meter { position: relative; height: 10px; --threshold: 8.4%; --segments: repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 7px); }
.mic-meter::before { content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, .08); -webkit-mask: var(--segments); mask: var(--segments); }
.mic-meter span { position: relative; display: block; height: 100%; width: 0; background: linear-gradient(90deg, #58677b, #a2b3c9); -webkit-mask: var(--segments); mask: var(--segments); transition: width .08s linear; }
.mic-meter[data-state=open] span { background: linear-gradient(90deg, #4fb485, #a4ecc6); }
.mic-meter[data-state=blocked] span { background: linear-gradient(90deg, #7b4c56, #d4909c); }
.mic-meter__threshold { position: absolute; top: -5px; bottom: -5px; left: var(--threshold); width: 2px; margin-left: -1px; border-radius: 2px; background: #eef3f9; box-shadow: 0 0 0 2px rgba(10, 14, 20, .85); transition: left .25s var(--ease-out); }
.settings-body:has(.mic-meter[data-state=open]) #micMeterHint { color: #a8e9c6; }
.settings-body:has(.mic-meter[data-state=blocked]) #micMeterHint { color: #e6aab3; }
.test-row { display: flex; align-items: center; gap: 18px; margin-top: 16px; }
.test-row .btn { flex-shrink: 0; }
.test-row .hint { margin: 0; }
#audioDeviceStatus[data-state=error] { color: #f1b0b8; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 16px; border-radius: 10px; border: 1px solid var(--line-2); background: #232d3a; color: var(--text); font-size: 12.5px; font-weight: 500; transition: background .2s, border-color .2s, box-shadow .25s, transform .18s var(--ease-out); }
.btn:hover { background: #2c3848; border-color: var(--line-3); }
.btn:active { transform: scale(.97); }
.btn--ghost { background: rgba(255, 255, 255, .035); color: #c9d5e5; }
.btn--ghost:hover { background: rgba(255, 255, 255, .075); }
.btn--ghost[aria-pressed=true] { border-color: rgb(var(--ice-rgb) / .4); background: rgb(var(--ice-rgb) / .08); color: var(--ice); }
.btn--danger { border-color: transparent; background: linear-gradient(180deg, #cc5066, #aa3e52); color: #fff; }
.btn--danger:hover { background: linear-gradient(180deg, #d95a70, #b5445a); box-shadow: 0 8px 24px rgba(204, 80, 102, .35); }
.hint { margin: 9px 0 13px; font-size: 11.5px; line-height: 1.75; color: var(--muted); }

.setting-toggle { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 18px 0; cursor: pointer; }
.setting-toggle > span { display: flex; flex-direction: column; gap: 4px; }
.setting-toggle strong { font-size: 12.5px; font-weight: 500; color: #d5dfec; }
.setting-toggle small { font-size: 11.5px; line-height: 1.6; color: var(--muted); }
.setting-toggle input {
    appearance: none; position: relative; flex-shrink: 0; width: 42px; height: 24px; margin: 0;
    border-radius: 999px; border: 1px solid rgba(255, 255, 255, .08); background: #2a3340; cursor: pointer;
    transition: background .3s, border-color .3s, box-shadow .3s;
}
.setting-toggle input::before { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 999px; background: #aab7c9; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); transition: transform .38s var(--ease-spring), width .2s var(--ease-out), background .25s; }
.setting-toggle input:active::before { width: 21px; }
.setting-toggle input:checked { border-color: transparent; background: linear-gradient(180deg, #f1f5fb, #c2cfe0); box-shadow: 0 0 16px rgb(var(--ice-rgb) / .2); }
.setting-toggle input:checked::before { transform: translateX(18px); background: #0e141c; }
.setting-toggle input:checked:active::before { transform: translateX(13px); }
.setting-toggle input:disabled { opacity: .45; cursor: wait; }
.processing-status { display: flex; align-items: center; gap: 9px; margin-top: 10px; padding: 10px 12px; border-radius: 9px; border: 1px solid rgba(143, 230, 185, .14); background: rgba(143, 230, 185, .06); font: 500 10.5px/1.6 var(--mono); color: #b5e2cc; }
.processing-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--voice); animation: live-pulse 2.8s ease-out infinite; }

.settings-preview-wrap { position: relative; height: 220px; margin-bottom: 14px; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 12px; border: 1px solid var(--line-2); background: radial-gradient(ellipse at center, #263140, #090e16); }
.settings-preview { display: none; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); animation: fade-in .4s; }
.has-stream .settings-preview { display: block; }
.settings-preview-ph { display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 12px; color: var(--muted); }
.settings-preview-ph svg { width: 34px; height: 34px; color: #7f8fa4; }
.has-stream .settings-preview-ph { display: none; }

.wallpaper-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; min-width: 0; margin: 24px 0; padding: 0; border: 0; }
.wallpaper-options legend { margin-bottom: 13px; font-size: 12.5px; font-weight: 500; color: var(--text-2); }
.wallpaper-choice { position: relative; display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 7px 7px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .02); cursor: pointer; transition: border-color .25s, background .25s, transform .25s var(--ease-out); }
.wallpaper-choice:hover { transform: translateY(-2px); border-color: var(--line-3); }
.wallpaper-choice:has(input:checked) { border-color: rgba(191, 210, 227, .6); background: rgba(164, 191, 210, .06); box-shadow: 0 0 0 3px rgba(191, 210, 227, .08); }
.wallpaper-choice:has(input:checked)::after { content: '✓'; position: absolute; top: 13px; right: 13px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #eef3f9; color: #111822; font-size: 11px; font-weight: 700; animation: menu-in .3s var(--ease-spring); }
.wallpaper-choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 4px; }
.wallpaper-choice input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.wallpaper-choice strong { margin: 5px 6px 0; font-size: 12px; font-weight: 500; }
.wallpaper-choice small { margin: 0 6px; font-size: 10.5px; color: var(--muted); }
.wallpaper-swatch { display: block; height: 76px; border-radius: 7px; background: #0c1118; }
.wallpaper-swatch--eclipse { background: url('/img/atmosphere/revo-eclipse.png') 63% 49% / cover; }
.wallpaper-swatch--silk { background: repeating-linear-gradient(145deg, transparent 0%, rgba(155, 169, 179, .09) 11%, rgba(221, 231, 238, .31) 12%, #151e2c 13%, transparent 20%), #111820; }
.wallpaper-swatch--plain { background: linear-gradient(140deg, #252e3a, #10141b); }
.appearance-preview { display: flex; align-items: center; gap: 15px; margin-top: 22px; padding: 18px; border-radius: 12px; border: 1px solid var(--line-2); background: #0f151d; }
.preview-avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(140deg, #4c607d, #273242); font-weight: 600; }
.appearance-preview strong { font-size: 12.5px; font-weight: 600; }
.appearance-preview small { margin-left: 8px; font: 10px var(--mono); color: var(--muted); }
.appearance-preview p { margin: 6px 0 0; font-size: var(--chat-size); color: #b2c1d3; }
.shortcut-list { margin: 0; }
.shortcut-list > div { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.shortcut-list dt { font-size: 12.5px; color: #b7c4d6; }
.shortcut-list dd { display: flex; gap: 4px; margin: 0; }

/* ---------- Menus and notices ---------- */
.user-menu {
    position: fixed; z-index: 150; width: 264px; padding: 14px;
    border-radius: 16px; border: 1px solid rgba(196, 213, 237, .17);
    background: linear-gradient(180deg, rgba(31, 39, 50, .97), rgba(22, 28, 37, .97)); backdrop-filter: blur(14px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
    animation: menu-in .22s var(--ease-out);
}
.user-menu__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.user-menu__avatar .avatar { width: 38px; height: 38px; font-size: 15px; }
.user-menu__name { font-size: 14px; font-weight: 600; }
.user-menu__hint { font-size: 11px; color: var(--muted); }
.user-menu__volume { margin-bottom: 8px; }
.user-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border: 0; border-radius: 10px; background: transparent; font-size: 13px; color: var(--text-2); text-align: left; transition: background .15s, color .15s; }
.user-menu button svg { width: 18px; height: 18px; flex-shrink: 0; }
.user-menu button:hover { background: rgba(255, 255, 255, .06); color: var(--text); }
.user-menu button[aria-pressed=true] { color: #ffb6bf; }
.user-menu .danger { color: #f3a2ad; }
.user-menu .danger:hover { background: rgba(242, 144, 156, .1); color: #ffc0c8; }

.toast {
    position: fixed; left: 50%; bottom: 122px; z-index: 400;
    display: flex; align-items: center; gap: 10px; max-width: min(520px, calc(100vw - 32px));
    padding: 12px 16px 12px 14px; border-radius: 14px; border: 1px solid rgba(196, 213, 237, .2);
    background: rgba(24, 30, 40, .95); backdrop-filter: blur(12px); color: var(--text);
    font-size: 13px; line-height: 1.45; box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
    opacity: 0; transform: translate(-50%, 12px) scale(.96);
    transition: opacity .22s var(--ease-out), transform .4s var(--ease-spring);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0) scale(1); }
.toast::before { content: ''; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--accent); box-shadow: 0 0 10px rgba(196, 214, 238, .6); }
.toast[data-kind=success]::before { background: var(--voice); box-shadow: 0 0 10px rgba(143, 230, 185, .7); }
.toast[data-kind=error] { border-color: rgba(242, 144, 156, .35); }
.toast[data-kind=error]::before { background: var(--danger); box-shadow: 0 0 10px rgba(242, 144, 156, .6); }

/* ---------- Rooms page ---------- */
.rooms-page {
    min-height: 100dvh; padding: calc(var(--tb-height, 0px) + 56px) 40px 56px;
    background: linear-gradient(0deg, #080b10 28%, rgba(8, 11, 16, .6)), url('/img/atmosphere/revo-eclipse.png') 50% 0 / cover fixed;
}
.rooms-wrap { max-width: 1000px; margin: auto; }
.rooms-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 34px; animation: rise-in .7s var(--ease-out) both; }
.rooms-head h1 { margin: 16px 0 10px; font-size: 40px; font-weight: 400; letter-spacing: -1.8px; background: linear-gradient(180deg, #fff 30%, #b8c6d6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rooms-intro { margin: 0; font-size: 13px; line-height: 1.8; color: #a9b7ca; }
.rooms-back { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 11px; border: 1px solid var(--line-3); background: rgba(17, 24, 32, .7); font-size: 12.5px; font-weight: 500; color: #c1cedf; white-space: nowrap; transition: background .2s, color .2s; }
.rooms-back span { transition: transform .3s var(--ease-out); }
.rooms-back:hover { background: rgba(30, 40, 52, .85); color: #fff; }
.rooms-back:hover span { transform: translateX(-3px); }
.room-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.room-row {
    display: flex; align-items: center; gap: 18px; padding: 20px 22px;
    border-radius: 16px; border: 1px solid var(--line-2); background: rgba(18, 25, 34, .82); backdrop-filter: blur(10px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset;
    transition: border-color .25s, transform .3s var(--ease-out), background .25s, box-shadow .3s;
    animation: rise-in .6s calc(.1s + var(--i, 0) * 60ms) var(--ease-out) both;
}
.room-row:hover { border-color: rgba(193, 213, 239, .3); transform: translateY(-3px); background: rgba(22, 30, 41, .9); box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 18px 40px rgba(0, 0, 0, .35); }
.room-row__icon { display: grid; place-items: center; width: 46px; height: 46px; flex-shrink: 0; border-radius: 14px; border: 1px solid var(--line-2); background: linear-gradient(140deg, #243041, #151c26); color: var(--silver); }
.room-row__icon svg { width: 20px; height: 20px; }
.room-info { flex: 1; min-width: 0; }
.room-name { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; letter-spacing: -.2px; }
.room-name > span:not(.pin):not(.lock) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pin { width: 7px; height: 7px; border-radius: 50%; background: var(--voice); animation: live-pulse 2.8s ease-out infinite; flex-shrink: 0; }
.lock { padding: 2px 7px; border-radius: 999px; border: 1px solid rgba(230, 196, 134, .25); background: rgba(230, 196, 134, .08); font: 500 9px var(--mono); letter-spacing: .6px; text-transform: uppercase; color: #e7cf9f; }
.room-count { display: flex; align-items: center; gap: 7px; margin-top: 7px; font: 500 11px var(--mono); color: var(--muted); }
.join-link { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 11px; border: 1px solid rgba(179, 198, 223, .22); background: rgba(197, 214, 237, .07); font-size: 12.5px; font-weight: 500; white-space: nowrap; transition: background .2s, border-color .2s, color .2s; }
.join-link span { transition: transform .3s var(--ease-out); }
.join-link:hover, .room-row:hover .join-link { background: #e8eef6; border-color: transparent; color: #111822; }
.room-row:hover .join-link span { transform: translateX(3px); }
.rooms-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 56px 24px; border-radius: 18px; border: 1px dashed rgba(196, 213, 236, .2); background: rgba(14, 19, 26, .7); text-align: center; animation: rise-in .6s .1s var(--ease-out) both; }
.rooms-empty svg { width: 54px; height: 54px; color: #9fb0c6; animation: float 6s ease-in-out infinite; }
.rooms-empty h2 { margin: 6px 0 0; font-size: 18px; font-weight: 500; }
.rooms-empty p { margin: 0; font-size: 13px; color: var(--muted); }
.rooms-create { margin-top: 8px; padding: 12px 18px; border-radius: 11px; background: #e8eef6; color: #111822; font-size: 13px; font-weight: 600; transition: transform .2s var(--ease-out), box-shadow .25s; }
.rooms-create:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(200, 216, 236, .2); }

/* ---------- Themes and preferences ---------- */
html[data-theme=dark] { --bg: #030405; --surface: #0a0c0f; --muted: #b0b8c3; --faint: #8d97a6; --line: rgba(255, 255, 255, .11); --line-2: rgba(255, 255, 255, .15); }
html[data-theme=dark] .participants-panel, html[data-theme=dark] .chat-panel { background: #0a0c0f; }
html[data-theme=dark] .voice-card { background: radial-gradient(90% 65% at 50% 0%, rgb(var(--hue, 150 176 208) / .08), transparent 72%), rgba(12, 14, 18, .88); }
html.compact-chat .message { margin-top: 3px; padding-top: 2px; padding-bottom: 2px; }
html.compact-chat .message.grouped { margin-top: 0; }
html[data-wallpaper=silk] .room-hero__atmosphere { background: radial-gradient(ellipse at 65% 40%, rgba(72, 87, 103, .24), transparent 72%); --ambient-scene-opacity: .95; }
html[data-wallpaper=plain] .room-hero__atmosphere { background: radial-gradient(80% 70% at 78% 0%, rgba(62, 78, 99, .3), transparent 72%); }
html[data-wallpaper=plain] .ambient-scene__canvas { display: none !important; }
html[data-wallpaper=silk] .rooms-page, html[data-wallpaper=plain] .rooms-page { background: radial-gradient(ellipse at 25% 0, rgba(40, 50, 63, .34), transparent 60%), #080b10; }
/* Reduced motion keeps every state visible but still. */
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.reduce-motion .voice-card, html.reduce-motion .cam-tile, html.reduce-motion .console { --level: 0 !important; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .voice-card, .cam-tile, .console { --level: 0 !important; }
}

/* ---------- Responsive ---------- */
@media (min-width: 1600px) {
    .room { grid-template-columns: minmax(0, 1fr) 400px; gap: 22px; padding-left: 32px; padding-right: 32px; }
    .console { margin-left: 32px; margin-right: 32px; }
    .participants-panel { padding-left: 34px; padding-right: 34px; }
    .room-hero__content { padding-top: 44px; }
    .room-hero h2 { font-size: 54px; }
}
@media (max-width: 1280px) {
    .mic-mode { flex-direction: column; align-items: stretch; gap: 5px; }
    .mic-mode__meta { order: 0; justify-content: space-between; padding: 0 3px; }
}
@media (max-width: 1100px) {
    .topbar { padding: 0 20px; }
    .topbar__brand { gap: 13px; }
    .topbar__meta { gap: 12px; }
    .room { grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; padding: 14px 16px 0; }
    .console { margin: 12px 16px 14px; gap: 12px; }
    .console__aside { gap: 10px; }
    .participants-panel { padding: 0 20px 14px; }
    .room-hero h2 { font-size: 38px; letter-spacing: -1.8px; }
    .room-hero__content { padding: 28px 0 24px; }
    .room-hero__coordinate { right: 16px; }
    .lounge-foot > span:last-child { display: none; }
}
@media (max-width: 850px) and (min-width: 641px) {
    .console__identity > .avatar { display: none; }
    .ctrl-btn { width: 40px; height: 40px; }
    .console__divider { margin: 0 3px; }
    .mode-pill { padding: 6px 8px; font-size: 11px; }
    .leave-button span { display: none; }
    .leave-button { width: 40px; padding: 0; justify-content: center; }
    .room { grid-template-columns: minmax(0, 1fr) 270px; }
    .topbar__rule, .connection-latency, .room-code-badge .code { display: none; }
    .copy-icon { border: 0; padding: 0; }
    .room-hero h2 { font-size: 31px; letter-spacing: -1.4px; }
    .room-hero p { font-size: 11.5px; }
    .room-hero__coordinate { display: none; }
}
@media (min-width: 641px) and (max-height: 780px) {
    .app { grid-template-rows: 62px minmax(0, 1fr) auto; }
    .lounge-nav { height: 40px; }
    .room-hero__content { padding: 22px 0 18px; }
    .room-hero h2 { font-size: 34px; letter-spacing: -1.6px; margin: 11px 0 7px; }
    .room-hero__coordinate { top: 62px; }
    .console { margin-top: 10px; margin-bottom: 12px; }
}
@media (min-width: 641px) and (max-height: 700px) {
    .room-hero__content { padding: 14px 0 12px; }
    .room-hero h2 { font-size: 27px; line-height: 1.1; letter-spacing: -1.2px; margin: 8px 0 5px; }
    .room-hero p { font-size: 11px; }
    .room-hero__coordinate { display: none; }
    .salon__head { margin-bottom: 10px; }
    .lounge-nav { height: 34px; }
}
@media (max-width: 640px) {
    .app { grid-template-rows: 60px 46px minmax(0, 1fr) auto; }
    .topbar { padding: 0 14px; gap: 8px; }
    .topbar__brand { gap: 12px; }
    .wordmark { font-size: 20px; gap: 6px; }
    .brand-symbol { width: 20px; height: 20px; }
    .wordmark__dot { margin-left: -5px; }
    .topbar__rule, .channel .eyebrow, .topbar__meta .count, .connection-latency, .room-code-badge .code { display: none; }
    .channel__name { max-width: 110px; margin: 0; font-size: 12px; }
    .room-code-badge { height: 32px; padding: 0 10px; font-size: 11px; }
    .copy-icon { padding: 0; border: 0; }
    .status { width: 30px; padding: 0; justify-content: center; font-size: 0; gap: 0; }
    .topbar__meta { gap: 0; }

    .mobile-room-tabs { display: flex; align-items: center; gap: 4px; margin: 0 11px; padding: 4px 0 8px; border-bottom: 1px solid var(--line); }
    .mobile-room-tabs button { height: 32px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; font-size: 12px; font-weight: 500; color: #9aa7b9; transition: background .2s, color .2s; }
    .mobile-room-tabs button.active { background: rgba(196, 214, 238, .1); color: #edf2f9; }
    .mobile-room-tabs button span { display: inline-grid; place-items: center; min-width: 17px; height: 17px; margin-left: 5px; padding: 0 4px; border-radius: 6px; background: #c9d8ec; color: #142033; font: 600 9.5px var(--mono); animation: menu-in .3s var(--ease-spring); }
    .mobile-self-state { max-width: 128px; margin-left: auto; font-size: 10.5px; color: #93a8bd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .mobile-self-state[data-state=listener] { color: var(--warn); }
    .mobile-self-state[data-state=muted], .mobile-self-state[data-state=deafened] { color: #d8a0aa; }

    .room { display: flex; flex-direction: column; gap: 0; padding: 10px 11px 0; overflow: hidden; }
    .room[data-mobile-pane=voice] .chat-panel { display: none; }
    .room[data-mobile-pane=chat] .participants-panel, .room[data-mobile-pane=chat] .stage { display: none !important; }
    .room[data-mobile-pane=chat] .chat-panel { display: flex; flex: 1; min-height: 0; height: 100%; }
    .room[data-mobile-pane=voice] .participants-panel { display: flex; flex: 1; min-height: 0; overflow: hidden; }
    .participants-panel { padding: 0 14px 12px; }
    .lounge-nav { height: 36px; font-size: 7.5px; }
    .sidebar-back { font-size: 11px; }
    .room-hero__atmosphere { height: 62%; background-position: 0 0, 0 0, 64% 40%; }
    .room-hero__content { padding: 20px 0 16px; }
    .room-hero .eyebrow { font-size: 7.5px; gap: 9px; }
    .room-hero .eyebrow::before { width: 18px; }
    .room-hero h2 { font-size: 31px; letter-spacing: -1.5px; margin: 10px 0 6px; }
    .room-hero p { font-size: 11px; }
    .room-hero__coordinate { display: none; }
    .salon__head { margin-bottom: 12px; }
    .panel-title { font-size: 12.5px; }
    .salon__tagline { font-size: 10px; }
    .participant-list { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 140px; gap: 10px; padding: 1px 1px 8px; }
    .voice-card { --avatar-size: 42px; min-width: 0; padding: 16px 8px 22px; gap: 9px; }
    .voice-card .name { font-size: 12.5px; }
    .participant-status { font-size: 10.5px; margin-top: -4px; }
    .mod-chip { font-size: 7px; left: 7px; top: 7px; }
    .state-icons { top: 7px; right: 7px; }
    .state-icons svg { width: 20px; height: 20px; padding: 3px; }
    .invite-slot button { gap: 9px; padding: 12px 7px; }
    .invite-slot__icon { width: 36px; height: 36px; }
    .invite-slot__label { font-size: 11px; }
    .invite-slot__action { font-size: 10px; }
    .lounge-foot { margin-top: 6px; font-size: 10px; }

    .chat-heading { padding: 14px 16px; }
    .chat-heading .eyebrow { display: none; }
    .messages { padding: 12px 8px; min-height: 0; }
    .chat-empty { min-height: 160px; }
    .chat-empty__icon { width: 56px; height: 56px; padding: 16px; margin-bottom: 16px; }
    .chat-empty h3 { font-size: 15px; }
    .typing { padding: 0 16px; }
    .message-form { margin: 0 10px; padding: 5px 5px 5px 12px; }
    .message-form input { font-size: 14px; }
    .composer-note { margin: 8px 14px 12px; font-size: 10px; }
    .jump-latest { bottom: 100px; }

    .console { display: flex; flex-direction: column; justify-content: center; gap: 8px; margin: 8px 10px 10px; }
    .console__identity { display: none; }
    .console__cluster { width: 100%; justify-content: space-between; gap: 2px; padding: 4px; border-radius: 14px; }
    .console__divider { display: none; }
    .ctrl-btn { flex: 1; width: auto; max-width: 56px; height: 44px; }
    .ctrl-btn svg { width: 19px; height: 19px; }
    .console__aside { width: 100%; justify-content: space-between; gap: 8px; }
    .mic-mode { flex-direction: row; align-items: center; gap: 8px; }
    .mic-mode__meta { padding: 0; }
    .tx-indicator { display: none; }
    .mode-pill { padding: 6px 10px; font-size: 11px; }
    .leave-button { width: auto; height: 36px; padding: 0 13px 0 11px; font-size: 12.5px; border-radius: 11px; }
    .leave-button svg { width: 17px; height: 17px; }

    .room.is-media[data-mobile-pane=voice] .stage { flex: 1; min-height: 120px; }
    .room.is-media[data-mobile-pane=voice] .participants-panel { flex: 0 0 140px; margin-top: 10px; }
    .room.is-media .voice-card { flex-basis: 108px; }
    .stage__gallery { min-height: 0; }
    .stage__bar { padding: 9px 10px; }

    .overlay { padding: 13px; }
    .sheet { padding: 22px; border-radius: 16px; max-height: calc(100dvh - var(--tb-height, 0px) - 26px); }
    .settings-sheet { padding: 0; max-height: calc(100dvh - var(--tb-height, 0px) - 26px); }
    .settings-header { padding: 20px 18px 14px; }
    .settings-intro { margin: 6px 0 12px; font-size: 11.5px; line-height: 1.6; }
    .sheet__head h2 { font-size: 23px; }
    .settings-tab { padding: 9px 4px; font-size: 11px; }
    .settings-body { padding: 0 18px 20px; }
    .test-row { gap: 12px; }
    .test-row .btn { padding: 10px 12px; font-size: 11.5px; }
    .wallpaper-options { gap: 8px; }
    .wallpaper-swatch { height: 56px; }
    .wallpaper-choice strong { font-size: 11px; }
    .wallpaper-choice small { font-size: 9.5px; }
    .shortcut-list dt { font-size: 11px; }
    .toast { bottom: 142px; font-size: 12px; }

    .rooms-page { padding: calc(var(--tb-height, 0px) + 28px) 16px 30px; }
    .rooms-head { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 24px; }
    .rooms-head h1 { font-size: 30px; margin-top: 12px; }
    .rooms-intro { font-size: 12px; }
    .room-row { gap: 12px; padding: 16px 14px; flex-wrap: wrap; }
    .room-row__icon { width: 40px; height: 40px; border-radius: 12px; }
    .room-name { font-size: 14px; }
    .join-link { width: 100%; justify-content: center; }
}
@media (max-width: 370px) {
    .mobile-room-tabs button { padding: 0 11px; }
    .mobile-self-state { max-width: 96px; font-size: 9.5px; }
    .mode-pill { padding: 6px 7px; font-size: 10.5px; }
    .room-hero__content { padding: 16px 0 12px; }
    .room-hero h2 { font-size: 26px; }
    .participant-list { grid-auto-rows: 128px; }
    .voice-card { --avatar-size: 38px; }
}