/* Global prevention of system interactions for the entire module */
.module-root,
.module-root * {
  -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-tap-highlight-color: transparent !important;
  -webkit-user-drag: none !important;
  -khtml-user-drag: none !important;
  -moz-user-drag: none !important;
  -o-user-drag: none !important;
  user-drag: none !important;
  /* Default floor: block browser touch behaviors on every descendant.
     NOT !important so the explicit manipulation rule below can win via
     specificity for the interactive controls that need native tap. */
  touch-action: none;
}

.module-root,
.canvas-wrapper,
.canvas-wrapper canvas {
  touch-action: none;
}

/* Explicit overrides: interactive controls accept native taps. Each
   selector is (0,2,0) or higher, which beats the universal (0,1,0)
   rule above without needing !important. Previously !important on the
   universal rule blocked iPad taps and there was no way to override. */
.module-root #iconBar,
.module-root .barIconContainer,
.module-root .barIcon,
.module-root .toolbar-variant-option,
.module-root #canvasPills,
.module-root #canvasPills > *,
.module-root #ffPrimaryPillGroup,
.module-root #ffPrimaryPillGroup > *,
.module-root .capsule-slider,
.module-root button,
.module-root input[type='range'],
.module-root input[type='color'],
.module-root input[type='file'] {
  touch-action: manipulation;
}

/* Allow text selection only for input fields and textareas if needed */
.module-root input[type='text'],
.module-root input[type='email'],
.module-root input[type='password'],
.module-root input[type='search'],
.module-root input[type='url'],
.module-root textarea {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
  -webkit-touch-callout: default !important;
  touch-action: auto !important;
}

.module-root,
.canvas-wrapper {
  /* Single source of truth for top-bar pill height (desktop, tablet, mobile, touch). */
  --ff-pill-h: var(--mm-module-leftbar-height, 36px);
  --ff-ui-surface: rgba(255, 255, 255, 0.95);
  --ff-ui-surface-soft: rgba(255, 255, 255, 0.96);
  --ff-ui-surface-strong: rgba(255, 255, 255, 0.98);
  --ff-ui-border: rgba(0, 0, 0, 0.12);
  --ff-ui-border-strong: rgba(0, 0, 0, 0.22);
  --ff-ui-text: #1a1a1a;
  --ff-ui-text-muted: rgba(0, 0, 0, 0.62);
  --ff-ui-text-soft: rgba(0, 0, 0, 0.42);
  --ff-ui-hover: rgba(0, 0, 0, 0.06);
  --ff-ui-hover-strong: rgba(0, 0, 0, 0.12);
  --ff-ui-active: rgba(38, 38, 44, 0.95);
  --ff-ui-active-text: #ffffff;
  --ff-ui-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
  --ff-ui-float-shadow:
    0 8px 32px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --ff-ui-icon-filter: brightness(0);
  --ff-ui-slider-track: rgba(0, 0, 0, 0.18);
  --ff-ui-slider-thumb: #555560;
  --ff-ui-slider-thumb-border: rgba(255, 255, 255, 0.9);
  --ff-ui-slider-thumb-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  --ff-ui-slider-thumb-size: 16px;
  --ff-ui-slider-thumb-size-touch: 20px;
  --ff-ui-kbd-bg: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.02));
  --ff-ui-kbd-border: rgba(0, 0, 0, 0.1);
  --ff-ui-kbd-shadow:
    0 1px 2px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05);
  --ff-ui-resize: #888888;
  --ff-ui-resize-strong: #333333;
  --ff-ui-selection-bg: rgba(0, 0, 0, 0.15);
  --ff-ui-selection-text: #000000;
}

.module-root[data-freeform-theme='dark'],
.canvas-wrapper[data-freeform-theme='dark'] {
  --ff-ui-surface: rgba(18, 18, 22, 0.94);
  --ff-ui-surface-soft: rgba(24, 24, 30, 0.95);
  --ff-ui-surface-strong: rgba(16, 16, 20, 0.98);
  --ff-ui-border: rgba(255, 255, 255, 0.18);
  --ff-ui-border-strong: rgba(255, 255, 255, 0.28);
  --ff-ui-text: #eef1f7;
  --ff-ui-text-muted: rgba(238, 241, 247, 0.72);
  --ff-ui-text-soft: rgba(238, 241, 247, 0.5);
  --ff-ui-hover: rgba(255, 255, 255, 0.08);
  --ff-ui-hover-strong: rgba(255, 255, 255, 0.14);
  --ff-ui-active: rgba(238, 241, 247, 0.2);
  --ff-ui-active-text: #eef1f7;
  --ff-ui-shadow: 0 12px 34px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.24);
  --ff-ui-float-shadow:
    0 10px 36px rgba(0, 0, 0, 0.52), 0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --ff-ui-icon-filter: brightness(0) invert(1);
  --ff-ui-slider-track: rgba(255, 255, 255, 0.22);
  --ff-ui-slider-thumb: #c0c4cc;
  --ff-ui-slider-thumb-border: rgba(255, 255, 255, 0.3);
  --ff-ui-slider-thumb-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  --ff-ui-slider-thumb-size: 16px;
  --ff-ui-slider-thumb-size-touch: 20px;
  --ff-ui-kbd-bg: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  --ff-ui-kbd-border: rgba(255, 255, 255, 0.2);
  --ff-ui-kbd-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  --ff-ui-resize: rgba(238, 241, 247, 0.62);
  --ff-ui-resize-strong: #eef1f7;
  --ff-ui-selection-bg: rgba(255, 255, 255, 0.22);
  --ff-ui-selection-text: #eef1f7;
}

.ff-scale-gizmo-root {
  --ff-scale-ink: #111111;
  --ff-scale-halo: rgba(255, 255, 255, 0.86);
  --ff-scale-panel: rgba(255, 255, 255, 0.84);
  --ff-scale-panel-border: rgba(0, 0, 0, 0.14);
  --ff-scale-muted: rgba(17, 17, 17, 0.58);
  --ff-scale-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
  position: fixed;
  inset: 0;
  z-index: 90000;
  color: var(--ff-scale-ink);
  pointer-events: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

.ff-scale-gizmo-root.theme-dark {
  --ff-scale-ink: #ffffff;
  --ff-scale-halo: rgba(0, 0, 0, 0.72);
  --ff-scale-panel: rgba(15, 18, 24, 0.78);
  --ff-scale-panel-border: rgba(255, 255, 255, 0.18);
  --ff-scale-muted: rgba(255, 255, 255, 0.62);
  --ff-scale-shadow: 0 20px 52px rgba(0, 0, 0, 0.46);
}

.ff-scale-gizmo-svg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  overflow: visible;
  pointer-events: none;
  shape-rendering: geometricPrecision;
}

.ff-scale-gizmo-halo-line,
.ff-scale-gizmo-main-line,
.ff-scale-gizmo-halo-tick,
.ff-scale-gizmo-tick {
  stroke-linecap: square;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.ff-scale-gizmo-halo-line,
.ff-scale-gizmo-halo-tick {
  stroke: var(--ff-scale-halo);
  stroke-width: 5;
  stroke-linecap: round;
}

.ff-scale-gizmo-main-line,
.ff-scale-gizmo-tick {
  stroke: var(--ff-scale-ink);
  vector-effect: non-scaling-stroke;
}

.ff-scale-gizmo-main-line {
  stroke-width: 2.2;
  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.45));
}

.ff-scale-gizmo-root.theme-dark .ff-scale-gizmo-main-line {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
}

.ff-scale-gizmo-tick {
  stroke-width: 1.8;
}

.ff-scale-gizmo-hit-line {
  stroke: transparent;
  stroke-width: 32;
  stroke-linecap: round;
  pointer-events: stroke;
  cursor: grab;
  touch-action: none;
}

.ff-scale-gizmo-root.dragging .ff-scale-gizmo-hit-line {
  cursor: grabbing;
}

.ff-scale-gizmo-root.dragging-panel .ff-scale-gizmo-panel {
  cursor: grabbing;
}

.ff-scale-gizmo-handle {
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  transform-box: fill-box;
  transform-origin: center;
  /* No transition on transform: the handle's translate is set every RAF tick
     against the live pointer position, so a 120ms ease made it perceptibly
     drag-lag and slide in from the SVG origin on first paint. */
}

.ff-scale-gizmo-root.dragging .ff-scale-gizmo-handle {
  cursor: grabbing;
}

/* Hover lifts the handle slightly so the affordance feels alive. */
.ff-scale-gizmo-handle:hover .ff-scale-gizmo-handle-outer {
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.32));
  stroke-width: 2.5;
}
.ff-scale-gizmo-handle:hover .ff-scale-gizmo-handle-inner {
  r: 3.6;
}

/* Active grab — shrink slightly and tighten shadow for tactile feedback. */
.ff-scale-gizmo-root.dragging .ff-scale-gizmo-handle .ff-scale-gizmo-handle-outer {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

.ff-scale-gizmo-handle-outer {
  fill: var(--ff-scale-panel);
  stroke: var(--ff-scale-ink);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.22));
  pointer-events: none;
  transition: stroke-width 120ms ease, filter 160ms ease;
}

.ff-scale-gizmo-handle-inner {
  fill: var(--ff-scale-ink);
  pointer-events: none;
  transition: r 120ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.ff-scale-gizmo-handle-hit {
  fill: transparent;
  pointer-events: all;
}

.ff-scale-gizmo-end-label,
.ff-scale-gizmo-end-label-halo {
  dominant-baseline: central;
  font: 900 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  pointer-events: none;
  text-anchor: middle;
  user-select: none;
  -webkit-user-select: none;
}

.ff-scale-gizmo-end-label-halo {
  fill: none;
  stroke: var(--ff-scale-halo);
  stroke-linejoin: round;
  stroke-width: 5;
}

.ff-scale-gizmo-end-label {
  fill: var(--ff-scale-ink);
}

.ff-scale-gizmo-panel {
  position: fixed;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: min(420px, calc(100vw - 16px));
  min-height: 42px;
  padding: 6px 7px 6px 8px;
  color: var(--ff-scale-ink);
  background: var(--ff-scale-panel);
  border: 1px solid var(--ff-scale-panel-border);
  border-radius: 7px;
  box-shadow: var(--ff-scale-shadow);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  pointer-events: auto;
  transform: translate(-50%, 0);
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}

.ff-scale-gizmo-panel-grip {
  width: 6px;
  height: 24px;
  flex: 0 0 6px;
  border-radius: 999px;
  cursor: grab;
  background:
    radial-gradient(circle at 50% 4px, var(--ff-scale-muted) 1.2px, transparent 1.4px),
    radial-gradient(circle at 50% 12px, var(--ff-scale-muted) 1.2px, transparent 1.4px),
    radial-gradient(circle at 50% 20px, var(--ff-scale-muted) 1.2px, transparent 1.4px);
  opacity: 0.9;
  touch-action: none;
}

.ff-scale-gizmo-root.dragging-panel .ff-scale-gizmo-panel-grip {
  cursor: grabbing;
}

.ff-scale-gizmo-metric {
  display: flex;
  min-width: 96px;
  flex-direction: row;
  align-items: center;
  gap: 0;
  cursor: grab;
  touch-action: none;
}

.ff-scale-gizmo-title {
  color: var(--ff-scale-ink);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.ff-scale-gizmo-world {
  color: var(--ff-scale-ink);
  font-size: 13px;
  font-weight: 850;
  line-height: 1;
  max-width: 120px;
  white-space: nowrap;
}

.ff-scale-gizmo-form {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ff-scale-gizmo-input,
.ff-scale-gizmo-unit {
  height: 28px;
  color: var(--ff-scale-ink);
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid var(--ff-scale-panel-border);
  border-radius: 6px;
  outline: none;
  font: 700 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  touch-action: manipulation;
}

.ff-scale-gizmo-root.theme-dark .ff-scale-gizmo-input,
.ff-scale-gizmo-root.theme-dark .ff-scale-gizmo-unit {
  background: rgba(255, 255, 255, 0.1);
}

.ff-scale-gizmo-input {
  width: 82px;
  padding: 0 8px;
  user-select: text;
  -webkit-user-select: text;
}

.ff-scale-gizmo-input.invalid {
  border-color: #ff4d4d;
  box-shadow: 0 0 0 3px rgba(255, 77, 77, 0.16);
}

.ff-scale-gizmo-unit {
  width: 54px;
  padding: 0 6px;
}

.ff-scale-gizmo-button {
  height: 28px;
  border: 1px solid var(--ff-scale-panel-border);
  border-radius: 6px;
  padding: 0 8px;
  font: 800 11px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  cursor: pointer;
  touch-action: manipulation;
}

.ff-scale-gizmo-button.primary {
  color: #ffffff;
  background: #111111;
  border-color: #111111;
}

.ff-scale-gizmo-root.theme-dark .ff-scale-gizmo-button.primary {
  color: #111111;
  background: #ffffff;
  border-color: #ffffff;
}

.ff-scale-gizmo-button.secondary {
  color: var(--ff-scale-ink);
  background: transparent;
}

.ff-scale-gizmo-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

@media (max-width: 720px) {
  .ff-scale-gizmo-panel {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  .ff-scale-gizmo-form {
    flex-wrap: wrap;
  }

  .ff-scale-gizmo-input {
    width: 118px;
  }
}

/* Prevent text selection and system interactions */
.module-root,
.canvas-wrapper,
.canvas-wrapper canvas,
.result-image-container,
.result-image,
.canvas-controls,
.canvas-controls button,
#iconBar,
.barIconContainer,
.barIcon,
.tooltip,
#color-picker-container,
#color-picker,
#color-swatch,
.crop-overlay,
.crop-rect,
.crop-rect .handle {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

/* Prevent context menu on long press */
.module-root,
.canvas-wrapper,
.canvas-wrapper canvas,
.result-image-container,
.result-image,
.canvas-controls,
.canvas-controls button,
#iconBar,
.barIconContainer,
.barIcon,
.tooltip,
#color-picker-container,
#color-picker,
#color-swatch,
.crop-overlay,
.crop-rect,
.crop-rect .handle {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Prevent text selection globally for this module */
.module-root * {
  -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-tap-highlight-color: transparent !important;
}

/* Prevent context menu on right click */
.module-root,
.canvas-wrapper,
.canvas-wrapper canvas,
.result-image-container,
.result-image,
.canvas-controls,
.canvas-controls button,
#iconBar,
.barIconContainer,
.barIcon,
.tooltip,
#color-picker-container,
#color-picker,
#color-swatch,
.crop-overlay,
.crop-rect,
.crop-rect .handle {
  -webkit-context-menu: none;
  -moz-context-menu: none;
  -ms-context-menu: none;
  context-menu: none;
}

/* Prevent system text selection on mobile */
@media (max-width: 768px) {
  .module-root,
  .module-root * {
    -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-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    -webkit-user-drag: none !important;
    -khtml-user-drag: none !important;
    -moz-user-drag: none !important;
    -o-user-drag: none !important;
    user-drag: none !important;
  }

  /* Additional mobile-specific touch prevention */
  .canvas-wrapper canvas {
    touch-action: none !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* Prevent any system gestures */
  .module-root {
    touch-action: none !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: none;
  }

  /* Prevent text selection on all interactive elements */
  .barIconContainer,
  .barIcon,
  .tooltip,
  .canvas-controls button {
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
  }

  /* Hide regular text tool on mobile (complex keyboard interaction) */
  .barIconContainer[data-tool='text'],
  .barIconContainer[data-group='text'] {
    display: none !important;
  }
}

/* Allow native DnD for explicit drag sources (catalog cards, capsules, etc.). */
.module-root [draggable='true'],
.module-root [data-allow-native-drag='true'] {
  -webkit-user-drag: element !important;
  -khtml-user-drag: element !important;
  -moz-user-drag: element !important;
  -o-user-drag: element !important;
  user-drag: element !important;
  touch-action: auto !important;
}

/* Thinking text input overlay - cloud-like styling */
.text-input-overlay.thinking-mode {
  border-radius: 24px !important;
  border: 2px solid rgba(100, 100, 100, 0.6) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
  background: rgba(30, 41, 59, 0.95) !important;
}

.text-input-overlay.thinking-mode .text-tool-input {
  font-style: italic !important;
}

/* Text tool input overlay - MONOCHROME style (white frosted glass) */
.text-input-overlay {
  position: absolute;
  z-index: 10001;
  background: var(--ff-ui-surface);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--ff-ui-border);
  border-radius: 16px;
  padding: 0;
  box-shadow: var(--ff-ui-shadow);
  min-width: 200px;
  min-height: 120px;
  width: 300px;
  height: 150px;
  overflow: hidden;
  box-sizing: border-box;
}

/* Textarea for multiline text input - MONOCHROME */
.text-tool-input {
  display: block;
  background: transparent;
  border: none;
  outline: none;
  color: var(--ff-ui-text);
  font:
    bold 24px Arial,
    sans-serif;
  width: 100%;
  height: calc(100% - 36px);
  padding: 14px 16px 8px 16px;
  caret-color: var(--ff-ui-text);
  resize: none;
  overflow: auto;
  line-height: 1.4;
  white-space: pre-wrap;
  word-wrap: break-word;
  box-sizing: border-box;
}

/* Text selection - medium grey */
.text-tool-input::selection {
  background: var(--ff-ui-selection-bg);
  color: var(--ff-ui-selection-text);
}

.text-tool-input::-moz-selection {
  background: var(--ff-ui-selection-bg);
  color: var(--ff-ui-selection-text);
}

.text-tool-input::placeholder {
  color: var(--ff-ui-text-soft);
  font-size: 14px;
  font-weight: normal;
  white-space: pre-wrap;
}

.text-tool-input:focus {
  outline: none;
}

/* Action buttons in text overlay */
.text-overlay-btn {
  -webkit-appearance: none;
  appearance: none;
}

.text-overlay-btn:focus {
  outline: none;
}

.module-root {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.canvas-wrapper {
  position: relative;
  flex-grow: 1;
  overflow: hidden;
  border-radius: 0;
  background-color: #efeff0;
}
.canvas-wrapper canvas {
  display: block;
}
.result-image-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  z-index: 2;
  /* Critical: don't block drawing/interaction on the WebGL canvas */
  pointer-events: none;
}
.result-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  display: none;
}
.canvas-controls {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}
.canvas-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.canvas-controls button {
  padding: 6px 12px;
  border: 1px solid var(--border-color);
  background-color: var(--tertiary-bg);
  color: var(--text-primary);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s;
}
.canvas-controls button:hover:not(:disabled) {
  background-color: var(--hover-bg);
}
.canvas-controls button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
#iconBar {
  position: absolute;
  z-index: 100000; /* CRITICAL FIX: Ensure iconbar is always above all overlays */
  /* Cleared past the 22px left ruler (+~6px gap) so the toolbar doesn't
     sit on top of the ruler ticks. */
  left: 28px;
  top: 50%;
  transform: translateY(calc(-50% - var(--ff-toolbar-offset, 0px)));
  display: flex;
  flex-direction: column;
  gap: calc(8px * var(--ff-toolbar-scale, 1));
  background: rgba(255, 255, 255, 0.85); /* Light mode: white base with high opacity */
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.6); /* Subtle white border */
  border-radius: calc(25px * var(--ff-toolbar-scale, 1));
  padding: calc(8px * var(--ff-toolbar-scale, 1));
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.12),
    /* Softer shadow for light mode */ 0 0 0 1px rgba(255, 255, 255, 0.8),
    inset 0 2px 4px rgba(255, 255, 255, 0.5),
    /* Inner highlight */ inset 0 -1px 2px rgba(0, 0, 0, 0.05); /* Subtle inner shadow */
  transition:
    background-color 0.3s,
    opacity 0.2s ease-out,
    box-shadow 0.3s ease;
  opacity: 1;
  cursor: grab; /* Show grab cursor on toolbar edge to indicate it's draggable */
  --ff-toolbar-scale: 0.92;
  --ff-toolbar-offset: 0px;
}

@media (max-width: 768px) {
  #iconBar {
    left: 8px;
  }
}

#canvasPills {
  position: absolute !important;
  /* Cleared past the 22px top ruler (+~6px gap). */
  top: calc(28px + env(safe-area-inset-top, 0px)) !important;
  right: calc(16px + env(safe-area-inset-right, 0px)) !important;
  display: flex !important;
  flex-direction: row-reverse !important;
  align-items: center !important;
  gap: 8px !important;
  z-index: 100000 !important;
  pointer-events: auto !important;
  transition: top 0.22s cubic-bezier(0.32, 0.72, 0, 1) !important;
}

#canvasHeaderToggleBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  opacity: 0.88;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.2s ease;
}

#canvasHeaderToggleBtn .ff-header-toggle-icon {
  transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}

body.workspace-mode[data-active-module='freeform']:not(.ff-freeform-header-collapsed)
  #canvasHeaderToggleBtn
  .ff-header-toggle-icon {
  transform: rotate(180deg);
}

#canvasHeaderToggleBtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18) !important;
}

/* Hide topbar drop-down toggle only for guest viewers — logged-in viewers
   need it to reach Studios / other modules from inside the shared board. */
body.freeform-view-only-guest #canvasHeaderToggleBtn {
  display: none !important;
}

/* In view-only mode, hide just the Share button (viewers can't share). The
   presence cluster itself stays visible so owners/editors keep Share + the
   live-presence avatars. */
body.freeform-view-only #ffShareBoardBtn {
  display: none !important;
}

/* ── Mobile/tablet top-bar overflow menu ──────────────────────────────
   #canvasPills is right-anchored (right:20px), flex row-reverse, with no
   width bound — so on narrow viewports its left-most items (Share + the
   magnet pill) fall off-screen. On <=768px we collapse the secondary pills
   (quality + magnet) into a dropdown behind the "⋯" button, keeping Share +
   close + header-toggle in the bar. Toggle wiring lives in ui/overflowMenu.js. */

/* Defensive: never let the cluster grow past the viewport. No desktop effect
   (real content is far narrower than this cap). */
#canvasPills {
  max-width: calc(100vw - 40px);
}

/* Desktop: the group is transparent — its pills flow inline exactly as before;
   the overflow trigger is hidden. */
#ffPrimaryPillGroup {
  display: contents;
}
#ffOverflowMenuBtn {
  display: none;
}
/* Hide the trigger when every control it would reveal is itself hidden
   (e.g. view-only boards strip the quality pill) — see overflowMenu.js. */
#ffOverflowMenuBtn.ff-overflow-empty {
  display: none !important;
}

/* Single source of truth: every top-bar pill takes --ff-pill-h (36px on all breakpoints). */
.ff-top-pill {
  height: var(--ff-pill-h);
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
/* Round icon buttons stay square: width tracks the shared height. min-* is pinned too
   so touch floors (e.g. topbar's coarse .mm-module-header-toggle 44px) can't bump them. */
#closeStudioBtn,
#canvasHeaderToggleBtn,
#ffOverflowMenuBtn {
  width: var(--ff-pill-h) !important;
  height: var(--ff-pill-h) !important;
  min-width: var(--ff-pill-h) !important;
  min-height: var(--ff-pill-h) !important;
  padding: 0 !important;
}
/* Title pill + presence cluster aren't .ff-top-pill — pin them to the same height. */
#canvasTitlePill,
#ffPresenceCluster {
  height: var(--ff-pill-h) !important;
  min-height: var(--ff-pill-h) !important;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  #ffOverflowMenuBtn:not(.ff-overflow-empty) {
    display: flex;
  }
  /* Collapse the secondary pills into a dropdown panel anchored under the bar. */
  #ffPrimaryPillGroup {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 8px;
    min-width: 220px;
    max-width: calc(100vw - 32px);
    background: rgba(255, 255, 255, 0.98);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 14px;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.2);
    z-index: 100001;
  }
  #ffPrimaryPillGroup.ff-open {
    display: flex;
  }
  /* Make the collapsed pills read as full-width menu rows. */
  #ffPrimaryPillGroup > #qualityPill,
  #ffPrimaryPillGroup > #snapOrthoUnitsPill {
    max-width: none;
    width: 100%;
    box-sizing: border-box;
  }
  #ffPrimaryPillGroup > #snapOrthoUnitsPill {
    justify-content: space-between;
  }
}

/* ── Viewer-mode interaction lock ─────────────────────────────────────
   Hard-block every note/anchor/handle interaction surface whenever the
   body has freeform-view-only. Without this in the always-loaded sheet
   the lock disappears once the URL normalises to /studio (the JS-injected
   <style> from sharedCanvasLoader is route-scoped). The result was a
   viewer who could still drag the pill, click handles, delete the note
   or remove its image — now all of that is dead. Canvas-mesh selection
   is separately blocked by the viewOnlyMode early-return in events.js. */
/* ── NUCLEAR LOCK ─────────────────────────────────────────────────────
   The container that holds every note pill + handle + connector +
   action bar lives at #freeform-pills-container (text.js:307). When the
   body is in freeform-view-only, force-disable pointer-events on the
   container AND every descendant — regardless of any inline
   pointer-events:auto / pill-specific class. This is intentionally
   blunt: simpler than tracking the dozen inner classes each note can
   render. Canvas-mesh shape interactions are blocked separately by the
   viewOnlyMode early-return in events.js. */
body.freeform-view-only #freeform-pills-container,
body.freeform-view-only #freeform-pills-container *,
body.freeform-view-only #freeform-pills-container *::before,
body.freeform-view-only #freeform-pills-container *::after {
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  cursor: default !important;
  caret-color: transparent !important;
}

body.freeform-view-only .freeform-thinking-pill,
body.freeform-view-only .freeform-thinking-pill *,
body.freeform-view-only .freeform-thinking-pill-text,
body.freeform-view-only .freeform-thinking-pill-input,
body.freeform-view-only .freeform-thinking-pill-delete,
body.freeform-view-only .freeform-thinking-pill-image-remove,
body.freeform-view-only .freeform-thinking-pill .freeform-thinking-pill-add-image,
body.freeform-view-only .freeform-thinking-pill-connector,
body.freeform-view-only .freeform-thinking-pill-connector::before,
body.freeform-view-only .freeform-thinking-pill-connector::after,
body.freeform-view-only .freeform-thinking-pill-dot,
body.freeform-view-only .freeform-thinking-pill-dot-inner,
body.freeform-view-only .freeform-handle,
body.freeform-view-only .freeform-handle *,
body.freeform-view-only .freeform-handle-primary,
body.freeform-view-only .freeform-handle-connector,
body.freeform-view-only .freeform-handle-dot,
body.freeform-view-only .freeform-handle-dot-inner,
body.freeform-view-only .freeform-handle-action-bar,
body.freeform-view-only .handle-btn,
body.freeform-view-only .handle-tooltip,
body.freeform-view-only .handle-separator,
body.freeform-view-only .text-input-overlay {
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  caret-color: transparent !important;
  cursor: default !important;
}
/* Hide the red magnet/attached indicator and magnet cues — in viewer mode
   there's no magnet/snap activity, so these affordances are confusing. */
body.freeform-view-only .ff-magnet-cue,
body.freeform-view-only .freeform-thinking-pill.note-attached .freeform-thinking-pill-dot-inner,
body.freeform-view-only .freeform-thinking-pill.dragging-pin .freeform-thinking-pill-dot-inner,
body.freeform-view-only .freeform-thinking-pill.note-handle-dragging .freeform-thinking-pill-dot {
  display: none !important;
  visibility: hidden !important;
  background: transparent !important;
}

/* Force-hide the handle action bar (delete/copy menu on hover) and any
   tooltip / pill dot action bar so the menu doesn't appear even if a stray
   :hover or .action-bar-visible class fires in viewer mode. */
body.freeform-view-only .freeform-handle-action-bar,
body.freeform-view-only .freeform-handle:hover .freeform-handle-action-bar,
body.freeform-view-only .freeform-handle.action-bar-visible .freeform-handle-action-bar,
body.freeform-view-only .freeform-thinking-pill-dot-action-bar,
body.freeform-view-only .handle-tooltip,
body.freeform-view-only .freeform-handle .handle-btn {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Kill the red hover indicator on pill anchor dots (text.js:2490) — when
   you can't actually click the dot, the red highlight is misleading. */
body.freeform-view-only .freeform-thinking-pill-dot:hover .freeform-thinking-pill-dot-inner,
body.freeform-view-only .freeform-thinking-pill-dot .freeform-thinking-pill-dot-inner,
body.freeform-view-only .freeform-handle:hover .freeform-handle-dot-inner,
body.freeform-view-only .freeform-handle .freeform-handle-dot-inner {
  background: rgba(10, 10, 12, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.9) !important;
  transform: translate(-50%, -50%) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25), inset 0 0 0 3px rgba(0, 0, 0, 0.75) !important;
}
body.freeform-view-only .freeform-thinking-pill-input,
body.freeform-view-only .text-input-overlay.board-text-editor,
body.freeform-view-only .text-input-overlay.canvas-native-text-editor {
  display: none !important;
  visibility: hidden !important;
}
body.freeform-view-only .freeform-thinking-pill::after,
body.freeform-view-only .freeform-thinking-pill::before {
  pointer-events: none !important;
}

/* ── Logged-in viewer (no -guest class) ─────────────────────────────────
   Keep the side-panel toggle visible (the icon left of the board pill).
   Force-overrides the inline display:none that syncCanvasSidebarToggleButton
   may have written before the body class was applied.
   Dropdown menu items kept: data-action="load" (My Boards) only. Hidden:
   duplicate / board-context / import / export / rename / share / shortcuts. */
body.freeform-view-only:not(.freeform-view-only-guest) #canvasSidebarToggleBtn,
body.freeform-view-only:not(.freeform-view-only-guest) .ff-canvas-sidebar-toggle {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
body.freeform-view-only:not(.freeform-view-only-guest) #managerDropdown .manager-option[data-action="duplicate"],
body.freeform-view-only:not(.freeform-view-only-guest) #managerDropdown .manager-option[data-action="board-context"],
body.freeform-view-only:not(.freeform-view-only-guest) #managerDropdown .manager-option[data-action="import"],
body.freeform-view-only:not(.freeform-view-only-guest) #managerDropdown .manager-option[data-action="export"],
body.freeform-view-only:not(.freeform-view-only-guest) #managerDropdown .manager-option[data-action="rename"],
body.freeform-view-only:not(.freeform-view-only-guest) #managerDropdown .manager-option[data-action="share"],
body.freeform-view-only:not(.freeform-view-only-guest) #managerDropdown .manager-option[data-action="shortcuts"] {
  display: none !important;
}
/* With only My Boards visible, the inline dividers (the bare
   <div style="height:1px ...">) serve no purpose — hide them all. */
body.freeform-view-only:not(.freeform-view-only-guest) #managerDropdown > div[style*="height:1px"] {
  display: none !important;
}

.ff-viewer-mode-pill {
  --ff-viewer-canvas-left: 0px;
  --ff-viewer-canvas-right: 0px;
  position: fixed;
  /* Share the board-title row instead of floating in the application header. */
  top: calc(28px + env(safe-area-inset-top, 0px));
  left: calc(
    var(--ff-viewer-canvas-left) +
      (100vw - var(--ff-viewer-canvas-left) - var(--ff-viewer-canvas-right)) / 2
  );
  transform: translateX(-50%);
  z-index: 100003;
  display: inline-flex;
  align-items: center;
  gap: var(--mm-module-leftbar-gap, 8px);
  height: var(--mm-module-leftbar-height, 36px);
  max-width: min(420px, calc(100vw - 32px));
  padding: var(--mm-module-leftbar-padding, 0 4px 0 14px);
  border-radius: var(--mm-module-leftbar-radius, 16px);
  box-sizing: border-box;
  pointer-events: auto;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: var(--mm-module-leftbar-font-size, 12px);
  font-weight: 600;
  line-height: 1;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    left 0.22s cubic-bezier(0.32, 0.72, 0, 1),
    top 0.22s cubic-bezier(0.32, 0.72, 0, 1),
    transform 0.22s cubic-bezier(0.32, 0.72, 0, 1),
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.ff-viewer-mode-pill[data-theme='light'] {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.15);
  color: #222;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.ff-viewer-mode-pill[data-theme='dark'] {
  background: rgba(34, 32, 38, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #e6e6ec;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

.ff-viewer-mode-pill[data-access-mode='editing'][data-theme='light'] {
  border-color: rgba(122, 140, 122, 0.34);
}

.ff-viewer-mode-pill[data-access-mode='commenting'][data-theme='light'] {
  border-color: rgba(110, 138, 150, 0.34);
}

.ff-viewer-mode-pill[data-access-mode='editing'][data-theme='dark'] {
  border-color: rgba(157, 178, 157, 0.28);
}

.ff-viewer-mode-pill[data-access-mode='commenting'][data-theme='dark'] {
  border-color: rgba(135, 172, 188, 0.28);
}

.ff-viewer-mode-label {
  flex: 0 0 auto;
  font-size: var(--mm-module-leftbar-font-size, 12px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

.ff-viewer-mode-divider {
  width: 1px;
  height: 18px;
  flex: 0 0 auto;
}

.ff-viewer-mode-pill[data-theme='light'] .ff-viewer-mode-divider {
  background: rgba(0, 0, 0, 0.1);
}

.ff-viewer-mode-pill[data-theme='dark'] .ff-viewer-mode-divider {
  background: rgba(255, 255, 255, 0.12);
}

.ff-viewer-mode-people {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

body.workspace-mode[data-active-module='freeform']:not(.ff-freeform-header-collapsed):not(.mm-module-header-collapsed) .ff-viewer-mode-pill {
  top: calc(var(--topbar-height, 60px) + 28px + env(safe-area-inset-top, 0px));
  transform: translateX(-50%);
}

/* The pill belongs to the canvas, not to the browser viewport. Keep its
   center on the visible workspace as the persistent sidebar and Generations
   panel open or close. On phones those panels overlay the canvas, so the
   compact rule below intentionally keeps the viewport center. */
@media (min-width: 769px) {
  body:has(.sidebar.open) .ff-viewer-mode-pill {
    --ff-viewer-canvas-left: var(--sidebar-width, 260px);
  }

  body:has(.main-content.generations-open) .ff-viewer-mode-pill {
    --ff-viewer-canvas-right: var(--capsule-panel-width, 242px);
  }
}

/* Board access remains read-only while browsing My Boards; only its
   canvas-owned badge is hidden until the board surface is visible again. */
body:not([data-active-module='freeform']) .ff-viewer-mode-pill,
body.freeform-ui-suspended .ff-viewer-mode-pill,
body.freeform-library-open .ff-viewer-mode-pill {
  display: none !important;
}

@media (max-width: 768px) {
  .ff-viewer-mode-pill {
    top: calc(12px + env(safe-area-inset-top, 0px));
    height: 34px;
    max-width: calc(100vw - 24px);
    padding: 4px 7px 4px 12px;
    gap: 8px;
  }

  .ff-viewer-mode-label {
    font-size: 10px;
  }

  body.workspace-mode[data-active-module='freeform']:not(.ff-freeform-header-collapsed):not(.mm-module-header-collapsed) .ff-viewer-mode-pill {
    top: calc(var(--topbar-height-mobile, 56px) + 10px + env(safe-area-inset-top, 0px));
    transform: translateX(-50%);
  }

  /* When the topbar is collapsed, the pill moves up into the freed vertical
     space so it stays visible but still out of the hamburger's hit zone.
     Same !important rationale as the rule above. */
  body.workspace-mode[data-active-module='freeform'].ff-freeform-header-collapsed
    .ff-viewer-mode-pill {
    top: calc(12px + env(safe-area-inset-top, 0px)) !important;
  }

  /* Narrow phones (≤360px): shrink to avatar-only chip so the chip never
     spans the full width and forces centering through interactive controls. */
  @media (max-width: 360px) {
    .ff-viewer-mode-pill {
      max-width: calc(100vw - 128px) !important;
    }
    .ff-viewer-mode-pill .ff-viewer-mode-label,
    .ff-viewer-mode-pill .ff-viewer-mode-divider {
      display: none !important;
    }
  }
}

body.workspace-mode[data-active-module='freeform'] .chat-container.workspace-active {
  height: 100% !important;
  min-height: 0 !important;
}

#canvasPillsLeft {
  /* Cleared past the top (22px) + left (22px) rulers (+~6px gap). */
  top: calc(28px + env(safe-area-inset-top, 0px)) !important;
  left: calc(28px + env(safe-area-inset-left, 0px)) !important;
  gap: 0 !important;
  align-items: center !important;
  transition:
    left 0.3s ease,
    top 0.22s cubic-bezier(0.32, 0.72, 0, 1) !important;
  z-index: 100002 !important;
  pointer-events: auto !important;
}

body.workspace-mode[data-active-module='freeform']:not(.ff-freeform-header-collapsed) #canvasPills {
  top: calc(var(--topbar-height, 60px) + 28px + env(safe-area-inset-top, 0px)) !important;
}

body.workspace-mode[data-active-module='freeform']:not(.ff-freeform-header-collapsed)
  #canvasPillsLeft {
  top: calc(var(--topbar-height, 60px) + 28px + env(safe-area-inset-top, 0px)) !important;
}

#canvasSidebarToggleBtn {
  overflow: hidden !important;
  width: 0 !important;
  height: 36px !important;
  min-width: 0 !important;
  min-height: 36px !important;
  margin-right: 0 !important;
  padding: 0 !important;
  border-width: 1px !important;
  opacity: 0 !important;
  transform: translateX(-14px) !important;
  pointer-events: none !important;
  flex-shrink: 0 !important;
  transition:
    width 0.28s cubic-bezier(0.32, 0.72, 0, 1),
    min-width 0.28s cubic-bezier(0.32, 0.72, 0, 1),
    margin-right 0.28s cubic-bezier(0.32, 0.72, 0, 1),
    opacity 0.2s ease,
    transform 0.28s cubic-bezier(0.32, 0.72, 0, 1),
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease !important;
}

body.workspace-mode[data-active-module='freeform'].ff-freeform-header-collapsed
  #canvasSidebarToggleBtn {
  width: 36px !important;
  min-width: 36px !important;
  margin-right: 14px !important;
  opacity: 1 !important;
  transform: translateX(0) !important;
  pointer-events: auto !important;
}

