/* Two shared quick-access colors complete every tool's 4-by-4 palette. */
/* The finite transformed sheet covers the stage, including at minimum zoom. */
.cl-board-v4 .wb-stage{background:#fff}
/* Both the standalone control and the presentation control moved into this
   footer and pan control keep their existing hit targets. Center each glyph
   without overflowing the button's padded content box. */
html body #board-panel.cl-board-v4>.wb-footer :is(#board-fullscreen,#fullscreen-toggle,#board-pan):not([hidden]){display:grid!important;place-items:center;box-sizing:border-box;padding:0!important;line-height:1;color:#111!important}
html body #board-panel.cl-board-v4>.wb-footer :is(#board-fullscreen,#fullscreen-toggle,#board-pan)>svg{display:block;width:20px!important;height:20px!important;margin:0!important;transform:none!important;translate:none;flex:none;stroke-width:2}
/* Share the chat's soft frame without clipping the floating tool palettes. */
body.cl-guest-v2 .cl-board-v4{border:0!important;border-radius:26px 23px 29px 24px!important;box-shadow:none!important}
body.cl-guest-v2 .cl-board-v4>.wb-header{border-top-left-radius:inherit;border-top-right-radius:inherit}
body.cl-guest-v2 .cl-board-v4>.wb-footer{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}
.cl-board-v4 :is(#board-select,#board-eraser)>svg{width:25px;height:25px}
/* Tool ink is consistently black; swatches and the live drawing retain their
   selected colors. Disabled controls still communicate availability via opacity. */
.cl-board-v4 .wb-tools button[id^="board-"]>svg{color:#111111!important}
.cl-board-v4 .wb-swatches{display:grid;grid-template-columns:repeat(4,24px);gap:5px;width:max-content;max-width:100%;margin:0}
.cl-board-v4 .wb-swatches button{box-sizing:border-box;width:24px;height:24px;min-width:0;min-height:0;margin:0;padding:0;border:1px solid #252b33;border-radius:5px}
.cl-board-v4 .wb-swatches button[aria-pressed=true]{outline:2px solid #bf8600;outline-offset:1px}
.cl-board-v4 .wb-popover:has(.wb-swatches){box-sizing:border-box;width:145px!important;max-width:calc(100vw - 24px);padding:10px}
/* Visibility is latched by the board, never by transient hover or focus. */
.cl-board-v4 .wb-tools .wb-tool:not(.is-open)>.wb-popover:has(.wb-swatches){display:none}
.cl-board-v4 .wb-tool.is-open>.wb-popover:has(.wb-swatches){display:block}
/* The thickness slider has no swatches; require its explicit tool click too. */
.cl-board-v4 .wb-tools .wb-tool:not(.is-open)>.wb-popover[data-for=eraser]{display:none}
/* Native range margins used to add four pixels beyond the available width. */
.cl-board-v4 .wb-popover input[type=range]{display:block;box-sizing:border-box;min-width:0;max-width:100%;margin-inline:0}
/* Selection keeps its fill; only keyboard focus receives an outer ring. */
html body.cl-guest-v2 .cl-board-v4 .wb-tools button[id^="board-"]:not(:focus-visible){outline:none!important;box-shadow:none!important}
html body.cl-guest-v2 .cl-board-v4 .wb-tools button[id^="board-"]:focus-visible{outline:2px solid #11131b!important;outline-offset:2px}
.cl-board-v4 .wb-swatches .wb-custom-empty{background:#fff9e6;border-color:#fff1bc;color:#a77700;display:grid;place-items:center}
.cl-board-v4 .wb-swatches .wb-custom-slot svg{width:16px;height:16px;margin:0;pointer-events:none}
.cl-board-v4 .wb-custom-color-bar{display:flex;align-items:center;gap:6px;margin-top:10px}
.cl-board-v4 .wb-custom-color-bar input[type=color]{flex:1;min-width:0;width:100%;margin:0;height:30px}
.cl-board-v4 .wb-custom-color-bar .wb-custom-save{flex:none;width:30px;height:30px;padding:5px;border:0;border-radius:7px;background:#fff1bc;color:#a77700;cursor:pointer}
.cl-board-v4 .wb-custom-color-bar .wb-custom-save:hover{background:#ffd858;color:#493000}
.cl-board-v4 .wb-custom-color-bar .wb-custom-save svg{display:block;width:20px;height:20px}
.cl-board-v4 .wb-custom-save:focus-visible,.cl-board-v4 .wb-custom-slot:focus-visible{outline:2px solid #bf8600;outline-offset:3px}
/* One stable, filling ring persists through transfer, decode and insertion. */
.cl-board-v4 .wb-image-loading{position:absolute;right:14px;bottom:54px;z-index:8;display:flex;align-items:center;gap:9px;padding:8px 12px;max-width:calc(100% - 28px);border:1px solid #e9dfc7;border-radius:14px;background:#fffffff2;color:#344054;box-shadow:0 3px 12px #18212f16;pointer-events:none;font-size:12px}
.cl-board-v4 .wb-image-loading-ring{position:relative;display:block;flex:none;width:28px;height:28px;border-radius:50%;background:conic-gradient(#c89418 var(--wb-image-progress,0deg),#e9edf2 0);transform:rotate(-90deg)}
.cl-board-v4 .wb-image-loading-ring::after{content:"";position:absolute;inset:4px;border-radius:50%;background:#fff}
.cl-call:has(.wb-image-loading)>.ce-upload-progress{display:none}
.cl-board-v4[data-read-only="true"] .wb-popover{display:none!important;pointer-events:none!important}
.cl-board-v4[data-read-only="true"] .wb-tool:is(:hover,:focus-within) .wb-popover{display:none!important}
@media(max-width:600px){.cl-board-v4 .wb-image-loading{bottom:112px;right:8px;font-size:11px;padding:7px 9px}.cl-board-v4 .wb-image-loading-ring{width:25px;height:25px}}
.cl-board-v4 .wb-object-tools{gap:3px;padding:4px 6px;border-radius:10px;translate:0 -8px;max-width:calc(100% - 12px);flex-wrap:wrap;justify-content:center}
.cl-board-v4 .wb-object-tools button{width:26px;height:26px;min-width:26px;min-height:26px;padding:4px}
.cl-board-v4 .wb-object-tools button svg{width:18px;height:18px}
.cl-board-v4 .wb-object-tools select{font-size:11px;height:26px;min-height:26px;padding:2px 4px}
.cl-board-v4 .wb-object-tools #board-color{border:1.5px solid #252b33;border-radius:6px;padding:3px;box-sizing:border-box}
.cl-board-v4 .wb-object-tools #board-color>span{border:1.5px solid #252b33;border-radius:4px;box-sizing:border-box}
/* QA59: measure the rail's OUTER border, not the inner button. Eight clear
   pixels remain between rail and palette; the invisible bridge keeps it usable. */
html body.cl-guest-v2 #board-panel.cl-board-v4 .wb-tool>.wb-popover{
 left:var(--wb-palette-left,calc(100% + 14px))!important;top:var(--wb-palette-top,0px)!important;
 right:auto!important;bottom:auto!important;transform:none!important;margin:0;overflow:auto;box-sizing:border-box;
}
html body.cl-guest-v2 #board-panel.cl-board-v4 .wb-tool>.wb-popover::before{content:'';position:absolute;right:100%;width:8px;top:0;bottom:0}
@media(max-width:850px){
 html body.cl-guest-v2 #board-panel.cl-board-v4 .wb-tool>.wb-popover{position:fixed!important}
}