/* Kambana OS - Whiteboard */
.app-whiteboard { --wb-ink: #1f2937; --wb-bg: #f7f8fb; --wb-dot: rgba(15, 23, 42, .16); background: var(--wb-bg); user-select: none; -webkit-user-select: none; }
[data-theme="dark"] .app-whiteboard { --wb-ink: #e5e7eb; --wb-bg: #171b25; --wb-dot: rgba(255, 255, 255, .13); }

.app-whiteboard .wb-top { height: 46px; flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 0 10px; border-bottom: 1px solid var(--line); background: var(--surface); }
.app-whiteboard .wb-name { border: 0; background: none; color: var(--text); font-size: 14.5px; font-weight: 700; padding: 5px 8px; border-radius: 8px; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-whiteboard .wb-name:hover { background: var(--hover); }
.app-whiteboard .wb-save { font-size: 12px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.app-whiteboard .wb-people { display: flex; align-items: center; }
.app-whiteboard .wb-av, .wb-share-dlg .wb-av { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font-size: 11.5px; font-weight: 700; box-shadow: 0 0 0 2px var(--surface); margin-left: -6px; flex: 0 0 auto; }
.app-whiteboard .wb-av:first-child { margin-left: 0; }
.app-whiteboard .wb-av.more { background: var(--surface-3); color: var(--text-2); }
.wb-share-dlg .wb-av.sm { width: 18px; height: 18px; font-size: 9.5px; margin: 0 2px 0 -6px; box-shadow: none; }

.app-whiteboard .wb-stage {
  position: relative; flex: 1; min-height: 0; overflow: hidden; outline: none; touch-action: none; cursor: default;
  background-color: var(--wb-bg); background-image: radial-gradient(circle, var(--wb-dot) 1.1px, transparent 1.3px); background-size: 24px 24px;
}
.app-whiteboard .wb-stage.wb-nogrid { background-image: none; }
.app-whiteboard .wb-stage[data-tool="hand"], .app-whiteboard .wb-stage.space { cursor: grab; }
.app-whiteboard .wb-stage.panning { cursor: grabbing; }
.app-whiteboard .wb-stage[data-tool="sticky"], .app-whiteboard .wb-stage[data-tool="shape"], .app-whiteboard .wb-stage[data-tool="frame"], .app-whiteboard .wb-stage[data-tool="line"],
.app-whiteboard .wb-stage[data-tool="pen"], .app-whiteboard .wb-stage[data-tool="marker"] { cursor: crosshair; }
.app-whiteboard .wb-stage[data-tool="text"] { cursor: text; }
.app-whiteboard .wb-stage[data-tool="eraser"] { cursor: cell; }
.app-whiteboard .wb-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.app-whiteboard .wb-objs [data-id], .app-whiteboard .wb-frames [data-id] { cursor: move; }
.app-whiteboard .wb-stage:not([data-tool="select"]) [data-id] { cursor: inherit; }
.app-whiteboard .wb-lines [data-id] { cursor: pointer; }
.app-whiteboard .wb-editing text { opacity: 0; }
.app-whiteboard .wb-ui { pointer-events: none; }
.app-whiteboard .wb-ui .wb-h { pointer-events: all; cursor: pointer; }
.app-whiteboard .wb-ui [data-handle="nw"], .app-whiteboard .wb-ui [data-handle="se"] { cursor: nwse-resize; }
.app-whiteboard .wb-ui [data-handle="ne"], .app-whiteboard .wb-ui [data-handle="sw"] { cursor: nesw-resize; }
.app-whiteboard .wb-ui [data-handle="n"], .app-whiteboard .wb-ui [data-handle="s"] { cursor: ns-resize; }
.app-whiteboard .wb-ui [data-handle="e"], .app-whiteboard .wb-ui [data-handle="w"] { cursor: ew-resize; }
.app-whiteboard .wb-ui .wb-rot { cursor: grab; }
.app-whiteboard .wb-ui .wb-link { cursor: crosshair; }
.app-whiteboard .wb-ui .wb-link:hover circle:first-child { fill-opacity: .3; }
.app-whiteboard .wb-cursors { pointer-events: none; }
.app-whiteboard .wb-cursor { transition: transform .9s linear, opacity .4s; }

.app-whiteboard .wb-editor {
  position: absolute; transform-origin: 0 0; margin: 0; border: 0; outline: none; resize: none; overflow: hidden;
  background: transparent; font-family: Figtree, system-ui, sans-serif; padding: 0 12px; box-sizing: border-box; z-index: 3;
  caret-color: var(--accent);
}
.app-whiteboard .wb-ed-text { padding: 0; overflow: visible; }
.app-whiteboard .wb-ed-frame { padding: 0 4px; background: var(--wb-bg); border-radius: 6px; box-shadow: 0 0 0 2px var(--accent); }
.app-whiteboard .wb-ed-line { background: var(--wb-bg); border-radius: 8px; box-shadow: 0 0 0 2px var(--accent); padding: 6px; color: var(--text) !important; }
.app-whiteboard .wb-editor::placeholder { color: rgba(100, 116, 139, .7); }

/* floating tool bar */
.app-whiteboard .wb-tools {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%); z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px;
  background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-pop); max-height: calc(100% - 24px); overflow-y: auto; scrollbar-width: none;
}
.app-whiteboard .wb-tools::-webkit-scrollbar { display: none; }
.app-whiteboard .wb-tool { position: relative; width: 38px; height: 36px; border: 0; border-radius: 10px; background: none; color: var(--text-2); display: grid; place-items: center; flex: 0 0 auto; }
.app-whiteboard .wb-tool:hover { background: var(--hover); color: var(--text); }
.app-whiteboard .wb-tool.on { background: rgba(var(--accent-rgb), .16); color: var(--accent); }
.app-whiteboard .wb-fly { position: absolute; right: 4px; bottom: 4px; width: 0; height: 0; border-left: 4px solid transparent; border-bottom: 4px solid currentColor; opacity: .6; }
.app-whiteboard .wb-tsep { width: 24px; height: 1px; background: var(--line-2); margin: 4px 0; flex: 0 0 auto; }

/* context bar */
.app-whiteboard .wb-ctx { position: absolute; z-index: 5; display: flex; align-items: center; gap: 4px; padding: 5px; background: var(--surface); border-radius: 12px; box-shadow: var(--shadow-pop); max-width: calc(100% - 16px); overflow-x: auto; scrollbar-width: none; }
.app-whiteboard .wb-ctx::-webkit-scrollbar { display: none; }
.app-whiteboard .wb-ctx .icon-btn { width: 30px; height: 30px; }
.app-whiteboard .wb-ctx .seg button { height: 26px; padding: 0 8px; }
.app-whiteboard .wb-csep { width: 1px; height: 20px; background: var(--line-2); margin: 0 2px; flex: 0 0 auto; }
.app-whiteboard .wb-sw { display: flex; gap: 3px; }
.app-whiteboard .wb-swatch { width: 20px; height: 20px; border-radius: 5px; border: 0; padding: 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); flex: 0 0 auto; }
.app-whiteboard .wb-swatch.r { border-radius: 50%; }
.app-whiteboard .wb-swatch.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--accent); }
.app-whiteboard .wb-swatch.ink { background: var(--wb-ink); }
.app-whiteboard .wb-swatch.none { background: linear-gradient(135deg, transparent 45%, #ef4444 45%, #ef4444 55%, transparent 55%), var(--surface); }
.app-whiteboard .wb-danger:hover { color: #e5484d; }

/* corner: minimap + zoom */
.app-whiteboard .wb-corner { position: absolute; right: 12px; bottom: 12px; z-index: 4; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.app-whiteboard .wb-minimap { width: 200px; height: 130px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-pop); cursor: pointer; touch-action: none; }
.app-whiteboard .wb-corner.wb-mapoff .wb-minimap { display: none; }
.app-whiteboard .wb-zoom { display: flex; align-items: center; gap: 2px; padding: 3px; background: var(--surface); border-radius: 12px; box-shadow: var(--shadow-pop); }
.app-whiteboard .wb-zoom .icon-btn { width: 30px; height: 30px; }
.app-whiteboard .wb-zl { min-width: 56px; font-variant-numeric: tabular-nums; box-shadow: none; background: none; }

/* welcome card */
.app-whiteboard .wb-welcome { position: absolute; inset: 0; display: grid; place-items: center; z-index: 6; pointer-events: none; padding: 16px; }
.app-whiteboard .wb-welcome[hidden] { display: none; }
.app-whiteboard .wb-wcard { pointer-events: auto; width: min(640px, 100%); max-height: 100%; overflow-y: auto; background: var(--surface); border-radius: 18px; box-shadow: var(--shadow-pop); padding: 22px; }
.app-whiteboard .wb-wcard h2 { margin: 0; font-size: 20px; font-family: var(--font-display); }
.app-whiteboard .wb-wcard > p { margin: 4px 0 16px; font-size: 13px; }
.app-whiteboard .wb-tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.app-whiteboard .wb-tcard { border: 0; text-align: left; padding: 12px; border-radius: 12px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: 4px; color: var(--text); transition: transform .12s, box-shadow .12s; }
.app-whiteboard .wb-tcard:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1.5px var(--accent); }
.app-whiteboard .wb-tcard b { font-size: 13.5px; }
.app-whiteboard .wb-tcard small { font-size: 11.5px; color: var(--text-2); line-height: 1.35; }
.app-whiteboard .wb-ticon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(var(--accent-rgb), .15); color: var(--accent); margin-bottom: 4px; }
.app-whiteboard .wb-recent { margin-top: 12px; display: flex; flex-direction: column; }
.app-whiteboard .wb-rrow { border: 0; background: none; display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; color: var(--text); font-size: 13px; text-align: left; }
.app-whiteboard .wb-rrow:hover { background: var(--hover); }
.app-whiteboard .wb-rrow span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-whiteboard .wb-rrow small { color: var(--text-3); }
.app-whiteboard .wb-rrow .ic { color: var(--accent); }
.app-whiteboard .wb-wactions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }

.wb-share-dlg { width: min(460px, calc(100vw - 32px)); }
.wb-share-dlg .wb-link { width: 100%; margin-top: 10px; font-family: var(--mono); font-size: 12px; }
.wb-share-dlg .wb-code { font-family: var(--mono); letter-spacing: .04em; }
.wb-share-dlg .wb-ppl { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 12px; }

@media (max-width: 759px) {
  .app-whiteboard .wb-tools { left: 50%; top: auto; bottom: 10px; transform: translateX(-50%); flex-direction: row; max-width: calc(100% - 20px); max-height: none; overflow-x: auto; overflow-y: hidden; }
  .app-whiteboard .wb-tsep { width: 1px; height: 22px; margin: 0 3px; }
  .app-whiteboard .wb-corner { bottom: 66px; right: 10px; }
  .app-whiteboard .wb-minimap { width: 140px; height: 91px; }
  .app-whiteboard .wb-save { display: none; }
  .app-whiteboard .wb-name { max-width: 55%; }
  .app-whiteboard .wb-share span { display: none; }
}