#canvasSidebarToggleBtn:hover {
  transform: translateX(0) translateY(-1px) !important;
}

#canvasTitlePill,
#canvasMenuBtn,
#canvasSidebarToggleBtn,
#managerDropdown {
  pointer-events: auto !important;
}

#canvasTitlePill {
  box-sizing: border-box !important;
}

#canvasTitlePill .canvas-title-label,
#canvasTitlePill .canvas-title-text {
  display: flex !important;
  align-items: center !important;
  line-height: 1 !important;
}

#canvasTitlePill .canvas-title-text {
  min-width: 0 !important;
}

#managerDropdown {
  z-index: 100003 !important;
}

/* Hidden modal layers must not intercept canvas-manager interactions. */
.freeform-action-modal:not(.visible),
.freeform-save-modal:not(.visible),
.delete-confirmation-pill:not(.active),
.canvas-share-modal:not(.active),
.cm-pro-gate-modal:not(.active),
.freeform-autosave-recovery:not(.visible) {
  pointer-events: none !important;
}

.freeform-action-modal.visible,
.freeform-save-modal.visible,
.delete-confirmation-pill.active,
.canvas-share-modal.active,
.cm-pro-gate-modal.active,
.freeform-autosave-recovery.visible {
  pointer-events: auto !important;
}

/* Freeform owns these floating/body-level surfaces. Keep them scoped to the
   active Freeform module so pills, loaders, and modals do not bleed into chat
   or another studio while Freeform is cached in the workspace. */
body:not([data-active-module='freeform']) #iconBar,
body.freeform-ui-suspended #iconBar,
body:not([data-active-module='freeform']) #canvasPills,
body.freeform-ui-suspended #canvasPills,
body:not([data-active-module='freeform']) #canvasPillsLeft,
body.freeform-ui-suspended #canvasPillsLeft,
body:not([data-active-module='freeform']) #managerDropdown,
body.freeform-ui-suspended #managerDropdown,
body:not([data-active-module='freeform']) .freeform-autoload-pill,
body.freeform-ui-suspended .freeform-autoload-pill,
body:not([data-active-module='freeform']) .freeform-autoload-backdrop,
body.freeform-ui-suspended .freeform-autoload-backdrop,
body:not([data-active-module='freeform']) .freeform-status-pill,
body.freeform-ui-suspended .freeform-status-pill,
body:not([data-active-module='freeform']) .freeform-failure-capsule,
body.freeform-ui-suspended .freeform-failure-capsule,
body:not([data-active-module='freeform']) .ff-qc-pill,
body.freeform-ui-suspended .ff-qc-pill,
body:not([data-active-module='freeform']) .crop-fit-pill-notification,
body.freeform-ui-suspended .crop-fit-pill-notification,
body:not([data-active-module='freeform']) .freeform-library-backdrop,
body.freeform-ui-suspended .freeform-library-backdrop,
body:not([data-active-module='freeform']) .freeform-library-modal,
body.freeform-ui-suspended .freeform-library-modal,
body:not([data-active-module='freeform']) .freeform-version-modal,
body.freeform-ui-suspended .freeform-version-modal,
body:not([data-active-module='freeform']) .freeform-action-modal,
body.freeform-ui-suspended .freeform-action-modal,
body:not([data-active-module='freeform']) .freeform-save-modal,
body.freeform-ui-suspended .freeform-save-modal,
body:not([data-active-module='freeform']) .freeform-instructions-backdrop,
body.freeform-ui-suspended .freeform-instructions-backdrop,
body:not([data-active-module='freeform']) .freeform-tour-tooltip,
body.freeform-ui-suspended .freeform-tour-tooltip,
body:not([data-active-module='freeform']) .welcome-modal-backdrop,
body.freeform-ui-suspended .welcome-modal-backdrop,
body:not([data-active-module='freeform']) .freeform-image-capsule,
body.freeform-ui-suspended .freeform-image-capsule,
body:not([data-active-module='freeform']) .freeform-video-capsule,
body.freeform-ui-suspended .freeform-video-capsule,
body:not([data-active-module='freeform']) .selection-capsule,
body.freeform-ui-suspended .selection-capsule,
body:not([data-active-module='freeform']) .selection-capsule-link-pill,
body.freeform-ui-suspended .selection-capsule-link-pill,
body:not([data-active-module='freeform']) .canvas-share-modal,
body.freeform-ui-suspended .canvas-share-modal,
body:not([data-active-module='freeform']) .cm-pro-gate-modal,
body.freeform-ui-suspended .cm-pro-gate-modal,
body:not([data-active-module='freeform']) .delete-confirmation-pill,
body.freeform-ui-suspended .delete-confirmation-pill,
body:not([data-active-module='freeform']) .freeform-autosave-recovery,
body.freeform-ui-suspended .freeform-autosave-recovery,
body:not([data-active-module='freeform']) #freeformUnitCalibrationModal,
body.freeform-ui-suspended #freeformUnitCalibrationModal {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Push manager pill (canvasPillsLeft) when sidebar is open - same as instant narratives */
@media (min-width: 769px) {
  .sidebar.open ~ .main-content #canvasPillsLeft,
  .sidebar.open ~ .main-content .canvas-wrapper #canvasPillsLeft {
    left: calc(var(--sidebar-width, 330px) + 20px) !important;
  }
}

/* CSS-driven sidebar push for non-dragged toolbar — fires in same frame as sidebar animation */
.sidebar.open ~ .main-content #iconBar:not(.dragged):not(.dragging) {
  left: calc(var(--sidebar-width, 330px) + 16px) !important;
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#qualityPill {
  height: 36px;
  align-items: center;
}

#canvasTitlePill {
  min-height: 36px !important;
  border-radius: 16px !important;
}

#canvasMenuBtn {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  border-radius: 12px !important;
  align-self: center !important;
}

#iconBar .toolbar-expand-toggle {
  width: 100%;
  height: auto;
  border-radius: 0;
  border: none;
  background: transparent;
  display: none;
  align-items: center;
  justify-content: center;
  margin-top: calc(4px * var(--ff-toolbar-scale, 1));
  padding: calc(6px * var(--ff-toolbar-scale, 1)) 0;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

#iconBar .toolbar-expand-toggle:hover {
  background: transparent;
  box-shadow: none;
}

#iconBar .toolbar-expand-arrow {
  width: calc(8px * var(--ff-toolbar-scale, 1));
  height: calc(8px * var(--ff-toolbar-scale, 1));
  border-right: 2px solid rgba(0, 0, 0, 0.6);
  border-bottom: 2px solid rgba(0, 0, 0, 0.6);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  margin: 0 auto;
}

#iconBar.ff-toolbar-expanded .toolbar-expand-arrow {
  transform: rotate(-135deg);
}

/* Separator between tools and undo/redo */
.iconbar-separator {
  width: calc(26px * var(--ff-toolbar-scale, 1));
  height: 1px;
  background: rgba(0, 0, 0, 0.12); /* Dark separator for light mode */
  margin: 2px auto;
  border-radius: 1px;
}

/* Smooth fade transition for drag operations - MUST be on base selector for smooth fade-in AND fade-out */
#iconBar {
  transition: opacity 0.2s ease-out;
}

/* Fade out during drag operations for cleaner visual experience */
#iconBar.dragging-fade {
  opacity: 0.15;
  pointer-events: auto !important; /* CRITICAL FIX: Force iconbar to always be clickable */
  isolation: isolate; /* CRITICAL FIX: Create new stacking context */
  cursor: grab;
}

/* Freeform does not use the shared bottom chat promptbar. Keep every shared
   promptbar layer hidden even if Design Chat mounted it before module switch. */
body[data-active-module='freeform'] .input-section,
body[data-active-module='freeform'] .input-container,
body[data-active-module='freeform'] #chatPromptBarMount,
body[data-active-module='freeform'] .chat-promptbar-mount,
body[data-active-module='freeform'] .chat-promptbar,
body[data-active-module='freeform'] .message-input-container,
body[data-active-module='freeform'] .prompt-bar-container,
body[data-active-module='freeform'] .image-input-container,
body[data-active-module='freeform'] #imageThumbStrip,
body[data-active-module='freeform'] .thumb-strip,
body[data-active-module='freeform'] .dc-centered-prompt-title {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  filter: none !important;
  box-shadow: none !important;
  pointer-events: none !important;
  transition: none !important;
}

/* ── Fix invisible blocking area at bottom of canvas ───────────────── */
/* Hide the bottom prompt chrome while the board browser is open.
   The browser is now a full workspace panel, so blurring the prompt bar
   leaves a visible shadow through the light board surface. */
body[data-active-module='freeform'].freeform-library-open #ff-frame-prompt-bar,
body[data-active-module='freeform'].freeform-library-open #ff-prompt-style-picker,
body[data-active-module='freeform'].freeform-library-open .input-section,
body[data-active-module='freeform'].freeform-library-open .input-container,
body[data-active-module='freeform'].freeform-library-open .message-input-container,
body[data-active-module='freeform'].freeform-library-open .prompt-bar-container,
body[data-active-module='freeform'].freeform-library-open .image-input-container {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  filter: none !important;
  box-shadow: none !important;
  pointer-events: none !important;
  transition: none !important;
}

/* Viewer mode is a true read-only canvas: keep only pan/zoom and the centered
   access pill. Hide editor prompt chrome, toolbars, board menus, quality, and
   snap controls even if late init paths try to restore them inline. */
body[data-active-module='freeform'].freeform-view-only .input-section,
body[data-active-module='freeform'].freeform-view-only .input-container,
body[data-active-module='freeform'].freeform-view-only .message-input-container,
body[data-active-module='freeform'].freeform-view-only .prompt-bar-container,
body[data-active-module='freeform'].freeform-view-only .image-input-container,
body[data-active-module='freeform'].freeform-view-only-guest .input-section,
body[data-active-module='freeform'].freeform-view-only-guest .input-container,
body[data-active-module='freeform'].freeform-view-only-guest .message-input-container,
body[data-active-module='freeform'].freeform-view-only-guest .prompt-bar-container,
body[data-active-module='freeform'].freeform-view-only-guest .image-input-container {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  filter: none !important;
  box-shadow: none !important;
  pointer-events: none !important;
  transition: none !important;
}

body.freeform-view-only #iconBar,
body.freeform-view-only-guest #iconBar,
body.freeform-view-only #brushSlidersContainer,
body.freeform-view-only #eraserSlidersContainer,
body.freeform-view-only #lineThicknessSlider,
body.freeform-view-only-guest #brushSlidersContainer,
body.freeform-view-only-guest #eraserSlidersContainer,
body.freeform-view-only-guest #lineThicknessSlider,
body.freeform-view-only .toolbar-menu,
body.freeform-view-only-guest .toolbar-menu,
body.freeform-view-only .freeform-context-menu,
body.freeform-view-only-guest .freeform-context-menu {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* GUEST viewers: hide the full board-pill chrome (board name, manager menu,
   menu button, board-mode menu). These remain visible for LOGGED-IN viewers
   so they can see the board name and reach the Duplicate action. */
body.freeform-view-only-guest #canvasPillsLeft,
body.freeform-view-only-guest #canvasTitlePill,
body.freeform-view-only-guest #managerPill,
body.freeform-view-only-guest #managerDropdown,
body.freeform-view-only-guest #canvasMenuBtn,
body.freeform-view-only-guest #boardModeMenu,
body.freeform-view-only-guest [data-pill="canvas-manager"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ALL view-only (guest + logged-in): hide edit-only affordances —
   snap/ortho/quality/autosave/clear/AI brain. These have no use when you
   cannot edit the board. */
body.freeform-view-only #snapOrthoUnitsPill,
body.freeform-view-only #qualityPill,
body.freeform-view-only #qualityDropdown,
body.freeform-view-only #qualityModeText,
body.freeform-view-only #autosavePill,
body.freeform-view-only #clearCanvasPill,
body.freeform-view-only #brainIcon,
body.freeform-view-only #brainIconContainer,
body.freeform-view-only [data-pill="quality"],
body.freeform-view-only [data-pill="autosave"],
body.freeform-view-only .freeform-clear-btn,
body.freeform-view-only .clear-board-btn,
body.freeform-view-only [data-action="clear"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#iconBar.dragging {
  cursor: grabbing;
}

/* ── Drag handles (top + bottom grab pills) ─────────────────────────── */
.ff-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 5px 0;
  cursor: grab;
  -webkit-touch-callout: none;
  touch-action: none;
}
.ff-drag-handle-pill {
  width: calc(28px * var(--ff-toolbar-scale, 1));
  height: calc(4px * var(--ff-toolbar-scale, 1));
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.18);
  transition:
    background 0.2s ease,
    width 0.2s ease;
}
.ff-drag-handle:active .ff-drag-handle-pill,
#iconBar.ff-toolbar-dragging .ff-drag-handle-pill {
  background: rgba(0, 0, 0, 0.35);
  width: calc(32px * var(--ff-toolbar-scale, 1));
}

/* ── Collapsed: tighten gap since hidden items still occupy flex gap ── */
#iconBar.ff-toolbar-collapsed {
  gap: calc(4px * var(--ff-toolbar-scale, 1));
}

/* ── Fully round edges (half-circle caps) ────────────────────────────── */
#iconBar {
  border-radius: 999px !important;
}

/* Kill child transitions while the JS auto-fit measures + applies scale,
   so sizes snap instead of animating from the scale-1 measurement. */
#iconBar.ff-measuring,
#iconBar.ff-measuring * {
  transition: none !important;
}

/* ── Sidebar overlay must not block freeform toolbar or canvas ──────── */
/* The sidebar-overlay is position:fixed z-index:1200 and #iconBar is position:absolute,
   so iconBar's z-index only applies within its parent stacking context.
   Fix: pass pointer events through overlay when freeform is active. */
body[data-active-module='freeform'] .sidebar-overlay,
body[data-active-module='freeform'] .sidebar-overlay.active {
  pointer-events: none !important;
}

