/* Panels slide at their final width. Never scale type while the workspace resizes. */
body.cl-guest-v2 .cl-main{transition:grid-template-columns .34s cubic-bezier(.22,.75,.25,1);overflow:hidden}
body.cl-guest-v2 .cl-main>.cm-chat{animation:none!important;box-sizing:border-box}
@media(min-width:851px){
 body.cl-guest-v2 .cl-main>.cm-chat{width:var(--chat-width,390px)!important;max-width:70vw}
 body.cl-guest-v2.cl-account-open .cl-main{grid-template-columns:minmax(0,1fr) 0!important;grid-template-rows:minmax(0,1fr)!important}
 body.cl-guest-v2 .cl-main.cl-chat-closed>.cm-chat.cm-exiting{visibility:visible!important;overflow:visible!important;pointer-events:none}
}
@media(max-width:850px){
 body.cl-guest-v2.cl-account-open .cl-main{grid-template-columns:1fr!important;grid-template-rows:minmax(0,1fr)!important;overflow:hidden}
 body.cl-guest-v2 .cl-main.cl-chat-closed>.cm-chat.cm-exiting{display:flex!important;visibility:visible!important;pointer-events:none}
}
/* Pro is a top-layer overlay, not a second grid cell or row. */
body dialog.cl-profile-account-layer{overflow:hidden;grid-area:auto;animation:none!important;opacity:1!important}
body .cl-access-panel:not([hidden]),body .cl-a-menu:not([hidden]){animation:none!important;opacity:1!important}
body .cl-profile-account-layer::backdrop{backdrop-filter:none}
@keyframes cl-soft-dialog{0%{scale:.97;translate:0 5px}80%{scale:1.003;translate:0 -1px}100%{scale:1;translate:0 0}}
body :is(#language-dialog,.cl-profile-dialog)[open]{animation:none!important}
body .cl-language-card[open]{animation:cl-soft-dialog .24s ease-out!important}

body .cm-chat>.cm-route-snapshot{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-height:none!important;margin:0;z-index:90;pointer-events:none;overflow:hidden;animation:none!important;background:#fffaf0!important}
body .cm-chat.cm-editing-emoji .cl-messages{flex:0 0 var(--cm-edit-height,120px)!important;height:var(--cm-edit-height,120px)!important;min-height:0!important;max-height:34%;padding-block:0!important}
body .cm-chat.cm-editing-emoji .cl-messages>:first-child{margin-top:0}
body .cm-chat.cm-editing-emoji .cm-emoji-picker:not([hidden]){flex:1 1 0!important;height:auto!important;max-height:none!important;min-height:150px;box-sizing:border-box;animation:none!important}
body .cm-chat.cm-editing-emoji .cm-emoji-picker>.cm-emoji-grid{flex:1 1 0!important;min-height:60px!important;max-height:none!important;height:auto!important}
body .cm-emoji-picker :is(.cm-picker-modes,.cm-emoji-categories,header){flex-shrink:0}
body .cm-emoji-picker :is(.cm-giphy-panel,.cm-emoji-grid){min-height:0}
body .cm-emoji-picker .cm-giphy-panel{flex:1 1 0;overflow:auto}
body .cm-emoji-picker :is(.cm-picker-modes,.cm-giphy-panel){animation:none!important}
/* Context actions must stay within the chat even during their entrance. */
@keyframes cm-actions-in{from{scale:.94}to{scale:1}}
body .cm-message-menu{animation:cm-actions-in .16s ease-out!important;transform-origin:center;min-width:0}
@media(max-width:600px),(max-height:600px){
 body .cm-chat.cm-editing-emoji .cm-emoji-picker{font-size:11px;padding:5px!important}
 body .cm-chat.cm-editing-emoji .cm-emoji-picker>header{min-height:22px;padding:0}
 body .cm-chat.cm-editing-emoji .cm-emoji-categories button{font-size:16px;width:24px;min-width:0;padding:1px;flex:1}
 body .cm-chat.cm-editing-emoji .cm-emoji-grid{grid-auto-rows:28px}
 body .cm-chat.cm-editing-emoji .cl-messages{max-height:30%}
}
/* Give paths breathing room inside their SVG view box, not a clipped button. */
body .cl-board-v4 .wb-tools :is(button,.wb-tool)>svg{width:22px!important;height:22px!important;overflow:visible;flex:none}
body .cl-board-v4 .wb-tools button{padding:3px!important;overflow:visible;box-sizing:border-box;line-height:1}
body .cl-board-v4:not([hidden]){animation:none!important}
.wb-eraser-cursor{position:absolute;z-index:2;border:1px solid #3d4248;border-radius:50%;background:#ffffff30;box-shadow:0 0 0 1px #ffffffb3;transform:translate(-50%,-50%);pointer-events:none;box-sizing:border-box}
@media(prefers-reduced-motion:reduce){body :is(#language-dialog,.cl-profile-dialog,.cl-language-card)[open]{animation:none!important}body.cl-guest-v2 .cl-main{transition:none}}
/* QA26: preserve the stage underneath a board throughout both transitions. */
body.cl-guest-v2 .cl-call:not(.cl-has-room) #empty-stage{display:flex!important;visibility:visible!important;opacity:1!important}
body.cl-guest-v2 .cl-call:not(.cl-has-room) #empty-stage .cl-instructions{visibility:visible!important}
body.cl-guest-v2 .cl-call>#empty-stage[data-board-underlay]{position:absolute!important;inset:auto!important;left:var(--board-stage-left)!important;top:var(--board-stage-top)!important;width:var(--board-stage-width)!important;height:var(--board-stage-height)!important;z-index:1;box-sizing:border-box}
/* Same canvas before, underneath and after the board. Flex must not stretch the card. */
body.cl-guest-v2[data-theme=light] .cl-call,body.cl-guest-v2[data-theme=light] #empty-stage{background:#302f3b!important}
body.cl-guest-v2 .cl-call:not(.cl-has-room) #empty-stage{flex-direction:column;align-items:center;justify-content:center}
body.cl-guest-v2 .cl-call #empty-stage>.cl-instructions{flex:0 0 auto;align-self:center;height:auto;min-height:0}
body.cl-guest-v2 #empty-stage>:empty{display:none}
body.cl-guest-v2 .cl-call>#board-panel[data-panel-closing]{position:absolute;inset:auto!important;left:var(--board-exit-left)!important;top:var(--board-exit-top)!important;width:var(--board-exit-width)!important;height:var(--board-exit-height)!important;max-width:none!important;max-height:none!important;resize:none;z-index:12;border-radius:14px;border:1px solid #dce8f5;box-shadow:none}
body .cl-a-backdrop{position:fixed;inset:0;background:#25324766;z-index:109;pointer-events:auto;backdrop-filter:none}
body.cl-guest-v2 .cl-call .cl-video-grid>article[data-camera-moving]>video{width:100%!important;height:100%!important;aspect-ratio:auto!important;object-fit:contain!important;transform:none}
body .cl-camera-motion-slot{border:0;pointer-events:none}
body .cl-board-v4 .wb-swatches button{background:var(--wb-swatch-color,#fff9e6)!important;padding:0!important;transition:box-shadow .15s,scale .15s}
body .cl-board-v4 .wb-swatches button:hover{box-shadow:0 0 0 2px #3b414b;scale:1.08}
body .cl-board-v4 .wb-swatches .wb-custom-slot svg{width:16px!important;height:16px!important}
body .cm-emoji-picker .cm-giphy-panel{flex:1 1 auto;min-height:150px}
body .cm-chat.cm-editing-emoji .cl-messages{max-height:45%!important;flex:0 0 var(--cm-edit-height,150px)!important}
body .cm-chat .cm-emoji-picker:not([hidden]){height:min(340px,45dvh);max-height:45dvh;min-height:160px;box-sizing:border-box}
body .cm-chat.cm-editing-emoji .cm-emoji-picker:not([hidden]){flex:0 1 min(340px,45dvh)!important;height:min(340px,45dvh)!important;max-height:45dvh!important}
body .cm-chat.cm-editing-emoji .cl-messages .cm-inline-edit-text{max-height:24dvh}
body .cm-inline-edit{width:100%;box-sizing:border-box}
body .cm-inline-edit-actions button{font-size:11px;min-height:25px;padding:3px 9px}
body .cm-inline-edit-actions .cm-inline-edit-cancel{color:#a72d36;background:#fff0f0;border-color:#eeb6bb}
@keyframes cl-settings-feedback{0%,100%{scale:1}45%{scale:.985}75%{scale:1.008}}
body .cl-profile-dialog:has(.cl-settings:not([hidden])){animation:cl-settings-feedback .25s ease-out}
body .ce-time-proposal::backdrop{background:transparent!important}
@media(prefers-reduced-motion:reduce){body .cl-profile-dialog:has(.cl-settings:not([hidden])){animation:none!important}}
/* The native textarea still owns IME, selection, emoji insertion and undo. */
.cm-edit-surface{position:relative;width:100%;min-width:160px}
body .cm-inline-edit .cm-inline-edit-text,body .cm-inline-edit .cm-edit-highlight{box-sizing:border-box;width:100%;margin:0;padding:8px;border:1px solid transparent;font:inherit;line-height:1.5;letter-spacing:inherit;white-space:pre-wrap;overflow-wrap:anywhere;tab-size:4}
body .cm-inline-edit .cm-inline-edit-text{position:relative;color:transparent;caret-color:#203246;background:transparent;resize:none;border-radius:8px}
body .cm-inline-edit .cm-edit-highlight{position:absolute;inset:0;overflow:hidden;pointer-events:none;color:#253247}
.cm-edit-inserted{color:#126337}
body .cl-a-draft-block:has(.cl-a-turn-editor){padding:0;background:transparent}
body .cl-a-game .cl-a-turn-editor textarea{background:#fff4ce;padding:3px 5px;border-radius:7px}
body .cl-a-turn-editor{display:flex;flex-flow:row nowrap;align-items:center;gap:6px}
body .cl-a-turn-editor textarea{flex:1;min-width:0}
body .cl-a-turn-editor .cl-a-send{align-self:center;flex:0 0 30px;width:30px;height:30px;min-height:0;padding:5px;border:0;border-radius:8px;background:transparent;box-shadow:none;color:#736035}
body .cl-a-turn-editor .cl-a-send:hover{background:transparent;color:#1c2026;scale:1.08}
body .cl-a-turn-editor .cl-a-send svg{width:20px;height:20px}
body.cl-guest-v2 .cl-call.cl-self-main[data-layout=spotlight]:not(.cl-presenting):not(.cl-multi-call) .cl-local{position:absolute!important;inset:0 0 var(--cl-actions,76px)!important;width:100%!important;height:auto!important;max-width:none!important;max-height:none!important;aspect-ratio:auto!important;z-index:1}
body.cl-guest-v2 .cl-call.cl-self-main[data-layout=spotlight]:not(.cl-presenting):not(.cl-multi-call) .cl-remote{position:absolute!important;inset:14px 14px auto auto!important;width:clamp(144px,22%,360px)!important;height:auto!important;aspect-ratio:16/9;z-index:2;border-radius:14px;overflow:hidden}
body.cl-guest-v2 .cl-call.cl-self-main[data-layout=spotlight]:not(.cl-presenting):not(.cl-multi-call) .cl-local>video{width:100%!important;height:100%!important}
body .cl-a-proposal:not([hidden]){animation:none!important}
@keyframes cl-backdrop-pro{from{background-color:#25324700}to{background-color:#25324766}}
@keyframes cl-backdrop-profile{from{background-color:#5c420b00}to{background-color:#5c420b4d}}
@property --cl-backdrop-opacity{syntax:"<number>";inherits:true;initial-value:1}
body :is(.cl-profile-account-layer,.cl-profile-dialog,#language-dialog)::backdrop{animation:none!important;opacity:var(--cl-backdrop-opacity,1);backdrop-filter:none!important}
body .cl-profile-account-layer::backdrop,body #language-dialog::backdrop{background:#25324766!important}
body .cl-profile-dialog::backdrop{background:#5c420b4d!important}
body .ce-time-proposal[open]{animation:cl-soft-dialog .24s ease-out!important}
@media(prefers-reduced-motion:reduce){body .cl-profile-account-layer[open]::backdrop,body .cl-profile-dialog[open]::backdrop{animation:none}}
.cl-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
body .cl-tip-frame>.cl-tip-category{left:0!important;top:-2px;border-top-left-radius:inherit;border-bottom-left-radius:0}

/* A single full-bubble editor; its overlay uses the identical native metrics. */
body .cm-chat .cm-is-editing .cm-message-body{max-width:100%;min-width:min(100%,160px)}
body .cm-chat .cm-is-editing .cm-bubble{box-sizing:border-box;width:100%;padding:0;min-width:0}
body .cm-chat .cm-inline-edit{width:100%!important;max-width:none;gap:4px}
body .cm-chat .cm-edit-surface{min-width:0;position:relative}
body .cm-chat .cm-inline-edit :is(.cm-inline-edit-text,.cm-edit-highlight){
 box-sizing:border-box;width:100%;padding:10px 12px!important;border:0!important;margin:0!important;
 font-family:inherit!important;font-size:var(--chat-font,16px)!important;font-weight:400!important;
 line-height:1.5!important;letter-spacing:normal!important;text-indent:0!important;text-align:start!important;
 white-space:pre-wrap!important;overflow-wrap:anywhere!important;word-break:normal!important;
}
body .cm-chat .cm-inline-edit .cm-inline-edit-text{min-height:28px;max-height:none!important;color:transparent!important;caret-color:#203246;outline:0;background:transparent!important}
body .cm-chat .cm-inline-edit .cm-edit-highlight{inset:0;overflow:hidden;pointer-events:none;color:#253247}
body .cm-chat .cm-inline-edit-actions{padding:0 7px 5px}
body .cm-chat .cm-inline-edit-status{padding:0 10px 6px}

/* The footer never participates in picker layout. Only the log scrolls. */
body .cm-chat #room-form{flex:0 0 auto;margin-top:auto}
body .cm-chat.cm-editing-emoji .cl-messages{
 flex:1 1 0!important;height:auto!important;max-height:none!important;min-height:0!important;
 padding:10px!important;padding-bottom:var(--cm-picker-reserve,0px)!important;box-sizing:border-box;
}
body .cm-chat.cm-editing-emoji .cl-messages::after{display:none!important}
body .cm-chat .cm-emoji-picker:not([hidden]),body .cm-chat.cm-editing-emoji .cm-emoji-picker:not([hidden]){
 position:absolute!important;left:8px!important;right:8px!important;top:auto!important;width:auto!important;max-width:none!important;
 margin:0!important;flex:none!important;height:var(--cm-picker-height,400px)!important;
 min-height:0!important;max-height:none!important;padding:8px!important;gap:4px;
 display:flex;flex-direction:column;box-sizing:border-box;
}
body .cm-chat .cm-emoji-picker :is(header,.cm-picker-modes,.cm-emoji-categories){flex:0 0 auto;padding:0!important;margin:0!important;min-height:0!important}
body .cm-chat .cm-emoji-picker header{height:24px}
body .cm-chat .cm-emoji-picker header strong{font-size:13px}
body .cm-chat .cm-emoji-picker header button{width:24px;height:24px;min-height:0;padding:2px}
body .cm-chat .cm-emoji-picker .cm-picker-modes button{height:28px;min-height:0;padding:3px 8px;font-size:13px}
body .cm-chat .cm-emoji-picker>input[type=search]{box-sizing:border-box;height:30px;min-height:30px;flex:0 0 30px;margin:0;padding:4px 8px;font-size:13px}
body .cm-chat .cm-emoji-picker .cm-emoji-categories button{width:auto;height:26px;min-width:0;min-height:0;flex:1;padding:1px;font-size:19px}
body .cm-chat .cm-emoji-picker>.cm-emoji-grid,body .cm-chat.cm-editing-emoji .cm-emoji-picker>.cm-emoji-grid{
 display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-rows:var(--cm-picker-row,40px);
 align-content:start;flex:1 1 0!important;min-height:0!important;max-height:none!important;height:auto!important;padding:0;gap:4px;
}
body .cm-chat .cm-emoji-picker .cm-emoji-grid button:not(.cm-gif-upload){
 width:100%!important;height:var(--cm-picker-row,40px)!important;min-height:0!important;padding:0!important;
 font-size:calc(var(--cm-picker-row,40px) - 5px);line-height:1;border:0;
}
body .cm-chat .cm-emoji-picker .cm-giphy-panel{flex:1 1 0;min-height:0;max-height:none;overflow:auto}
body .cm-chat .cm-emoji-picker [hidden]{display:none!important}
body .cm-chat .cm-head:has(>.cm-peer-time){position:relative;padding-top:6px!important;padding-bottom:17px!important;min-height:0}
body .cm-chat .cm-head>.cm-peer-time{position:absolute;bottom:2px;right:clamp(5px,2cqi,12px);font-size:10px;line-height:12px;font-weight:500;color:#77818b;white-space:nowrap;pointer-events:none}
body.cl-guest-v2 .cm-chat .cm-head>.cm-profile{flex-shrink:0;height:clamp(28px,8.4cqi,40px);margin:0}
body.cl-guest-v2 .cm-chat .cm-head .cm-profile .cm-avatar{min-width:0;min-height:0;width:100%!important;height:100%!important;margin:0;box-sizing:border-box}
body.cl-guest-v2 .cm-chat .cm-head>.cm-person{position:relative;overflow:hidden;min-width:0}
body .cm-chat .cm-head .cm-person-name{overflow:hidden}
body .cm-chat .cm-head .cm-person-name>strong{display:block;width:100%;text-align:left}
body.cl-guest-v2 .cl-profile-settings:hover:not(:disabled),body.cl-guest-v2 .cl-profile-setting-groups :is(button,a,select):hover:not(:disabled){background-color:#fff3c6!important;border-color:#e4bc51!important;box-shadow:0 0 0 1px #e4bc514d}
body.cl-guest-v2 .cl-profile-setting-cards svg{stroke:#232930;fill:#ffda70}
body.cl-guest-v2 .cl-profile-setting-cards svg path{fill:none}
body.cl-guest-v2 .cl-device-menu select{transition:background-color .15s,border-color .15s,box-shadow .15s}
body.cl-guest-v2 .cl-device-menu select:is(:hover,:focus-visible){background:#fff9e8;border-color:#e4bc51;box-shadow:0 0 0 1px #e4bc514d;outline:none}
/* A contiguous hit region bridges tool and centered palette. */
@media(min-width:851px){
 body.cl-guest-v2 .cl-board-v4 .wb-tool>.wb-popover{position:absolute!important;left:100%!important;right:auto!important;top:50%!important;bottom:auto!important;transform:translateY(-50%)!important;margin:0;transform-origin:left center}
 body.cl-guest-v2 .cl-board-v4 .wb-tool>.wb-popover::before{content:'';position:absolute;right:100%;width:8px;top:0;bottom:0}
}
body .cl-profile-dialog[open]{animation:none!important}
@keyframes cl-notification-soft{0%{opacity:0;scale:.96;translate:0 6px}80%{opacity:1;scale:1.008;translate:0 0}100%{opacity:1;scale:1;translate:0 0}}
body .cl-mode-menu:not([hidden]){animation:cl-notification-soft .24s ease-out!important}
body .ce-time-proposal[open]{animation:none!important}
@keyframes cl-profile-loading-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
body .cl-profile-loading{animation:cl-profile-loading-in .24s ease-out}
@media(prefers-reduced-motion:reduce){body .cl-profile-loading,body .cl-mode-menu:not([hidden]){animation:none!important}}
