: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}
/* w109-firstrun: with the assistant open on a desktop, <body> carries transform:translateZ(0) (yo-chat.css), so a fixed .dlg-back was sized to the whole page (1,415 px) and "Your meeting is ready" sat below the fold. While a dialog is open the body drops that transform, so the dialog centres in the window (heading and "Join now" both visible at 1280x800 and 1366x768). The page behind is inert under the backdrop. */
html.yoc-desk>body:has(>.dlg-back){transform:none!important}
@media (min-width:700px) and (max-height:860px){.ysh .yqr svg{width:96px;height:96px}.ysh h2{margin-bottom:4px}.ysh-ok{margin-bottom:8px;padding:6px 12px}.ysh-grid{margin:4px 0 8px}}
.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 */
/* w91m (1 Nov): with the assistant docked at 1280 the meet header content was 983 px in 960 px, so «Sign in» / «Account» slid under the panel. The «Alt+Q» hint inside «Commands» is left out while docked (the button and its name stay) */
html.yoc-on.yoc-desk:not(.yoc-collapsed) header.top .yox-fab kbd{display:none}
/* w133 (c) root fix (review P31-H06 «Account» covered by header.yoc-h at EN 1280): the w91m kbd trim above stopped being enough once the header gained «Contacts» and the 52 px language button (row 1002 px in a 960 px body beside the docked assistant), because the row could only overflow. Now the header row wraps instead of running past its box, whatever is added to it later, and while the assistant is docked at 901–1400 px «Commands» shows as its magnifier (its name stays as aria-label and title), so the row stays on one line at 1280 */
header.top#hdr{flex-wrap:wrap;row-gap:4px}
@media (min-width:901px) and (max-width:1400px){html.yoc-on.yoc-desk:not(.yoc-collapsed) header.top .yox-fab>span{display:none}html.yoc-on.yoc-desk:not(.yoc-collapsed) header.top .yox-fab{min-width:40px;min-height:40px;justify-content:center;padding-inline:0}}
/* w115-touch (task d9faeda7): Meet on phones — the account button, the language button, the brand link and the lobby
   microphone/camera buttons are 44x44 tap targets (the in-call bar already was). Layout only. */