/* ── Suppress tooltips and hover effects during drag ────────────────── */
#iconBar.dragging .tooltip,
#iconBar.ff-toolbar-dragging .tooltip,
#iconBar.dragging .barIconContainer .tooltip,
#iconBar.ff-toolbar-dragging .barIconContainer .tooltip {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
#iconBar.dragging .barIconContainer:hover,
#iconBar.ff-toolbar-dragging .barIconContainer:hover {
  background: transparent !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ── iPad Notes-style drag elevation ────────────────────────────────── */
#iconBar.ff-toolbar-dragging {
  cursor: grabbing !important;
  /* No transform here — position is fully managed by JS during drag */
  box-shadow:
    0 22px 70px rgba(0, 0, 0, 0.22),
    0 10px 30px rgba(0, 0, 0, 0.14),
    0 0 0 1px rgba(0, 0, 0, 0.06) !important;
  /* Only transition box-shadow — transform/left/top must be instant during drag */
  transition: box-shadow 0.18s ease !important;
  opacity: 0.95 !important;
  z-index: 100010 !important;
}

#iconBar .barIconContainer {
  cursor: pointer;
}
.barIconContainer {
  width: calc(40px * var(--ff-toolbar-scale, 1));
  height: calc(40px * var(--ff-toolbar-scale, 1));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  position: relative;
  cursor: pointer;
  pointer-events: auto !important; /* CRITICAL FIX: Ensure individual icons are always clickable */
  z-index: 1; /* CRITICAL FIX: Ensure icons are above any potential overlays within iconbar */
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
}

/* Periodic golden-orange glow on the Generate Area button so the
   primary CTA gently catches the eye without being distracting.
   ~5 s cycle: ~3 s rest, ~2 s warm breath up and back down. Both an
   outer halo and a warm inner tint so it reads as light caught on the
   icon. Disabled for reduced-motion and while the crop tool is active
   or hovered. We also paint a pseudo-element ::after as the actual
   glow surface — many of the other .barIconContainer rules use
   box-shadow themselves (hover, active, crop-hint), which would
   override the animation. The ::after layer is independent of those.
   !important on animation defeats the transition: all 0.3s ease on
   the container which would otherwise smear the keyframes. */
@keyframes ff-generate-area-pulse {
  0%, 58%, 100% {
    opacity: 0;
    transform: scale(0.85);
  }
  78% {
    opacity: 1;
    transform: scale(1);
  }
}
.barIconContainer[data-tool="crop"] {
  position: relative;
}
.barIconContainer[data-tool="crop"]::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    circle,
    rgba(255, 195, 100, 0.35) 0%,
    rgba(255, 160, 50, 0.22) 45%,
    rgba(255, 130, 20, 0) 75%
  );
  box-shadow:
    0 0 16px 2px rgba(255, 180, 70, 0.55),
    0 0 36px 6px rgba(255, 140, 30, 0.28),
    inset 0 0 10px rgba(255, 200, 120, 0.30);
  animation: ff-generate-area-pulse 5s ease-in-out infinite !important;
}
.barIconContainer[data-tool="crop"].active::after,
.barIconContainer[data-tool="crop"]:hover::after {
  animation: none !important;
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .barIconContainer[data-tool="crop"]::after {
    animation: none !important;
    opacity: 0;
  }
}

/* Same warm golden-orange breath on the image-capsule "Set Frame"
   (Generate Area) button. Mirrors the toolbar Generate Area pulse so
   the two ways into the render-region flow read as the same CTA. The
   ::after pseudo-element painted on the pill-shaped button picks up
   its border-radius via "inherit". Pulse disabled while the button is
   hovered (user is engaging with it) or when reduced-motion is on. */
.freeform-image-capsule button[data-key="frame"] {
  position: relative;
}
.freeform-image-capsule button[data-key="frame"]::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    circle,
    rgba(255, 195, 100, 0.35) 0%,
    rgba(255, 160, 50, 0.22) 45%,
    rgba(255, 130, 20, 0) 75%
  );
  box-shadow:
    0 0 16px 2px rgba(255, 180, 70, 0.55),
    0 0 36px 6px rgba(255, 140, 30, 0.28),
    inset 0 0 10px rgba(255, 200, 120, 0.30);
  animation: ff-generate-area-pulse 5s ease-in-out infinite !important;
}
.freeform-image-capsule button[data-key="frame"]:hover::after {
  animation: none !important;
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .freeform-image-capsule button[data-key="frame"]::after {
    animation: none !important;
    opacity: 0;
  }
}
.barIconContainer.disabled,
.barIconContainer:disabled {
  cursor: not-allowed;
  pointer-events: none;
}


.barIconContainer.disabled > .barIcon,
.barIconContainer:disabled > .barIcon {
  opacity: 0.3 !important;
}
.barIconContainer:hover:not(.disabled):not(:disabled) {
  background: rgba(0, 0, 0, 0.08); /* Dark hover for light mode */
  transform: scale(1.15);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(0, 0, 0, 0.05);
}
.barIconContainer.active {
  background: #000;
  transform: scale(1.15);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  border-radius: 50%;
}
.barIconContainer.active .barIcon {
  filter: brightness(0) invert(1);
}

.barIconContainer.freeform-crop-hint-highlight {
  background: rgba(178, 102, 70, 0.18) !important;
  box-shadow:
    0 0 0 2px rgba(178, 102, 70, 0.72),
    0 0 0 8px rgba(178, 102, 70, 0.16),
    0 10px 28px rgba(178, 102, 70, 0.26) !important;
  transform: scale(1.16);
}

.barIconContainer.freeform-crop-hint-highlight::before {
  content: '';
  position: absolute;
  inset: calc(-7px * var(--ff-toolbar-scale, 1));
  border-radius: 50%;
  border: 2px solid rgba(212, 165, 116, 0.78);
  animation: ffCropHintPulse 1.35s ease-in-out infinite;
  pointer-events: none;
}

.barIconContainer.freeform-crop-hint-highlight .barIcon {
  filter: none !important;
}

@keyframes ffCropHintPulse {
  0%, 100% {
    opacity: 0.45;
    transform: scale(0.94);
  }
  50% {
    opacity: 1;
    transform: scale(1.06);
  }
}

.freeform-full-canvas-notice {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--ff-full-canvas-notice-bottom, calc(96px + env(safe-area-inset-bottom, 0px)));
  z-index: 2210;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 18px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease;
}

.freeform-full-canvas-notice.visible {
  opacity: 1;
}

.freeform-visible-screen-boundary-pulse {
  --ff-visible-pulse-blend: normal;
  --ff-visible-pulse-border-idle: rgba(178, 102, 70, 0);
  --ff-visible-pulse-border-strong: rgba(255, 216, 176, 0.96);
  --ff-visible-pulse-border-soft: rgba(178, 102, 70, 0.42);
  --ff-visible-pulse-edge-strong: rgba(255, 214, 165, 0.88);
  --ff-visible-pulse-edge-mid: rgba(238, 169, 112, 0.52);
  --ff-visible-pulse-edge-soft: rgba(178, 102, 70, 0.18);
  --ff-visible-pulse-edge-clear: rgba(178, 102, 70, 0);
  --ff-visible-pulse-outer-core: rgba(238, 169, 112, 0.62);
  --ff-visible-pulse-outer-mid: rgba(178, 102, 70, 0.42);
  --ff-visible-pulse-outer-far: rgba(178, 102, 70, 0.22);
  --ff-visible-pulse-inner-core: rgba(255, 222, 181, 0.72);
  --ff-visible-pulse-inner-mid: rgba(255, 196, 130, 0.48);
  --ff-visible-pulse-inner-far: rgba(178, 102, 70, 0.28);
  --ff-visible-pulse-contrast: rgba(69, 55, 45, 0.16);
  --ff-visible-pulse-dim-strong: rgba(34, 28, 24, 0.16);
  --ff-visible-pulse-dim-soft: rgba(34, 28, 24, 0.07);
  --ff-visible-pulse-dim-clear: rgba(34, 28, 24, 0);
  --ff-visible-pulse-edge-y: 124px;
  --ff-visible-pulse-edge-x: 112px;
  --ff-visible-pulse-edge-y-mid: 42px;
  --ff-visible-pulse-edge-y-soft: 84px;
  --ff-visible-pulse-edge-x-mid: 38px;
  --ff-visible-pulse-edge-x-soft: 76px;
  position: fixed;
  left: var(--ff-visible-boundary-left, 0);
  top: var(--ff-visible-boundary-top, 0);
  width: var(--ff-visible-boundary-width, 100vw);
  height: var(--ff-visible-boundary-height, 100vh);
  z-index: 2208;
  pointer-events: none;
  box-sizing: border-box;
  border-radius: 10px;
  border: 3px solid var(--ff-visible-pulse-border-idle);
  overflow: visible;
  opacity: 0;
  transform: scale(1);
  transform-origin: center;
  mix-blend-mode: var(--ff-visible-pulse-blend);
  background-color: var(--ff-visible-pulse-dim-clear);
  backdrop-filter: brightness(1) saturate(1);
  -webkit-backdrop-filter: brightness(1) saturate(1);
  will-change: opacity, transform, border-color, box-shadow, filter, background-color, backdrop-filter;
}

.freeform-visible-screen-boundary-pulse[data-freeform-theme='dark'] {
  --ff-visible-pulse-blend: normal;
  --ff-visible-pulse-border-idle: rgba(178, 102, 70, 0);
  --ff-visible-pulse-border-strong: rgba(255, 222, 181, 0.95);
  --ff-visible-pulse-border-soft: rgba(178, 102, 70, 0.38);
  --ff-visible-pulse-edge-strong: rgba(255, 214, 165, 0.78);
  --ff-visible-pulse-edge-mid: rgba(238, 169, 112, 0.44);
  --ff-visible-pulse-edge-soft: rgba(178, 102, 70, 0.16);
  --ff-visible-pulse-edge-clear: rgba(178, 102, 70, 0);
  --ff-visible-pulse-outer-core: rgba(238, 169, 112, 0.56);
  --ff-visible-pulse-outer-mid: rgba(178, 102, 70, 0.38);
  --ff-visible-pulse-outer-far: rgba(178, 102, 70, 0.2);
  --ff-visible-pulse-inner-core: rgba(255, 222, 181, 0.68);
  --ff-visible-pulse-inner-mid: rgba(255, 196, 130, 0.44);
  --ff-visible-pulse-inner-far: rgba(178, 102, 70, 0.26);
  --ff-visible-pulse-contrast: rgba(178, 102, 70, 0);
  --ff-visible-pulse-dim-strong: rgba(0, 0, 0, 0.2);
  --ff-visible-pulse-dim-soft: rgba(0, 0, 0, 0.08);
  --ff-visible-pulse-dim-clear: rgba(0, 0, 0, 0);
  --ff-visible-pulse-edge-y: 132px;
  --ff-visible-pulse-edge-x: 120px;
  --ff-visible-pulse-edge-y-mid: 48px;
  --ff-visible-pulse-edge-y-soft: 92px;
  --ff-visible-pulse-edge-x-mid: 44px;
  --ff-visible-pulse-edge-x-soft: 86px;
}

.freeform-visible-screen-boundary-pulse::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(to bottom, var(--ff-visible-pulse-edge-strong), var(--ff-visible-pulse-edge-mid) var(--ff-visible-pulse-edge-y-mid), var(--ff-visible-pulse-edge-soft) var(--ff-visible-pulse-edge-y-soft), var(--ff-visible-pulse-edge-clear) var(--ff-visible-pulse-edge-y)) top / 100% var(--ff-visible-pulse-edge-y) no-repeat,
    linear-gradient(to top, var(--ff-visible-pulse-edge-strong), var(--ff-visible-pulse-edge-mid) var(--ff-visible-pulse-edge-y-mid), var(--ff-visible-pulse-edge-soft) var(--ff-visible-pulse-edge-y-soft), var(--ff-visible-pulse-edge-clear) var(--ff-visible-pulse-edge-y)) bottom / 100% var(--ff-visible-pulse-edge-y) no-repeat,
    linear-gradient(to right, var(--ff-visible-pulse-edge-strong), var(--ff-visible-pulse-edge-mid) var(--ff-visible-pulse-edge-x-mid), var(--ff-visible-pulse-edge-soft) var(--ff-visible-pulse-edge-x-soft), var(--ff-visible-pulse-edge-clear) var(--ff-visible-pulse-edge-x)) left / var(--ff-visible-pulse-edge-x) 100% no-repeat,
    linear-gradient(to left, var(--ff-visible-pulse-edge-strong), var(--ff-visible-pulse-edge-mid) var(--ff-visible-pulse-edge-x-mid), var(--ff-visible-pulse-edge-soft) var(--ff-visible-pulse-edge-x-soft), var(--ff-visible-pulse-edge-clear) var(--ff-visible-pulse-edge-x)) right / var(--ff-visible-pulse-edge-x) 100% no-repeat;
  filter: blur(12px) saturate(128%);
}

.freeform-visible-screen-boundary-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 3px var(--ff-visible-pulse-inner-core),
    inset 0 0 58px var(--ff-visible-pulse-inner-mid),
    inset 0 0 118px var(--ff-visible-pulse-inner-far);
}

.freeform-visible-screen-boundary-pulse.visible {
  animation: ffVisibleScreenBoundaryPulse 2300ms cubic-bezier(0.18, 0.82, 0.22, 1) both;
}

@keyframes ffVisibleScreenBoundaryPulse {
  0% {
    opacity: 0;
    transform: scale(0.998);
    border-color: var(--ff-visible-pulse-border-idle);
    box-shadow: 0 0 0 var(--ff-visible-pulse-border-idle);
    background-color: var(--ff-visible-pulse-dim-clear);
    backdrop-filter: brightness(1) saturate(1);
    -webkit-backdrop-filter: brightness(1) saturate(1);
    filter: blur(0);
  }
  10% {
    opacity: 0.98;
    transform: scale(1);
    border-color: var(--ff-visible-pulse-border-strong);
    box-shadow:
      0 0 0 3px var(--ff-visible-pulse-contrast),
      0 0 0 4px var(--ff-visible-pulse-inner-core),
      0 0 48px var(--ff-visible-pulse-outer-core),
      0 0 94px var(--ff-visible-pulse-outer-mid),
      0 0 144px var(--ff-visible-pulse-outer-far),
      inset 0 0 0 3px var(--ff-visible-pulse-inner-core),
      inset 0 0 62px var(--ff-visible-pulse-inner-mid),
      inset 0 0 126px var(--ff-visible-pulse-inner-far);
    background-color: var(--ff-visible-pulse-dim-strong);
    backdrop-filter: brightness(0.84) saturate(0.94);
    -webkit-backdrop-filter: brightness(0.84) saturate(0.94);
    filter: blur(0.1px) saturate(122%);
  }
  30% {
    opacity: 0.4;
    transform: scale(1.002);
    border-color: var(--ff-visible-pulse-border-soft);
    box-shadow:
      0 0 34px var(--ff-visible-pulse-outer-mid),
      0 0 76px var(--ff-visible-pulse-outer-far),
      inset 0 0 48px var(--ff-visible-pulse-inner-mid),
      inset 0 0 96px var(--ff-visible-pulse-inner-far);
    background-color: var(--ff-visible-pulse-dim-soft);
    backdrop-filter: brightness(0.94) saturate(0.98);
    -webkit-backdrop-filter: brightness(0.94) saturate(0.98);
    filter: blur(0.4px) saturate(112%);
  }
  48% {
    opacity: 0.95;
    transform: scale(1);
    border-color: var(--ff-visible-pulse-border-strong);
    box-shadow:
      0 0 0 3px var(--ff-visible-pulse-contrast),
      0 0 0 4px var(--ff-visible-pulse-inner-core),
      0 0 44px var(--ff-visible-pulse-outer-core),
      0 0 86px var(--ff-visible-pulse-outer-mid),
      0 0 132px var(--ff-visible-pulse-outer-far),
      inset 0 0 0 3px var(--ff-visible-pulse-inner-core),
      inset 0 0 56px var(--ff-visible-pulse-inner-mid),
      inset 0 0 116px var(--ff-visible-pulse-inner-far);
    background-color: var(--ff-visible-pulse-dim-strong);
    backdrop-filter: brightness(0.86) saturate(0.94);
    -webkit-backdrop-filter: brightness(0.86) saturate(0.94);
    filter: blur(0.1px) saturate(120%);
  }
  72% {
    opacity: 0.3;
    transform: scale(1.003);
    border-color: var(--ff-visible-pulse-border-soft);
    box-shadow:
      0 0 30px var(--ff-visible-pulse-outer-mid),
      0 0 68px var(--ff-visible-pulse-outer-far),
      inset 0 0 44px var(--ff-visible-pulse-inner-mid),
      inset 0 0 88px var(--ff-visible-pulse-inner-far);
    background-color: var(--ff-visible-pulse-dim-soft);
    backdrop-filter: brightness(0.95) saturate(0.98);
    -webkit-backdrop-filter: brightness(0.95) saturate(0.98);
    filter: blur(0.5px) saturate(108%);
  }
  100% {
    opacity: 0;
    transform: scale(1.004);
    border-color: var(--ff-visible-pulse-border-idle);
    box-shadow: 0 0 0 var(--ff-visible-pulse-border-idle);
    background-color: var(--ff-visible-pulse-dim-clear);
    backdrop-filter: brightness(1) saturate(1);
    -webkit-backdrop-filter: brightness(1) saturate(1);
    filter: blur(0);
  }
}

