#annotate-fab {
  position: fixed;
  top: 90px;
  right: 16px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #170f22;
  color: #fff;
  border: none;
  cursor: pointer;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
#annotate-fab img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  pointer-events: none;
}

#annotate-toolbar {
  position: fixed;
  top: 134px;
  right: 16px;
  width: 40px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
  padding: 6px 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  max-height: 84vh;
  overflow-y: auto;
  overflow-x: hidden;
}
#annotate-toolbar.closed { display: none; }

.at-drag-handle {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  flex-shrink: 0;
  margin-bottom: 2px;
  touch-action: none;
}
.at-drag-handle:hover { background: #f5f1fb; }
.at-drag-handle:active { cursor: grabbing; }
.at-drag-handle img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.at-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #170f22;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  position: relative;
  flex-shrink: 0;
}
.at-btn svg { width: 17px; height: 17px; }
.at-btn:hover { background: #f5f1fb; }
.at-btn.active { background: #7c3aed; color: #fff; }
.at-sep { width: 22px; height: 1px; background: #ececef; margin: 2px 0; }

.at-caret::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 0;
  height: 0;
  border-left: 3px solid transparent;
  border-bottom: 3px solid #6d28d9;
}
.at-btn.active.at-caret::after { border-bottom-color: #fff; }

.at-caret-hit {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 13px;
  height: 13px;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  z-index: 1;
}

.at-color-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #ececef;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  position: relative;
}

.at-width-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 2px 0;
}
.at-width-dot {
  border: none;
  background: #d6d3e0;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
}
.at-width-dot.active { background: #7c3aed; }

.at-flyout {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  padding: 6px;
  z-index: 10000;
}
.at-flyout.at-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  width: 116px;
}
.at-flyout.at-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
  width: 84px;
}
.at-flyout.at-grid-6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  width: 168px;
}
.at-flyout button {
  width: 34px;
  height: 34px;
  border: 1px solid #ececef;
  border-radius: 7px;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.at-flyout button:hover { background: #f5f1fb; border-color: #7c3aed; }
.at-flyout button.at-danger { color: #e11d48; }
.at-flyout button.at-danger:hover { background: #fee2e2; border-color: #e11d48; }
.at-flyout svg { width: 22px; height: 22px; }
.at-flyout .at-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #ececef;
}
.at-flyout .at-swatch.active { box-shadow: 0 0 0 2px #7c3aed; }
.at-swatch-check {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  pointer-events: none;
}

.at-flyout .at-more-colors {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  height: 30px;
  border-radius: 7px;
  border: 1px dashed #d6d3e0;
  font-size: 12px;
  color: #6b6b76;
  cursor: pointer;
  margin-top: 2px;
}
.at-flyout .at-more-colors:hover { border-color: #7c3aed; color: #7c3aed; }
.at-flyout .at-more-colors input[type="color"] {
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background: none;
}

/* Panel-style flyouts (screenshot modes + delay, settings) — block layout
   instead of an icon grid, since they mix icons, labels, and toggles. */
.at-flyout.at-panel {
  width: 220px;
  display: block;
  padding: 10px;
}
.at-panel-row {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.at-panel-row button { width: 40px; height: 40px; }
.at-panel-label {
  font-size: 11px;
  color: #6b6b76;
  margin-bottom: 4px;
}
.at-panel-delay-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
button.at-delay-chip {
  border: 1px solid #ececef;
  border-radius: 999px;
  background: #fff;
  font-size: 11.5px;
  padding: 4px 9px;
  cursor: pointer;
  color: #170f22;
  width: auto;
  height: auto;
}
.at-delay-chip:hover { border-color: #7c3aed; }
.at-delay-chip.active { background: #7c3aed; border-color: #7c3aed; color: #fff; }

.at-settings-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #170f22;
  padding: 5px 0;
  cursor: pointer;
}
.at-settings-row input { cursor: pointer; }
button.at-settings-btn {
  width: 100%;
  height: auto;
  margin-top: 6px;
  padding: 7px 0;
  border: 1px solid #ececef;
  border-radius: 7px;
  background: #fff;
  font-size: 12px;
  color: #170f22;
  cursor: pointer;
}
.at-settings-btn:hover { border-color: #7c3aed; color: #7c3aed; }

#annotate-canvas {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  touch-action: none;
}
#annotate-canvas.drawing { pointer-events: auto; cursor: crosshair; }

#annotate-eraser-cursor {
  position: fixed;
  border: 1.5px solid #170f22;
  border-radius: 50%;
  background: rgba(23, 15, 34, 0.06);
  pointer-events: none;
  z-index: 9997;
  display: none;
}

.at-text-input {
  position: fixed;
  z-index: 9999;
  background: rgba(255, 255, 255, 0.92);
  border: 1.5px dashed #7c3aed;
  border-radius: 6px;
  padding: 3px 6px;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 600;
  min-width: 140px;
  min-height: 30px;
  resize: both;
  outline: none;
  line-height: 1.25;
}

/* ---- Calculator panel ----
   Floats beside the toolbar, above the drawing layer, draggable by its
   header so it can be parked clear of the diagram being worked on. */
.at-calc {
  position: fixed;
  z-index: 10000;
  width: 250px;
  background: #fff;
  border: 1px solid rgba(23, 15, 34, 0.12);
  border-radius: 12px;
  box-shadow: 0 10px 34px rgba(23, 15, 34, 0.22);
  font-family: "Poppins", system-ui, sans-serif;
  padding: 10px;
  user-select: none;
}
.at-calc-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  cursor: grab;
  touch-action: none;
}
.at-calc-head:active { cursor: grabbing; }
.at-calc-title { font-size: 12px; font-weight: 700; color: #170f22; flex: 1; }
.at-calc-unit {
  border: 1px solid rgba(23, 15, 34, 0.15);
  background: #f4f1fb;
  color: #7c3aed;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  cursor: pointer;
  font-family: inherit;
}
.at-calc-unit:hover { background: #ede9fe; }
.at-calc-x {
  border: none;
  background: transparent;
  color: #6b6b76;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.at-calc-x:hover { color: #170f22; }
.at-calc-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1.5px solid rgba(23, 15, 34, 0.14);
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  outline: none;
  user-select: text;
}
.at-calc-input:focus { border-color: #7c3aed; }
.at-calc-out {
  min-height: 20px;
  margin-top: 7px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
  word-break: break-word;
}
.at-calc-out.ok { color: #7c3aed; }
.at-calc-out.err { color: #b3261e; font-size: 11.5px; font-weight: 600; font-family: "Poppins", system-ui, sans-serif; }
.at-calc-actions { display: flex; gap: 6px; margin-top: 9px; }
.at-calc-actions button {
  flex: 1;
  border: 1px solid rgba(23, 15, 34, 0.15);
  background: #fff;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 4px;
  cursor: pointer;
  font-family: inherit;
  color: #170f22;
}
.at-calc-place { background: #f4f1fb !important; color: #7c3aed !important; border-color: #ddd3f7 !important; }
.at-calc-actions button:hover { border-color: #7c3aed; }
.at-calc-history { margin-top: 9px; max-height: 132px; overflow-y: auto; }
.at-calc-hrow {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  border: none;
  background: transparent;
  border-top: 1px solid rgba(23, 15, 34, 0.07);
  padding: 5px 2px;
  cursor: pointer;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  text-align: left;
}
.at-calc-hrow:hover { background: #faf8ff; }
.at-calc-hexpr { color: #6b6b76; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-calc-hval { color: #170f22; font-weight: 700; flex-shrink: 0; }

#annotate-hint {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: #170f22;
  color: #fff;
  font-size: 12.5px;
  padding: 6px 14px;
  border-radius: 999px;
  z-index: 9999;
  display: none;
}
#annotate-hint.show { display: block; }

/* ---- Select & transform box ----------------------------------------

   The handle overlay for the select tool. Real DOM rather than canvas
   drawing: handles need hover states, a grab cursor and hit targets that
   stay finger-sized, none of which a bitmap gives you.

   The layer itself is click-through (pointer-events: none) so it never
   steals a click meant for the canvas underneath; only the box and its
   handles take pointer events. It sits above the canvas (9998) and below
   the toolbar and its flyouts (9999+), so the toolbar is always
   reachable while something is selected. */

#annotate-select-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
}

.at-select-box {
  position: absolute;
  border: 1.5px dashed var(--purple, #7c3aed);
  border-radius: 2px;
  background: rgba(124, 58, 237, 0.06);
  pointer-events: auto;
  cursor: move;
  box-sizing: border-box;
  /* Rotation is applied about the middle, matching the canvas transform,
     which pivots on the item's bounds centre. */
  transform-origin: 50% 50%;
}

.at-handle {
  position: absolute;
  width: 11px;
  height: 11px;
  background: #fff;
  border: 1.5px solid var(--purple, #7c3aed);
  border-radius: 2px;
  box-sizing: border-box;
  pointer-events: auto;
}
.at-handle:hover { background: var(--purple-track, #ede9fe); }

.at-handle-nw { left: -6px; top: -6px; cursor: nwse-resize; }
.at-handle-ne { right: -6px; top: -6px; cursor: nesw-resize; }
.at-handle-se { right: -6px; bottom: -6px; cursor: nwse-resize; }
.at-handle-sw { left: -6px; bottom: -6px; cursor: nesw-resize; }

/* The rotation node hangs below the bottom edge on a short stem, the
   arrangement every design tool uses — far enough out that it never
   overlaps the bottom corner handles. */
.at-rotate-stem {
  position: absolute;
  left: 50%;
  bottom: -20px;
  width: 1.5px;
  height: 20px;
  margin-left: -0.75px;
  background: var(--purple, #7c3aed);
  pointer-events: none;
}
.at-rotate {
  left: 50%;
  bottom: -32px;
  margin-left: -6px;
  border-radius: 50%;
  cursor: grab;
}
.at-rotate:active { cursor: grabbing; }

/* A group box has no rotation of its own and no single shape to hug, so
   it reads as a container: solid edge, no fill tint competing with the
   marquee that created it. */
.at-select-box.at-select-group {
  border-style: solid;
  border-width: 1.5px;
  background: rgba(124, 58, 237, 0.04);
}

/* ---- Focus Shield ----
   Hiding is instant and purely visual: no transition, no repaint of the
   ink itself. pointer-events must win over the .drawing class so the
   page underneath is fully clickable while shielded. */
#annotate-canvas.at-focus-hidden {
  opacity: 0;
  pointer-events: none !important;
}
/* The shield reads at stapler-logo prominence (24px), not tool-icon
   size (17px) — it's a mode switch, not another pen. Buttons keep the
   browser's default 6px side padding, which leaves an 18px content box
   in the 30px tile; without these two rules the svg (a flex item)
   silently shrinks back down to fit it. */
.at-focus-btn { padding: 2px; }
.at-focus-btn svg { width: 23px; height: 23px; flex: 0 0 auto; }
.at-focus-btn.focus-on {
  background: rgba(160, 32, 240, 0.14);
  box-shadow: 0 0 0 2px rgba(160, 32, 240, 0.38), 0 0 12px 2px rgba(160, 32, 240, 0.4);
}

/* ---- Workspace board page strip (bottom) ----
   Sits above the canvas (9998) alongside the toolbar tier (9999) so
   pages stay reachable while a whiteboard tab covers the screen. */
#annotate-pagestrip {
  position: fixed;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  display: none;
  align-items: center;
  gap: 8px;
  max-width: min(86vw, 900px);
  overflow-x: auto;
  padding: 8px 10px;
  background: #ffffff;
  border: 1px solid #e6e2f2;
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(23, 15, 34, 0.14);
  z-index: 9999;
}
.at-page-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 5px 7px 4px;
  border: 1.5px solid transparent;
  border-radius: 9px;
  background: #f6f4fb;
  cursor: pointer;
  font: 600 10.5px/1.2 system-ui, sans-serif;
  color: #4b5563;
  flex: 0 0 auto;
}
.at-page-chip:hover { background: #efeaf9; }
.at-page-chip.active {
  border-color: var(--purple, #7c3aed);
  background: #f3eefe;
  color: var(--purple-dark, #5b21b6);
}
.at-page-thumb {
  width: 64px;
  height: 40px;
  display: block;
  border-radius: 5px;
  border: 1px solid #e6e2f2;
  background: #fff;
  pointer-events: none;
}
.at-paper-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-right: 8px;
  margin-right: 2px;
  border-right: 1px solid #ececef;
  flex: 0 0 auto;
}
.at-paper-btn {
  border: 1px solid transparent;
  border-radius: 6px;
  background: #f6f4fb;
  padding: 2px 8px;
  font: 600 10px/1.4 system-ui, sans-serif;
  color: #4b5563;
  cursor: pointer;
}
.at-paper-btn:hover { background: #efeaf9; }
.at-paper-btn.active {
  border-color: var(--purple, #7c3aed);
  background: #f3eefe;
  color: var(--purple-dark, #5b21b6);
}
.at-page-add {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1.5px dashed #c9bfe8;
  background: #fff;
  color: var(--purple, #7c3aed);
  font: 600 18px/1 system-ui, sans-serif;
  cursor: pointer;
}
.at-page-add:hover { background: #f3eefe; }