/* Canvas placement and drawing-specific controls; forms, buttons and modals use Bootstrap. */
body:has(#whiteboard) { overflow: hidden; }
body:has(#whiteboard) > #footer-wrapper,
body:has(#whiteboard) > #scrollToTopBtn,
body:has(#whiteboard) #toolbarContainer { display: none !important; }
#whiteboard { height: calc(100dvh - var(--wb-header-height, 96px)); display: flex; flex-direction: column; min-height: 0; }
#whiteboard [hidden] { display: none !important; }
#whiteboard:fullscreen { height: 100dvh !important; }
#whiteboard .svg-icon { width: 19px; height: 19px; flex-shrink: 0; }
.wb-controlbar { flex-shrink: 0; min-height: 52px; }
.wb-heading { min-width: 100px; }
#board-title { width: 190px; padding: 0; box-shadow: none; }
#board-title:hover, #board-title:focus { background: var(--bs-light); }
#save-status { display: flex; align-items: center; gap: 6px; font-size: 11px; white-space: nowrap; }
#save-status i { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
#participants { font-size: 12px; white-space: nowrap; }
.wb-header-actions .btn { min-height: 34px; white-space: nowrap; }
#whiteboard .wb-workspace { min-height:0; max-width:none; background:#fff; }
#whiteboard .wb-workspace[data-paper=dots] { background-image: radial-gradient(#cfd8e3 .85px, transparent .85px); background-size: 17.5px 17.5px; }
#whiteboard .wb-workspace[data-paper=grid] { background-image: linear-gradient(#e7edf4 1px, transparent 1px), linear-gradient(90deg, #e7edf4 1px, transparent 1px); background-size: 35px 35px; }
#whiteboard .wb-workspace[data-paper=plain] { background: #fff; }
#canvas { touch-action:none; }
.wb-remote { position: absolute; top: 0; left: 0; width: 0; height: 0; }
.wb-remote::before { content: ''; position: absolute; left: 0; top: 0; width: 13px; height: 18px; background: var(--cursor-color); clip-path: polygon(0 0, 100% 70%, 58% 70%, 75% 100%, 52% 100%, 35% 73%, 0 95%); filter: drop-shadow(0 0 1px white); }
.wb-remote-name { position: absolute; left: 12px; top: 18px; font-size: 11px; line-height: 1.4; color: white; background: var(--cursor-color); padding: 4px 8px; border-radius:0 var(--bs-border-radius) var(--bs-border-radius); white-space: nowrap; }
.wb-tools { position: absolute; left: 16px; top: 16px; max-height: calc(100% - var(--wb-footer-height, 48px) - 44px); overflow-y: auto; scrollbar-width: thin; }
.wb-tools .btn, .wb-history .btn, .wb-zoom .btn, .wb-icon-button { display: grid; place-items: center; width: 34px; height: 34px; position: relative; min-width: 0; }
.wb-tools .btn { flex-shrink: 0; box-shadow: none; }
.wb-separator { height: 1px; width: 24px; margin: 3px 0; flex-shrink: 0; }
.wb-properties { position: absolute; top: 16px; right: 16px; width: 248px; max-height: calc(100% - 88px); overflow-y: auto; scrollbar-width: thin; }
.wb-panel-header { top:-.5rem; margin-top:-.5rem; margin-left:-.5rem; margin-right:-.5rem; }
.wb-bottom-left { position: absolute; left: 16px; bottom: 8px; }
.wb-icon-button { width: 42px; height: 42px; }
.wb-zoom #zoom-reset { width: 54px; font-variant-numeric: tabular-nums; }
#whiteboard #share-key { letter-spacing: .02em; }
#toast { position: fixed; left: 50%; bottom: 76px; transform: translateX(-50%); max-width: 85vw; z-index: 1090; font-size: 12px; }
@media (max-width: 1100px) { #participants { display: none; } .wb-action-label { display: none; } .wb-header-actions .btn { justify-content: center; width: 36px; padding: 6px; } }
@media (max-width: 700px) {
 .wb-controlbar { padding: 8px !important; gap: 6px !important; }
 .wb-heading { flex: 1; min-width: 90px; } #board-title { width: 100%; max-width: 160px; }
 .wb-header-actions { gap: 6px !important; flex-shrink: 0; }
 .wb-header-group { gap:4px!important; }
 .wb-header-actions .btn { width: 30px; min-height: 32px; }
 .wb-tools { left: 10px; top: 12px; max-height: calc(100% - var(--wb-footer-height, 48px) - 36px); }
 .wb-tools .btn { width: 30px; height: 30px; }
 .wb-properties { left: 62px; right: auto; top: 12px; width: 238px; max-height: calc(100% - 78px); }
 .wb-bottom-left { left: 10px; gap: 5px !important; }

 .wb-history .btn, .wb-zoom .btn { width: 28px; height: 32px; }
 .wb-zoom #zoom-reset { width: 44px; }

 .wb-icon-button { width: 36px; height: 40px; }
}

.wb-group-corner { position: absolute; right: 3px; bottom: 3px; border-left: 4px solid transparent; border-bottom: 4px solid currentColor; }
.wb-group-trigger { touch-action: none; user-select: none; }
.wb-tool-menu { position: absolute; z-index: 1040; min-width: 190px; max-width: calc(100% - 80px); max-height: calc(100% - 16px); overflow-y: auto; }
#whiteboard .wb-tool-menu .dropdown-item { min-height: 36px; }
.wb-connector-toolbar { position: absolute; z-index: 5; white-space: nowrap; }
.wb-connector-toolbar .btn { padding: 5px; }
.wb-connector-handle { position: absolute; z-index: 6; width: 13px; height: 13px; border-radius: 50%; border: 2px solid white; background: var(--bs-azure); transform: translate(-50%,-50%); box-shadow: 0 0 0 1px var(--bs-azure); touch-action: none; }
.wb-connector-handle:focus-visible { outline: 3px solid var(--bs-blue); outline-offset: 3px; }

/* Keep control points compact while providing a usable pointer/touch target. */
#whiteboard .wb-connector-handle { width: 26px; height: 26px; border: 0; background: transparent; box-shadow: none; }
.wb-connector-handle::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; border: 2px solid white; background: var(--bs-azure); box-shadow: 0 0 0 1px var(--bs-azure); }

.wb-anchor-guides { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
.wb-anchor-guides line { stroke:var(--bs-azure); stroke-width:1; }
.wb-anchor-handle { position:absolute; z-index:6; width:26px; height:26px; transform:translate(-50%,-50%); touch-action:none; border:0; background:transparent; padding:0; }
.wb-anchor-handle::after { content:""; position:absolute; inset:8px; border:1px solid var(--bs-azure); background:white; }
.wb-anchor-handle[aria-pressed=true]::after { background:var(--bs-azure); }
.wb-anchor-handle[data-kind=in]::after, .wb-anchor-handle[data-kind=out]::after { border-radius:50%; inset:9px; }
.wb-anchor-handle:focus-visible { outline:2px solid var(--bs-azure); outline-offset:1px; }

.wb-properties, .wb-tools { z-index:20; }

/* Document controls stay with history; Properties contains object controls only. */
.wb-bottom-left { z-index:30; }
.wb-grid-controls > .btn { display:grid; place-items:center; width:30px; height:30px; }
.wb-grid-menu { width:260px; max-width:calc(100vw - 24px); max-height:calc(100dvh - 180px); overflow:auto; }
@media(max-width:700px) { .wb-snap-label { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; } .wb-grid-controls { gap:6px !important; padding-left:5px !important; padding-right:5px !important; } }

@media(max-width:380px){ .wb-zoom .btn { width:24px; } .wb-zoom #zoom-reset { width:40px; } }

@media(max-width:380px) { .wb-grid-controls > .btn { width:26px; } .wb-grid-controls { gap:4px !important; padding-left:3px !important; padding-right:3px !important; } }

.wb-path-toolbar { position:absolute; left:50%; top:16px; transform:translateX(-50%); z-index:15; }
.wb-path-toolbar .btn { width:34px; height:32px; padding:4px; }

/* Compact Fill/Stroke swatches mirror the drawing-tool defaults and selection. */
.wb-rail-paint { position:relative; width:34px; height:49px; flex-shrink:0; }
.wb-rail-paint > .btn { position:absolute; width:25px; height:25px; margin:0; cursor:pointer; }
.wb-rail-fill { left:0; top:4px; z-index:2; }.wb-rail-stroke { right:0; top:18px; z-index:3; }
.wb-rail-paint > .btn { border:0; border-radius:50%; }
.wb-rail-paint > .btn span { position:absolute; inset:0; border:1px solid #81909d; border-radius:50%; background:var(--paint); }
.wb-rail-stroke span::after { content:""; position:absolute; inset:5px; background:#fff; border:1px solid #81909d; border-radius:50%; }
.wb-rail-paint > .btn[data-none=true] span { background:linear-gradient(135deg,#fff 46%,#fc625c 47%,#fc625c 54%,#fff 55%); }.wb-rail-stroke[data-none=true] span::after { display:none; }
#whiteboard .wb-rail-paint #swap-paint { position:absolute; right:0; top:-3px; width:15px; height:15px; z-index:5; }#whiteboard .wb-rail-paint #swap-paint .svg-icon { width:13px; height:13px; }

.wb-paint-menu { width:240px; max-width:calc(100vw - 24px); max-height:calc(100dvh - 180px); overflow:auto; }
.wb-angle-dial { width:56px; height:56px; background:repeating-conic-gradient(var(--bs-border-color,#dee2e6) 0deg 2deg,transparent 2deg 45deg); touch-action:none; cursor:grab; }
.wb-angle-dial::before { content:""; position:absolute; inset:5px; border-radius:50%; background:var(--bs-light); }
.wb-angle-dial span { position:absolute; width:22px; height:2px; left:27px; top:26px; background:var(--bs-blue); transform-origin:0 50%; transform:rotate(var(--angle,0deg)); pointer-events:none; }
.wb-angle-dial::after { content:""; position:absolute; left:23px; top:23px; width:8px; height:8px; border-radius:50%; background:var(--bs-blue); }
.wb-angle-dial:focus-visible { outline:3px solid var(--bs-blue); outline-offset:3px; }
.wb-angle-dial:active { cursor:grabbing; }
.wb-angle-dial:disabled { opacity:.5; cursor:default; }
.wb-gradient-preview { height:32px; background-image:var(--gradient),repeating-conic-gradient(#e5e9ef 0% 25%,white 0% 50%); background-size:auto,12px 12px; }
.wb-tools:has(.wb-paint-menu.show) { z-index:1040; }

#whiteboard .wb-rail-paint > .wb-rail-fill, #whiteboard .wb-rail-paint > .wb-rail-stroke { width:25px; height:25px; position:absolute; }
.wb-rail-paint[data-active=fill] .wb-rail-fill, .wb-rail-paint[data-active=stroke] .wb-rail-stroke { z-index:4; }

.wb-color-field { height:128px; position:relative; background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent),var(--hue); touch-action:none; cursor:crosshair; }
#paint-knob { position:absolute; width:12px; height:12px; border:2px solid white; border-radius:50%; box-shadow:0 0 0 1px #253545; transform:translate(-50%,-50%); pointer-events:none; }
#paint-palette .btn { width:18px; height:18px; flex-shrink:0; border:0; }
#whiteboard .wb-paint-menu .btn-group .btn { width:auto; height:28px; }
.wb-hue { background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red); border-radius:var(--bs-border-radius); height:8px; }
.wb-hue::-webkit-slider-runnable-track { background:transparent; height:8px; }
.wb-hue::-moz-range-track { background:transparent; height:8px; }
#paint-field:focus-visible { outline:2px solid var(--bs-azure); outline-offset:2px; }

@media(max-width:700px){.wb-heading{flex:1;width:0;}#board-title{width:100%;}}

.wb-bottom-left .wb-view-controls .btn { width:32px; min-width:32px; height:32px; }
.wb-bottom-left #zoom-reset { width:52px; }
@media(max-width:700px){.wb-bottom-left{gap:6px!important}}.wb-pages{flex:none}.wb-pages .btn{width:28px;height:32px}.wb-pages .form-select{width:132px;border:0;height:32px}.wb-pages .dropdown-menu{min-width:160px}
@media(max-width:700px){#page-prev,#page-next{display:none}.wb-pages .form-select{width:76px;padding-left:4px}.wb-pages .btn{width:24px;height:32px}.wb-bottom-left .wb-view-controls .btn{width:24px;min-width:24px}.wb-bottom-left #zoom-reset{width:44px}.wb-properties{max-height:calc(100% - 110px)}}

.wb-pages > .btn .svg-icon, .wb-pages > .dropup > .btn .svg-icon { width:20px; height:20px; }
.wb-pages > .form-select { padding-left:8px; padding-right:28px; }
.wb-pages > .btn:disabled { opacity:.3; }
#page-position { font-variant-numeric:tabular-nums; font-size:11px; }
#whiteboard .wb-page-options { width:232px; max-width:calc(100vw - 24px); }
.wb-page-options .dropdown-item { min-height:36px; padding-left:10px; padding-right:10px; }
.wb-page-options .svg-icon { width:18px; height:18px; flex:none; }
#page-more[aria-expanded="true"] { color:var(--bs-blue,#0d6efd); background:var(--bs-light,#f8f9fa); }

/* Board list uses Bootstrap list and form components. */
.wb-board-open { min-width:0; background:transparent; color:inherit; font:inherit; }
.wb-board-open:hover,.wb-board-open:focus-visible { background:var(--bs-light,#f8f9fa); }
.wb-board-open:focus-visible { outline:2px solid var(--bs-blue,#0d6efd); outline-offset:-2px; }
#boards-list [data-current="true"] { background:var(--bs-aliceblue,#f0f8ff); }
#boards-list [data-current="true"] .wb-board-open { background:transparent; }
.wb-board-symbol { width:40px; height:44px; }
#boards-list .wb-board-open { flex:1; }
.wb-board-info .svg-icon { width:14px; height:14px; flex-shrink:0; }
.wb-board-info { column-gap:12px; }
.wb-current-board { font-size:inherit; }
#boards-list .wb-board-delete { display:grid;place-items:center; width:34px;height:34px;box-shadow:none; }
@media(max-width:700px) {
 .wb-header-actions { gap:6px!important; }
 .wb-heading { min-width:80px; }
  .wb-board-symbol { width:30px;height:38px; }
 .wb-board-open { gap:8px!important; }

}

#boards-list .wb-board-delete { color:var(--bs-red,#ff5757);background:transparent;border:0; }
#boards-list .wb-board-delete:hover,#boards-list .wb-board-delete:focus-visible { color:var(--bs-red,#ff5757);background:#fff3f3; }

#tool-menu-shapes:not([hidden]) { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:420px;gap:4px; }
#tool-menu-shapes .dropdown-item { min-width:0;white-space:normal;padding:7px 9px; }
.wb-shape-category { grid-column:1 / -1; }
@media(max-width:700px) { #tool-menu-shapes:not([hidden]) { grid-template-columns:repeat(2,minmax(0,1fr));width:260px; } }

/* Keep unavailable actions visibly distinct, including custom Bootstrap button variants. */
#whiteboard button:disabled, #whiteboard .btn.disabled, #whiteboard [role="button"][aria-disabled="true"] { opacity: .38; filter: grayscale(1); box-shadow: none; pointer-events: none; }

/* Compact shape gallery with the existing accessible menu controls. */
#whiteboard .wb-tool-menu { background:#fff;border:1px solid var(--bs-border-color,#e1e7ef);border-radius:var(--bs-border-radius); }
#whiteboard .wb-tool-preview { display:grid;place-items:center;flex-shrink:0;width:30px;height:30px;border-radius:var(--bs-border-radius);background:var(--bs-light,#f5f7fa); }
#whiteboard .wb-tool-shortcut { font-size:10px;line-height:1.4; }
#whiteboard #tool-menu-shapes { padding:8px!important; }
#whiteboard #tool-menu-shapes .dropdown-item { position:relative;flex-direction:column;justify-content:center;gap:4px!important;min-height:68px;padding:6px 4px;border:1px solid #edf0f4;border-radius:var(--bs-border-radius);text-align:center;background:#fff; }
#whiteboard #tool-menu-shapes .wb-tool-preview { background:transparent;width:28px;height:28px; }
#whiteboard #tool-menu-shapes .svg-icon { width:22px;height:22px; }
#whiteboard #tool-menu-shapes .wb-tool-label { min-height:15px; }
#whiteboard #tool-menu-shapes .wb-tool-shortcut { position:absolute;top:5px;right:6px;margin:0!important;font-size:9px; }
#whiteboard #tool-menu-shapes .dropdown-item:hover { background:var(--bs-light,#f5f7fa);border-color:#cbd7e5; }
#whiteboard #tool-menu-shapes .dropdown-item[aria-pressed="true"] { background:#edf7ff;border-color:var(--bs-azure,#00a1ff);color:var(--bs-blue,#087cc5); }
#whiteboard .wb-tool-menu .dropdown-item:focus-visible { outline:2px solid var(--bs-azure,#00a1ff);outline-offset:-2px; }

/* Keep anchor editing controls compact so paths remain reachable on phones. */
@media(max-width:700px) {
 #whiteboard[data-direct-selection="true"] .wb-properties { padding:8px !important; }
 #whiteboard[data-direct-selection="true"] #transform-fields { display:none; }
 #whiteboard[data-direct-selection="true"] #anchor-actions { margin-top:0 !important; padding-top:0 !important; border-top:0 !important; }
 #whiteboard[data-direct-selection="true"] #anchor-actions > span { display:none !important; }
 #whiteboard[data-direct-selection="true"] #anchor-actions { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; }
 #whiteboard[data-direct-selection="true"] #anchor-actions .btn-group { display:contents !important; }
 #whiteboard[data-direct-selection="true"] #anchor-actions .btn { width:100% !important; height:32px; margin:0 !important; padding:4px; justify-content:center; }
 #whiteboard[data-direct-selection="true"] #path-reset span { display:none; }
}

/* Layers uses the same compact controls as Transform. */
.wb-layers { position:absolute; right:16px; top:16px; width:310px; max-height:calc(100% - 110px); z-index:25; display:flex; flex-direction:column; }
#layers-list { min-height:0; overflow-y:auto; scrollbar-width:thin; }
#whiteboard.wb-layers-open .wb-properties { display:none; }
#whiteboard .wb-layer-action { width:24px; height:28px; flex:none; display:grid; place-items:center; }
#whiteboard .wb-layer-action svg { width:18px; height:18px; }
.wb-layer-name { min-width:0; width:100%; }
.wb-layer-name[readonly] { cursor:default; background:transparent; box-shadow:none; }
.wb-layer-name:not([readonly]) { background:var(--bs-white,#fff); box-shadow:inset 0 0 0 1px var(--bs-blue,#0d6efd); }
#layers-list { flex:1 1 auto; }
@media(max-width:700px) { .wb-layers { right:10px; top:12px; width:calc(100% - 72px); } }
@media(max-width:380px) { .wb-heading { min-width:68px; } }

/* Dock panels beside a permanent right edge rail. */
.wb-right-tools { position:absolute;right:0;top:0;bottom:0;width:44px;z-index:26; }
.wb-right-tools .btn { width:34px;height:34px;display:grid;place-items:center;flex:none; }
.wb-right-tools .btn[aria-expanded=true] { background:var(--bs-light,#eaf4ff);color:var(--bs-blue,#0d6efd); }
.wb-properties,.wb-layers { right:52px;left:auto; }
.wb-layer-row.wb-drop-before::before,.wb-layer-row.wb-drop-after::after { content:"";position:absolute;left:0;right:0;height:2px;background:var(--bs-blue,#0d6efd);z-index:1; }
.wb-layer-row.wb-drop-before::before { top:0; }.wb-layer-row.wb-drop-after::after { bottom:0; }
.wb-layer-dragging { opacity:.45; }
.wb-layer-movable { cursor:grab;touch-action:none; }.wb-layer-movable.wb-layer-dragging { cursor:grabbing; }
.wb-layer-movable .wb-layer-name[readonly] { cursor:grab;user-select:none; }
.wb-bottom-left { width:calc(100% - 80px);max-width:calc(100% - 80px); }
@media(max-width:700px) { .wb-properties,.wb-layers { right:50px;left:auto;width: min(248px,calc(100% - 112px)); }.wb-bottom-left {width:calc(100% - 64px);max-width:calc(100% - 64px);} }

.wb-save-warning{position:absolute;left:70px;right:52px;bottom:104px;z-index:40}.wb-save-warning .btn{flex:none}

/* Collaboration panels share the existing right rail. */
.wb-collaboration { position:absolute;top:16px;right:52px;width:300px;max-height:calc(100% - 88px);display:flex;flex-direction:column;overflow:hidden;z-index:20;}
.wb-collaboration-scroll { min-height:0; overflow:auto; scrollbar-width:thin; }
.wb-call-device { display:grid;grid-template-columns:minmax(0,1fr);gap:8px;align-items:center; }
.wb-call-device > div { white-space:nowrap; }
.wb-call-device .form-select { min-width:0; }
.wb-member-avatar { width:28px; height:28px; }
#call-controls .btn { width:34px;height:32px;display:grid;place-items:center;padding:4px; }
#call-leave { margin-left:auto; }
#call-error:empty { display:none; }
#comments-list p { overflow-wrap:anywhere; }

.wb-call-filmstrip { position:absolute;left:80px;bottom:88px;width:max-content;max-width:calc(100% - 144px);z-index:22;pointer-events:none; }
.wb-call-filmstrip button,.wb-call-filmstrip .wb-video-tile { pointer-events:auto; }
#whiteboard:has(#collaboration-panel:not([hidden])) .wb-call-filmstrip { max-width:calc(100% - 444px); }
.wb-video-tile { cursor:grab;touch-action:none;user-select:none; }
.wb-dragging .wb-video-tile { cursor:grabbing; }
.wb-video-resize { position:absolute;right:0;bottom:0;width:24px;height:24px;padding:4px;border:0;background:#0006;color:white;cursor:nwse-resize;touch-action:none; }
.wb-video-tile:focus-visible,.wb-video-resize:focus-visible { outline:2px solid var(--bs-primary);outline-offset:-2px; }
.wb-resizing .wb-video-tile { cursor:nwse-resize; }
@media(max-width:700px) { #whiteboard:has(#collaboration-panel:not([hidden])) .wb-call-filmstrip { display:none; } }
.wb-call-filmstrip #call-videos { overflow:auto; }
.wb-call-collapsed #call-videos { display:none!important; }
.wb-video-tile { flex:0 0 var(--wb-video-width,280px);max-width:100%;aspect-ratio:16 / 10; }
.wb-video-tile video { position:absolute;inset:0;width:100%;height:100%;object-fit:contain; }
.wb-video-caption { background:#0009;padding-right:28px!important; }
.wb-video-avatar { display:none;position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;background:#ffffff20;align-items:center;justify-content:center;font-size:16px;font-weight:600; }
.wb-audio-only .wb-video-avatar { display:flex; }
.wb-audio-only video { visibility:hidden; }
.wb-laser { position:absolute;width:12px;height:12px;transform:translate(-50%,-50%);border-radius:50%;background:#f33434;box-shadow:0 0 10px 4px #f3343455;z-index:28;pointer-events:none; }
.wb-comment-marker { position:absolute;transform:translate(-50%,-50%);width:26px;height:26px;padding:0;z-index:17; }
.wb-layer-group { background:#f3f6fa; }
.wb-layer-child > button:nth-child(2) { margin-left:28px; }
@media(max-width:700px){ .wb-collaboration { top:12px;right:46px;width:min(280px,calc(100% - 102px));max-height:calc(100% - 100px); } .wb-call-device { grid-template-columns:minmax(0,1fr);gap:6px; } .wb-call-filmstrip { left:58px;max-width:calc(100% - 106px);bottom:128px; } .wb-video-tile { flex-basis:var(--wb-video-width,208px); } }

.wb-layer-group.wb-drop-before { border-top:2px solid var(--bs-blue,#0d6efd); }
.wb-layer-group.wb-drop-after { border-bottom:2px solid var(--bs-blue,#0d6efd)!important; }
.wb-layer-group.wb-layer-dragging { opacity:.45; }

/* Rulers are measured in document coordinates, independent of viewport zoom. */
.wb-ruler { position:absolute;z-index:19;background:#f7f9fc;pointer-events:none; }
.wb-ruler-top { left:24px;right:44px;top:0;height:24px; }
.wb-ruler-left { left:0;top:24px;bottom:0;width:24px; }
#whiteboard .wb-ruler-corner { position:absolute;left:0;top:0;width:24px;height:24px;z-index:27;font-size:9px; }
.wb-rulers-visible .wb-tools { left:32px;top:36px;max-height:calc(100% - var(--wb-footer-height, 48px) - 64px); }
.wb-rulers-visible .wb-properties,.wb-rulers-visible .wb-layers,.wb-rulers-visible .wb-collaboration { top:36px; }
.wb-rulers-visible .wb-bottom-left { left:32px;width:calc(100% - 96px);max-width:calc(100% - 96px); }
.wb-right-tools { padding-bottom:12px!important; }
#whiteboard .wb-history .btn,#whiteboard .wb-grid-controls > .btn,#whiteboard .wb-view-controls .btn,#whiteboard .wb-page-actions > .btn,#whiteboard .wb-page-actions > .dropup > .btn { background:transparent; height:30px; border-radius:var(--bs-border-radius); }
.wb-bottom-left .wb-pages .form-select { box-shadow:none; }
#export-dialog .wb-format-selected { --bs-btn-hover-border-color:var(--bs-blue,#0d6efd); --bs-btn-active-border-color:var(--bs-blue,#0d6efd); border-color:var(--bs-blue,#0d6efd); background:var(--bs-light,#f8f9fa); color:var(--bs-blue,#0d6efd); box-shadow:0 0 0 1px var(--bs-blue,#0d6efd); }
@media(max-width:700px){ .wb-rulers-visible .wb-tools { left:28px;top:30px;max-height:calc(100% - var(--wb-footer-height, 48px) - 54px); }.wb-rulers-visible .wb-bottom-left {left:28px;width:calc(100% - 82px);max-width:calc(100% - 82px);} }

/* Compact page selector with grouped navigation. */
.wb-pages { min-width:0; flex-shrink:0; gap:6px!important; }
#whiteboard .wb-pages > #page-select { field-sizing:content; width:auto; max-width:220px; height:30px; padding:4px 26px 4px 10px; border-radius:var(--bs-border-radius); }
#whiteboard .wb-page-navigation .btn,#whiteboard .wb-page-actions > .btn,#whiteboard #page-options-host .btn { display:inline-flex; align-items:center; justify-content:center; width:28px; height:30px; border-radius:var(--bs-border-radius); }
#whiteboard .wb-page-navigation .svg-icon,#whiteboard .wb-page-actions > .btn .svg-icon,#page-options-host .svg-icon { width:18px; height:18px; }
#whiteboard .wb-page-navigation .btn { background:transparent; }
#page-position { min-width:40px; text-align:center; font-size:11px; font-variant-numeric:tabular-nums; padding:0 4px!important; }
#whiteboard .wb-pages .btn:disabled { opacity:.3; }
@media(max-width:700px){#whiteboard .wb-pages > #page-select {max-width:min(180px,calc(100vw - 182px));}#whiteboard .wb-page-navigation .btn {display:none;} .wb-pages {gap:3px!important;} }

/* Compact editor labels retain the site's existing palette. Bootstrap owns dialog surfaces and form sizing. */
#whiteboard .wb-workspace.wb-has-artboard { background-color:var(--bs-light,#eef1f5); }
.wb-artboard { position:absolute; background-color:#fff; box-shadow:0 2px 12px #25354520,0 0 0 1px #25354520; pointer-events:none; }
.wb-artboard-label { position:absolute; pointer-events:none; white-space:nowrap; font-size:11px; }

.wb-selection-toolbar{position:absolute;z-index:5;overflow-x:auto;white-space:nowrap;scrollbar-width:thin;}
.wb-selection-toolbar>div{flex:none;}
.wb-selection-toolbar .btn{flex:none;padding:5px;}

/* Pattern controls leave the canvas available for live preview and navigation. */
#whiteboard .wb-pattern-panel { max-width:calc(100% - 112px); display:flex; flex-direction:column; overflow:hidden; }
.wb-pattern-panel form { display:flex; flex-direction:column; min-height:0; }
.wb-pattern-panel form > div { flex-shrink:0; }
.wb-pattern-panel #pattern-body { flex-shrink:1; min-height:0; overflow:auto; scrollbar-width:thin; }
.wb-pattern-panel .form-control, .wb-pattern-panel .form-select { min-width:0; }
.wb-pattern-panel.is-collapsed form > div:last-child { display:none !important; }
#whiteboard .wb-pattern-panel #pattern-collapse { display:none !important; justify-content:center; padding:4px; }
#whiteboard #object-context-menu .svg-icon { width:17px; height:17px; }
@media(max-width:700px) {
 #whiteboard .wb-pattern-panel { left:62px; right:50px; top:auto; bottom:max(112px,calc(var(--wb-footer-height, 88px) + 16px)); width:auto; max-width:none; max-height:55%; }
 #whiteboard .wb-pattern-panel #pattern-collapse { display:inline-flex !important; }
 #whiteboard .wb-pattern-panel.is-collapsed { max-height:none; }
}

#whiteboard #object-context-host .wb-submenu-arrow { width:14px; height:14px; flex-shrink:0; opacity:.65; }
#whiteboard #object-context-host .svg-icon { width:17px; height:17px; }
#objects-rename-form .btn { flex-shrink:0; }

#whiteboard #object-context-menu .dropdown-divider { margin:4px 0; }
#whiteboard #object-context-host .dropdown-menu { padding:6px; border-radius:var(--bs-border-radius); }
#whiteboard #object-context-host .dropdown-item { border-radius:var(--bs-border-radius); }
#whiteboard #objects-select[aria-expanded=true], #whiteboard #objects-shapes[aria-expanded=true], #whiteboard #objects-arrange[aria-expanded=true] { background:#fff; color:#253545; box-shadow:0 1px 4px #25354512; }

#whiteboard #group-isolation-bar { position:absolute; z-index:8; top:12px; left:50%; transform:translateX(-50%); max-width:calc(100% - 132px); padding:4px 6px 4px 12px; border:1px solid var(--bs-border-color,#e1e7ef); border-radius:var(--bs-border-radius); background:var(--bs-white,#fff); }
#whiteboard.wb-rulers-visible #group-isolation-bar { top:32px; }
#whiteboard #objects-select-menu .dropdown-divider { margin:4px 0; }

@media(max-width:700px) {
 #whiteboard.wb-group-isolated .wb-properties, #whiteboard.wb-group-isolated .wb-layers, #whiteboard.wb-group-isolated .wb-collaboration { top:60px; max-height:calc(100% - 160px); }
 #whiteboard.wb-group-isolated.wb-rulers-visible .wb-properties, #whiteboard.wb-group-isolated.wb-rulers-visible .wb-layers, #whiteboard.wb-group-isolated.wb-rulers-visible .wb-collaboration { top:80px; }
}

.wb-text-editor { min-height:180px; max-height:40vh; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; }
#text-error:empty { display:none; }
/* Crop geometry follows the image transform; Bootstrap styles its action toolbar. */
.wb-crop-frame { position:absolute;left:0;top:0;transform-origin:0 0;z-index:9;overflow:hidden;touch-action:none; }
.wb-crop-frame img { width:100%;height:100%;pointer-events:none;user-select:none; }
.wb-crop-area { position:absolute;cursor:move;box-shadow:0 0 0 10000px #0008;outline:var(--crop-line,1px) solid #fff; }
.wb-crop-area::before { content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 33.2%,#ffffff70 33.2%,#ffffff70 33.5%,transparent 33.5%,transparent 66.5%,#ffffff70 66.5%,#ffffff70 66.8%,transparent 66.8%),linear-gradient(transparent 33.2%,#ffffff70 33.2%,#ffffff70 33.5%,transparent 33.5%,transparent 66.5%,#ffffff70 66.5%,#ffffff70 66.8%,transparent 66.8%); }
.wb-crop-handle { position:absolute;width:var(--crop-handle-size,12px);height:var(--crop-handle-size,12px);transform:translate(-50%,-50%);border:var(--crop-line,1px) solid #078bd6;background:#fff;padding:0;cursor:crosshair;touch-action:none; }
.wb-crop-toolbar { position:absolute;top:36px;left:50%;transform:translateX(-50%);z-index:28;max-width:calc(100% - 112px);white-space:nowrap; }
.wb-cropping #selection-toolbar { display:none!important; }

/* Frame labels are canvas controls; containment targets reuse the Layers drag feedback. */
#frame-labels { position:absolute;inset:0;pointer-events:none;z-index:4; }
#frame-labels button { pointer-events:auto; }
#whiteboard .wb-drop-inside { outline:1px solid #078bd6;outline-offset:-1px; }

.wb-video-expand { position:absolute;right:4px;top:4px;width:28px;height:28px;padding:4px;border:0;border-radius:4px;background:#0009;color:#fff;cursor:pointer; }
.wb-video-tile:fullscreen { width:100vw;height:100dvh;max-width:none;aspect-ratio:auto;border-radius:0!important;cursor:default;background:#111!important; }
.wb-video-tile:fullscreen .wb-video-resize { display:none; }
.wb-video-tile:fullscreen .wb-video-caption { font-size:16px;padding:8px!important; }
.wb-video-tile:fullscreen .wb-video-expand { width:36px;height:36px;right:12px;top:12px; }
.wb-video-tile:fullscreen .wb-video-avatar { width:80px;height:80px;font-size:32px; }