.freeform-full-canvas-card {
  width: min(560px, calc(100vw - 36px));
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 13px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  color: #2a211d;
  border: 1px solid rgba(38, 34, 31, 0.12);
  box-shadow:
    0 18px 54px rgba(43, 29, 20, 0.16),
    0 2px 12px rgba(43, 29, 20, 0.08);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  pointer-events: auto;
  transform: translateY(14px) scale(0.98);
  transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
  max-height: min(280px, calc(100vh - var(--ff-full-canvas-notice-bottom, 96px) - 24px));
}

.freeform-full-canvas-notice.visible .freeform-full-canvas-card {
  transform: translateY(0) scale(1);
}

.freeform-full-canvas-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(178, 102, 70, 0.08);
  border: 0;
  box-shadow: none;
}

.freeform-full-canvas-region {
  position: relative;
  width: 24px;
  height: 17px;
  border-radius: 4px;
  border: 2px solid #b26646;
  background: rgba(178, 102, 70, 0.08);
  box-shadow: none;
}

.freeform-full-canvas-spark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 11px;
  transform: translate(-50%, -50%);
  color: #d4a574;
  fill: currentColor;
  overflow: visible;
}

.freeform-full-canvas-copy {
  min-width: 0;
}

.freeform-full-canvas-title {
  font-size: 14px;
  line-height: 1.2;
  font-weight: 760;
  letter-spacing: 0;
  margin-bottom: 3px;
}

.freeform-full-canvas-body {
  font-size: 12px;
  line-height: 1.32;
  color: rgba(42, 33, 29, 0.7);
  letter-spacing: 0;
}

.freeform-full-canvas-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 7px;
  font-size: 11px;
  line-height: 1.2;
  color: rgba(42, 33, 29, 0.62);
  cursor: pointer;
}

.freeform-full-canvas-checkbox input {
  width: 14px;
  height: 14px;
  accent-color: #b26646;
}

.freeform-full-canvas-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.freeform-full-canvas-btn {
  min-height: 34px;
  padding: 0 13px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  cursor: pointer;
  transition:
    transform 140ms ease,
    background 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease;
  white-space: nowrap;
}

.freeform-full-canvas-btn:hover {
  transform: translateY(-1px);
}

.freeform-full-canvas-btn.primary {
  background: #2a211d;
  color: #fff8f0;
  box-shadow: 0 7px 18px rgba(43, 29, 20, 0.18);
}

.freeform-full-canvas-btn.secondary {
  background: rgba(178, 102, 70, 0.1);
  color: #8f4f32;
  border-color: rgba(178, 102, 70, 0.26);
}

.module-root[data-freeform-theme='dark'] .freeform-full-canvas-card,
.freeform-full-canvas-notice[data-freeform-theme='dark'] .freeform-full-canvas-card {
  background: rgba(29, 25, 23, 0.95);
  color: rgba(255, 248, 240, 0.96);
  border-color: rgba(178, 102, 70, 0.28);
  box-shadow:
    0 18px 54px rgba(0, 0, 0, 0.46),
    0 2px 12px rgba(178, 102, 70, 0.16);
}

.module-root[data-freeform-theme='dark'] .freeform-full-canvas-body,
.module-root[data-freeform-theme='dark'] .freeform-full-canvas-checkbox,
.freeform-full-canvas-notice[data-freeform-theme='dark'] .freeform-full-canvas-body,
.freeform-full-canvas-notice[data-freeform-theme='dark'] .freeform-full-canvas-checkbox {
  color: rgba(255, 239, 224, 0.68);
}

.module-root[data-freeform-theme='dark'] .freeform-full-canvas-btn.primary,
.freeform-full-canvas-notice[data-freeform-theme='dark'] .freeform-full-canvas-btn.primary {
  background: rgba(255, 246, 235, 0.94);
  color: #2a211d;
}

.module-root[data-freeform-theme='dark'] .freeform-full-canvas-btn.secondary,
.freeform-full-canvas-notice[data-freeform-theme='dark'] .freeform-full-canvas-btn.secondary {
  background: rgba(178, 102, 70, 0.16);
  color: #f0c3a3;
  border-color: rgba(178, 102, 70, 0.4);
}

.freeform-prompt-toast {
  position: fixed;
  left: 50%;
  bottom: var(--ff-prompt-toast-bottom, calc(96px + env(safe-area-inset-bottom, 0px)));
  z-index: 2220;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 40px);
  min-height: 48px;
  padding: 10px 20px 10px 14px;
  border-radius: 999px;
  background: rgba(255, 249, 241, 0.96);
  color: #2a211d;
  border: 1px solid rgba(178, 102, 70, 0.22);
  box-shadow:
    0 18px 42px rgba(43, 29, 20, 0.18),
    0 2px 10px rgba(43, 29, 20, 0.08);
  backdrop-filter: blur(18px) saturate(155%);
  -webkit-backdrop-filter: blur(18px) saturate(155%);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 14px) scale(0.98);
  transition:
    opacity 180ms ease,
    transform 220ms cubic-bezier(0.18, 0.82, 0.22, 1);
}

.freeform-prompt-toast.visible {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.freeform-prompt-toast-icon {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  color: #b26646;
  background: rgba(178, 102, 70, 0.1);
}

.freeform-prompt-toast-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.freeform-prompt-toast-message {
  font-size: 13px;
  line-height: 1.2;
  font-weight: 680;
  letter-spacing: 0;
  white-space: nowrap;
}

.freeform-prompt-toast[data-freeform-theme='dark'] {
  background: rgba(29, 25, 23, 0.95);
  color: rgba(255, 248, 240, 0.96);
  border-color: rgba(178, 102, 70, 0.32);
  box-shadow:
    0 20px 48px rgba(0, 0, 0, 0.42),
    0 2px 12px rgba(178, 102, 70, 0.16);
}

.freeform-prompt-toast[data-freeform-theme='dark'] .freeform-prompt-toast-icon {
  color: #f0c3a3;
  background: rgba(178, 102, 70, 0.16);
}

@media (max-width: 640px) {
  .freeform-full-canvas-notice {
    align-items: flex-end;
    padding: 0 12px;
  }

  .freeform-full-canvas-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .freeform-full-canvas-actions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }

  .freeform-full-canvas-btn {
    flex: 1 1 140px;
  }

  .freeform-prompt-toast {
    max-width: calc(100vw - 24px);
    min-height: 44px;
    padding: 9px 16px 9px 12px;
  }

  .freeform-prompt-toast-message {
    font-size: 12px;
    white-space: normal;
  }
}
.barIconContainer.toolbar-variant {
  position: relative;
  /* Smooth transition for border-radius and background when opening */
  transition:
    border-radius 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.barIconContainer.toolbar-variant::after {
  content: '';
  position: absolute;
  bottom: calc(5px * var(--ff-toolbar-scale, 1));
  right: calc(4px * var(--ff-toolbar-scale, 1));
  width: 0;
  height: 0;
  border-radius: 0;
  /* Triangle pointing right - dark grey for light mode */
  border-top: calc(3.5px * var(--ff-toolbar-scale, 1)) solid transparent;
  border-bottom: calc(3.5px * var(--ff-toolbar-scale, 1)) solid transparent;
  border-left: calc(5px * var(--ff-toolbar-scale, 1)) solid var(--ff-ui-text-muted);
  background: transparent;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  opacity: 0.85;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    filter 0.2s ease;
}
/* First-time glow animation for variant indicator */
@keyframes variantTriangleGlow {
  0%,
  100% {
    filter: drop-shadow(0 0 3px rgba(60, 60, 60, 0.6));
  }
  50% {
    filter: drop-shadow(0 0 8px rgba(100, 100, 100, 0.8))
      drop-shadow(0 0 12px rgba(60, 60, 60, 0.4));
  }
}
.barIconContainer.toolbar-variant.first-time-glow::after {
  animation: variantTriangleGlow 1.5s ease-in-out 3;
}
.barIconContainer.toolbar-variant.variants-open::after,
.barIconContainer.toolbar-variant:hover::after {
  opacity: 1;
  border-left-color: var(--ff-ui-text);
  transform: scale(1.2);
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.3));
}
.barIconContainer.toolbar-variant.variants-open {
  background: var(--ff-ui-surface-soft);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--ff-ui-border);
  /* Left side rounded, right side connects to menu extension */
  border-radius: 999px 0 0 999px;
  overflow: visible;
  z-index: 100001;
  box-shadow: var(--ff-ui-float-shadow);
}

.toolbar-variant-menu {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6px;
  /* Position flush with icon's right edge for seamless extension */
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  background: var(--ff-ui-surface-soft);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--ff-ui-border);
  border-left: none; /* Seamless connection */
  border-radius: 0 999px 999px 0;
  height: 100%;
  padding: 0 0 0 4px;
  /* Clip hidden when collapsed, animate max-width */
  max-width: 0;
  overflow: hidden;
  opacity: 1;
  /* NO transition by default - instant close for snappy feel */
  transition: none;
  z-index: 100002;
  pointer-events: auto;
  /* Subtle shadow for depth */
  box-shadow: var(--ff-ui-float-shadow);
  margin-left: 0;
}
.toolbar-variant-menu.visible {
  max-width: 350px;
  padding: 0 12px 0 6px;
  /* Fast open animation only when visible - close is instant */
  transition:
    max-width 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Ensure tooltips appear above variant menus for variant tools */
.barIconContainer.toolbar-variant .tooltip {
  z-index: 100003 !important;
}

/* When variant menu is open, hide tooltip by default - show only after 1s hover via JS */
.barIconContainer.toolbar-variant.variants-open .tooltip {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition:
    opacity 0.15s ease-out,
    visibility 0.15s ease-out !important;
}
/* Show main tooltip after 1s hover when menu is open (JS adds tooltip-show class) */
/* Position is set dynamically by JS to be at the right edge of the menu */
.barIconContainer.toolbar-variant.variants-open.tooltip-show .tooltip {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  transition:
    opacity 0.2s ease-in,
    visibility 0.2s ease-in !important;
}
.toolbar-variant-option {
  width: calc(38px * var(--ff-toolbar-scale, 1));
  height: calc(38px * var(--ff-toolbar-scale, 1));
  border-radius: 50%;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /* Snappy, responsive transitions */
  transition:
    transform 0.08s ease-out,
    background 0.08s ease-out,
    box-shadow 0.08s ease-out;
  position: relative;
}
.toolbar-variant-option img {
  width: calc(22px * var(--ff-toolbar-scale, 1));
  height: calc(22px * var(--ff-toolbar-scale, 1));
  pointer-events: none;
  filter: var(--ff-ui-icon-filter);
}
/* Keep variant menu icons dark even when the parent tool is active */
.barIconContainer.active .toolbar-variant-menu .toolbar-variant-option img {
  filter: var(--ff-ui-icon-filter) !important;
}
.toolbar-variant-option:hover,
.toolbar-variant-option.hover {
  background: var(--ff-ui-hover-strong);
  transform: scale(1.12);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.toolbar-variant-option.active {
  background: var(--ff-ui-active);
  box-shadow: 0 0 0 2px var(--ff-ui-border-strong);
}
.toolbar-variant-option:active {
  transform: scale(0.92);
}

/* Floating tooltip for variant options - full tooltip positioned to the right of menu */
.variant-floating-tooltip {
  padding: 0;
  background: var(--ff-ui-surface);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  color: var(--ff-ui-text);
  border-radius: 12px;
  box-shadow: var(--ff-ui-float-shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease-out;
  min-width: 140px;
  max-width: 220px;
  overflow: hidden;
}
.variant-floating-tooltip.visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease-in;
}

.toolbar-variant-menu .toolbar-menu {
  position: static;
  transform: none;
  opacity: 1 !important;
  display: flex !important;
  flex-direction: column;
  gap: 4px;
  margin-left: 10px;
  padding-left: 12px;
  border-left: 1px solid var(--ff-ui-border);
  background: transparent;
  box-shadow: none;
}
.toolbar-variant-menu .toolbar-menu .thickness-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ff-ui-text-muted);
}
.toolbar-variant-menu .toolbar-menu .thickness-slider-wrap {
  width: 150px;
}
.toolbar-variant-menu .toolbar-menu .thickness-slider {
  width: 100%;
}
.toolbar-variant-menu .toolbar-menu .thickness-value {
  font-size: 11px;
  color: var(--ff-ui-text-muted);
}

@media (max-width: 768px) {
  .toolbar-variant-menu {
    flex-wrap: nowrap;
    gap: calc(4px * var(--ff-toolbar-scale, 1));
    max-width: 280px;
    height: auto;
    min-height: 100%;
  }
  .toolbar-variant-menu.visible {
    max-width: 280px;
    padding: calc(2px * var(--ff-toolbar-scale, 1)) calc(8px * var(--ff-toolbar-scale, 1)) calc(2px * var(--ff-toolbar-scale, 1)) calc(4px * var(--ff-toolbar-scale, 1));
  }
  .toolbar-variant-menu .toolbar-menu {
    border-left: none;
    margin-left: 0;
    padding-left: 0;
    width: 100%;
  }
  .toolbar-variant-menu .toolbar-menu .thickness-slider-wrap {
    width: 100%;
  }
}
.barIcon {
  width: calc(24px * var(--ff-toolbar-scale, 1));
  height: calc(24px * var(--ff-toolbar-scale, 1));
  transition: all 0.2s ease;
  filter: var(--ff-ui-icon-filter);
  display: block;
  opacity: 0.94;
}
.barIconContainer:hover .barIcon {
  transform: scale(1.1);
  filter: var(--ff-ui-icon-filter);
}
.barIconContainer .tooltip {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  background: var(--ff-ui-surface);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  color: var(--ff-ui-text);
  text-align: left;
  padding: 0;
  border-radius: 12px;
  font-size: 11px;
  white-space: normal;
  z-index: 100003 !important;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  transition:
    opacity 0.15s ease-out,
    visibility 0.15s ease-out;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease,
    transform 0.2s ease;
  pointer-events: none;
  display: none;
  min-width: 160px;
  max-width: 220px;
  box-shadow: var(--ff-ui-float-shadow);
  font-family:
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
  overflow: hidden;
}
/* Tooltip hover is intentionally disabled; tooltips are shown only via `.tooltip-show` (JS-controlled). */
.barIconContainer.tooltip-show .tooltip,
.barIconContainer.toolbar-variant.tooltip-show .tooltip {
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
  transform: translateY(-50%) translateX(4px);
  transition:
    opacity 0.2s ease-in,
    visibility 0.2s ease-in !important;
}
.tooltip-title {
  font-weight: 600;
  font-size: 12px;
  color: var(--ff-ui-text);
  padding: 12px 14px 8px 14px;
  border-bottom: 1px solid var(--ff-ui-border);
  letter-spacing: 0.2px;
  background: linear-gradient(to bottom, var(--ff-ui-hover), transparent);
}
.tooltip-desc {
  font-weight: 400;
  font-size: 11px;
  color: var(--ff-ui-text-muted);
  padding: 8px 14px;
  line-height: 1.5;
  white-space: normal;
  max-width: 200px;
}
.tooltip-shortcut {
  padding: 10px 14px 12px 14px;
  border-top: 1px solid var(--ff-ui-border);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: var(--ff-ui-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
  background: linear-gradient(to top, var(--ff-ui-hover), transparent);
}
.tooltip-shortcut kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 10px;
  background: var(--ff-ui-kbd-bg);
  border: 1px solid var(--ff-ui-kbd-border);
  border-radius: 12px;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--ff-ui-text);
  box-shadow: var(--ff-ui-kbd-shadow);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.15s ease;
}
.tooltip-shortcut kbd:hover {
  background: linear-gradient(to bottom, var(--ff-ui-hover-strong), var(--ff-ui-hover));
  transform: translateY(-1px);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.15);
}
#color-picker-container {
  position: relative;
}
#color-picker {
  opacity: 0;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  pointer-events: none;
}
#color-picker::-webkit-color-swatch-wrapper {
  padding: 0;
}
#color-picker::-webkit-color-swatch {
  border: 0;
}
#color-swatch {
  width: calc(24px * var(--ff-toolbar-scale, 1));
  height: calc(24px * var(--ff-toolbar-scale, 1));
  border-radius: 50%;
  border: 2px solid #888;
}
.crop-overlay {
  position: absolute;
  inset: 0;
  z-index: 15;
  pointer-events: none;
  /* CRITICAL FIX: Ensure crop overlay doesn't extend beyond canvas bounds */
  overflow: hidden;
  /* CRITICAL FIX: Ensure crop overlay never blocks iconbar */
  max-width: 100%;
  max-height: 100%;
}

/* Pre-drag dim: full-canvas grey veil shown the moment the crop tool
   is activated and BEFORE the user has drawn a region. Hidden again
   as soon as the drag starts (the 3D mesh-based 4-quad overlay takes
   over) or the tool is dropped without committing a region.
   pointer-events stays none so the canvas keeps receiving the drag
   pointerdown that creates the region. */