@media (max-width:760px),(pointer:coarse){#hdr a.brand{min-height:44px}#hdr .acct :is(a,button),#hdr button.av{min-width:44px;min-height:44px}:root .btn.sm{min-width:44px;min-height:44px}}
@media (max-width:420px){:root .rb{width:44px;height:44px}}
/* w160-meet-phone-join (task 92c81341): the Meet join flow on phones — the name field, the lobby «إلغاء / Cancel», the chat
   composer (text box, send, attach) and the buttons after leaving are 44 px tap targets, like the in-call bar. Layout only. */
@media (max-width:760px),(pointer:coarse){#jf input[name=name]{min-height:44px}.wait .btn{min-height:44px}.sf .btn.icon{flex:none;min-width:44px;min-height:44px}.sf textarea.inp{min-height:44px!important}}
/* w162-meet-polish (task 77177749): (1) the channels view fits under the real header. The header is 113-115 px when it wraps
   (1280 with the assistant toggle, phones with the tabs row) but .chwrap assumed 59/53 px, so the message box sat 54-62 px below
   the screen, and scrolling to it slid «#قناة», «دعوة / Invite» and «لخّص لي / Catch me up» under the header. On the channels view
   only, the page is a column: header, then the channels area filling the rest. (2) in-call chat search box 44 px on phones; its
   result count readable in light mode (4.26:1 -> 6.37:1). Layout/colour only; yo-x.js untouched. */
body:has(> main#view > #chw){display:flex;flex-direction:column;height:100dvh;overflow:hidden}
body:has(> main#view > #chw) > main#view{flex:1 1 auto;min-height:0}
body:has(> main#view > #chw) .chwrap{height:100%}
@media (max-width:760px),(pointer:coarse){[data-p="chat"] .yox-cs input[type=search]{min-height:44px}}
html:not(.dark) [data-p="chat"] .yox-cs small{color:#5f5c7a}

/* w165-meet-desktop-home (task 9cb0f72d): Meet desktop home and header at 1280 vs Teams web. Layout only; yo-x.js, the assistant
   panel and its button's behaviour are untouched. (1) 901-1400 px: with the assistant docked the header is 960 px wide and the row
   needed 985 px, so the account cluster wrapped to a second row (header 113 px) and the Account menu opened at y 103 over the
   pre-join card. Tighter gaps/margins around the tabs, the commands button and the theme button give the row ~58 px of slack, so
   it stays on one line (65 px). The w133 wrap stays as the fallback. (2) Pre-join on desktop is centred vertically in the window
   under the header, as in Teams and Google Meet, instead of sitting at the top with half the screen empty; the Account menu
   (306 px) then ends above the name field and «Start meeting». (3) The header is sticky, so keyboard focus and in-page jumps
   stopped under it (WCAG 2.4.11): scroll-padding-top now equals the header height while the header is shown. */
@media (min-width:901px) and (max-width:1400px){
  header.top#hdr{column-gap:6px}
  header.top#hdr > nav.tabs{margin-inline-start:4px}
  header.top#hdr > .yox-fab{margin-inline-start:2px}
  header.top#hdr > .yo-thm26{margin-inline:0}
}
@media (min-width:861px) and (min-height:560px){
  #view > .pre{min-height:calc(100vh - 65px);min-height:calc(100dvh - 65px);box-sizing:border-box;align-content:center}
}
html:has(> body > header.top#hdr:not([hidden])){scroll-padding-top:73px}
@media (max-width:760px){html:has(> body > header.top#hdr:not([hidden])){scroll-padding-top:123px}}
/* end w165-meet-desktop-home */
/* w173-meet-incall-desktop (task 3893630f): Meet in-call desktop chrome at 1280/1440 vs Teams web. Layout only; meet.js gets one appended w173 block (menu placement, shortcuts list, pill width). Earlier blocks unchanged.
   (1) A dialog in the call (Camera & audio, and others) with the assistant docked: w109 removes <body>'s transform while a .dlg-back is open, so the fixed call screen grew to the whole window (1280 px instead of 960) and the control bar shifted 160 px, Leave half under the assistant panel. Keep the call screen beside the panel while a dialog is open.
   (2) The collapsed assistant pill sits at the bottom corner; at 1229×610 (125% laptop scaling) it covered «Leave». The control bar keeps clear of it (--w173-pill is set by meet.js from the pill's real width; 0 when there is no pill).
   (3) The keyboard-shortcuts list (new in w173; the shortcuts themselves are meet-rec.js's).
   (4) On short desktop windows (≤700 px high, e.g. 1229×610 at 125%), the More menu was taller than the room above the bar, so «Record meeting» needed a scroll inside the menu; it is a little more compact there (targets stay ≥36 px). */
html.yoc-on.yoc-desk:not(.yoc-collapsed)>body:has(>.dlg-back) .room{inset-inline-end:var(--yoc-w)}
@media (min-width:861px){html.yoc-desk.yoc-collapsed .room .ctrl{padding-inline-end:calc(12px + var(--w173-pill,0px))}}
.w173-keys .dlg{width:min(460px,100%)}
.w173-keys h3{margin:0 0 4px;font-size:18px}
.w173-kn{margin:0 0 10px;color:var(--mut);font-size:13px}
.w173-kt{width:100%;border-collapse:collapse;font-size:14px}
.w173-kt td{padding:9px 4px;border-top:1px solid var(--line);vertical-align:middle}
.w173-kt td:last-child{text-align:end;white-space:nowrap}
[dir=rtl] .w173-kt td:last-child{text-align:left}
.w173-k{display:inline-block;min-width:24px;padding:2px 7px;border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;background:#f7f5fb;font:600 12px/18px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ink);text-align:center}
@media (min-width:601px) and (max-height:700px){.rsheet.more{padding:8px 10px}.rsheet.more .mgrid{gap:6px}.rsheet.more .mt{min-height:56px;gap:3px;padding:5px 4px}.rsheet.more .mlist{margin-top:6px;padding-top:4px}.rsheet.more .mr{min-height:36px;padding:3px 10px}.rsheet.more .mr small{font-size:11px;line-height:1.25}}
/* end w173-meet-incall-desktop */