/* Opt-in layout: desktop rules and document geometry remain unchanged. */
html[data-wb-layout] { --wb-bottom: max(8px, env(safe-area-inset-bottom)); }
html[data-wb-layout] body { min-height: 0; }
html[data-wb-layout] .container { height: var(--wb-view-height, 100dvh); }
html[data-wb-layout] .toolbar {
 position: fixed !important; top: auto !important; bottom: calc(var(--wb-keyboard, 0px) + var(--wb-bottom)) !important;
 left: 50% !important; transform: translateX(-50%) !important; z-index: 1000;
 max-width: calc(100% - 16px) !important; margin: 0 !important; opacity: 1 !important;
 --tool-size: 44px;
}
html[data-wb-layout] .toolbar .tool-btn { min-width:44px !important; min-height:44px !important; }
html[data-wb-layout] .canvas-container { margin-bottom: 64px; min-height: 0; }
html[data-wb-layout] .toolbar-more-menu { max-height: calc(var(--wb-view-height, 100dvh) - 100px) !important; overflow-y:auto; overscroll-behavior:contain; }
html[data-wb-layout] :is(#shapesMenu,#colorsMenu,#brushSizeMenu,#widgetsMenu,#emojiMenu) { max-width:calc(100vw - 16px); max-height:calc(var(--wb-view-height,100dvh) - 100px); overflow-y:auto; }
html[data-wb-layout] :is(.color-option,.shape-option,.widget-option,.toolbar-btn) { min-width:44px; min-height:44px; }
html[data-wb-layout] :is(.modal-content,.students-modal-content,.permission-dialog,.text-editor) { max-width:calc(100vw - 16px) !important; max-height:calc(var(--wb-view-height,100dvh) - 24px) !important; overflow:auto; }
html[data-wb-layout] :is(input,textarea,select) { font-size:16px; }
html[data-wb-layout] .board-frame { width:100% !important; height:var(--wb-view-height,100dvh) !important; }
html[data-wb-layout] .whiteboard-container { width:100% !important; min-width:0 !important; flex:1 !important; }
html[data-wb-layout] .wb-original-media { display:none !important; }
html[data-wb-layout] :is(.tabs-container,.tabs-list) { min-width:0; max-width:100%; overflow-x:auto; }
.wb-mobile-camera { display:none; }
html[data-wb-layout] .wb-mobile-camera {
 display:flex; flex-direction:column; position:fixed; z-index:900; width:176px;
 background:#172033; color:white; border:1px solid #64748b; border-radius:12px;
 overflow:hidden; box-shadow:0 3px 16px #0003; font:13px system-ui;
}
.wb-mobile-camera [hidden] { display:none !important; }
.wb-mobile-camera button { min-width:44px; min-height:44px; border:0; background:#263349; color:white; cursor:pointer; font:inherit; padding:4px; }
.wb-mobile-camera button:focus-visible { outline:3px solid #f1ba43; outline-offset:-3px; }
.wb-mobile-camera button:disabled { opacity:.45; }
.wb-mobile-camera header { padding:0; display:flex; background:#172033; color:white; }
.wb-mobile-camera .wb-camera-handle { flex:1; touch-action:none; cursor:move; }
.wb-mobile-camera video { width:100%; height:99px; object-fit:contain; background:#101827; }
.wb-mobile-camera .wb-camera-actions { display:flex; flex-wrap:wrap; }
.wb-mobile-camera .wb-camera-actions button { flex:1; }
.wb-mobile-camera .wb-camera-list { max-height:180px; overflow:auto; overscroll-behavior:contain; }
.wb-mobile-camera .wb-camera-list button { display:block; width:100%; text-align:left; }
.wb-mobile-camera .wb-camera-list button[aria-pressed=true] { background:#5145bd; }
.wb-mobile-camera[data-minimized=true] video { display:none; }
html[data-wb-layout] .presence-toast { bottom:80px !important; max-width:calc(100vw - 24px); }
html[data-wb-layout] .canvas-container { zoom:var(--wb-document-zoom,1); }
html[data-wb-layout] .wb-view-tools { display:flex; gap:4px; flex-wrap:wrap; }
html[data-wb-layout] .wb-view-tools button { min-height:44px; min-width:44px; padding:8px; }
.wb-view-tools { display:none; }
/* A canvas is a document surface, not a responsive image. */
html[data-wb-layout] #whiteboard { max-width:none; flex-shrink:0; }
html[data-wb-layout] :is(.expand-canvas-btn,#downloadPdfBtn,.student-message-btn) { bottom:calc(80px + var(--wb-keyboard,0px)) !important; }
html[data-wb-layout] .canvas-container { margin-bottom:calc(72px / var(--wb-document-zoom,1)); }
html[data-wb-layout] .wb-mobile-camera { max-height:calc(var(--wb-view-height,100dvh) - 96px); overflow:auto; }
html[data-wb-layout] .wb-mobile-camera header { position:sticky; top:0; z-index:1; }
html[data-wb-layout] .floating-student-btn { bottom:calc(80px + var(--wb-keyboard,0px)); }
html[data-wb-layout] .students-popup { bottom:calc(136px + var(--wb-keyboard,0px)); max-width:calc(100vw - 16px); max-height:calc(var(--wb-view-height,100dvh) - 152px); }
html[data-wb-layout] .students-popup-content { max-width:100%; max-height:calc(var(--wb-view-height,100dvh) - 152px); }
html[data-wb-layout] :is(.main-container,.content-area,.iframe-container) { min-width:0; }
html[data-wb-layout] .toolbar-more-menu { width:min(360px,calc(100vw - 16px)); }
html[data-wb-layout] .toolbar-more-content [data-toolbar-group=advanced] { flex-wrap:wrap; }
html[data-wb-layout] .toolbar-more-content [data-toolbar-group=advanced]::before { flex:1; }
html[data-wb-layout] .wb-view-tools { order:2; flex:0 0 100%; display:grid; grid-template-columns:44px 1fr 44px 1fr; margin-top:6px; }
html[data-wb-layout] .wb-view-tools button { border:1px solid #dce3ed; border-radius:8px; background:#f8fafc; color:#334155; font:500 13px system-ui; padding:4px; }
html[data-wb-layout] .canvas-container:has(~ .toolbar.has-open-popover) .expand-canvas-btn,
html[data-wb-layout] .container:has(.toolbar.has-open-popover) .expand-canvas-btn { visibility:hidden; }
html[data-wb-layout] .permission-layer { z-index:2000; padding:8px; }
html[data-wb-layout] .permission-card { width:min(620px,100%); max-height:calc(var(--wb-view-height,100dvh) - 16px); overflow:auto; }
html[data-wb-layout] .permission-content { grid-template-columns:minmax(0,1fr); gap:12px; padding:12px; }
html[data-wb-layout] .permission-header { padding:16px; }
html[data-wb-layout] .permission-header h1 { font-size:20px; }
html[data-wb-layout] .permission-footer { padding:12px; }
html[data-wb-layout] .permission-actions { grid-template-columns:minmax(0,1fr); }
html[data-wb-layout] .permission-actions button { min-height:44px; }
.wb-mobile-camera .wb-camera-actions button { min-width:44px; flex:1 1 44px; overflow:hidden; }
.wb-mobile-camera .wb-camera-actions svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; }
.wb-mobile-camera .wb-camera-actions button svg ~ svg { display:none; }
.wb-rotate-gate { display:none; }
html[data-wb-rotate-required] .wb-rotate-gate { display:flex; position:fixed; inset:0; z-index:2147483000; align-items:center; justify-content:center; flex-direction:column; gap:18px; padding:max(24px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left)); background:#f8fafc; color:#172033; text-align:center; font:16px/1.5 system-ui; }
.wb-rotate-gate svg { width:72px; height:72px; stroke:#6557d9; fill:none; stroke-width:2; }
.wb-rotate-gate h1 { font-size:24px; line-height:1.25; margin:0; }
.wb-rotate-gate p { max-width:320px; margin:0; }
.wb-rotate-gate small { max-width:320px; color:#64748b; font-size:13px; }

.wb-rotate-gate:focus { outline:none; }