.crop-precrop-dim {
  position: absolute;
  inset: 0;
  z-index: 14; /* one below .crop-overlay so the rect can paint over it */
  pointer-events: none;
  background: rgba(0, 0, 0, 0.42);
  opacity: 0;
  transition: opacity 0.16s ease;
  overflow: hidden;
  max-width: 100%;
  max-height: 100%;
}
.crop-precrop-dim.visible {
  opacity: 1;
}
/* Crop rectangle - FULLY rendered by Three.js for precision */
.crop-rect {
  position: absolute;
  /* NO box-shadow - darkening is now rendered by Three.js overlay planes */
  box-shadow: none !important;
  pointer-events: auto; /* Interactive - DOM still handles drag logic */
  cursor: grab; /* Default to grab cursor - JS will override for handles */
  /* Make DOM rect invisible - just for hit detection */
  background: transparent !important;
  border: none !important;
}
/* DOM handles are HIDDEN - Three.js handles are used instead */
.crop-rect .handle {
  display: none !important; /* Hidden - Three.js handles take over */
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 0;
  border: 1px solid #555;
  background: #2b2b2b;
  box-shadow: none;
  pointer-events: none;
}
.crop-rect .handle.tl {
  left: -6px;
  top: -6px;
  cursor: nwse-resize;
}
.crop-rect .handle.tr {
  right: -6px;
  top: -6px;
  cursor: nesw-resize;
}
.crop-rect .handle.bl {
  left: -6px;
  bottom: -6px;
  cursor: nesw-resize;
}
.crop-rect .handle.br {
  right: -6px;
  bottom: -6px;
  cursor: nwse-resize;
}
.crop-rect .guides::after {
  left: 0;
  right: 0;
  top: 33.33%;
  bottom: 33.33%;
  border: none;
  border-top: 1px dashed rgba(255, 255, 255, 0.35);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.35);
}

/* Inactive (handled by Three.js opacity changes) */
.crop-rect.faded {
  border-color: transparent;
  box-shadow: none !important;
  pointer-events: none !important;
  cursor: default !important;
}
.crop-rect.faded .handle {
  display: none !important;
}
.crop-rect .handle.hidden {
  display: none !important;
}

/* Enhanced Color Wheel Styles - v2 with higher z-index */
.formas-color-wheel-v2 {
  position: absolute !important;
  z-index: 99999 !important;
  display: none !important;
  opacity: 0 !important;
  transform: scale(0.95) translateY(-4px) !important;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  pointer-events: none !important;
  isolation: isolate !important;
}

.formas-color-wheel-v2.formas-wheel-visible {
  display: block !important;
  opacity: 1 !important;
  transform: scale(1) translateY(0) !important;
  pointer-events: auto !important;
}

.formas-wheel-container-v2 {
  background: rgba(20, 24, 33, 0.45) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 2px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 50% !important;
  padding: 8px !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5) !important;
  width: 200px !important;
  height: 200px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 99999 !important;
}

.formas-wheel-svg-v2 {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  overflow: visible !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 99999 !important;
}

.formas-color-segment-v2 {
  cursor: pointer !important;
  transition: all 0.15s ease-out !important;
  stroke-linejoin: round !important;
  stroke-linecap: round !important;
  pointer-events: all !important;
  fill-opacity: 1 !important;
  stroke-opacity: 1 !important;
}

/* Enhanced Color Segment States - v2 */
.formas-color-segment-v2:active {
  transform: scale(0.98) !important;
  filter: brightness(1.25) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5)) !important;
}

.formas-segment-compressed-v2 {
  filter: brightness(0.8) opacity(0.7) !important;
  transform: scale(0.95) !important;
}

.formas-segment-expanded-v2 {
  filter: brightness(1.2) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4)) !important;
  transform: scale(1.05) !important;
}

/* iPad and touch optimizations */
@media (max-width: 1024px) {
  .color-wheel-container {
    width: 180px !important;
    height: 180px !important;
    padding: 6px !important;
  }

  .color-segment {
    stroke-width: 1 !important;
  }

  .color-segment:hover,
  .color-segment.expanded {
    transform: scale(1.08) !important;
  }

  .color-segment.compressed {
    transform: scale(0.92) !important;
  }

  /* Enhanced toolbar for touch - match global 20% scale */
  #iconBar {
    padding: calc(8px * var(--ff-toolbar-scale, 1)) !important;
    gap: calc(8px * var(--ff-toolbar-scale, 1)) !important;
  }

  .barIconContainer {
    width: calc(40px * var(--ff-toolbar-scale, 1)) !important;
    height: calc(40px * var(--ff-toolbar-scale, 1)) !important;
    border-radius: 50%;
  }

  .barIcon {
    width: calc(24px * var(--ff-toolbar-scale, 1)) !important;
    height: calc(24px * var(--ff-toolbar-scale, 1)) !important;
  }

  /* Hide tooltips on iPad/tablet - they block too much of the screen */
  .tooltip {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .barIconContainer.tooltip-show .tooltip,
  .barIconContainer:hover .tooltip {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Enhanced sliders for touch - 20% smaller on mobile */
  .toolbar-menu {
    min-width: 176px !important; /* 20% smaller width */
    padding: 13px !important; /* 20% smaller padding */
    border-radius: 13px !important; /* 20% smaller border radius */
  }

  /* Variant-menu-embedded sliders only: snug to the variant menu's left edge.
     Standalone popovers (#brushSlidersContainer, #lineThicknessSlider, etc.)
     are positioned by JS via inline `left/top` and must not be overridden. */
  .toolbar-variant-menu .toolbar-menu {
    margin-left: -6px !important;
    left: calc(env(safe-area-inset-left, 0px)) !important;
  }

  .thickness-slider-wrap {
    gap: 10px !important; /* 20% smaller gap between elements */
    margin: 6px 0 !important; /* 20% smaller margin */
  }

  .thickness-slider {
    height: 6px !important; /* 20% smaller track height */
    border-radius: 3px !important; /* 20% smaller border radius */
    flex: 1;
    min-width: 112px !important; /* 20% smaller minimum width */
  }

  /* Thumb styling handled by ff-slider.css */

  .thickness-label {
    font-size: 11px !important; /* 20% smaller text */
    margin-bottom: 8px !important; /* 20% smaller margin */
  }

  .thickness-value {
    font-size: 11px !important; /* 20% smaller text */
    min-width: 26px !important; /* 20% smaller minimum width */
    padding: 3px 6px !important; /* 20% smaller padding */
  }
}

/* Mobile optimizations - 20% smaller */
@media (max-width: 768px) {
  .color-wheel-container {
    width: 128px !important; /* 20% smaller */
    height: 128px !important; /* 20% smaller */
    padding: 3px !important; /* 20% smaller */
  }

  .color-segment {
    stroke-width: 1.2px !important; /* 20% smaller */
  }

  /* Mobile: shrink expanded toolbar so icons fit vertically on phones. */
  #iconBar {
    --ff-toolbar-scale: 0.8;
  }
  #iconBar.ff-toolbar-expanded {
    --ff-toolbar-scale: 0.8;
  }

  /* iPhone safe area support for icon bar positioning */
  #iconBar:not(.dragged):not(.dragging) {
    /* Account for iPhone navigation bar and safe areas */
    left: calc(16px + env(safe-area-inset-left, 0px)) !important;
    top: calc(50% + env(safe-area-inset-top, 0px) / 2) !important;
    /* Adjust for bottom safe area to keep centered */
    transform: translateY(
      calc(-50% - var(--ff-toolbar-offset, 0px) - env(safe-area-inset-bottom, 0px) / 4)
    ) !important;
  }

  #iconBar .barIconContainer:not([data-essential='true']),
  #iconBar .iconbar-separator {
    max-height: 60px;
    opacity: 1;
    transform: scale(1);
    transition:
      max-height 0.3s ease-in-out,
      opacity 0.3s ease-in-out,
      transform 0.3s ease-in-out,
      margin 0.3s ease-in-out;
    overflow: hidden;
  }

  #iconBar.ff-toolbar-collapsed .barIconContainer:not([data-essential='true']),
  #iconBar.ff-toolbar-collapsed .iconbar-separator {
    max-height: 0;
    opacity: 0;
    transform: scale(0.9);
    margin: 0;
    pointer-events: none;
  }

  #iconBar.ff-toolbar-collapsed .toolbar-expand-toggle,
  #iconBar.ff-toolbar-expanded .toolbar-expand-toggle {
    display: flex !important;
  }

  /* Hide bottom drag handle when collapsed — removes blank gap */
  #iconBar.ff-toolbar-collapsed .ff-drag-handle-bottom {
    display: none;
  }

  #iconBar.ff-toolbar-collapsed .toolbar-expand-toggle {
    margin-top: 0;
    padding: calc(2px * var(--ff-toolbar-scale, 1)) 0;
  }
}

/* Tablet touch compact toolbar behavior (iPad incl. landscape widths) */
@media (max-width: 1366px) and (pointer: coarse) {
  #iconBar .barIconContainer:not([data-essential='true']),
  #iconBar .iconbar-separator {
    max-height: 60px;
    opacity: 1;
    transform: scale(1);
    transition:
      max-height 0.35s cubic-bezier(0.34, 1.3, 0.64, 1),
      opacity 0.25s ease-out,
      transform 0.3s cubic-bezier(0.34, 1.3, 0.64, 1),
      margin 0.3s cubic-bezier(0.34, 1.3, 0.64, 1),
      padding 0.3s cubic-bezier(0.34, 1.3, 0.64, 1);
    overflow: hidden;
  }

  #iconBar.ff-toolbar-collapsed .barIconContainer:not([data-essential='true']),
  #iconBar.ff-toolbar-collapsed .iconbar-separator {
    max-height: 0;
    opacity: 0;
    transform: scale(0.8);
    margin: 0;
    padding: 0;
    pointer-events: none;
  }

  #iconBar.ff-toolbar-collapsed .toolbar-expand-toggle,
  #iconBar.ff-toolbar-expanded .toolbar-expand-toggle {
    display: flex !important;
  }

  /* Hide bottom drag handle when collapsed — removes blank gap below last icon */
  #iconBar.ff-toolbar-collapsed .ff-drag-handle-bottom {
    display: none;
  }

  /* Tighten expand toggle spacing when collapsed */
  #iconBar.ff-toolbar-collapsed .toolbar-expand-toggle {
    margin-top: 0;
    padding: calc(2px * var(--ff-toolbar-scale, 1)) 0;
  }
}

/* Additional iPhone landscape support */
@media (max-width: 768px) and (orientation: landscape) {
  #iconBar:not(.dragged):not(.dragging) {
    /* In landscape, safe areas are more prominent on sides */
    left: calc(20px + env(safe-area-inset-left, 0px)) !important;
    /* Less top adjustment needed in landscape */
    top: calc(50% + env(safe-area-inset-top, 0px) / 4) !important;
    transform: translateY(
      calc(-50% - var(--ff-toolbar-offset, 0px) - env(safe-area-inset-bottom, 0px) / 6)
    ) !important;
  }
}

/* Small-phone iconBar shrink — every dimension derives from
   --ff-toolbar-scale, so overriding the variable cascades to icons,
   padding, gap, radius, drag handles. Collapsed also shrinks here
   (0.5) since narrow phones need the essential bar to take less room. */
@media (max-width: 480px) {
  #iconBar,
  #iconBar.ff-toolbar-expanded,
  #iconBar.ff-toolbar-collapsed {
    --ff-toolbar-scale: 0.8;
  }
}

@media (max-width: 380px) {
  #iconBar,
  #iconBar.ff-toolbar-expanded,
  #iconBar.ff-toolbar-collapsed {
    --ff-toolbar-scale: 0.8;
  }
}

/* Slim the auto-collapsed iconBar on small phones.
   Two problems to fix vs. the default ≤768px collapse rule:
   1. Non-essentials use max-height:0 — they're invisible but still occupy a flex
      slot, so each one contributes a `gap` of empty space between visible icons.
      At ≤480px we must `display: none` them to also remove their flex slot.
   2. Some `data-essential` tools (line, shape, people, thinkingText) aren't
      first-touch on a phone — also hide them when collapsed; they remain
      reachable via the expand toggle.
   Tablet/desktop unaffected. */
@media (max-width: 480px) {
  #iconBar.ff-toolbar-collapsed .barIconContainer:not([data-essential='true']),
  #iconBar.ff-toolbar-collapsed .iconbar-separator,
  #iconBar.ff-toolbar-collapsed .barIconContainer[data-tool='line'],
  #iconBar.ff-toolbar-collapsed .barIconContainer[data-tool='rectangle'],
  #iconBar.ff-toolbar-collapsed .barIconContainer[data-tool='people'],
  #iconBar.ff-toolbar-collapsed .barIconContainer[data-tool='thinkingText'] {
    display: none !important;
  }
}

/* Combined Brush Sliders Styles */
.toolbar-menu {
  background: rgba(20, 24, 33, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  padding: 10px 12px;
  margin-bottom: 8px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition:
    opacity 0.15s ease,
    visibility 0.15s ease;
  position: absolute;
  opacity: 0;
  visibility: hidden;
  transform: none;
  pointer-events: none;
  z-index: 10000; /* increased to sit above other UI */
  min-width: 180px;
}

/* ==========================================================================
   Freeform thickness popovers - match right-click context menu visual system
   (Keep .toolbar-menu behavior/positioning; only replace the look)
   ========================================================================== */

#brushSlidersContainer.ff-thickness-menu,
#lineThicknessSlider.ff-thickness-menu,
#eraserSlidersContainer.ff-thickness-menu {
  background: rgba(20, 24, 33, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
  padding: 8px 10px;
  min-width: 200px;
}

#brushSlidersContainer.ff-thickness-menu:hover,
#lineThicknessSlider.ff-thickness-menu:hover,
#eraserSlidersContainer.ff-thickness-menu:hover {
  background: rgba(20, 24, 33, 0.45);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

/* Eraser Slider Specific Styling */
#eraserSlidersContainer.ff-eraser-menu {
  min-width: 240px;
}

#eraserSlidersContainer.ff-eraser-menu .ff-eraser-icon {
  flex-shrink: 0;
  margin-right: 2px;
}

/* White icon circle for visibility */
#eraserSlidersContainer.ff-eraser-menu .ff-eraser-icon circle {
  stroke: rgba(255, 255, 255, 0.9);
}

/* White label text for visibility */
#eraserSlidersContainer.ff-eraser-menu .ff-slider-label--eraser {
  color: rgba(255, 255, 255, 0.9);
}

/* Thumb styling handled by ff-slider.css */

#eraserSlidersContainer.ff-eraser-menu .ff-slider-value--eraser {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.92);
}

.ff-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.ff-popover-title {
  color: rgba(255, 255, 255, 0.9);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
}

.ff-popover-close {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.92);
  width: 28px;
  height: 28px;
  border-radius: 8px;
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.15s ease,
    transform 0.15s ease,
    border-color 0.15s ease;
}

.ff-popover-close:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.ff-popover-close:active {
  transform: translateY(0);
}

.ff-slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.ff-slider-row.ff-slider-row--pill {
  width: 100%;
}

.ff-slider-label {
  width: auto;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 650;
  color: rgba(255, 255, 255, 0.9);
  text-transform: none;
  letter-spacing: 0.2px;
  margin: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.ff-slider-control {
  flex: 1;
  min-width: 100px;
}

#brushSlidersContainer.ff-thickness-menu .thickness-slider,
#lineThicknessSlider.ff-thickness-menu .thickness-slider,
#eraserSlidersContainer.ff-thickness-menu .thickness-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.25);
  outline: none;
  cursor: pointer;
}

#brushSlidersContainer.ff-thickness-menu .thickness-slider:hover,
#lineThicknessSlider.ff-thickness-menu .thickness-slider:hover,
#eraserSlidersContainer.ff-thickness-menu .thickness-slider:hover {
  background: rgba(255, 255, 255, 0.35);
}

/* Thumb styling handled by ff-slider.css */

#brushSlidersContainer.ff-thickness-menu .thickness-value,
#lineThicknessSlider.ff-thickness-menu .thickness-value,
#eraserSlidersContainer.ff-thickness-menu .thickness-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Inline polyline actions — compact chips, hidden by default via JS when not relevant */
.ff-line-actions {
  display: none;
  align-items: center;
  gap: 6px;
  margin-left: 2px;
}

/* High-specificity styling so these never fall back to default browser buttons */
#lineThicknessSlider.ff-thickness-menu .ff-line-actions .ff-line-action-btn {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(241, 245, 249, 0.92);
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease,
    opacity 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

#lineThicknessSlider.ff-thickness-menu .ff-line-actions .ff-line-action-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.24);
  transform: translateY(-1px);
}

#lineThicknessSlider.ff-thickness-menu .ff-line-actions .ff-line-action-btn:active:not(:disabled) {
  transform: translateY(0);
}

#lineThicknessSlider.ff-thickness-menu .ff-line-actions .ff-line-action-btn.inactive {
  opacity: 0.55;
}

#lineThicknessSlider.ff-thickness-menu .ff-line-actions .ff-line-action-btn:disabled {
  opacity: 0.35;
  cursor: default;
  transform: none;
}

.ff-line-action-ico {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.92;
  flex: 0 0 auto;
}

.ff-line-action-ico svg {
  display: block;
}

.ff-line-action-text {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.01em;
}

.ff-popover-close.ff-popover-close--tiny {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  font-size: 12px;
}

.ff-popover-close.ff-popover-close--tiny svg {
  display: block;
}

/* Specific styling for combined brush sliders container */
#brushSlidersContainer {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 0;
  pointer-events: auto !important; /* Ensure sliders container is interactive */
}

#brushSlidersContainer .thickness-label {
  margin: 0 0 4px 0;
  font-size: 10px;
}

