o2d-whiteboard{display:block;width:100%;height:100%;position:relative;background:#f3f4f6;overflow:hidden}o2d-whiteboard .board-root{position:absolute;inset:0}o2d-whiteboard .board-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#9ca3af;font:14px system-ui,-apple-system,sans-serif;pointer-events:none;-webkit-user-select:none;user-select:none}o2d-whiteboard .sticky-editor,o2d-whiteboard .person-editor{position:absolute;box-sizing:border-box;color:#1f2937;font-family:system-ui,-apple-system,sans-serif;line-height:1.2;outline:none;background:transparent;overflow:hidden;white-space:pre-wrap;word-break:break-word;caret-color:#1f2937}o2d-whiteboard .person-editor{outline:1px solid #b8c4d1;outline-offset:0}o2d-whiteboard .textbox-editor{position:absolute;box-sizing:border-box;background:transparent;pointer-events:auto;-webkit-user-select:text;user-select:text;white-space:pre-wrap;word-break:break-word;overflow:hidden;caret-color:currentColor;cursor:text}o2d-whiteboard .textbox-editor .ProseMirror p,o2d-whiteboard .textbox-editor .ProseMirror ul,o2d-whiteboard .textbox-editor .ProseMirror ol,o2d-whiteboard .textbox-editor .ProseMirror li{margin:0}o2d-whiteboard .textbox-editor .ProseMirror{outline:none}o2d-whiteboard[data-tool=select] .board-root{cursor:default}o2d-whiteboard[data-tool=text] .board-root{cursor:text}o2d-whiteboard[data-tool=line] .board-root,o2d-whiteboard[data-tool=sticky] .board-root,o2d-whiteboard[data-tool=checkbox] .board-root,o2d-whiteboard[data-tool=person] .board-root{cursor:crosshair}o2d-whiteboard[data-tool=rectangle] .board-root,o2d-whiteboard[data-tool=ellipse] .board-root{cursor:crosshair}o2d-whiteboard[data-tool=smiley] .board-root{cursor:crosshair}o2d-whiteboard[data-panning=ready] .board-root{cursor:grab!important}o2d-whiteboard[data-panning=grabbing] .board-root{cursor:grabbing!important}o2d-svg-optionsbar{display:block}o2d-whiteboard o2d-svg-optionsbar{position:absolute;top:24px;right:24px;width:427px}o2d-svg-optionsbar .svg-optionsbar-host{display:block;width:100%;line-height:0}o2d-svg-optionsbar .svg-optionsbar-host svg{display:block;width:100%;height:auto}o2d-svg-optionsbar .is-active{stroke:#1f2937;stroke-width:2;paint-order:stroke fill}o2d-whiteboard-toolbar,o2d-whiteboard-actions{--button-color: #585858}o2d-whiteboard-toolbar{display:block;background:#fff;border-bottom:1px solid #e5e7eb;position:relative;z-index:3}o2d-whiteboard-toolbar .toolbar-inner{display:flex;gap:4px;padding:8px 12px;flex-wrap:wrap;align-items:center}o2d-whiteboard-toolbar .toolbar-button{width:32px;height:32px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid #555;border-bottom-width:3px;border-radius:0;background:#fff;color:var(--button-color);cursor:pointer;font-size:14px;font-family:inherit}o2d-whiteboard-toolbar .toolbar-button:hover:not(.active):not(:disabled){background:#f3f4f6}o2d-whiteboard-toolbar .toolbar-button:disabled{opacity:.35;cursor:default}o2d-whiteboard-toolbar .toolbar-button.active{background:var(--button-color);color:#fff}o2d-whiteboard-toolbar .toolbar-button:focus-visible{outline:2px solid var(--button-color);outline-offset:2px}o2d-whiteboard-toolbar .toolbar-button--zoom{margin-left:auto;min-width:52px;font-size:13px;font-family:system-ui,-apple-system,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:0}o2d-whiteboard-toolbar .toolbar-divider{display:inline-block;width:1px;height:24px;margin:0 4px;background:#d1d5db;align-self:center}o2d-whiteboard-toolbar .toolbar-smiley-wrapper{position:relative}o2d-whiteboard-toolbar .toolbar-button--smiley{font-size:18px}o2d-whiteboard-toolbar .toolbar-smiley-dropdown{position:absolute;top:calc(100% + 2px);left:0;z-index:20;display:grid;grid-template-columns:repeat(5,32px);gap:3px;padding:6px;background:#fff;border:1px solid #555;border-bottom-width:3px;border-radius:0;box-shadow:0 4px 12px #00000026;white-space:nowrap}o2d-whiteboard-toolbar .toolbar-smiley-option{width:32px;height:32px;padding:0;font-size:18px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #d1d5db;border-bottom-width:2px;border-radius:0;background:#fff;cursor:pointer}o2d-whiteboard-toolbar .toolbar-smiley-option:hover{background:#f3f4f6}o2d-whiteboard-toolbar .toolbar-smiley-option.active{border-color:#555;background:#f3f4f6;outline:2px solid #2a5fd7;outline-offset:-2px}o2d-whiteboard-actions{display:block;position:absolute;inset:0;pointer-events:none;z-index:2}o2d-whiteboard-actions .actions-bar{position:absolute;display:flex;gap:4px;padding:11px 11px 11px 0;border-radius:0;pointer-events:auto;font:12px system-ui,-apple-system,sans-serif;white-space:nowrap;justify-content:flex-start;transform:translate(10px,7px)}o2d-whiteboard-actions .action{width:32px;height:32px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid #555;border-bottom-width:3px;border-radius:0;background:#fff;color:var(--button-color);cursor:pointer;font:inherit;font-size:13px}o2d-whiteboard-actions .action:hover{background:#f3f4f6}o2d-whiteboard-actions .action:focus-visible{outline:2px solid var(--button-color);outline-offset:1px}o2d-whiteboard-actions .action--danger:hover{background:#fee2e2;color:#b91c1c}o2d-whiteboard-actions .action--color{color:transparent}o2d-whiteboard-actions .color-picker{position:absolute;top:100%;left:0;margin-top:4px;padding:6px;background:#fff;border:1px solid #555;border-bottom-width:3px;border-radius:0;box-shadow:0 2px 8px #0000001f;pointer-events:auto}o2d-whiteboard-actions .color-picker__grid{display:grid;grid-template-columns:repeat(5,24px);gap:4px}o2d-whiteboard-actions .color-picker .action--color{width:24px;height:24px}o2d-whiteboard-actions .action--eyedropper{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:auto;margin-top:6px;padding:4px 8px;font:inherit;font-size:12px;color:var(--button-color)}o2d-whiteboard-actions .action--eyedropper:disabled{opacity:.5;cursor:not-allowed}o2d-whiteboard-actions .action.active{background:var(--button-color);color:#fff}o2d-whiteboard-actions .action-divider{display:inline-block;width:1px;align-self:stretch;margin:0 2px;background:#d1d5db}o2d-whiteboard-actions .action-group{display:inline-flex;gap:2px}o2d-whiteboard-actions .action--weight{font-size:14px;font-family:system-ui,-apple-system,sans-serif}o2d-whiteboard-actions .action--size-trigger{min-width:40px;font-size:13px;font-family:system-ui,-apple-system,sans-serif}o2d-whiteboard-actions .size-picker{position:absolute;top:100%;left:0;margin-top:4px;display:flex;flex-direction:column;gap:2px;padding:4px;background:#fff;border:1px solid #555;border-bottom-width:3px;border-radius:0;box-shadow:0 2px 8px #0000001f;pointer-events:auto;z-index:10}o2d-whiteboard-actions .size-picker .action{width:100%;height:28px;font-size:13px;justify-content:center}o2d-whiteboard-actions .smiley-picker{display:grid;grid-template-columns:repeat(5,32px);gap:2px;padding:4px;background:#fff;border:1px solid #555;border-bottom-width:3px;pointer-events:auto}o2d-whiteboard-actions .smiley-picker .action{width:32px;height:32px;font-size:18px}o2d-whiteboard-actions .action--smiley-swap{font-size:18px}o2d-whiteboard-actions .smiley-swap-grid{grid-template-columns:repeat(5,32px)}o2d-whiteboard-actions .action--smiley-option{width:32px;height:32px;font-size:18px}o2d-whiteboard-toolbar .toolbar-smiley-wrapper{position:relative;display:inline-block}o2d-whiteboard-toolbar .toolbar-button--smiley{font-size:18px;line-height:1}o2d-whiteboard-toolbar .toolbar-smiley-dropdown{position:absolute;top:100%;left:0;margin-top:4px;display:grid;grid-template-columns:repeat(5,32px);gap:2px;padding:4px;background:#fff;border:1px solid #555;border-bottom-width:3px;box-shadow:0 2px 8px #0000001f;z-index:100}o2d-whiteboard-toolbar .toolbar-smiley-option{font-size:18px;line-height:1}o2d-whiteboard-actions .action--transparent{background-color:#fff;background-image:linear-gradient(45deg,#d1d5db 25%,transparent 25%,transparent 75%,#d1d5db 75%),linear-gradient(45deg,#d1d5db 25%,transparent 25%,transparent 75%,#d1d5db 75%);background-size:10px 10px;background-position:0 0,5px 5px}
