/* Canvas tools and a compact workspace frame. */
.app-shell { min-height: 0; }
.sidebar { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.workspace-header { flex-basis: auto; min-height: 0; padding-top: 17px; padding-bottom: 17px; }
.header-top-row { margin-bottom: 11px; }
.breadcrumb #sidebar-toggle { display: inline-flex; margin-left: -7px; flex: 0 0 auto; }
#sidebar-close { flex: 0 0 auto; width: 28px; height: 28px; }
#header-toggle { width: 28px; height: 28px; flex: 0 0 auto; }
#header-toggle .icon { transform: rotate(180deg); }
.app-shell.sidebar-collapsed ~ .toast-container { left: 50%; }

.header-collapsed .workspace-header { display: flex; align-items: center; gap: 9px; flex: 0 0 44px; min-height: 44px; padding: 5px 17px; }
.header-collapsed .header-top-row { display: contents; }
.header-collapsed .breadcrumb { flex: 0 0 auto; }
.header-collapsed .breadcrumb > span,
.header-collapsed .breadcrumb > .icon,
.header-collapsed .header-top-divider,
.header-collapsed .guest-badge,
.header-collapsed .board-actions,
.header-collapsed .visibility-badge,
.header-collapsed .board-description { display: none; }
.header-collapsed .header-top-right { order: 3; gap: 10px; flex: 0 0 auto; }
.header-collapsed .board-header-row { order: 2; flex: 1; min-width: 0; display: block; }
.header-collapsed .board-title { width: 100%; height: 30px; padding: 2px 4px; font-size: 13px; line-height: 24px; letter-spacing: 0; }
.header-collapsed #header-toggle .icon { transform: none; }

.board-element.image { display: block; min-width: 32px; min-height: 32px; border-radius: 4px; cursor: grab; background: transparent; }
.board-element.image img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: inherit; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.board-element.image .element-drag-handle { position: absolute; top: -23px; left: 0; right: 0; height: 18px; padding: 0; opacity: 0; color: #91a582; }
.board-element.image:hover .element-drag-handle,
.board-element.image.selected .element-drag-handle { opacity: .8; }
.board-element.image.dragging { cursor: grabbing; }
.board-element.selected { z-index: 4; }
.drawing-path.selected { filter: drop-shadow(0 0 2px rgb(79 132 61 / 65%)); }
.drawing-layer .drawing-selection-outline { fill: none; stroke: #79a16b; stroke-width: 1.5; stroke-dasharray: 5 4; pointer-events: none; }
.selection-marquee { position: absolute; border: 1px solid #769968; border-radius: 2px; background: rgb(121 161 107 / 12%); z-index: 8; pointer-events: none; }
.eraser-cursor { position: absolute; width: 24px; height: 24px; border: 1.5px solid #698c5d; border-radius: 50%; background: rgb(255 255 255 / 35%); box-shadow: 0 0 0 1px rgb(255 255 255 / 85%); transform: translate(-50%, -50%); z-index: 9; pointer-events: none; }
.canvas-viewport:is([data-tool="line"], [data-tool="rect"], [data-tool="ellipse"]),
.canvas-viewport:is([data-tool="line"], [data-tool="rect"], [data-tool="ellipse"]) .board-element,
.canvas-viewport[data-tool="arrow"],
.canvas-viewport[data-tool="arrow"] .board-element,
.canvas-viewport[data-tool="pen"] .board-element { cursor: crosshair; }
.canvas-viewport[data-tool="eraser"],
.canvas-viewport[data-tool="eraser"] .board-element { cursor: none; }
.tool-palette { max-height: calc(100% - 120px); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
.tool-palette .tool-button,
.tool-palette .tool-separator { flex-shrink: 0; }
.tool-options { max-height: calc(100% - 120px); overflow-y: auto; scrollbar-width: thin; }
.tool-options input[type="number"] { width: 62px; height: 27px; padding: 3px 5px; color: #617256; background: #f8faf5; border: 1px solid #e0e7d9; border-radius: 4px; }
.tool-options .pen-width-label { gap: 5px; white-space: nowrap; }
.tool-options .pen-width-label input[type="range"] { flex: 1; width: 65px; min-width: 35px; }
.tool-options .pen-width-label input[type="number"] { flex: 0 0 48px; width: 48px; min-width: 0; }
.tool-options .pen-width-label > span { font-size: 9px; }
.tool-hint { margin: 10px 0 0; max-width: 195px; color: #8a9780; font-size: 10px; line-height: 1.8; }
.stroke-width-label { display: inline-flex; align-items: center; gap: 5px; color: #819474; font-size: 10px; white-space: nowrap; }
.stroke-width-label input[type="number"] { width: 58px; height: 26px; padding: 3px 5px; border: 1px solid #e0e7d9; border-radius: 4px; color: #617256; background: #f8faf5; font-size: 10px; }
.selection-count { margin: 0 4px; color: #617b54; font-size: 11px; font-weight: 600; white-space: nowrap; }
.board-element.note .note-content { font-size: inherit; }
.board-element.note.heading-note { display: block; padding: 10px 16px; border-radius: 2px; }
.heading-note .note-content { width: auto; min-height: 1.4em; padding: 0; line-height: 1.4; font-weight: 600; white-space: pre; overflow: visible; overflow-wrap: normal; writing-mode: var(--heading-writing-mode, horizontal-tb); text-orientation: mixed; }
.heading-note .element-drag-handle { position: absolute; top: -23px; left: 0; right: 0; height: 20px; padding: 0; opacity: 0; }
.heading-note:hover .element-drag-handle,
.heading-note.selected .element-drag-handle { opacity: .8; }
.heading-note .note-menu { display: none; }
.font-size-controls, .writing-mode-controls { display: inline-flex; align-items: center; gap: 5px; color: #617256; font-size: 10px; white-space: nowrap; }
.font-size-controls input[type="range"] { width: 85px; accent-color: #92af7c; }
.font-size-controls input[type="number"], .writing-mode-controls select { height: 27px; padding: 3px 5px; color: #617256; background: #f8faf5; border: 1px solid #e0e7d9; border-radius: 4px; font-size: 11px; }
.font-size-controls input[type="number"] { width: 54px; }
.tool-options .writing-mode-controls { margin-top: 12px; }
.canvas-viewport[data-selection-count]:not([data-selection-count="0"]):not([data-selection-count="1"]) :is(.resize-handle, .rotation-handle),
.canvas-viewport:is([data-tool="pen"], [data-tool="arrow"], [data-tool="line"], [data-tool="rect"], [data-tool="ellipse"], [data-tool="eraser"]) :is(.resize-handle, .rotation-handle) { display: none; }

@media (min-width: 801px) {
  .sidebar-collapsed .sidebar { display: none; }
}
@media (max-width: 800px) {
  .workspace-header { padding-top: 12px; padding-bottom: 12px; }
  .header-top-row { margin-bottom: 9px; }
  .header-top-right { gap: 7px; }
  .sidebar-collapsed .sidebar { display: flex; }
  .tool-options { max-width: calc(100vw - 90px); }
}
@media (max-width: 560px) {
  .workspace-header { padding-top: 8px; padding-bottom: 8px; }
  .breadcrumb { gap: 5px; }
  .breadcrumb > span:first-of-type { display: none; }
  .breadcrumb > .icon { display: none; }
  .header-top-row { margin-bottom: 7px; gap: 8px; }
  .header-top-right { gap: 5px; }
  .header-collapsed .workspace-header { padding-left: 12px; padding-right: 10px; }
  .header-collapsed .save-status { display: none; }
  .header-collapsed .board-heading { flex-basis: auto; }
  .tool-palette { top: 50%; }
  .tool-options { top: 50%; max-width: calc(100vw - 75px); }
}

.drawing-color-controls, .shape-fill-controls { display: inline-flex; align-items: center; gap: 7px; }
.fill-toggle { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: #617256; white-space: nowrap; }
.fill-toggle input { accent-color: #698c5d; }
.tool-options .drawing-color-controls, .tool-options .shape-fill-controls { display: flex; flex-wrap: wrap; margin-top: 12px; }
.tool-options .drawing-color-controls > .selection-label { width: 100%; }
.tool-options .shape-fill-controls .custom-color-controls { width: 100%; }
.share-embed { margin: 18px 0; padding: 14px 0; border-top: 1px solid #e4e9de; border-bottom: 1px solid #e4e9de; }
.share-embed .share-section-title { margin-top: 0; font-size: 12px; }
.share-embed .embed-code { width: 100%; min-height: 126px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; line-height: 1.6; }
.board-options { max-height: calc(100% - 16px); overflow-y: auto; overscroll-behavior: contain; }