#brushSlidersContainer .thickness-slider-wrap {
  margin-bottom: 4px;
}

/* Ensure sliders are always interactive */
#brushSlidersContainer input[type='range'],
#brushSlidersContainer .thickness-slider {
  pointer-events: auto !important;
  cursor: pointer !important;
}

.toolbar-menu.visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

/* Cursor-positioned panels appear instantly without transform animation */
.toolbar-menu.cursor-positioned {
  transition:
    opacity 0.1s ease,
    visibility 0.1s ease;
  transform: none !important;
}

.toolbar-menu:hover {
  background: rgba(20, 24, 33, 0.45);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.thickness-label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 8px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.thickness-slider-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.thickness-slider {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}

/* Thumb styling handled by ff-slider.css */

.thickness-slider::-webkit-slider-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  height: 4px;
}

.thickness-slider::-moz-range-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  height: 4px;
  border: none;
}

.thickness-value {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  min-width: 24px;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  background: rgba(255, 255, 255, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Brush Preview Styles */
#brushPreview {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none;
}

#brushPreview.visible {
  opacity: 1;
  visibility: visible;
}

.brush-preview-window {
  background: rgba(20, 24, 33, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.brush-preview-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.brush-preview-text {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Board trash confirmation */
.delete-confirmation-pill {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(15, 18, 24, 0.28);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity 0.14s ease;
}

.delete-confirmation-pill.active {
  opacity: 1;
}

.confirm-pill-container {
  width: min(340px, calc(100vw - 32px));
  background: var(--ff-board-surface, rgba(255, 255, 255, 0.98));
  border: 1px solid var(--ff-board-border, rgba(0, 0, 0, 0.1));
  border-radius: 12px;
  padding: 14px;
  box-shadow: var(--ff-board-shadow-soft, 0 12px 32px rgba(0, 0, 0, 0.15));
  display: grid;
  gap: 14px;
  transform: translateY(4px) scale(0.985);
  transition: transform 0.14s ease;
  animation: none;
}

.delete-confirmation-pill.active .confirm-pill-container {
  transform: none;
}

.confirm-pill-head {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.confirm-pill-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: rgba(239, 68, 68, 0.09);
  color: var(--ff-board-danger, #ef4444);
  border: 1px solid rgba(239, 68, 68, 0.16);
}

.confirm-pill-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.confirm-pill-title {
  color: var(--ff-board-text, #222);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.confirm-pill-subtitle {
  color: var(--ff-board-text-muted, rgba(0, 0, 0, 0.6));
  font-size: 11px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.confirm-pill-caption {
  color: var(--ff-board-text-softer, rgba(0, 0, 0, 0.4));
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
}

.confirm-pill-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.confirm-pill-btn {
  min-height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
  border: 1px solid transparent;
  outline: none;
  white-space: nowrap;
}

.confirm-no {
  background: var(--ff-board-surface-soft, rgba(0, 0, 0, 0.03));
  color: var(--ff-board-text-muted, rgba(0, 0, 0, 0.6));
  border-color: var(--ff-board-border-soft, rgba(0, 0, 0, 0.08));
}

.confirm-no:hover {
  background: var(--ff-board-hover-strong, rgba(0, 0, 0, 0.1));
  color: var(--ff-board-text, #222);
}

.confirm-yes {
  background: var(--ff-board-danger, #ef4444);
  color: #fff;
  border-color: var(--ff-board-danger, #ef4444);
}

.confirm-yes:hover {
  background: var(--ff-board-danger-hover, #dc2626);
  border-color: var(--ff-board-danger-hover, #dc2626);
}

.confirm-pill-btn:active {
  transform: none;
}

/* ============================================================================
   PERFORMANCE OPTIMIZED STYLES - Moved from inline JS (v1.6.0)
   ============================================================================ */

/* Loading spinner animation */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes glowPulse {
  0%,
  100% {
    box-shadow:
      0 0 8px rgba(100, 100, 255, 0.3),
      0 0 16px rgba(100, 100, 255, 0.15),
      0 6px 20px rgba(0, 0, 0, 0.4);
  }
  50% {
    box-shadow:
      0 0 12px rgba(100, 100, 255, 0.5),
      0 0 24px rgba(100, 100, 255, 0.25),
      0 6px 20px rgba(0, 0, 0, 0.4);
  }
}

/* Toolbar menu line slider specific styles */
.toolbar-menu.line-slider-floating {
  min-width: 200px !important;
}

.toolbar-menu.touch-pointer {
  min-width: 210px !important;
}

.toolbar-line-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  margin-top: 0 !important;
  width: auto !important;
}

.toolbar-line-actions button {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  height: 22px !important;
  padding: 0 10px !important;
  font-size: 11px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(241, 245, 249, 0.92) !important;
  font-weight: 600 !important;
  text-align: center !important;
  letter-spacing: 0.2px !important;
  cursor: pointer !important;
  transition:
    background 0.15s ease,
    transform 0.15s ease,
    border-color 0.15s ease !important;
}

.toolbar-line-actions button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.24) !important;
  transform: translateY(-1px) !important;
}

.toolbar-line-actions button:disabled {
  opacity: 0.4 !important;
  cursor: default !important;
  transform: none !important;
}

.toolbar-line-actions button.inactive {
  opacity: 0.55 !important;
}

/* Brush thickness slider container styles */
#brushThicknessSlider {
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 8px !important;
  min-width: 180px !important;
}

/* Touch device enhancements (iPad, iPhone, touch devices) */
@media (pointer: coarse) {
  .thickness-slider {
    height: 8px !important;
  }
  /* Thumb styling handled by ff-slider.css */

  /* Hide ALL tooltips on touch devices - they block interaction */
  .tooltip,
  .toolbar-variant-option::after {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .barIconContainer.tooltip-show .tooltip,
  .barIconContainer:hover .tooltip,
  .barIconContainer.toolbar-variant.tooltip-show .tooltip,
  .barIconContainer.toolbar-variant:hover .tooltip,
  .toolbar-variant-option:hover::after {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Touch-first target sizes — small floor so scale can actually shrink the bar. */
  #iconBar .barIconContainer {
    width: calc(40px * var(--ff-toolbar-scale, 1)) !important;
    height: calc(40px * var(--ff-toolbar-scale, 1)) !important;
  }

  #iconBar .barIcon {
    width: calc(24px * var(--ff-toolbar-scale, 1)) !important;
    height: calc(24px * var(--ff-toolbar-scale, 1)) !important;
  }

  .ff-top-pill,
  #canvasTitlePill {
    touch-action: manipulation !important;
  }

  /* #canvasMenuBtn is the left board-menu button (not a top-bar pill) — keep its touch floor.
     The top-bar pills/round buttons stay at --ff-pill-h (36) on touch too — no bump. */
  #canvasMenuBtn {
    min-width: 38px !important;
    min-height: 38px !important;
  }

  body.workspace-mode[data-active-module='freeform'].ff-freeform-header-collapsed
    #canvasSidebarToggleBtn {
    width: var(--ff-pill-h) !important;
    height: var(--ff-pill-h) !important;
    min-width: var(--ff-pill-h) !important;
    min-height: var(--ff-pill-h) !important;
    margin-right: 10px !important;
  }

  #canvasPills {
    gap: 6px !important;
    top: calc(12px + env(safe-area-inset-top, 0px)) !important;
    right: calc(12px + env(safe-area-inset-right, 0px)) !important;
  }

  #canvasPillsLeft {
    top: calc(12px + env(safe-area-inset-top, 0px)) !important;
    left: calc(12px + env(safe-area-inset-left, 0px)) !important;
  }
}

/* Hit-target expansion for touch-only devices (iPad, Android tablets).
   Complements the `@media (pointer: coarse)` block above, which already
   sizes `.barIconContainer` and the canvas pills. These rules add the
   controls that block misses: variant sub-tool options and thickness
   slider track height (needed so the 44px transparent-border thumb from
   ff-slider.css centers correctly on a 6px track). */
@media (hover: none) and (pointer: coarse) {
  /* No 44px floor on variant options — they live inside a menu whose height
     equals the parent button (which now scales below 44px on mobile). A
     min-height: 44px would push the option past the menu's overflow clip
     and crop the icon. Let scale drive size; the parent already clamps. */

  .thickness-slider {
    height: 6px;
  }
}

/* Additional check: devices that don't support hover (iOS, touch-only) */
@media (hover: none) {
  .tooltip,
  .toolbar-variant-option::after {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .barIconContainer.tooltip-show .tooltip,
  .barIconContainer:hover .tooltip,
  .barIconContainer.toolbar-variant.tooltip-show .tooltip,
  .barIconContainer.toolbar-variant:hover .tooltip,
  .toolbar-variant-option:hover::after {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* Zoom indicator hover state */
#zoomIndicator:hover {
  background: rgba(20, 20, 20, 0.9) !important;
  transform: scale(1.05) !important;
}

/* Lock indicator hover state */
#lockIndicator:hover {
  transform: scale(1.05) !important;
}

#closeZoomSidebar:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

#openInViewer:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3) !important;
}

#openInViewer:active {
  transform: translateY(0) !important;
}

/* Brush preview window additional styles */
.brush-preview-window {
  background: rgba(0, 0, 0, 0.3) !important;
}

.brush-preview-icon {
  display: block !important;
}

.brush-preview-text {
  font-family:
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Helvetica,
    Arial !important;
}

/* Hide old top-right controls */
.canvas-controls {
  display: none !important;
}

/* ── Light theme (explicit reset so dark→light never shows stale dark inline styles) ── */

.module-root[data-freeform-theme='light'] #canvasHeaderToggleBtn,
.module-root[data-freeform-theme='light'] #closeStudioBtn,
.module-root[data-freeform-theme='light'] #qualityPill,
.module-root[data-freeform-theme='light'] #snapOrthoUnitsPill,
.module-root[data-freeform-theme='light'] #canvasTitlePill,
.module-root[data-freeform-theme='light'] #canvasMenuBtn,
.module-root[data-freeform-theme='light'] #autosavePill,
.module-root[data-freeform-theme='light'] #ffZoomStepperPill {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
  color: #222 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.module-root[data-freeform-theme='light'] #ffZoomStepperOut,
.module-root[data-freeform-theme='light'] #ffZoomStepperIn {
  color: rgba(34, 34, 34, 0.6) !important;
}
.module-root[data-freeform-theme='light'] #ffZoomStepperOut:hover,
.module-root[data-freeform-theme='light'] #ffZoomStepperIn:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  color: #111 !important;
}
.module-root[data-freeform-theme='light'] #ffZoomStepperLabel {
  color: #222 !important;
}

.module-root[data-freeform-theme='light'] #snapOrthoUnitsPill {
  background: rgba(255, 255, 255, 0.5) !important;
}

.module-root[data-freeform-theme='light'] #autosavePill {
  background: transparent !important;
  box-shadow: none !important;
}

.module-root[data-freeform-theme='light'] #canvasMenuBtn {
  background: transparent !important;
  box-shadow: none !important;
}

.module-root[data-freeform-theme='light'] #closeStudioBtn svg,
.module-root[data-freeform-theme='light'] #qualityPill svg {
  stroke: #222 !important;
}

.module-root[data-freeform-theme='light'] #qualityPill .quality-label {
  color: rgba(0, 0, 0, 0.6) !important;
}

.module-root[data-freeform-theme='light'] #qualityPill #brainIcon,
.module-root[data-freeform-theme='light'] .dropdown-brain-icon {
  filter: brightness(0) !important;
}

.module-root[data-freeform-theme='light'] #snapOrthoUnitsPill .snap-ortho-section {
  color: rgba(34, 34, 34, 0.38) !important;
}

.module-root[data-freeform-theme='light'] #snapOrthoUnitsPill .snap-ortho-divider {
  background: rgba(0, 0, 0, 0.1) !important;
}

.module-root[data-freeform-theme='light'] #canvasMenuBtn svg {
  stroke: #222 !important;
}

.module-root[data-freeform-theme='light'] #qualityDropdown,
.module-root[data-freeform-theme='light'] #managerDropdown {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.2) !important;
}

/* Quality dropdown rows — clickable by default, inert when locked for free users. */
#qualityDropdown .quality-option {
  cursor: pointer;
}
#qualityDropdown .quality-option[data-locked='1'] {
  cursor: default;
}

.module-root[data-freeform-theme='light'] #qualityDropdown .quality-option,
.module-root[data-freeform-theme='light'] #managerDropdown .manager-option {
  color: #222 !important;
}

.module-root[data-freeform-theme='light'] #qualityDropdown #draftLabel,
.module-root[data-freeform-theme='light'] #qualityDropdown #goodLabel,
.module-root[data-freeform-theme='light'] #qualityDropdown #highLabel,
.module-root[data-freeform-theme='light'] #qualityDropdown #maxLabel {
  color: #222 !important;
}

.module-root[data-freeform-theme='light'] #qualityDropdown #draftLabel span,
.module-root[data-freeform-theme='light'] #qualityDropdown #goodLabel span,
.module-root[data-freeform-theme='light'] #qualityDropdown #highLabel span,
.module-root[data-freeform-theme='light'] #qualityDropdown #maxLabel span {
  color: rgba(0, 0, 0, 0.4) !important;
}

.module-root[data-freeform-theme='light'] #qualityDropdown #draftLabel + div,
.module-root[data-freeform-theme='light'] #qualityDropdown #goodDescription,
.module-root[data-freeform-theme='light'] #qualityDropdown #highDescription,
.module-root[data-freeform-theme='light'] #qualityDropdown #maxDescription,
.module-root[data-freeform-theme='light'] #qualityDropdown #flux2Description,
.module-root[data-freeform-theme='light'] #qualityDropdown #images2Description {
  color: rgba(0, 0, 0, 0.5) !important;
}

.module-root[data-freeform-theme='light'] #qualityDropdown .quality-credit {
  color: rgba(0, 0, 0, 0.6) !important;
}

.module-root[data-freeform-theme='light'] #qualityDropdown .quality-option.is-selected,
.module-root[data-freeform-theme='light'] #qualityDropdown .quality-option.is-selected > div,
.module-root[data-freeform-theme='light'] #qualityDropdown .quality-option.is-selected #draftLabel,
.module-root[data-freeform-theme='light'] #qualityDropdown .quality-option.is-selected #goodLabel,
.module-root[data-freeform-theme='light'] #qualityDropdown .quality-option.is-selected #highLabel,
.module-root[data-freeform-theme='light'] #qualityDropdown .quality-option.is-selected #maxLabel {
  color: #ffffff !important;
}

.module-root[data-freeform-theme='light']
  #qualityDropdown
  .quality-option.is-selected
  #draftLabel
  span,
.module-root[data-freeform-theme='light']
  #qualityDropdown
  .quality-option.is-selected
  #goodLabel
  span,
.module-root[data-freeform-theme='light']
  #qualityDropdown
  .quality-option.is-selected
  #highLabel
  span,
.module-root[data-freeform-theme='light']
  #qualityDropdown
  .quality-option.is-selected
  #maxLabel
  span {
  color: rgba(255, 255, 255, 0.74) !important;
}

.module-root[data-freeform-theme='light']
  #qualityDropdown
  .quality-option.is-selected
  #draftDescription,
.module-root[data-freeform-theme='light']
  #qualityDropdown
  .quality-option.is-selected
  #goodDescription,
.module-root[data-freeform-theme='light']
  #qualityDropdown
  .quality-option.is-selected
  #highDescription,
.module-root[data-freeform-theme='light']
  #qualityDropdown
  .quality-option.is-selected
  #maxDescription,
.module-root[data-freeform-theme='light']
  #qualityDropdown
  .quality-option.is-selected
  #flux2Description,
.module-root[data-freeform-theme='light']
  #qualityDropdown
  .quality-option.is-selected
  .quality-credit {
  color: rgba(255, 255, 255, 0.84) !important;
}

.module-root[data-freeform-theme='light'] #qualityDropdown .quality-option.is-selected img {
  filter: brightness(0) invert(1) !important;
  opacity: 0.9 !important;
}

.module-root[data-freeform-theme='light'] #qualityDropdown #flux2Separator {
  background: linear-gradient(90deg, transparent, rgba(100, 100, 100, 0.3), transparent) !important;
}

.module-root[data-freeform-theme='light'] #qualityDropdown #flux2ToggleRow {
  background: rgba(60, 60, 60, 0.1) !important;
  border-color: rgba(100, 100, 100, 0.2) !important;
}

.module-root[data-freeform-theme='light'] #qualityDropdown #flux2ToggleRow > div > div:first-child {
  color: #222 !important;
}

.module-root[data-freeform-theme='light']
  #qualityDropdown
  #flux2ToggleRow
  > div
  > div:nth-child(2)
  > div:first-child,
.module-root[data-freeform-theme='light']
  #qualityDropdown
  #images2ToggleRow
  > div
  > div:nth-child(2)
  > div:first-child {
  color: #222 !important;
}

.module-root[data-freeform-theme='light'] #qualityDropdown #flux2ProBadge,
.module-root[data-freeform-theme='light'] #qualityDropdown #images2ProBadge {
  color: rgba(80, 80, 80, 1) !important;
  background: rgba(100, 100, 100, 0.15) !important;
}

.module-root[data-freeform-theme='light'] #qualityDropdown #images2ToggleRow {
  background: rgba(60, 60, 60, 0.1) !important;
  border-color: rgba(100, 100, 100, 0.2) !important;
}

