:root {
  font-family: "Segoe UI Variable", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  color-scheme: dark;
  --bg: rgb(var(--rooms-rgb-050a12,5,10,18));
  --bg-soft: rgb(var(--rooms-rgb-0c1320,12,19,32));
  --panel: rgba(var(--rooms-rgb-0d1523,13,21,35),0.82);
  --panel-strong: rgb(var(--rooms-rgb-101927,16,25,39));
  --line: rgba(var(--rooms-rgb-b4c9eb,180,201,235),0.13);
  --line-strong: rgba(var(--rooms-rgb-b4c9eb,180,201,235),0.23);
  --text: rgb(var(--rooms-rgb-f5f8ff,245,248,255));
  --muted: rgb(var(--rooms-rgb-9ca9bc,156,169,188));
  --muted-strong: rgb(var(--rooms-rgb-c7d0df,199,208,223));
  --accent: rgb(var(--rooms-rgb-7ca6ff,124,166,255));
  --accent-strong: rgb(var(--rooms-rgb-4a74ff,74,116,255));
  --accent-soft: rgba(var(--rooms-rgb-6d96ff,109,150,255),0.14);
  --cyan: rgb(var(--rooms-rgb-8ddcff,141,220,255));
  --green: #64e6ac;
  --yellow: #f1cb76;
  --red: #ff7f8b;
  --shadow: 0 28px 90px rgba(0,0,0,.42);
  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 18px;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(1100px 760px at 5% -8%, rgba(var(--rooms-rgb-235be2,35,91,226),0.25), transparent 62%),
    radial-gradient(920px 700px at 103% 18%, rgba(var(--rooms-rgb-6336cd,99,54,205),0.16), transparent 64%),
    radial-gradient(760px 620px at 35% 66%, rgba(var(--rooms-rgb-1176a6,17,118,166),0.08), transparent 68%),
    linear-gradient(180deg,rgb(var(--rooms-rgb-07111f,7,17,31)) 0%,rgb(var(--rooms-rgb-050b15,5,11,21)) 42%,rgb(var(--rooms-rgb-040912,4,9,18)) 72%,rgb(var(--rooms-rgb-02060c,2,6,12)) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::before {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background: radial-gradient(640px 500px at 78% 48%,rgba(var(--rooms-rgb-3e5fd7,62,95,215),0.08),transparent 72%), radial-gradient(720px 520px at 16% 88%,rgba(var(--rooms-rgb-26499d,38,73,157),0.08),transparent 74%);
}
button,select,input,textarea { font: inherit; } button { color: inherit; } .hidden { display:none!important; }
svg { display:block; }

.topbar {
  position: relative; top: auto; z-index: 60;
  width: min(calc(100% - 32px), 1380px); height: 68px; margin: 18px auto 0; padding: 0 14px 0 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  border:1px solid var(--line); border-radius:22px;
  background:rgba(var(--rooms-rgb-080d15,8,13,21),0.76); backdrop-filter:blur(22px) saturate(135%);
  box-shadow:0 12px 48px rgba(0,0,0,.18);
}
.brand { display:flex; align-items:center; gap:11px; color:inherit; text-decoration:none; min-width:0; }
.brand-mark { width:31px; height:34px; display:grid; place-items:center; color:rgb(var(--rooms-rgb-8eb4ff,142,180,255)); flex:0 0 auto; }
.brand-mark svg { width:27px; height:27px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 5px 14px rgba(var(--rooms-rgb-4a74ff,74,116,255),0.28)); }
.brand-copy { display:flex; flex-direction:column; gap:2px; min-width:0; }
.brand-copy strong { font-size:14px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.brand-copy small { color:rgb(var(--rooms-rgb-718198,113,129,152)); font-size:10px; letter-spacing:.04em; white-space:nowrap; }
.topbar-meta { display:flex; align-items:center; gap:12px; }
.stage { font-size:11px; color:rgb(var(--rooms-rgb-718198,113,129,152)); }
.account-button { min-height:35px; padding:0 13px; border:1px solid rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.28); border-radius:999px; color:rgb(var(--rooms-rgb-d7e4fb,215,228,251)); background:rgba(var(--rooms-rgb-5c84ee,92,132,238),0.1); font-size:10px; font-weight:760; cursor:pointer; }
.account-button:hover:not(:disabled) { border-color:rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.55); background:rgba(var(--rooms-rgb-5c84ee,92,132,238),0.17); }
.account-button.authenticated { color:#baf4d7; border-color:rgba(100,230,172,.32); background:rgba(52,166,116,.10); }
.account-button.unavailable { color:#d8b678; border-color:rgba(241,203,118,.25); }
.account-button:disabled { opacity:.55; cursor:wait; }

.badge { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; font-size:11px; font-weight:750; letter-spacing:.055em; border:1px solid var(--line-strong); border-radius:999px; padding:7px 11px; background:rgba(255,255,255,.035); }
.badge i { width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 0 4px color-mix(in srgb,currentColor 10%,transparent); }
.neutral { color:rgb(var(--rooms-rgb-aeb9c5,174,185,197)); }.ok { color:var(--green)!important; }.wait { color:var(--yellow)!important; }.bad,.error-text { color:var(--red)!important; }

main { width:min(calc(100% - 32px),1380px); margin:34px auto 26px; }
.card,.glass-card { border:1px solid var(--line); background:linear-gradient(180deg,rgba(var(--rooms-rgb-101927,16,25,39),0.86),rgba(var(--rooms-rgb-090f19,9,15,25),0.82)); box-shadow:var(--shadow); backdrop-filter:blur(18px) saturate(125%); }
.card { border-radius:var(--radius-xl); padding:clamp(24px,4vw,48px); }
h1,h2,p { margin-top:0; } h1 { margin-bottom:16px; font-size:clamp(38px,5vw,66px); line-height:1.02; letter-spacing:-.035em; } h2 { margin:2px 0 3px; font-size:clamp(23px,3vw,32px); letter-spacing:-.025em; }
h1 span { color:rgb(var(--rooms-rgb-b8d0ff,184,208,255)); }
.muted { color:var(--muted); line-height:1.6; }.eyebrow { display:inline-flex; align-items:center; gap:9px; color:rgb(var(--rooms-rgb-b7c6df,183,198,223)); font-size:11px; font-weight:800; letter-spacing:.075em; text-transform:uppercase; }
.status-dot,.live-dot { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 5px rgba(100,230,172,.08),0 0 18px rgba(100,230,172,.55); flex:0 0 auto; }

.home-stage { min-height:calc(100vh - 154px); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:36px 0 70px; }
.home-launcher { width:min(860px,100%); display:grid; grid-template-columns:minmax(0,1.72fr) minmax(230px,.78fr); gap:16px; }
.launch-card { position:relative; min-height:360px; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:34px; border:1px solid rgba(var(--rooms-rgb-b0c7ec,176,199,236),0.15); border-radius:30px; color:var(--text); background:linear-gradient(155deg,rgba(var(--rooms-rgb-121c2c,18,28,44),0.96),rgba(var(--rooms-rgb-080e18,8,14,24),0.94)); box-shadow:0 28px 86px rgba(0,0,0,.38); }
.launch-card::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(400px 250px at 50% 12%,rgba(var(--rooms-rgb-7499ff,116,153,255),0.13),transparent 68%); opacity:.9; transition:opacity .24s ease; }
.launch-card:hover:not(:disabled) { transform:translateY(-4px); border-color:rgba(var(--rooms-rgb-82a6ff,130,166,255),0.42); box-shadow:0 34px 98px rgba(0,0,0,.46),0 0 0 1px rgba(var(--rooms-rgb-6389ff,99,137,255),0.08); }
.launch-card:hover::before { opacity:1.35; }
.launch-card-primary { background:linear-gradient(150deg,rgba(var(--rooms-rgb-152237,21,34,55),0.98),rgba(var(--rooms-rgb-080f1b,8,15,27),0.96)); }
.launch-card-secondary { background:linear-gradient(155deg,rgba(var(--rooms-rgb-101928,16,25,40),0.94),rgba(var(--rooms-rgb-070c15,7,12,21),0.94)); }
.launch-symbol { position:relative; z-index:1; display:grid; place-items:center; color:rgb(var(--rooms-rgb-9dbbff,157,187,255)); }
.launch-symbol svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 18px 34px rgba(var(--rooms-rgb-3e66e0,62,102,224),0.24)); }
.room-symbol { width:118px; height:118px; }.room-symbol svg { stroke-width:2.6; }.room-symbol circle { fill:#75e9b3; stroke:none; filter:drop-shadow(0 0 10px rgba(100,230,172,.54)); }
.join-symbol { width:78px; height:78px; color:rgb(var(--rooms-rgb-a8b9d8,168,185,216)); }.join-symbol svg { stroke-width:2.7; }
.launch-title { position:relative; z-index:1; font-size:18px; font-weight:790; letter-spacing:-.012em; text-align:center; }.launch-title small { font-size:.82em; font-weight:630; color:rgb(var(--rooms-rgb-9eacc1,158,172,193)); }
.home-message { width:min(860px,100%); margin-top:14px; padding:12px 15px; border:1px solid rgba(255,127,139,.22); border-radius:14px; color:#ffc0c6; background:rgba(88,25,36,.24); font-size:12px; text-align:center; }
.my-rooms { border:1px solid var(--line); border-radius:24px; padding:22px; background:linear-gradient(180deg,rgba(var(--rooms-rgb-0e1725,14,23,37),0.82),rgba(var(--rooms-rgb-080e17,8,14,23),0.78)); box-shadow:0 24px 70px rgba(0,0,0,.28); }
.home-owned-rooms { width:min(860px,100%); margin-top:24px; }
.my-rooms-head { display:flex; align-items:center; justify-content:space-between; gap:14px; }.my-rooms-head h2 { margin:0; font-size:19px; }.my-rooms-list { display:flex; flex-direction:column; gap:8px; margin-top:14px; }.rooms-empty { margin:15px 0 2px; color:rgb(var(--rooms-rgb-718198,113,129,152)); font-size:10px; }
.my-room-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px 13px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.025); }.my-room-copy { min-width:0; display:flex; flex-direction:column; gap:3px; }.my-room-copy b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }.my-room-copy small { color:rgb(var(--rooms-rgb-718198,113,129,152)); font-size:8px; }.my-room-actions { display:flex; gap:6px; }.my-room-actions button { min-height:33px; padding:0 10px; border-radius:9px; font-size:9px; }
.join-form { display:flex; flex-direction:column; gap:9px; }.join-form>label,.product-field>span,.format-fieldset legend { color:rgb(var(--rooms-rgb-94a4b9,148,164,185)); font-size:9px; font-weight:780; letter-spacing:.06em; text-transform:uppercase; }.join-form>input,.product-field input,.product-field select { width:100%; min-height:48px; border:1px solid var(--line-strong); border-radius:13px; padding:0 13px; outline:none; color:rgb(var(--rooms-rgb-eaf1ff,234,241,255)); background:rgba(var(--rooms-rgb-02070d,2,7,13),0.52); }.join-form>input:focus,.product-field input:focus,.product-field select:focus { border-color:rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.62); box-shadow:0 0 0 3px rgba(var(--rooms-rgb-5a84ff,90,132,255),0.1); }.join-modal-card { width:min(500px,calc(100vw - 28px)); }.join-modal-card .product-modal-head { align-items:center; }.join-modal-card .product-modal-head h2 { margin:0; }

