/* QA24: shared web/lab presentation contract. No media/auth state is changed. */
@keyframes cl-popup-arrive{0%{opacity:0;scale:0}52%{opacity:1;scale:1.12 .86}73%{scale:.92 1.08}88%{scale:1.035 .975}100%{opacity:1;scale:1}}
@keyframes cl-panel-right{0%{opacity:0;translate:100% 0}70%{opacity:1;translate:-12px 0}86%{translate:5px 0}100%{translate:0 0}}
@keyframes cl-panel-up{0%{opacity:0;translate:0 70vh}72%{opacity:1;translate:0 -16px}86%{translate:0 6px}100%{translate:0 0}}
body :is(dialog[open],[role=alertdialog]:not([hidden]),.cl-a-proposal:not([hidden]),.cl-mode-menu:not([hidden]),.ce-notifications:not([hidden]),.cm-emoji-picker:not([hidden])){animation:cl-popup-arrive .48s ease-out;transform-origin:center}
body.cl-guest-v2 .cl-main{transition:grid-template-columns .48s cubic-bezier(.22,.8,.25,1)}
body.cl-guest-v2 .cl-main:not(.cl-chat-closed)>.cm-chat{animation:cl-panel-right .52s ease-out}
@media(min-width:701px){
 body.cl-guest-v2:not(.cl-account-open) .cl-main.cl-chat-closed{grid-template-columns:minmax(0,1fr) 0px!important}
 body.cl-guest-v2 .cl-main.cl-chat-closed>.cm-chat{display:flex!important;visibility:hidden;overflow:hidden;pointer-events:none;min-width:0}
}
body dialog.cl-profile-account-layer[open]{animation:none!important}
body .cl-access-panel:not([hidden]){animation:cl-panel-right .52s ease-out}
body .cl-a-menu:not([hidden]){animation:cl-panel-up .56s ease-out!important}
/* Do not shrink the entire viewport/dialog shell or disturb anchored transforms. */
body .cm-chat.cm-editing-emoji .cm-emoji-picker{animation:none!important}
body .ce-bell.has-unread>svg{color:#bd8900;fill:#ffce42;filter:drop-shadow(0 0 5px #ffd65899)}

/* Header: one fixed desktop row, a separate compact in-call row on phones.
   Progress owns the bottom 6px and can never intersect any hit target. */
body.cl-guest-v2{--cl-header:56px}
body.cl-guest-v2 .cl-topbar{position:relative;display:flex;align-items:center;gap:12px;height:var(--cl-header);padding-block:0 6px!important}
body.cl-guest-v2 .cl-topbar>.cl-brand{height:40px;align-self:center;margin:0;flex:none}
body.cl-guest-v2 .cl-topbar>.cl-toolbar{height:40px!important;margin-left:auto;align-self:center;align-items:center;flex:none}
body.cl-guest-v2 .cl-topbar .cl-hud{position:absolute!important;inset:0 auto 6px 50%!important;translate:-50% 0;transform:none!important;width:auto!important;height:auto!important;padding:0!important;display:flex!important;flex-flow:row nowrap!important;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
body.cl-guest-v2 .cl-topbar .cl-hud>:is(.cl-round-language-info,.cl-view-tools,#round-language,#timer){position:static!important;inset:auto!important;transform:none!important;translate:none;margin:0;flex:none}
body.cl-guest-v2 .cl-topbar .cl-hud .cl-round-language-info{display:grid;place-items:center;width:28px;height:32px;padding:0!important;min-height:0;border:0;background:transparent}
body.cl-guest-v2 .cl-topbar #round-flag{width:26px;height:18px;object-fit:contain;margin:0}
body.cl-guest-v2 .cl-topbar #round-language{font-size:13px;max-width:120px;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
body.cl-guest-v2 .cl-topbar #timer{font-size:14px;font-variant-numeric:tabular-nums;line-height:1.2}
body.cl-guest-v2 .cl-topbar .cl-view-tools{display:grid;place-items:center;width:36px;height:36px;padding:0;border:0}
body.cl-guest-v2 .cl-topbar #fullscreen-toggle{width:34px;height:34px;min-height:34px;padding:7px;pointer-events:auto}
body.cl-guest-v2 .cl-topbar>.cl-round-progress{position:absolute;inset:auto 0 0;height:6px;pointer-events:none}
body.cl-guest-v2 .cl-topbar .cl-hud{width:36px!important}
body.cl-guest-v2 .cl-topbar .cl-round-meta{position:absolute;right:calc(100% + 8px);display:flex;align-items:center;gap:8px;white-space:nowrap}
@media(max-width:850px){
 body.cl-guest-v2{--cl-header:54px}
 body.cl-guest-v2 .cl-topbar{gap:5px;padding-inline:9px}
 body.cl-guest-v2 .cl-topbar>.cl-brand{font-size:14px;gap:4px}
 body.cl-guest-v2 .cl-topbar .cl-brand-icon{width:27px;height:27px}
 body.cl-guest-v2 .cl-topbar .cl-beta{font-size:8px}
 body.cl-guest-v2 .cl-topbar>.cl-toolbar{gap:2px}
 body.cl-guest-v2 .cl-topbar .cl-toolbar>.cl-account-button{width:32px!important;height:32px!important;min-height:32px;padding:5px!important}
 body.cl-guest-v2 .cl-topbar #open-languages{min-width:30px!important;width:30px!important;max-width:30px!important}
 body.cl-guest-v2:has(.cl-round-language-info:not([hidden])){--cl-header:86px}
 body.cl-guest-v2:has(.cl-round-language-info:not([hidden])) .cl-topbar{padding-bottom:38px!important}
 body.cl-guest-v2:has(.cl-round-language-info:not([hidden])) .cl-topbar .cl-hud{inset:auto 0 6px 0!important;translate:none;width:100%!important;height:32px!important}
 body.cl-guest-v2:has(.cl-round-language-info:not([hidden])) .cl-topbar .cl-round-meta{position:static;display:flex}
 body.cl-guest-v2:not(:has(.cl-round-language-info:not([hidden]))) .cl-topbar .cl-round-meta{display:none}
 body.cl-guest-v2:not(:has(.cl-round-language-info:not([hidden]))) .cl-topbar .cl-hud{position:static!important;translate:none;order:1;width:30px!important;flex:none;height:36px!important}
 body.cl-guest-v2:not(:has(.cl-round-language-info:not([hidden]))) .cl-topbar .cl-hud :is(#round-language,#timer){display:none}
}
/* Message actions live at body level so their pointer coordinates stay viewport-relative. */
body .cm-message-menu button{display:flex;align-items:center;gap:9px;min-height:40px;width:100%;font:600 13px/1.3 system-ui}
body .cm-message-menu .cm-menu-icon{display:grid;place-items:center;width:20px;flex:0 0 20px}
body .cm-message-menu .cm-menu-icon svg{width:18px;height:18px;display:block}
/* All header action glyphs scale, not just the close control. */
body.cl-guest-v2 .cm-chat .cm-head>button:not(.cm-profile){flex:0 0 var(--cm-head-key)!important;width:var(--cm-head-key)!important;height:var(--cm-head-key)!important;min-height:0!important;min-width:0!important;padding:clamp(2px,.8cqi,5px)!important}
body.cl-guest-v2 .cm-chat .cm-head>button:not(.cm-profile)>svg{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important}

/* One close silhouette/hover for chat, profile, board, dialogs and hosted Pro. */
body :is(.cm-close,.cm-invite-close,.cl-a-menu-close,.cl-profile-close-button,#board-close,.cl-language-card-close,.cl-profile-account-layer-close,.pro-close){border-radius:10px!important;transform:none!important;transition:background-color .16s,box-shadow .16s,scale .16s!important}
body :is(.cm-close,.cm-invite-close,.cl-a-menu-close,.cl-profile-close-button,#board-close,.cl-language-card-close,.cl-profile-account-layer-close,.pro-close):hover:not(:disabled){border-radius:10px!important;background-color:#ffe7eb!important;box-shadow:0 0 0 2px #df46644d!important;scale:1.045}
body :is(.cm-close,.cm-invite-close,.cl-a-menu-close,.cl-profile-close-button,#board-close,.cl-language-card-close,.cl-profile-account-layer-close,.pro-close):active:not(:disabled){scale:.94;background-color:#ffd1d9!important;box-shadow:inset 0 2px 5px #941b2b26!important}
body .cl-board-v4 .wb-tools :is(button,.wb-tool)>svg,body .cl-board-v4 :is(#board-select,#board-eraser)>svg{width:23px!important;height:23px!important;display:block;margin:auto;transform:none!important;translate:none!important;pointer-events:none}
body .cl-board-v4 .wb-tools button{display:grid;place-items:center}
body .cl-board-v4 .wb-tools button:active{transform:none!important;translate:none!important}
body #presentation-close{display:none!important;pointer-events:none!important}

/* Keep the artwork rim/shadow in place; only paint the clipped black liquid. */
body.cl-guest-v2 .cl-call-actions #search.cl-control.cl-primary.cl-holding::before{filter:none!important;background-color:transparent!important}
body.cl-guest-v2 .cl-call-actions #search.cl-control.cl-primary.cl-holding::after{content:''!important;position:absolute!important;inset:0!important;width:100%!important;height:100%!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:#151819!important;transform:none!important;z-index:0;pointer-events:none;mask:var(--cl-control-art) center/contain no-repeat;clip-path:inset(calc(100% - var(--hold-progress,0%)) 0 0 0)!important}
body.cl-guest-v2 .cl-call-actions #search.cl-control.cl-primary.cl-holding>svg{visibility:visible!important;position:relative;z-index:1;color:white!important;border-radius:0;clip-path:inset(clamp(0%,calc((1 - var(--hold-fraction,0))*240% - 70%),100%) 0 0 0);pointer-events:none}
/* The old countdown used difference blending, which turns black into a no-op. */
body.cl-guest-v2 .cl-call-actions #search.cl-control.cl-primary.cl-holding::after{mix-blend-mode:normal!important}
body.cl-guest-v2 .cl-call-actions #search.cl-control.cl-primary.cl-holding>svg{stroke:#fff!important;filter:none!important}

.cr-burst,.cr-burst.is-audio-timed{animation-duration:.24s,.42s}
.cr-burst.is-retiring,.cr-burst.is-failed{animation-duration:.24s,.42s}
@media(prefers-reduced-motion:reduce){
 body .cl-main{transition:none!important}
 body :is(dialog[open],[role=alertdialog],.cl-a-proposal,.cl-mode-menu,.ce-notifications,.cm-emoji-picker,.cm-chat,.cl-access-panel,.cl-a-menu){animation:none!important}
}