.module-root[data-freeform-theme='light']
  #qualityDropdown
  #images2ToggleRow
  > div
  > div:first-child {
  color: #222 !important;
}

.module-root[data-freeform-theme='light']
  #managerDropdown
  .manager-option
  > div
  > div
  > div:first-child {
  color: #222 !important;
}

.module-root[data-freeform-theme='light']
  #managerDropdown
  .manager-option
  > div
  > div
  > div:last-child,
.module-root[data-freeform-theme='light'] #managerDropdown .manager-option span {
  color: rgba(0, 0, 0, 0.5) !important;
}

.module-root[data-freeform-theme='light'] #managerDropdown .manager-option svg {
  stroke: rgba(0, 0, 0, 0.7) !important;
}

.module-root[data-freeform-theme='light'] #managerDropdown > div[style*='height:1px'] {
  background: rgba(0, 0, 0, 0.08) !important;
}

.module-root[data-freeform-theme='light'] #iconBar {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
}

.module-root[data-freeform-theme='light'] .barIcon {
  filter: brightness(0) !important;
}

.module-root[data-freeform-theme='light'] .barIconContainer.active {
  background: rgba(0, 0, 0, 0.08) !important;
}

.module-root[data-freeform-theme='light'] .barIconContainer.active .barIcon {
  filter: brightness(0) !important;
}

/* Dark theme integration (triggered by background mode = dark) */
.module-root[data-freeform-theme='dark'] #iconBar {
  background: rgba(18, 18, 22, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow:
    0 10px 34px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35) !important;
}

.module-root[data-freeform-theme='dark'] #iconBar .toolbar-expand-arrow {
  border-right: 2px solid rgba(238, 241, 247, 0.82);
  border-bottom: 2px solid rgba(238, 241, 247, 0.82);
}

.module-root[data-freeform-theme='dark'] .iconbar-separator {
  background: rgba(255, 255, 255, 0.16);
}

.module-root[data-freeform-theme='dark'] .ff-drag-handle-pill {
  background: rgba(255, 255, 255, 0.25);
}
.module-root[data-freeform-theme='dark'] .ff-drag-handle:active .ff-drag-handle-pill,
.module-root[data-freeform-theme='dark'] #iconBar.ff-toolbar-dragging .ff-drag-handle-pill {
  background: rgba(255, 255, 255, 0.45);
}

.module-root[data-freeform-theme='dark'] .barIcon {
  filter: brightness(0) invert(1) !important;
}

.module-root[data-freeform-theme='dark'] .barIconContainer:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.16);
}

.module-root[data-freeform-theme='dark'] .barIconContainer.active {
  background: rgba(238, 241, 247, 0.2);
}

.module-root[data-freeform-theme='dark'] .barIconContainer.active .barIcon {
  filter: brightness(0) invert(1) !important;
}

.module-root[data-freeform-theme='dark'] .barIconContainer.toolbar-variant::after {
  border-left-color: rgba(238, 241, 247, 0.75);
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.4));
}

.module-root[data-freeform-theme='dark'] .barIconContainer.toolbar-variant.variants-open::after,
.module-root[data-freeform-theme='dark'] .barIconContainer.toolbar-variant:hover::after {
  border-left-color: rgba(238, 241, 247, 0.95);
}

.module-root[data-freeform-theme='dark'] .barIconContainer.toolbar-variant.variants-open,
.module-root[data-freeform-theme='dark'] .toolbar-variant-menu {
  background: rgba(18, 18, 22, 0.92);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow:
    0 8px 26px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.module-root[data-freeform-theme='dark'] .toolbar-variant-option:hover,
.module-root[data-freeform-theme='dark'] .toolbar-variant-option.hover {
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.module-root[data-freeform-theme='dark'] .toolbar-variant-option.active {
  background: rgba(238, 241, 247, 0.2);
  box-shadow: 0 0 0 2px rgba(238, 241, 247, 0.3);
}

.module-root[data-freeform-theme='dark'] .toolbar-variant-option img,
.module-root[data-freeform-theme='dark']
  .barIconContainer.active
  .toolbar-variant-menu
  .toolbar-variant-option
  img {
  filter: brightness(0) invert(1) !important;
}

.module-root[data-freeform-theme='dark'] .toolbar-variant-menu .toolbar-menu {
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.module-root[data-freeform-theme='dark'] .toolbar-variant-menu .toolbar-menu .thickness-label {
  color: rgba(238, 241, 247, 0.72);
}

.module-root[data-freeform-theme='dark'] .toolbar-variant-menu .toolbar-menu .thickness-value {
  color: rgba(238, 241, 247, 0.78);
}

.module-root[data-freeform-theme='dark'] .tooltip,
.module-root[data-freeform-theme='dark'] .variant-floating-tooltip {
  background: rgba(18, 18, 22, 0.95);
  color: #eef1f7;
  box-shadow:
    0 10px 36px rgba(0, 0, 0, 0.52),
    0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.module-root[data-freeform-theme='dark'] .tooltip-title {
  color: #eef1f7;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), transparent);
}

.module-root[data-freeform-theme='dark'] .tooltip-desc,
.module-root[data-freeform-theme='dark'] .tooltip-shortcut {
  color: rgba(238, 241, 247, 0.74);
}

.module-root[data-freeform-theme='dark'] .tooltip-shortcut {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(to top, rgba(255, 255, 255, 0.05), transparent);
}

.module-root[data-freeform-theme='dark'] .tooltip-shortcut kbd {
  color: #eef1f7;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.module-root[data-freeform-theme='dark'] #canvasHeaderToggleBtn,
.module-root[data-freeform-theme='dark'] #closeStudioBtn,
.module-root[data-freeform-theme='dark'] #qualityPill,
.module-root[data-freeform-theme='dark'] #snapOrthoUnitsPill,
.module-root[data-freeform-theme='dark'] #canvasTitlePill,
.module-root[data-freeform-theme='dark'] #canvasMenuBtn,
.module-root[data-freeform-theme='dark'] #autosavePill {
  background: rgba(18, 18, 22, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #eef1f7 !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45) !important;
}

.module-root[data-freeform-theme='dark'] #closeStudioBtn svg,
.module-root[data-freeform-theme='dark'] #qualityPill svg {
  stroke: #eef1f7 !important;
}

.module-root[data-freeform-theme='dark'] #qualityPill .quality-label {
  color: rgba(238, 241, 247, 0.68) !important;
}

.module-root[data-freeform-theme='dark'] #qualityPill #brainIcon,
.module-root[data-freeform-theme='dark'] .dropdown-brain-icon {
  filter: brightness(0) invert(1) !important;
}

.module-root[data-freeform-theme='dark'] #snapOrthoUnitsPill .snap-ortho-section {
  color: rgba(238, 241, 247, 0.4) !important;
}

.module-root[data-freeform-theme='dark'] #snapOrthoUnitsPill .snap-ortho-divider {
  background: rgba(255, 255, 255, 0.16) !important;
}

.module-root[data-freeform-theme='dark'] #canvasMenuBtn svg {
  stroke: #eef1f7 !important;
}

.module-root[data-freeform-theme='dark'] #qualityDropdown,
.module-root[data-freeform-theme='dark'] #managerDropdown {
  background: rgba(18, 18, 22, 0.97) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45) !important;
}

.module-root[data-freeform-theme='dark'] #qualityDropdown .quality-option,
.module-root[data-freeform-theme='dark'] #managerDropdown .manager-option {
  color: #eef1f7 !important;
}

.module-root[data-freeform-theme='dark'] #qualityDropdown #draftLabel,
.module-root[data-freeform-theme='dark'] #qualityDropdown #goodLabel,
.module-root[data-freeform-theme='dark'] #qualityDropdown #highLabel,
.module-root[data-freeform-theme='dark'] #qualityDropdown #maxLabel {
  color: #eef1f7 !important;
}

.module-root[data-freeform-theme='dark'] #qualityDropdown #draftLabel span,
.module-root[data-freeform-theme='dark'] #qualityDropdown #goodLabel span,
.module-root[data-freeform-theme='dark'] #qualityDropdown #highLabel span,
.module-root[data-freeform-theme='dark'] #qualityDropdown #maxLabel span {
  color: rgba(238, 241, 247, 0.58) !important;
}

.module-root[data-freeform-theme='dark'] #qualityDropdown #draftLabel + div,
.module-root[data-freeform-theme='dark'] #qualityDropdown #goodDescription,
.module-root[data-freeform-theme='dark'] #qualityDropdown #highDescription,
.module-root[data-freeform-theme='dark'] #qualityDropdown #maxDescription,
.module-root[data-freeform-theme='dark'] #qualityDropdown #flux2Description,
.module-root[data-freeform-theme='dark'] #qualityDropdown #images2Description {
  color: rgba(238, 241, 247, 0.68) !important;
}

.module-root[data-freeform-theme='dark'] #qualityDropdown .quality-credit {
  color: rgba(238, 241, 247, 0.68) !important;
}

.module-root[data-freeform-theme='dark'] #qualityDropdown #flux2Separator {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.24),
    transparent
  ) !important;
}

.module-root[data-freeform-theme='dark'] #qualityDropdown #flux2ToggleRow {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.module-root[data-freeform-theme='dark'] #qualityDropdown #flux2ToggleRow > div > div:first-child {
  color: #eef1f7 !important;
}

.module-root[data-freeform-theme='dark']
  #qualityDropdown
  #flux2ToggleRow
  > div
  > div:nth-child(2)
  > div:first-child,
.module-root[data-freeform-theme='dark']
  #qualityDropdown
  #images2ToggleRow
  > div
  > div:nth-child(2)
  > div:first-child {
  color: #eef1f7 !important;
}

.module-root[data-freeform-theme='dark'] #qualityDropdown #flux2ProBadge,
.module-root[data-freeform-theme='dark'] #qualityDropdown #images2ProBadge {
  color: rgba(238, 241, 247, 0.8) !important;
  background: rgba(255, 255, 255, 0.14) !important;
}

.module-root[data-freeform-theme='dark'] #qualityDropdown #images2ToggleRow {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.module-root[data-freeform-theme='dark']
  #qualityDropdown
  #images2ToggleRow
  > div
  > div:first-child {
  color: #eef1f7 !important;
}

.module-root[data-freeform-theme='dark']
  #managerDropdown
  .manager-option
  > div
  > div
  > div:first-child {
  color: #eef1f7 !important;
}

.module-root[data-freeform-theme='dark']
  #managerDropdown
  .manager-option
  > div
  > div
  > div:last-child,
.module-root[data-freeform-theme='dark'] #managerDropdown .manager-option span {
  color: rgba(238, 241, 247, 0.68) !important;
}

.module-root[data-freeform-theme='dark'] #managerDropdown .manager-option svg {
  stroke: rgba(238, 241, 247, 0.86) !important;
}

.module-root[data-freeform-theme='dark'] #managerDropdown > div[style*='height:1px'] {
  background: rgba(255, 255, 255, 0.14) !important;
}

/* Toolbar menu variant inline */
.toolbar-menu.variant-inline {
  position: static !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  opacity: 1 !important;
  transform: none !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-top: 8px !important;
  gap: 8px !important;
}

/* Phone: reduce top pills by 25% */
@media (max-width: 768px) {
  body.workspace-mode[data-active-module='freeform'] .chat-container.workspace-active {
    height: 100vh !important;
    height: 100svh !important;
    min-height: 100vh !important;
    min-height: 100svh !important;
  }

  body.workspace-mode[data-active-module='freeform']:not(.ff-freeform-header-collapsed)
    #canvasPills {
    top: calc(var(--topbar-height-mobile, 56px) + 10px + env(safe-area-inset-top, 0px)) !important;
  }

  body.workspace-mode[data-active-module='freeform']:not(.ff-freeform-header-collapsed)
    #canvasPillsLeft {
    top: calc(var(--topbar-height-mobile, 56px) + 10px + env(safe-area-inset-top, 0px)) !important;
  }

  #canvasPills {
    gap: 4px !important;
    top: calc(12px + env(safe-area-inset-top, 0px)) !important;
    right: calc(12px + env(safe-area-inset-right, 0px)) !important;
  }

  #canvasPillsLeft {
    top: calc(12px + env(safe-area-inset-top, 0px)) !important;
    left: calc(12px + env(safe-area-inset-left, 0px)) !important;
    gap: 4px !important;
  }

  /* Drop the sidebar toggle's extra margin on phones so the toggle↔title gap
     equals the 4px pill gap (touch rule above adds 10px otherwise). */
  body.workspace-mode[data-active-module='freeform'].ff-freeform-header-collapsed
    #canvasSidebarToggleBtn {
    margin-right: 0 !important;
  }

  /* Close/header-toggle sizes come from --ff-pill-h (36) — keep only the compact mobile icon. */
  #closeStudioBtn svg {
    width: 10px !important;
    height: 10px !important;
  }

  #canvasHeaderToggleBtn svg {
    width: 10px !important;
    height: 10px !important;
  }

  #qualityPill {
    padding: 6px 12px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
    align-items: center !important;
  }

  #qualityPill #brainIcon {
    width: 12px !important;
    height: 12px !important;
  }

  #qualityPill svg {
    width: 10px !important;
    height: 10px !important;
  }

  #qualityPill .quality-label,
  #canvasTitlePill .canvas-title-label,
  #canvasTitlePill .canvas-title-icon {
    display: none !important;
  }

  /* Share → icon-only on mobile (drop the "Share" label, keep a round button). */
  #ffShareBoardBtn .ff-share-label {
    display: none !important;
  }
  #ffShareBoardBtn {
    width: 28px !important;
    padding: 0 !important;
    justify-content: center !important;
  }

  #snapOrthoUnitsPill .snap-ortho-section {
    padding: 6px 10px !important;
    font-size: 11px !important;
  }

  #canvasTitlePill {
    padding: 0 2px 0 12px !important;
    gap: 6px !important;
    font-size: 11px !important;
    max-width: 120px !important;
  }

  #canvasMenuBtn {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    border: none !important;
  }

  #canvasMenuBtn svg {
    width: 10px !important;
    height: 10px !important;
  }

  #zoomIndicator,
  #lockIndicator {
    padding: 6px 10px !important;
    font-size: 11px !important;
  }

  #zoomIndicator svg,
  #lockIndicator svg {
    width: 10px !important;
    height: 10px !important;
  }

  #autosavePill {
    display: none !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  #canvasTitlePill {
    max-width: 200px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   Brand F-mark in the canvas title pill — staggered cell shimmer.
   6 polygons forming the F shape, each fading 0.55 → 1 → 0.55 with
   a 0.2s delay step so a wave travels through the letter. Subtle
   enough to read as breathing, not distracting motion.
   ───────────────────────────────────────────────────────────────── */
#canvasTitlePill .ff-brand-mark {
  width: 22px !important;
  height: 22px !important;
  opacity: 1 !important;
  transform: translateY(-2px);
}
#canvasTitlePill .ff-brand-mark svg {
  width: 22px !important;
  height: 22px !important;
}
.ff-brand-mark { transition: color 0.25s ease; }
.ff-brand-mark .ff-brand-cell {
  opacity: 0.5;
  transform-origin: center;
  animation: ff-brand-shimmer 3.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  animation-delay: calc(var(--i, 0) * 0.22s);
  will-change: opacity;
}
.ff-brand-mark:hover .ff-brand-cell {
  animation-duration: 1.6s;
}
@keyframes ff-brand-shimmer {
  0%   { opacity: 0.5; }
  50%  { opacity: 1; }
  100% { opacity: 0.5; }
}
@media (prefers-reduced-motion: reduce) {
  .ff-brand-mark .ff-brand-cell {
    animation: none;
    opacity: 0.95;
  }
}

/* ─────────────────────────────────────────────────────────────────
   Comment-only mode (commenter role)
   Simplified toolbar: select, notes, text, undo, redo only.
   Hide all generation/drawing UI (prompt bar, action pills, brush,
   shapes, lasso, crop, etc). Notes/text remain interactive.
   ───────────────────────────────────────────────────────────────── */
body.freeform-comment-only #iconBar > .barIconContainer,
body.freeform-comment-only #iconBar > button.barIconContainer {
  display: none !important;
}
body.freeform-comment-only #iconBar > .barIconContainer[data-tool="select"],
body.freeform-comment-only #iconBar > .barIconContainer[data-tool="thinkingText"],
body.freeform-comment-only #iconBar > .barIconContainer[data-tool="text"],
body.freeform-comment-only #iconBar > button.barIconContainer[data-act="undo"],
body.freeform-comment-only #iconBar > button.barIconContainer[data-act="redo"] {
  display: flex !important;
}
/* Hide separators + the expand-toggle that have no use without the full toolset */
body.freeform-comment-only #iconBar > .iconbar-separator,
body.freeform-comment-only #iconBar > .toolbar-expand-toggle {
  display: none !important;
}

/* Hide editor-only action pills (manager, quality, autosave, clear) */
body.freeform-comment-only #managerPill,
body.freeform-comment-only #managerDropdown,
body.freeform-comment-only #qualityPill,
body.freeform-comment-only #qualityDropdown,
body.freeform-comment-only #qualityModeText,
body.freeform-comment-only #clearCanvasPill,
body.freeform-comment-only [data-pill="quality"],
body.freeform-comment-only [data-pill="canvas-manager"],
body.freeform-comment-only .freeform-clear-btn,
body.freeform-comment-only .clear-board-btn,
body.freeform-comment-only [data-action="clear"] {
  display: none !important;
}