.product-modal { position:fixed; z-index:100; inset:0; display:grid; place-items:center; padding:20px; background:rgba(var(--rooms-rgb-02060c,2,6,12),0.72); backdrop-filter:blur(12px); }.product-modal-card { width:min(560px,calc(100vw - 28px)); max-height:calc(100vh - 32px); overflow:auto; border-radius:26px; padding:24px; box-shadow:0 38px 120px rgba(0,0,0,.68); }.product-modal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:21px; }.product-modal-head h2 { margin-top:7px; font-size:28px; }
.room-create-fields { display:flex; flex-direction:column; gap:15px; }.product-field { display:flex; flex-direction:column; gap:7px; }.format-fieldset { display:grid; grid-template-columns:1fr 1fr; gap:9px; border:0; padding:0; margin:0; }.format-fieldset legend { grid-column:1/-1; margin-bottom:7px; }.format-option { cursor:pointer; }.format-option>input { position:absolute; opacity:0; pointer-events:none; }.format-option>span { min-height:76px; padding:14px; display:flex; flex-direction:column; justify-content:center; gap:4px; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.02); }.format-option b { font-size:12px; }.format-option small { color:rgb(var(--rooms-rgb-74849a,116,132,154)); font-size:9px; }.format-option>input:checked+span { border-color:rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.62); background:rgba(var(--rooms-rgb-5c84ee,92,132,238),0.12); box-shadow:0 0 0 3px rgba(var(--rooms-rgb-5a84ff,90,132,255),0.08); }.create-note { margin:0; color:rgb(var(--rooms-rgb-718198,113,129,152)); font-size:9px; line-height:1.5; }
.room-created { text-align:center; }.created-check { width:62px; height:62px; margin:3px auto 15px; display:grid; place-items:center; border-radius:22px; color:#05120d; background:linear-gradient(145deg,#8ef0c3,#55d89d); font-size:28px; font-weight:900; box-shadow:0 18px 45px rgba(100,230,172,.20); }.room-created>p { max-width:420px; margin:8px auto 20px; color:rgb(var(--rooms-rgb-8292a8,130,146,168)); font-size:11px; line-height:1.55; }.room-created .product-field { text-align:left; }.created-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:15px; }.created-actions button { min-height:45px; border-radius:13px; }
code { color:rgb(var(--rooms-rgb-8fb6ff,143,182,255)); }

.prejoin-card { padding:clamp(22px,3vw,34px); }
.prejoin-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; padding:4px 6px 20px; }.prejoin-heading h1 { font-size:clamp(36px,4vw,54px); margin:10px 0 6px; }.prejoin-heading .muted { margin-bottom:0; font-size:13px; }
.policy-line { display:flex; justify-content:flex-end; gap:7px; flex-wrap:wrap; max-width:50%; }.policy-chip { border:1px solid var(--line); border-radius:999px; padding:6px 10px; color:rgb(var(--rooms-rgb-aebbd0,174,187,208)); background:rgba(255,255,255,.03); font-size:10px; font-weight:700; }
.prejoin-grid { display:grid; grid-template-columns:minmax(0,1.38fr) minmax(330px,.62fr); gap:18px; }
.preview-wrap { position:relative; min-height:min(63vh,660px); border-radius:26px; overflow:hidden; background:linear-gradient(145deg,rgb(var(--rooms-rgb-08101b,8,16,27)),rgb(var(--rooms-rgb-03070d,3,7,13))); border:1px solid var(--line); display:grid; place-items:center; isolation:isolate; }
.preview-wrap::before { content:""; position:absolute; inset:-20%; z-index:-1; background:radial-gradient(circle at 30% 30%,rgba(var(--rooms-rgb-4c73ff,76,115,255),0.19),transparent 46%),radial-gradient(circle at 80% 75%,rgba(var(--rooms-rgb-53a7ce,83,167,206),0.1),transparent 42%); }
.preview-wrap video { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; transform:scaleX(-1); }
.preview-glow { position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),inset 0 -120px 110px rgba(0,0,0,.18); }
.placeholder { display:flex; flex-direction:column; align-items:center; gap:7px; color:rgb(var(--rooms-rgb-8999ae,137,153,174)); text-align:center; }.placeholder strong { color:rgb(var(--rooms-rgb-b8c6d8,184,198,216)); font-size:14px; }.placeholder small { color:rgb(var(--rooms-rgb-66758a,102,117,138)); font-size:11px; }.camera-placeholder-icon { width:56px; height:56px; display:grid; place-items:center; border-radius:18px; color:rgb(var(--rooms-rgb-94b8ff,148,184,255)); background:rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.08); border:1px solid rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.18); font-size:26px; box-shadow:0 18px 40px rgba(var(--rooms-rgb-1e48af,30,72,175),0.16); }
.preview-label { position:absolute; left:16px; top:16px; display:flex; align-items:center; gap:8px; padding:8px 11px; border-radius:999px; border:1px solid rgba(255,255,255,.10); background:rgba(var(--rooms-rgb-050a12,5,10,18),0.58); backdrop-filter:blur(14px); color:rgb(var(--rooms-rgb-c8d3e3,200,211,227)); font-size:10px; font-weight:750; }
.controls-panel { border-radius:26px; padding:22px; display:flex; flex-direction:column; gap:13px; box-shadow:0 20px 65px rgba(0,0,0,.27); }.panel-title { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; padding:1px 2px 4px; }.panel-title span { font-size:13px; font-weight:800; }.panel-title small { color:rgb(var(--rooms-rgb-6f7d90,111,125,144)); font-size:9px; }
.device-field { display:flex; flex-direction:column; gap:7px; color:rgb(var(--rooms-rgb-98a7ba,152,167,186)); font-size:10px; font-weight:750; letter-spacing:.04em; text-transform:uppercase; }
select { width:100%; appearance:auto; border:1px solid var(--line-strong); border-radius:13px; background:rgb(var(--rooms-rgb-0a111c,10,17,28)); color:rgb(var(--rooms-rgb-e7edf7,231,237,247)); padding:11px 12px; outline:none; transition:border-color .2s,box-shadow .2s; } select:focus { border-color:rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.55); box-shadow:0 0 0 3px rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.09); }
.toggle-row { display:grid; gap:8px; }.switch-row { position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 12px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.025); cursor:pointer; }.switch-row>span { display:flex; flex-direction:column; gap:2px; }.switch-row b { font-size:11px; }.switch-row small { color:rgb(var(--rooms-rgb-718096,113,128,150)); font-size:9px; }.switch-row input { position:absolute; opacity:0; pointer-events:none; }.switch-row i { width:36px; height:21px; border-radius:999px; background:rgb(var(--rooms-rgb-293445,41,52,69)); border:1px solid rgba(255,255,255,.08); position:relative; transition:.2s; flex:0 0 auto; }.switch-row i::after { content:""; width:15px; height:15px; border-radius:50%; position:absolute; left:2px; top:2px; background:rgb(var(--rooms-rgb-8794a7,135,148,167)); transition:.2s; }.switch-row input:checked+i { background:linear-gradient(135deg,rgb(var(--rooms-rgb-6e9cff,110,156,255)),rgb(var(--rooms-rgb-486df3,72,109,243))); }.switch-row input:checked+i::after { transform:translateX(15px); background:#fff; }.switch-row input:disabled~i { opacity:.35; }
.message { min-height:38px; padding:5px 2px 0; color:rgb(var(--rooms-rgb-9fb0c2,159,176,194)); font-size:11px; line-height:1.45; }.privacy-note { margin:0; color:rgb(var(--rooms-rgb-66758a,102,117,138)); font-size:9px; line-height:1.5; text-align:center; }
button { border:0; border-radius:14px; padding:12px 16px; font-weight:750; cursor:pointer; transition:transform .2s ease,background .2s,border-color .2s,box-shadow .2s,opacity .2s; } button:hover:not(:disabled) { transform:translateY(-1px); } button:disabled { opacity:.42; cursor:not-allowed; transform:none; }
.primary { color:#fff; background:linear-gradient(135deg,rgb(var(--rooms-rgb-84adff,132,173,255)) 0%,rgb(var(--rooms-rgb-4f76ff,79,118,255)) 68%,rgb(var(--rooms-rgb-3f5ce6,63,92,230)) 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 16px 38px rgba(var(--rooms-rgb-385cff,56,92,255),0.25); }.primary:hover:not(:disabled) { box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 20px 46px rgba(var(--rooms-rgb-385cff,56,92,255),0.34); }
.secondary,.tool { color:rgb(var(--rooms-rgb-dbe6f7,219,230,247)); background:rgba(255,255,255,.045); border:1px solid rgba(var(--rooms-rgb-a0bcef,160,188,239),0.18); }.secondary:hover:not(:disabled),.tool:hover:not(:disabled) { background:rgba(var(--rooms-rgb-6891ef,104,145,239),0.1); border-color:rgba(var(--rooms-rgb-89acff,137,172,255),0.31); }
.action-wide { width:100%; min-height:50px; display:flex; align-items:center; justify-content:center; gap:10px; }.button-icon { color:rgb(var(--rooms-rgb-93b5ff,147,181,255)); }.compact { padding:9px 12px; font-size:10px; border-radius:12px; }
.danger { color:#ffeef0; background:rgba(126,43,55,.58); border:1px solid rgba(255,125,139,.27); }.danger:hover:not(:disabled) { background:rgba(161,49,65,.72); border-color:rgba(255,125,139,.46); }

.room { min-height:calc(100vh - 126px); display:flex; flex-direction:column; gap:12px; padding-bottom:92px; }
.room-head { min-height:82px; padding:13px 16px 13px 20px; border-radius:22px; display:flex; align-items:center; justify-content:space-between; gap:18px; box-shadow:0 16px 48px rgba(0,0,0,.22); }.room-title-group { min-width:0; }.room-title-group .eyebrow { font-size:9px; color:rgb(var(--rooms-rgb-8999ae,137,153,174)); }.room-title-group h2 { font-size:21px; }.room-summary { color:rgb(var(--rooms-rgb-718198,113,129,152)); font-size:10px; }.room-head-actions { display:flex; align-items:center; gap:9px; }
.room-shell { display:grid; grid-template-columns:minmax(0,1fr) 286px; gap:12px; flex:1; min-height:0; transition:grid-template-columns .25s ease; }.room.panel-closed .room-shell { grid-template-columns:minmax(0,1fr); }.room.panel-closed .participant-panel { display:none; }
.room-main { display:flex; flex-direction:column; min-width:0; min-height:0; position:relative; }
.video-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); grid-auto-rows:minmax(230px,1fr); gap:10px; flex:1; min-height:520px; align-content:stretch; transition:.25s ease; }
.video-grid.focus-mode { display:flex; flex-wrap:wrap; align-content:stretch; gap:10px; }
.video-grid.focus-mode .participant-tile { flex:0 0 172px; height:108px; min-height:108px; }
.video-grid.focus-mode .participant-tile.is-focused { order:-1; flex:1 0 100%; height:auto; min-height:min(66vh,700px); }
.participant-tile { position:relative; isolation:isolate; overflow:hidden; min-height:230px; display:grid; place-items:center; border:1px solid var(--line); border-radius:22px; background:linear-gradient(145deg,rgb(var(--rooms-rgb-08111d,8,17,29)),rgb(var(--rooms-rgb-02060b,2,6,11))); box-shadow:0 16px 44px rgba(0,0,0,.20); transition:border-color .18s,box-shadow .18s,transform .18s,opacity .18s; cursor:pointer; }
.participant-tile::after { content:none; }
.participant-tile:hover { border-color:rgba(var(--rooms-rgb-87aaec,135,170,236),0.27); }.participant-tile.active-speaker { border-color:rgba(100,230,172,.78); box-shadow:0 0 0 2px rgba(100,230,172,.13),0 20px 54px rgba(0,0,0,.30),0 0 34px rgba(100,230,172,.06); }
.participant-tile video { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; z-index:1; background:rgb(var(--rooms-rgb-02060b,2,6,11)); }.participant-tile.local video { transform:scaleX(-1); }
.participant-empty { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:10px; color:rgb(var(--rooms-rgb-67778d,103,119,141)); font-size:11px; }.participant-empty-avatar { width:72px; height:72px; display:grid; place-items:center; border-radius:24px; color:rgb(var(--rooms-rgb-a8c4ff,168,196,255)); font-size:24px; font-weight:800; background:linear-gradient(145deg,rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.16),rgba(var(--rooms-rgb-4e68c4,78,104,196),0.05)); border:1px solid rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.18); box-shadow:0 18px 45px rgba(var(--rooms-rgb-2348aa,35,72,170),0.12); }
.participant-meta { position:absolute; left:12px; bottom:11px; z-index:4; display:flex; align-items:center; gap:8px; max-width:calc(100% - 96px); }.participant-name { min-width:0; max-width:100%; padding:7px 10px; border-radius:10px; color:rgb(var(--rooms-rgb-f3f7fd,243,247,253)); background:rgba(var(--rooms-rgb-03080f,3,8,15),0.58); border:1px solid rgba(255,255,255,.08); backdrop-filter:blur(12px); font-size:11px; font-weight:730; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.participant-role { color:rgb(var(--rooms-rgb-91a0b5,145,160,181)); margin-left:6px; font-size:8px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.media-state { display:flex; align-items:center; gap:4px; }.media-state span { width:27px; height:27px; display:grid; place-items:center; border-radius:9px; border:1px solid rgba(255,255,255,.08); background:rgba(var(--rooms-rgb-03080f,3,8,15),0.58); backdrop-filter:blur(12px); font-size:11px; }.media-state span.off { color:#ff9aa4; background:rgba(74,18,27,.48); }
.tile-focus-btn { position:absolute; right:9px; top:9px; z-index:6; width:34px; height:34px; padding:0; display:grid; place-items:center; border-radius:11px; color:rgb(var(--rooms-rgb-dbe7f8,219,231,248)); background:rgba(var(--rooms-rgb-050a12,5,10,18),0.52); border:1px solid rgba(255,255,255,.10); backdrop-filter:blur(12px); font-size:14px; opacity:.55; }.participant-tile:hover .tile-focus-btn,.participant-tile.is-focused .tile-focus-btn { opacity:1; }
.tile-actions { position:absolute; right:9px; top:50px; z-index:6; display:flex; flex-direction:column; gap:6px; }.tile-action { width:34px; height:34px; padding:0; display:grid; place-items:center; border-radius:11px; background:rgba(var(--rooms-rgb-050a12,5,10,18),0.62); border:1px solid rgba(255,255,255,.10); color:rgb(var(--rooms-rgb-dce7f7,220,231,247)); backdrop-filter:blur(12px); font-size:12px; }.tile-action.remove { color:#ff9fa9; border-color:rgba(255,127,139,.26); }.tile-action:disabled { opacity:.3; }
.video-grid.focus-mode .participant-tile:not(.is-focused) .participant-role,.video-grid.focus-mode .participant-tile:not(.is-focused) .media-state { display:none; }.video-grid.focus-mode .participant-tile:not(.is-focused) .participant-name { padding:5px 7px; font-size:9px; }.video-grid.focus-mode .participant-tile:not(.is-focused) .participant-meta { left:7px; bottom:7px; }.video-grid.focus-mode .participant-tile:not(.is-focused) .tile-actions { display:none; }.video-grid.focus-mode .participant-tile:not(.is-focused) .tile-focus-btn { width:28px; height:28px; right:6px; top:6px; border-radius:8px; font-size:11px; }
.room-message { align-self:center; min-height:26px; margin:8px 0 0; padding:6px 11px; border:1px solid transparent; border-radius:999px; color:rgb(var(--rooms-rgb-8697ad,134,151,173)); background:rgba(var(--rooms-rgb-080d15,8,13,21),0.34); font-size:10px; text-align:center; }
.participant-panel { min-height:0; padding:12px; border-radius:22px; overflow:auto; box-shadow:0 16px 48px rgba(0,0,0,.20); }.participant-panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:5px 5px 12px; }.participant-panel-head>div { display:flex; flex-direction:column; gap:3px; }.participant-panel-head b { font-size:12px; }.participant-panel-head small { color:rgb(var(--rooms-rgb-66758a,102,117,138)); font-size:8px; line-height:1.4; }
.participant-list { display:flex; flex-direction:column; gap:7px; }.participant-row { display:grid; grid-template-columns:9px minmax(0,1fr) auto; align-items:center; gap:8px; padding:10px; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.025); cursor:pointer; transition:background .18s,border-color .18s,transform .18s; }.participant-row:hover { transform:translateX(-1px); background:rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.055); border-color:rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.18); }.participant-row.is-focused { background:rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.09); border-color:rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.26); }.presence-dot { width:7px; height:7px; border-radius:50%; background:var(--green); }.presence-dot.speaking { box-shadow:0 0 0 4px rgba(100,230,172,.10),0 0 16px rgba(100,230,172,.25); }.participant-row-main { min-width:0; }.participant-row-name { font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.participant-row-role { margin-top:2px; color:rgb(var(--rooms-rgb-718198,113,129,152)); font-size:8px; text-transform:uppercase; letter-spacing:.05em; }.speaking-mark { color:var(--green); font-size:8px; font-weight:750; }

.toolbar-wrap { position:fixed; z-index:55; left:50%; bottom:max(14px,env(safe-area-inset-bottom)); transform:translateX(-50%); pointer-events:none; width:min(calc(100% - 24px),900px); display:flex; justify-content:center; }.toolbar { pointer-events:auto; display:flex; align-items:center; justify-content:center; gap:6px; padding:7px; border-radius:20px; background:rgba(var(--rooms-rgb-080d15,8,13,21),0.84); box-shadow:0 18px 54px rgba(0,0,0,.38); }.tool,.danger { min-height:45px; padding:0 13px; display:flex; align-items:center; justify-content:center; gap:7px; border-radius:13px; font-size:10px; }.tool.active { color:rgb(var(--rooms-rgb-eaf1ff,234,241,255)); border-color:rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.34); background:rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.1); }.tool.off { color:#ffb1b9; border-color:rgba(255,127,139,.22); background:rgba(126,43,55,.28); }.tool-icon { font-size:14px; line-height:1; }.tool-label { white-space:nowrap; }.toolbar-separator { width:1px; height:24px; margin:0 2px; background:var(--line); }
.mic-control { display:flex; align-items:center; gap:5px; }.mic-level-meter { position:relative; flex:0 0 6px; width:6px; height:30px; overflow:hidden; border-radius:999px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.055); opacity:.36; transition:opacity .18s,border-color .18s,box-shadow .18s; }.mic-level-meter i { position:absolute; left:0; right:0; bottom:0; height:0; border-radius:999px; background:linear-gradient(180deg,#9cf5c8,#64e6ac 70%,#39c98d); box-shadow:0 0 12px rgba(100,230,172,.26); }.mic-level-meter.active { opacity:1; border-color:rgba(100,230,172,.30); box-shadow:0 0 14px rgba(100,230,172,.08); }.mic-level-meter.unsupported { opacity:.18; }
.room:fullscreen { width:100%; max-width:none; height:100vh; background:var(--bg); padding:16px 16px 96px; }.room:fullscreen .room-head { margin-top:0; }.room:fullscreen .room-shell { height:calc(100vh - 128px); max-height:none; min-height:0; resize:none; }

.error-card { max-width:720px; margin:10vh auto 0; }.error-card h1 { margin-top:12px; }.error-card .secondary { margin-top:10px; }

@media(max-width:1100px) {
  .home-stage { padding-inline:12px; }
  .prejoin-grid { grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr); }
  .room-shell { grid-template-columns:minmax(0,1fr) 240px; }.participant-panel-head small { display:none; }
  .video-grid { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
}
@media(max-width:820px) {
  .topbar { top:10px; margin-top:10px; width:calc(100% - 20px); height:60px; padding-left:14px; border-radius:18px; }.brand-copy small { display:none; }.brand-copy strong { font-size:12px; }.topbar-meta { gap:6px; }.account-button { min-height:38px; padding-inline:16px; }
  main { width:calc(100% - 20px); margin-top:20px; }.card { border-radius:24px; }.home-stage { min-height:calc(100vh - 100px); padding:24px 0 54px; }.home-launcher { grid-template-columns:1fr; max-width:540px; }.launch-card { min-height:230px; border-radius:24px; gap:20px; }.launch-card-secondary { min-height:170px; }.room-symbol { width:92px; height:92px; }.join-symbol { width:62px; height:62px; }.home-owned-rooms,.home-message { max-width:540px; }.my-rooms { border-radius:20px; }
  .prejoin-heading { align-items:flex-start; flex-direction:column; }.policy-line { max-width:100%; justify-content:flex-start; }.prejoin-grid { grid-template-columns:1fr; }.preview-wrap { min-height:46vh; }.controls-panel { border-radius:20px; }
  .room { min-height:calc(100vh - 92px); padding-bottom:82px; }.room-head { min-height:72px; border-radius:18px; padding:11px 12px 11px 15px; }.room-title-group .eyebrow { display:none; }.room-title-group h2 { font-size:18px; }.room-summary { font-size:9px; }.room-head-actions .compact { display: inline-flex; }
  .room-shell,.room.panel-closed .room-shell { grid-template-columns:1fr; }.video-grid { grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); grid-auto-rows:minmax(180px,1fr); min-height:calc(100vh - 240px); }.video-grid.focus-mode .participant-tile.is-focused { min-height:calc(100vh - 320px); }.video-grid.focus-mode .participant-tile { flex-basis:116px; height:78px; min-height:78px; }
  .participant-panel { position:fixed; z-index:70; left:10px; right:10px; top:80px; bottom:88px; border-radius:20px; background:rgba(var(--rooms-rgb-080d15,8,13,21),0.96); backdrop-filter:blur(24px); box-shadow:0 30px 90px rgba(0,0,0,.58); }.room.panel-closed .participant-panel { display:none; }
  .participant-panel-head small { display:block; }.participant-row { padding:12px; }
  .toolbar-wrap { width:calc(100% - 16px); bottom:max(8px,env(safe-area-inset-bottom)); }.toolbar { width:100%; justify-content:space-between; padding:6px; border-radius:18px; }.mic-control { flex:1; min-width:0; }.mic-control .tool { flex:1; min-width:0; }.mic-level-meter { flex-basis:5px; width:5px; height:27px; }.tool,.danger { flex:1; min-width:0; padding:0 8px; }.tool-label { display:none; }.tool-icon { font-size:16px; }.toolbar-separator { margin:0; }
}

/* v0.15.0 persistent-room workspace */
.icon-sprite { position:absolute; width:0; height:0; overflow:hidden; }
.icon-button svg,.tool svg,.leave-tool svg,.brand-mark svg,.chat-send svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible { outline:3px solid rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.48); outline-offset:2px; }
.topbar { backdrop-filter:none; background:rgb(var(--rooms-rgb-09111d,9,17,29)); }
.account-button { min-width:130px; font-size:11px; }
.home-launcher .launch-symbol { width:92px; height:92px; }
.home-launcher .launch-symbol svg { stroke-width:1.7; }
.my-rooms-head p { margin:5px 0 0; color:rgb(var(--rooms-rgb-90a0b7,144,160,183)); font-size:11px; }
.my-room-row { padding:15px; }
.my-room-copy b { font-size:13px; }
.my-room-copy small { color:rgb(var(--rooms-rgb-91a0b5,145,160,181)); font-size:10px; }
.room-slug { color:rgb(var(--rooms-rgb-a9c2f4,169,194,244)); font-size:10px; }
.room-pending-label { color:#ffd78a; font-weight:750; }
.my-room-actions { flex-wrap:wrap; justify-content:flex-end; }
.my-room-actions .room-delete { color:#ffc1c7; border-color:rgba(255,127,139,.28); }
.create-room-card { width:min(620px,calc(100vw - 28px)); background:rgb(var(--rooms-rgb-0c1522,12,21,34)); border:1px solid var(--line); }
.product-field>span small { color:rgb(var(--rooms-rgb-91a0b5,145,160,181)); font-size:9px; font-weight:600; letter-spacing:0; text-transform:none; }
.slug-field { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; border:1px solid var(--line-strong); border-radius:13px; background:rgba(var(--rooms-rgb-02070d,2,7,13),0.52); overflow:hidden; }
.slug-field>span { padding:0 0 0 13px; color:rgb(var(--rooms-rgb-91a0b5,145,160,181)); font-size:12px; }
.slug-field input { border:0; background:transparent; }
.access-fieldset { border:0; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.access-fieldset legend { grid-column:1/-1; margin-bottom:6px; color:rgb(var(--rooms-rgb-aab9cc,170,185,204)); font-size:10px; font-weight:760; }
.access-fieldset label { cursor:pointer; }
.access-fieldset input { position:absolute; opacity:0; pointer-events:none; }
.access-fieldset label>span { min-height:72px; display:flex; flex-direction:column; justify-content:center; gap:4px; padding:13px; border:1px solid var(--line); border-radius:14px; background:rgb(var(--rooms-rgb-0a121e,10,18,30)); }
.access-fieldset b { font-size:12px; }.access-fieldset small { color:rgb(var(--rooms-rgb-91a0b5,145,160,181)); font-size:10px; }
.access-fieldset input:checked+span { border-color:rgb(var(--rooms-rgb-678fe8,103,143,232)); background:rgb(var(--rooms-rgb-111f35,17,31,53)); }
.guest-join-card { width:min(520px,calc(100% - 20px)); margin:8vh auto 0; }
.guest-join-card h1 { font-size:clamp(34px,6vw,52px); letter-spacing:-.03em; }
.guest-join-card form { display:flex; flex-direction:column; gap:12px; }
.home-link { display:inline-flex; align-items:center; justify-content:center; margin-top:12px; text-decoration:none; }

.room-head { border:1px solid var(--line); background:rgb(var(--rooms-rgb-0b1421,11,20,33)); box-shadow:0 14px 38px rgba(0,0,0,.24); }
.room-shell { grid-template-columns:minmax(0,1fr) minmax(300px,340px); }
.participant-panel { display:grid; grid-template-rows:auto minmax(120px,40fr) 9px minmax(180px,60fr); padding:0; overflow:hidden; border:1px solid var(--line); background:rgb(var(--rooms-rgb-0a131f,10,19,31)); box-shadow:0 16px 48px rgba(0,0,0,.24); resize:none; }
.panel-topbar { min-height:49px; padding:7px; display:flex; align-items:center; justify-content:space-between; gap:8px; border-bottom:1px solid var(--line); background:rgb(var(--rooms-rgb-0d1725,13,23,37)); }
.panel-tabs { min-width:0; display:flex; gap:4px; }
.panel-tab { min-height:34px; padding:0 9px; border-radius:9px; border:1px solid transparent; color:rgb(var(--rooms-rgb-b4c0d1,180,192,209)); background:transparent; font-size:10px; }
.panel-tab.active { color:rgb(var(--rooms-rgb-f2f6fc,242,246,252)); border-color:rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.32); background:rgb(var(--rooms-rgb-172641,23,38,65)); }
.panel-actions { display:flex; gap:4px; }.panel-actions .icon-button { min-width:34px; min-height:34px; }
.pending-count,.tool-badge { display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; border-radius:999px; color:#281900; background:#ffd166; font-size:9px; font-weight:850; }
.participants-pane { padding:10px 11px; }
.admission-block { margin:0 0 10px; padding:10px; border:1px solid rgba(241,203,118,.28); border-radius:13px; background:#201a0e; }
.admission-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; color:#ffe3a7; font-size:11px; }
.admission-list { display:flex; flex-direction:column; gap:7px; }
.admission-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:6px; }
.admission-row span { overflow:hidden; text-overflow:ellipsis; color:#f0e6d2; font-size:10px; }
.admission-row button { min-height:31px; padding:0 8px; border-radius:8px; font-size:9px; }
.admission-row .admit { color:#bff5da; background:#123326; border:1px solid rgba(100,230,172,.24); }
.admission-row .deny { color:#ffc3c9; background:#35151b; border:1px solid rgba(255,127,139,.24); }
.participant-row { grid-template-columns:9px minmax(0,1fr) auto; }
.participant-row-controls { min-width:max-content; display:flex; align-items:center; flex-wrap:nowrap; gap:6px; margin-left:auto; }
.participant-row-actions { display:flex; align-items:center; flex-wrap:nowrap; gap:5px; }
.participant-row-divider { flex:0 0 1px; width:1px; height:23px; margin:0 2px 0 1px; background:var(--line); opacity:1; }
.participant-row-status { display:flex; align-items:center; flex-wrap:nowrap; gap:6px; color:rgb(var(--rooms-rgb-aebbd0,174,187,208)); }
.participant-row-status .participant-status-indicator { width:23px; min-width:23px; height:23px; display:grid; place-items:center; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; cursor:default; }
.participant-row-status .participant-status-indicator.off { color:#ffabb4; background:transparent; }
.hand-mark { color:#ffd166; font-weight:850; }.participant-row.raised-hand { border-color:rgba(241,203,118,.45); background:#19170f; }
.participant-tile.raised-hand { border-color:rgba(241,203,118,.65); box-shadow:0 0 0 2px rgba(241,203,118,.12),0 18px 48px rgba(0,0,0,.3); }
.tile-hand-badge { position:absolute; z-index:6; right:48px; top:10px; min-width:34px; height:34px; display:grid; place-items:center; border-radius:11px; color:#2b1d00; background:#ffd166; font-size:16px; box-shadow:0 8px 20px rgba(0,0,0,.28); }
.tile-hand-badge svg,.tile-action svg,.media-state svg,.participant-row-status svg,.tile-focus-btn svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.participant-panel.panel-mode-participants { grid-template-rows:auto minmax(0,1fr); }
.participant-panel.panel-mode-participants .chat-resizer,.participant-panel.panel-mode-participants .chat-panel { display:none; }
.participant-panel.panel-mode-chat { grid-template-rows:auto minmax(0,1fr); }
.participant-panel.panel-mode-chat .participants-pane,.participant-panel.panel-mode-chat .chat-resizer { display:none; }
.participant-panel.detached { position:fixed!important; z-index:82; left:auto; right:24px; top:104px; bottom:auto; width:360px; height:min(720px,calc(100vh - 130px)); min-width:300px; min-height:360px; max-width:80vw; max-height:82vh; resize:both; }
.participant-panel.detached .panel-topbar { cursor:move; }
.room.panel-detached .room-shell { grid-template-columns:minmax(0,1fr); }
.room.panel-detached .room-main { grid-column:1; }
.chat-send svg { width:18px; height:18px; }

.settings-card { width:min(560px,calc(100vw - 28px)); background:rgb(var(--rooms-rgb-0b1421,11,20,33)); border:1px solid var(--line); backdrop-filter:none; }
.settings-section { display:flex; flex-direction:column; gap:9px; padding:12px 0 4px; border-top:1px solid var(--line); }
.settings-section h3 { margin:0 0 3px; font-size:12px; letter-spacing:.01em; }
.microphone-route-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border:1px solid var(--line); border-radius:11px; background:rgba(255,255,255,.018); }
.microphone-route-status { min-width:0; color:var(--muted); font-size:9px; line-height:1.4; }
.microphone-route-row .compact { flex:0 0 auto; min-height:32px; padding-inline:10px; }
.inline-field { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.inline-field button { min-width:105px; }
.switch-inline { display:flex; align-items:center; gap:7px; color:rgb(var(--rooms-rgb-c4cede,196,206,222)); font-size:11px; }
.room.hide-participant-names .participant-name,.room.hide-participant-names .participant-row-name { display:none; }
.room.hide-media-states .media-state,.room.hide-media-states .participant-row-status { display:none; }
.room.video-contain .participant-tile video { object-fit:contain; }

.toolbar-wrap { align-items:center; gap:12px; width:auto; max-width:calc(100% - 24px); }
.toolbar { border:1px solid var(--line); background:rgb(var(--rooms-rgb-09121e,9,18,30)); backdrop-filter:none; box-shadow:0 18px 54px rgba(0,0,0,.42); }
.tool { position:relative; width:46px; min-width:46px; height:46px; min-height:46px; padding:0; overflow:hidden; }
.tool svg { position:relative; z-index:2; width:20px; height:20px; }
.tool-level-fill { position:absolute; z-index:1; left:0; right:0; bottom:0; height:0; background:linear-gradient(180deg,rgba(100,230,172,.45),rgba(35,180,119,.74)); }
.media-tool.level-0 .tool-level-fill { height:0; }.media-tool.level-1 .tool-level-fill { height:10%; }.media-tool.level-2 .tool-level-fill { height:20%; }.media-tool.level-3 .tool-level-fill { height:30%; }.media-tool.level-4 .tool-level-fill { height:40%; }.media-tool.level-5 .tool-level-fill { height:50%; }.media-tool.level-6 .tool-level-fill { height:60%; }.media-tool.level-7 .tool-level-fill { height:70%; }.media-tool.level-8 .tool-level-fill { height:80%; }.media-tool.level-9 .tool-level-fill { height:90%; }.media-tool.level-10 .tool-level-fill { height:100%; }
.leave-tool { pointer-events:auto; width:48px; height:48px; padding:0; display:grid; place-items:center; border-radius:14px; color:#fff; background:#c73545; border:1px solid #e25b68; box-shadow:0 14px 34px rgba(139,27,43,.35); }
.leave-tool:hover { background:#df4052; transform:translateY(-1px); }
.leave-tool svg { width:22px; height:22px; }
.tool.hand-raised { color:#2d1f00; background:#ffd166; border-color:#ffe09a; }
.tool.screen-sharing { color:#c8f7df; background:#174a36; border-color:#2c7658; }
.tool-badge { position:absolute; right:1px; top:1px; z-index:3; min-width:16px; height:16px; padding:0 4px; font-size:8px; }
.toolbar-button-hidden { display:none!important; }

.workspace-modal,.confirm-modal { position:fixed; z-index:96; inset:0; display:grid; place-items:center; padding:18px; background:rgba(var(--rooms-rgb-02060c,2,6,12),0.78); }
.workspace-head { min-height:52px; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:12px 14px; border-bottom:1px solid var(--line); }
.workspace-head>div { display:flex; flex-direction:column; gap:3px; }.workspace-head b { font-size:16px; }.workspace-head small { color:rgb(var(--rooms-rgb-94a4ba,148,164,186)); font-size:10px; }
.whiteboard-shell { width:min(1180px,calc(100vw - 30px)); height:min(820px,calc(100vh - 30px)); display:grid; grid-template-rows:auto auto minmax(0,1fr); overflow:hidden; border:1px solid var(--line); border-radius:16px; background:rgb(var(--rooms-rgb-0a131f,10,19,31)); box-shadow:0 30px 100px rgba(0,0,0,.62); }
.board-toolbar { min-height:54px; display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:8px 12px; border-bottom:1px solid var(--line); background:rgb(var(--rooms-rgb-0d1725,13,23,37)); }
.board-toolbar .icon-button { min-width:34px; min-height:34px; }.board-toolbar .secondary,.board-toolbar .danger-text,.board-tool { min-height:34px; padding:0 10px; border-radius:9px; font-size:10px; }
.board-tool { color:rgb(var(--rooms-rgb-b9c7da,185,199,218)); border:1px solid var(--line); background:rgba(255,255,255,.025); }.board-tool.active { color:rgb(var(--rooms-rgb-edf4ff,237,244,255)); border-color:rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.5); background:rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.14); }
.board-divider { width:1px; height:28px; background:var(--line); }.board-color { width:28px; height:28px; padding:0; border-radius:8px; border:2px solid transparent; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); }.board-color.active { border-color:#fff; }.color-ink { background:#e8eef8; }.color-black { background:#000000; box-shadow:inset 0 0 0 1px rgba(255,255,255,.42); }.color-blue { background:#58a6ff; }.color-yellow { background:#ffd166; }.color-red { background:#ff6b6b; }
.board-text-formatting { display:flex; gap:4px; padding-left:2px; }.board-text-formatting button { width:30px; height:30px; padding:0; border-radius:8px; color:rgb(var(--rooms-rgb-aebbd0,174,187,208)); border:1px solid var(--line); background:rgba(255,255,255,.02); }.board-text-formatting button.active { color:#fff; border-color:rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.48); background:rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.13); }
.board-control { display:flex; align-items:center; gap:6px; color:rgb(var(--rooms-rgb-9dacbf,157,172,191)); font-size:10px; }.board-control select { width:110px; padding:7px 8px; border-radius:8px; }
.danger-text { color:#ffb4bc; background:#32141b; border:1px solid rgba(255,127,139,.25); }
.board-canvas-wrap { min-height:0; overflow:auto; padding:14px; background:#050a10; }
.board-stage { position:relative; width:100%; min-width:760px; aspect-ratio:16/9; min-height:100%; }
#boardCanvas { position:absolute; inset:0; display:block; width:100%; height:100%; touch-action:none; border-radius:10px; background:rgb(var(--rooms-rgb-101722,16,23,34)); box-shadow:0 12px 36px rgba(0,0,0,.32); cursor:crosshair; }
#boardCanvas.board-mode-erase { cursor:cell; } #boardCanvas.board-mode-text { cursor:text; }
.board-text-layer { position:absolute; inset:0; pointer-events:none; }
.board-text-box { position:absolute; min-width:120px; min-height:58px; max-width:90%; max-height:80%; resize:both; overflow:auto; pointer-events:auto; border:1px dashed rgba(124,166,255,.48); border-radius:8px; background:rgba(8,14,24,.74); box-shadow:0 8px 24px rgba(0,0,0,.24); }
.board-text-box.selected { border-style:solid; box-shadow:0 0 0 2px rgba(124,166,255,.18),0 8px 24px rgba(0,0,0,.24); }
.board-text-box textarea { width:100%; height:100%; min-height:56px; padding:9px 10px; resize:none; overflow:auto; border:0; outline:0; color:inherit; background:transparent; font:500 16px/1.38 Inter,Segoe UI,sans-serif; }
.board-text-box.text-bold textarea { font-weight:800; }.board-text-box.text-italic textarea { font-style:italic; }.board-text-box.text-heading textarea { font-size:25px; line-height:1.2; font-weight:800; }
#boardCanvas.background-grid { background-color:#f7f9fc; background-image:linear-gradient(rgb(var(--rooms-rgb-d9e0ea,217,224,234)) 1px,transparent 1px),linear-gradient(90deg,rgb(var(--rooms-rgb-d9e0ea,217,224,234)) 1px,transparent 1px); background-size:32px 32px; }
#boardCanvas.background-plain { background:#f7f9fc; }.whiteboard-shell.board-dark #boardCanvas { background:rgb(var(--rooms-rgb-101722,16,23,34)); }
.breakouts-card { width:min(620px,calc(100vw - 28px)); max-height:calc(100vh - 32px); overflow:auto; border:1px solid var(--line); border-radius:16px; padding:0 16px 16px; background:rgb(var(--rooms-rgb-0a131f,10,19,31)); box-shadow:0 30px 100px rgba(0,0,0,.62); }
.breakouts-card .workspace-head { margin:0 -16px 14px; }.breakout-participants { display:flex; flex-direction:column; gap:7px; margin:12px 0; }
.breakout-select-row { display:flex; align-items:center; gap:9px; padding:10px; border:1px solid var(--line); border-radius:11px; color:rgb(var(--rooms-rgb-dce5f2,220,229,242)); font-size:11px; }
.breakout-actions { display:flex; gap:8px; }.breakout-actions button { flex:1; }
.confirm-card { width:min(480px,calc(100vw - 28px)); padding:25px; border:1px solid var(--line); border-radius:16px; background:rgb(var(--rooms-rgb-0d1622,13,22,34)); box-shadow:0 26px 80px rgba(0,0,0,.6); }
.confirm-card h2 { margin:0 0 22px; font-size:22px; line-height:1.3; }.confirm-actions { display:flex; justify-content:flex-end; gap:9px; }.danger-button { color:#fff; background:#c73545; border:1px solid #e25b68; }
.transfer-notice { position:fixed; z-index:110; left:50%; top:24px; transform:translateX(-50%); min-width:min(520px,calc(100vw - 24px)); display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:12px; padding:13px 15px; border:1px solid rgba(241,203,118,.38); border-radius:14px; color:#ffedc0; background:#201a0e; box-shadow:0 18px 55px rgba(0,0,0,.48); }
#transferCountdown { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; color:#2a1c00; background:#ffd166; font-weight:900; }
.transfer-arrival-card p { margin:-8px 0 22px; color:rgb(var(--rooms-rgb-a9b8ca,169,184,202)); line-height:1.55; }.breakout-message-important { margin-top:14px; padding:13px 14px; border:1px solid rgba(241,203,118,.36); border-radius:12px; color:#ffedc0; background:rgba(80,59,12,.36); font-weight:760; }
.error-actions { display:flex; gap:9px; }.error-actions .home-link { margin-top:10px; }

@media(max-width:820px) {
  .participant-panel { grid-template-rows:auto minmax(120px,40fr) 9px minmax(180px,60fr); }
  .participant-panel.detached { left:10px!important; right:10px!important; top:80px!important; bottom:88px!important; width:auto!important; height:auto!important; max-width:none; max-height:none; resize:none; }
  .panel-tab { padding-inline:7px; }.panel-tab:first-child { display:none; }
  .toolbar-wrap { gap:7px; max-width:calc(100% - 12px); }.toolbar { overflow-x:auto; justify-content:flex-start; }.tool { flex:0 0 43px; width:43px; min-width:43px; height:43px; min-height:43px; }.leave-tool { flex:0 0 45px; width:45px; height:45px; }
  .whiteboard-shell { width:100%; height:100%; border-radius:12px; }.board-toolbar { align-content:flex-start; overflow:auto; }.board-control { display:none; }
  .access-fieldset { grid-template-columns:1fr; }.inline-field { grid-template-columns:1fr; }.breakout-actions { flex-direction:column; }
}
@media(max-width:520px) {
  .my-rooms-head { align-items:flex-start; }.my-room-actions { justify-content:stretch; }.my-room-actions button { flex:1 1 44%; }
  .panel-topbar { gap:4px; }.panel-actions #panelDetachBtn { display:none; }.panel-tab { font-size:9px; }
  .toolbar-separator { display:none; }.toolbar { gap:4px; }.tool { flex-basis:40px; width:40px; min-width:40px; }
  .confirm-actions { flex-direction:column; }.confirm-actions button { width:100%; }.transfer-notice { grid-template-columns:minmax(0,1fr) auto; }.transfer-notice button { grid-column:1/-1; }
}
@media(max-width:520px) {
  .badge { padding:6px 8px; font-size:9px; }.card { padding:20px 16px; }.prejoin-heading h1 { font-size:36px; }.home-stage { justify-content:flex-start; padding-top:34px; }.home-launcher { gap:12px; }.launch-card { min-height:210px; border-radius:22px; }.launch-card-secondary { min-height:146px; flex-direction:row; gap:18px; }.launch-title { font-size:16px; }.launch-title small { display:block; margin-top:3px; }.room-symbol { width:82px; height:82px; }.join-symbol { width:50px; height:50px; }.my-room-row { grid-template-columns:1fr; }.my-room-actions button { flex:1; }.my-room-actions { width:100%; }.format-fieldset,.created-actions { grid-template-columns:1fr; }.product-modal { padding:8px; }.product-modal-card { width:100%; max-height:calc(100vh - 16px); padding:19px; border-radius:22px; }
  .preview-wrap { min-height:38vh; border-radius:20px; }.panel-title small { display:none; }
  .room-head-actions { gap:5px; }.room-head-actions .badge { max-width:92px; overflow:hidden; }.video-grid { grid-template-columns:1fr; grid-auto-rows:minmax(210px,1fr); gap:8px; }.video-grid:not(.focus-mode) .participant-tile { min-height:240px; }.video-grid.focus-mode .participant-tile.is-focused { min-height:calc(100vh - 300px); }.participant-tile { border-radius:17px; }.participant-name { max-width:150px; }.media-state { display:none; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }

.auth-complete-page { display:grid; place-items:center; padding:20px; }
.auth-complete-card { width:min(520px,calc(100vw - 28px)); text-align:center; }
.auth-complete-card h1 { margin-top:18px; font-size:clamp(34px,7vw,50px); }

.mic-level-meter.level-0 i { height:0; }
.mic-level-meter.level-1 i { height:10%; }
.mic-level-meter.level-2 i { height:20%; }
.mic-level-meter.level-3 i { height:30%; }
.mic-level-meter.level-4 i { height:40%; }
.mic-level-meter.level-5 i { height:50%; }
.mic-level-meter.level-6 i { height:60%; }
.mic-level-meter.level-7 i { height:70%; }
.mic-level-meter.level-8 i { height:80%; }
.mic-level-meter.level-9 i { height:90%; }
.mic-level-meter.level-10 i { height:100%; }


/* v0.12.52 owner UX corrective: prejoin device discovery/test, in-room settings and ephemeral room chat */
.device-check-help { margin:-4px 2px 0; color:rgb(var(--rooms-rgb-74839a,116,131,154)); font-size:9px; line-height:1.5; }
.meter-caption { display:flex; align-items:center; justify-content:space-between; gap:10px; color:rgb(var(--rooms-rgb-98a7ba,152,167,186)); font-size:10px; font-weight:750; letter-spacing:.04em; text-transform:uppercase; }
.meter-caption small { color:rgb(var(--rooms-rgb-6f7d90,111,125,144)); font-size:8px; font-weight:600; letter-spacing:0; text-transform:none; text-align:right; }
.prejoin-mic-test,.settings-meter { display:flex; flex-direction:column; gap:8px; padding:11px 12px; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.025); }
.audio-level-bar { position:relative; display:block; width:100%; height:8px; overflow:hidden; border-radius:999px; border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.055); opacity:.48; transition:opacity .18s,border-color .18s,box-shadow .18s; }
.audio-level-bar i { position:absolute; left:0; top:0; bottom:0; width:0; border-radius:999px; background:linear-gradient(90deg,#39c98d,#64e6ac 70%,#a7f6d0); box-shadow:0 0 14px rgba(100,230,172,.24); }
.audio-level-bar.active { opacity:1; border-color:rgba(100,230,172,.32); box-shadow:0 0 16px rgba(100,230,172,.08); }
.audio-level-bar.unsupported { opacity:.2; }
.audio-level-bar.level-0 i { width:0; }.audio-level-bar.level-1 i { width:10%; }.audio-level-bar.level-2 i { width:20%; }.audio-level-bar.level-3 i { width:30%; }.audio-level-bar.level-4 i { width:40%; }.audio-level-bar.level-5 i { width:50%; }.audio-level-bar.level-6 i { width:60%; }.audio-level-bar.level-7 i { width:70%; }.audio-level-bar.level-8 i { width:80%; }.audio-level-bar.level-9 i { width:90%; }.audio-level-bar.level-10 i { width:100%; }

.room:not(.mirror-local) .participant-tile.local video { transform:none; }
.participant-tile.local video[data-buddy-local-meme-preview="true"] { transform:none!important; }

.participant-panel.chat-size-35 { grid-template-rows:auto minmax(110px,65fr) 9px minmax(160px,35fr); }
.participant-panel.chat-size-45 { grid-template-rows:auto minmax(110px,55fr) 9px minmax(170px,45fr); }
.participant-panel.chat-size-55 { grid-template-rows:auto minmax(110px,45fr) 9px minmax(180px,55fr); }
.participant-panel.chat-size-65 { grid-template-rows:auto minmax(110px,35fr) 9px minmax(190px,65fr); }
.participant-panel.chat-size-75 { grid-template-rows:auto minmax(90px,25fr) 9px minmax(210px,75fr); }
.participant-panel.chat-size-85 { grid-template-rows:auto minmax(76px,15fr) 9px minmax(240px,85fr); }
.participant-panel.panel-mode-participants { grid-template-rows:auto minmax(0,1fr); }
.participant-panel.panel-mode-chat { grid-template-rows:auto minmax(0,1fr); }

.participants-pane { min-height:0; overflow:auto; padding:12px 12px 8px; }
.chat-resizer { min-height:9px; cursor:ns-resize; display:grid; place-items:center; background:rgba(255,255,255,.012); border-top:1px solid rgba(var(--rooms-rgb-b4c9eb,180,201,235),0.08); border-bottom:1px solid rgba(var(--rooms-rgb-b4c9eb,180,201,235),0.08); outline:none; }
.chat-resizer span { width:42px; height:3px; border-radius:999px; background:rgba(var(--rooms-rgb-a7bcdf,167,188,223),0.22); transition:background .18s; }
.chat-resizer:hover span,.chat-resizer:focus span,.chat-resizer.dragging span { width:58px; background:rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.58); }
.chat-panel { min-height:0; display:grid; grid-template-rows:auto minmax(0,1fr) auto auto; gap:8px; padding:9px 12px 12px; background:rgba(var(--rooms-rgb-040910,4,9,16),0.2); }
.chat-head { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.chat-head>div { min-width:0; display:flex; flex-direction:column; gap:2px; }.chat-head b { font-size:12px; }.chat-head small { color:rgb(var(--rooms-rgb-66758a,102,117,138)); font-size:8px; line-height:1.35; }
.icon-button { min-width:32px; min-height:32px; padding:0; display:grid; place-items:center; border-radius:10px; color:rgb(var(--rooms-rgb-cbd8eb,203,216,235)); background:rgba(255,255,255,.035); border:1px solid var(--line); }
.icon-button:hover:not(:disabled) { background:rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.09); border-color:rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.26); }
.chat-messages { min-width:0; min-height:0; overflow-x:hidden; overflow-y:auto; display:flex; flex-direction:column; gap:8px; padding:3px 2px 5px; }
.chat-empty { margin:auto 8px; color:rgb(var(--rooms-rgb-607087,96,112,135)); font-size:9px; line-height:1.5; text-align:center; }
.chat-message { position:relative; min-width:0; max-width:92%; display:flex; flex-direction:column; gap:3px; align-self:flex-start; }
.chat-message.local { align-self:flex-end; align-items:flex-end; }
.chat-message-meta { display:flex; gap:6px; color:rgb(var(--rooms-rgb-6f8096,111,128,150)); font-size:8px; }.chat-message.local .chat-message-meta { justify-content:flex-end; }
.chat-bubble { box-sizing:border-box; min-width:0; max-width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:4px 12px 12px 12px; color:rgb(var(--rooms-rgb-dce6f5,220,230,245)); background:rgba(255,255,255,.035); font-size:10px; line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; }
.chat-message.local .chat-bubble { border-color:rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.22); border-radius:12px 4px 12px 12px; background:rgba(var(--rooms-rgb-5d84ee,93,132,238),0.12); }

.chat-message-menu-trigger { width:24px; height:24px; display:inline-grid; place-items:center; margin:-4px -4px -4px 1px; padding:0; border:0; border-radius:8px; background:transparent; color:rgb(var(--rooms-rgb-74869f,116,134,159)); font-size:17px; line-height:1; cursor:pointer; opacity:0; transition:opacity .14s ease,background .14s ease,color .14s ease; }
.chat-message:hover .chat-message-menu-trigger,.chat-message:focus-within .chat-message-menu-trigger,.chat-message-menu-trigger[aria-expanded="true"] { opacity:1; }
.chat-message-menu-trigger:hover,.chat-message-menu-trigger:focus-visible { color:#f5a04f; background:rgba(245,160,79,.10); outline:none; }
.chat-message-menu { position:absolute; z-index:95; top:23px; left:0; min-width:158px; display:grid; gap:3px; padding:5px; border:1px solid var(--line); border-radius:11px; background:rgb(var(--rooms-rgb-09121e,9,18,30)); box-shadow:0 14px 38px rgba(0,0,0,.46); }
.chat-message.local .chat-message-menu { left:auto; right:0; }
.chat-message-menu button { width:100%; min-height:34px; padding:0 9px; border:0; border-radius:8px; background:transparent; color:rgb(var(--rooms-rgb-c6d3e6,198,211,230)); text-align:left; font:inherit; font-size:10px; cursor:pointer; }
.chat-message-menu button:hover,.chat-message-menu button:focus-visible { color:#1e1609; background:#f5a04f; outline:none; }
.chat-message-menu button.danger { color:#ff9aa5; }
.chat-message-menu button.danger:hover,.chat-message-menu button.danger:focus-visible { color:#1e1609; background:#f5a04f; }
.chat-edited-label { margin-left:2px; opacity:.62; font-size:8px; font-style:normal; white-space:nowrap; }
.chat-edit-form { width:min(100%,420px); display:grid; gap:7px; }
.chat-edit-form textarea { width:100%; min-height:74px; max-height:180px; resize:vertical; padding:8px 9px; border:1px solid var(--line-strong); border-radius:9px; background:rgb(var(--rooms-rgb-0a111c,10,17,28)); color:rgb(var(--rooms-rgb-e7edf7,231,237,247)); font:inherit; font-size:10px; line-height:1.45; outline:none; }
.chat-edit-form textarea:focus { border-color:#f5a04f; box-shadow:0 0 0 3px rgba(245,160,79,.09); }
.chat-edit-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.chat-edit-actions button { min-height:34px; border-radius:9px; }
html[data-theme="light"] .chat-message-menu { background:#fffaf4; box-shadow:0 14px 34px rgba(var(--rooms-rgb-263548,38,53,72),0.18); }
html[data-theme="light"] .chat-message-menu button { color:rgb(var(--rooms-rgb-43546a,67,84,106)); }
html[data-theme="light"] .chat-edit-form textarea { background:#fff; color:rgb(var(--rooms-rgb-1d2c41,29,44,65)); }
@media (hover:none),(pointer:coarse){.chat-message-menu-trigger{opacity:1}}
.chat-form { display:grid; grid-template-columns:minmax(0,1fr) 38px; gap:7px; align-items:end; }
.chat-form textarea { width:100%; min-height:38px; max-height:92px; resize:vertical; border:1px solid var(--line-strong); border-radius:12px; background:rgb(var(--rooms-rgb-0a111c,10,17,28)); color:rgb(var(--rooms-rgb-e7edf7,231,237,247)); padding:9px 10px; outline:none; font:inherit; font-size:10px; line-height:1.4; }
.chat-form textarea:focus { border-color:rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.55); box-shadow:0 0 0 3px rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.08); }
.chat-send { min-width:38px; min-height:38px; padding:0; border-radius:12px; color:#fff; background:linear-gradient(135deg,rgb(var(--rooms-rgb-779fff,119,159,255)),rgb(var(--rooms-rgb-4f76ff,79,118,255))); }
.chat-status { min-height:12px; color:rgb(var(--rooms-rgb-77889e,119,136,158)); font-size:8px; line-height:1.4; }

.settings-modal { position:fixed; z-index:95; inset:0; display:grid; place-items:center; padding:20px; background:rgba(var(--rooms-rgb-02060c,2,6,12),0.68); backdrop-filter:blur(10px); }
.settings-card { width:min(460px,calc(100vw - 28px)); max-height:min(720px,calc(100vh - 40px)); overflow:auto; border-radius:22px; padding:18px; display:flex; flex-direction:column; gap:13px; box-shadow:0 34px 110px rgba(0,0,0,.60); }
.settings-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding-bottom:2px; }.settings-head>div { display:flex; flex-direction:column; gap:3px; }.settings-head b { font-size:15px; }.settings-head small { color:rgb(var(--rooms-rgb-718198,113,129,152)); font-size:9px; line-height:1.45; }
.settings-switch { border:1px solid var(--line); border-radius:13px; padding:10px 11px; background:rgba(255,255,255,.02); }
.settings-version { margin-top:2px; text-align:center; color:rgb(var(--rooms-rgb-66768c,102,118,140)); font-size:9px; line-height:1.4; user-select:text; }

@media(max-width:820px) {
  .participant-panel { grid-template-rows:auto minmax(110px,35fr) 9px minmax(210px,65fr); padding:0; }
  .participant-panel.panel-mode-participants,.participant-panel.panel-mode-chat { grid-template-rows:auto minmax(0,1fr); }
  .participants-pane { padding:12px; }
  .chat-panel { padding:10px 12px 12px; }
  .chat-head small { display:none; }
  .chat-form textarea { font-size:12px; }
  .settings-modal { padding:10px; }
  .settings-card { width:100%; max-height:calc(100vh - 20px); }
}

/* v0.15.4 room controls and workspace corrective */
.topbar-actions { display:flex; align-items:center; gap:8px; }
.theme-toggle { width:34px; min-width:34px; height:34px; min-height:34px; padding:0; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; color:rgb(var(--rooms-rgb-a9b9d0,169,185,208)); background:rgba(255,255,255,.035); }
.theme-toggle:hover:not(:disabled) { color:#f3cb73; border-color:rgba(241,203,118,.35); background:rgba(241,203,118,.08); }
.theme-toggle svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

.my-room-actions { width:430px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
.my-room-actions button { width:100%; min-width:0; min-height:38px; padding:0 8px; display:flex; align-items:center; justify-content:center; font-size:9px; line-height:1.2; text-align:center; }
.room-edit-card { width:min(580px,calc(100vw - 28px)); border:1px solid var(--line); background:rgb(var(--rooms-rgb-0c1522,12,21,34)); }
.room-edit-card .product-modal-head { align-items:flex-start; }
.room-edit-card .product-modal-head h2 { margin:0; }
.room-edit-card .product-modal-head p { margin:6px 0 0; color:rgb(var(--rooms-rgb-8392a8,131,146,168)); font-size:11px; line-height:1.5; }
.room-edit-form { display:flex; flex-direction:column; gap:15px; }
.modal-form-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.modal-form-actions button { min-height:46px; }
.room-delete-card p { margin:-10px 0 22px; color:rgb(var(--rooms-rgb-94a4ba,148,164,186)); font-size:12px; line-height:1.55; }

.room { width:min(100%,1240px); margin-inline:auto; }
.room-shell { position:relative; grid-template-columns:minmax(0,1fr) minmax(280px,310px); height:clamp(560px,74vh,860px); min-height:460px; max-height:calc(100vh - 156px); flex:none; overflow:auto; resize:vertical; }
.room-shell::after { content:""; position:absolute; z-index:6; right:4px; bottom:4px; width:17px; height:17px; pointer-events:none; opacity:.7; background:linear-gradient(135deg,transparent 0 42%,rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.4) 43% 51%,transparent 52% 64%,rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.64) 65% 73%,transparent 74%); }
.video-grid { min-height:0; }
.participant-panel.detached { max-width:calc(100vw - 16px); max-height:calc(100vh - 16px); }
.participant-tile.local video.screen-share-video { transform:none!important; }

.media-state span.off,.participant-row-status span.off { position:relative; color:#ff7f8b; border-color:rgba(255,92,108,.32); background:rgba(83,20,29,.58); }
.media-state span.off::after,.participant-row-status span.off::after { content:""; position:absolute; left:50%; top:50%; width:18px; height:2px; border-radius:999px; background:#ff5969; box-shadow:0 0 0 1px rgba(34,4,8,.34); transform:translate(-50%,-50%) rotate(-45deg); pointer-events:none; }
.hand-mark { width:25px; min-width:25px!important; height:25px!important; display:grid; place-items:center; border:1px solid rgba(241,203,118,.28)!important; border-radius:8px; color:#ffd166; background:rgba(82,59,12,.46); }
.hand-mark svg { width:16px!important; height:16px!important; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

@keyframes active-speaker-pulse {
  0%,100% { border-color:#54dc9e; box-shadow:0 0 0 2px rgba(84,220,158,.14),0 18px 52px rgba(0,0,0,.30),0 0 24px rgba(84,220,158,.14); }
  50% { border-color:#8af1bd; box-shadow:0 0 0 2px rgba(84,220,158,.20),0 18px 52px rgba(0,0,0,.30),0 0 38px rgba(84,220,158,.30); }
}
.participant-tile.active-speaker { border-width:1px; animation:active-speaker-pulse 1.15s ease-in-out infinite; }
.participant-row.active-speaker { border-color:rgba(84,220,158,.55); background:rgba(40,126,89,.12); box-shadow:inset 3px 0 0 #54dc9e; }
.participant-row.active-speaker .presence-dot { background:#7cf0b8; box-shadow:0 0 0 4px rgba(100,230,172,.12),0 0 18px rgba(100,230,172,.48); }
.participant-row.in-breakout { cursor:default; border-color:rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.25); background:rgba(var(--rooms-rgb-4163a2,65,99,162),0.08); }.participant-row.in-breakout:hover { transform:none; }.participant-row.in-breakout .presence-dot { background:rgb(var(--rooms-rgb-7ca6ff,124,166,255)); box-shadow:0 0 0 4px rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.1); }.breakout-location-badge { padding:4px 7px; border-radius:7px; color:rgb(var(--rooms-rgb-bad0ff,186,208,255)); background:rgba(var(--rooms-rgb-4e75cb,78,117,203),0.15); font-size:8px; white-space:nowrap; }
.breakout-context { display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin-bottom:5px; }.breakout-context>span { padding:4px 7px; border-radius:999px; color:#ffebb6; background:rgba(159,116,24,.18); border:1px solid rgba(241,203,118,.28); font-size:8px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }.breakout-context button { min-height:28px; padding:0 9px; border-radius:8px; font-size:9px; }.room-head-action { min-width:166px; min-height:36px; justify-content:center; }

.breakouts-card { width:min(680px,calc(100vw - 28px)); padding:0 20px 18px; border-radius:22px; }
.breakouts-card .workspace-head { margin:0 -20px 18px; padding:18px 20px; background:linear-gradient(135deg,rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.08),transparent 65%); }
.breakouts-card .breakout-head b { font-size:24px; letter-spacing:-.025em; }
.breakouts-card .breakout-head small { margin-top:3px; font-size:11px; }
.breakout-create-form { display:flex; flex-direction:column; gap:8px; margin-bottom:15px; }
.breakout-create-form>label { color:rgb(var(--rooms-rgb-aab9cc,170,185,204)); font-size:10px; font-weight:780; letter-spacing:.045em; text-transform:uppercase; }
.breakout-create-form>div { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.breakout-create-form input { width:100%; min-height:47px; padding:0 14px; border:1px solid var(--line-strong); border-radius:13px; outline:none; color:rgb(var(--rooms-rgb-edf3ff,237,243,255)); background:linear-gradient(180deg,rgba(var(--rooms-rgb-101b2b,16,27,43),0.92),rgba(var(--rooms-rgb-070e18,7,14,24),0.92)); box-shadow:inset 0 1px 0 rgba(255,255,255,.025); }
.breakout-create-form input:focus { border-color:rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.62); box-shadow:0 0 0 3px rgba(var(--rooms-rgb-5a84ff,90,132,255),0.1); }
.breakout-create-form button { min-width:112px; }
.breakout-destination { margin-bottom:15px; }
.breakout-picker { overflow:hidden; border:1px solid var(--line); border-radius:15px; background:rgba(var(--rooms-rgb-02070d,2,7,13),0.28); }
.breakout-picker-head { min-height:54px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.025); }
.breakout-picker-head>div { display:flex; flex-direction:column; gap:3px; }.breakout-picker-head b { font-size:13px; }.breakout-picker-head small { color:rgb(var(--rooms-rgb-8292a8,130,146,168)); font-size:9px; }
.breakout-participants { max-height:260px; min-height:116px; overflow:auto; display:flex; flex-direction:column; gap:7px; margin:0; padding:9px; }
.breakout-select-row { min-height:58px; display:grid; grid-template-columns:auto 36px minmax(0,1fr); gap:10px; padding:9px 11px; cursor:pointer; transition:border-color .16s,background .16s,transform .16s; }
.breakout-select-row:hover { transform:translateX(1px); border-color:rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.28); background:rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.055); }
.breakout-select-row.selected { border-color:rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.48); background:rgba(var(--rooms-rgb-537ae5,83,122,229),0.12); }
.breakout-select-row input { width:17px; height:17px; accent-color:rgb(var(--rooms-rgb-6e96ff,110,150,255)); }
.breakout-avatar { width:36px; height:36px; display:grid; place-items:center; border-radius:12px; color:rgb(var(--rooms-rgb-dce8ff,220,232,255)); background:linear-gradient(145deg,rgb(var(--rooms-rgb-31578d,49,87,141)),rgb(var(--rooms-rgb-1f3457,31,52,87))); font-weight:850; }
.breakout-participant-copy { min-width:0; display:flex; flex-direction:column; gap:3px; }.breakout-participant-copy b { overflow:hidden; text-overflow:ellipsis; font-size:11px; }.breakout-participant-copy small { color:rgb(var(--rooms-rgb-8494aa,132,148,170)); font-size:9px; }
.breakout-empty { min-height:96px; display:grid; grid-template-columns:38px minmax(0,1fr); align-content:center; column-gap:11px; padding:14px; color:rgb(var(--rooms-rgb-9cabc0,156,171,192)); }
.breakout-empty>span { grid-row:1/3; width:38px; height:38px; display:grid; place-items:center; border-radius:12px; color:rgb(var(--rooms-rgb-8fb1f5,143,177,245)); background:rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.08); }
.breakout-empty svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; }.breakout-empty b { color:rgb(var(--rooms-rgb-cdd8e7,205,216,231)); font-size:11px; }.breakout-empty small { margin-top:3px; font-size:9px; line-height:1.45; }
.breakout-actions { margin-top:14px; }

@media(min-width:821px) {
  .participant-panel:not(.detached) { left:auto!important; right:auto!important; top:auto!important; bottom:auto!important; width:auto!important; height:auto!important; }
}

@media(max-width:700px) {
  .my-room-row { grid-template-columns:1fr; }
  .my-room-actions { width:100%; grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media(max-width:820px) {
  .room { width:100%; }
  .room-shell { height:auto; max-height:none; flex:1; overflow:visible; resize:none; }.room-shell::after { display:none; }
  .board-stage { min-width:680px; min-height:383px; }
  .breakouts-card { width:100%; max-height:calc(100vh - 16px); padding:0 14px 14px; }
  .breakouts-card .workspace-head { margin:0 -14px 14px; padding:15px 14px; }
  .breakouts-card .breakout-head b { font-size:20px; }
  .breakout-create-form>div { grid-template-columns:1fr; }
  .breakout-create-form button { width:100%; }
}

html[data-theme="light"] {
  color-scheme:light;
  --bg:rgb(var(--rooms-rgb-edf3fb,237,243,251));
  --bg-soft:rgb(var(--rooms-rgb-e4ecf7,228,236,247));
  --panel:rgba(255,255,255,.92);
  --panel-strong:#ffffff;
  --line:rgba(var(--rooms-rgb-2f4666,47,70,102),0.16);
  --line-strong:rgba(var(--rooms-rgb-2f4666,47,70,102),0.28);
  --text:rgb(var(--rooms-rgb-142033,20,32,51));
  --muted:rgb(var(--rooms-rgb-607087,96,112,135));
  --muted-strong:rgb(var(--rooms-rgb-43536a,67,83,106));
  --shadow:0 24px 70px rgba(var(--rooms-rgb-324969,50,73,105),0.16);
}
html[data-theme="light"] body { background:radial-gradient(900px 620px at 2% -5%,rgba(var(--rooms-rgb-5885ea,88,133,234),0.18),transparent 64%),radial-gradient(800px 600px at 102% 20%,rgba(var(--rooms-rgb-9c73e4,156,115,228),0.11),transparent 66%),linear-gradient(180deg,rgb(var(--rooms-rgb-f5f8fc,245,248,252)),rgb(var(--rooms-rgb-eaf1f9,234,241,249))); }
html[data-theme="light"] body::before { opacity:.18; }
html[data-theme="light"] .topbar,html[data-theme="light"] .room-head,html[data-theme="light"] .participant-panel,html[data-theme="light"] .panel-topbar,html[data-theme="light"] .toolbar,html[data-theme="light"] .settings-card,html[data-theme="light"] .breakouts-card,html[data-theme="light"] .confirm-card,html[data-theme="light"] .whiteboard-shell,html[data-theme="light"] .create-room-card,html[data-theme="light"] .room-edit-card { color:rgb(var(--rooms-rgb-142033,20,32,51)); border-color:var(--line); background:#f9fbfe; }
html[data-theme="light"] .settings-version { color:rgb(var(--rooms-rgb-728197,114,129,151)); }
html[data-theme="light"] .card,html[data-theme="light"] .glass-card,html[data-theme="light"] .my-rooms { color:rgb(var(--rooms-rgb-142033,20,32,51)); background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(var(--rooms-rgb-f5f9fd,245,249,253),0.94)); }
html[data-theme="light"] .launch-card { color:rgb(var(--rooms-rgb-142033,20,32,51)); background:linear-gradient(150deg,#ffffff,rgb(var(--rooms-rgb-edf3fa,237,243,250))); box-shadow:0 24px 70px rgba(var(--rooms-rgb-354c6c,53,76,108),0.16); }
html[data-theme="light"] .panel-tab { color:rgb(var(--rooms-rgb-53647b,83,100,123)); } html[data-theme="light"] .panel-tab.active { color:rgb(var(--rooms-rgb-213250,33,50,80)); background:rgb(var(--rooms-rgb-e4edfc,228,237,252)); }
html[data-theme="light"] select,html[data-theme="light"] textarea,html[data-theme="light"] .join-form>input,html[data-theme="light"] .product-field input,html[data-theme="light"] .product-field select,html[data-theme="light"] .slug-field,html[data-theme="light"] .breakout-create-form input,html[data-theme="light"] .chat-form textarea { color:rgb(var(--rooms-rgb-142033,20,32,51)); background:#fff; }
html[data-theme="light"] .participant-tile { color:rgb(var(--rooms-rgb-edf5ff,237,245,255)); background:linear-gradient(145deg,rgb(var(--rooms-rgb-23344d,35,52,77)),rgb(var(--rooms-rgb-101a28,16,26,40))); }
html[data-theme="light"] .participant-row,html[data-theme="light"] .switch-row,html[data-theme="light"] .breakout-picker,html[data-theme="light"] .breakout-picker-head,html[data-theme="light"] .my-room-row { background:rgba(var(--rooms-rgb-35527a,53,82,122),0.035); }
html[data-theme="light"] .chat-panel { background:rgba(var(--rooms-rgb-e1eaf6,225,234,246),0.52); }
html[data-theme="light"] .chat-bubble { color:rgb(var(--rooms-rgb-25344a,37,52,74)); background:#fff; }
html[data-theme="light"] .secondary,html[data-theme="light"] .tool,html[data-theme="light"] .icon-button,html[data-theme="light"] .theme-toggle { color:rgb(var(--rooms-rgb-34465f,52,70,95)); background:rgba(var(--rooms-rgb-3a5882,58,88,130),0.045); }
html[data-theme="light"] .account-button { color:rgb(var(--rooms-rgb-29496f,41,73,111)); border-color:rgba(var(--rooms-rgb-305b97,48,91,151),0.3); background:rgba(var(--rooms-rgb-416fb2,65,111,178),0.08); }
html[data-theme="light"] .account-button.authenticated { color:#17633f; border-color:rgba(33,139,88,.30); background:rgba(49,161,101,.09); }
html[data-theme="light"] .account-button.unavailable { color:#735311; border-color:rgba(170,124,25,.30); background:rgba(208,157,46,.10); }
html[data-theme="light"] .workspace-modal,html[data-theme="light"] .confirm-modal,html[data-theme="light"] .product-modal,html[data-theme="light"] .settings-modal { background:rgba(var(--rooms-rgb-1e2e44,30,46,68),0.35); }
html[data-theme="light"] .participant-row.raised-hand { background:#fff9e9; }
html[data-theme="light"] .participant-row-status span.off,html[data-theme="light"] .media-state span.off { background:#ffe8eb; }

/* ============================================================
   v0.17.0 WORKSPACE / COLLABORATION CORRECTIVE
   This layer intentionally stays after legacy component styles.
   ============================================================ */
:root {
  --scroll-track: rgba(255,255,255,.035);
  --scroll-thumb: rgba(var(--rooms-rgb-85a1d0,133,161,208),0.34);
  --scroll-thumb-hover: rgba(var(--rooms-rgb-8eb1ec,142,177,236),0.58);
  --app-viewport-height: 100dvh;
  --room-workspace-height: clamp(560px, 74vh, 900px);
}
html[data-theme="light"] {
  --scroll-track: rgba(var(--rooms-rgb-334c6f,51,76,111),0.055);
  --scroll-thumb: rgba(var(--rooms-rgb-41608b,65,96,139),0.31);
  --scroll-thumb-hover: rgba(var(--rooms-rgb-37609e,55,96,158),0.53);
}
html, body { width:100%; max-width:100%; overscroll-behavior:none; }
* { scrollbar-width:thin; scrollbar-color:var(--scroll-thumb) var(--scroll-track); }
*::-webkit-scrollbar { width:6px; height:6px; }
/* Let WebKit scrollbar geometry apply where supported; retain native thin fallback elsewhere. */
@supports selector(::-webkit-scrollbar) { * { scrollbar-width:auto; } }
*::-webkit-scrollbar-track { background:var(--scroll-track); border-radius:999px; }
*::-webkit-scrollbar-thumb { min-height:36px; border:1px solid transparent; border-radius:999px; background:var(--scroll-thumb); background-clip:padding-box; }
*::-webkit-scrollbar-thumb:hover { background:var(--scroll-thumb-hover); background-clip:padding-box; }
.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0 0 0 0)!important; white-space:nowrap!important; border:0!important; }

body:has(#roomView:not(.hidden)) main { width:min(calc(100% - 24px),1840px); }
.room { width:100%; max-width:1840px; }
.room-head { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.room-head-actions { flex-wrap:wrap; justify-content:flex-end; }
.room-head-action { min-width:0; min-height:38px; padding-inline:12px; display:inline-flex; align-items:center; gap:7px; }
.room-head-action svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.connection-indicator { min-width:38px; min-height:38px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 12px; border:1px solid var(--line-strong); border-radius:999px; color:rgb(var(--rooms-rgb-aeb9c5,174,185,197)); background:rgba(255,255,255,.035); cursor:help; }
.connection-indicator i { width:9px; height:9px; flex:0 0 auto; border-radius:50%; background:currentColor; box-shadow:0 0 0 5px color-mix(in srgb,currentColor 11%,transparent),0 0 20px color-mix(in srgb,currentColor 42%,transparent); }
.connection-indicator .connection-label { max-width:120px; overflow:hidden; font-size:10px; font-weight:800; letter-spacing:.045em; text-transform:uppercase; transition:max-width .18s,opacity .18s; }
.connection-indicator.connecting i,.connection-indicator.wait i { animation:connectionPulse 1.25s ease-in-out infinite; }
@keyframes connectionPulse { 50% { opacity:.42; transform:scale(.76); } }

.room-shell {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,340px);
  height:var(--room-workspace-height);
  min-height:520px;
  max-height:calc(var(--app-viewport-height,100dvh) - 176px);
  overflow:hidden;
  resize:none;
}
.room-shell::after { display:none!important; }
.room-main,.video-grid,.participant-panel { min-height:0; }
.room-main { overflow:hidden; }
.video-grid { height:100%; overflow:auto; align-content:stretch; }
.room-resize-handle { width:min(380px,62vw); height:18px; margin:0 auto 2px; display:grid; place-items:center; cursor:ns-resize; touch-action:none; }
.room-resize-handle span { width:58px; height:5px; border-radius:999px; background:rgba(var(--rooms-rgb-8ba4cc,139,164,204),0.35); box-shadow:0 0 0 1px rgba(255,255,255,.035); transition:width .16s,background .16s; }
.room-resize-handle:hover span,.room-resize-handle:focus-visible span { width:82px; background:rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.62); }
.room-resize-handle:focus-visible { outline:2px solid rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.4); outline-offset:1px; border-radius:999px; }

.chat-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.chat-head .icon-button { flex:0 0 auto; }
.chat-form { grid-template-columns:auto minmax(0,1fr) auto; }
.chat-attach { width:40px; min-width:40px; height:40px; align-self:end; display:grid; place-items:center; padding:0; border:1px solid var(--line); border-radius:11px; color:rgb(var(--rooms-rgb-a9bbd7,169,187,215)); background:rgba(255,255,255,.035); }
.chat-attach svg,.chat-head svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.chat-attach:hover,.chat-head .icon-button:hover { color:rgb(var(--rooms-rgb-eaf2ff,234,242,255)); border-color:rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.42); background:rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.09); }
.chat-message.attachment-message { align-items:stretch; }
.attachment-card { width:min(100%,420px); display:grid; grid-template-columns:42px minmax(0,1fr) 38px; gap:10px; align-items:center; padding:11px; border:1px solid rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.21); border-radius:14px; background:linear-gradient(145deg,rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.095),rgba(255,255,255,.025)); }
.attachment-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; color:rgb(var(--rooms-rgb-c9dcff,201,220,255)); background:rgba(var(--rooms-rgb-5c84ee,92,132,238),0.15); }
.attachment-icon svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; }
.attachment-copy { min-width:0; display:flex; flex-direction:column; gap:3px; }
.attachment-copy b { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; white-space:normal; font-size:11px; line-height:1.25; }
.attachment-copy small { color:var(--muted); font-size:9px; line-height:1.35; }
.attachment-download { width:38px; min-width:38px; max-width:38px; min-height:38px; display:grid; place-items:center; padding:0; border:1px solid rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.25); border-radius:11px; color:rgb(var(--rooms-rgb-d7e5ff,215,229,255)); background:rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.09); }
.attachment-download svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.9; }
.attachment-expired { opacity:.58; filter:saturate(.55); }

.participant-role-badge.admin { color:rgb(var(--rooms-rgb-c8dcff,200,220,255)); border-color:rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.35); background:rgba(var(--rooms-rgb-5c84ee,92,132,238),0.13); }
.tile-action.admin-toggle { color:rgb(var(--rooms-rgb-c8dcff,200,220,255)); border-color:rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.3); background:rgba(var(--rooms-rgb-5c84ee,92,132,238),0.14); }
.tile-action.admin-toggle.is-admin { color:#fff0c1; border-color:rgba(241,203,118,.36); background:rgba(120,82,12,.34); }

.breakout-prerequisite { margin:0 0 10px; padding:10px 12px; border:1px solid rgba(255,127,139,.33); border-radius:11px; color:#ffc0c6; background:rgba(88,25,36,.23); font-size:11px; font-weight:720; }
.breakout-prerequisite.ready { display:none; }
.breakout-destination select { min-height:47px; font-size:13px; }
.breakout-actions button { min-height:47px; }
.breakout-actions button:disabled { opacity:.48; cursor:not-allowed; }
.breakout-select-row { border:1px solid var(--line); border-radius:12px; }
.breakout-select-row input { appearance:none; display:grid; place-content:center; border:1px solid rgba(var(--rooms-rgb-94aed7,148,174,215),0.52); border-radius:5px; background:rgba(255,255,255,.035); }
.breakout-select-row input::before { content:""; width:9px; height:5px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg) scale(0); transition:transform .12s ease; }
.breakout-select-row input:checked { border-color:rgb(var(--rooms-rgb-7199ff,113,153,255)); background:rgb(var(--rooms-rgb-5d83eb,93,131,235)); }
.breakout-select-row input:checked::before { transform:rotate(-45deg) scale(1); }
.breakout-context button { min-height:38px; padding:0 14px; font-size:10px; }

/* Whiteboard stays usable while the conference remains visible. */
.workspace-modal#whiteboardModal { pointer-events:none; background:transparent; backdrop-filter:none; padding:0; }
#whiteboardModal .whiteboard-shell { pointer-events:auto; position:fixed; z-index:98; min-width:520px; min-height:390px; width:min(980px,72vw); height:min(720px,78vh); resize:both; }
#whiteboardModal.board-window-mode-float .whiteboard-shell { left:50%; top:50%; transform:translate(-50%,-50%); border-radius:18px; box-shadow:0 32px 110px rgba(0,0,0,.65); }
#whiteboardModal.board-window-mode-left .whiteboard-shell,#whiteboardModal.board-window-mode-right .whiteboard-shell { top:96px; bottom:84px; width:min(720px,48vw); height:auto; min-height:0; resize:horizontal; transform:none; border-radius:16px; }
#whiteboardModal.board-window-mode-left .whiteboard-shell { left:12px; right:auto; }
#whiteboardModal.board-window-mode-right .whiteboard-shell { right:12px; left:auto; }
.board-window-head { cursor:move; user-select:none; }
.board-window-actions { flex-direction:row!important; align-items:center; gap:5px!important; }
.board-window-actions .active { color:rgb(var(--rooms-rgb-eaf2ff,234,242,255)); border-color:rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.45); background:rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.13); }
.board-toolbar { overflow:auto; flex-wrap:nowrap; }
.board-toolbar>* { flex:0 0 auto; }
.board-control select { width:145px; }
.board-canvas-wrap { overscroll-behavior:contain; }
#boardCanvas { background:#f7f9fc; }
#boardCanvas.background-white { background:#f7f9fc; }
#boardCanvas.background-white-grid { background-color:#f7f9fc; background-image:linear-gradient(#d9e0ea 1px,transparent 1px),linear-gradient(90deg,#d9e0ea 1px,transparent 1px); background-size:32px 32px; }
#boardCanvas.background-black { background:#070a0f; }
#boardCanvas.background-black-grid { background-color:#070a0f; background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px); background-size:32px 32px; }
#boardCanvas.background-chalk,#boardCanvas.background-chalk-graphite { background-color:#172720; background-image:radial-gradient(circle at 20% 20%,rgba(255,255,255,.035) 0 1px,transparent 1.5px),radial-gradient(circle at 80% 60%,rgba(255,255,255,.025) 0 1px,transparent 1.5px); background-size:19px 17px,23px 21px; }
#boardCanvas.board-mode-erase-object { cursor:not-allowed; }
#boardCanvas.board-mode-erase-partial { cursor:cell; }
.board-text-box { min-width:150px; min-height:82px; overflow:hidden; resize:none; border-style:solid; }
.board-text-box.board-text-light { color:#142033; background:rgba(255,255,255,.94); border-color:rgba(47,70,102,.28); box-shadow:0 8px 26px rgba(14,31,55,.18); }
.board-text-box.board-text-dark { color:#f1f6ff; background:rgba(12,20,31,.91); border-color:rgba(174,198,234,.29); }
.board-text-box.selected { box-shadow:0 0 0 3px rgba(124,166,255,.24),0 12px 32px rgba(0,0,0,.28); }
.board-text-chrome { height:30px; display:flex; align-items:center; justify-content:space-between; gap:6px; padding:4px 5px 3px 9px; border-bottom:1px solid currentColor; border-bottom-color:color-mix(in srgb,currentColor 14%,transparent); cursor:move; user-select:none; }
.board-text-drag { font-size:9px; font-weight:800; letter-spacing:.06em; opacity:.62; text-transform:uppercase; }
.board-text-delete { width:24px; height:24px; display:grid; place-items:center; padding:0; border:0; border-radius:7px; color:inherit; background:transparent; }
.board-text-delete:hover { color:#fff; background:#b73343; }
.board-text-delete svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.9; }
.board-text-editor { width:100%; height:calc(100% - 30px); min-height:50px; padding:9px 10px; overflow:auto; outline:0; white-space:pre-wrap; overflow-wrap:anywhere; font:500 16px/1.38 "Segoe UI",sans-serif; }
.board-text-editor:empty::before { content:"Введите текст"; color:currentColor; opacity:.45; }
.board-text-box.text-heading .board-text-editor { font-size:25px; line-height:1.2; font-weight:800; }
.board-text-resize { position:absolute; right:2px; bottom:2px; width:18px; height:18px; cursor:nwse-resize; touch-action:none; }
.board-text-resize::after { content:""; position:absolute; right:3px; bottom:3px; width:9px; height:9px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; opacity:.5; }


/* Experimental room transcription */
.transcription-action { position:relative; gap:7px; }
.transcription-action svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; }
.transcription-action-state { width:7px; height:7px; flex:0 0 7px; border-radius:50%; background:rgb(var(--rooms-rgb-8697b4,134,151,180)); box-shadow:0 0 0 3px rgba(var(--rooms-rgb-8697b4,134,151,180),0.1); }
.transcription-action.is-active { color:#ffd9dd; border-color:rgba(255,91,111,.48); background:rgba(118,24,37,.28); }
.transcription-action.is-active .transcription-action-state { background:#ff5b6f; box-shadow:0 0 0 4px rgba(255,91,111,.12); animation:transcriptionPulse 1.6s ease-in-out infinite; }
.transcription-action.is-stopping .transcription-action-state { animation:none; opacity:.55; }
.transcription-action.is-ready { color:#c9f5db; border-color:rgba(75,211,137,.34); background:rgba(23,89,56,.22); }
.transcription-action.is-ready .transcription-action-state { background:#4bd389; box-shadow:0 0 0 4px rgba(75,211,137,.10); }
@keyframes transcriptionPulse { 50% { opacity:.45; transform:scale(.8); } }
.transcription-consent-card { max-width:560px; }
.transcription-consent-card p { margin:8px 0 12px; color:var(--muted); line-height:1.55; }
.transcription-consent-note { margin-bottom:18px; padding:11px 12px; border:1px solid rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.22); border-radius:12px; color:rgb(var(--rooms-rgb-cbdcff,203,220,255)); background:rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.075); font-size:11px; line-height:1.5; }
.transcript-card { width:min(920px,calc(100vw - 24px)); max-height:min(820px,calc(var(--app-viewport-height,100dvh) - 24px)); }
.transcript-body { min-height:240px; max-height:58vh; overflow:auto; padding:16px; border:1px solid var(--line); border-radius:14px; color:var(--text); background:rgba(var(--rooms-rgb-03080f,3,8,15),0.48); white-space:pre-wrap; overflow-wrap:anywhere; font:500 13px/1.65 "Segoe UI",sans-serif; }
html[data-theme="light"] .transcript-body { background:rgba(255,255,255,.76); }
@media (max-width:900px) {
  .transcript-card { width:100%; max-height:calc(var(--app-viewport-height,100dvh) - 16px); }
  .transcript-body { max-height:55vh; font-size:16px; }
}

html[data-theme="light"] .attachment-card { background:linear-gradient(145deg,rgba(var(--rooms-rgb-4c75cd,76,117,205),0.09),rgba(255,255,255,.88)); }
html[data-theme="light"] .connection-indicator { background:rgba(var(--rooms-rgb-3a5882,58,88,130),0.045); }
html[data-theme="light"] .breakout-prerequisite { color:#8a2430; background:#fff1f2; }

@media (max-width:1100px) {
  body:has(#roomView:not(.hidden)) main { width:min(calc(100% - 16px),1840px); margin-top:20px; }
  .room-shell { grid-template-columns:minmax(0,1fr) minmax(280px,320px); }
  .connection-indicator .connection-label { max-width:0; opacity:0; }
  .connection-indicator:hover .connection-label,.connection-indicator:focus .connection-label { max-width:120px; opacity:1; }
}

@media (max-width:900px) {
  body { overflow:hidden; }
  .app-shell { width:100%; height:var(--app-viewport-height,100dvh); overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior-y:contain; padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom); }
  .topbar { position:relative; top:auto; width:calc(100% - 16px); height:58px; margin:8px auto 0; border-radius:18px; }
  main,body:has(#roomView:not(.hidden)) main { width:calc(100% - 12px); margin:12px auto max(12px,env(safe-area-inset-bottom)); }
  .room { min-height:calc(var(--app-viewport-height,100dvh) - 90px); display:flex; flex-direction:column; }
  .room-head { padding:8px 9px; align-items:flex-start; }
  .room-title-group h2 { font-size:18px; }
  .room-summary { font-size:9px; }
  .room-head-actions { max-width:58%; }
  .room-head-action span { display:none; }
  #copyRoomBtn { width:38px; min-width:38px; padding:0; justify-content:center; }
  .room-head-action:not(#copyRoomBtn) { min-height:34px; padding-inline:9px; font-size:9px; }
  .connection-indicator { min-width:34px; min-height:34px; padding:0 10px; }
  .connection-indicator .connection-label { display:none; }
  .room-shell { flex:1; grid-template-columns:1fr; grid-template-rows:minmax(260px,1fr) auto; height:auto; min-height:520px; max-height:none; overflow:hidden; }
  .room-main { grid-row:1; min-height:260px; }
  .video-grid { min-height:260px; max-height:none; padding-bottom:4px; }
  .participant-panel,.participant-panel.detached { position:relative!important; z-index:12; inset:auto!important; grid-row:2; width:100%!important; height:min(46vh,420px)!important; min-width:0; min-height:190px; max-width:none; max-height:52vh; resize:none; border-radius:18px 18px 0 0; box-shadow:0 -16px 45px rgba(0,0,0,.28); transform:none!important; }
  .room.panel-detached .room-shell { grid-template-columns:1fr; }
  .panel-topbar { cursor:default!important; }
  .panel-actions #panelDetachBtn { display:none; }
  .panel-tab:first-child { display:inline-flex!important; }
  .participant-panel:not(.detached) { grid-template-rows:auto minmax(100px,40fr) 9px minmax(130px,60fr); }
  .participant-panel.panel-mode-participants,.participant-panel.panel-mode-chat { grid-template-rows:auto minmax(0,1fr); }
  .room-resize-handle { display:none; }
  .toolbar-wrap { position:sticky; z-index:40; bottom:max(4px,env(safe-area-inset-bottom)); margin-top:5px; max-width:100%; }
  .toolbar { max-width:calc(100vw - 74px); overflow-x:auto; scroll-snap-type:x proximity; }
  .tool { scroll-snap-align:center; }
  #whiteboardModal .whiteboard-shell,#whiteboardModal.board-window-mode-left .whiteboard-shell,#whiteboardModal.board-window-mode-right .whiteboard-shell,#whiteboardModal.board-window-mode-float .whiteboard-shell { inset:0!important; width:100%!important; height:var(--app-viewport-height,100dvh)!important; min-width:0; min-height:0; max-width:none; max-height:none; transform:none!important; resize:none; border:0; border-radius:0; }
  .board-window-head { cursor:default; padding-top:max(10px,env(safe-area-inset-top)); }
  .board-window-actions button:not(#whiteboardCloseBtn) { display:none; }
  .board-stage { min-width:680px; min-height:383px; }
  .board-toolbar { min-height:58px; }
  .board-control { display:flex!important; }
  .settings-modal,.workspace-modal:not(#whiteboardModal),.product-modal,.confirm-modal { align-items:end; padding:8px 8px max(8px,env(safe-area-inset-bottom)); }
  .settings-card,.breakouts-card,.product-modal-card,.confirm-card { width:100%; max-height:calc(var(--app-viewport-height,100dvh) - 16px); border-radius:22px; }
  .breakout-actions { flex-direction:column; }
  .breakout-actions button { width:100%; }
  .inline-field { grid-template-columns:1fr; }
  .attachment-card { grid-template-columns:38px minmax(0,1fr) 38px; }

  /* Do not reduce editable controls below 16px. iOS Safari may focus-zoom. */
  input:not([type="color"]), select, textarea, [contenteditable="true"] { font-size:16px!important; }
}

@media (max-width:520px) {
  .room-shell { min-height:500px; }
  .room-main,.video-grid { min-height:235px; }
  .participant-panel,.participant-panel.detached { height:min(48vh,390px)!important; }
  .panel-tab { min-height:36px; padding-inline:8px; font-size:10px; }
  .chat-form { gap:6px; }
  .chat-attach,.chat-send { width:39px; min-width:39px; }
  .board-control span { display:none; }
  .board-control select { width:138px; }
  .whiteboard-shell .workspace-head small { max-width:210px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}

/* 0.18.1 corrective: owner stable-link access, attachments, roster admin and selection rich text. */
.owner-choice-card { width:min(760px,calc(100vw - 28px)); margin:48px auto; text-align:center; }
.owner-choice-mark { width:64px; height:64px; margin:0 auto 14px; display:grid; place-items:center; border:1px solid rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.26); border-radius:20px; color:rgb(var(--rooms-rgb-d9e7ff,217,231,255)); background:rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.1); }
.owner-choice-mark svg { width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:1.7; }
.owner-choice-actions { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:22px 0 12px; }
.owner-choice-actions button { min-height:92px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:5px; padding:16px 18px; text-align:left; }
.owner-choice-actions button b { font-size:14px; }.owner-choice-actions button small { color:var(--muted); font-size:10px; line-height:1.45; }
.owner-choice-actions .primary small { color:rgba(255,255,255,.78); }

.chat-status.is-error { min-height:30px; padding:7px 9px; border:1px solid rgba(255,91,111,.36); border-radius:9px; color:#ffd0d5; background:rgba(112,24,37,.24); font-size:10px; }
.chat-status.is-success { min-height:26px; padding:6px 8px; border:1px solid rgba(75,211,137,.28); border-radius:9px; color:#bff1d4; background:rgba(25,93,59,.20); font-size:9px; }
.chat-status.is-progress { min-height:26px; padding:6px 8px; border:1px solid rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.26); border-radius:9px; color:rgb(var(--rooms-rgb-c9dcff,201,220,255)); background:rgba(var(--rooms-rgb-405e9b,64,94,155),0.16); font-size:9px; }

.participant-admin-toggle { min-width:25px!important; width:25px; height:25px!important; display:grid!important; place-items:center; padding:0; border:1px solid rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.3); border-radius:7px; color:rgb(var(--rooms-rgb-bdd2ff,189,210,255)); background:rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.08); cursor:pointer; }
.participant-admin-toggle:hover:not(:disabled) { border-color:rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.55); background:rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.17); }
.participant-admin-toggle.is-admin { color:#d6ffe6; border-color:rgba(75,211,137,.38); background:rgba(33,112,73,.20); }
.participant-admin-toggle:disabled { opacity:.48; cursor:wait; }
.participant-admin-toggle svg { width:14px!important; height:14px!important; }

.board-text-editor span[data-board-heading="1"] { font-size:1.48em; line-height:1.18; font-weight:800; }
#returnSelfToMainBtn { min-height:42px; padding:0 17px; font-size:12px; font-weight:800; }

@media (max-width:820px) {
  .owner-choice-card { width:100%; margin:12px auto; }
  .owner-choice-actions { grid-template-columns:1fr; }
  .owner-choice-actions button { min-height:84px; font-size:16px; }
  .owner-choice-actions button small { font-size:13px; }
  #returnSelfToMainBtn { min-height:46px; font-size:16px; }
}

/* 0.18.1 desktop resize invariant: rows reflow inside the bounded workspace instead of clipping a partial tile. */
@media (min-width:901px) {
  .video-grid:not(.focus-mode) { grid-auto-rows:minmax(0,1fr); overflow:hidden; }
  .video-grid:not(.focus-mode) .participant-tile { min-height:0; }
}


/* 0.18.3 self-audio/topbar corrective: local audio is never rendered to local output; topbar stays in normal flow. */

/* 0.18.2 owner-reported live corrective: compact connection, balanced room controls,
   reliable resize grip, mobile toolbar containment, roster moderation and single attachment affordance. */
.connection-indicator { width:38px; min-width:38px; height:38px; min-height:38px; padding:0; gap:0; }
.connection-indicator .connection-label { display:none!important; }
.room-head-primary-action { width:188px; min-width:188px; justify-content:center; }
.admission-notice { min-height:38px; display:inline-flex; align-items:center; gap:7px; padding:0 11px; border:1px solid rgba(241,203,118,.34); border-radius:11px; color:#ffe3a3; background:rgba(143,98,18,.16); }
.admission-notice svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; }
.admission-notice b { min-width:20px; height:20px; display:grid; place-items:center; border-radius:999px; font-size:9px; background:rgba(241,203,118,.18); }
.room-shell { max-height:none; }
.room-resize-handle { width:100%; height:24px; margin:0; display:flex!important; align-items:center; justify-content:flex-end; padding:0 12px; cursor:ns-resize; touch-action:none; }
.room-resize-handle span { position:relative; width:31px; height:18px; border:0; border-radius:0; background:transparent; box-shadow:none; opacity:.72; }
.room-resize-handle span::before { content:""; position:absolute; right:0; bottom:3px; width:27px; height:12px; border-bottom:2px solid rgba(var(--rooms-rgb-8ba4cc,139,164,204),0.7); border-radius:1px; box-shadow:0 -5px 0 -1px rgba(var(--rooms-rgb-8ba4cc,139,164,204),0.58),0 -10px 0 -1px rgba(var(--rooms-rgb-8ba4cc,139,164,204),0.42); transform:skewX(-30deg); transform-origin:right bottom; }
.room-resize-handle:hover span,.room-resize-handle:focus-visible span { width:31px; background:transparent; opacity:1; }
.chat-head .icon-button { display:none!important; }
.chat-send { display:grid; place-items:center; padding:0!important; }
.chat-send svg { width:20px; height:20px; margin:0; transform:none; }
.participant-row-role.admin { display:inline-flex; align-items:center; gap:4px; color:#bfe8d1; }
.participant-row-role.admin svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2; }
.participant-role.admin { display:inline-flex; align-items:center; gap:4px; }
.participant-role.admin svg { width:11px; height:11px; fill:none; stroke:currentColor; stroke-width:2; }
.participant-action { width:28px; min-width:28px; height:28px; min-height:28px; display:grid; place-items:center; padding:0; border:1px solid var(--line); border-radius:8px; color:rgb(var(--rooms-rgb-b9c8de,185,200,222)); background:rgba(255,255,255,.035); }
.participant-action:is(.mute,.remove) { color:rgb(var(--rooms-rgb-c5cfdd,197,207,221)); border-color:var(--line); background:rgba(255,255,255,.035); }
.participant-action svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.participant-row-status svg { width:18px; height:18px; }
.participant-action.participant-admin-toggle { width:28px; min-width:28px!important; height:28px!important; }
#returnSelfToMainBtn { min-height:46px; font-size:16px; padding-inline:18px; }

@media (max-width:1100px) and (min-width:901px) {
  .room-head-primary-action { width:172px; min-width:172px; }
}
@media (max-width:900px) {
  .room { min-height:0; }
  .room-shell { flex:0 0 auto; grid-template-columns:1fr; grid-template-rows:minmax(250px,1fr) auto; height:var(--room-workspace-height)!important; min-height:min(var(--room-workspace-height),100%); max-height:none; }
  .room-main { min-height:250px; }
  .video-grid { min-height:250px; overflow:auto; }
  .room-resize-handle { display:flex!important; height:24px; flex:0 0 24px; }
  .room-head-actions { max-width:64%; }
  .room-head-primary-action { width:38px; min-width:38px; padding:0; }
  .room-head-action span,.admission-notice span { display:none; }
  .admission-notice { min-width:38px; width:auto; padding-inline:8px; }
  .toolbar-wrap { position:sticky; left:auto; right:auto; transform:none; width:100%; max-width:100%; display:grid; grid-template-columns:minmax(0,1fr) 48px; align-items:center; gap:7px; margin:5px 0 0; padding:0; bottom:max(4px,env(safe-area-inset-bottom)); overflow:visible; }
  .toolbar { width:100%; max-width:none; min-width:0; justify-content:flex-start; overflow-x:auto; overflow-y:hidden; padding:6px 8px; scroll-padding-inline:8px; overscroll-behavior-x:contain; }
  .toolbar .tool { flex:0 0 42px; width:42px; min-width:42px; height:42px; min-height:42px; }
  .leave-tool { flex:0 0 48px; width:48px; min-width:48px; height:48px; }
  .participant-row { grid-template-columns:9px minmax(0,1fr) auto; }
  .participant-row-actions { flex-wrap:nowrap; }
}
@media (max-width:520px) {
  .room-shell { grid-template-rows:minmax(235px,1fr) auto; }
  .room-main,.video-grid { min-height:235px; }
  .participant-action { width:25px; min-width:25px; height:25px; min-height:25px; }
}


/* 0.18.7 Stage 1 mobile usability implementation.
   Visual language and existing Buddy Rooms icons remain authoritative; only control density and layout behavior change. */
.mobile-more-trigger,.mobile-more-menu,.mobile-panel-resizer { display:none; }

@media (max-width:900px) {
  /* Compact primary toolbar: daily controls stay visible; secondary tools move under More. */
  #togglePlaybackBtn,#screenShareBtn,#whiteboardBtn,#raiseHandBtn,#memeReactionsBtn,#gridViewBtn,#settingsBtn,#fullscreenBtn,#transcriptionBtn,#recordingBtn { display:none!important; }
  .mobile-more-trigger { display:flex; }
  .toolbar { overflow:visible; justify-content:center; gap:6px; }
  .toolbar .tool { flex:0 0 42px; width:42px; min-width:42px; height:42px; min-height:42px; }
  .toolbar-wrap { position:sticky; }
  .mobile-more-menu { pointer-events:auto; position:absolute; z-index:76; right:55px; bottom:57px; width:min(292px,calc(100vw - 82px)); max-height:min(420px,calc(var(--app-viewport-height,100dvh) - 150px)); overflow:auto; padding:7px; border:1px solid var(--line); border-radius:16px; background:rgb(var(--rooms-rgb-09121e,9,18,30)); box-shadow:0 22px 70px rgba(0,0,0,.55); }
  .mobile-more-menu:not(.hidden) { display:grid; gap:4px; }
  .mobile-more-action { width:100%; min-height:44px; display:grid; grid-template-columns:34px minmax(0,1fr); align-items:center; gap:8px; padding:0 12px; border:1px solid transparent; border-radius:11px; color:rgb(var(--rooms-rgb-c6d3e6,198,211,230)); background:transparent; text-align:left; font-size:12px; font-weight:720; }
  .mobile-more-action:hover,.mobile-more-action:focus-visible,.mobile-more-action.active { color:rgb(var(--rooms-rgb-edf4ff,237,244,255)); border-color:rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.26); background:rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.09); }
  .mobile-more-action.off { color:#ffb1b9; background:rgba(126,43,55,.18); }
  .mobile-more-action:disabled { opacity:.42; cursor:not-allowed; }
  .mobile-more-action svg { width:18px; height:18px; justify-self:center; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  #mobileMemesAction svg { width:21px; height:21px; stroke-width:1.9; }
  html[data-theme="light"] .mobile-more-menu { color:rgb(var(--rooms-rgb-142033,20,32,51)); border-color:var(--line); background:#f9fbfe; box-shadow:0 20px 65px rgba(var(--rooms-rgb-223650,34,54,80),0.22); }
  html[data-theme="light"] .mobile-more-action { color:rgb(var(--rooms-rgb-4b607b,75,96,123)); }
  html[data-theme="light"] .mobile-more-action:hover,html[data-theme="light"] .mobile-more-action:focus-visible,html[data-theme="light"] .mobile-more-action.active { color:rgb(var(--rooms-rgb-18345d,24,52,93)); background:rgba(var(--rooms-rgb-537cbe,83,124,190),0.1); }

  /* Video/panel split: the divider changes allocation, never crops a visible tile. */
  .room-shell { --mobile-panel-height:320px; grid-template-rows:minmax(250px,1fr) 20px minmax(190px,var(--mobile-panel-height)); }
  .room-main { grid-row:1; min-height:250px; overflow:hidden; }
  .mobile-panel-resizer { grid-row:2; width:100%; height:20px; display:grid; place-items:center; cursor:ns-resize; touch-action:none; background:transparent; outline:none; }
  .mobile-panel-resizer span { width:54px; height:4px; border-radius:999px; background:rgba(var(--rooms-rgb-8ba4cc,139,164,204),0.34); transition:width .14s,background .14s; }
  .mobile-panel-resizer:hover span,.mobile-panel-resizer:focus-visible span,.mobile-panel-resizer.dragging span { width:72px; background:rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.62); }
  .participant-panel,.participant-panel.detached { grid-row:3; height:100%!important; min-height:0; max-height:none; }
  .room.panel-closed .mobile-panel-resizer,.room.panel-detached .mobile-panel-resizer { display:none; }
  .room.panel-closed .room-shell,.room.panel-detached .room-shell { grid-template-rows:minmax(250px,1fr) auto; }
  .room.panel-detached .participant-panel { grid-row:2; }

  .video-grid { min-height:0; height:100%; overflow:hidden!important; grid-auto-rows:minmax(0,1fr); align-content:stretch; }
  .video-grid:not(.focus-mode) .participant-tile { min-height:0; }
  .video-grid.focus-mode { min-height:0; overflow:hidden!important; }
  .video-grid.focus-mode .participant-tile.is-focused { min-height:0; }
}

@media (max-width:520px) {
  .room-shell { grid-template-rows:minmax(235px,1fr) 20px minmax(190px,var(--mobile-panel-height)); }
  .room-main { min-height:235px; }
  .room.panel-closed .room-shell,.room.panel-detached .room-shell { grid-template-rows:minmax(235px,1fr) auto; }
  .room.panel-detached .participant-panel { grid-row:2; }
  .video-grid { grid-auto-rows:minmax(0,1fr); }
  .video-grid:not(.focus-mode) .participant-tile { min-height:0; }
}

/* 0.18.8 cumulative usability completion.
   Existing Buddy Rooms visual language/icons stay authoritative; these rules refine behavior and state clarity only. */
.home-preferences { margin:14px 0 0; padding:14px 16px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.022); }
.home-preferences-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px; }
.home-preferences-head h2 { margin:0; font-size:14px; }
.home-preferences-head p { margin:3px 0 0; color:var(--muted); font-size:9px; line-height:1.4; }
.home-preferences-form { display:grid; grid-template-columns:minmax(190px,1.35fr) auto auto minmax(140px,.65fr) auto; gap:9px; align-items:end; }
.home-preferences-form label { min-width:0; }
.home-preferences-form label>span { display:block; margin:0 0 5px; color:rgb(var(--rooms-rgb-8393a9,131,147,169)); font-size:9px; font-weight:700; }
.home-preferences-form input[type="text"],.home-preferences-form input:not([type]),.home-preferences-form select { width:100%; min-height:39px; border:1px solid var(--line-strong); border-radius:11px; background:rgb(var(--rooms-rgb-0a111c,10,17,28)); color:rgb(var(--rooms-rgb-e7edf7,231,237,247)); padding:0 10px; font:inherit; font-size:11px; }
.home-pref-toggle { min-height:39px; display:flex!important; align-items:center; gap:7px; padding:0 9px; border:1px solid var(--line); border-radius:11px; background:rgba(255,255,255,.025); }
.home-pref-toggle>span { margin:0!important; white-space:nowrap; color:rgb(var(--rooms-rgb-a7b6ca,167,182,202))!important; }
.home-pref-toggle input { accent-color:rgb(var(--rooms-rgb-6f93ea,111,147,234)); }
.home-preferences-status { min-height:13px; margin-top:7px; color:rgb(var(--rooms-rgb-75869d,117,134,157)); font-size:8px; }
html[data-theme="light"] .home-preferences { background:rgba(255,255,255,.55); }
html[data-theme="light"] .home-preferences-form input[type="text"],html[data-theme="light"] .home-preferences-form input:not([type]),html[data-theme="light"] .home-preferences-form select { background:#fff; color:rgb(var(--rooms-rgb-17243a,23,36,58)); }

.layout-menu { pointer-events:auto; position:absolute; z-index:77; left:50%; bottom:64px; transform:translateX(-50%); width:min(320px,calc(100vw - 28px)); padding:7px; border:1px solid var(--line); border-radius:16px; background:rgb(var(--rooms-rgb-09121e,9,18,30)); box-shadow:0 22px 70px rgba(0,0,0,.55); }
.layout-menu:not(.hidden) { display:grid; gap:4px; }
.layout-option { width:100%; min-height:50px; display:grid; grid-template-columns:36px minmax(0,1fr); align-items:center; gap:9px; padding:7px 11px; border:1px solid transparent; border-radius:11px; color:rgb(var(--rooms-rgb-c6d3e6,198,211,230)); background:transparent; text-align:left; }
.layout-option:hover,.layout-option:focus-visible,.layout-option.active { color:rgb(var(--rooms-rgb-eef5ff,238,245,255)); border-color:rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.28); background:rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.09); }
.layout-option svg { width:18px; height:18px; justify-self:center; fill:none; stroke:currentColor; stroke-width:1.8; }
.layout-option>span { display:flex; flex-direction:column; gap:2px; }
.layout-option b { font-size:11px; }
.layout-option small { color:rgb(var(--rooms-rgb-718198,113,129,152)); font-size:8px; line-height:1.35; }
html[data-theme="light"] .layout-menu { background:#f9fbfe; box-shadow:0 20px 65px rgba(var(--rooms-rgb-223650,34,54,80),0.22); }
html[data-theme="light"] .layout-option { color:rgb(var(--rooms-rgb-4b607b,75,96,123)); }
html[data-theme="light"] .layout-option.active,html[data-theme="light"] .layout-option:hover { color:rgb(var(--rooms-rgb-18345d,24,52,93)); background:rgba(var(--rooms-rgb-537cbe,83,124,190),0.1); }

/* 0.21.70 meme reactions: instruction lives in room settings; the dock control stays a pure toggle. */
.meme-settings-section { display:grid; gap:10px; }
.meme-settings-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.meme-settings-head h3 { margin:0; }
.meme-settings-head p { margin:4px 0 0; color:var(--muted); font-size:9px; line-height:1.45; max-width:520px; }
.meme-state-badge { flex:0 0 auto; padding:5px 9px; border:1px solid var(--line); border-radius:999px; color:var(--muted); background:rgba(255,255,255,.025); font-size:9px; font-weight:800; }
.meme-state-badge.active { color:#f5a04f; border-color:rgba(245,160,79,.45); background:rgba(245,160,79,.10); }
.meme-state-badge.calibrating { animation:meme-state-pulse 1.15s ease-in-out infinite alternate; }
.meme-pack-field { display:grid; grid-template-columns:minmax(120px,180px) minmax(180px,320px) 1fr; align-items:center; gap:8px 12px; padding:9px 10px; border:1px solid rgba(var(--rooms-rgb-899ebe,137,158,190),0.13); border-radius:12px; background:rgba(255,255,255,.018); }
.meme-pack-field>span { color:rgb(var(--rooms-rgb-dce7f7,220,231,247)); font-size:9.5px; font-weight:800; }
.meme-pack-field select { min-width:0; height:34px; border:1px solid var(--line); border-radius:10px; padding:0 30px 0 10px; color:rgb(var(--rooms-rgb-e7eef8,231,238,248)); background:rgb(var(--rooms-rgb-0b1727,11,23,39)); font:700 9.5px/1 system-ui,sans-serif; }
.meme-pack-field small { min-width:0; color:rgb(var(--rooms-rgb-7f91aa,127,145,170)); font-size:8px; line-height:1.4; }
html[data-theme="light"] .meme-pack-field { background:rgba(255,255,255,.55); }
html[data-theme="light"] .meme-pack-field>span { color:rgb(var(--rooms-rgb-21344f,33,52,79)); }
html[data-theme="light"] .meme-pack-field select { color:rgb(var(--rooms-rgb-20334d,32,51,77)); background:#fff; }
@media(max-width:760px){.meme-pack-field{grid-template-columns:1fr}.meme-pack-field select{width:100%}}
.meme-settings-actions { display:flex; flex-wrap:wrap; gap:8px; }
.meme-settings-actions button { display:inline-flex; align-items:center; gap:7px; }
.meme-settings-actions svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; }
.meme-settings-status { display:block; min-height:16px; color:rgb(var(--rooms-rgb-8ea0b8,142,160,184)); font-size:9px; line-height:1.45; }
.meme-guide { border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.018); overflow:hidden; }
.meme-guide>summary { min-height:44px; display:flex; align-items:center; gap:9px; padding:0 12px; cursor:pointer; color:rgb(var(--rooms-rgb-dce7f7,220,231,247)); font-size:11px; font-weight:780; list-style:none; }
.meme-guide>summary::-webkit-details-marker { display:none; }
.meme-guide>summary::after { content:'⌄'; margin-left:auto; color:var(--muted); transition:transform .16s ease; }
.meme-guide[open]>summary::after { transform:rotate(180deg); }
.meme-guide>summary svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; }
.meme-guide-note { margin:0; padding:0 12px 10px; color:rgb(var(--rooms-rgb-8294ad,130,148,173)); font-size:9px; line-height:1.5; }
.meme-guide-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; padding:0 8px 8px; }
.meme-guide-item { min-width:0; display:grid; grid-template-columns:32px minmax(0,1fr) auto; align-items:center; gap:8px; padding:8px; border:1px solid rgba(var(--rooms-rgb-899ebe,137,158,190),0.13); border-radius:11px; background:rgba(255,255,255,.018); }
.meme-guide-emoji { display:grid; place-items:center; width:32px; height:32px; font-size:20px; }
.meme-guide-copy { min-width:0; display:grid; gap:2px; }
.meme-guide-copy b { font-size:10px; color:rgb(var(--rooms-rgb-dce7f7,220,231,247)); }
.meme-guide-copy small { color:rgb(var(--rooms-rgb-8294ad,130,148,173)); font-size:8px; line-height:1.4; }
.meme-guide-test { min-width:48px; padding-inline:8px; }
.meme-privacy-note { margin:0; color:rgb(var(--rooms-rgb-708198,112,129,152)); font-size:8px; line-height:1.45; }
html[data-theme="light"] .meme-guide { background:rgba(255,255,255,.55); }
html[data-theme="light"] .meme-guide>summary,html[data-theme="light"] .meme-guide-copy b { color:rgb(var(--rooms-rgb-21344f,33,52,79)); }
html[data-theme="light"] .meme-guide-note,html[data-theme="light"] .meme-guide-copy small,html[data-theme="light"] .meme-settings-status,html[data-theme="light"] .meme-privacy-note { color:rgb(var(--rooms-rgb-657b98,101,123,152)); }
@keyframes meme-state-pulse { from{opacity:.62} to{opacity:1} }
@media(max-width:700px){.meme-guide-list{grid-template-columns:1fr}.meme-guide-item{grid-template-columns:30px minmax(0,1fr) 48px}}
@media(prefers-reduced-motion:reduce){.meme-state-badge.calibrating{animation:none}.meme-guide>summary::after{transition:none}}

/* Sidebar layout uses the existing tiles. On narrow screens it gracefully becomes a main tile + compact thumbnail rail. */
.video-grid.sidebar-mode { display:grid; grid-template-columns:minmax(0,1fr) clamp(160px,22%,220px); gap:10px; min-height:0; align-content:stretch; overflow:hidden; }
.video-grid.sidebar-mode .participant-tile { min-height:0; }
.video-grid.sidebar-mode .participant-tile.is-focused { grid-column:1; grid-row:1 / -1; }
.video-grid.sidebar-mode .participant-tile:not(.is-focused) { grid-column:2; }
.video-grid.sidebar-mode .participant-tile:not(.is-focused) .participant-role,.video-grid.sidebar-mode .participant-tile:not(.is-focused) .media-state,.video-grid.sidebar-mode .participant-tile:not(.is-focused) .tile-actions { display:none; }
.video-grid.sidebar-mode .participant-tile:not(.is-focused) .participant-name { padding:5px 7px; font-size:9px; }

/* The room entry button shows current state, not the opposite action. */
#lockRoomBtn.room-entry-open svg { color:#64e6ac; }
#lockRoomBtn.room-entry-closed svg { color:#ff8d98; }

/* Unify video-tile administrator mark with the roster shield. */
.tile-action.admin-toggle { color:rgb(var(--rooms-rgb-bdd2ff,189,210,255)); border-color:rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.3); background:rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.08); }
.tile-action.admin-toggle.is-admin { color:#d6ffe6; border-color:rgba(75,211,137,.38); background:rgba(33,112,73,.20); }
.tile-action.admin-toggle svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.9; }

/* Chat send stays discoverable without being the brightest control in the panel. */
.chat-send { color:rgb(var(--rooms-rgb-cfe0ff,207,224,255)); border:1px solid rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.24); background:rgba(var(--rooms-rgb-5c84ee,92,132,238),0.14); box-shadow:none; }
.chat-send:hover:not(:disabled),.chat-send:focus-visible { color:rgb(var(--rooms-rgb-eef5ff,238,245,255)); border-color:rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.42); background:rgba(var(--rooms-rgb-5c84ee,92,132,238),0.24); }

/* Cleaner desktop workspace resize grip; functionality remains unchanged. */
.room-resize-handle { justify-content:center; padding:0; }
.room-resize-handle span { position:relative; width:64px; height:16px; border:1px solid rgba(var(--rooms-rgb-8ba4cc,139,164,204),0.14); border-radius:999px; background:rgba(var(--rooms-rgb-8ba4cc,139,164,204),0.055); box-shadow:none; opacity:.78; }
.room-resize-handle span::before { content:""; position:absolute; left:50%; top:5px; width:30px; height:2px; border:0; border-radius:999px; background:rgba(var(--rooms-rgb-8ba4cc,139,164,204),0.52); box-shadow:0 4px 0 rgba(var(--rooms-rgb-8ba4cc,139,164,204),0.34); transform:translateX(-50%); }
.room-resize-handle:hover span,.room-resize-handle:focus-visible span { width:64px; background:rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.07); border-color:rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.26); opacity:1; }

.board-text-formatting #boardTextAutoColorBtn { min-width:42px; padding-inline:7px; font-size:9px; }
.board-text-formatting #boardTextAutoColorBtn.active { color:rgb(var(--rooms-rgb-d7e5ff,215,229,255)); border-color:rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.38); background:rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.12); }

@media (max-width:900px) {
  .home-preferences { padding:12px; }
  .home-preferences-form { grid-template-columns:1fr 1fr; align-items:stretch; }
  .home-pref-name,.home-pref-layout { grid-column:1 / -1; }
  .home-preferences-form #saveHomePreferencesBtn { grid-column:1 / -1; min-height:40px; }
  .home-pref-toggle { min-height:42px; }
  .layout-menu { left:auto; right:55px; bottom:57px; transform:none; width:min(292px,calc(100vw - 82px)); }

  .video-grid.sidebar-mode { display:flex; flex-wrap:wrap; align-content:stretch; gap:8px; }
  .video-grid.sidebar-mode .participant-tile.is-focused { order:-1; flex:1 0 100%; height:auto; min-height:0; }
  .video-grid.sidebar-mode .participant-tile:not(.is-focused) { flex:1 1 28%; min-width:0; height:84px; min-height:70px; }
}

/* ORATOR Debate Category 12 corrective */
.orator-debate-panel{display:grid;gap:12px}.debate-panel-head h3{margin:0 0 4px}.debate-panel-head p{margin:0;color:var(--text-muted,rgb(var(--rooms-rgb-91a0b5,145,160,181)))}.orator-debate-status.error{color:#ff7b7b}.debate-actions{display:flex;flex-wrap:wrap;gap:8px}.debate-action{max-width:100%;white-space:normal;text-align:left}.orator-debate-panel details{border:1px solid rgba(var(--rooms-rgb-7f8ca0,127,140,160),0.2);border-radius:12px;padding:10px 12px}.orator-debate-panel summary{cursor:pointer;font-weight:700}.debate-chat-projection{border-left:3px solid rgba(245,166,35,.75)}

/* v0.20.0 local room video recording: media bytes remain browser-owned. */
.recording-action { min-width:138px; position:relative; }
.recording-action svg { color:#ff7e84; }
.recording-action.is-active { color:#ffe3e5; border-color:rgba(255,91,99,.48); background:rgba(139,31,38,.22); box-shadow:0 0 0 1px rgba(255,91,99,.08) inset; }
.recording-action.is-active svg { color:#ff5b63; }
.recording-room-indicator { min-height:36px; display:inline-flex; align-items:center; gap:7px; padding:0 10px; border:1px solid rgba(255,91,99,.38); border-radius:11px; color:#ffd9dc; background:rgba(93,20,27,.30); font-size:10px; font-weight:750; white-space:nowrap; }
.recording-room-indicator.hidden { display:none!important; }
.recording-room-indicator>i { width:8px; height:8px; border-radius:50%; background:#ff525c; box-shadow:0 0 0 4px rgba(255,82,92,.10),0 0 14px rgba(255,82,92,.42); animation:recording-dot-pulse 1.35s ease-in-out infinite; }
.recording-room-indicator>b { min-width:34px; color:#fff0f1; font-variant-numeric:tabular-nums; }
@keyframes recording-dot-pulse { 50% { opacity:.58; box-shadow:0 0 0 7px rgba(255,82,92,.035),0 0 8px rgba(255,82,92,.22); } }

.recording-setup-card { width:min(720px,calc(100vw - 28px)); padding:20px; border-radius:22px; }
.recording-setup-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:18px; }
.recording-setup-head>div { min-width:0; }
.recording-setup-head span { display:block; margin-bottom:6px; color:#ff8f94; font-size:9px; font-weight:850; letter-spacing:.11em; }
.recording-setup-head h2 { margin:0; font-size:24px; }
.recording-setup-head p { margin:7px 0 0; max-width:540px; color:rgb(var(--rooms-rgb-8293aa,130,147,170)); font-size:10px; line-height:1.5; }
.recording-scope-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:14px; }
.recording-scope-option { min-height:118px; display:flex; flex-direction:column; align-items:flex-start; gap:7px; padding:15px; text-align:left; border:1px solid rgb(var(--rooms-rgb-24344a,36,52,74)); border-radius:15px; color:rgb(var(--rooms-rgb-e5edf9,229,237,249)); background:rgb(var(--rooms-rgb-0a1420,10,20,32)); cursor:pointer; }
.recording-scope-option:hover { border-color:rgba(var(--rooms-rgb-6ea8ff,110,168,255),0.42); background:rgb(var(--rooms-rgb-0c1827,12,24,39)); }
.recording-scope-option.selected { border-color:rgba(var(--rooms-rgb-6ea8ff,110,168,255),0.78); background:linear-gradient(145deg,rgba(var(--rooms-rgb-335897,51,88,151),0.28),rgba(var(--rooms-rgb-0a1420,10,20,32),0.96)); box-shadow:0 0 0 1px rgba(var(--rooms-rgb-6ea8ff,110,168,255),0.13) inset; }
.recording-scope-option strong { font-size:14px; }
.recording-scope-option span { min-height:30px; color:rgb(var(--rooms-rgb-8799b1,135,153,177)); font-size:10px; line-height:1.45; }
.recording-scope-option em { margin-top:auto; color:rgb(var(--rooms-rgb-79aaff,121,170,255)); font-size:9px; font-style:normal; font-weight:800; }
.recording-destination { display:flex; flex-direction:column; gap:7px; margin-bottom:12px; }
.recording-destination-row { min-height:60px; display:grid; grid-template-columns:32px minmax(0,1fr) auto; align-items:center; gap:10px; padding:10px 12px; border:1px solid rgb(var(--rooms-rgb-26374e,38,55,78)); border-radius:13px; background:rgb(var(--rooms-rgb-09131f,9,19,31)); }
.recording-destination-row.selected { border-color:rgba(97,214,150,.45); background:rgba(25,80,56,.16); }
.recording-destination-row.disabled { opacity:.46; }
.recording-destination-row svg { width:20px; height:20px; color:rgb(var(--rooms-rgb-9fb5cf,159,181,207)); fill:none; stroke:currentColor; stroke-width:1.8; }
.recording-destination-row>div { display:flex; flex-direction:column; gap:3px; }
.recording-destination-row b { font-size:11px; }
.recording-destination-row small { color:rgb(var(--rooms-rgb-7f91a8,127,145,168)); font-size:9px; line-height:1.35; }
.recording-destination-row>span { padding:4px 7px; border-radius:999px; color:rgb(var(--rooms-rgb-93a8c1,147,168,193)); background:rgba(255,255,255,.045); font-size:8px; font-weight:800; }
.recording-compatibility-note,.recording-disclosure { margin-top:9px; padding:9px 11px; border:1px solid rgba(var(--rooms-rgb-7591b6,117,145,182),0.22); border-radius:11px; color:rgb(var(--rooms-rgb-93a4ba,147,164,186)); background:rgba(255,255,255,.024); font-size:9px; line-height:1.5; }
.recording-disclosure { color:#e8c68d; border-color:rgba(231,183,94,.23); background:rgba(120,80,14,.10); }
.recording-compatibility-note.warning { color:#ffd093; border-color:rgba(255,181,71,.30); background:rgba(120,73,9,.14); }
.recording-compatibility-note.error { color:#ffb0b4; border-color:rgba(255,91,99,.32); background:rgba(123,25,31,.14); }
.recording-local-fallback-warning { color:#ffd093; }

@media (max-width:900px) {
  #recordingBtn { display:none!important; }
  .recording-setup-card { width:min(100% - 12px,620px); max-height:calc(var(--app-viewport-height,100dvh) - 16px); overflow:auto; }
}
@media (max-width:520px) {
  .recording-setup-card { padding:16px; border-radius:18px; }
  .recording-scope-grid { grid-template-columns:1fr; }
  .recording-scope-option { min-height:92px; }
  .recording-room-indicator { min-height:32px; padding:0 8px; gap:6px; }
  .recording-room-indicator>span { display:none; }
}


/* v0.21.0 · Recent & Saved Rooms */
.home-room-history { width:min(860px,100%); margin-top:12px; }
.my-rooms-head-controls { display:flex; align-items:center; gap:8px; }
.section-collapse-control { min-height:34px; padding:0 11px; display:inline-flex; align-items:center; gap:7px; border-radius:10px; color:rgb(var(--rooms-rgb-c7d3e4,199,211,228)); background:rgba(255,255,255,.035); border:1px solid var(--line); font-size:9px; }
.section-collapse-chevron { width:12px; text-align:center; color:rgb(var(--rooms-rgb-9ab6ee,154,182,238)); }
.home-room-history.is-collapsed .room-history-body { display:none; }
.room-history-body { margin-top:14px; }
.room-history-tabs { display:flex; gap:7px; padding-bottom:11px; border-bottom:1px solid rgba(var(--rooms-rgb-809ac2,128,154,194),0.12); }
.room-history-tab { min-height:35px; padding:0 12px; border-radius:10px; color:rgb(var(--rooms-rgb-9baabd,155,170,189)); background:transparent; border:1px solid transparent; font-size:10px; }
.room-history-tab span { margin-left:5px; color:rgb(var(--rooms-rgb-718198,113,129,152)); font-size:9px; }
.room-history-tab.active { color:rgb(var(--rooms-rgb-eef4ff,238,244,255)); background:rgb(var(--rooms-rgb-132038,19,32,56)); border-color:rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.28); }
.room-history-tab.active span { color:rgb(var(--rooms-rgb-adc6f7,173,198,247)); }
.room-history-list { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.room-history-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; min-height:76px; padding:12px 13px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.025); }
.room-history-row.unavailable { opacity:.76; }
.room-history-copy { min-width:0; display:flex; flex-direction:column; gap:3px; }
.room-history-copy b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.room-history-copy small { color:rgb(var(--rooms-rgb-8797ac,135,151,172)); font-size:9px; }
.room-history-actions { display:flex; align-items:center; gap:6px; }
.room-history-star { width:36px; height:36px; padding:0; display:grid; place-items:center; border-radius:10px; color:rgb(var(--rooms-rgb-90a0b5,144,160,181)); background:rgba(255,255,255,.035); border:1px solid var(--line); font-size:18px; line-height:1; }
.room-history-star.saved { color:#ffd166; border-color:rgba(255,209,102,.32); background:rgba(255,209,102,.08); }
.room-history-enter { min-height:36px; padding:0 13px; border-radius:10px; font-size:9px; }
.room-history-menu { position:relative; }
.room-history-menu summary { width:36px; height:36px; display:grid; place-items:center; list-style:none; cursor:pointer; border:1px solid var(--line); border-radius:10px; color:rgb(var(--rooms-rgb-aab9cc,170,185,204)); background:rgba(255,255,255,.035); font-weight:800; letter-spacing:.08em; }
.room-history-menu summary::-webkit-details-marker { display:none; }
.room-history-menu-body { position:absolute; z-index:30; right:0; top:42px; width:180px; padding:6px; display:flex; flex-direction:column; gap:4px; border:1px solid var(--line); border-radius:12px; background:rgb(var(--rooms-rgb-0b1421,11,20,33)); box-shadow:0 18px 50px rgba(0,0,0,.42); }
.room-history-menu-body button { min-height:34px; padding:0 9px; text-align:left; border-radius:8px; color:rgb(var(--rooms-rgb-cbd6e6,203,214,230)); background:transparent; font-size:9px; }
.room-history-menu-body button:hover { background:rgba(var(--rooms-rgb-7ca6ff,124,166,255),0.08); }
.room-history-empty { margin-top:12px; min-height:92px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; padding:18px; border:1px dashed rgba(var(--rooms-rgb-809ac2,128,154,194),0.18); border-radius:14px; color:rgb(var(--rooms-rgb-7f90a7,127,144,167)); text-align:center; }
.room-history-empty strong { color:rgb(var(--rooms-rgb-b9c6d8,185,198,216)); font-size:11px; }
.room-history-empty span { max-width:430px; font-size:9px; line-height:1.5; }
html[data-theme="light"] .room-history-row { background:rgba(var(--rooms-rgb-35527a,53,82,122),0.035); }
html[data-theme="light"] .room-history-menu-body { color:rgb(var(--rooms-rgb-142033,20,32,51)); background:#f9fbfe; }
@media(max-width:820px) {
  .home-room-history { width:min(540px,100%); }
  .room-history-row { grid-template-columns:minmax(0,1fr); }
  .room-history-actions { justify-content:flex-end; }
  .room-history-enter { flex:1 1 auto; }
}
@media(max-width:420px) {
  .room-history-head { align-items:flex-start; }
  .room-history-head .my-rooms-head-controls { flex-direction:column; align-items:flex-end; }
  .room-history-tabs { display:grid; grid-template-columns:1fr 1fr; }
  .room-history-actions { width:100%; }
}

/* v0.21.9 owner corrective: stable four-control chat composer + local recording reopen. */
.chat-form {
  grid-template-columns:40px 40px minmax(0,1fr) 40px;
  gap:7px;
  align-items:end;
}
.chat-form textarea {
  height:40px;
  min-height:40px;
  max-height:132px;
  resize:none;
  overflow-y:hidden;
  transition:height .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.chat-form.is-expanded textarea { min-height:72px; }
.chat-speech,.chat-attach,.chat-send {
  width:40px;
  min-width:40px;
  height:40px;
  min-height:40px;
  align-self:end;
}
.chat-send.speech-submit { border-color:rgba(255,210,74,.55); box-shadow:0 0 0 1px rgba(255,210,74,.09) inset; }

.recording-library-button {
  width:100%;
  min-height:60px;
  display:grid;
  grid-template-columns:32px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  margin:0 0 3px;
  padding:10px 12px;
  text-align:left;
  border:1px solid rgba(var(--rooms-rgb-6ea8ff,110,168,255),0.28);
  border-radius:13px;
  color:rgb(var(--rooms-rgb-e5edf9,229,237,249));
  background:rgba(var(--rooms-rgb-436cb0,67,108,176),0.09);
}
.recording-library-button:hover:not(:disabled) { border-color:rgba(var(--rooms-rgb-6ea8ff,110,168,255),0.55); background:rgba(var(--rooms-rgb-436cb0,67,108,176),0.15); }
.recording-library-button svg { width:20px; height:20px; color:rgb(var(--rooms-rgb-a9c7f3,169,199,243)); fill:none; stroke:currentColor; stroke-width:1.8; }
.recording-library-button>div { min-width:0; display:flex; flex-direction:column; gap:3px; }
.recording-library-button b { font-size:11px; }
.recording-library-button small { color:rgb(var(--rooms-rgb-7f91a8,127,145,168)); font-size:9px; line-height:1.35; }
.recording-library-button>span { padding:4px 7px; border-radius:999px; color:rgb(var(--rooms-rgb-b8d3f6,184,211,246)); background:rgba(var(--rooms-rgb-6ea8ff,110,168,255),0.1); font-size:8px; font-weight:800; }

@media (max-width:520px) {
  .chat-form { grid-template-columns:39px 39px minmax(0,1fr) 39px; gap:6px; }
  .chat-speech,.chat-attach,.chat-send { width:39px; min-width:39px; height:39px; min-height:39px; }
  .recording-library-button { grid-template-columns:28px minmax(0,1fr) auto; padding:10px; }
}
.recording-preview-card { width:min(900px,calc(100vw - 28px)); padding:16px; border-radius:20px; }
.recording-preview-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:12px; }
.recording-preview-head span { display:block; margin-bottom:5px; color:rgb(var(--rooms-rgb-8eb8f6,142,184,246)); font-size:9px; font-weight:850; letter-spacing:.11em; }
.recording-preview-head h2 { margin:0; font-size:20px; }
.recording-preview-card video { width:100%; max-height:min(68vh,720px); display:block; border-radius:14px; background:rgb(var(--rooms-rgb-02060c,2,6,12)); }
.recording-preview-meta { margin-top:10px; color:rgb(var(--rooms-rgb-8293aa,130,147,170)); font-size:10px; line-height:1.45; overflow-wrap:anywhere; }
@media (max-width:520px) { .recording-preview-card { width:100%; padding:10px; border-radius:18px; } }

/* 0.21.47 account camera correction — real MediaStreamTrack controls, not CSS filters. */
.camera-correction-section{display:grid;grid-template-columns:minmax(300px,420px) minmax(0,1fr);column-gap:24px;row-gap:12px;align-items:start}
.camera-correction-inline{display:flex;flex-direction:column;gap:12px;margin-top:7px;padding-top:12px;border-top:1px solid var(--line)}
.camera-correction-section>.camera-correction-head{grid-column:1/-1}
.camera-correction-section>.camera-correction-preview.home-preview{grid-column:1;grid-row:2;width:100%;max-width:420px;align-self:start}
.camera-correction-section>.camera-correction-grid{grid-column:2;grid-row:2;align-self:start;padding-top:2px}
.camera-correction-section>.camera-correction-actions{grid-column:1/-1;grid-row:3}
.camera-correction-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.camera-correction-head h3{margin:0;font-size:12px;letter-spacing:.01em}
.camera-correction-head p{margin:4px 0 0;color:var(--muted);font-size:9px;line-height:1.45;max-width:560px}
.camera-correction-preview{position:relative;aspect-ratio:16/9;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:rgb(var(--rooms-rgb-050a11,5,10,17));display:grid;place-items:center}
.camera-correction-preview video{width:100%;height:100%;object-fit:contain;transform:none;background:rgb(var(--rooms-rgb-050a11,5,10,17))}
.camera-correction-preview.is-mirrored video{transform:scaleX(-1)}
.camera-correction-preview.home-preview{width:min(100%,420px);align-self:flex-start}
.camera-correction-preview.room-preview{width:min(100%,420px);align-self:flex-start;position:sticky;top:10px;z-index:2}
.camera-correction-preview.room-preview.hidden{display:none}
.camera-correction-placeholder{position:absolute;inset:0;display:grid;place-items:center;padding:18px;color:var(--muted);font-size:10px;text-align:center;background:linear-gradient(145deg,rgba(var(--rooms-rgb-0d1725,13,23,37),0.82),rgba(var(--rooms-rgb-050a11,5,10,17),0.88))}
.camera-correction-placeholder.hidden{display:none}
.camera-correction-grid{display:grid;gap:8px}
.camera-correction-row{display:grid;grid-template-columns:minmax(92px,1fr) minmax(140px,2fr) 42px;gap:10px;align-items:center;min-width:0}
.camera-correction-row>span{font-size:10px;color:var(--text)}
.camera-correction-row input[type="range"]{width:100%;accent-color:var(--accent)}
.camera-correction-row input[type="range"]:disabled{opacity:.34;cursor:not-allowed}
.camera-correction-row output{font-variant-numeric:tabular-nums;text-align:right;color:var(--muted);font-size:9px}
.camera-correction-row.unsupported>span,.camera-correction-row.unsupported output{opacity:.42}
.camera-correction-row.manual-locked>span,.camera-correction-row.manual-locked output{opacity:.52}
.camera-correction-row.capability-hidden,.camera-correction-mode-row.capability-hidden{display:none!important}
.camera-correction-mode-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 36px;gap:10px;align-items:center;min-height:36px;padding:6px 0;border-top:1px solid rgba(var(--rooms-rgb-899ebe,137,158,190),0.1)}
.camera-correction-mode-row>span{display:grid;gap:2px;min-width:0}.camera-correction-mode-row b{font-size:10px;color:var(--text)}.camera-correction-mode-row small{font-size:8px;line-height:1.35;color:var(--muted)}
.camera-correction-mode-row input{position:absolute;opacity:0;pointer-events:none}.camera-correction-mode-row i{position:relative;width:34px;height:19px;border:1px solid var(--line-strong);border-radius:999px;background:rgba(var(--rooms-rgb-899ebe,137,158,190),0.18);justify-self:end;transition:background .14s ease,border-color .14s ease}
.camera-correction-mode-row i::after{content:'';position:absolute;left:2px;top:2px;width:13px;height:13px;border-radius:50%;background:rgb(var(--rooms-rgb-aebbc9,174,187,201));transition:transform .14s ease,background .14s ease}
.camera-correction-mode-row input:checked+i{background:rgba(245,160,79,.26);border-color:rgba(245,160,79,.58)}.camera-correction-mode-row input:checked+i::after{transform:translateX(15px);background:var(--accent)}
.camera-correction-mode-row input:focus-visible+i{outline:2px solid var(--accent);outline-offset:3px}.camera-correction-mode-row input:disabled+i{opacity:.38;cursor:not-allowed}.camera-correction-mode-row.unsupported>span{opacity:.42}
.camera-correction-actions{display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap}
.camera-correction-actions small{color:var(--muted);font-size:9px;line-height:1.35}
html[data-theme="light"] .camera-correction-preview{background:rgb(var(--rooms-rgb-edf2f8,237,242,248))}
html[data-theme="light"] .camera-correction-placeholder{background:linear-gradient(145deg,rgba(246,249,252,.92),rgba(var(--rooms-rgb-e7edf4,231,237,244),0.92));color:rgb(var(--rooms-rgb-68768a,104,118,138))}
@media(max-width:860px){.camera-correction-section{grid-template-columns:1fr}.camera-correction-section>.camera-correction-head,.camera-correction-section>.camera-correction-preview.home-preview,.camera-correction-section>.camera-correction-grid,.camera-correction-section>.camera-correction-actions{grid-column:1;grid-row:auto}.camera-correction-section>.camera-correction-preview.home-preview{width:min(100%,520px);max-width:520px}}
@media(max-width:620px){.camera-correction-head{flex-direction:column}.camera-correction-head button{width:100%}.camera-correction-row{grid-template-columns:86px minmax(0,1fr) 42px;gap:7px}.camera-correction-mode-row{grid-template-columns:minmax(0,1fr) 36px}.camera-correction-preview.room-preview{position:relative;top:auto;width:100%}.camera-correction-preview.home-preview,.camera-correction-section>.camera-correction-preview.home-preview{width:100%;max-width:none}}

/* Buddy Rooms 0.21.61 — Orator duel presentation. */
.orator-debate-panel{display:grid;gap:12px}.debate-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.debate-panel-head h3{margin:0 0 3px}.debate-panel-head p{margin:0;color:var(--text-muted,rgb(var(--rooms-rgb-91a0b5,145,160,181)))}
.debate-state-badge{display:inline-flex;align-items:center;gap:6px;width:max-content;max-width:100%;padding:5px 9px;border-radius:999px;border:1px solid rgba(245,160,79,.28);background:rgba(245,160,79,.08);color:#f5b36e;font-size:12px;font-weight:700}.debate-state-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px rgba(245,160,79,.08)}
.debate-start-card{display:grid;gap:10px;padding:14px;border:1px solid rgba(var(--rooms-rgb-7f8ca0,127,140,160),0.22);border-radius:14px;background:rgba(255,255,255,.018)}.debate-start-card p{margin:0;color:var(--text-muted,rgb(var(--rooms-rgb-91a0b5,145,160,181)));line-height:1.45}.debate-primary{justify-self:start;min-height:42px;padding:0 16px;border-radius:11px;font-weight:800}.debate-secondary{background:transparent;border-color:rgba(var(--rooms-rgb-7f8ca0,127,140,160),0.26)}
.orator-debate-panel details{border:1px solid rgba(var(--rooms-rgb-7f8ca0,127,140,160),0.22);border-radius:13px;padding:0;background:rgba(255,255,255,.012);overflow:hidden}.orator-debate-panel summary{cursor:pointer;font-weight:750;list-style:none;padding:11px 12px;display:flex;align-items:center;gap:8px}.orator-debate-panel summary::-webkit-details-marker{display:none}.orator-debate-panel summary::before{content:"›";display:inline-block;font-size:18px;line-height:1;transform:rotate(0deg);transition:transform .16s ease;opacity:.75}.orator-debate-panel details[open] summary::before{transform:rotate(90deg)}.debate-section-body{padding:0 12px 12px}
.debate-topic-options{display:grid;gap:7px}.debate-topic-option{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:9px;width:100%;padding:10px 11px;border:1px solid rgba(var(--rooms-rgb-7f8ca0,127,140,160),0.22);border-radius:11px;background:rgba(255,255,255,.018);color:inherit;text-align:left;cursor:pointer}.debate-topic-option:hover{border-color:rgba(245,160,79,.42);background:rgba(245,160,79,.055)}.debate-topic-index{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:rgba(245,160,79,.12);color:#f5b36e;font-size:11px;font-weight:800}.debate-topic-copy{min-width:0;line-height:1.38}.debate-topic-selected{margin:0 0 10px;font-weight:750;line-height:1.42}
.debate-side-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.debate-side-card{display:grid;gap:8px;padding:11px;border:1px solid rgba(var(--rooms-rgb-7f8ca0,127,140,160),0.22);border-radius:12px;background:rgba(255,255,255,.018)}.debate-side-card.selected{border-color:rgba(245,160,79,.55);background:rgba(245,160,79,.07)}.debate-side-label{font-weight:800;line-height:1.3}.debate-side-owner{font-size:12px;color:var(--text-muted,rgb(var(--rooms-rgb-91a0b5,145,160,181)))}.debate-side-card button{justify-self:start}
.debate-participant-list{display:grid;gap:7px}.debate-participant-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 10px;border:1px solid rgba(var(--rooms-rgb-7f8ca0,127,140,160),0.17);border-radius:11px;background:rgba(255,255,255,.015)}.debate-participant-name{font-weight:750}.debate-participant-meta{margin-top:2px;color:var(--text-muted,rgb(var(--rooms-rgb-91a0b5,145,160,181)));font-size:12px;line-height:1.35}.debate-starter-badge{padding:4px 7px;border-radius:999px;background:rgba(245,160,79,.10);color:#f5b36e;font-size:10px;font-weight:800}.debate-inline-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.debate-round-card{display:grid;gap:8px}.debate-round-title{font-size:15px;font-weight:850}.debate-turn-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.debate-turn-item{padding:8px 9px;border-radius:10px;background:rgba(255,255,255,.025)}.debate-turn-item span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted,rgb(var(--rooms-rgb-91a0b5,145,160,181)))}.debate-turn-item strong{display:block;margin-top:3px}.debate-actions{display:flex;flex-wrap:wrap;gap:8px}.debate-action{max-width:100%;white-space:normal;text-align:left}
@media (max-width:560px){.debate-side-grid,.debate-turn-grid{grid-template-columns:1fr}.debate-panel-head{display:grid}.debate-start-card .debate-primary{width:100%;justify-content:center}}

@media (max-width:520px) { .microphone-route-row { align-items:stretch; flex-direction:column; } .microphone-route-row .compact { width:100%; } }

/* 0.21.74 microphone recovery and dock-local meme help. */
.iphone-mic-recovery-hint{display:block;margin:-2px 0 2px;padding:8px 10px;border:1px solid rgba(245,160,79,.28);border-radius:10px;color:#d5b38c;background:rgba(245,160,79,.07);font-size:8.5px;line-height:1.45}
html[data-theme="light"] .iphone-mic-recovery-hint{color:#76502b;background:rgba(245,160,79,.10)}
.meme-quick-notice,.meme-quick-guide-panel{--meme-quick-x:50%;pointer-events:auto;position:absolute;z-index:82;left:var(--meme-quick-x);transform:translateX(-50%);border:1px solid rgba(245,160,79,.32);background:rgb(var(--rooms-rgb-0b1421,11,20,33));color:rgb(var(--rooms-rgb-eaf1fb,234,241,251));box-shadow:0 18px 55px rgba(0,0,0,.48)}
.meme-quick-notice{bottom:62px;min-height:38px;display:flex;align-items:center;gap:8px;padding:5px 6px 5px 12px;border-radius:13px;font-size:10px;font-weight:760;white-space:nowrap}
.meme-quick-notice.hidden,.meme-quick-guide-panel.hidden{display:none!important}
.meme-quick-info{width:28px;height:28px;display:grid;place-items:center;padding:0;border:0;border-radius:9px;color:#f5a04f;background:rgba(245,160,79,.10)}
.meme-quick-info:hover,.meme-quick-info:focus-visible{background:rgba(245,160,79,.20)}
.meme-quick-info svg,.meme-quick-guide-head svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9}
.meme-quick-guide-panel{bottom:108px;width:min(380px,calc(100vw - 24px));max-height:min(430px,calc(var(--app-viewport-height,100dvh) - 150px));overflow:auto;padding:10px;border-radius:16px}
.meme-quick-guide-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px}.meme-quick-guide-head b{font-size:11px}.meme-quick-guide-panel>p{margin:0 0 8px;color:rgb(var(--rooms-rgb-879ab4,135,154,180));font-size:8.5px;line-height:1.45}
.meme-quick-guide-list{display:grid;gap:5px}.meme-quick-guide-item{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:7px;padding:7px 8px;border:1px solid rgba(var(--rooms-rgb-899ebe,137,158,190),0.13);border-radius:10px;background:rgba(255,255,255,.018)}
.meme-quick-guide-item>span:first-child{font-size:18px;text-align:center}.meme-quick-guide-item>span:last-child{display:grid;gap:1px}.meme-quick-guide-item b{font-size:9.5px}.meme-quick-guide-item small{color:rgb(var(--rooms-rgb-8092aa,128,146,170));font-size:8px;line-height:1.35}
html[data-theme="light"] .meme-quick-notice,html[data-theme="light"] .meme-quick-guide-panel{background:#fbfcfe;color:rgb(var(--rooms-rgb-20334d,32,51,77));box-shadow:0 18px 50px rgba(var(--rooms-rgb-223650,34,54,80),0.22)}
@media(max-width:900px){.meme-quick-notice,.meme-quick-guide-panel{left:50%;--meme-quick-x:50%!important}.meme-quick-notice{bottom:58px}.meme-quick-guide-panel{bottom:104px;width:min(340px,calc(100vw - 20px))}}

/* UX-20260912 G11: personal assignment welcome, native dock icon and equal actions. */
.training-welcome{box-sizing:border-box;width:min(460px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:28px;border:1px solid var(--border,rgb(var(--rooms-rgb-555555,85,85,85)));border-radius:24px;background:var(--panel,rgb(var(--rooms-rgb-191c25,25,28,37)));color:var(--text,#f4f4f4);box-shadow:0 24px 80px #0008}
.training-welcome::backdrop{background:#0009}
.training-welcome h2{margin:0 0 16px;font-size:25px;line-height:1.2;text-align:left}
.training-welcome p{font-size:16px;line-height:1.55;margin:14px 0}
.training-welcome-dock{display:flex;align-items:center;gap:14px;border-radius:16px;padding:16px;background:linear-gradient(125deg,#ffbd4226,#f68b1b12);border:1px solid #ffb44055}
.training-welcome-dock span{display:grid;place-items:center;width:48px;height:48px;flex:none;background:var(--accent,#ffb440);color:#21180d;border-radius:14px}
.training-welcome-dock svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8}
.training-welcome-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}
.training-welcome-actions button{width:100%;min-height:48px;padding:10px 8px;white-space:normal}
@media(max-width:480px){.training-welcome{padding:22px}.training-welcome h2{font-size:23px}.training-welcome-actions{gap:10px}}

.meme-pack-field { grid-template-columns:minmax(120px,180px) minmax(240px,1fr) 1fr; align-items:start; }
.meme-pack-picker{min-width:0;display:grid;gap:8px}
.meme-pack-cards,.meme-quick-pack-cards{min-width:0;width:100%;max-width:100%}
.meme-pack-cards:not(.orator-segmented),.meme-quick-pack-cards:not(.orator-segmented){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;padding:3px;border:1px solid var(--segmented-border,rgb(var(--rooms-rgb-253c5a,37,60,90)));border-radius:16px;background:var(--segmented-bg,rgb(var(--rooms-rgb-081220,8,18,32)))}
.meme-pack-segment{box-sizing:border-box;min-width:0;min-height:34px;border:0;border-radius:14px;padding:0 8px;background:transparent;color:var(--segmented-text,rgb(var(--rooms-rgb-8d9bb0,141,155,176)));font:700 13px/1.2 inherit;cursor:pointer}
.meme-pack-segment:hover,.meme-pack-segment:focus-visible{color:var(--segmented-hover-text,#F5A04F)}
.meme-pack-segment[aria-checked="true"]{color:var(--segmented-text-active-rest,rgb(var(--rooms-rgb-cbd5e3,203,213,227)))}
.meme-pack-segment:disabled{cursor:default;opacity:.45}
.meme-guide-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.meme-guide-item{grid-template-columns:44px minmax(0,1fr) auto}
.meme-guide-preview,.meme-quick-guide-preview{width:42px;height:42px;border-radius:10px;overflow:hidden;background:rgba(255,255,255,.04);display:grid;place-items:center;border:1px solid rgba(var(--rooms-rgb-899ebe,137,158,190),0.14)}
.meme-guide-preview img,.meme-quick-guide-preview img{width:100%;height:100%;object-fit:cover;display:block}
.meme-guide-emoji{position:absolute;right:4px;bottom:2px;width:auto;height:auto;font-size:13px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.meme-guide-media{position:relative;width:42px;height:42px}
.meme-guide-copy b{font-size:10.5px}.meme-guide-copy small{font-size:8.4px}
.meme-quick-guide-list{gap:6px}.meme-quick-guide-item{grid-template-columns:38px minmax(0,1fr);gap:8px}.meme-quick-guide-item b{font-size:10px}.meme-quick-guide-item small{font-size:8.2px}
/* Stage E / approved 2A: visible pack switch is shared R6 Memes/Cats; select remains a compatibility fallback only. */
.meme-pack-picker>select{display:none!important}
.meme-guide-copy b{font-size:11.5px}.meme-guide-copy small{font-size:10.4px;line-height:1.45}
.meme-quick-guide-item b{font-size:11px}.meme-quick-guide-item small{font-size:10px;line-height:1.42}

/* 0.21.162 · Patch109 Stage 2 — participant row contract.
   Moderator actions stay on one row; device state is indicator-only, never button chrome. */
.participant-row-status .participant-status-indicator.off,
html[data-theme="light"] .participant-row-status .participant-status-indicator.off {
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
@media (max-width:520px) {
  .participant-row-controls { gap:5px; }
  .participant-row-actions { gap:3px; }
  .participant-row-divider { height:20px; margin-inline:1px; }
  .participant-row-status { gap:3px; }
  .participant-row-status .participant-status-indicator { width:22px; min-width:22px; height:22px; }
  .participant-row-status svg { width:16px; height:16px; }
}


/* Approved Buddy Rooms brand image; account avatars remain independently owned. */
.brand-mark img { display:block; width:31px; height:31px; object-fit:contain; border-radius:7px; }

#boardCanvas.background-chalk-graphite { background-color:#25282a; }

/* Auto sizes each card to the selected live video; manual frame shapes retain their own fitter. */
html[data-theme][data-buddy-room-view="active"] #roomView #videoGrid.camera-geometry-mode {
  display:block!important;position:relative!important;overflow:hidden!important;min-width:0;
}
html[data-theme][data-buddy-room-view="active"] #roomView #videoGrid.camera-geometry-mode.camera-geometry-scroll {
  overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior-y:contain;
}
html[data-theme][data-buddy-room-view="active"] #roomView #videoGrid.camera-geometry-mode>.participant-tile {
  position:absolute!important;left:var(--camera-frame-left)!important;top:var(--camera-frame-top)!important;
  width:var(--camera-frame-width)!important;height:var(--camera-frame-height)!important;
  min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;margin:0!important;
}
html[data-theme][data-buddy-room-view="active"] #roomView #videoGrid.camera-geometry-mode>.participant-tile video {
  object-fit:contain!important;
}