/* =============================================================
   Annotation Toolbar + Canvas Styles
   ============================================================= */

/* Annotation toolbar */
#annotation-toolbar {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5000;
  background: #1c1f2e;
  border: 1px solid #333854;
  border-radius: 16px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 4px 24px rgba(0,0,0,.4);
  transition: transform 0.3s, opacity 0.3s;
  max-width: 95vw;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#annotation-toolbar.hidden {
  transform: translateX(-50%) translateY(80px);
  opacity: 0;
  pointer-events: none;
}

/* Toolbar toggle button */
#annotation-toggle {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 5000;
  width: 44px;
  height: 44px;
  background: #1c1f2e;
  border: 1px solid #333854;
  border-radius: 12px;
  color: #7c6ff7;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0,0,0,.3);
  transition: background 0.2s, color 0.2s;
}

#annotation-toggle:hover {
  background: #262b40;
  color: #6d5ee6;
}

#annotation-toggle.active {
  background: #7c6ff7;
  color: white;
  border-color: #7c6ff7;
}

/* Tool buttons */
.anno-tool-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: #c4c8db;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
}

.anno-tool-btn:hover {
  background: #262b40;
  color: #eeeef4;
}

.anno-tool-btn.active {
  background: rgba(124,111,247,0.15);
  border-color: #7c6ff7;
  color: #7c6ff7;
}

/* Color dots on pen buttons */
.anno-color-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: absolute;
  bottom: 4px;
  right: 4px;
}

/* Highlighter color indicator */
.anno-hl-bar {
  height: 3px;
  width: 16px;
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 1px;
}

/* v9.2: Laser pointer indicator dot on toolbar button */
.anno-laser-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff3b30;
  box-shadow: 0 0 4px #ff3b30, 0 0 8px rgba(255,59,48,0.4);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: anno-laser-pulse 1.5s ease-in-out infinite;
}

@keyframes anno-laser-pulse {
  0%, 100% { box-shadow: 0 0 4px #ff3b30, 0 0 8px rgba(255,59,48,0.4); }
  50% { box-shadow: 0 0 6px #ff3b30, 0 0 12px rgba(255,59,48,0.6); }
}

/* Laser button active state */
.anno-tool-btn.active[data-tool="LASER"] {
  background: rgba(255, 59, 48, 0.15);
  border-color: #ff3b30;
  color: #ff3b30;
}

/* Toolbar separator */
.anno-separator {
  width: 1px;
  height: 28px;
  background: #333854;
  margin: 0 4px;
}

/* Annotation canvas — v6: event capture when annotation ON
   Default (annotation OFF): pointer-events:none → page works normally
   When annotation ON: JS dynamically sets pointer-events:auto + touch-action:none
   This ensures Canvas captures ALL events BEFORE Safari starts scroll gestures.
   Pen → draw, Finger → simulated scroll with inertia */
#annotation-canvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;          /* ABOVE content but BELOW sticky header (z-index:100) */
  pointer-events: none;  /* Default: OFF — page works normally */
  transition: opacity 0.2s;
}

#annotation-canvas.drawing {
  opacity: 1;
  /* JS sets pointer-events:auto + touch-action:none when annotation ON */
}

#annotation-canvas.inactive {
  opacity: 0;
}

/* When annotation mode is ON — AGGRESSIVELY block ALL Safari selection UI
   v7: Added -webkit-user-modify: read-only to prevent Safari smart selection
   This prevents: text selection callout (Copy/Find/Look Up/Translate),
   Apple Pencil double-tap select, Safari Markup toolbar, Quick Note,
   Apple Pencil hover-to-select, Pencil toolbar overlay */
body.anno-active,
body.anno-active *,
body.anno-active *::before,
body.anno-active *::after {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
  -webkit-user-drag: none !important;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-user-modify: read-only !important;
  cursor: default !important;
}

/* Keep our own annotation UI interactive — override the anti-selection rules */
body.anno-active #annotation-toolbar,
body.anno-active #annotation-toolbar *,
body.anno-active #annotation-toggle,
body.anno-active #annotation-toggle *,
body.anno-active #anno-confirm-modal,
body.anno-active #anno-confirm-modal *,
body.anno-active #anno-save-indicator,
body.anno-active #anno-save-indicator * {
  -webkit-user-select: auto !important;
  user-select: auto !important;
  -webkit-user-modify: read-write !important;
  cursor: pointer !important;
}

/* Watermark overlay */
#watermark-overlay {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 4999;
  pointer-events: none;
  padding: 6px 12px;
  color: rgba(144, 148, 170, 0.25);
  font-size: 11px;
  font-family: 'Inter', monospace;
  letter-spacing: 1px;
  user-select: none;
}

/* Annotation save indicator */
#anno-save-indicator {
  position: fixed;
  top: 60px;
  right: 16px;
  z-index: 5000;
  background: rgba(78, 205, 196, 0.15);
  border: 1px solid #4ecdc4;
  border-radius: 8px;
  padding: 6px 10px;
  color: #4ecdc4;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

#anno-save-indicator.visible {
  opacity: 1;
}

/* Annotation clear all confirm modal */
#anno-confirm-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 9998;
  background: rgba(18, 20, 28, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

#anno-confirm-modal.visible {
  opacity: 1;
  pointer-events: auto;
}

.anno-confirm-box {
  background: #1c1f2e;
  border: 1px solid #333854;
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  color: #eeeef4;
  max-width: 320px;
}

.anno-confirm-box h3 {
  font-size: 16px;
  margin-bottom: 8px;
}

.anno-confirm-box p {
  color: #9094aa;
  font-size: 13px;
  margin-bottom: 16px;
}

.anno-confirm-btns {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.anno-confirm-btns .cancel-btn {
  background: #262b40;
  border: 1px solid #333854;
  color: #c4c8db;
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 13px;
}

.anno-confirm-btns .confirm-btn {
  background: #f76e6e;
  border: none;
  color: white;
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}