/* In-call visual polish (Lark-style). Loaded after align-fix.css. Owns: layout popover, in-call chat panel, toolbar chat badge, update toast in a call. */

/* ---------- toolbar: left cluster never collides with the centre controls ---------- */
#cbar{column-gap:12px}.cbl{gap:6px;min-width:0}.cbr{min-width:0}

/* ---------- unread badge on the chat button ---------- */
#cbar .cb em#chatdot{top:-5px;right:-5px;width:auto;min-width:18px;height:18px;padding:0 5px;box-sizing:border-box;border-radius:9px;align-items:center;justify-content:center;background:#F5483B;color:#fff;font:600 11px/1 var(--f-b);border:2px solid var(--wash);box-sizing:content-box;min-width:14px;height:14px;font-style:normal}
#bchat{position:relative}

/* ---------- layout popover ---------- */
#layoutmenu.layp{padding:18px 18px 12px;border-radius:16px;min-width:0;border:1px solid var(--line);box-shadow:0 12px 32px -8px rgba(31,35,41,.22)}
#layoutmenu.layp:before{content:"";position:absolute;top:-7px;left:calc(var(--cx,60%) - 7px);width:12px;height:12px;background:var(--paper);border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg);border-radius:3px 0 0 0}
.lay2{display:grid;grid-template-columns:repeat(3,112px);gap:6px 10px}
.lay2 button{display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 6px 8px;border:0;background:none;cursor:pointer;font:500 13px/1.25 var(--f-b);color:var(--ink);border-radius:12px;text-align:center}
.lay2 button svg{width:96px;height:72px;padding:9px 10px;box-sizing:border-box;border-radius:10px;border:2.5px solid transparent;fill:#DEE0E6;background:transparent;overflow:visible}
.lay2 button svg rect.pip{fill:#fff;stroke:none}
.lay2 button:hover svg{background:rgba(31,35,41,.04)}
.lay2 button.sel svg{border-color:#3370FF;fill:#D3DEFD;background:#EEF3FF}.lay2 button.sel svg rect.pip{fill:#fff}
.lay2 button span{max-width:104px}
@media(prefers-color-scheme:dark){.lay2 button svg{fill:#3A3F5C}.lay2 button:hover svg{background:rgba(255,255,255,.05)}.lay2 button.sel svg{fill:#33447A;background:#1F2A4F}.lay2 button svg rect.pip{fill:#1C1E38}}

/* ---------- in-call chat panel ---------- */
#cside.chatp{width:360px;border:1px solid var(--line);box-shadow:0 12px 32px -12px rgba(31,35,41,.22);overflow:hidden}
#cside.chatp .cside-tabs{padding:0 12px 0 16px;gap:20px;height:48px;align-items:stretch;border-bottom:1px solid var(--line);flex:none}
#cside.chatp .cside-tabs button{padding:0;font:500 14px var(--f-b);color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
#cside.chatp .cside-tabs button:hover{color:var(--ink)}
#cside.chatp .cside-tabs button.on{color:var(--ink);font-weight:600;border-bottom-color:var(--blue)}
#cside.chatp .cside-tabs .x{margin-left:auto;align-self:center;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:6px;color:var(--ink-soft);font-size:0}
#cside.chatp .cside-tabs .x:hover{background:var(--hair)}
#cside.chatp .cside-tabs .x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
#cside.chatp .sbody{padding:4px 14px 12px;overflow-x:hidden;overflow-y:auto;min-width:0}
#cside.chatp .sbody .day{margin:16px 0 4px}
#cside.chatp .m{margin:0 -8px;padding:2px 8px;gap:10px}
#cside.chatp .m:not(.cont){margin-top:14px}.m.cont{margin-top:2px}
#cside.chatp .m .av{width:32px;height:32px;font-size:13px}
#cside.chatp .m.cont .av{visibility:hidden;height:0;margin:0}
#cside.chatp .m>.av{flex:none;width:32px}#cside.chatp .m>div:not(.av){min-width:0;flex:1}
#cside.chatp .m .body.bub{max-width:100%;box-sizing:border-box;overflow-wrap:anywhere;font-size:13.5px;padding:8px 12px}
#cside.chatp .m .body.bub.hascard{padding:0;overflow:hidden}
#cside.chatp .m .body.bub .mtg{display:flex;flex-wrap:wrap;gap:10px;align-items:center;max-width:100%}
#cside.chatp .m .body.bub .mtg>div{flex:1 1 120px;min-width:0}
#cside.chatp .m .body.bub .mtg .btn{flex:none}
#cside.chatp .m .body.bub .mtg .btn:disabled{opacity:.55;cursor:default}
#cside.chatp .m .tools{display:none}
#cside.chatp .m:hover{background:transparent}
#cside.chatp .cempty{margin:auto;padding:40px 0;text-align:center;color:var(--muted);font:500 13.5px var(--f-b)}
#cside.chatp .sbody.files .cm{margin:8px 0}
#cside.chatp .cin2{display:block;padding:8px 14px 14px;flex:none}
#cside.chatp .cin2 .cbox{margin:0}
#cside.chatp .cin2 textarea{width:100%;box-sizing:border-box;min-height:40px}
#cside.chatp .cin2 .ctool{justify-content:flex-start}
#cside.chatp .cin2 .ctool .send{margin-left:auto}
#cside.chatp .seenl{display:none}

/* ---------- update toast: bottom right above the toolbar while in a call ---------- */
body:has(#call[style*="display: flex"]) #pwa-upd{left:auto;right:20px;bottom:88px;transform:none;width:auto;max-width:360px;flex-wrap:nowrap}
body:has(#call[style*="display: flex"]) #pwa-upd span{flex:1 1 auto}
body:has(#call[style*="display: flex"]) #pwa-upd button{flex:none}
body:has(#call[style*="display: flex"]) #pwa-upd:before{display:block}
body:has(#call[style*="display: flex"]):has(#cside.on) #pwa-upd{right:392px}
/* phone width: the three button groups flow as one wrapping row so mic, camera, share, leave are never clipped */
@media(max-width:700px){#cbar{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:8px max(10px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}#cbar .cbl,#cbar .cbc,#cbar .cbr{display:contents}#cbar .cb{flex:none}#top,#ctop{min-width:0}#ctitle{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}