:root{--acc:#6a2fb0;--mint:#18a383;--stage:#1b0f2e}
.top{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:12px;padding:10px 18px;background:rgba(250,248,253,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:700;font-size:17px}
.brand .logo{width:34px;height:34px;border-radius:11px;background:var(--grad);display:flex;align-items:center;justify-content:center;color:#fff}
.tabs{display:flex;gap:4px;background:var(--p1);padding:4px;border-radius:12px;margin-inline-start:12px}
.tabs button{border:0;background:none;padding:6px 14px;border-radius:9px;font-weight:700;cursor:pointer;color:var(--ink2);display:flex;gap:6px;align-items:center;position:relative}
.tabs button[aria-selected=true]{background:#fff;color:var(--p8);box-shadow:0 1px 3px rgba(36,9,63,.12)}
.tabs .dot{position:absolute;top:4px;inset-inline-end:6px;width:8px;height:8px;border-radius:50%;background:var(--mint)}
.acct{margin-inline-start:auto;display:flex;gap:8px;align-items:center}
.wrap{max-width:1100px;margin:0 auto;padding:24px 18px 80px}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:stretch}
.hero .card{padding:22px}
.hero h1{font-size:26px;line-height:1.3;margin:0 0 6px}
.acts-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.joinf{display:flex;gap:8px;margin-top:14px}.joinf .inp{flex:1}
.rooms{margin-top:22px}.rooms h2{font-size:17px;margin:0 0 10px;display:flex;align-items:center;gap:8px}
.room-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line)}
.room-row:last-child{border-bottom:0}
.room-row .when{width:64px;text-align:center;flex:none;border-radius:12px;background:var(--p1);color:var(--p8);padding:6px 4px;font-weight:700;font-size:13px;line-height:1.3}
.room-row .ttl{font-weight:700}.room-row .meta{font-size:13px;color:var(--mut)}
.room-row .grow{flex:1;min-width:0}.room-row .grow>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live{color:var(--mint);font-weight:700}
.empty{padding:28px;text-align:center;color:var(--mut)}
.mini-stage{background:var(--stage);border-radius:16px;min-height:220px;position:relative;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:6px}
.mini-stage div{border-radius:12px;background:linear-gradient(135deg,#3b1366,#5c2a99);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:20px}
.mini-stage div:nth-child(2){background:linear-gradient(135deg,#21604f,#18a383)}.mini-stage div:nth-child(3){background:linear-gradient(135deg,#4f1d86,#8650d6)}.mini-stage div:nth-child(4){background:linear-gradient(135deg,#6a2fb0,#c9b3f0)}
/* prejoin */
.pre{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;max-width:980px;margin:0 auto;padding:28px 18px}
.pv{position:relative;aspect-ratio:16/9;background:var(--stage);border-radius:20px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.pv video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.pv .ctl{position:absolute;bottom:14px;inset-inline:0;display:flex;justify-content:center;gap:10px}
.rb{width:48px;height:48px;border-radius:50%;border:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;background:rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(6px);position:relative}
.rb:hover{background:rgba(255,255,255,.26)}.rb.off{background:#fff;color:var(--p8)}.rb.on{background:var(--mint);color:#fff}
.rb .badge{position:absolute;top:-2px;inset-inline-end:-2px;min-width:18px;height:18px;border-radius:9px;background:var(--mint);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px}
.rb.leave{width:auto;padding:0 18px;border-radius:24px;background:linear-gradient(135deg,#3b1366,#6a2fb0);gap:8px;font-weight:700;color:#fff}
.pv .noc{color:#fff;opacity:.8;text-align:center}
.pv .lvl{position:absolute;top:12px;inset-inline-start:12px;display:flex;gap:3px;align-items:flex-end;height:18px}
.pv .lvl i{width:4px;background:var(--mint);border-radius:2px;height:4px;transition:height .1s}
/* room */
body.inroom{background:var(--stage);overflow:hidden}
.room{position:fixed;inset:0;display:flex;flex-direction:column;color:#fff}
body.inroom .menu,body.inroom .dlg,body.inroom .back{color:var(--ink)}
.rtop{display:flex;align-items:center;gap:10px;padding:10px 16px;color:#fff}
.rtop .ttl{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rtop .clock{opacity:.7;font-size:13px}
.rtop .btn{background:rgba(255,255,255,.1);border-color:transparent;color:#fff}
.rmain{flex:1;display:flex;min-height:0;position:relative}
.stage{flex:1;position:relative;padding:8px 12px;min-width:0;overflow:hidden}
.grid{position:absolute;inset:8px 12px;display:grid;gap:10px;align-content:center;justify-content:center;transition:transform .25s ease}
.tile{position:relative;background:#2a1a45;border-radius:16px;overflow:hidden;display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;min-width:0;min-height:0;transition:box-shadow .2s}
.tile video{width:100%;height:100%;object-fit:cover;background:#2a1a45}
.tile.me video{transform:scaleX(-1)}.tile.me.screen video,.tile.screen video{object-fit:contain;transform:none}
.tile .ava{width:72px;height:72px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700;color:#fff;position:absolute}
.tile.vid .ava{display:none}.tile:not(.vid) video{opacity:0}
.tile .nm{position:absolute;bottom:8px;inset-inline-start:8px;background:rgba(20,8,36,.62);padding:2px 10px;border-radius:8px;font-size:13px;display:flex;gap:6px;align-items:center;max-width:calc(100% - 16px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .hd{position:absolute;top:8px;inset-inline-start:8px;background:#f5c542;color:#3b1366;border-radius:10px;padding:3px 8px;font-size:13px;font-weight:700;display:none;gap:4px;align-items:center}
.tile.hand .hd{display:flex}
.tile.speak{box-shadow:0 0 0 3px var(--mint)}
.tile .cs{position:absolute;top:8px;inset-inline-end:8px;background:rgba(20,8,36,.62);border-radius:8px;padding:2px 8px;font-size:12px;display:none}
.tile.conn .cs{display:block}
.stage.present .grid{inset:auto 12px 8px;height:120px;grid-auto-flow:column;grid-auto-columns:160px;justify-content:center;align-content:stretch}
.stage.present .tile{aspect-ratio:auto}
.pres{position:absolute;inset:8px 12px 140px;display:none;border-radius:16px;overflow:hidden;background:#000}
.stage.present .pres{display:block}.pres video{width:100%;height:100%;object-fit:contain}
.pres .nm{position:absolute;top:10px;inset-inline-start:10px;background:rgba(20,8,36,.7);padding:3px 10px;border-radius:8px;font-size:13px}
.caps{position:absolute;bottom:18px;inset-inline:0;margin:auto;width:min(760px,90%);text-align:center;pointer-events:none;z-index:5}
.caps div{display:inline-block;background:rgba(10,4,20,.78);padding:4px 12px;border-radius:8px;margin:2px;font-size:16px}
.ctrl{display:flex;justify-content:center;align-items:center;gap:10px;padding:12px 12px calc(12px + env(safe-area-inset-bottom));flex-wrap:nowrap}
.side{width:340px;background:#fff;color:var(--ink);display:none;flex-direction:column;border-radius:16px;margin:8px 12px 8px 0;overflow:hidden}
[dir=rtl] .side{margin:8px 0 8px 12px}
.room.panel .side{display:flex}
.side .sh{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line);font-weight:700}
.side .sh .x{margin-inline-start:auto}
.side .sb{flex:1;overflow:auto;padding:12px 14px}
.side .sf{border-top:1px solid var(--line);padding:10px;display:flex;gap:8px}
.cm{margin-bottom:10px}.cm .who{font-size:12px;color:var(--mut);display:flex;gap:6px}.cm .who b{color:var(--ink2)}
.cm .tx{white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}
.cm.sys{font-size:12px;color:var(--mut);text-align:center}
.cm.cap .tx{color:var(--ink2);font-style:italic}
.pp{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.pp .grow{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp .ic{color:var(--mut)}
.lobbyq{background:var(--p1);border-radius:12px;padding:10px;margin-bottom:12px}
.switch{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;font-size:14px}
.wait{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center}
.wait .card{padding:28px;max-width:440px}
/* channels */
.chwrap{display:grid;grid-template-columns:280px 1fr;height:calc(100dvh - 59px)}
.chlist{border-inline-end:1px solid var(--line);overflow:auto;background:#fff;padding:10px}
.chlist .hd{display:flex;align-items:center;justify-content:space-between;padding:6px 6px 10px;font-weight:700}
.chi{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;padding:9px 10px;border-radius:11px;cursor:pointer;text-align:start}
.chi:hover{background:var(--p1)}.chi[aria-current=true]{background:var(--p2);color:var(--p8)}
.chi .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.chi .un{background:var(--mint);color:#fff;border-radius:10px;padding:0 7px;font-size:12px;font-weight:700}
.chpane{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg)}
.chhead{display:flex;align-items:center;gap:8px;padding:10px 16px;border-bottom:1px solid var(--line);background:#fff;flex-wrap:wrap}
.chhead .t{flex:1;min-width:140px}.chhead .t b{font-size:16px}.chhead .t div{font-size:12px;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msgs{flex:1;overflow:auto;padding:14px 16px}
.msg{display:flex;gap:10px;padding:6px 8px;border-radius:12px;position:relative}
.msg:hover{background:#fff}
.msg .body{flex:1;min-width:0}.msg .who{font-size:13px}.msg .who b{margin-inline-end:6px}.msg .who span{color:var(--mut);font-size:12px}
.msg .tx{white-space:pre-wrap;overflow-wrap:anywhere}
.msg .quote{border-inline-start:3px solid var(--p3);padding-inline-start:8px;color:var(--mut);font-size:13px;margin-bottom:2px}
.msg .rx{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}
.msg .rx button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:0 8px;font-size:13px;cursor:pointer}
.msg .rx button.me{border-color:var(--p5);background:var(--p1)}
.msg .mm{position:absolute;top:2px;inset-inline-end:6px;display:none}
.msg:hover .mm,.msg.sel .mm{display:flex}
.msg.sys{justify-content:center;color:var(--mut);font-size:12px}
.meetcard{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 12px;margin-top:4px;max-width:420px}
.composer{padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line)}
.composer .rep{font-size:12px;color:var(--mut);display:flex;gap:6px;align-items:center;margin-bottom:6px}
.composer form{display:flex;gap:8px;align-items:flex-end}
.composer textarea{flex:1;min-height:44px;max-height:160px;resize:none;border:1px solid var(--line);border-radius:12px;padding:10px 12px;outline:none}
.composer textarea:focus{border-color:var(--p5);box-shadow:0 0 0 3px var(--p2)}
@media (max-width:860px){.hero{grid-template-columns:1fr}.pre{grid-template-columns:1fr}.side{position:absolute;inset:0;margin:0!important;width:auto;border-radius:0;z-index:20}}
@media (max-width:760px){
 .top{padding:8px 12px;gap:8px}.brand span{display:none}.tabs{margin-inline-start:0}.tabs button{padding:6px 10px}
 .wrap{padding:16px 12px 80px}
 .chwrap{grid-template-columns:1fr;height:calc(100dvh - 53px)}
 .chwrap.open .chlist{display:none}.chwrap:not(.open) .chpane{display:none}
 .ctrl{gap:6px;padding-inline:6px}.rb{width:44px;height:44px}.rb.leave{padding:0 12px}.rb.leave span{display:none}
 .grid{gap:6px;inset:4px 6px}.stage{padding:4px 6px}.tile{border-radius:12px}
 .rtop{padding:8px 10px}.hide-sm{display:none!important}
 .stage.present .grid{height:90px;grid-auto-columns:120px}.stage.present .pres{bottom:104px}
 .msg .mm{display:none}.msg.sel .mm{display:flex}
}

@media (max-width:420px){.ctrl{gap:4px}.rb{width:40px;height:40px}.rb .ic{width:18px;height:18px}.rb.leave{width:40px;padding:0}}
.switch input[type=checkbox]{appearance:none;width:42px;height:24px;border-radius:12px;background:var(--line);position:relative;cursor:pointer;transition:.2s;flex:none}.switch input[type=checkbox]::after{content:'';position:absolute;top:3px;inset-inline-start:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:.2s}.switch input:checked{background:var(--p6)}.switch input:checked::after{inset-inline-start:21px}
body.inroom .toast{bottom:calc(92px + env(safe-area-inset-bottom));top:auto}

/* ===== Oct 14: call bar, sheets, effects, whiteboard, polls, Q&A, validation, motion ===== */
:root{--ease:cubic-bezier(.2,.8,.2,1)}
.rb.on{background:#e7dcfa;color:var(--p8)}
.ctrl{gap:14px}
.ctrl .cg{display:flex;gap:8px;align-items:flex-start}
.ctrl .rb{flex-direction:column;gap:0;transition:transform .15s var(--ease),background .2s}
.rb .lb{display:none}
.rb.pressed{animation:rbp .28s var(--ease)}
@keyframes rbp{0%{transform:scale(1)}40%{transform:scale(.88)}100%{transform:scale(1)}}
@media (min-width:900px){
 .ctrl .rb:not(.leave){width:64px;height:58px;border-radius:16px}
 .ctrl .rb .lb{display:block;font-size:11px;font-weight:700;margin-top:3px;opacity:.9;white-space:nowrap;max-width:62px;overflow:hidden;text-overflow:ellipsis}
 .ctrl .rb.leave{height:48px;margin-top:5px}
}
.rb.leave{background:linear-gradient(135deg,#2a0d4a,#5b25a0)!important}
.rb.leave:hover{filter:brightness(1.12)}
.rtop .rlogo{width:28px;height:28px;border-radius:9px;background:var(--grad);display:flex;align-items:center;justify-content:center}
.rtop .rlock{color:#e7dcfa;display:flex}
.rtop .rcnt{background:rgba(255,255,255,.12);color:#fff;border:0;cursor:pointer;min-height:32px}
.rtop .rcopy{min-width:110px}
/* feedback at the control */
.done-morph{background:#e7dcfa!important;color:var(--p8)!important;border-color:#c9b3f0!important;animation:dm .3s var(--ease)}
.done-morph.done-bad{background:#fff4e5!important;color:#8a5a00!important}
.rb.done-morph{width:auto;padding:0 12px;flex-direction:row;gap:6px;font-size:12px;font-weight:700}
@keyframes dm{0%{transform:scale(.92)}60%{transform:scale(1.04)}100%{transform:scale(1)}}
.atip{position:fixed;z-index:1200;display:flex;gap:6px;align-items:center;background:#fff;color:var(--p8);border:1px solid #e7dcfa;box-shadow:0 10px 30px rgba(36,9,63,.22);border-radius:12px;padding:7px 12px;font-size:13px;font-weight:700;opacity:0;transform:translateY(6px) scale(.94);transition:opacity .2s var(--ease),transform .25s var(--ease);pointer-events:none;max-width:min(320px,92vw)}
.atip.on{opacity:1;transform:none}
.atip svg{color:var(--p6);flex:none}
/* inline validation */
.inwrap{position:relative;display:flex;align-items:center}
.inwrap>svg{position:absolute;inset-inline-start:12px;color:var(--mut);pointer-events:none}
.inwrap input{padding-inline-start:38px}
.fld.bad input,.fld.bad textarea{border-color:#8650d6!important;box-shadow:0 0 0 3px #efe6fd!important;background:#fdfbff}
.ferr{display:flex;gap:6px;align-items:center;color:#5b25a0;font-size:12.5px;font-weight:700;animation:fe .22s var(--ease)}
.ferr svg{width:14px;height:14px;background:#e7dcfa;border-radius:50%;padding:2px;flex:none}
@keyframes fe{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.shake{animation:shk .36s var(--ease)}
@keyframes shk{0%,100%{transform:none}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.spin{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
/* prejoin */
.pre-l{display:flex;flex-direction:column;gap:12px;min-width:0}
.pv.nomir video{transform:none}
.pv .noc{display:flex;flex-direction:column;align-items:center;gap:10px}
.av.xl{width:84px;height:84px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:700;color:#fff}
.pv .fxon{position:absolute;top:12px;inset-inline-end:12px;background:rgba(36,9,63,.62);color:#fff;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:700;display:flex;gap:6px;align-items:center;backdrop-filter:blur(6px);animation:fe .25s var(--ease)}
.pre-tools{display:flex;gap:10px;flex-wrap:wrap}
.ptool{flex:1;min-width:150px;min-height:44px;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:#fff;border-radius:14px;font-weight:700;color:var(--p8);cursor:pointer;transition:transform .15s var(--ease),box-shadow .2s,border-color .2s}
.ptool:hover{border-color:var(--p3);box-shadow:0 6px 18px rgba(106,47,176,.12);transform:translateY(-1px)}
.copy-inv{margin-top:6px}
.join-btn{gap:8px}
.pre-r{animation:slidein .35s var(--ease)}.pre-l{animation:fadein .35s var(--ease)}
@keyframes slidein{from{opacity:0;transform:translateX(calc(var(--dir,1)*16px))}to{opacity:1;transform:none}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
[dir=rtl]{--dir:-1}
/* dialogs */
.dh{display:flex;gap:10px;align-items:center}.dh svg{color:var(--p6)}
.fxdlg,.setdlg{width:min(720px,100%)!important}
.setg{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.sett{display:flex;gap:8px;align-items:center;font-weight:700;color:var(--ink2);margin-bottom:8px}
.setpv{aspect-ratio:16/9;background:var(--stage);border-radius:14px;overflow:hidden;margin-bottom:10px}.setpv video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.setpv.nomir video{transform:none}
.dpk{display:flex;flex-direction:column;gap:6px}
.dpk button{display:flex;align-items:center;gap:10px;min-height:44px;border:1px solid var(--line);border-radius:12px;background:#fff;padding:6px 12px;cursor:pointer;text-align:start;transition:border-color .2s,background .2s,transform .15s}
.dpk button:hover{border-color:var(--p3)}
.dpk button[aria-checked=true]{border-color:var(--p5);background:var(--p1);box-shadow:0 0 0 3px #efe6fd}
.dpk .dpi{width:30px;height:30px;border-radius:9px;background:var(--p1);color:var(--p7);display:flex;align-items:center;justify-content:center;flex:none}
.dpk .dpn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.dpk .dpc{color:var(--p6);opacity:0;transform:scale(.6);transition:.2s var(--ease)}
.dpk button[aria-checked=true] .dpc{opacity:1;transform:none}
.dpk-empty{color:var(--mut);font-size:13px;padding:10px;border:1px dashed var(--line);border-radius:12px;display:flex;gap:8px;align-items:center}
.fxmeter{height:10px;border-radius:6px;background:var(--p1);overflow:hidden;min-width:120px;flex:1}
.fxmeter.big{height:12px;margin-bottom:10px}
.fxmeter i{display:block;height:100%;background:linear-gradient(90deg,#8650d6,#4f1d86);transform-origin:var(--from,left);transform:scaleX(0);transition:transform .12s linear}
[dir=rtl] .fxmeter i{--from:right}
@media (max-width:640px){.setg{grid-template-columns:1fr}}
/* effects panel */
.fxp{display:flex;flex-direction:column;gap:12px}
.fxprev{position:relative;aspect-ratio:16/9;background:var(--stage);border-radius:16px;overflow:hidden}
.fxprev video{width:100%;height:100%;object-fit:cover}.fxprev.mir video{transform:scaleX(-1)}
.fxnocam{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;opacity:.85;font-size:14px;text-align:center;padding:12px}
.fxbadge{position:absolute;bottom:10px;inset-inline-start:10px;background:rgba(36,9,63,.66);color:#fff;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700;animation:fe .25s var(--ease)}
.fxtabs{position:relative;display:flex;gap:4px;background:var(--p1);padding:4px;border-radius:12px}
.fxtabs button{flex:1;position:relative;z-index:1;border:0;background:none;min-height:38px;border-radius:9px;font-weight:700;color:var(--ink2);cursor:pointer;transition:color .2s}
.fxtabs button[aria-selected=true]{color:var(--p8)}
.fxink{position:absolute;top:4px;bottom:4px;left:4px;width:0;background:#fff;border-radius:9px;box-shadow:0 1px 4px rgba(36,9,63,.14);transition:left .28s var(--ease),width .28s var(--ease)}
.fxbody.in{animation:fe .25s var(--ease)}
.fxsec{font-size:12.5px;font-weight:700;color:var(--mut);margin:4px 2px 8px}
.fxgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;margin-bottom:10px}
.fxt{position:relative;border:2px solid transparent;border-radius:14px;padding:0;background:var(--p1);cursor:pointer;overflow:hidden;aspect-ratio:16/10;display:flex;flex-direction:column;transition:transform .18s var(--ease),border-color .2s,box-shadow .2s}
.fxt img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s var(--ease)}
.fxt:hover img{transform:scale(1.06)}
.fxt:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(36,9,63,.16)}
.fxt span{position:absolute;inset-inline:0;bottom:0;padding:14px 6px 4px;font-size:11.5px;font-weight:700;color:#fff;background:linear-gradient(transparent,rgba(20,8,36,.72));text-align:center}
.fxt.ico{align-items:center;justify-content:center;background:linear-gradient(135deg,#f4effc,#e7dcfa)}
.fxt.ico span{color:var(--p8);background:none;position:static;padding:4px 0 0}
.fxi{width:34px;height:34px;display:flex;align-items:center;justify-content:center}
.fxi svg{width:30px;height:30px;fill:none;stroke:var(--p7);stroke-width:1.6;stroke-linecap:round}
.fxi.bl1 svg{filter:blur(.6px)}.fxi.bl2 svg{filter:blur(1.4px)}
.fxt[aria-pressed=true]{border-color:var(--p6);box-shadow:0 0 0 3px #e7dcfa}
.fxt[aria-pressed=true]::after{content:'';position:absolute;top:6px;inset-inline-end:6px;width:18px;height:18px;border-radius:50%;background:var(--p6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;animation:dm .25s var(--ease)}
.fxt.pop{animation:dm .3s var(--ease)}
.fxt.up{border:2px dashed var(--p3);background:#fff}
.fxrow{display:flex;align-items:center;gap:12px;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line)}
.fxrow b{display:block;font-size:14px}.fxrow small{display:block;color:var(--mut);font-size:12px;font-weight:400}
.fxsw{cursor:pointer}
.tg{position:relative;flex:none;width:46px;height:28px}
.tg input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1}
.tg i{position:absolute;inset:0;border-radius:14px;background:var(--line);transition:background .2s}
.tg i::after{content:'';position:absolute;top:3px;inset-inline-start:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .22s var(--ease)}
.tg input:checked+i{background:var(--p6)}
.tg input:checked+i::after{transform:translateX(18px)}[dir=rtl] .tg input:checked+i::after{transform:translateX(-18px)}
.tg input:focus-visible+i{box-shadow:0 0 0 3px var(--p2)}
.fxlevels{display:flex;gap:6px;flex:none}
.fxlevels button{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;width:52px;height:52px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;font-size:11px;font-weight:700;color:var(--ink2);padding:6px 2px;transition:.2s var(--ease)}
.fxlevels button i{display:block;width:18px;height:var(--h);border-radius:4px;background:linear-gradient(#c9b3f0,#8650d6)}
.fxlevels button[aria-pressed=true]{border-color:var(--p5);background:var(--p1);color:var(--p8);box-shadow:0 0 0 3px #efe6fd}
.fxcam{margin-bottom:10px}
.fxsb{padding:12px 14px}
@media (max-width:520px){.fxrow{flex-wrap:wrap}.fxlevels{width:100%;justify-content:space-between}.fxlevels button{flex:1}}
/* in-room tiles */
.tile.enter{animation:tin .35s var(--ease)}
@keyframes tin{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.tile.leave{animation:tout .25s var(--ease) forwards}@keyframes tout{to{opacity:0;transform:scale(.94)}}
.tile.nomir video{transform:none}
.tile .nm .mut{display:flex;color:#e7dcfa}.tile .nm .hb{background:#2a1f52;color:#fff;border-radius:6px;padding:0 6px;font-size:11px}/* w21 3015fe8e: solid backing over video (was translucent, 3.78:1 worst) */
.tile .hd{animation:none}.tile.hand .hd{animation:hand .5s var(--ease)}
@keyframes hand{0%{transform:translateY(8px) rotate(-12deg);opacity:0}60%{transform:translateY(-2px) rotate(8deg);opacity:1}100%{transform:none}}
.tile .hd b:empty{display:none}
.tile .tpin{position:absolute;top:8px;inset-inline-end:8px;width:32px;height:32px;border-radius:10px;border:0;background:rgba(20,8,36,.55);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .2s;backdrop-filter:blur(4px)}
.tile:hover .tpin,.tile.pinned .tpin{opacity:1}.tile.pinned .tpin{background:var(--p6)}
@media (hover:none){.tile .tpin{opacity:.85}}
.tile.conn .tpin{display:none}
.tile.speak{box-shadow:0 0 0 3px #a78bfa,0 0 22px rgba(167,139,250,.5)}
.pres .pava{display:none;position:absolute;inset:0;margin:auto;width:120px;height:120px;border-radius:50%;background:var(--grad);color:#fff;font-size:46px;font-weight:700;align-items:center;justify-content:center}
.pres.novid .pava{display:flex}.pres.novid video{opacity:0}
.pres{background:#140a24;transition:opacity .3s}
.stage[data-mode=speaker] .pres video{object-fit:cover}.pres.mir video{transform:scaleX(-1)}
.stage[data-mode=board] .pres{display:none}
.stage[data-mode=board] .grid{inset:auto 12px 8px}
.pres .nm{color:#fff}
.anno{position:absolute;display:none;z-index:3}
.pres.sharing .anno{display:block;pointer-events:none}.anno.live{pointer-events:auto!important;cursor:crosshair}
.annobar{position:absolute;top:10px;inset-inline-end:10px;z-index:4;display:flex;gap:4px;background:rgba(255,255,255,.95);border-radius:12px;padding:4px;box-shadow:0 6px 20px rgba(0,0,0,.25);animation:fe .25s var(--ease)}
.annobar .bt span{font-size:12px;font-weight:700;margin-inline-start:4px}
.annobar .bt.on{background:var(--p2)}
.rxlayer{position:absolute;inset:0;pointer-events:none;z-index:8;overflow:hidden}
.rxf{position:absolute;display:flex;flex-direction:column;align-items:center;animation:rx 2.6s var(--ease) forwards}
.rxf b{font-size:40px;line-height:1;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3))}
.rxf span{font-size:11px;font-weight:700;background:rgba(20,8,36,.66);color:#fff;border-radius:8px;padding:1px 8px;margin-top:4px;white-space:nowrap}
@keyframes rx{0%{opacity:0;transform:translate(-50%,10px) scale(.4)}12%{opacity:1;transform:translate(-50%,0) scale(1.15)}25%{transform:translate(calc(-50% + var(--dx)*.3),-30px) scale(1)}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),-220px) scale(.9)}}
.bnotes{position:absolute;top:10px;inset-inline:0;margin:auto;width:max-content;max-width:92%;display:flex;flex-direction:column;gap:6px;align-items:center;z-index:9}
.bn{display:flex;gap:8px;align-items:center;background:#fff;color:var(--ink);border-radius:12px;padding:7px 12px;font-size:13.5px;font-weight:700;box-shadow:0 10px 30px rgba(0,0,0,.25);animation:bnin .3s var(--ease)}
.bn svg{color:var(--p6)}.bn.out{animation:bnout .25s var(--ease) forwards}
.bnb{border:0;background:var(--p1);color:var(--p8);font-weight:700;border-radius:9px;padding:4px 10px;cursor:pointer;min-height:30px}
@keyframes bnin{from{opacity:0;transform:translateY(-10px) scale(.96)}to{opacity:1;transform:none}}@keyframes bnout{to{opacity:0;transform:translateY(-8px)}}
.cpeek{position:fixed;z-index:1100;max-width:min(280px,90vw);display:flex;flex-direction:column;gap:2px;text-align:start;background:#fff;color:var(--ink);border:0;border-radius:14px;padding:8px 12px;box-shadow:0 12px 30px rgba(0,0,0,.28);cursor:pointer;opacity:0;transform:translateY(8px) scale(.95);transition:.25s var(--ease)}
.cpeek.on{opacity:1;transform:none}.cpeek b{font-size:12px;color:var(--p7)}.cpeek span{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* sheets */
.rsheet-bk{position:fixed;inset:0;z-index:1000;background:transparent}
.rsheet{position:fixed;z-index:1001;background:#fff;color:var(--ink);border-radius:18px;box-shadow:0 18px 50px rgba(20,8,36,.35);padding:12px;width:min(380px,calc(100vw - 20px));max-height:calc(100dvh - 120px);overflow:auto;opacity:0;transform:translateY(10px) scale(.96);transition:opacity .2s var(--ease),transform .25s var(--ease)}
.rsheet.on{opacity:1;transform:none}.rsheet.out{opacity:0;transform:translateY(8px) scale(.97)}
.rsheet.small{width:auto}
.rsheet .grab{display:none}
.rsheet.bottom{left:0!important;right:0;bottom:0;top:auto!important;width:100%;border-radius:20px 20px 0 0;max-height:85dvh;padding:8px 14px calc(16px + env(safe-area-inset-bottom));transform:translateY(100%)}
.rsheet.bottom.on{transform:none}.rsheet.bottom.out{transform:translateY(100%)}
.rsheet.bottom .grab{display:block;width:40px;height:5px;border-radius:3px;background:var(--line);margin:4px auto 10px}
.rsheet.bottom~.rsheet-bk,.rsheet-bk{background:rgba(20,8,36,.0)}
.mgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.mt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:78px;border:1px solid var(--line);border-radius:14px;background:#fff;cursor:pointer;font-size:12px;font-weight:700;color:var(--ink2);padding:8px 4px;text-align:center;transition:transform .15s var(--ease),border-color .2s,background .2s;animation:mtin .3s var(--ease) backwards}
.mt svg{width:22px;height:22px;color:var(--p6)}
.mt:hover{border-color:var(--p3);background:var(--p1);transform:translateY(-2px)}
.mt.on{background:var(--p1);border-color:var(--p5);color:var(--p8)}
.mt:nth-child(2){animation-delay:.02s}.mt:nth-child(3){animation-delay:.04s}.mt:nth-child(4){animation-delay:.06s}.mt:nth-child(5){animation-delay:.08s}.mt:nth-child(6){animation-delay:.1s}.mt:nth-child(7){animation-delay:.12s}.mt:nth-child(8){animation-delay:.14s}
@keyframes mtin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.mlist{margin-top:10px;border-top:1px solid var(--line);padding-top:6px;display:flex;flex-direction:column}
.mr{display:flex;align-items:center;gap:12px;min-height:46px;border:0;background:none;border-radius:11px;padding:6px 10px;cursor:pointer;text-align:start;color:var(--ink);font-size:14px;font-weight:700}
.mr:hover{background:var(--p1)}.mr svg{color:var(--p6);flex:none}.mr small{display:block;color:var(--mut);font-weight:400;font-size:12px}
.mr.done-morph{justify-content:center}
.mnote{display:flex;gap:8px;align-items:flex-start;background:var(--p1);color:var(--ink2);border-radius:12px;padding:10px 12px;margin-top:6px;font-size:12.5px;line-height:1.6}.mnote svg{color:var(--p6);flex:none;margin-top:2px}
.emo{display:flex;gap:4px;padding:2px}
.emo button{width:46px;height:46px;border:0;background:none;border-radius:12px;font-size:26px;cursor:pointer;transition:transform .15s var(--ease),background .15s;animation:mtin .25s var(--ease) backwards}
.emo button:hover{background:var(--p1);transform:translateY(-3px) scale(1.15)}
.emo button:nth-child(2){animation-delay:.02s}.emo button:nth-child(3){animation-delay:.04s}.emo button:nth-child(4){animation-delay:.06s}.emo button:nth-child(5){animation-delay:.08s}.emo button:nth-child(6){animation-delay:.1s}.emo button:nth-child(7){animation-delay:.12s}.emo button:nth-child(8){animation-delay:.14s}
.rsheet.bottom .emo{justify-content:space-between;flex-wrap:wrap}
.lv{text-align:center;padding:6px 4px}.lv h3{margin:6px 0 4px}.lv p{color:var(--mut);margin:0 0 14px;font-size:14px}
.lvh{width:52px;height:52px;border-radius:50%;margin:0 auto;background:var(--p1);color:var(--p7);display:flex;align-items:center;justify-content:center;animation:dm .35s var(--ease)}
.lv .btn{margin-top:8px;gap:8px}.lv .endall{color:var(--p8);border-color:var(--p3)}
/* side panel */
.side{transform-origin:var(--so,right) center;animation:sidein .3s var(--ease)}
@keyframes sidein{from{opacity:0;transform:translateX(calc(var(--dir,1)*-24px))}to{opacity:1;transform:none}}
.side .sh{gap:8px}.side .sht{display:flex;gap:8px;align-items:center;min-width:0}
.capsw{border:1px solid var(--line);background:#fff;cursor:pointer;font-size:12px}.capsw.on{background:var(--p1);border-color:var(--p3);color:var(--p8)}
.cm{animation:fe .22s var(--ease)}
.cm.mine .tx{background:var(--p1);border-radius:12px;padding:6px 10px;display:inline-block}
.sf{align-items:flex-end}.sf .btn.icon.ghost{flex:none}
.fcard{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:8px;text-decoration:none;color:var(--ink);background:#fff;max-width:100%}
.fcard img{width:56px;height:56px;object-fit:cover;border-radius:8px}.fcard .fi{width:40px;height:40px;border-radius:10px;background:var(--p1);color:var(--p7);display:flex;align-items:center;justify-content:center}
.fcard .fn{flex:1;min-width:0}.fcard .fn b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px}.fcard .fn small{color:var(--mut)}
.busy{opacity:.6;pointer-events:none}
/* whiteboard */
.board{position:absolute;inset:8px 12px 140px;background:#fff;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;animation:tin .3s var(--ease);z-index:2}
.bbar{display:flex;gap:4px;align-items:center;padding:6px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:thin;flex:none}
.bt{min-width:40px;height:40px;border:0;border-radius:10px;background:none;color:var(--ink2);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none;padding:0 6px;transition:background .15s,transform .15s}
.bt:hover{background:var(--p1)}.bt[aria-pressed=true]{background:var(--p2);color:var(--p8)}
.bt.pressed{animation:rbp .25s var(--ease)}
.bcol i{width:20px;height:20px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line)}
.bw i{display:block;border-radius:50%;background:var(--ink2)}
.bsep{width:1px;height:24px;background:var(--line);margin:0 4px;flex:none}
.bclose{margin-inline-start:auto}
.bwrap{flex:1;position:relative;display:flex;align-items:center;justify-content:center;min-height:0;background:radial-gradient(#e8e2f1 1px,transparent 1px) 0 0/22px 22px}
.bcv{background:rgba(255,255,255,.6);box-shadow:0 0 0 1px var(--line);border-radius:6px;cursor:crosshair}
.bcv[data-tool=x]{cursor:cell}.bcv[data-tool=t],.bcv[data-tool=n]{cursor:text}
.bby{position:absolute;bottom:8px;inset-inline-start:10px;font-size:12px;color:var(--mut)}
.btext{position:absolute;z-index:3;min-width:180px;min-height:60px;border:2px solid var(--p5);border-radius:8px;padding:8px;font:15px var(--ui);resize:both;outline:none;box-shadow:0 8px 20px rgba(36,9,63,.18);background:#fff;animation:dm .2s var(--ease)}
.btext.note{width:200px;height:110px}
.bswatch{position:fixed;z-index:1200;display:flex;gap:6px;background:#fff;padding:8px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.2)}.bswatch button{width:28px;height:28px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);cursor:pointer}
/* polls and Q&A */
.pform,.qform{background:var(--p1);border-radius:14px;padding:12px;margin-bottom:14px}
.pform .fld,.qform .fld{margin-bottom:8px}
.popt.enter{animation:fe .25s var(--ease)}
.pempty{text-align:center;color:var(--mut);padding:18px 8px;font-size:13.5px}.pempty svg{width:34px;height:34px;color:var(--p3)}
.pcard,.qcard{border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:10px;animation:fe .25s var(--ease);background:#fff}
.pq b{display:block;font-size:15px}.pq small{color:var(--mut);font-size:12px}
.pop{position:relative;display:flex;align-items:center;gap:8px;width:100%;min-height:42px;border:1px solid var(--line);border-radius:11px;background:#fff;margin-top:8px;padding:0 12px;cursor:pointer;overflow:hidden;text-align:start;font-weight:700;color:var(--ink)}
.pop .pbar{position:absolute;inset-block:0;inset-inline-start:0;width:var(--w);background:linear-gradient(90deg,#efe6fd,#e2d3fb);transition:width .5s var(--ease)}
.pop .pl,.pop .pn{position:relative;display:flex;gap:6px;align-items:center}.pop .pl{flex:1}.pop .pn{color:var(--p7);font-size:13px}
.pop.mine{border-color:var(--p5)}.pop:disabled{cursor:default}
.pcard.closed{opacity:.8}
.qcard{display:flex;gap:10px}.qcard.ans{opacity:.7}
.qup{flex:none;width:44px;min-height:52px;border:1px solid var(--line);border-radius:12px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;color:var(--ink2)}
.qup.on{background:var(--p1);border-color:var(--p5);color:var(--p8)}
.qb{flex:1;min-width:0}.qb p{margin:0 0 4px;overflow-wrap:anywhere}.qb small{color:var(--mut)}.qacts{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap}
/* phones */
@media (max-width:760px){
 .ctrl{gap:4px;justify-content:space-between}.ctrl .cg{gap:4px}
 .board{inset:4px 6px 104px}.bbar{gap:2px}
 .mgrid{grid-template-columns:repeat(4,1fr)}
 .pre-tools .ptool{min-width:0}
}
@media (max-width:420px){.ctrl .cg{gap:3px}.rb{width:40px;height:40px}.mt{min-height:70px;font-size:11px}}
@media (max-width:380px){.ctrl [data-k=react]{display:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

.ctrl .rb.leave{flex-direction:row}
.fxdlg{width:min(900px,100%)!important}
@media (min-width:760px){.fxdlg .fxp{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:8px 18px;align-items:start}.fxdlg .fxprev{grid-row:1/span 4;position:sticky;top:0}.fxdlg .fxbody{max-height:min(52vh,460px);overflow:auto;padding-inline-end:4px}}

@media (max-width:760px){.bbar{flex-wrap:wrap;overflow:visible}.bbar .bt{min-width:38px;height:38px}.bclose{margin-inline-start:0}}

/* breakout rooms */
.bopill{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:30;display:flex;align-items:center;gap:8px;padding:5px 5px 5px 12px;border-radius:999px;background:rgba(255,255,255,.97);color:var(--ink);box-shadow:0 6px 24px rgba(48,24,110,.18);font-size:13px;font-weight:700;max-width:calc(100% - 24px);animation:boIn .25s ease both}
[dir=rtl] .bopill{padding:5px 12px 5px 5px}
.bopill .bpl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:44vw}
.bopill .bpt,.bopill .bph{display:inline-flex;align-items:center;gap:4px;color:var(--p6);font-variant-numeric:tabular-nums}
.bopill .bpb{border:0;border-radius:999px;background:var(--p6);color:#fff;font:inherit;padding:6px 14px;cursor:pointer;min-height:32px;transition:transform .15s}
.bopill .bpb:active{transform:scale(.95)}
@keyframes boIn{from{opacity:0;transform:translate(-50%,-6px)}to{opacity:1;transform:translate(-50%,0)}}
.bo-body{flex:1;min-height:0;overflow:auto;padding:12px 14px 18px;display:flex;flex-direction:column;gap:10px}
.bo-hero,.bo-you{display:flex;gap:12px;align-items:center;padding:12px;border-radius:14px;background:var(--p1);color:var(--ink)}
.bo-hero small,.bo-you small{display:block;color:var(--mut);font-weight:400;font-size:12px}
.bo-lbl{font-size:12px;color:var(--mut);font-weight:700;margin-top:4px}
.bo-step{display:flex;align-items:center;gap:10px}.bo-step output{min-width:28px;text-align:center;font-size:20px;font-weight:800}
.bstep{width:38px;height:38px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:20px;line-height:1;cursor:pointer;transition:transform .15s,background .2s}
.bstep:disabled{opacity:.4;cursor:default}.bstep:active:not(:disabled){transform:scale(.94)}
.bo-segs{display:flex;gap:6px;flex-wrap:wrap}
.bseg,.bchip{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:6px 12px;font:inherit;font-size:13px;cursor:pointer;min-height:34px;transition:transform .15s,background .2s,border-color .2s,color .2s}
.bseg.sm{min-height:30px;padding:4px 12px;font-size:12px}
.bseg.on,.bchip.on{background:var(--p6);border-color:var(--p6);color:#fff}
.bseg:active,.bchip:active{transform:scale(.96)}
.bchip{min-width:34px;padding:4px 8px}.bchip.wide{min-width:0;padding:6px 12px}
.bo-pr{display:flex;align-items:center;gap:8px;padding:6px 0}
.bo-pr .grow{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bo-chips{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.av.bav{width:28px;height:28px;font-size:12px;flex:none}
.bo-card{border:1px solid var(--line);border-radius:14px;padding:10px 12px;background:var(--card);transition:border-color .2s,box-shadow .2s}
.bo-card.here{border-color:var(--p6);box-shadow:0 0 0 3px rgba(124,77,255,.14)}
.bo-ch{display:flex;align-items:center;gap:8px}.bo-ch .grow{flex:1}
.chip.on{background:var(--p6);color:#fff}
.bo-mvto{display:flex;gap:6px;flex-wrap:wrap;padding:2px 0 8px;animation:boFade .2s ease both}
.bo-help{border-radius:12px;background:#fff6e5;padding:2px 10px}
.bo-timer{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--mut)}.bo-timer b{color:var(--ink);font-variant-numeric:tabular-nums}
.bo-bc{display:flex;gap:8px;align-items:flex-end}.bo-bc textarea{flex:1;resize:none;border:1px solid var(--line);border-radius:12px;padding:8px 10px;font:inherit;font-size:14px;background:var(--card);color:var(--ink)}
.bo-bc textarea:focus{outline:2px solid var(--p6);outline-offset:1px}
.bo-err{color:#b42318}
.btn.bo-danger{background:#fdeeee;color:#b42318;border-color:transparent}.btn.bo-danger.armed{background:#b42318;color:#fff}
.bo-empty{text-align:center;color:var(--mut);padding:30px 10px}
@keyframes boFade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.bopill,.bo-mvto{animation:none}.bseg,.bchip,.bo-card,.bstep,.bopill .bpb{transition:none}}

/* ---- Oct 16: live translation ---- */
.caps .trsub{display:block;max-width:100%;margin:4px auto;padding:8px 14px;border-radius:12px;background:rgba(14,6,26,.84);backdrop-filter:blur(6px);text-align:start;font-size:17px;line-height:1.45;box-shadow:0 6px 20px rgba(0,0,0,.25);width:fit-content}
.caps .trsub b{display:block;font-size:12px;font-weight:700;color:#cdb8f5;margin-bottom:1px}
.caps .trsub .trm{display:block;color:#fff;overflow-wrap:anywhere}
.caps .trsub small{display:block;font-size:13px;color:rgba(255,255,255,.62);margin-top:2px;overflow-wrap:anywhere}
.caps .trsub.voice{display:flex;align-items:center;gap:10px;font-size:14px}.caps .trsub.voice b{margin:0}.caps .trsub.voice span{display:flex;align-items:center;gap:6px;color:#fff}
.trsb{display:flex;flex-direction:column;gap:12px}
.trlangs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.trlang{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;text-align:start;background:var(--p1);border:1px solid var(--line);border-radius:12px;padding:8px 10px;cursor:pointer;color:var(--ink);font:inherit;min-width:0;min-height:52px}
.trlang small{grid-column:1/-1;font-size:11.5px;color:var(--mut)}.trlang b{font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.trlang .rot{transform:rotate(180deg);color:var(--mut);align-self:center}
.trlang:hover{border-color:var(--p3)}.trlang:focus-visible,.trmodes button:focus-visible,.trshare:focus-visible,.trdl button:focus-visible{outline:2px solid var(--p5);outline-offset:2px}
.trmodes{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:var(--p1);padding:4px;border-radius:12px}
.trmodes button{display:flex;flex-direction:column;align-items:center;gap:3px;border:0;background:transparent;border-radius:9px;padding:7px 2px;font:inherit;font-size:11.5px;font-weight:600;color:var(--ink2);cursor:pointer;min-height:48px;min-width:0}
.trmodes button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.trmodes button.on{background:#fff;color:var(--p7);box-shadow:0 1px 3px rgba(36,9,63,.14)}
.trshare{display:flex;align-items:center;gap:10px;width:100%;border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px 12px;font:inherit;font-size:13.5px;color:var(--ink);cursor:pointer;text-align:start;min-height:46px}
.trshare span:nth-child(2){flex:1;min-width:0}.trshare em{font-style:normal;font-weight:700;color:var(--p6);font-size:13px}
.trshare .dot{width:10px;height:10px;border-radius:50%;background:#c9c2d6;flex:none}
.trshare.on{border-color:#bfe3d1;background:#f1faf5}.trshare.on .dot{background:var(--ok);box-shadow:0 0 0 4px rgba(31,138,91,.15);animation:trpulse 1.6s infinite}
@keyframes trpulse{50%{box-shadow:0 0 0 7px rgba(31,138,91,.05)}}
.trsts{display:flex;flex-direction:column;gap:6px}.trst{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;line-height:1.5;color:var(--ink2)}
.trst i{width:8px;height:8px;border-radius:50%;margin-top:6px;flex:none;background:var(--ok)}.trst.mid i{background:var(--warn)}.trst.no i{background:#c0392b}
.trtools{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);padding-top:12px}
.trsearch{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:10px;padding:0 10px;background:#fff;color:var(--mut)}
.trsearch .inp{border:0;box-shadow:none;padding:9px 0;min-height:40px;flex:1;min-width:0;background:transparent;outline:0}
.trsearch:focus-within{border-color:var(--p5);box-shadow:0 0 0 3px var(--p2)}
.trsearch input::-webkit-search-cancel-button{-webkit-appearance:none}
.trdl{display:flex;align-items:center;gap:6px;color:var(--mut);font-size:12px}
.trdl button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 12px;font:inherit;font-size:12.5px;font-weight:700;color:var(--p7);cursor:pointer;min-height:36px}
.trdl button:hover{background:var(--p1)}
.trlisthead{display:flex;align-items:center;gap:8px;font-size:13px}.trlisthead .chip:empty{display:none}
.trlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.trli{border:1px solid var(--line);border-radius:12px;padding:8px 10px;background:#fff;transition:opacity .18s,transform .18s}
.trli.gone{opacity:0;transform:scale(.97)}
.trh{display:flex;align-items:center;gap:8px;font-size:12.5px;min-width:0}.trh b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.trh time{color:var(--mut);font-size:11.5px;direction:ltr;flex:none}.trlg{font-size:11px;background:var(--p1);color:var(--p8);border-radius:999px;padding:1px 8px;white-space:nowrap;flex:none}
.trh .trx{margin-inline-start:auto;flex:none;width:30px;height:30px;color:var(--mut)}
.trog{margin:4px 0 0;font-size:14px;line-height:1.55;color:var(--ink);overflow-wrap:anywhere}
.tro{margin:4px 0 0;font-size:14px;line-height:1.55;color:var(--p7);font-weight:600;overflow-wrap:anywhere;border-inline-start:3px solid var(--p3);padding-inline-start:8px}
.trn{margin:4px 0 0;font-size:12px;color:var(--mut)}
.trempty{text-align:center;padding:10px}
.trpick-bk{position:fixed;inset:0;background:rgba(20,8,36,.45);z-index:90;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .18s}
.trpick-bk.on{opacity:1}
.trpick{background:#fff;color:var(--ink);width:min(440px,94vw);max-height:min(620px,86vh);border-radius:18px;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(20,8,36,.35);overflow:hidden;transform:translateY(8px);transition:transform .2s var(--ease,ease)}
.trpick-bk.on .trpick{transform:none}
.trph{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 6px;font-size:15px}
.trpick .trsearch{margin:4px 14px 8px}
.trpl{overflow:auto;padding:0 8px 10px;display:flex;flex-direction:column}
.trpl button{display:grid;grid-template-columns:1fr auto;align-items:center;text-align:start;border:0;background:transparent;border-radius:10px;padding:9px 10px;font:inherit;cursor:pointer;color:var(--ink);min-height:48px}
.trpl button b{font-size:15px;font-weight:600}.trpl button small{grid-column:1;font-size:12px;color:var(--mut)}.trpl button svg{grid-row:1/3;grid-column:2;color:var(--p6)}
.trpl button:hover,.trpl button:focus-visible{background:var(--p1);outline:0}.trpl button.on{background:var(--p1)}
.trpl button[hidden]{display:none}
body.tr-ducked .tile .nm::after{content:'';}
@media (max-width:600px){
 .trpick-bk{align-items:flex-end}.trpick{width:100vw;max-height:82vh;border-radius:18px 18px 0 0;transform:translateY(30px)}
 .caps .trsub{font-size:15.5px;padding:7px 12px}.caps{width:94%;bottom:12px}
}
@media (max-width:380px){.trmodes button{font-size:10.5px}.trlang b{font-size:13.5px}}
@media (max-width:420px){.room .ctrl{padding-inline:4px;gap:3px;justify-content:space-between}.room .ctrl .cg{gap:3px}.room .ctrl .rb:not(.done-morph){width:min(40px,calc((100vw - 40px) / 9));height:min(40px,calc((100vw - 40px) / 9))}}

/* m1017v5: phone touch targets >=44px (home header, tabs, account, join; room bar keeps 7 buttons, react/share move to More) */
@media (max-width:760px){
 #hdr a.brand{min-height:44px;display:inline-flex;align-items:center}
 #hdr nav.tabs button{min-height:44px!important}
 #acct .btn,#acct button{min-height:44px!important;min-width:44px}
 form.joinf .inp,form.joinf .btn{min-height:44px!important;height:auto}
}
@media (max-width:420px){
 .room .ctrl [data-k=react],.room .ctrl [data-k=screen],.room .ctrl [data-k=assist]{display:none!important}
 .room .ctrl{padding-inline:6px;gap:4px;justify-content:space-between}
 .room .ctrl .cg{gap:4px}
 .room .ctrl .rb:not(.done-morph),.room .ctrl .rb.leave{width:44px!important;height:44px!important;min-width:44px}
}

/* m1017v5b: brand, participant chip and tile pin >=44px on phones */
@media (max-width:760px){
 #hdr a.brand{min-width:44px;justify-content:center}
 .rtop .chip.rcnt{min-height:44px;min-width:44px}
 .tile .tpin{width:44px!important;height:44px!important}
}

/* m1017v5c: phone header fits one row at 360-412 (AR+EN) with 44px targets */
@media (max-width:420px){
 #hdr.top{gap:6px;padding-inline:10px}
 #hdr nav.tabs{padding:3px;gap:2px;min-width:0}
 #hdr nav.tabs button{padding:0 8px;white-space:nowrap}
 #hdr nav.tabs button svg,#hdr nav.tabs button .ic{display:none}
 #acct{gap:4px}
 #acct .btn.sm{padding-inline:10px}
}
@media (max-width:374px){#hdr a.brand{display:none!important}}

/* r3 notes dialog: one centred dialog over a dimmed page */
.dlg-back.mn-back{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(24,20,48,.52);z-index:2000;padding:12px}
.mn-back .dlg{margin:auto;position:relative;inset:auto;transform:none;width:min(760px,calc(100vw - 24px));max-height:calc(100vh - 24px);overflow:auto}
.mn-ed h3{font-size:15px;margin:12px 0 4px}.mn-ed ul{margin:0 0 6px;padding-inline-start:20px}

/* qa1017: touch targets >=40px on any coarse pointer (phones + tablets) */
@media (pointer:coarse){#hdr a.brand,#hdr .tabs button,#hdr .acct a,#hdr .acct button,.btn.sm,.copy-inv{min-height:40px}#hdr .acct a,#hdr .acct button{min-width:40px;display:inline-flex;align-items:center;justify-content:center}}
@media (pointer:coarse){.btn.icon.sm{width:40px;min-width:40px}.tile .tpin{width:40px;height:40px}.chip.rcnt,.chip.rcopy,#cnt{min-height:40px}}
.room-row .ttl{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere;word-break:break-word}

/* e1017p: strict crawl v6 — phone: channel topic wraps instead of being cut, 40px tabs/buttons */
@media (max-width:760px){
 .chhead .t div{white-space:normal;text-overflow:clip;overflow:visible;display:-webkit-box;-webkit-line-clamp:unset;line-height:1.45}
 .fxtabs button,.fx-tabs button,.seg button{min-height:40px}
 .btn.sm{min-height:40px;min-width:40px}
}

/* live notes + same-language switch (e1018t) */
.trlisthead .trlnbtn{margin-inline-start:auto;min-height:36px;white-space:nowrap}.trlnbtn.on{background:var(--accent-soft,#e8f1ee);border-color:var(--ok)}
.trnotes{flex:none;border:1px solid var(--line,#e2e2e2);border-radius:12px;padding:10px 12px;background:var(--card,#fff);max-height:min(40vh,260px);overflow:auto;margin:0}
.trnotes .trnh{display:flex;align-items:center;gap:8px;justify-content:space-between;font-size:13px;margin-bottom:6px;flex-wrap:wrap}.trnotes .trnh small{color:var(--ink2);font-size:12px}
.trnb{font-size:13px;line-height:1.65;overflow-wrap:anywhere}.trnb h3{font-size:13px;margin:8px 0 4px}.trnb ul{margin:0;padding-inline-start:18px}.trnb li{margin:2px 0}.trnb p{margin:4px 0}
.trswap{border:0;background:none;color:var(--accent,#0b6e4f);font:inherit;font-weight:600;text-decoration:underline;cursor:pointer;padding:2px 4px;min-height:32px}

/* R13 (c7): on phones and tablets live translation is a bottom sheet — the meeting stays visible above it */
@media (max-width:1024px){
  .side[data-p="tr"]{position:absolute;inset:auto 0 0 0!important;top:auto!important;height:min(46%,440px);max-height:52dvh;width:auto;margin:0!important;border-radius:18px 18px 0 0;z-index:20;box-shadow:0 -10px 30px rgba(20,10,40,.22);display:flex;flex-direction:column}
  .side[data-p="tr"] .sb{overflow:auto;min-height:0;flex:1}
  html:has(.side[data-p="tr"]) .yoc-tgl{transform:translateY(calc(-1 * min(40dvh, 400px)))}
  .stage:has(~ .side[data-p="tr"]) .grid{bottom:calc(min(46%,440px) + 6px)}
  .stage:has(~ .side[data-p="tr"]) .caps{bottom:calc(min(46%,440px) + 10px)}
}

/* C8 large meetings */
.vwcnt{position:absolute;inset-inline-start:12px;bottom:10px;z-index:5;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:rgba(17,12,30,.72);color:#fff;font-size:14px;font-weight:600;pointer-events:none}

/* xb (1782adee): on phones the header holds app-switcher + brand + 2 tabs + points + avatar + AI (≈430px at 390);
   the tabs nav shrank and «القنوات / Channels» was drawn under the points pill. Points pill hides on the phone header
   (points stay in the account menu and the suite); tabs never shrink below their content. */
@media (max-width:420px){
 #hdr #acct .btn.sm.soft{display:none!important}
 #hdr nav.tabs{flex:none}
}

/* golive a9da25d1: sender name and time never run together or split on phones */
.msg .who{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px}.msg .who span{white-space:nowrap}

/* QUICK b23632b6: share sheet + quick schedule chips */
.qhint{margin:8px 0 0}
.ysh h2{margin:0 0 6px}
.ysh-ok{display:flex;align-items:center;gap:6px;margin:0 0 10px;padding:8px 12px;border-radius:10px;background:#e8f7ee;color:#11643a;font-weight:700}
.ysh-url .ysh-code{white-space:nowrap;font-weight:800;color:#3b1366}
.ysh-ok.wait{background:#f1ecf8;color:#3b1366}
.ysh-link{display:flex;gap:8px;align-items:stretch;margin-bottom:10px}
.ysh-url{flex:1;min-width:0;min-height:46px;display:block;direction:ltr;text-align:left;font-size:14px;line-height:1.4;padding:12px 10px;border:1px solid #d9d2e6;border-radius:10px;background:#faf8fd;color:#1d1530;overflow-wrap:anywhere;user-select:all;-webkit-user-select:all;font-weight:600}
.ysh-link .btn{min-height:46px;white-space:nowrap}
.ysh-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:6px 0 10px}
.ysh-grid .btn{min-height:46px;justify-content:center;text-decoration:none;gap:6px;font-size:14px}
.ysh-grid .btn span{white-space:normal;text-align:center;line-height:1.2}
@media(min-width:700px){.ysh-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ysh-foot{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.yqr{display:flex;flex-direction:column;align-items:center;gap:4px}
.yqr svg{width:132px;height:132px;border:1px solid #e6e0ef;border-radius:8px;background:#fff}
.ysh-go{display:flex;flex-direction:column;gap:8px;flex:1;min-width:160px}
.ysh-go .btn{min-height:48px;justify-content:center}
.qchips{display:flex;flex-wrap:wrap;gap:6px;margin:-2px 0 10px}
.qchips .qchip{display:inline-flex;align-items:center;justify-content:center;height:44px;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid #d9d2e6;background:#fff;color:#3b1366;font:inherit;font-size:14px;cursor:pointer}
.qchips .qchip[aria-pressed=true]{background:#3b1366;color:#fff;border-color:#3b1366}
@media(max-width:420px){.yqr svg{width:112px;height:112px}}

/* meeting assistant (c0c03746) */
.ma-tabs{display:flex;gap:4px;padding:0 12px 8px;border-bottom:1px solid var(--line)}
.ma-tab{flex:1;border:0;background:transparent;font:inherit;font-size:12.5px;font-weight:600;color:var(--mut);padding:8px 4px;border-radius:9px;cursor:pointer;white-space:nowrap}
.ma-tab.on{background:var(--p1);color:var(--acc)}
.ma-tab:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.sb.ma{display:flex;flex-direction:column;gap:10px}
.ma-topic{margin:0;padding:10px 12px;border-radius:12px;background:linear-gradient(135deg,var(--p1),#f3f6ff);font-weight:600;line-height:1.6}
.ma-sec{border:1px solid var(--line);border-radius:12px;padding:8px 12px;background:#fff}
.ma-sec h4{margin:2px 0 6px;font-size:13px;display:flex;align-items:center;gap:6px;color:var(--ink,#1f2340)}
.ma-sec ul{margin:0;padding-inline-start:18px;line-height:1.7;font-size:13.5px}
.ma-acts{list-style:none;padding:0!important}
.ma-acts li{padding:4px 0;border-top:1px dashed var(--line)}.ma-acts li:first-child{border-top:0}
.ma-acts label{display:flex;gap:8px;align-items:flex-start;cursor:pointer}
.ma-acts input{margin-top:5px;accent-color:var(--acc)}
.ma-acts em{display:block;font-style:normal;font-size:12px;color:var(--mut)}
.ma-acts input:checked+span b{text-decoration:line-through;color:var(--mut)}
.ma-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.ma-note{margin:0}
.ma-err{color:#b42318;font-size:13px;margin:4px 0}
.ma-wait{display:flex;align-items:center;gap:8px;color:var(--mut);padding:12px 4px}
.ma-empty p{margin:0 0 10px;line-height:1.7}
.ma-pl{display:flex;flex-direction:column;gap:4px}
.ma-pp{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:#fff;border-radius:12px;padding:7px 10px;font:inherit;cursor:pointer;text-align:start}
.ma-pp.on{border-color:var(--acc);box-shadow:0 0 0 2px var(--p1)}
.ma-pp .av,.ma-ch .av{width:30px;height:30px;font-size:12px;flex:none}
.ma-card{border:1px solid var(--line);border-radius:14px;padding:12px;background:var(--bg);display:flex;flex-direction:column;gap:8px}
.ma-ch{display:flex;gap:10px;align-items:center}
.ma-kv{display:flex;justify-content:space-between;gap:10px;font-size:13px;border-bottom:1px solid var(--line);padding-bottom:6px}
.ma-kv span{color:var(--mut)}.ma-kv b{font-weight:600;text-align:end;overflow-wrap:anywhere}
.ma-sumout .ai-out{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:#fff;margin:10px 0;max-height:46vh;overflow:auto}

/* aa51f532: header fits on phones (login button was cut) */
@media (max-width:440px){#hdr{gap:4px!important;padding-inline:8px!important}#hdr nav.tabs button{padding-inline:7px!important}#hdr .acct .btn.sm{padding-inline:9px!important}#hdr .acct{gap:2px!important;flex:0 0 auto}#hdr nav.tabs{min-width:0;flex:0 1 auto;overflow-x:auto;scrollbar-width:none}#hdr nav.tabs::-webkit-scrollbar{display:none}#hdr nav.tabs button{font-size:13.5px!important}}
/* w6 25872305: on phones the header tabs (الاجتماعات / القنوات / جهات الاتصال) were cut at the edge («جها…») inside a 165 px sideways strip.
   ≤420 px: the tabs take their own full-width row under the header, each tab an equal share — all three readable, nothing scrolls sideways. */
@media (max-width:420px){
  #hdr.top{flex-wrap:wrap;row-gap:4px}
  #hdr.top nav.tabs{order:9;flex:1 0 100%!important;width:100%;overflow:visible;justify-content:stretch}
  #hdr.top nav.tabs button{flex:1 1 0;justify-content:center;padding-inline:4px!important}
}

/* W16 (6ab626c3): AA + touch fixes from the full-coverage crawl */
.room-row .meta{color:#5d5470}
html[data-theme=dark] .room-row .meta,.dark .room-row .meta{color:#c9c0da}
@media (max-width:700px),(pointer:coarse){.switch{min-height:44px}.switch input[type=checkbox]{width:48px;height:28px;border-radius:14px;margin:8px 0;box-sizing:content-box}}
.fxnocam{background:rgba(15,10,25,.78);opacity:1}
.ymc-all{position:relative;z-index:2;display:inline-flex;align-items:center;min-height:44px}
/* w18: solid backing for background-picker labels (gradient read as no backing; light thumbnails gave white-on-light) */
.fxt span{background:rgba(20,8,36,.82);padding:4px 6px}
/* w18: switches keep their 48x28 look but get a 44px-tall hit area (transparent border, background clipped to the padding box) */
.switch input[type=checkbox]{border:8px solid transparent;background-clip:padding-box;margin:0;box-sizing:content-box}

/* w19 (2967edbd): text over the pre-join preview keeps a solid backing at full opacity (camera-off message was white at .8 opacity straight on the stage/video) */
.pv .noc{opacity:1}
.pv .noc [data-noc]{background:rgba(15,8,28,.9);color:#fff;padding:4px 12px;border-radius:999px;font-weight:600;line-height:1.6}

/* w35: connecting chip stays on one line (WebKit ar wrap+clip) */
.tile .cs{white-space:nowrap;max-width:calc(100% - 16px);overflow:hidden;text-overflow:ellipsis;box-sizing:border-box}

/* w60 390px pass: the webinars card had no inner padding, so its text touched the card border */
.rooms.ymw>.card{padding:16px 18px}
@media (max-width:520px){.rooms.ymw>.card{padding:14px}}
/* w60 deploy 2026-10-29T22:36:05Z 509731054 */
/* crawl w61: in dark mode the recent-meetings date chip kept its dark-purple text (--p8) on the dark card, contrast 1.16:1 (unreadable). */
html.dark .room-row .when{background:rgba(167,139,250,.18);color:#ece8ff}
html.dark .room-row .when .tiny{color:#d9d1ff}
/* w61-deploy-meet-20261030T043231Z-18268 */

/* w62: text over the live camera preview gets solid backing (worst case over a white frame >= 7:1) */
.pv .fxon{background:rgba(24,8,44,.86)!important;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.pv .noc [data-noc]{background:rgba(15,8,28,.92)}
/* w62-deploy-meet-20261030T051201Z-18996 */