/* ════════════════════════════════════════════
   DoxMAP — Design System & Global Styles
   ════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ─── Tokens ─── */
:root {
  --brand: #7C6FFF;
  --brand-glow: rgba(124, 111, 255, 0.35);
  --brand-dim: rgba(124, 111, 255, 0.15);

  --tb-h: 56px;

  /* Node branch colours */
  --c0: #FF6B6B;
  --c1: #4ECDC4;
  --c2: #45B7FF;
  --c3: #96CEB4;
  --c4: #FFD166;
  --c5: #C77DFF;
  --c6: #52D9A0;
  --c7: #FF9F43;
  --c8: #74B9FF;
  --c9: #FD79A8;
  --drawer-h-half: 48vh;
  --drawer-h-full: 94vh;
  --pill-h: 72px;
  --spring-easing: cubic-bezier(0.3, 0.85, 0.3, 1);
  --glass-bg: rgba(28, 28, 34, 0.85);
}

/* ─── Dark theme (default) ─── */
[data-theme="dark"] {
  --bg: #0f1117;
  --surface: #181c27;
  --surface2: #1e2436;
  --border: rgba(255, 255, 255, 0.08);
  --text: #eaedf5;
  --text-2: #8892a4;
  --text-3: #525d6e;
  --node-bg: #1e2436;
  --node-border: rgba(255, 255, 255, 0.12);
  --shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
  --surface3: #2a2e3a;
  --canvas-bg: radial-gradient(ellipse at 50% 50%, #131825 0%, #0b0e16 100%);
  --dot-color: rgba(255, 255, 255, 0.04);
}

/* ─── Light theme ─── */
[data-theme="light"] {
  --bg: #f0f2f8;
  --surface: #ffffff;
  --surface2: #f5f6fa;
  --border: rgba(0, 0, 0, 0.09);
  --text: #1a1e2e;
  --text-2: #5a6278;
  --text-3: #9aa2b4;
  --node-bg: #ffffff;
  --node-border: rgba(0, 0, 0, 0.1);
  --shadow: 0 2px 20px rgba(0, 0, 0, 0.12);
  --canvas-bg: radial-gradient(ellipse at 50% 50%, #eef0f8 0%, #e6e9f4 100%);
  --surface3: #ebebeb;
  --dot-color: rgba(0, 0, 0, 0.06);
  --glass-bg: rgba(255, 255, 255, 0.92);
}

/* ─── Reset ─── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;         /* block rubber-band on mobile browsers */
}

/* ─── Accessibility polish ─── */
*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Keep our custom inputs/buttons from showing the default blue glow */
button:focus-visible,
a:focus-visible,
.ios-fab:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

/* Respect reduced-motion preference: kill non-essential transitions */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ════════════════════════════════════════════
   TOOLBAR
   ════════════════════════════════════════════ */
.toolbar {
  height: var(--tb-h);
  min-height: var(--tb-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  z-index: 100;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  user-select: none;
}

/* Phase 4: Floating toolbar styling - overrides default toolbar */
.toolbar.toolbar-fab {
  position: fixed !important;
  top: 20px !important;
  left: 20px !important;
  bottom: auto !important;
  right: auto !important;
  height: auto !important;
  min-height: auto !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  border-bottom: 1px solid var(--border);
  border-radius: 14px !important;
  padding: 12px !important;
  gap: 8px !important;
  max-width: 280px;
  max-height: 80vh;
  overflow-y: auto;
  z-index: 200 !important;
}

/* Keep toolbar visible with essential controls only */
/* Note: toolbar-group--right contains auth/signin button — must remain visible */

/* ════════════════════════════════════════════
   iOS-STYLE INTERFACE
   ════════════════════════════════════════════ */

/* ── Shared FAB (matches iOS CircleFABStyle — 48×48 glass circle) ── */
.ios-fab {
  width: 34px;
  height: 34px;
  border: none;
  background: rgba(28, 28, 30, 0.78);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  color: var(--text);
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14), 0 1px 3px rgba(0, 0, 0, 0.08);
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 0.5px solid rgba(255, 255, 255, 0.15);
}
[data-theme="light"] .ios-fab {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(0, 0, 0, 0.08);
  color: #1d1d1f;
}
.ios-fab:hover {
  background: rgba(50, 50, 50, 0.85);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.20);
}
[data-theme="light"] .ios-fab:hover {
  background: rgba(255, 255, 255, 0.92);
}
.ios-fab:active {
  transform: scale(0.90);
}
.ios-fab svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.8;
  stroke: currentColor;
  fill: none;
}

/* iOS 44pt min-touch-target on phones (Apple HIG) */
@media (hover: none) and (pointer: coarse), (max-width: 600px) {
  .ios-fab {
    width: 44px;
    height: 44px;
  }
  .ios-fab svg {
    width: 19px;
    height: 19px;
  }
}

/* Kill 300ms tap delay + disable text-selection on taps for interactive chrome */
.ios-fab,
.lib-card,
.readonly-banner-cta,
.tb-seg-btn,
.zoom-btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

/* ── Breadcrumb (iOS parity — top-left, glass pill overlay) ── */
.ios-breadcrumb {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 6px);
  left: 66px;
  max-width: 50%;
  z-index: 200;
  pointer-events: auto;
  overflow: hidden;
  /* Tier 1: Glass pill breadcrumb */
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 8px;
  padding: 3px 10px;
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.ios-breadcrumb-text {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  line-height: 1.3;
}
.ios-breadcrumb-text .bc-sep {
  margin: 0 3px;
  opacity: 0.5;
  font-size: 9px;
}
.ios-breadcrumb-text .bc-current {
  color: var(--brand);
  font-weight: 600;
}

/* ── Read-only banner (persistent upgrade CTA for read-only maps) ── */
.readonly-banner {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 56px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 250;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 14px;
  max-width: calc(100vw - 24px);
  background: rgba(28, 28, 30, 0.92);
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: 13px;
  line-height: 1.25;
  pointer-events: auto;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.readonly-banner.hidden {
  display: none;
}
.readonly-banner-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: #ffd479;
  flex: 0 0 18px;
}
.readonly-banner-text {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.readonly-banner-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #0a84ff;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 12.5px;
  border-radius: 999px;
  transition: background 0.15s ease, transform 0.1s ease;
  white-space: nowrap;
  flex: 0 0 auto;
}
.readonly-banner-cta:hover { background: #0974e6; }
.readonly-banner-cta:active { transform: scale(0.97); }
.readonly-banner-cta svg { display: block; }

@media (max-width: 520px) {
  .readonly-banner { font-size: 12px; padding: 7px 8px 7px 12px; gap: 8px; }
  .readonly-banner-text { max-width: 52vw; }
  .readonly-banner-cta { padding: 5px 10px; font-size: 12px; }
}

/* ── Export FAB (top-right floating, matches iOS share FAB) ── */
.ios-export-fab {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  right: 14px;
  z-index: 12000;
  pointer-events: auto;
}

/* ── Top-center editable Map Title (iOS ToolbarView parity) ──
   Sits between the Tools FAB (top-left) and Export FAB (top-right).
   On narrow screens it shrinks with min-width 0 so the FABs always win. */
.ios-title-wrap {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 150;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
  max-width: min(320px, calc(100vw - 160px));
}

.ios-title-input {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  padding: 8px 14px;
  width: 100%;
  min-width: 0;
  outline: none;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  text-overflow: ellipsis;
}

[data-theme="light"] .ios-title-input {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(0, 0, 0, 0.08);
  color: var(--text);
}

.ios-title-input:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
}
[data-theme="light"] .ios-title-input:hover {
  border-color: rgba(0, 0, 0, 0.18);
  background: rgba(255, 255, 255, 0.8);
}

.ios-title-input:focus {
  border-color: var(--brand);
  background: rgba(124, 111, 255, 0.1);
  box-shadow: 0 0 0 3px rgba(124, 111, 255, 0.18);
  /* Lock readable text + caret colors so the input never blends into a
     bright canvas background while typing. */
  color: var(--text);
  caret-color: var(--text);
}

[data-theme="light"] .ios-title-input,
[data-theme="light"] .ios-title-input:hover,
[data-theme="light"] .ios-title-input:focus {
  /* Use an opaque surface in light mode so the title is always legible
     regardless of what's painted on the canvas behind it. */
  color: var(--text);
  caret-color: var(--text);
  -webkit-text-fill-color: var(--text);
}

[data-theme="light"] .ios-title-input:focus {
  background: #ffffff;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(124, 111, 255, 0.22);
}

.ios-invite-fab {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 60px);
  right: 14px;
  z-index: 12000;
  pointer-events: auto;
  color: var(--brand);
}

.ios-invite-fab svg {
  width: 22px;
  height: 22px;
}

.ios-invite-fab:active {
  background: var(--brand);
  color: white;
}

/* Hide the title on very narrow screens so the FABs don't collide */
@media (max-width: 520px) {
  .ios-title-wrap { max-width: calc(100vw - 120px); }
  .ios-title-input { font-size: 13px; padding: 6px 10px; }
}

/* ── Canvas Scroll Indicators (iOS CanvasView.swift:120-165 parity) ──
   Thin semi-transparent tracks on the right + bottom edges.
   Thumb size = viewport fraction of content; position = pan offset. */
.canvas-scroll-track {
  position: absolute;
  z-index: 50;
  pointer-events: none;       /* read-only indicators, don't steal pan events */
  opacity: 0.75;
  transition: opacity .25s ease;
}
.canvas-scroll-track.hidden {
  opacity: 0;
}
.canvas-scroll-right {
  top: 8px;
  right: 4px;
  bottom: 60px;               /* don't collide with action pill at bottom */
  width: 4px;
}
.canvas-scroll-bottom {
  left: 8px;
  right: 60px;                /* don't collide with settings FAB at bottom-right */
  bottom: 64px;               /* clear the action pill */
  height: 4px;
}
.canvas-scroll-thumb {
  position: absolute;
  background: var(--brand, #7C6FFF);
  border-radius: 3px;
  opacity: 0.55;
  box-shadow: 0 0 6px rgba(124, 111, 255, 0.4);
}
.canvas-scroll-right .canvas-scroll-thumb {
  left: 0;
  width: 100%;
  min-height: 24px;
}
.canvas-scroll-bottom .canvas-scroll-thumb {
  top: 0;
  height: 100%;
  min-width: 24px;
}
[data-theme="light"] .canvas-scroll-thumb {
  opacity: 0.4;
}

/* ── Old header — hidden (replaced by breadcrumb + floating export) ── */
.ios-header {
  display: none !important;
}

/* old ios-header-btn — no longer used */

/* iOS Left Sidebar Navigation */
.ios-left-nav {
  position: fixed;
  left: 12px;
  top: 72px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 120;
  pointer-events: all;
}

.ios-nav-btn {
  width: 48px;
  height: 48px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
}

.ios-nav-btn:hover {
  background: var(--surface2);
  color: var(--text);
  border-color: var(--text-2);
}

.ios-nav-btn:active {
  transform: scale(0.95);
}

.ios-nav-btn.active {
  background: var(--brand);
  color: white;
  border-color: var(--brand);
}

.ios-nav-btn svg {
  width: 24px;
  height: 24px;
  stroke-width: 2;
  stroke: currentColor;
  fill: none;
}

/* iOS Settings Button: Bottom Right — inherits .ios-fab sizing (48×48) */
.ios-settings-btn {
  position: fixed;
  bottom: 24px;
  right: 16px;
  z-index: 1600;
}

.tier-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ffb347;
  color: #000;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 6px;
  border: 1.5px solid #181c27;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  pointer-events: none;
}

.tier-badge.team {
  background: #00c9a7;
  color: #fff;
}

.settings-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.settings-field label {
  font-size: 12px;
  color: var(--text-2);
  font-weight: 600;
}

.account-tier-label {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  background: var(--surface2);
  color: var(--text-2);
}

.account-tier-label.pro {
  background: #ffb347;
  color: #000;
}

.account-tier-label.team {
  background: #00c9a7;
  color: #fff;
}

.settings-select,
.settings-input {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  border-radius: 9px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13px;
}

.settings-input:focus,
.settings-select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-dim);
}

.settings-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.settings-row .account-btn {
  flex: 1;
}

.export-menu {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 64px);
  right: 14px;
  width: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.24);
  overflow: hidden;
  z-index: 1800;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.export-menu-item {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  padding: 11px 12px;
  cursor: pointer;
}

.export-menu-item:last-child {
  border-bottom: none;
}

.export-menu-item:hover {
  background: var(--surface2);
}

/* settings-btn hover/active/svg handled by .ios-fab base class */

/* Hide old toolbar-fab since we use ios-header now */
.toolbar.toolbar-fab {
  display: none !important;
}

/* Canvas layout handled by the main .canvas-container rule in CANVAS section */

.connector-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Position floating overlays properly */
.zoom-controls {
  position: fixed;
  bottom: 84px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 12500;
  pointer-events: auto;
}

/* Ensure settings button is always accessible */
.ios-settings-btn {
  z-index: 1600;
  pointer-events: all;
}

/* Brand */
.toolbar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 6px;
  color: var(--brand);
  flex-shrink: 0;
}

.brand-logo {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 6px var(--brand-glow));
}

.brand-logo svg {
  width: 28px;
  height: 28px;
}

.brand-name {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.3px;
  background: linear-gradient(135deg, var(--brand) 0%, #a78bfa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Toolbar groups */
.toolbar-group,
.tb-group {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.toolbar-group--right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

/* Map title */
.map-title-wrap {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: 0 6px;
  min-width: 0;
}

.map-title-input {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  padding: 5px 12px;
  max-width: 260px;
  width: 100%;
  outline: none;
  transition: border-color .15s, background .15s;
}

.map-title-input:hover {
  border-color: var(--border);
  background: var(--surface2);
}

.map-title-input:focus {
  border-color: var(--brand);
  background: var(--surface2);
  box-shadow: 0 0 0 3px var(--brand-dim);
}

/* ── Base icon-only toolbar button ── */
.tb-icon-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text-2);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s, transform .35s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
  flex-shrink: 0;
}

.tb-icon-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.tb-icon-btn .tb-label {
  font-size: 13px;
  font-weight: 600;
}

.tb-icon-btn:hover {
  background: var(--surface2);
  border-color: var(--border);
  color: var(--text);
}

.tb-icon-btn:active {
  transform: scale(.84);
}

.tb-icon-btn:disabled {
  opacity: .3;
  cursor: not-allowed;
  transform: none;
}

.tb-icon-btn.active {
  background: var(--brand-dim);
  border-color: var(--brand);
  color: var(--brand);
}

/* Legacy .tb-btn still used in modals / inspector */
.tb-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text-2);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s, transform .35s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
}

.tb-btn:hover {
  background: var(--surface2);
  color: var(--text);
}

.tb-btn:active {
  transform: scale(.84);
}

.tb-btn:disabled {
  opacity: .35;
  cursor: not-allowed;
}

.tb-btn.active {
  background: var(--brand-dim);
  border-color: var(--brand);
  color: var(--brand);
}

/* ── Primary node action button (iOS-style) ── */
.tb-primary-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 11px;
  background: var(--brand);
  border: 1px solid var(--brand);
  border-radius: 8px;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .12s, box-shadow .12s, transform .35s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(124, 111, 255, 0.3);
}

.tb-primary-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.tb-primary-btn:hover {
  background: #8f84ff;
  box-shadow: 0 4px 14px var(--brand-glow);
}

.tb-primary-btn:active {
  transform: scale(.84);
}

/* ── Secondary node action button ── */
.tb-secondary-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 10px;
  background: var(--brand-dim);
  border: 1px solid rgba(124, 111, 255, 0.3);
  border-radius: 8px;
  color: var(--brand);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .35s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
  flex-shrink: 0;
}

.tb-secondary-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.tb-secondary-btn:hover {
  background: rgba(124, 111, 255, 0.25);
  border-color: var(--brand);
}

.tb-secondary-btn:active {
  transform: scale(.84);
}

/* ── Separator ── */
.tb-sep {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 5px;
  flex-shrink: 0;
}

/* ── Segmented layout control (iThoughts-style pill group) ── */
.tb-segmented {
  display: flex;
  align-items: center;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
  flex-shrink: 0;
}

.tb-seg-btn {
  width: 28px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 7px;
  color: var(--text, #e0e0e0);
  opacity: 0.7;
  cursor: pointer;
  transition: background .12s, color .12s, opacity .12s;
  flex-shrink: 0;
}

.tb-seg-btn svg {
  width: 14px;
  height: 14px;
}

.tb-seg-btn:hover {
  background: var(--surface);
  color: var(--text);
  opacity: 1;
}

.tb-seg-btn.active {
  background: var(--surface);
  color: var(--brand);
  opacity: 1;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

/* ── Share / Export / Import dropdown ── */
.tb-dropdown-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.tb-has-chevron {
  gap: 3px;
  padding-right: 6px;
}

.tb-chevron {
  width: 8px !important;
  height: 8px !important;
  opacity: .5;
  margin-left: 1px;
}

.tb-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 210px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 400;
  animation: fadeScaleIn .12s ease;
}

.tb-dropdown-menu.hidden {
  display: none;
}

.tb-dropdown-section-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .6px;
  padding: 4px 10px 3px;
}

.tb-dropdown-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 10px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--text-2);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background .1s, color .1s;
  justify-content: space-between;
}

.tb-dropdown-item:hover {
  background: var(--surface2);
  color: var(--text);
}

.tb-dropdown-item>span {
  flex: 1;
}

.tb-dropdown-item svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: .6;
}

.tb-dropdown-item kbd {
  font-size: 10px;
  color: var(--text-3);
  font-family: inherit;
  flex-shrink: 0;
}

.tb-dropdown-sep {
  height: 1px;
  background: var(--border);
  margin: 5px 0;
}

/* ════════════════════════════════════════════
   CANVAS
   ════════════════════════════════════════════ */
.canvas-container {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: var(--canvas-bg);
  cursor: default;
  touch-action: none;
  /* hand all touch events to JS; enables pinch-zoom */
}

/* Dot grid */
.canvas-container::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--dot-color) 1.2px, transparent 1.2px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}

/* 3D: Radial vignette — darkens edges for depth-of-field effect */
.canvas-container::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.06) 100%);
  pointer-events: none;
  z-index: 0;
}

.canvas-world {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  will-change: transform;
}

/* Smooth transition only for programmatic moves (fitToScreen, setZoom) */
.canvas-world.animate-pan {
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.connector-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}

/* ════════════════════════════════════════════
   NODES
   ════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════
   NODE STYLES — Base + Theme-driven border styles
   Driven by [data-border-style] on .canvas-container
   ════════════════════════════════════════════════════════════ */
.map-node {
  position: absolute;
  transform: translate(-50%, -50%);
  min-width: 40px;
  /* iThoughtsX parity: max-content sizes to text intrinsically (independent of
     parent width), while max-width: 280px caps wrapping (KI standard).
     Short text → narrow node; long text wraps at 280px. */
  max-width: 280px;
  width: max-content;
  overflow: visible;
  padding: var(--node-padding, 3px 8px);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  z-index: 10;
  transition: background .12s, box-shadow .25s, border-color .15s, transform .25s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  user-select: none;
  user-drag: none;
  -webkit-user-drag: none;
  /* iThoughtsX parity: promote each node to its own GPU compositing layer so
     pan/zoom of .canvas-world only re-composites (no per-node repaint).
     Cuts paint cost on 500+ node maps roughly in half. */
  will-change: transform;
  transform: translate(-50%, -50%) translateZ(0);
  /* NOTE: only `contain: layout` — `paint` would clip absolutely-positioned
     children that extend outside the node box (collapse-toggle, add-ring,
     resize-handle all sit at right:-26px). */
  contain: layout;
  backface-visibility: hidden;
  /* Tier 1: Animated node entrance — iOS parity (appearScale 0.5 → 1.0) */
  animation: nodeAppear 0.35s cubic-bezier(0.3, 0.85, 0.3, 1) both;
}

/* Density slider (Set 2) — Compact/Balanced/Spacious presets.
   --node-padding & --node-font-scale are set on <html> by app._applyDensityCss(). */
[data-density] .map-node .label {
  font-size: calc(13px * var(--node-font-scale, 1));
}

/* Tier 1: Node entrance animation */
@keyframes nodeAppear {
  from { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
  to   { transform: translate(-50%, -50%) scale(1);   opacity: 1; }
}

/* ── NONE — iOS parity: transparent text-only, no background or border.
   The edge underline from _renderEdge runs beneath the text as the visual anchor. ── */
[data-border-style="none"] .map-node:not(.root-node) {
  background: transparent;
  border: none;
  border-radius: 7px;
  padding: 4px 6px;
  box-shadow: none;
}

[data-border-style="none"] .map-node:not(.root-node)::before {
  display: none;
}

[data-border-style="none"] .map-node:not(.root-node)::after {
  display: none;
}

[data-border-style="none"] .map-node:not(.root-node).selected {
  background: color-mix(in srgb, var(--node-color, #888) 10%, transparent);
  border: none;
  border-radius: 7px;
  box-shadow:
    0 0 16px color-mix(in srgb, var(--node-color) 15%, transparent);
}

[data-border-style="none"] .map-node:not(.root-node):hover {
  background: color-mix(in srgb, var(--node-color, #888) 6%, transparent);
}

/* ── UNDERLINE — iOS parity: text above, accent bar at bottom ── */
[data-border-style="underline"] .map-node:not(.root-node) {
  border: none;
  border-radius: 0 6px 6px 0;
  background: transparent;
  padding-bottom: 5px;
  /* 3D: Layered shadow — ambient + directional */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Accent underline bar (iOS Capsule at .bottom) */
[data-border-style="underline"] .map-node:not(.root-node)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 4px;
  right: 4px;
  height: 1.5px;
  border-radius: 1px;
  background: var(--node-color, #aaa);
  opacity: 0.45;
}

[data-border-style="underline"] .map-node:not(.root-node).selected::after {
  height: 2.5px;
  opacity: 0.85;
}

/* Left accent bar */
[data-border-style="underline"] .map-node:not(.root-node)::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 3px;
  border-radius: 2px;
  background: var(--node-color, #aaa);
}

[data-border-style="underline"] .map-node:not(.root-node).selected {
  background: color-mix(in srgb, var(--node-color, #888) 8%, transparent);
  /* 3D: Selection glow */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.10), 0 0 12px color-mix(in srgb, var(--node-color) 25%, transparent);
}

/* ── ROUNDED — iOS NodeView parity: full colored border + subtle tint ── */
[data-border-style="rounded"] .map-node:not(.root-node) {
  background: color-mix(in srgb, var(--node-color, #888) 6%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--node-color, #888) 55%, transparent);
  border-radius: 10px;
  padding: 5px 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* Remove inner light highlight + left accent (iOS uses unified border, not bar) */
[data-border-style="rounded"] .map-node:not(.root-node)::after {
  display: none;
}

[data-border-style="rounded"] .map-node:not(.root-node)::before {
  display: none;
}

[data-border-style="rounded"] .map-node:not(.root-node).selected {
  border-color: var(--node-color, #888);
  border-width: 2px;
  background: color-mix(in srgb, var(--node-color, #888) 12%, transparent);
  /* iOS-parity: triple-layer selection shadow with colored glow */
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.05),
    0 3px 6px rgba(0, 0, 0, 0.10),
    0 0 16px color-mix(in srgb, var(--node-color) 35%, transparent);
}

[data-border-style="rounded"] .map-node:not(.root-node):hover {
  border-color: color-mix(in srgb, var(--node-color, #888) 75%, transparent);
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.05),
    0 2px 4px rgba(0, 0, 0, 0.10);
}

/* ── OVAL — capsule/pill shape ── */
[data-border-style="oval"] .map-node:not(.root-node) {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--node-color, #888) 40%, transparent);
  border-radius: 999px;
  padding: 5px 16px;
}

[data-border-style="oval"] .map-node:not(.root-node)::before {
  display: none;
}

[data-border-style="oval"] .map-node:not(.root-node).selected {
  border-color: color-mix(in srgb, var(--node-color, #888) 85%, transparent);
  border-width: 1.8px;
  background: color-mix(in srgb, var(--node-color, #888) 10%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--node-color) 20%, transparent);
}

/* ── SOLIDRECT — sharp rectangle (simplified) ── */
[data-border-style="solidrect"] .map-node:not(.root-node) {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 5px 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

[data-border-style="solidrect"] .map-node:not(.root-node).selected {
  border-color: color-mix(in srgb, var(--node-color, #888) 85%, transparent);
  border-width: 1.8px;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--node-color, #888) 12%, var(--node-bg-theme, var(--surface2))) 0%,
    color-mix(in srgb, var(--node-color, #888) 8%, var(--node-bg-theme, var(--surface2))) 100%);
  /* 3D: Selection with colored glow */
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.04),
    0 3px 6px rgba(0, 0, 0, 0.10),
    0 0 16px color-mix(in srgb, var(--node-color) 30%, transparent);
}

/* ── Edge masking: opaque text pill prevents connector lines from
   showing through text in transparent-background node styles.
   Generous padding ensures the mask covers the full text area. ── */
[data-border-style="none"] .map-node:not(.root-node) .node-label,
[data-border-style="underline"] .map-node:not(.root-node) .node-label,
[data-border-style="oval"] .map-node:not(.root-node) .node-label {
  background-color: var(--canvas-bg, var(--bg));
  border-radius: 4px;
  padding: 3px 10px;
  margin: -3px -10px;
}

/* ── Shared hover for all border styles ── */
/* Tier 2: Micro-animation lift + glow on hover */
.map-node:not(.root-node):hover {
  z-index: 12;
  transform: translate(-50%, -50%) translateY(-1.5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06);
  transition: transform 0.18s cubic-bezier(0.3, 0.85, 0.3, 1), box-shadow 0.18s ease;
}

/* ── Active (Press) state ── */
.map-node:not(.editing):active {
  transform: translate(-50%, -50%) scale(0.97) !important;
  transition: transform 0.1s ease !important;
}

/* ── Shared selected base ──
   Use `outline` (instead of/in addition to box-shadow) because per-border-style
   rules below override `box-shadow`, which used to silently kill the ring.
   `outline` paints outside the box, isn't affected by border-radius
   overflow, and isn't clobbered by the per-style box-shadow declarations. */
.map-node.selected {
  z-index: 20;
  transform: translate(-50%, -50%) scale(1.05);
  outline: 3px solid var(--brand);
  outline-offset: 3px;
  box-shadow:
    0 0 0 6px color-mix(in srgb, var(--brand) 28%, transparent),
    0 6px 22px color-mix(in srgb, var(--brand) 35%, transparent);
  transition: transform .35s cubic-bezier(0.34, 1.56, 0.64, 1), background .12s, box-shadow .15s, border-color .15s, outline-color .15s;
}

/* iOS parity: subtle branch-color tint on selected non-root nodes */
.map-node.selected:not(.root-node) {
  background: color-mix(in srgb, var(--node-color, var(--brand)) 12%, transparent);
}

.map-node.selected.root-node {
  transform: translate(-50%, -50%) scale(1.035);
  box-shadow:
    0 10px 20px rgba(0, 0, 0, 0.05),
    0 6px 14px color-mix(in srgb, var(--root-bg, var(--brand)) 20%, transparent),
    0 3px 4px rgba(0, 0, 0, 0.12),
    0 8px 20px color-mix(in srgb, var(--root-bg, var(--brand)) 50%, transparent);
}

/* Drop-target highlight for drag-to-reparent.
   iThoughtsX-style: child = blue ring, sibling = green bar, promote = amber.
   Each indicator animates in instantly so feedback feels alive and tactile. */
.map-node.drop-target-child {
  box-shadow: 0 0 0 3px #3b82f6, 0 0 18px rgba(59, 130, 246, 0.55) !important;
  z-index: 25 !important;
  animation: drop-child-pulse 1.2s ease-in-out infinite;
}
@keyframes drop-child-pulse {
  0%, 100% { box-shadow: 0 0 0 3px #3b82f6, 0 0 18px rgba(59, 130, 246, 0.55); }
  50%      { box-shadow: 0 0 0 4px #60a5fa, 0 0 24px rgba(59, 130, 246, 0.75); }
}

.map-node.drop-target-sibling-above::before {
  content: '';
  position: absolute;
  top: -7px;
  left: -4px;
  right: -4px;
  height: 5px;
  background: linear-gradient(90deg, transparent 0%, #22c55e 12%, #22c55e 88%, transparent 100%);
  border-radius: 3px;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.85), 0 0 4px rgba(34, 197, 94, 1);
  z-index: 30;
  pointer-events: none;
  animation: drop-bar-in 0.16s ease-out;
}

.map-node.drop-target-sibling-below::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: -4px;
  right: -4px;
  height: 5px;
  background: linear-gradient(90deg, transparent 0%, #22c55e 12%, #22c55e 88%, transparent 100%);
  border-radius: 3px;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.85), 0 0 4px rgba(34, 197, 94, 1);
  z-index: 30;
  pointer-events: none;
  animation: drop-bar-in 0.16s ease-out;
}
@keyframes drop-bar-in {
  from { opacity: 0; transform: scaleX(0.6); }
  to   { opacity: 1; transform: scaleX(1); }
}

/* Promote: dropped node lifts one level out — sibling of target's parent.
   Highlight the outer side of the target with a vertical bar. */
.map-node.drop-target-promote {
  box-shadow: 0 0 0 2.5px #f59e0b, 0 0 14px rgba(245, 158, 11, 0.55) !important;
  z-index: 25 !important;
  animation: drop-promote-pulse 1s ease-in-out infinite;
}
@keyframes drop-promote-pulse {
  0%, 100% { box-shadow: 0 0 0 2.5px #f59e0b, 0 0 14px rgba(245, 158, 11, 0.55); }
  50%      { box-shadow: 0 0 0 3.5px #fbbf24, 0 0 20px rgba(245, 158, 11, 0.75); }
}
.map-node.drop-target-promote::after {
  content: '↗';
  position: absolute;
  top: 50%;
  right: -22px;
  transform: translateY(-50%);
  font-size: 16px;
  font-weight: 700;
  color: #f59e0b;
  text-shadow: 0 0 6px rgba(245, 158, 11, 0.7);
  z-index: 30;
  pointer-events: none;
}

/* Settle animation: when a dragged node finishes reparenting and lerps to
   its new layout slot, give it a tiny scale bounce so the landing feels
   tactile (like dropping a card on a table). Triggered by removing
   .drag-lift while keeping a transient .drop-settle class. */
.map-node.drop-settle {
  animation: drop-settle 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes drop-settle {
  0%   { transform: translate(-50%, -50%) scale(1.06); }
  60%  { transform: translate(-50%, -50%) scale(0.97); }
  100% { transform: translate(-50%, -50%) scale(1.0); }
}

/* ─── Drop Reparent Arrow ─── */
#drop-reparent-arrow {
  filter: drop-shadow(0 0 4px var(--brand-glow));
  stroke-dasharray: 6 4;
  animation: dash-flow 20s linear infinite;
}

@keyframes dash-flow {
  from { stroke-dashoffset: 200; }
  to { stroke-dashoffset: 0; }
}

/* ─── Shared Map Badge ─── */
.ios-shared-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  background: var(--brand-dim);
  border: 1px solid var(--brand);
  border-radius: 20px;
  color: var(--brand);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  pointer-events: none;
  animation: badge-pulse 2s infinite;
  margin-left: 10px;
  flex-shrink: 0;
}

.ios-shared-badge.hidden {
  display: none !important;
}

@keyframes badge-pulse {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.02); }
}

.map-node.root-node {
  transform: translate(-50%, -50%);
  padding: 12px 18px;
  min-width: 80px;
  border-radius: 13px;
  border: 1.8px solid color-mix(in srgb, var(--root-bg, var(--brand)) 70%, transparent);
  /* iOS NodeView rootCard: gradient 0.22 → 0.10 TopLeading → BottomTrailing */
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--root-bg, var(--brand)) 88%, var(--surface, #1e293b)) 0%,
    color-mix(in srgb, var(--root-bg, var(--brand)) 65%, var(--surface, #1e293b)) 100%
  );
  /* iOS rootCard shadow: triple-layer ambient + colored glow */
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.08),
    0 6px 14px color-mix(in srgb, var(--root-bg, var(--brand)) 25%, transparent),
    0 3px 6px rgba(0, 0, 0, 0.14);
  position: relative;
  /* Tier 1: Root glow pulse on load */
  animation: rootGlowPulse 2s ease-in-out 0.5s 1;
}

/* Tier 1: Root node glow pulse on map load */
@keyframes rootGlowPulse {
  0%   { box-shadow: 0 12px 28px rgba(0,0,0,0.08), 0 6px 14px color-mix(in srgb, var(--root-bg, var(--brand)) 25%, transparent), 0 3px 6px rgba(0,0,0,0.14); }
  50%  { box-shadow: 0 12px 28px rgba(0,0,0,0.08), 0 6px 14px color-mix(in srgb, var(--root-bg, var(--brand)) 25%, transparent), 0 3px 6px rgba(0,0,0,0.14), 0 0 40px color-mix(in srgb, var(--root-bg, var(--brand)) 45%, transparent); }
  100% { box-shadow: 0 12px 28px rgba(0,0,0,0.08), 0 6px 14px color-mix(in srgb, var(--root-bg, var(--brand)) 25%, transparent), 0 3px 6px rgba(0,0,0,0.14); }
}

/* iOS inner-light highlight — white gradient from top */
.map-node.root-node::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 13px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0) 55%);
  pointer-events: none;
}

.map-node.root-node::before {
  display: none;
}

.map-node.root-node .node-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--root-text, #ffffff);
  letter-spacing: -0.01em;
}

/* Node label — iThoughts X parity: compact, smaller fonts */
.node-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.35;
  text-align: left;
  pointer-events: none;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-word;
  /* iThoughtsX parity: 260px label within 280px node (10px padding each side) */
  max-width: 260px;
  outline: none;
  user-select: none;
  user-drag: none;
  -webkit-user-drag: none;
}

.map-node.root-node .node-label {
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--root-text, #ffffff);
  max-width: 280px;
  letter-spacing: -0.01em;
}

/* ── Editing state ── */
.map-node.editing {
  background: color-mix(in srgb, var(--node-color, var(--brand)) 8%, transparent) !important;
  border-color: var(--node-color, var(--brand)) !important;
  border-width: 1.5px !important;
  border-style: dashed !important;
  border-radius: 6px !important;
  max-width: 260px !important;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.25) !important;
  cursor: text !important;
  z-index: 50 !important;
}

.map-node.editing .node-label {
  pointer-events: auto;
  cursor: text;
  color: var(--text);
  white-space: pre-wrap;
  min-width: 40px;
  min-height: 0;
  height: auto;
  outline: none;
  display: block;
}

.node-label:focus {
  outline: none;
}

/* Shapes (iOS parity: auto, none, rounded, oval, diamond, rect, hexagon) */
.shape-auto {
  /* Default: same as rounded */
  border-radius: 12px;
}

.shape-none {
  /* No visible border, no background — text floats freely (iOS noneNode parity) */
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 7px;
  padding: 2px 4px;
}

.shape-none.selected {
  /* iOS noneNode: selected shows subtle tint, no hard border */
  background: color-mix(in srgb, var(--node-color, #888) 10%, transparent) !important;
  box-shadow: 0 0 8px color-mix(in srgb, var(--node-color, #888) 15%, transparent) !important;
}

.shape-none:hover:not(.selected) {
  background: color-mix(in srgb, var(--node-color, #888) 5%, transparent) !important;
}

.shape-rounded {
  border-radius: 12px;
}

.shape-oval {
  border-radius: 999px;
}

.shape-diamond {
  border-radius: 6px;
  transform: translate(-50%, -50%) rotate(45deg);
}

.shape-diamond .node-label {
  transform: rotate(-45deg);
  max-width: 90px;
}

.shape-rect {
  border-radius: 4px;
}

.shape-hexagon {
  border-radius: 8px;
  clip-path: polygon(20% 0%, 80% 0%, 100% 50%, 80% 100%, 20% 100%, 0% 50%);
  padding: 8px 22px;
}


/* Collapse toggle */
/* ── iThoughts-style collapse/expand circle ── */
/* ── iOS-parity collapse toggle (22px circle with child count) ── */
/* iOS NodeView count chip — branch-colored circle on node's right edge */
.collapse-toggle {
  position: absolute;
  right: -26px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  /* Filled with branch color at moderate opacity (iOS parity) */
  background: color-mix(in srgb, var(--node-color, #888) 90%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--node-color, #888) 100%, transparent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  font-family: system-ui, -apple-system, sans-serif;
  color: #ffffff;
  cursor: pointer;
  z-index: 30;
  line-height: 1;
  letter-spacing: -0.02em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.10);
  transition: background .2s, color .2s, border-color .2s, transform .35s cubic-bezier(0.3, 0.85, 0.3, 1);
  pointer-events: all;
}

/* Collapsed state: solid filled circle with bigger text (iOS parity) */
.map-node.collapsed .collapse-toggle {
  background: var(--node-color, #888);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  border-color: var(--node-color, #888);
  /* Stronger glow when collapsed (count is meaningful) */
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.20),
    0 0 0 2px color-mix(in srgb, var(--node-color, #888) 18%, transparent);
}

.collapse-toggle:hover {
  background: var(--node-color, #888);
  border-color: var(--node-color, #888);
  color: #ffffff;
  transform: translateY(-50%) scale(1.12);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22);
}

/* ── iThoughts-style "+" add-ring on leaf nodes ── */
.add-ring {
  position: absolute;
  right: -26px;
  top: 50%;
  transform: translateY(-50%) scale(0.6);
  width: 22px;
  height: 22px;
  background: var(--surface, #fff);
  border: 1px solid rgba(128, 128, 128, 0.30);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  color: rgba(128, 128, 128, 0.55);
  cursor: pointer;
  z-index: 30;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease, transform .18s cubic-bezier(0.34, 1.56, 0.64, 1),
              background .12s, color .12s, border-color .15s;
}

/* Reveal on node hover (iThoughtsX parity) */
.map-node:hover > .add-ring,
.map-node.selected > .add-ring {
  opacity: 1;
  transform: translateY(-50%) scale(1);
  pointer-events: auto;
}

.add-ring:hover {
  background: var(--brand, #7C6FFF);
  border-color: var(--brand, #7C6FFF);
  color: #fff;
  transform: translateY(-50%) scale(1.12) !important;
}

/* Coarse pointers need larger control targets for reliable branch taps. */
@media (pointer: coarse) {
  .collapse-toggle,
  .add-ring {
    right: -30px;
    width: 28px;
    height: 28px;
  }

  .collapse-toggle {
    font-size: 12px;
  }

  .add-ring {
    font-size: 15px;
  }
}

/* ── Resize handle ── */
.resize-handle {
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 12px;
  height: 12px;
  background: var(--node-color, var(--brand, #7C6FFF));
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  cursor: nwse-resize;
  z-index: 35;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s, transform .1s;
}

.map-node.selected .resize-handle {
  opacity: 1;
  pointer-events: all;
}

.map-node.editing .resize-handle {
  opacity: 0;
  pointer-events: none;
}

.resize-handle:hover {
  transform: scale(1.3);
}

.map-node.resizing {
  transition: none !important;
}

.map-node.collapsed .node-label {
  opacity: .7;
  font-style: italic;
}

/* ════════════════════════════════════════════
   NODE ACTION BAR (contextual floating pill)
   ════════════════════════════════════════════ */
.node-action-bar {
  position: absolute;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 2px;
  /* Tier 2: Glassmorphism context toolbar */
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 5px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
  pointer-events: auto;
  animation: nabIn .22s cubic-bezier(.3, .85, .3, 1);
  transition: top .12s ease-out, left .12s ease-out;
  user-select: none;
  -webkit-user-select: none;
}

.node-action-bar.hidden {
  display: none;
}

@keyframes nabIn {
  from {
    opacity: 0;
    transform: translateY(6px) scale(.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.nab-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--text-2);
  cursor: pointer;
  transition: background .12s, color .12s, transform .35s cubic-bezier(0.34, 1.56, 0.64, 1);
  padding: 0;
}

.nab-btn svg {
  width: 20px;
  height: 20px;
}

.nab-btn:hover {
  background: var(--surface2);
  color: var(--text);
  transform: scale(1.1);
}

.nab-btn:active {
  transform: scale(.84);
}

.nab-sep {
  width: 1px;
  height: 18px;
  background: var(--border);
  margin: 0 2px;
  flex-shrink: 0;
}

/* Primary action button (Edit) — subtle brand highlight */
.nab-btn.nab-primary {
  color: var(--brand, #7C6FFF);
}
.nab-btn.nab-primary:hover {
  background: rgba(124, 111, 255, 0.12);
  color: var(--brand, #7C6FFF);
}

/* Divider between action groups */
.nab-divider {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 3px;
  flex-shrink: 0;
  opacity: 0.6;
}

/* ════════════════════════════════════════════
   STYLE PICKER BAR (iThoughtsX-style bottom strip)
   ════════════════════════════════════════════ */
.style-picker-bar {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 55;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  padding: 5px 8px;
  max-width: calc(100vw - 280px);
  animation: stylePickerIn .22s cubic-bezier(.4, 0, .2, 1);
}

@keyframes stylePickerIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.style-picker-track {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  /* Hide scrollbar everywhere */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.style-picker-track::-webkit-scrollbar {
  display: none;
}

.style-swatch {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 4px 10px 4px 6px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  transition: background .13s, border-color .13s, color .13s, transform .35s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
  user-select: none;
}

.style-swatch:hover {
  background: var(--surface2);
  color: var(--text);
  transform: scale(1.04);
}

.style-swatch.active {
  border-color: var(--swatch-brand, var(--brand));
  background: color-mix(in srgb, var(--swatch-brand, var(--brand)) 12%, transparent);
  color: var(--text);
  transform: scale(1.08);
}

.style-swatch:active {
  transform: scale(0.88);
}

.style-swatch-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform .13s;
}

.style-swatch:hover .style-swatch-dot {
  transform: scale(1.15);
}

.style-swatch.active .style-swatch-dot {
  box-shadow: 0 0 0 2px var(--brand), 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ════════════════════════════════════════════
   ZOOM CONTROLS
   ════════════════════════════════════════════ */
.zoom-controls {
  position: fixed;
  bottom: 84px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px;
  box-shadow: var(--shadow);
  z-index: 12500;
  pointer-events: auto;
}

/* ════════════════════════════════════════════
   BRANCHPOINT DROP DOTS (drag-time sibling targets)
   ════════════════════════════════════════════ */
.branchpoint-dot {
  position: fixed;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(124, 111, 255, 0.30);
  border: 2px solid #7C6FFF;
  box-shadow: 0 0 0 3px rgba(124, 111, 255, 0.18),
              0 1px 4px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  z-index: 9997;
  transition: transform .12s ease, background .12s ease,
              box-shadow .12s ease, border-color .12s ease,
              width .14s ease, height .14s ease, border-radius .14s ease;
  /* Subtle pulse so the user notices targets when drag begins */
  animation: branchpointPulse 1.6s ease-in-out infinite;
}
@keyframes branchpointPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(124, 111, 255, 0.18), 0 1px 4px rgba(0,0,0,0.25); }
  50%      { box-shadow: 0 0 0 6px rgba(124, 111, 255, 0.28), 0 2px 8px rgba(0,0,0,0.30); }
}
.branchpoint-dot.hovered {
  /* iThoughtsX parity: morph from dot → horizontal insertion bar on hover */
  transform: scale(1) translate(-9px, -2px);
  width: 36px;
  height: 6px;
  border-radius: 3px;
  background: #7C6FFF;
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(124, 111, 255, 0.35),
              0 0 16px rgba(124, 111, 255, 0.65),
              0 2px 8px rgba(0, 0, 0, 0.35);
  animation: none;
}

.zoom-btn {
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: 7px;
  color: var(--text-2);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .1s, color .1s;
}

.zoom-btn:hover {
  background: var(--surface2);
  color: var(--text);
}

.zoom-label {
  width: 52px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -.2px;
}

/* ════════════════════════════════════════════
   CONTEXT MENU  (iOS ContextMenuView parity)
   ════════════════════════════════════════════ */
.context-menu {
  position: fixed;
  width: 230px;
  max-height: calc(100vh - 8px);
  max-height: calc(100dvh - 8px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .22), 0 0 0 .5px rgba(0,0,0,.08);
  z-index: 1000;
  animation: cmFadeIn .14s ease;
  overflow: hidden;
}

.context-menu.hidden { display: none; }

.cm-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.cm-scroll::-webkit-scrollbar { width: 4px; }
.cm-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

@keyframes cmFadeIn {
  from { opacity: 0; transform: scale(.96) translateY(-4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Close row ── */
.cm-close-row {
  display: flex;
  justify-content: flex-end;
  padding: 4px 6px 0;
}
.cm-close-btn {
  background: var(--surface2);
  border: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  font-size: 11px;
  line-height: 22px;
  text-align: center;
  color: var(--text-3);
  cursor: pointer;
  transition: background .12s;
}
.cm-close-btn:hover {
  background: var(--border);
  color: var(--text);
}

/* ── Standard row ── */
.cm-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  cursor: pointer;
  color: var(--text);
  font-size: 13px;
  font-weight: 400;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  transition: background .1s;
}
.cm-row:hover {
  background: var(--surface2);
}

.cm-row kbd {
  margin-left: auto;
  font-size: 10px;
  color: var(--text-3);
  font-family: ui-monospace, "SF Mono", monospace;
  opacity: .7;
}

/* ── Icon + text inside rows ── */
.cm-icon {
  font-size: 13px;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}
.cm-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cm-detail {
  color: #34c759;
  font-size: 13px;
  font-weight: 600;
  margin-left: auto;
}

/* ── Danger row (Delete) ── */
.cm-row.cm-danger {
  color: #ff4d4f;
}
.cm-row.cm-danger:hover {
  background: rgba(255, 77, 79, .1);
}

/* ── Divider ── */
.cm-divider {
  height: 1px;
  background: var(--border);
  opacity: .5;
  margin: 3px 10px;
}

/* ── Section label ── */
.cm-section-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .6px;
  padding: 6px 14px 2px;
}

/* ── Expandable row ── */
.cm-expand-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  cursor: pointer;
  color: var(--text);
  font-size: 13px;
  font-weight: 400;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  transition: background .1s;
}
.cm-expand-row:hover {
  background: var(--surface2);
}
.cm-chevron {
  margin-left: auto;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-3);
  transition: transform .18s ease;
  display: inline-block;
}
.cm-chevron-open {
  transform: rotate(90deg);
}

/* ── Expand content area ── */
.cm-expand-content {
  padding: 2px 10px 4px;
  transition: all .15s ease;
}
.cm-expand-content.hidden {
  display: none;
}

/* ── Inline pill buttons ── */
.cm-inline-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 2px 4px 4px;
}
/* Icon picker: tighter grid of emoji pills */
.cm-icon-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  padding: 4px;
}
.cm-icon-pill {
  justify-content: center;
  text-align: center;
  padding: 4px 0;
  font-size: 15px;
  min-width: 0;
}
.cm-pill {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  font-family: inherit;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text-2);
  cursor: pointer;
  transition: all .12s;
  white-space: nowrap;
}
.cm-pill:hover {
  background: var(--brand-dim);
  border-color: var(--brand);
  color: var(--brand);
}
.cm-pill.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* ── Shapes in context menu ── */
.cm-shapes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 2px 4px 4px;
}

.shape-btn {
  padding: 4px 8px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-2);
  font-size: 12px;
  font-family: inherit;
  transition: all .1s;
}
.shape-btn:hover,
.shape-btn.active {
  background: var(--brand-dim);
  border-color: var(--brand);
  color: var(--brand);
}

/* ── Colors in context menu ── */
.cm-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 4px 4px 6px;
}

.color-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform .1s, border-color .1s;
}
.color-dot:hover {
  transform: scale(1.2);
  border-color: rgba(255, 255, 255, .4);
}
.color-dot.active {
  border-color: white;
  transform: scale(1.15);
}

/* ════════════════════════════════════════════
   INSPECTOR PANEL
   ════════════════════════════════════════════ */
.inspector {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  z-index: 80;
  transform: translateX(260px);
  transition: transform .25s cubic-bezier(.4, 0, .2, 1);
  overflow: hidden;
}

.inspector.open {
  transform: translateX(0);
}

.inspector-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
}

.inspector-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-3);
  font-size: 14px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .1s;
}

.inspector-close:hover {
  background: var(--surface2);
  color: var(--text);
}

.inspector-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.insp-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.insp-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.insp-shapes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.insp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-2);
}

.insp-note {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  padding: 8px;
  resize: vertical;
  outline: none;
}

.insp-note:focus {
  border-color: var(--brand);
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: var(--surface2);
  accent-color: var(--brand);
}

/* ── Phase 1: Node meta row (tags, progress, due date) ── */
.node-meta {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 4px;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px;
  padding: 0;
  width: max-content;
  max-width: 150px;
  pointer-events: auto;
}

.node-tag-chip {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: transparent;
  line-height: 1.5;
}

.node-progress-bar {
  width: 80px;
  height: 4.5px;
  background: color-mix(in srgb, var(--node-color, var(--border)) 18%, transparent);
  border-radius: 999px;
  overflow: hidden;
}

.node-progress-fill {
  height: 100%;
  border-radius: 999px;
  transition: width .3s;
}

/* iOS-parity: due date badge with calendar icon */
.node-due-date {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #007AFF;
  background: rgba(0, 122, 255, 0.12);
  border: 1px solid rgba(0, 122, 255, 0.25);
  border-radius: 3px;
  padding: 1px 5px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 22px;
}

.node-due-date.overdue {
  color: #FF3B30;
  background: rgba(255, 59, 48, 0.12);
  border-color: rgba(255, 59, 48, 0.25);
}

.node-assignee-badge {
  font-size: 9px;
  font-weight: 700;
  color: #8B5CF6;
  background: rgba(139, 92, 246, 0.12);
  border: 1px solid rgba(139, 92, 246, 0.25);
  border-radius: 3px;
  padding: 1px 5px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 22px;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* iOS-parity: link badge */
.node-link-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: rgba(0, 150, 136, 0.15);
  border: 1px solid rgba(0, 150, 136, 0.30);
  border-radius: 3px;
  font-size: 10px;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s;
}

.node-link-badge:hover {
  background: rgba(0, 150, 136, 0.30);
}

/* ── iOS parity: Completed node ── */
.map-node.node-completed {
  opacity: 0.65;
}
.map-node.node-completed .node-label {
  color: var(--text-3, #999) !important;
}
.completed-text {
  text-decoration: line-through;
  text-decoration-color: var(--text-3, #999);
}
.node-checkbox {
  cursor: pointer;
  font-size: 0.85em;
  opacity: 0.5;
  transition: opacity .15s;
}
.node-checkbox.checked {
  opacity: 1;
}
.node-checkbox:hover {
  opacity: 1;
}

/* ── iOS parity: Note indicator badge ── */
.node-note-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: rgba(255, 204, 0, 0.20);
  border: 1px solid rgba(255, 204, 0, 0.35);
  border-radius: 3px;
  font-size: 10px;
  cursor: pointer;
}

/* ════════════════════════════════════════════
   POMODORO OVERLAY  (iOS PomodoroView parity)
   ════════════════════════════════════════════ */
.pomodoro-overlay {
  position: fixed;
  bottom: 80px;
  right: 16px;
  z-index: 900;
  animation: pomFadeIn .22s ease;
}
@keyframes pomFadeIn {
  from { opacity: 0; transform: translateY(12px) scale(.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.pomo-card {
  width: 180px;
  padding: 14px 16px;
  background: var(--surface);
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18), 0 0 0 .5px rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: inherit;
}

.pomo-node-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pomo-circle-wrap {
  position: relative;
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pomo-circle {
  position: absolute;
  inset: 0;
  width: 90px;
  height: 90px;
}
.pomo-time {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-family: 'SF Mono', 'Fira Code', ui-monospace, monospace;
  color: var(--text);
  z-index: 1;
  line-height: 1;
}
.pomo-phase {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  position: absolute;
  bottom: 14px;
  z-index: 1;
}

.pomo-sessions {
  font-size: 14px;
  line-height: 1;
  min-height: 16px;
}

.pomo-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pomo-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text-2);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .12s;
}
.pomo-btn:hover { background: var(--surface3, var(--border)); }
.pomo-btn-main {
  width: 40px;
  height: 40px;
  font-size: 18px;
  background: var(--brand, #7C6FFF);
  color: #fff;
  border-color: transparent;
}
.pomo-btn-main:hover { opacity: .85; background: var(--brand, #7C6FFF); }

.pomo-hint {
  font-size: 9px;
  color: var(--text-3, rgba(128,128,128,.6));
  text-align: center;
}

/* ── iOS parity: Pomodoro count badge ── */
.node-pomo-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 22px;
  padding: 0 6px;
  background: rgba(255, 59, 48, 0.15);
  border: 1px solid rgba(255, 59, 48, 0.30);
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  color: #FF3B30;
  cursor: pointer;
}

/* ── Clickable indicator hover states ── */
.clickable-indicator {
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.clickable-indicator:hover {
  transform: scale(1.15);
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.clickable-indicator:active {
  transform: scale(0.95);
}

/* ════════════════════════════════════════════
   NOTE EDITOR PANEL (iOS Sticky Note parity)
   ════════════════════════════════════════════ */
.note-editor-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000;
  width: 380px;
  max-width: 90vw;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,.25), 0 0 0 1px rgba(0,0,0,.05);
  animation: noteEditorIn .22s cubic-bezier(.4, 0, .2, 1);
  overflow: hidden;
}
@keyframes noteEditorIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.92); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.note-editor-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border);
}
.note-editor-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.note-editor-node-name {
  flex: 1;
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.note-editor-close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface2);
  border: none;
  border-radius: 50%;
  color: var(--text-3);
  cursor: pointer;
  font-size: 14px;
  transition: background .12s;
}
.note-editor-close:hover {
  background: var(--border);
  color: var(--text);
}
.note-editor-textarea {
  display: block;
  width: calc(100% - 32px);
  margin: 12px 16px;
  min-height: 100px;
  max-height: 300px;
  padding: 10px 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 14px;
  font-family: -apple-system, system-ui, sans-serif;
  line-height: 1.5;
  resize: vertical;
  outline: none;
  transition: border-color .15s;
}
.note-editor-textarea:focus {
  border-color: var(--brand, #7C6FFF);
}
.note-editor-textarea::placeholder {
  color: var(--text-3);
}
.note-editor-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 16px 14px;
  border-top: 1px solid var(--border);
}
.note-editor-btn {
  padding: 7px 18px;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, transform .12s;
}
.note-editor-btn:active {
  transform: scale(.96);
}
.note-editor-save {
  background: var(--brand, #7C6FFF);
  color: #fff;
}
.note-editor-save:hover {
  filter: brightness(1.1);
}
.note-editor-remove {
  background: transparent;
  color: #FF3B30;
}
.note-editor-remove:hover {
  background: rgba(255, 59, 48, 0.1);
}

/* ── Delete button in action bar ── */
.nab-delete-btn:hover {
  color: #FF3B30 !important;
  background: rgba(255, 59, 48, 0.1) !important;
}

/* ── iOS parity: Assignee badge ── */
.node-assignee-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 6px;
  background: color-mix(in srgb, var(--node-color, #888) 15%, transparent);
  border: 0.5px solid color-mix(in srgb, var(--node-color, #888) 30%, transparent);
  border-radius: 3px;
  font-size: 10px;
  font-weight: 800;
  color: color-mix(in srgb, var(--node-color, #888) 90%, transparent);
}

/* ── iOS parity: Collapse/expand spring animation on children ──
   IMPORTANT: left/top are NOT transitioned here. Position animation
   is exclusively handled by the JS requestAnimationFrame lerp loop
   in canvas.js render(). CSS-transitioning left/top causes the browser
   to fight the JS loop (two competing curves), producing jitter and
   overshoot that makes nodes disappear off-screen during reparent. ── */
.map-node {
  transition: transform 0.35s cubic-bezier(0.3, 0.85, 0.3, 1),
              opacity 0.25s ease,
              background 0.12s,
              box-shadow 0.25s,
              border-color 0.15s;
}

/* Suppress ALL transitions during active drag for instant cursor-tracking */
.map-node.dragging {
  transition: none !important;
}

/* ── iThoughtsX-style "lift" while a node is being dragged ──
   Replaces the old opacity:0.7 dim with a true elevation effect:
   slight scale-up, dramatic drop-shadow, brand-tinted ring, and a
   z-index boost so the dragged branch floats above the rest of the
   map. transform-origin centers the scale on the node's anchor.   */
.map-node.drag-lift {
  z-index: 9999 !important;
  transform-origin: 50% 50%;
  transform: translate(-50%, -50%) scale(1.06);
  filter:
    drop-shadow(0 14px 28px rgba(0, 0, 0, 0.30))
    drop-shadow(0 6px 10px rgba(124, 111, 255, 0.35));
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  cursor: grabbing !important;
}
.map-node.drag-lift .node-text { color: var(--text); }

/* Edges & sub-nodes that belong to the dragged branch should track the
   cursor as a unit — animate them off briefly, lerp resumes on release. */
.map-node.drag-lift,
.map-node.drag-lift * {
  transition: none !important;
}

/* ── Link-drag (alt-drag to create relationship arrow) ── */
body.link-dragging,
body.link-dragging * {
  cursor: crosshair !important;
}
.map-node.link-target-hover {
  outline: 2.5px dashed #C77DFF !important;
  outline-offset: 4px;
  box-shadow: 0 0 0 4px rgba(199, 125, 255, 0.18), 0 6px 18px rgba(199, 125, 255, 0.35);
  transition: outline-offset 0.12s ease, box-shadow 0.12s ease;
}

/* ── Inspector Phase 1 new controls ── */
.insp-input {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  padding: 6px 8px;
  outline: none;
  transition: border-color .15s;
}

.insp-input:focus {
  border-color: var(--brand);
}

.insp-style-btn {
  padding: 5px 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-2);
  font-size: 13px;
  font-family: inherit;
  transition: all .1s;
}

.insp-style-btn.active,
.insp-style-btn:hover {
  background: rgba(124, 111, 255, .15);
  border-color: var(--brand);
  color: var(--brand);
}

.priority-btn {
  padding: 4px 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  color: var(--text-2);
  font-size: 11px;
  font-family: inherit;
  transition: all .1s;
}

.priority-btn.active {
  background: rgba(124, 111, 255, .15);
  border-color: var(--brand);
  color: var(--brand);
}

.insp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 8px;
}

.insp-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(124, 111, 255, .12);
  color: var(--brand);
  cursor: pointer;
}

.insp-tag-chip:hover {
  background: rgba(255, 80, 80, .15);
  color: #ff5050;
}

/* ════════════════════════════════════════════
   PHASE 2: BOUNDARY REGIONS
   ════════════════════════════════════════════ */
.boundary-region {
  position: absolute;
  transform: translate(-50%, -50%);
  border: 2px dashed var(--brand);
  border-radius: 18px;
  pointer-events: none;
  z-index: 5;
  font-size: 10px;
  font-weight: 600;
  color: var(--brand);
  padding: 2px 8px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  transition: border-width 120ms, box-shadow 120ms;
}
.boundary-region .boundary-label {
  pointer-events: auto;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(255,255,255,0.6);
  user-select: none;
}
.boundary-region .boundary-label:hover {
  background: rgba(255,255,255,0.9);
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
.boundary-region.selected {
  border-width: 3px;
  box-shadow: 0 0 0 2px currentColor, 0 4px 16px rgba(0,0,0,0.15);
}
.boundary-region.selected .boundary-label {
  background: currentColor;
  color: #fff;
}

/* Multi-select ring */
.map-node.multi-selected {
  box-shadow: 0 0 0 3px #FFD166, 0 4px 20px rgba(0, 0, 0, 0.35);
  z-index: 18;
}

/* Search highlight */
.map-node.search-match {
  box-shadow: 0 0 0 3px #52D9A0, 0 4px 20px rgba(0, 0, 0, 0.35);
}

.map-node.search-current {
  box-shadow: 0 0 0 4px #FF9F43, 0 4px 24px rgba(255, 159, 67, 0.4);
  transform: translate(-50%, -50%) scale(1.04);
  z-index: 25;
}

/* ════════════════════════════════════════════
   PHASE 2: SEARCH OVERLAY
   ════════════════════════════════════════════ */
.search-overlay {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  animation: fadeScaleIn .15s ease;
}

.search-overlay.hidden {
  display: none;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  min-width: 320px;
}

.search-icon {
  font-size: 14px;
  margin-right: 2px;
  flex-shrink: 0;
}

.search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
}

.search-count {
  font-size: 11px;
  color: var(--text-3);
  margin: 0 4px;
  white-space: nowrap;
}

.search-nav {
  width: 26px;
  height: 26px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-2);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .1s;
}

.search-nav:hover {
  background: var(--brand-dim);
  border-color: var(--brand);
  color: var(--brand);
}

.search-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-3);
  font-size: 13px;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color .1s;
}

.search-close:hover {
  color: var(--text);
}

/* ════════════════════════════════════════════
   PHASE 3: OUTLINE PANEL
   ════════════════════════════════════════════ */
.outline-panel {
  position: fixed;
  top: 52px;
  right: 0;
  bottom: 0;
  width: 280px;
  background: var(--surface);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 150;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.18);
  transition: transform .22s ease;
}

.outline-panel.hidden {
  transform: translateX(100%);
  pointer-events: none;
}

.outline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.outline-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-3);
  font-size: 13px;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color .1s;
}

.outline-close:hover {
  color: var(--text);
}

.outline-body {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
}

.outline-row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px 5px 8px;
  cursor: pointer;
  border-radius: 6px;
  margin: 0 4px;
  transition: background .1s;
}

.outline-row:hover {
  background: var(--surface2);
}

.outline-row.outline-selected {
  background: rgba(124, 111, 255, 0.1);
  color: var(--brand);
}

.outline-toggle {
  font-size: 11px;
  color: var(--text-3);
  flex-shrink: 0;
  width: 12px;
  text-align: center;
  user-select: none;
}

.outline-label {
  font-size: 13px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.outline-badge {
  font-size: 10px;
  color: var(--text-3);
  background: var(--surface2);
  border-radius: 4px;
  padding: 1px 5px;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════
   SHORTCUT HINT BAR
   ════════════════════════════════════════════ */
.shortcut-hint {
  position: absolute;
  bottom: 18px;
  left: 18px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--text-3);
  pointer-events: none;
  z-index: 40;
}

.shortcut-hint kbd {
  font-family: inherit;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 10px;
  color: var(--text-2);
  margin-right: 2px;
}

/* ════════════════════════════════════════════
   TOAST
   ════════════════════════════════════════════ */
.toast {
  position: fixed;
  bottom: 120px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  color: var(--text);
  box-shadow: var(--shadow);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  white-space: nowrap;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ════════════════════════════════════════════
   SCROLLBARS
   ════════════════════════════════════════════ */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-3);
}

/* ════════════════════════════════════════════
   ANIMATIONS
   ════════════════════════════════════════════ */
/* NOTE: nodeAppear is defined once near line 1125 (iOS parity version).
   The duplicate that was here has been removed to prevent conflicts. */

.shape-diamond {
  animation: none;
}

.shape-diamond {
  animation: diamondAppear .18s cubic-bezier(.4, 0, .2, 1);
}

@keyframes diamondAppear {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(45deg) scale(.8);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(45deg) scale(1);
  }
}

/* Edge animation */
.mindmap-edge {
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: edgeDraw .3s ease forwards;
}

@keyframes edgeDraw {
  to {
    stroke-dashoffset: 0;
  }
}

/* Panning cursor */
body.panning {
  cursor: grabbing !important;
}

body.panning .canvas-container,
body.panning .canvas-container * {
  cursor: grabbing !important;
}

/* During pan, prevent text-selection and accidental clicks on nodes */
body.panning .canvas-world {
  pointer-events: none;
}

/* ── iThoughtsX parity: suppress expensive per-node effects during pan/drag ──
   box-shadow + backdrop-filter are the heaviest paint operations. While
   the user is actively moving the canvas we don't need them. Restored
   instantly on idle. Yields a measurable FPS win on dense maps. */
body.panning .map-node,
body.is-dragging .map-node {
  box-shadow: none !important;
  transition: none !important;
  animation: none !important;
}
body.panning .map-node *,
body.is-dragging .map-node * {
  transition: none !important;
  animation: none !important;
}
body.is-dragging,
body.is-dragging * {
  cursor: grabbing !important;
}

/* ════════════════════════════════════════════
   FIND BAR (⌘F) — iThoughtsX-style top-right
   ════════════════════════════════════════════ */
.doxmap-find-bar {
  position: fixed;
  top: 60px;
  right: 24px;
  z-index: 99998;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: var(--surface, #fff);
  color: var(--text, #111);
  border: 1px solid var(--border, rgba(128,128,128,.25));
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18), 0 1px 2px rgba(0,0,0,.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: findBarIn .22s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes findBarIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.doxmap-find-bar input {
  width: 220px;
  padding: 6px 8px;
  background: transparent;
  border: none;
  outline: none;
  color: inherit;
  font-size: 13px;
  font-family: inherit;
}
.doxmap-find-bar .find-count {
  font-size: 11px;
  color: var(--text-2, #888);
  padding: 0 4px;
  font-variant-numeric: tabular-nums;
  min-width: 44px;
  text-align: center;
}
.doxmap-find-bar button {
  width: 26px; height: 26px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-2, #888);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s, border-color .12s;
}
.doxmap-find-bar button:hover {
  background: var(--surface2, rgba(128,128,128,.10));
  color: var(--text, #111);
  border-color: var(--border, rgba(128,128,128,.20));
}
.doxmap-find-bar .find-close {
  font-size: 18px;
}

/* ════════════════════════════════════════════
   FIREBASE SYNC UI
   ════════════════════════════════════════════ */

/* Sync badge in toolbar */
.sync-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 6px;
  height: 30px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 7px;
}

.sync-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #888;
  box-shadow: 0 0 4px currentColor;
  flex-shrink: 0;
  transition: background .3s;
}

.sync-code-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-2);
  font-family: 'SF Mono', 'Fira Code', monospace;
}

/* Sync modal overlay */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn .15s ease;
}

.modal-overlay.hidden {
  display: none;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.modal-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  width: 360px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  animation: fadeScaleIn .18s ease;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  font-weight: 700;
}

.modal-header button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-3);
  font-size: 16px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .1s;
}

.modal-header button:hover {
  background: var(--surface2);
  color: var(--text);
}

.modal-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.modal-desc,
.modal-hint {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
}

.modal-hint {
  font-size: 12px;
  margin-top: 4px;
}

/* Sync code input row */
.sync-code-row {
  display: flex;
  gap: 6px;
}

.sync-code-input {
  flex: 1;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 7px 12px;
  outline: none;
  text-transform: uppercase;
  transition: border-color .15s;
}

.sync-code-input:focus {
  border-color: var(--brand);
}

/* Primary button */
.tb-btn.primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 600;
}

.tb-btn.primary:hover {
  background: color-mix(in srgb, var(--brand) 85%, white);
}

/* Sync status row */
.sync-status-row {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  min-height: 20px;
}

/* ════════════════════════════════════════════
   PHASE 4: THEME POPUP
   ════════════════════════════════════════════ */
.theme-popup {
  position: absolute;
  top: 48px;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(7, 40px);
  gap: 8px;
  z-index: 300;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
}

.theme-popup.hidden {
  display: none;
}

.theme-swatch {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: 2.5px solid transparent;
  cursor: pointer;
  transition: transform .12s, border-color .12s;
  position: relative;
  overflow: hidden;
}

.theme-swatch:hover {
  transform: scale(1.12);
}

.theme-swatch.active {
  border-color: var(--brand);
}

.theme-swatch-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 7px;
  font-weight: 700;
  color: rgba(255, 255, 255, .8);
  background: rgba(0, 0, 0, .4);
  text-align: center;
  padding: 1px 0;
  line-height: 1.3;
}

/* ── Dimmed nodes (presentation) ── */
.node-el.dimmed {
  opacity: 0.08 !important;
  filter: blur(0.5px);
  transition: opacity .3s, filter .3s;
}

/* ════════════════════════════════════════════
   PHASE 4: PRESENTATION OVERLAY
   ════════════════════════════════════════════ */
.present-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  flex-direction: column;
  z-index: 500;
  pointer-events: all;
}

/* ── Action Center Wrapper ── */
.action-center {
  position: fixed;
  bottom: 0;
  left: 14px;
  width: auto;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  pointer-events: none;
  z-index: 12000;
}

/* ── Action Pill (Pill-style Nav — matches iOS bottom bar) ── */
.action-pill {
  /* Stronger opacity so the pill stays clearly visible over any map
     background (light, dark, busy, photo backgrounds). */
  background: rgba(20, 20, 28, 0.88);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.22);
  height: auto;
  padding: 4px 6px;
  border-radius: 26px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 2px;
  pointer-events: auto !important;
  /* Layered shadow + brand-tinted glow for crisp definition on any bg. */
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.30),
    0 0 0 1px rgba(124, 111, 255, 0.18);
  margin-bottom: 14px;
  transition: all 0.4s var(--spring-easing);
  width: auto;
  position: relative;
  z-index: 12000;
}
[data-theme="light"] .action-pill {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.18),
    0 2px 6px rgba(0, 0, 0, 0.10),
    0 0 0 1px rgba(124, 111, 255, 0.22);
}

.action-pill-btn {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  flex: 0 0 44px !important;
  border-radius: 10px;
  border: none;
  background: transparent;
  /* Force high-contrast icon color regardless of theme tokens that may
     leave it nearly invisible. */
  color: #ffffff;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  padding: 0;
}
[data-theme="light"] .action-pill-btn {
  color: #1a1a1a;
}

.action-pill-btn svg {
  width: 22px;
  height: 22px;
  transition: transform 0.2s var(--spring-easing);
  pointer-events: none;
  /* Slight drop shadow makes white/black icons pop on translucent pill. */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}
[data-theme="light"] .action-pill-btn svg {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18));
}

.action-pill-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

.action-pill-btn.active {
  color: var(--brand);
}

.action-pill-btn.active svg {
  transform: scale(1.08);
}

/* ── Action Drawer (The Expandable Panel) ── */
.action-drawer {
  width: 340px;
  max-width: 420px;
  background: var(--glass-bg);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  height: 0;
  pointer-events: none;
  overflow: hidden;
  transition: height 0.5s var(--spring-easing);
  box-shadow: 0 -10px 40px rgba(0,0,0,0.4);
}

.action-drawer.is-half,
.action-drawer.is-full {
  pointer-events: auto;
}

.action-drawer.is-half {
  height: var(--drawer-h-half);
}

.action-drawer.is-full {
  height: var(--drawer-h-full);
}

/* Light theme: white drawer with subtle shadow */
[data-theme="light"] .action-drawer {
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.1);
}

.drawer-handle {
  width: 36px;
  height: 5px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  margin: 12px auto;
  cursor: grab;
  min-height: 5px;
}

.present-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.present-badge {
  font-size: 11px;
  font-weight: 700;
  color: var(--brand);
  background: rgba(124, 111, 255, .13);
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: .04em;
}

.present-counter {
  font-size: 12px;
  color: rgba(255, 255, 255, .4);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.present-close {
  background: none;
  border: 1px solid rgba(255, 255, 255, .15);
  color: rgba(255, 255, 255, .5);
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
  margin-left: 12px;
}

.present-close:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, .4);
}

.present-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 60px;
  gap: 20px;
}

.present-title {
  font-size: clamp(22px, 3.5vw, 44px);
  font-weight: 700;
  color: #fff;
  text-align: center;
  line-height: 1.25;
  max-width: 800px;
}

.present-note {
  font-size: clamp(14px, 1.8vw, 18px);
  color: rgba(255, 255, 255, .55);
  text-align: center;
  max-width: 640px;
  background: rgba(255, 255, 255, .05);
  padding: 14px 24px;
  border-radius: 12px;
  line-height: 1.6;
}

.present-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 16px 24px 32px;
  border-top: 1px solid rgba(255, 255, 255, .06);
}

.present-btn {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .8);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .14s, transform .1s;
}

.present-btn:hover {
  background: rgba(255, 255, 255, .12);
  transform: scale(1.04);
}

.present-btn-next {
  background: var(--brand);
  border-color: transparent;
  color: #fff;
}

.present-btn-next:hover {
  background: color-mix(in srgb, var(--brand) 85%, #fff);
}

.present-hint {
  font-size: 11px;
  color: rgba(255, 255, 255, .28);
  text-align: center;
}

/* canvas shrinks when presentation is open */
.canvas-container.presentation-mode {
  filter: brightness(0.4);
}

/* ════════════════════════════════════════════
   AUTH GATE OVERLAY
   ════════════════════════════════════════════ */
.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: linear-gradient(135deg, #0b0d16 0%, #111527 60%, #0f111e 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  animation: gateFadeIn .35s ease;
}

.auth-gate.hidden {
  display: none;
}

@keyframes gateFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.auth-gate-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.auth-gate-brand svg {
  width: 56px;
  height: 56px;
  color: var(--brand);
  filter: drop-shadow(0 0 18px var(--brand-glow));
}

.auth-gate-brand h1 {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.8px;
  background: linear-gradient(135deg, var(--brand) 0%, #a78bfa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.auth-gate-brand p {
  font-size: 15px;
  color: rgba(255, 255, 255, .45);
  letter-spacing: -.2px;
}

.auth-gate-card {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 20px;
  padding: 36px 40px;
  width: 380px;
  max-width: 92vw;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}

/* ════════════════════════════════════════════
   AUTH MODAL (floating)
   ════════════════════════════════════════════ */
.auth-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1500;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadein .18s ease;
}

.auth-modal-overlay.hidden {
  display: none;
}

.auth-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px;
  width: 360px;
  max-width: 92vw;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  animation: fadeScaleIn .18s ease;
}

/* Tab switcher */
.auth-tabs {
  display: flex;
  gap: 2px;
  background: var(--surface2);
  border-radius: 10px;
  padding: 3px;
}

.auth-tab {
  flex: 1;
  padding: 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, color .12s;
}

.auth-tab.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}

/* Inputs */
.auth-input {
  width: 100%;
  padding: 10px 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color .14s;
}

.auth-input:focus {
  border-color: var(--brand);
}

.auth-input::placeholder {
  color: var(--text-3);
}

/* Primary button */
.auth-btn-primary {
  width: 100%;
  padding: 12px;
  background: var(--brand);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .14s, transform .1s, box-shadow .14s;
  box-shadow: 0 4px 16px rgba(124, 111, 255, .4);
}

.auth-btn-primary:hover {
  background: color-mix(in srgb, var(--brand) 85%, #fff);
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(124, 111, 255, .5);
}

.auth-btn-primary:active {
  transform: scale(.97);
}

.auth-btn-primary:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}

/* Google button */
.auth-btn-google {
  width: 100%;
  padding: 11px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background .12s, border-color .12s, transform .1s;
}

.auth-btn-google:hover {
  background: var(--surface);
  border-color: var(--brand);
  transform: translateY(-1px);
}

.auth-btn-google svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.auth-error {
  font-size: 12px;
  color: #ff6b6b;
  text-align: center;
  min-height: 16px;
}

.auth-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  color: var(--text-3);
  font-size: 18px;
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-modal-close:hover {
  background: var(--surface2);
  color: var(--text);
}

.auth-modal-wrap {
  position: relative;
}

.auth-footer-link {
  font-size: 11px;
  color: var(--text-3);
  text-align: center;
}

.auth-footer-link button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--brand);
  font-size: inherit;
  font-family: inherit;
  padding: 0;
  text-decoration: underline;
}

/* ════════════════════════════════════════════
   USER AVATAR BUTTON (toolbar)
   ════════════════════════════════════════════ */
.user-avatar-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--brand);
  background: var(--brand-dim);
  color: var(--brand);
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .14s, box-shadow .14s;
  flex-shrink: 0;
  position: relative;
}

.user-avatar-btn:hover {
  box-shadow: 0 0 0 3px var(--brand-glow);
}

.user-avatar-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.user-avatar-btn.signed-out {
  border-color: var(--border);
  background: var(--surface2);
  color: var(--text-2);
}

/* dropdown from avatar */
.user-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 900;
  animation: fadeScaleIn .12s ease;
}

.user-menu.hidden {
  display: none;
}

.user-menu-info {
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}

.user-menu-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-menu-email {
  font-size: 11px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 7px;
  cursor: pointer;
  color: var(--text-2);
  font-size: 13px;
  transition: background .1s, color .1s;
  border: none;
  background: none;
  width: 100%;
  font-family: inherit;
  text-align: left;
}

.user-menu-item:hover {
  background: var(--surface2);
  color: var(--text);
}

.user-menu-item.danger:hover {
  background: rgba(255, 80, 80, .12);
  color: #ff5050;
}

/* ════════════════════════════════════════════
   LIBRARY PANEL
   ════════════════════════════════════════════ */
.library-panel {
  position: fixed;
  top: var(--tb-h);
  left: 0;
  bottom: 0;
  width: 280px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  z-index: 300;
  display: flex;
  flex-direction: column;
  transform: translateX(-284px);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
  box-shadow: 4px 0 24px rgba(0, 0, 0, .3);
}

.library-panel.open {
  transform: translateX(0);
}

.library-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.lib-card.dragging {
  opacity: 0.5;
  transform: scale(0.95);
  border: 2px dashed var(--brand);
}

.lib-folder-header.drag-over {
  background: color-mix(in srgb, var(--brand) 15%, transparent);
  color: var(--brand);
  border-radius: 8px;
  padding-left: 12px;
  transition: all 0.2s ease;
}

.library-header h2 {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.library-header-actions {
  display: flex;
  gap: 4px;
}

.lib-close-btn {
  background: none;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  font-size: 16px;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .1s;
}

.lib-close-btn:hover {
  background: var(--surface2);
  color: var(--text);
}

.library-new-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: calc(100% - 28px);
  margin: 12px 14px 8px;
  padding: 9px 12px;
  background: var(--brand-dim);
  border: 1px dashed var(--brand);
  border-radius: 10px;
  color: var(--brand);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, border-style .12s;
  flex-shrink: 0;
}

.library-new-btn:hover {
  background: rgba(124, 111, 255, .2);
  border-style: solid;
}

.library-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.library-list::-webkit-scrollbar {
  width: 4px;
}

.library-list::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 2px;
}

.library-empty {
  text-align: center;
  color: var(--text-3);
  font-size: 12px;
  padding: 40px 16px;
  line-height: 1.6;
}

/* Map card */
.map-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .12s;
  position: relative;
}

.map-card:hover {
  background: var(--surface2);
}

.map-card.active {
  background: var(--brand-dim);
}

.map-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--surface2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 15px;
  color: var(--brand);
}

.map-card.active .map-card-icon {
  background: var(--brand-dim);
  border-color: var(--brand);
}

.map-card-info {
  flex: 1;
  min-width: 0;
}

.map-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.map-card.active .map-card-title {
  color: var(--brand);
}

.map-card-meta {
  font-size: 10px;
  color: var(--text-3);
  margin-top: 2px;
}

.map-card-delete {
  opacity: 0;
  background: none;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  font-size: 13px;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .12s, background .1s, color .1s;
  flex-shrink: 0;
}

.map-card:hover .map-card-delete {
  opacity: 1;
}

.map-card-delete:hover {
  background: rgba(255, 80, 80, .14);
  color: #ff5050;
}

/* Library toggle button in toolbar */
.library-toggle-btn.active {
  background: var(--brand-dim);
  border-color: var(--brand);
  color: var(--brand);
}

/* Shift canvas right when panel is open */
.canvas-container.library-open {
  margin-left: 280px;
  transition: margin-left .28s cubic-bezier(.4, 0, .2, 1);
}

/* ── Library user avatar area ─── */
.library-user-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.library-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand-dim);
  border: 1.5px solid var(--brand);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: var(--brand);
  flex-shrink: 0;
}

.library-user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.library-user-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.library-signout-btn {
  background: none;
  border: none;
  font-size: 11px;
  color: var(--text-3);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 5px;
  font-family: inherit;
  transition: background .1s, color .1s;
}

.library-signout-btn:hover {
  background: rgba(255, 80, 80, .1);
  color: #ff6b6b;
}

/* ════════════════════════════════════════════
   TEMPLATE PICKER MODAL
   ════════════════════════════════════════════ */
.template-modal-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  width: min(680px, 94vw);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .5);
  overflow: hidden;
}

.template-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  font-size: 16px;
  font-weight: 600;
  flex-shrink: 0;
}

.template-modal-header button {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--text-2);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}

.template-modal-header button:hover {
  background: var(--hover-bg);
}

.template-modal-body {
  overflow-y: auto;
  padding: 18px 22px;
}

.tmpl-cat-header {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 14px 0 8px;
}

.tmpl-cat-header:first-child {
  margin-top: 0;
}

.tmpl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 4px;
}

.tmpl-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 10px 14px;
  background: var(--hover-bg);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .12s;
  font-family: inherit;
  color: var(--text-1);
}

.tmpl-card:hover {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border-color: var(--accent);
  transform: translateY(-2px);
}

.tmpl-emoji {
  font-size: 26px;
  line-height: 1;
}

.tmpl-name {
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  line-height: 1.3;
  color: var(--text-1);
}

/* ════════════════════════════════════════════
   AUTH OFFLINE BUTTON
   ════════════════════════════════════════════ */
.auth-btn-offline {
  margin-top: 10px;
  background: none;
  border: none;
  padding: 6px 0;
  font-size: 12px;
  color: var(--text-3, #888);
  cursor: pointer;
  font-family: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .15s;
  width: 100%;
  text-align: center;
}

.auth-btn-offline:hover {
  color: var(--text-2, #aaa);
}

/* ════════════════════════════════════════════
   SVG EDGE DRAW-ON ANIMATION
   New edges fade+draw when first added
   ════════════════════════════════════════════ */
@keyframes edgeDrawOn {
  from {
    opacity: 0;
    transform: scaleX(0.85);
  }

  to {
    opacity: 0.8;
    transform: scaleX(1);
  }
}

.edge-new {
  transform-origin: left center;
  animation: edgeDrawOn .28s cubic-bezier(.4, 0, .2, 1) forwards;
}

/* ════════════════════════════════════════════
   NODE IMAGE THUMBNAIL
   ════════════════════════════════════════════ */
.node-image {
  width: 100%;
  max-width: 120px;
  height: 56px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
  margin-bottom: 4px;
  pointer-events: none;
  user-select: none;
  user-drag: none;
  -webkit-user-drag: none;
}

.map-node.root-node .node-image {
  max-width: 160px;
  height: 72px;
}

/* ════════════════════════════════════════════
   SYNC STATUS DOT — enlarged hover target
   ════════════════════════════════════════════ */
#sync-status-dot {
  cursor: default;
  position: relative;
}

#sync-status-dot::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 11px;
  padding: 4px 8px;
  background: var(--surface, #1e2436);
  color: var(--text, #eee);
  border: 1px solid var(--border, #333);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
  z-index: 200;
}

#sync-status-dot:hover::after {
  opacity: 1;
}

/* ════════════════════════════════════════════
   SAVE STATUS PILL — visible "Saved Xs ago" indicator
   ════════════════════════════════════════════ */
.save-status-pill {
  position: fixed;
  bottom: 18px;
  left: 18px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 8px;
  background: var(--surface, rgba(30, 36, 54, 0.86));
  color: var(--text-2, #ccc);
  border: 1px solid var(--border, rgba(255,255,255,.08));
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .01em;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  pointer-events: none;
  user-select: none;
  opacity: .85;
  transition: opacity .15s ease;
}

.save-status-pill:hover {
  opacity: 1;
}

.save-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #888;
  flex-shrink: 0;
  /* Note: the ::after tooltip from #sync-status-dot still applies but
     is redundant with the visible pill text — keep for accessibility. */
}

@media (max-width: 600px) {
  .save-status-pill {
    bottom: 10px;
    left: 10px;
    font-size: 10px;
    padding: 4px 8px 4px 7px;
  }
}

/* Pulse animation when remote sync update arrives */
#sync-status-dot.sync-pulse {
  animation: syncPulse 1.2s ease-out;
}
@keyframes syncPulse {
  0% { box-shadow: 0 0 0 0 rgba(82, 217, 160, 0.7); }
  50% { box-shadow: 0 0 0 8px rgba(82, 217, 160, 0); }
  100% { box-shadow: 0 0 0 0 rgba(82, 217, 160, 0); }
}

/* ════════════════════════════════════════════
   LASSO MULTI-SELECT
   ════════════════════════════════════════════ */
.lasso-rect {
  position: fixed;
  display: none;
  border: 1.5px dashed var(--accent, #7c6fff);
  background: color-mix(in srgb, var(--accent, #7c6fff) 10%, transparent);
  border-radius: 4px;
  pointer-events: none;
  z-index: 8000;
  animation: lassoAppear .1s ease;
}

@keyframes lassoAppear {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* ════════════════════════════════════════════
   FOCUS / DRILL-DOWN MODE BANNER
   ════════════════════════════════════════════ */
.focus-mode-banner {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 18px 6px 14px;
  background: color-mix(in srgb, var(--brand, #7c6fff) 90%, black);
  color: #fff;
  font-size: 12.5px;
  font-weight: 500;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .35);
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.focus-mode-banner.hidden {
  display: none;
}

.focus-mode-banner button {
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 6px;
  color: #fff;
  font-size: 11px;
  font-family: inherit;
  padding: 3px 10px;
  cursor: pointer;
  transition: background .12s;
}

.focus-mode-banner button:hover {
  background: rgba(255, 255, 255, .3);
}

/* ════════════════════════════════════════════
   FLOATING TOPICS
   ════════════════════════════════════════════ */
.map-node.floating {
  border-style: dashed !important;
  opacity: 0.92;
}

/* ════════════════════════════════════════════
   CALLOUT NODE SHAPE (speech bubble)
   ════════════════════════════════════════════ */
.map-node.shape-callout {
  border-radius: 10px;
  position: relative;
}

.map-node.shape-callout::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 20px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 4px solid transparent;
  border-top: 10px solid var(--node-color, var(--accent));
  pointer-events: none;
}

/* ════════════════════════════════════════════
   QUICK ENTRY PANEL
   ════════════════════════════════════════════ */
.quick-entry-panel {
  position: fixed;
  z-index: 9500;
  background: var(--surface, #1e2436);
  border: 1.5px solid var(--border, #333);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .45);
  padding: 12px 14px 14px;
  min-width: 300px;
  max-width: 420px;
  animation: qeAppear .15s cubic-bezier(.4, 0, .2, 1);
}

@keyframes qeAppear {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.qe-label {
  font-size: 11px;
  color: var(--text-3, #888);
  margin-bottom: 8px;
  line-height: 1.4;
}

.qe-label kbd {
  display: inline-block;
  padding: 1px 5px;
  border: 1px solid var(--border, #555);
  border-radius: 4px;
  font-size: 10px;
  background: var(--surface2, #2a2d3e);
  color: var(--text-2, #bbb);
  font-family: inherit;
}

.qe-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--input-bg, var(--surface2));
  border: 1.5px solid var(--border, #333);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--text, #eee);
  font-family: inherit;
  outline: none;
  transition: border-color .15s;
}

.qe-input:focus {
  border-color: var(--accent, #7c6fff);
}

/* ════════════════════════════════════════════
   BOTTOM ACTION BAR (iOS parity)
   ════════════════════════════════════════════ */
.bottom-action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

.bottom-action-bar>* {
  pointer-events: auto;
}

.bab-sep {
  height: 1px;
  background: var(--border);
}

/* ── Tab row ── */
.bab-tabs {
  display: flex;
  justify-content: center;
  gap: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 4px 8px;
  padding-bottom: max(4px, env(safe-area-inset-bottom));
}

.bab-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 5px 8px 3px;
  border: none;
  background: none;
  color: var(--text-3);
  cursor: pointer;
  border-radius: 8px;
  transition: color .12s, background .12s;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

.bab-tab svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.bab-tab span {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .2px;
}

.bab-tab:hover {
  color: var(--text-2);
  background: var(--hover-bg);
}

.bab-tab.active {
  color: var(--brand);
  background: var(--brand-dim);
}

/* ── Expandable panel (above tabs) ── */
.bab-panel {
  background: var(--surface);
  border-top: 1px solid var(--border);
  animation: babPanelIn .18s ease;
  overflow: hidden;
}

.bab-panel.hidden {
  display: none;
}

@keyframes babPanelIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.bab-panel-scroll {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.bab-panel-scroll::-webkit-scrollbar {
  display: none;
}

/* ── Panel button shared styles ── */
.bab-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface2);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, color .12s, border-color .12s;
  min-height: 28px;
  flex-shrink: 0;
}

.bab-btn:hover {
  background: var(--hover-bg);
  color: var(--text);
}

.bab-btn.active {
  background: var(--brand-dim);
  border-color: var(--brand);
  color: var(--brand);
}

.bab-btn.disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* Color circles in style panel */
.bab-color-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform .1s, border-color .1s;
}

.bab-color-dot:hover {
  transform: scale(1.15);
}

.bab-color-dot.active {
  border-color: var(--text);
  box-shadow: 0 0 0 2px var(--surface);
}

/* Divider inside panel */
.bab-divider {
  width: 1px;
  height: 20px;
  background: var(--border);
  flex-shrink: 0;
  margin: 0 2px;
}

/* Label inside panel */
.bab-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .5px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Font size display */
.bab-fontsize-display {
  font-size: 12px;
  font-weight: 700;
  font-family: 'SF Mono', 'Menlo', monospace;
  color: var(--text);
  min-width: 26px;
  text-align: center;
  flex-shrink: 0;
}

/* Font color input */
.bab-color-input {
  width: 26px;
  height: 22px;
  border: none;
  padding: 0;
  cursor: pointer;
  background: transparent;
  flex-shrink: 0;
}

/* Shape buttons in style panel */
.bab-shape-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface2);
  color: var(--text-3);
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .12s, border-color .12s, color .12s;
}

.bab-shape-btn:hover {
  background: var(--hover-bg);
  color: var(--text);
}

.bab-shape-btn.active {
  background: var(--brand-dim);
  border-color: var(--brand);
  color: var(--brand);
}

/* Note textarea in notes panel */
.bab-note-input {
  flex: 1;
  min-width: 200px;
  max-width: 400px;
  height: 28px;
  resize: none;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface2);
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s;
}

.bab-note-input:focus {
  border-color: var(--accent);
}

/* Theme chips in themes panel (3-col grid like iOS) */
.bab-theme-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface2);
  cursor: pointer;
  transition: background .12s, border-color .12s;
  font-family: inherit;
}

.bab-theme-chip:hover {
  background: var(--hover-bg);
}

.bab-theme-chip.active {
  background: var(--brand-dim);
  border-color: var(--brand);
}

.bab-theme-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
}

.bab-theme-name {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
}

.bab-theme-chip.active .bab-theme-name {
  color: var(--brand);
  font-weight: 600;
}

/* Tag chips in plan panel */
.bab-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 99px;
  background: var(--brand-dim);
  color: var(--brand);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.bab-tag-x {
  cursor: pointer;
  font-size: 9px;
  opacity: 0.7;
}

.bab-tag-x:hover {
  opacity: 1;
}

/* ════════════════════════════════════════════
   PHASE 4: iOS-LIKE LAYOUT SYSTEM
   ════════════════════════════════════════════ */

/* ── Floating Toolbar FAB (see .toolbar.toolbar-fab above) ── */



/* ── Bottom Navigation Pill ── */
.bottom-nav-pill {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(24, 28, 39, 0.95);
  border-radius: 30px;
  padding: 12px 20px;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  z-index: 500;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(8px);
  pointer-events: auto;
}

/* Light theme nav pill */
[data-theme="light"] .bottom-nav-pill {
  background: rgba(255, 255, 255, 0.95);
}

/* ── Navigation buttons ── */
.nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  flex-shrink: 0;
}

.nav-btn svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.8;
}

.nav-btn:hover {
  background: var(--surface2);
  color: var(--text);
}

.nav-btn.active {
  background: var(--brand-dim);
  color: var(--brand);
}

/* ── Navigation FAB (settings/more) ── */
.nav-fab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 12px;
  background: var(--brand);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  flex-shrink: 0;
}

.nav-fab:hover {
  background: #8f84ff;
}

.nav-fab:active {
  transform: scale(0.92);
}

/* ════════════════════════════════════════════
   FLOATING SHEETS SYSTEM
   ════════════════════════════════════════════ */

.sheet {
  position: fixed;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  z-index: 400;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  bottom: 80px;
}

.sheet.visible {
  display: flex;
}

/* Sheet header (draggable title bar) */
.sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--border);
  cursor: grab;
  user-select: none;
  flex-shrink: 0;
}

.sheet-header:active {
  cursor: grabbing;
}

.sheet-header span {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

/* Sheet close button */
.sheet-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 8px;
  background: var(--surface2);
  color: var(--text-2);
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  flex-shrink: 0;
}

.sheet-close:hover {
  background: var(--border);
  color: var(--text);
}

/* Sheet content area */
.sheet-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ════════════════════════════════════════════
   LIBRARY MODAL — Centered iOS-Parity Modal
   ════════════════════════════════════════════ */
.library-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 15000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.library-modal-overlay.hidden {
  display: none !important;
}
.library-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.library-modal-card {
  position: relative;
  width: 720px;
  max-width: 95vw;
  /* Use the full available height (minus the overlay's 24px padding) so the
     card grows with the viewport. Previously fixed at 85vh, which crushed
     the inner grid on shorter windows and made the card area scroll only a
     few rows at a time. */
  height: calc(100vh - 48px);
  max-height: 900px;
  background: #131825; /* Match user screenshot deep navy */
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 24px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: libModalIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes libModalIn {
  from { opacity: 0; transform: scale(0.92) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.library-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
  flex-shrink: 0;
}
.library-modal-header h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text, #fff);
  margin: 0;
}
.library-modal-done {
  background: none;
  border: none;
  color: var(--brand, #7C6FFF);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  font-family: inherit;
}
.library-modal-done:hover {
  background: var(--brand-dim, rgba(124,111,255,0.15));
}
.library-modal-tabs {
  display: flex;
  padding: 12px 20px 0;
  gap: 0;
  flex-shrink: 0;
}
.library-tab {
  flex: 1;
  padding: 10px 0;
  text-align: center;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  color: #888;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s;
}
.library-tab:first-child {
  border-radius: 8px 0 0 8px;
}
.library-tab:last-child {
  border-radius: 0 8px 8px 0;
}
.library-tab.active {
  background: #5e5ce6; /* Distinct iOS-style active blue/purple */
  color: #fff;
  border-color: #5e5ce6;
}
.library-modal-grid {
  flex: 1 1 auto;
  min-height: 0;        /* allow flex child to shrink so overflow-y works in Safari */
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 20px 24px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: 14px;
  align-content: start;
}
/* Tip line shown above folder sections */
.lib-folder-tip {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-3, #888);
  padding: 4px 2px 0;
  opacity: 0.75;
}
.lib-folder-tip svg {
  flex-shrink: 0;
  opacity: 0.7;
}
/* Folder section: visual container so it's obvious that the cards inside
   belong to the folder, AND the whole section is a drop target. */
.lib-folder-section {
  grid-column: 1 / -1;
  border: 1.5px dashed transparent;
  border-radius: 14px;
  padding: 8px 10px 12px;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
/* The "Uncategorized" / Root section gets no border by default — it's a
   catch-all bucket, not a real folder. Still becomes a drop target on hover. */
.lib-folder-section-root {
  padding-left: 2px;
  padding-right: 2px;
}
.lib-folder-section:not(.lib-folder-section-root) {
  background: rgba(139, 127, 199, 0.05);
  border-color: rgba(139, 127, 199, 0.25);
}
/* When a card is being dragged anywhere in the grid, dim non-target sections
   slightly and give every section a clear dashed border so drop zones pop. */
.library-modal-grid.lib-dragging .lib-folder-section {
  border-color: rgba(139, 127, 199, 0.5);
  background: rgba(139, 127, 199, 0.06);
}
.lib-folder-section.drag-over {
  background: color-mix(in srgb, var(--brand, #7C6FFF) 14%, transparent);
  border-color: var(--brand, #7C6FFF);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand, #7C6FFF) 18%, transparent);
}
.lib-folder-section.drag-over .lib-folder-drop-hint {
  opacity: 1;
  color: var(--brand, #7C6FFF);
  font-weight: 700;
}
/* Inner grid: where the actual map cards live */
.lib-folder-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 14px;
  margin-top: 8px;
  pointer-events: auto;
}
/* Make sure children of the section don't intercept drag events in a way
   that breaks the section-level dropzone. */
.lib-folder-section * { pointer-events: auto; }
.lib-folder-section.drag-over .lib-card { pointer-events: none; }
/* New Map card (dashed) */
.lib-card-new {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 180px;
  border: 1.5px dashed var(--brand, #7C6FFF);
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  cursor: pointer;
  transition: all 0.2s;
  color: var(--brand, #7C6FFF);
}
.lib-card-new:hover {
  background: rgba(124, 111, 255, 0.12);
  transform: translateY(-2px);
}
.lib-card-new svg {
  width: 28px;
  height: 28px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
}
.lib-card-new span {
  font-size: 13px;
  font-weight: 600;
}
/* New Folder card — slightly different accent */
.lib-card-new-folder {
  border-color: #8b7fc7;
  color: #8b7fc7;
}
.lib-card-new-folder:hover {
  background: rgba(139, 127, 199, 0.12);
}
/* Map card — iOS parity: white cards on dark modal */
.lib-card {
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  background: #fff;
  border: none;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.lib-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.25);
}
.lib-card:active {
  transform: translateY(-1px) scale(0.98);
  transition-duration: 0.08s;
}
.lib-card.active {
  outline: 2.5px solid var(--brand, #7C6FFF);
  outline-offset: -2.5px;
}
.lib-card-accent {
  height: 5px;
  width: 100%;
}
.lib-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 14px 12px;
  height: 175px;
}
.lib-card-title {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a2e;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lib-card-stats {
  font-size: 12px;
  color: #888;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
}
.lib-card-date {
  font-size: 11px;
  color: #aaa;
}
.lib-card-locked {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 3px;
  background: #e67e22;
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
}
.lib-card-locked svg {
  width: 8px;
  height: 8px;
}
/* Folder section headers inside grid */
.lib-folder-header {
  font-size: 12px;
  font-weight: 700;
  color: #8b7fc7;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 4px 4px 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.lib-folder-section-root .lib-folder-header { color: var(--text-3, #888); }
.lib-folder-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  background: rgba(139, 127, 199, 0.18);
  color: #8b7fc7;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.lib-folder-drop-hint {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: none;
  color: var(--text-3, #888);
  opacity: 0;
  transition: opacity 0.18s ease, color 0.18s ease;
}
.library-modal-grid.lib-dragging .lib-folder-drop-hint { opacity: 0.7; }
.lib-folder-header svg {
  stroke: #8b7fc7;
  opacity: 0.8;
}
.library-modal-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid var(--border, rgba(255,255,255,0.08));
  flex-shrink: 0;
}
.library-modal-footer .library-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface2, #333);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--text-2, #aaa);
}
.library-modal-footer .library-user-name {
  font-size: 13px;
  color: var(--text-2, #aaa);
}

/* Library sheet specific (legacy, kept for format/chat sheets) */
.sheet-library {
  width: 320px;
  height: 60%;
  bottom: 80px;
  left: 20px;
  max-height: 500px;
}

/* Format sheet specific */
.sheet-format {
  width: 300px;
  height: auto;
  max-height: 60%;
  bottom: 80px;
  right: 20px;
}

/* Hide the original toolbar (will be replaced by floating FABs) */
.toolbar {
  display: none !important;
}

/* Update canvas to take full screen */
.canvas-container {
  flex: 1;
  position: relative;
  overflow: hidden;
  /* Canvas should take full space with no toolbar above */
}

/* Update bottom-action-bar to not be used */
.bottom-action-bar {
  display: none !important;
}

/* ── Read Only Badge (Map Library) ── */
.map-card-locked-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  background: #f59e0b; /* Orange-ish like iOS */
  color: #fff !important;
  padding: 3px 8px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  pointer-events: none;
  z-index: 5;
  letter-spacing: 0.5px;
}

.map-card-locked-badge svg {
  width: 10px;
  height: 10px;
  stroke-width: 2.5;
}

/* ── Premium Paywall Toast Override ── */
.toast.premium-gate {
  background: linear-gradient(135deg, var(--brand) 0%, #a78bfa 100%);
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: 0 10px 30px var(--brand-glow), 0 5px 15px rgba(0,0,0,0.2);
  padding: 14px 22px;
  border-radius: 14px;
  font-weight: 600;
  color: #fff;
  display: flex !important;
  align-items: center;
  gap: 10px;
}
/* ── Final Responsiveness Fixes ── */
.hidden {
  display: none !important;
}

.sheet:not(.visible) {
  display: none !important;
}

.sheet.visible {
  display: flex !important;
}

/* ════════════════════════════════════════════
   IOS PARITY FIXES — Action Center & Toolbar
   ════════════════════════════════════════════ */

/* Fix: toolbar-fab should remain visible even though .toolbar is hidden */
.toolbar.toolbar-fab {
  display: flex !important;
}

/* Fix: only hide the non-FAB horizontal toolbar */
.toolbar:not(.toolbar-fab) {
  display: none !important;
}

/* Fix: action-drawer needs flex column layout so sheets can fill it */
.action-drawer {
  display: flex;
  flex-direction: column;
}

/* The drawer-handle lives at the top */
.action-drawer .drawer-handle {
  flex-shrink: 0;
}

/* The drawer-content fills the rest of the drawer height */
.drawer-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ════════════════════════════════════════════
   SETTINGS PANEL (Theme + Account)
   ════════════════════════════════════════════ */

.settings-panel {
  position: fixed;
  inset: 0;
  z-index: 160;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 20px;
  pointer-events: none;
}

.settings-panel.hidden {
  display: none;
}

/* Backdrop */
.settings-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: auto;
  z-index: -1;
}

.settings-panel-content {
  position: relative;
  width: 320px;
  max-width: 90vw;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  animation: settingsPanelSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-height: 80vh;
  overflow-y: auto;
}

@keyframes settingsPanelSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px) translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0) translateX(0);
  }
}

.settings-section {
  padding: 16px;
  border-bottom: 1px solid var(--border);
}

.settings-section:last-child {
  border-bottom: none;
}

/* Tabbed settings section — hide non-active panels (native [hidden] + explicit) */
.settings-section[data-tab-panel][hidden] {
  display: none !important;
}

/* ── Tab Bar (iOS dedicated-sheet navigation parity) ──
   Pinned to the top of the settings panel, horizontally scrollable if needed. */
.settings-tab-bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  gap: 4px;
  padding: 8px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.settings-tab-bar::-webkit-scrollbar { display: none; }

.settings-tab {
  flex: 1 1 0;
  min-width: 64px;
  height: 48px;
  padding: 4px 6px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 10px;
  color: var(--text-2);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap;
}

.settings-tab-icon {
  font-size: 18px;
  line-height: 1;
}
.settings-tab-label {
  font-size: 10px;
  letter-spacing: 0.2px;
}

.settings-tab:hover {
  background: var(--surface2);
  color: var(--text);
}

.settings-tab.active {
  background: var(--brand-dim, rgba(124, 111, 255, 0.15));
  color: var(--brand, #7C6FFF);
  border-color: rgba(124, 111, 255, 0.28);
}

.settings-heading {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin: 0 0 12px 0;
}

/* ── Theme Selector ── */
.theme-selector {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.theme-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface2);
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}

.theme-option:hover {
  background: var(--hover-bg);
  border-color: var(--text-2);
}

.theme-option input[type="radio"] {
  cursor: pointer;
  accent-color: var(--brand);
  width: 18px;
  height: 18px;
  margin: 0;
}

.theme-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  flex: 1;
}

.theme-option input:checked + .theme-label {
  color: var(--brand);
  font-weight: 600;
}

.theme-option:has(input:checked) {
  background: var(--brand-dim);
  border-color: var(--brand);
}

/* ── Account Section ── */
.account-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.account-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}

.account-btn:hover {
  background: var(--surface2);
  border-color: var(--text-2);
}

.account-btn.danger {
  color: #ff6b6b;
}

.account-btn.danger:hover {
  background: rgba(255, 80, 80, 0.1);
  border-color: #ff6b6b;
}

.account-btn-green {
  background: #34c759 !important;
  color: #fff !important;
  border-color: #34c759 !important;
}
.account-btn-green:hover {
  background: #2db84e !important;
}

.settings-ai-status {
  margin-top: 8px;
  padding: 6px 12px;
  font-size: 13px;
  border-radius: 8px;
}
.settings-ai-status.success { color: #34c759; }
.settings-ai-status.error { color: #ff6b6b; }

/* Fix: sheets inside the action drawer should NOT be position:fixed */
/* They should fill the drawer-content area */
.action-drawer .sheet {
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  flex: 1;
  min-height: 0;
}

.action-drawer .sheet.visible {
  display: flex !important;
  flex-direction: column !important;
}

/* Library sheet inner layout */
.action-drawer .library-panel-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.action-drawer .library-list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Format sheet inner layout */
#sheet-format-content {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  padding: 4px 0;
}

/* Format sections (iOS UnifiedBottomPanel parity) */
.fmt-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--border);
}
.fmt-header-icon { font-size: 16px; }
.fmt-header-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  flex: 1;
}
.fmt-close-btn {
  width: 28px; height: 28px;
  border: none; background: var(--surface2);
  border-radius: 50%; cursor: pointer;
  color: var(--text-3); font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.fmt-close-btn:hover { background: var(--border); }

.fmt-section {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}

.fmt-section:last-child {
  border-bottom: none;
}

.fmt-section-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.fmt-empty {
  padding: 24px 16px;
  color: var(--text-3);
  font-size: 13px;
  text-align: center;
}

.fmt-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Theme thumbnail cards */
.fmt-themes-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.fmt-themes-row::-webkit-scrollbar { display: none; }

.fmt-theme-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 4px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 8px;
  transition: background .12s;
  flex-shrink: 0;
}
.fmt-theme-card:hover { background: rgba(255,255,255,0.06); }
.fmt-theme-card.active .fmt-theme-thumb {
  border-color: var(--brand);
  box-shadow: 0 0 8px var(--brand-glow, rgba(124,111,255,0.35));
}
.fmt-theme-thumb {
  width: 56px; height: 44px;
  border-radius: 6px;
  border: 1.5px solid rgba(255,255,255,0.1);
  image-rendering: auto;
}
.fmt-theme-label {
  display: flex;
  align-items: center;
  gap: 2px;
}
.fmt-theme-layout {
  font-size: 8px;
  font-weight: 600;
  color: var(--text-3);
}
.fmt-theme-name {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
}
.fmt-theme-card.active .fmt-theme-name {
  color: var(--brand);
  font-weight: 700;
}

/* Font dropdown */
.fmt-font-select {
  height: 32px;
  padding: 0 8px;
  border: none;
  background: rgba(var(--text-rgb, 255,255,255), 0.04);
  color: var(--text);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  outline: none;
}
.fmt-font-select:focus { box-shadow: 0 0 0 2px var(--brand-dim); }

/* Button groups (font size, B/I/U, alignment, shapes) */
.fmt-btn-group {
  display: flex;
  align-items: center;
  background: rgba(var(--text-rgb, 255,255,255), 0.04);
  border-radius: 6px;
  padding: 2px;
  gap: 1px;
}
.fmt-btn {
  width: 28px; height: 28px;
  border: none; background: transparent;
  color: var(--text);
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px; font-weight: 500;
  display: flex; align-items: center; justify-content: center;
  transition: background .1s;
}
.fmt-btn:hover { background: rgba(255,255,255,0.08); }
.fmt-btn.active {
  background: var(--brand-dim, rgba(124,111,255,0.15));
  color: var(--brand);
  font-weight: 700;
}

/* ── Node Image section (iOS CanvasView image picker parity) ── */
.fmt-img-preview-wrap {
  width: 100%;
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 8px;
}
[data-theme="light"] .fmt-img-preview-wrap {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.08);
}
.fmt-img-preview {
  max-width: 100%;
  max-height: 160px;
  object-fit: contain;
  border-radius: 6px;
  display: block;
}
.fmt-img-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.fmt-img-btn {
  flex: 1 1 0;
  min-width: 88px;
  height: 40px;
  padding: 0 10px;
  gap: 6px;
  font-weight: 600;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  font-size: 12px;
}
[data-theme="light"] .fmt-img-btn {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.08);
}
.fmt-img-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.fmt-img-btn.disabled,
.fmt-img-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.fmt-img-btn:not(.disabled):not(:disabled):hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.18);
}
[data-theme="light"] .fmt-img-btn:not(.disabled):not(:disabled):hover {
  background: rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.16);
}
.fmt-fs-val {
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 20px;
  text-align: center;
  color: var(--text);
}

/* Text color A button */
.fmt-color-a {
  width: 32px; height: 32px;
  border: none;
  background: rgba(var(--text-rgb, 255,255,255), 0.04);
  border-radius: 6px;
  cursor: pointer;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;
  transition: background .1s;
}
.fmt-color-a:hover { background: rgba(255,255,255,0.08); }
.fmt-color-a-letter { font-size: 14px; font-weight: 700; line-height: 1; }
.fmt-color-a-bar { width: 16px; height: 3px; border-radius: 1px; }

/* Node color dot */
.fmt-node-color-dot {
  width: 32px; height: 32px;
  border-radius: 6px;
  border: 1.5px solid rgba(255,255,255,0.15);
  cursor: pointer;
  transition: transform .1s;
  flex-shrink: 0;
}
.fmt-node-color-dot:hover { transform: scale(1.1); }

/* Size controls */
.fmt-size-wrap {
  display: flex; flex-direction: column; gap: 2px;
  margin-left: auto;
}
.fmt-size-row {
  display: flex; align-items: center; gap: 4px;
}
.fmt-size-label {
  font-size: 9px; font-weight: 700;
  color: var(--text-3);
  min-width: 10px;
}
.fmt-slider {
  width: 60px; height: 4px;
  accent-color: var(--brand);
}
.fmt-size-val {
  font-size: 9px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  min-width: 24px;
}

/* AI chat sheet layout */
.action-drawer #ai-chat-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Node indicator strip improved */
.node-indicator-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: var(--glass-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  margin-bottom: 8px;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s var(--spring-easing);
  opacity: 0;
  transform: translateY(8px);
}

.node-indicator-strip.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.node-indicator-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
  flex-shrink: 0;
}



/* Hard interaction guard: keep top controls clickable above overlays */
.zoom-controls {
  z-index: 12000 !important;
  pointer-events: auto !important;
}

.zoom-btn,
.zoom-label,
#btn-zoom-in,
#btn-zoom-out,
#zoom-label {
  pointer-events: auto !important;
}

/* Hard interaction guard: Settings FAB and panel must sit above action center */
#btn-settings.ios-settings-btn,
.ios-settings-btn {
  z-index: 12000 !important;
  pointer-events: auto !important;
}

#settings-panel.settings-panel,
.settings-panel {
  z-index: 13000 !important;
  pointer-events: auto !important;
}

#settings-panel.hidden {
  display: none !important;
}

/* Hard interaction guard: Action pill and tools FAB must be clickable */
#action-pill.action-pill,
.action-pill {
  z-index: 12000 !important;
  pointer-events: auto !important;
}

.action-pill-btn {
  pointer-events: auto !important;
}

#btn-menu.ios-tools-fab,
.ios-tools-fab {
  z-index: 12000 !important;
  pointer-events: auto !important;
}

.tools-fab-wrap {
  z-index: 12000 !important;
}

/* Export FAB guard */
.ios-export-fab {
  z-index: 12000 !important;
  pointer-events: auto !important;
}

.node-indicator-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Drawer handle hover effect */
.drawer-handle:hover {
  background: rgba(255, 255, 255, 0.5);
}

.drawer-handle:active {
  cursor: grabbing;
}

/* Action pill rubbery button effect (iOS style) */
.action-pill-btn:active {
  transform: scale(0.88);
}

/* Library new map button inside sheet */
.library-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 8px;
  flex-shrink: 0;
}

.library-sheet-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

/* Pill active indicator dot */
.action-pill-btn::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 16px;
  height: 3px;
  border-radius: 2px;
  background: var(--brand);
  transition: transform 0.2s var(--spring-easing);
}

.action-pill-btn.active::after {
  transform: translateX(-50%) scaleX(1);
}

/* Remove active scale on active pill buttons to avoid conflicting with indicator */
.action-pill-btn.active svg {
  transform: scale(1.15);
  filter: drop-shadow(0 0 6px var(--brand-glow));
}

/* Only hide truly redundant elements; keep auth and core controls visible */

/* ════════════════════════════════════════════
   COLLABORATION — MindMeister-style features
   ════════════════════════════════════════════ */

/* ── Live Cursors ── */
.collab-cursor {
  position: absolute;
  pointer-events: none;
  z-index: 9998;
  transition: transform 0.15s ease-out;
}
.collab-cursor-label {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  margin-left: 12px;
  margin-top: -4px;
  vertical-align: top;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}

/* ── Collaborator Avatars Bar ── */
.collab-avatars {
  display: flex;
  gap: -6px;
  align-items: center;
  margin-left: 8px;
}
.collab-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  border: 2px solid var(--surface);
  margin-left: -6px;
  cursor: default;
  text-transform: uppercase;
}
.collab-avatar:first-child { margin-left: 0; }

/* ── Comment Badge on Nodes ── */
.comment-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #FF9500;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}

/* ── Share Dialog ── */
.share-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(440px, 92vw);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  z-index: 15000;
  box-shadow: 0 12px 40px rgba(0,0,0,.3);
  animation: fadeScaleIn .15s ease;
}
.share-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 14999;
}
.share-dialog h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 16px;
  color: var(--text);
}
.share-link-row {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.share-link-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  background: var(--surface2);
  color: var(--text);
  font-family: monospace;
}
.share-copy-btn {
  padding: 8px 16px;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.share-copy-btn:hover { opacity: .85; }

.share-access-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.share-access-row label {
  font-size: 13px;
  color: var(--text-2);
  min-width: 110px;
}
.share-access-select {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface2);
  color: var(--text);
  font-size: 13px;
}

.share-collab-list {
  max-height: 150px;
  overflow-y: auto;
  margin-bottom: 12px;
}
.share-collab-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 13px;
  color: var(--text-2);
  border-bottom: 1px solid var(--border);
}
.share-collab-item:last-child { border-bottom: none; }
.share-collab-role {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--brand);
  text-transform: uppercase;
}

.share-invite-row {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.share-invite-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  background: var(--surface2);
  color: var(--text);
}
.share-invite-btn {
  padding: 8px 16px;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.share-close-btn {
  width: 100%;
  padding: 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  margin-top: 8px;
}

/* ── Version History Panel ── */
.version-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: min(360px, 100vw);
  height: 100vh;
  background: var(--surface);
  border-left: 1px solid var(--border);
  z-index: 14000;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .25s cubic-bezier(.4,0,.2,1);
  box-shadow: -4px 0 20px rgba(0,0,0,.15);
}
.version-panel.open { transform: translateX(0); }
.version-header {
  display: flex;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--border);
}
.version-header h3 { flex: 1; font-size: 15px; font-weight: 700; margin: 0; color: var(--text); }
.version-close-btn {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--text-2);
  padding: 4px 8px;
}
.version-save-btn {
  padding: 6px 14px;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  margin-right: 8px;
}
.version-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}
.version-item {
  padding: 12px;
  border-radius: 10px;
  cursor: pointer;
  margin-bottom: 4px;
  transition: background .1s;
}
.version-item:hover { background: var(--surface2); }
.version-item-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.version-item-meta {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 2px;
}
.version-item-restore {
  padding: 4px 10px;
  background: var(--brand-dim);
  color: var(--brand);
  border: none;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 6px;
}

/* ── Comment Panel ── */
.comment-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: min(340px, 100vw);
  height: 100vh;
  background: var(--surface);
  border-left: 1px solid var(--border);
  z-index: 14000;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .25s cubic-bezier(.4,0,.2,1);
  box-shadow: -4px 0 20px rgba(0,0,0,.15);
}
.comment-panel.open { transform: translateX(0); }
.comment-header {
  display: flex;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--border);
}
.comment-header h3 { flex: 1; font-size: 15px; font-weight: 700; margin: 0; color: var(--text); }
.comment-close-btn {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--text-2);
  padding: 4px 8px;
}
.comment-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}
.comment-item {
  padding: 10px;
  border-radius: 10px;
  background: var(--surface2);
  margin-bottom: 6px;
}
.comment-item-author {
  font-size: 12px;
  font-weight: 600;
  color: var(--brand);
}
.comment-item-text {
  font-size: 13px;
  color: var(--text);
  margin-top: 4px;
  white-space: pre-wrap;
}
.comment-item-time {
  font-size: 10px;
  color: var(--text-3);
  margin-top: 4px;
}
.comment-item-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.comment-item-actions button {
  background: none;
  border: none;
  font-size: 11px;
  color: var(--text-3);
  cursor: pointer;
}
.comment-item-actions button:hover { color: var(--text); }
.comment-input-row {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--border);
}
.comment-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface2);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  resize: none;
}
.comment-send-btn {
  padding: 8px 14px;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

/* ── Collab banner (read-only indicator) ── */
.collab-mode-banner {
  position: fixed;
  top: 48px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 16px;
  background: var(--brand-dim);
  color: var(--brand);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.collab-mode-banner .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #52D9A0;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}

/* ════════════════════════════════════════════
   VERTICAL TOOLS STRIP — iOS ToolbarView parity
   Always-visible compact strip on the left edge
   ════════════════════════════════════════════ */
/* ── Tools FAB — visible, toggles the strip (iOS parity) ── */
.ios-tools-fab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0.5px solid rgba(255,255,255,0.15);
  background: rgba(28, 28, 30, 0.78);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  backdrop-filter: blur(24px) saturate(1.8);
  color: #fff;
  cursor: pointer;
  box-shadow:
    0 4px 12px rgba(0,0,0,0.15),
    0 1px 3px rgba(0,0,0,0.10);
  transition: background .15s, transform .15s;
}
.ios-tools-fab:hover {
  background: rgba(28, 28, 30, 0.92);
  transform: scale(1.05);
}
.ios-tools-fab:active {
  transform: scale(0.95);
}
.ios-tools-fab.active {
  background: var(--brand, #7C6FFF);
  color: #fff;
}
[data-theme="light"] .ios-tools-fab {
  background: rgba(255, 255, 255, 0.78);
  color: #333;
  border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .ios-tools-fab:hover {
  background: rgba(255, 255, 255, 0.95);
}
[data-theme="light"] .ios-tools-fab.active {
  background: var(--brand, #7C6FFF);
  color: #fff;
}
.ios-tools-fab svg {
  width: 20px;
  height: 20px;
}

.tools-fab-wrap {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 12000;
  pointer-events: auto;
}
.tools-strip {
  position: relative;
  top: 0;
  left: 0;
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px 4px;
  gap: 0px;
  background: rgba(28, 28, 30, 0.78);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  backdrop-filter: blur(24px) saturate(1.8);
  border-radius: 14px;
  border: 0.5px solid rgba(255,255,255,0.15);
  box-shadow:
    0 8px 24px rgba(0,0,0,0.18),
    0 2px 6px rgba(0,0,0,0.10);
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  transition: opacity .2s ease, transform .2s ease;
}
[data-theme="light"] .tools-strip {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow:
    0 8px 24px rgba(0,0,0,0.10),
    0 2px 6px rgba(0,0,0,0.06);
}
.tools-strip::-webkit-scrollbar { display: none; }
/* Strip hidden by default — shown on FAB click (iOS parity: collapsed) */
.tools-strip.hidden {
  display: none;
}
.vt-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: 7px;
  cursor: pointer;
  color: #f2f2f2;
  transition: background .12s ease, color .12s ease, transform .12s ease;
  padding: 0;
  flex-shrink: 0;
}
[data-theme="light"] .vt-btn {
  color: #1d1d1f;
}
.vt-btn svg {
  width: 17px;
  height: 17px;
  stroke-width: 1.8;
}
.vt-btn:hover:not(.disabled) {
  background: rgba(255,255,255,0.10);
  color: #ffffff;
}
[data-theme="light"] .vt-btn:hover:not(.disabled) {
  background: rgba(0,0,0,0.06);
  color: #000000;
}
.vt-btn:active:not(.disabled) {
  background: rgba(255,255,255,0.18);
  transform: scale(0.92);
}
[data-theme="light"] .vt-btn:active:not(.disabled) {
  background: rgba(0,0,0,0.10);
}
.vt-btn.disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
/* Hide the close button — strip is always visible now */
.vt-btn.vt-close {
  display: none !important;
}
.vt-sep {
  width: 22px;
  height: 0.5px;
  background: rgba(255,255,255,0.15);
  margin: 3px 0;
  flex-shrink: 0;
}
[data-theme="light"] .vt-sep {
  background: rgba(0,0,0,0.10);
}

/* Layout flyout menu */
.vt-layout-menu {
  position: absolute;
  left: 48px;
  bottom: 6px;
  background: rgba(30, 30, 30, 0.92);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  border-radius: 12px;
  border: 0.5px solid rgba(255,255,255,0.12);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  padding: 4px;
  min-width: 140px;
  z-index: 250;
}
[data-theme="light"] .vt-layout-menu {
  background: rgba(255, 255, 255, 0.92);
  border: 0.5px solid rgba(0,0,0,0.08);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
.vt-layout-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: #f0f0f0;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s;
}
[data-theme="light"] .vt-layout-item {
  color: #1d1d1f;
}
.vt-layout-item:hover {
  background: rgba(255,255,255,0.1);
}
[data-theme="light"] .vt-layout-item:hover {
  background: rgba(0,0,0,0.06);
}
.vt-layout-item.active {
  color: var(--brand);
  background: rgba(124,111,255,0.15);
}

/* ════════════════════════════════════════════
   TOUCH DEVICE OPTIMIZATIONS (iPhone / iPad)
   Matches native iOS CanvasView feel
   ════════════════════════════════════════════ */

/* Prevent iOS callout menus, text selection, and tap highlight */
.canvas-container,
.canvas-world,
.map-node,
.collapse-toggle,
.add-ring {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
}

/* GPU-composite the world layer for smooth 60fps transforms */
.canvas-world {
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
}

/* GPU-composite individual nodes during drag */
.map-node {
  will-change: transform;
}

/* Touch-friendly: enlarge hit targets for collapse toggles & add rings */
@media (pointer: coarse) {
  .collapse-toggle {
    width: 30px;
    height: 30px;
    right: -36px;   /* pushed further from node to prevent mis-taps */
    font-size: 12px;
  }

  .add-ring {
    width: 32px;
    height: 32px;
    right: -36px;   /* match collapse-toggle offset */
    font-size: 14px;
  }

  .resize-handle {
    width: 20px;
    height: 20px;
    right: -10px;
    bottom: -10px;
  }

  /* Larger minimum tap area for nodes (44pt Apple HIG) */
  .map-node {
    min-height: 40px;
    padding: 8px 14px;
    min-width: 60px;
  }

  /* Root node needs even more room */
  .map-node.root-node {
    min-height: 48px;
    padding: 10px 18px;
  }

  /* Action pill buttons need generous targets */
  .action-pill-btn {
    min-width: 44px;
    min-height: 44px;
  }

  /* Toolbar buttons need 44px touch targets */
  .tb-icon {
    min-width: 44px;
    min-height: 44px;
  }

  /* Node action bar buttons — 40px for easy thumb tapping */
  .nab-btn {
    width: 40px;
    height: 40px;
  }

  .nab-btn svg {
    width: 18px;
    height: 18px;
  }

  /* Node action bar itself — more padding for touch */
  .node-action-bar {
    padding: 4px 6px;
    gap: 2px;
  }

  /* Bottom action bar buttons */
  .bab-action-btn {
    min-width: 44px;
    min-height: 44px;
  }

  /* During editing, give the node more breathing room */
  .map-node.editing {
    min-width: 120px;
    min-height: 44px;
    z-index: 50;
  }
}

/* Prevent overscroll/bounce on the whole page (canvas handles its own) */
/* ── Mobile Edit Bar (Done/Cancel above virtual keyboard) ── */
.mobile-edit-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--glass-bg, rgba(28, 28, 30, 0.92));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  animation: slideUpBar 0.2s ease-out;
}

@keyframes slideUpBar {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.mobile-edit-done {
  padding: 10px 24px;
  background: var(--brand, #7C6FFF);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.mobile-edit-done:active {
  transform: scale(0.95);
}

.mobile-edit-cancel {
  padding: 10px 16px;
  background: transparent;
  color: var(--text-2, #aaa);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.mobile-edit-cancel:active {
  background: var(--surface2, rgba(255, 255, 255, 0.06));
}


html, body {
  overscroll-behavior: none;
  -webkit-overflow-scrolling: auto;
}

/* iOS safe-area padding for fixed elements */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .action-pill {
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }
  .toolbar {
    padding-top: env(safe-area-inset-top);
  }
}

/* ════════════════════════════════════════════════════════
   iOS Parity: Sticker badge, image preview, badges
   ════════════════════════════════════════════════════════ */
.node-sticker-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  font-size: 16px;
  line-height: 1;
  z-index: 2;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
  pointer-events: none;
}
/* Icon badge inline with label */
.node-icon-badge {
  font-size: 0.95em;
  vertical-align: middle;
}
.node-image-preview {
  display: block;
  max-width: 120px;
  max-height: 80px;
  border-radius: 6px;
  margin: 0 auto 4px;
  object-fit: cover;
}
.node-comment-badge,
.node-attach-badge {
  position: absolute;
  bottom: -6px;
  font-size: 10px;
  background: var(--bg-2, #fff);
  border-radius: 8px;
  padding: 0 4px;
  line-height: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
  pointer-events: none;
}
.node-comment-badge { right: -4px; }
.node-attach-badge  { left: -4px; }

/* ════════════════════════════════════════════════════════
   iOS Parity: Outline View Sidebar
   ════════════════════════════════════════════════════════ */
#outline-panel {
  position: fixed;
  top: 48px;
  left: 0;
  bottom: 0;
  width: 280px;
  background: var(--bg-1, #fff);
  border-right: 1px solid var(--border, #e2e2e2);
  z-index: 200;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform .25s ease;
  overflow: hidden;
}
#outline-panel.open {
  transform: translateX(0);
}
.outline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border, #e2e2e2);
  font-weight: 600;
  font-size: 14px;
  color: var(--text-1, #1a1a1a);
}
.outline-header button {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--text-2, #666);
  padding: 4px;
}
.outline-tree {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}
.outline-item {
  display: flex;
  align-items: center;
  padding: 5px 8px 5px calc(8px + var(--depth, 0) * 16px);
  cursor: pointer;
  font-size: 13px;
  color: var(--text-1, #1a1a1a);
  border-radius: 4px;
  margin: 0 6px;
  transition: background .15s;
}
.outline-item:hover {
  background: var(--bg-2, #f0f0f0);
}
.outline-item.active {
  background: var(--brand-alpha, rgba(106,90,255,.12));
  color: var(--brand, #6A5AFF);
  font-weight: 600;
}
.outline-toggle {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--text-3, #999);
  cursor: pointer;
  margin-right: 2px;
  transition: transform .15s;
  border-radius: 3px;
}
.outline-toggle:hover { background: var(--bg-3, #e0e0e0); }
.outline-toggle.collapsed { transform: rotate(-90deg); }
.outline-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.outline-emoji {
  margin-right: 4px;
  font-size: 13px;
}

/* ════════════════════════════════════════════════════════
   iOS Parity: Sticker Picker Modal
   ════════════════════════════════════════════════════════ */
#sticker-picker {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg-1, #fff);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.2);
  z-index: 1000;
  display: none;
  max-width: 300px;
}
#sticker-picker.open { display: block; }
.sticker-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  max-height: 240px;
  overflow-y: auto;
}
.sticker-btn {
  font-size: 24px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--bg-2, #f0f0f0);
  border-radius: 8px;
  cursor: pointer;
  transition: transform .15s, background .15s;
}
.sticker-btn:hover {
  background: var(--bg-3, #e0e0e0);
  transform: scale(1.15);
}
.sticker-picker-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 10px;
  text-align: center;
  color: var(--text-1, #1a1a1a);
}

/* ════════════════════════════════════════════════════════
   iOS Parity: Voice input standalone button
   ════════════════════════════════════════════════════════ */
#voice-input-fab {
  position: fixed;
  bottom: 90px;
  right: 20px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--brand, #6A5AFF);
  color: #fff;
  border: none;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
  z-index: 150;
  transition: transform .15s, background .15s;
}
#voice-input-fab:hover { transform: scale(1.1); }
#voice-input-fab.recording {
  background: #FF3B30;
  animation: voice-pulse 1.2s infinite;
}
@keyframes voice-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,59,48,.4); }
  50% { box-shadow: 0 0 0 12px rgba(255,59,48,0); }
}

/* ═══════════════════════════════════════════════
   FILTER BAR  (iOS FilterBarView parity)
   ═══════════════════════════════════════════════ */
.filter-bar {
  position: fixed;
  top: 48px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 120;
  background: var(--glass-bg, rgba(28,28,34,0.85));
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border-radius: 16px;
  border: 0.5px solid rgba(255,255,255,0.1);
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  padding: 4px 8px;
  max-width: calc(100vw - 120px);
  transition: opacity .2s, transform .2s;
}
.filter-bar.hidden { display: none; }
.filter-bar-scroll {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.filter-bar-scroll::-webkit-scrollbar { display: none; }

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: var(--text, #f2f2f7);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.filter-chip:hover { background: rgba(255,255,255,0.12); }
.filter-chip.active {
  background: var(--brand, #7C6FFF);
  border-color: var(--brand, #7C6FFF);
  color: #fff;
}
.filter-chip svg { opacity: 0.7; }
.filter-chip.active svg { opacity: 1; }

.filter-clear {
  color: #FF453A;
  border-color: rgba(255,69,58,0.3);
  background: rgba(255,69,58,0.08);
}
.filter-clear:hover { background: rgba(255,69,58,0.15); }

.filter-tags-wrap {
  display: flex;
  gap: 4px;
  align-items: center;
}

/* Dropdown menus for filter */
.filter-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background: var(--glass-bg, rgba(28,28,34,0.95));
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border-radius: 12px;
  border: 0.5px solid rgba(255,255,255,0.12);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  padding: 4px;
  min-width: 140px;
  z-index: 200;
}
.filter-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  color: var(--text, #f2f2f7);
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
}
.filter-dropdown-item:hover { background: rgba(255,255,255,0.08); }
.filter-dropdown-item.active { color: var(--brand, #7C6FFF); font-weight: 600; }
.filter-dropdown-item .fdi-check { font-size: 11px; }

/* Node filtered state */
.map-node.filter-dimmed {
  opacity: 0.15 !important;
  transition: opacity .2s ease;
}

/* ═══════════════════════════════════════════════
   CONTEXT MENU — Due Date / Tags / Assignee
   ═══════════════════════════════════════════════ */
.cm-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 8px;
}
.cm-input {
  flex: 1;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: var(--text, #f2f2f7);
  padding: 6px 10px;
  font-size: 12px;
  outline: none;
}
.cm-input:focus { border-color: var(--brand, #7C6FFF); }
.cm-input::placeholder { color: var(--text-3, #666); }
.cm-tag-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 2px 12px 6px;
}
.cm-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: 10px;
  background: var(--brand-dim, rgba(124,111,255,0.15));
  color: var(--brand, #7C6FFF);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
}
.cm-tag-chip:hover { background: rgba(124,111,255,0.25); }
.cm-due-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
  color: var(--text-2, #aaa);
  margin-left: auto;
}
.cm-due-badge.overdue { color: #FF453A; background: rgba(255,69,58,0.12); }

/* ───────── Audio note modal (per-node) ───────── */
.audio-note-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(20, 22, 30, 0.55);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
}
.audio-note-card {
  background: #fff; color: #1c1d24;
  width: min(420px, 92vw);
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.32);
  padding: 18px 20px 20px;
  font-family: 'Inter', system-ui, sans-serif;
}
.audio-note-card .ann-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.audio-note-card .ann-title { font-weight: 700; font-size: 16px; }
.audio-note-card .ann-close { border: none; background: transparent; cursor: pointer; font-size: 18px; color: #6b7280; padding: 4px 8px; }
.audio-note-card .ann-status { font-size: 13px; color: #6b7280; text-align: center; margin-bottom: 6px; }
.audio-note-card .ann-status.recording { color: #e11d48; font-weight: 600; }
.audio-note-card .ann-status.recording::before { content: '●'; margin-right: 6px; animation: ann-pulse 1s infinite; }
@keyframes ann-pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.audio-note-card .ann-time { font-size: 32px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; margin-bottom: 10px; color: #7C6FFF; }
.audio-note-card .ann-transcript { min-height: 44px; max-height: 96px; overflow-y: auto; background: #f5f6fa; border-radius: 10px; padding: 8px 10px; font-size: 12.5px; color: #4b5563; line-height: 1.45; margin-bottom: 14px; }
.audio-note-card .ann-existing { display: flex; gap: 8px; margin-bottom: 12px; }
.audio-note-card .ann-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.audio-note-card .ann-btn { flex: 1; min-width: 90px; padding: 10px 14px; border-radius: 10px; border: 1px solid #e5e7eb; background: #fff; font-size: 14px; font-weight: 600; cursor: pointer; color: #1c1d24; }
.audio-note-card .ann-btn:hover { background: #f5f6fa; }
.audio-note-card .ann-btn.ann-rec { background: #7C6FFF; color: #fff; border-color: #7C6FFF; }
.audio-note-card .ann-btn.ann-rec:hover { background: #6b5fe6; }
.audio-note-card .ann-btn.ann-stop { background: #e11d48; color: #fff; border-color: #e11d48; }
.audio-note-card .ann-btn.ann-stop:hover { background: #be123c; }
.audio-note-card .ann-btn.ann-del { color: #e11d48; border-color: #fecaca; }
.audio-note-card .ann-btn.hidden { display: none; }

@media (prefers-color-scheme: dark) {
  .audio-note-card { background: #23252e; color: #f1f1f5; }
  .audio-note-card .ann-transcript { background: #2c2e38; color: #c9cad3; }
  .audio-note-card .ann-btn { background: #2c2e38; color: #f1f1f5; border-color: #3a3c47; }
  .audio-note-card .ann-btn:hover { background: #34363f; }
}

/* ───────── OneNote settings modal ───────── */
.onenote-card .onenote-account-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; background:#f5f6fa; border-radius:10px; margin-bottom:14px; }
.onenote-card .onenote-account-status { font-size:13px; font-weight:600; color:#16a34a; }
.onenote-card .onenote-account-email { font-size:12px; color:#6b7280; margin-top:2px; }
.onenote-card .onenote-label { display:block; font-size:12px; font-weight:600; color:#4b5563; margin:10px 0 4px; }
.onenote-card .onenote-select { width:100%; padding:9px 10px; border-radius:8px; border:1px solid #e5e7eb; background:#fff; font-size:13px; color:#1c1d24; }
.onenote-card .onenote-select:disabled { background:#f5f6fa; color:#9ca3af; }
.onenote-card .onenote-loading { font-size:12px; color:#6b7280; padding:6px 0; }
.onenote-card .onenote-error { font-size:12px; color:#e11d48; background:#fef2f2; padding:8px 10px; border-radius:8px; margin-bottom:10px; }
@media (prefers-color-scheme: dark) {
  .onenote-card .onenote-account-row { background:#2c2e38; }
  .onenote-card .onenote-account-email { color:#9ca3af; }
  .onenote-card .onenote-select { background:#2c2e38; color:#f1f1f5; border-color:#3a3c47; }
  .onenote-card .onenote-select:disabled { background:#23252e; color:#6b7280; }
  .onenote-card .onenote-error { background:#3a1f25; }
}

/* ═══════════════════════════════════════════════════════════
   SMOOTHNESS SPRINT — Toast severity + Skeleton + AutoSave
   ═══════════════════════════════════════════════════════════ */

/* Toast severity variants (success / error / warn / info) */
.toast.success { border-left: 3px solid #16a34a; padding-left: 14px; }
.toast.error   { border-left: 3px solid #e11d48; padding-left: 14px; color: #fff; background: #7f1d1d; }
.toast.warn    { border-left: 3px solid #f59e0b; padding-left: 14px; }
.toast.info    { border-left: 3px solid #7C6FFF; padding-left: 14px; }

/* Skeleton loader — shows during initial map hydration */
#skeleton-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: none;
  pointer-events: none;
  background: var(--bg, #15171f);
  align-items: center;
  justify-content: center;
}
#skeleton-overlay.active { display: flex; }
.skeleton-tree {
  position: relative;
  width: min(640px, 80vw);
  height: 240px;
  opacity: 0.55;
}
.skeleton-node {
  position: absolute;
  border-radius: 12px;
  background: linear-gradient(90deg,
    rgba(255,255,255,.04) 0%,
    rgba(255,255,255,.10) 50%,
    rgba(255,255,255,.04) 100%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.4s ease-in-out infinite;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.skeleton-edge {
  position: absolute;
  height: 2px;
  background: rgba(124,111,255,.25);
  transform-origin: left center;
}
@keyframes skel-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton-node { animation: none; opacity: .6; }
}

/* Smooth status-pill state colors */
.save-status-pill { transition: background .25s ease, opacity .15s ease; }
.save-status-pill.is-saving { background: color-mix(in srgb, #FFD166 18%, var(--surface, rgba(30,36,54,.86))); }
.save-status-pill.is-error  { background: color-mix(in srgb, #FF6B6B 22%, var(--surface, rgba(30,36,54,.86))); }

/* ════════════════════════════════════════════
   Keyboard Shortcuts Cheat-Sheet (?-key modal)
   ════════════════════════════════════════════ */
.shortcuts-modal-overlay {
  position: fixed; inset: 0;
  z-index: 100020;
  display: flex; align-items: center; justify-content: center;
  animation: scFadeIn .15s ease-out;
}
.shortcuts-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 16, 26, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.shortcuts-modal-card {
  position: relative;
  width: min(92vw, 720px);
  max-height: 80vh;
  display: flex; flex-direction: column;
  background: var(--surface, #fff);
  color: var(--text, #1a1a2e);
  border: 1px solid rgba(124, 111, 255, 0.15);
  border-radius: 18px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  animation: scPop .18s cubic-bezier(.2,.8,.3,1.1);
}
.shortcuts-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(124, 111, 255, 0.10);
}
.shortcuts-modal-header h2 {
  margin: 0; font-size: 18px; font-weight: 600;
}
.shortcuts-modal-close {
  background: none; border: none;
  font-size: 18px; cursor: pointer;
  color: var(--text-muted, #6c6f80);
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.shortcuts-modal-close:hover {
  background: rgba(124, 111, 255, 0.08);
  color: var(--brand, #7C6FFF);
}
.shortcuts-modal-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 28px;
  padding: 22px;
  overflow-y: auto;
}
.shortcuts-modal-body .sc-group h3 {
  margin: 0 0 10px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--brand, #7C6FFF);
}
.shortcuts-modal-body table {
  width: 100%;
  border-collapse: collapse;
}
.shortcuts-modal-body td {
  padding: 5px 0;
  font-size: 13px;
  vertical-align: middle;
}
.shortcuts-modal-body td.sc-key {
  width: 1%;
  white-space: nowrap;
  padding-right: 12px;
}
.shortcuts-modal-body td.sc-label {
  color: var(--text-muted, #6c6f80);
}
.shortcuts-modal-body kbd,
.shortcuts-modal-footer kbd {
  display: inline-flex;
  gap: 3px;
  align-items: center;
  font-family: 'SF Mono', ui-monospace, 'JetBrains Mono', Menlo, monospace;
  font-size: 11px; font-weight: 500;
  background: linear-gradient(180deg, #fafbfd 0%, #eef0f6 100%);
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 2px 5px;
  color: var(--text, #1a1a2e);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}
.shortcuts-modal-body kbd span,
.shortcuts-modal-footer kbd span {
  display: inline-block;
  padding: 0 2px;
}
.shortcuts-modal-footer {
  padding: 14px 22px;
  border-top: 1px solid rgba(124, 111, 255, 0.10);
  font-size: 12px;
  color: var(--text-muted, #6c6f80);
  text-align: center;
}
@media (max-width: 640px) {
  .shortcuts-modal-body { grid-template-columns: 1fr; }
}
@keyframes scFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scPop {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* ════════════════════════════════════════════
   Hover Quick-Add Chip (parent nodes)
   ════════════════════════════════════════════ */
.node-quickadd {
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%) scale(0.85);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--brand, #7C6FFF);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  display: none;       /* enabled per-node in canvas.js */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  z-index: 28;
  box-shadow: 0 3px 8px rgba(124, 111, 255, 0.35);
  transition: opacity .15s, transform .18s cubic-bezier(.2,.8,.3,1.2);
}
.map-node:hover > .node-quickadd,
.map-node.selected > .node-quickadd {
  opacity: 0.92;
  pointer-events: all;
  transform: translateX(-50%) scale(1);
}
.node-quickadd:hover {
  opacity: 1 !important;
  transform: translateX(-50%) scale(1.18) !important;
  box-shadow: 0 4px 12px rgba(124, 111, 255, 0.55);
}

/* ════════════════════════════════════════════
   Bulk-Action Toolbar (multi-select)
   ════════════════════════════════════════════ */
.bulk-action-bar {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: var(--surface, #fff);
  color: var(--text, #1a1a2e);
  border: 1px solid rgba(124, 111, 255, 0.18);
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.06);
  font-size: 12px;
  font-weight: 500;
  animation: babPop .2s cubic-bezier(.2,.8,.3,1.1);
}
.bulk-action-bar.hidden { display: none; }
.bulk-action-bar .bab-count {
  padding: 4px 10px;
  font-weight: 600;
  color: var(--brand, #7C6FFF);
  letter-spacing: 0.01em;
}
.bulk-action-bar .bab-divider {
  width: 1px;
  height: 22px;
  background: rgba(124, 111, 255, 0.18);
}
.bulk-action-bar .bab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text, #1a1a2e);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.bulk-action-bar .bab-btn:hover {
  background: rgba(124, 111, 255, 0.10);
  border-color: rgba(124, 111, 255, 0.18);
}
.bulk-action-bar .bab-btn.bab-danger:hover {
  background: rgba(255, 90, 90, 0.10);
  border-color: rgba(255, 90, 90, 0.30);
  color: #d33;
}
.bulk-action-bar .bab-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.10);
}
.bulk-action-bar .bab-color-row {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 8px;
  padding: 8px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  background: var(--surface, #fff);
  border: 1px solid rgba(124, 111, 255, 0.15);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.bulk-action-bar .bab-swatch-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.10);
  cursor: pointer;
  padding: 0;
  transition: transform .15s;
}
.bulk-action-bar .bab-swatch-btn:hover { transform: scale(1.18); }
.bulk-action-bar .bab-swatch-btn.bab-swatch-clear {
  background: #fff;
  color: #888;
  font-size: 13px;
  line-height: 1;
}
@keyframes babPop {
  from { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(0.96); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* Drag-reparent magnetic snap pulse — fires once when a node first enters
   any drop-target zone, then settles. Combines with existing
   .drop-target-* classes from interaction.js. */
.map-node.drop-target-child,
.map-node.drop-target-sibling-above,
.map-node.drop-target-sibling-below,
.map-node.drop-target-promote {
  animation: dropSnapPulse .35s ease-out;
}
@keyframes dropSnapPulse {
  0%   { box-shadow: 0 0 0 0 rgba(124, 111, 255, 0.55); }
  60%  { box-shadow: 0 0 0 10px rgba(124, 111, 255, 0.05); }
  100% { box-shadow: 0 0 0 0 rgba(124, 111, 255, 0.0); }
}

/* iOS parity: dashed rectangle outlining the receiver during drag-drop.
   Pairs with the offset slot-ghost (#drop-ghost-slot) painted by
   interaction.js — receiver outline says "you're dropping into this
   node", slot-ghost says "and it will land here". Red for child /
   sibling, amber for promote. */
.map-node.drop-target-receiver,
.map-node.drop-target-receiver-promote {
  outline-style: dashed !important;
  outline-width: 2px !important;
  outline-offset: 3px !important;
  border-radius: 8px;
  z-index: 26 !important;
  animation: dropReceiverPulse 0.9s ease-in-out infinite;
}
.map-node.drop-target-receiver         { outline-color: #EF4444 !important; }
.map-node.drop-target-receiver-promote { outline-color: #F59E0B !important; }
@keyframes dropReceiverPulse {
  0%, 100% { outline-offset: 3px; }
  50%      { outline-offset: 5px; }
}

/* ════════════════════════════════════════════════════════════
   SET 2 — Density slider, dark-mode parity fixes
   ════════════════════════════════════════════════════════════ */

/* Density slider — settings row */
.density-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}
.density-slider {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: var(--surface3, rgba(255,255,255,0.10));
  outline: none;
}
.density-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--brand, #7C6FFF);
  border: 2px solid var(--surface, #fff);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.density-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--brand, #7C6FFF);
  border: 2px solid var(--surface, #fff);
  cursor: pointer;
}
.density-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-2);
}
.density-labels .active {
  color: var(--brand, #7C6FFF);
  font-weight: 600;
}

/* ── Dark-mode parity for Set-1 components ── */
[data-theme="dark"] .shortcuts-modal-body kbd,
[data-theme="dark"] .shortcuts-modal-footer kbd {
  background: linear-gradient(180deg, #262a37 0%, #1e2230 100%);
  border-color: rgba(255, 255, 255, 0.10);
  color: var(--text);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4) inset;
}
[data-theme="dark"] .bab-swatch-btn.bab-swatch-clear {
  background: var(--surface2, #1e2436);
  color: var(--text-2, #8892a4);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* ════════════════════════════════════════════════════════════
   SET 3 — Branch AI actions, ghost preview, voice HUD
   ════════════════════════════════════════════════════════════ */

/* Ghost (proposed) AI nodes — translucent, dashed border */
.map-node.ai-ghost {
  opacity: 0.62;
  border: 1.5px dashed rgba(124, 111, 255, 0.85) !important;
  background: rgba(124, 111, 255, 0.08) !important;
  animation: aiGhostPulse 1.6s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(124, 111, 255, 0.0);
}
@keyframes aiGhostPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124, 111, 255, 0.0); }
  50%      { box-shadow: 0 0 0 4px rgba(124, 111, 255, 0.18); }
}
[data-theme="dark"] .map-node.ai-ghost {
  background: rgba(124, 111, 255, 0.18) !important;
  border-color: rgba(160, 150, 255, 0.85) !important;
}

/* Ghost ✓ / ✕ floating bar (top-center) */
.ai-ghost-bar {
  position: fixed;
  left: 50%;
  top: 80px;
  transform: translateX(-50%) translateY(-12px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--surface, #fff);
  color: var(--text, #111);
  border: 1px solid rgba(124, 111, 255, 0.35);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  font-size: 13px;
  z-index: 9000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.ai-ghost-bar.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.ai-ghost-bar .agb-label {
  font-weight: 600;
  color: var(--text);
  padding: 0 4px;
}
.ai-ghost-bar .agb-btn {
  border: none;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.ai-ghost-bar .agb-accept {
  background: var(--brand, #7C6FFF);
  color: #fff;
}
.ai-ghost-bar .agb-accept:hover { filter: brightness(1.08); }
.ai-ghost-bar .agb-reject {
  background: var(--surface2, rgba(0,0,0,0.06));
  color: var(--text-2, #555);
}
.ai-ghost-bar .agb-reject:hover { background: rgba(255, 80, 80, 0.15); color: #d63031; }

/* Voice input HUD */
.voice-hud {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(20px);
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(560px, calc(100vw - 32px));
  padding: 10px 14px;
  background: var(--surface, #fff);
  color: var(--text, #111);
  border: 1px solid rgba(124, 111, 255, 0.35);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
  z-index: 9000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.voice-hud.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.voice-hud-pulse {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ff5566;
  box-shadow: 0 0 0 0 rgba(255, 85, 102, 0.8);
  animation: voicePulse 1.2s infinite;
  flex: 0 0 auto;
}
@keyframes voicePulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 85, 102, 0.85); }
  70%  { box-shadow: 0 0 0 12px rgba(255, 85, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 85, 102, 0); }
}
.voice-hud-text {
  flex: 1;
  font-size: 13px;
  color: var(--text);
  max-height: 4.2em;
  overflow: hidden;
  line-height: 1.4;
}
.voice-hud-stop {
  border: none;
  background: var(--surface2, rgba(0,0,0,0.06));
  color: var(--text);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.voice-hud-stop:hover { background: rgba(255, 80, 80, 0.18); color: #d63031; }

/* Smart-templates expanded list */
.cm-tpl-row { padding-left: 28px !important; }

/* ════════════════════════════════════════════
   Set 5 — Knowledge & Data
   ════════════════════════════════════════════ */

/* ── Tag rail (auto-extracted #tags) ── */
.knowledge-tag-rail {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
}
.knowledge-tag-rail.hidden { display: none; }
.tag-rail-scroll {
    flex: 1;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
}
.tag-rail-scroll::-webkit-scrollbar { display: none; }
.tag-rail-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-2);
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 999px;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tag-rail-chip:hover { background: color-mix(in srgb, var(--brand) 12%, var(--surface2)); color: var(--text); }
.tag-rail-chip.active {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}
.tag-rail-count {
    font-size: 9px;
    opacity: 0.7;
    font-weight: 500;
}
.tag-rail-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.tag-rail-btn {
    width: 26px;
    height: 26px;
    border: 1px solid var(--border);
    background: var(--surface2);
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.tag-rail-btn:hover { background: color-mix(in srgb, var(--brand) 14%, var(--surface2)); }

/* ── Wiki links + hashtag pills inside node text ── */
.node-text .wiki-link {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 6px;
    margin: 0 1px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--brand) 14%, transparent);
    color: var(--brand);
    font-weight: 600;
    cursor: pointer;
    pointer-events: auto;
    transition: background 0.15s;
}
.node-text .wiki-link:hover {
    background: color-mix(in srgb, var(--brand) 26%, transparent);
}
.node-text .wiki-link-map {
    background: color-mix(in srgb, #FF7849 18%, transparent);
    color: #FF7849;
}
.node-text .wiki-link-map:hover { background: color-mix(in srgb, #FF7849 32%, transparent); }
.node-text .hashtag-pill {
    display: inline-block;
    padding: 0 5px;
    margin: 0 1px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--brand) 10%, transparent);
    color: var(--brand);
    font-weight: 600;
    cursor: pointer;
    pointer-events: auto;
    transition: background 0.15s;
}
.node-text .hashtag-pill:hover { background: color-mix(in srgb, var(--brand) 22%, transparent); }

/* ── Per-node attachment thumbnails ── */
.node-attach-thumbs {
    display: flex;
    gap: 3px;
    margin-top: 4px;
    flex-wrap: wrap;
    pointer-events: auto;
}
.node-attach-thumb {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--surface2);
    overflow: hidden;
    object-fit: cover;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}
.node-attach-thumb.img { padding: 0; }
.node-attach-thumb:hover {
    transform: scale(1.08);
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    z-index: 5;
}
.node-attach-thumb.more {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-2);
    cursor: default;
}
.node-attach-thumb.more:hover { transform: none; box-shadow: none; }

/* ── Lenses panel (saved filter views) ── */
.lenses-panel {
    position: fixed;
    top: 70px;
    right: 16px;
    width: 320px;
    max-height: 60vh;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 36px rgba(0,0,0,0.28);
    z-index: 9999;
    display: none;
    flex-direction: column;
    overflow: hidden;
}
.lenses-panel.open { display: flex; }
.lenses-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    font-weight: 700;
    font-size: 13px;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    background: var(--surface2);
}
.lenses-close {
    border: none;
    background: transparent;
    font-size: 14px;
    cursor: pointer;
    color: var(--text-2);
    padding: 4px;
}
.lenses-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}
.lenses-empty {
    padding: 18px;
    text-align: center;
    color: var(--text-3);
    font-size: 12px;
}
.lens-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 6px;
    background: var(--surface2);
}
.lens-info { flex: 1; min-width: 0; }
.lens-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 2px;
}
.lens-summary {
    font-size: 11px;
    color: var(--text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lens-apply {
    padding: 4px 10px;
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}
.lens-apply:hover { filter: brightness(1.08); }
.lens-delete {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-3);
    padding: 4px;
}
.lens-delete:hover { color: #E5484D; }

/* ════════════════════════════════════════════
   Set 6 — Tasks & PM workflow
   ════════════════════════════════════════════ */

/* ── Due-date heatmap on canvas ── */
.map-node.due-overdue {
    box-shadow: 0 0 0 2px #E5484D, 0 0 16px rgba(229, 72, 77, 0.45) !important;
    animation: dueOverduePulse 2s ease-in-out infinite;
}
@keyframes dueOverduePulse {
    0%, 100% { box-shadow: 0 0 0 2px #E5484D, 0 0 12px rgba(229, 72, 77, 0.35); }
    50% { box-shadow: 0 0 0 2px #E5484D, 0 0 20px rgba(229, 72, 77, 0.65); }
}
.map-node.due-today {
    box-shadow: 0 0 0 2px #FFB347, 0 0 14px rgba(255, 179, 71, 0.5) !important;
}
.map-node.due-soon {
    box-shadow: 0 0 0 1.5px rgba(255, 179, 71, 0.55), 0 0 8px rgba(255, 179, 71, 0.25) !important;
}
[data-theme="dark"] .map-node.due-overdue {
    box-shadow: 0 0 0 2px #FF6B6B, 0 0 16px rgba(255, 107, 107, 0.6) !important;
}

/* ── Pomodoro-aware dimming ── */
body.pomodoro-active .map-node.pomo-dimmed {
    opacity: 0.18 !important;
    filter: grayscale(0.6);
    transition: opacity 0.35s ease, filter 0.35s ease;
}
body.pomodoro-active .map-node.pomo-focused {
    opacity: 1 !important;
    transition: opacity 0.35s ease;
}
body.pomodoro-active .connector-svg path {
    opacity: 0.25;
    transition: opacity 0.35s ease;
}

/* ── Kanban: status pill + push button + swimlane button ── */
.kanban-status-pill {
    display: inline-block;
    margin-top: 6px;
    padding: 1px 7px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid;
    border-radius: 999px;
    background: transparent;
}
.kanban-card { position: relative; }
.kanban-card-push {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border: none;
    background: rgba(0,0,0,0.05);
    border-radius: 5px;
    font-size: 12px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s;
}
.kanban-card:hover .kanban-card-push { opacity: 1; }
.kanban-card-push:hover { background: rgba(124, 111, 255, 0.18); }
.kanban-swimlane-btn {
    margin-left: auto;
    margin-right: 8px;
    padding: 6px 12px;
    border: 1px solid var(--border, #ddd);
    background: var(--surface2, #f5f5f7);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    color: var(--text, #111);
}
.kanban-swimlane-btn:hover { background: color-mix(in srgb, var(--brand) 14%, var(--surface2, #f5f5f7)); }
.kanban-swimlane {
    display: flex;
    flex-direction: column;
    margin-bottom: 14px;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 10px;
    overflow: hidden;
}
.kanban-swimlane-head {
    padding: 8px 14px;
    font-weight: 700;
    font-size: 13px;
    color: var(--text, #111);
    background: var(--surface2, #f5f5f7);
    border-bottom: 1px solid var(--border, #e0e0e0);
}
.kanban-swimlane-cols {
    display: flex;
    gap: 12px;
    padding: 12px;
    overflow-x: auto;
}
.kanban-swimlane-cols .kanban-column {
    min-width: 240px;
    flex-shrink: 0;
}
.kanban-swim-empty {
    padding: 32px;
    text-align: center;
    color: var(--text-3, #888);
    font-size: 13px;
}
#kanban-columns.kanban-swimlane-mode {
    flex-direction: column;
    align-items: stretch;
}

/* ── Push to Reminders / Tasks dialog ── */
.push-task-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.push-task-backdrop {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(2px);
}
.push-task-card {
    position: relative;
    width: 90vw; max-width: 380px;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #ddd);
    border-radius: 14px;
    box-shadow: 0 18px 60px rgba(0,0,0,0.32);
    overflow: hidden;
    z-index: 1;
}
.push-task-header {
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #7C6FFF, #FF7849);
    color: #fff;
    font-weight: 700;
}
.push-task-close {
    background: rgba(255,255,255,0.2);
    color: #fff;
    border: none;
    width: 26px; height: 26px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 12px;
}
.push-task-close:hover { background: rgba(255,255,255,0.32); }
.push-task-body { padding: 16px; }
.push-task-title {
    font-size: 14px; font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
}
.push-task-due {
    font-size: 12px;
    color: var(--text-2, #555);
    margin-bottom: 14px;
}
.push-task-options {
    display: flex; flex-direction: column; gap: 8px;
    margin-top: 12px;
}
.push-opt {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1.5px solid var(--border, #ddd);
    border-radius: 10px;
    background: var(--surface2, #f7f7f9);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, transform 0.1s;
    color: var(--text);
}
.push-opt:hover {
    border-color: var(--brand, #7C6FFF);
    transform: translateY(-1px);
}
.push-opt-icon { font-size: 22px; }
.push-opt-title { font-size: 13px; font-weight: 700; }
.push-opt-sub { font-size: 11px; color: var(--text-3, #888); }

/* ════════════════════════════════════════════
   Set 7 — Templates & Onboarding
   ════════════════════════════════════════════ */

/* Template variables modal */
.tpl-vars-modal {
    position: fixed; inset: 0; z-index: 99999;
    display: flex; align-items: center; justify-content: center;
}
.tpl-vars-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
}
.tpl-vars-card {
    position: relative; z-index: 1;
    width: 90vw; max-width: 440px;
    background: var(--surface, #1e1e2e);
    border: 1px solid var(--border, rgba(255,255,255,0.12));
    border-radius: 16px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.5);
    overflow: hidden;
    color: var(--text, #fff);
}
.tpl-vars-header {
    padding: 14px 18px;
    background: linear-gradient(135deg, #7C6FFF, #FF7849);
    color: #fff;
    font-weight: 700;
    display: flex; justify-content: space-between; align-items: center;
}
.tpl-vars-close {
    background: rgba(255,255,255,0.2); color: #fff;
    border: none; width: 26px; height: 26px;
    border-radius: 50%; cursor: pointer; font-size: 12px;
}
.tpl-vars-close:hover { background: rgba(255,255,255,0.32); }
.tpl-vars-body {
    padding: 18px;
    max-height: 50vh; overflow-y: auto;
    display: flex; flex-direction: column; gap: 12px;
}
.tpl-var-row { display: flex; flex-direction: column; gap: 6px; }
.tpl-var-row label {
    font-size: 12px; font-weight: 600;
    color: var(--text-2, #ccc);
    text-transform: capitalize;
}
.tpl-var-row input {
    padding: 9px 12px;
    border: 1px solid var(--border, rgba(255,255,255,0.18));
    background: var(--surface2, rgba(0,0,0,0.25));
    color: var(--text, #fff);
    border-radius: 8px;
    font-size: 14px;
    outline: none;
}
.tpl-var-row input:focus { border-color: #7C6FFF; box-shadow: 0 0 0 3px rgba(124,111,255,0.25); }
.tpl-vars-actions {
    padding: 12px 18px 18px;
    display: flex; justify-content: flex-end; gap: 8px;
}
.tpl-vars-skip {
    padding: 9px 16px; border-radius: 8px;
    border: 1px solid var(--border, rgba(255,255,255,0.18));
    background: transparent; color: var(--text-2, #ccc);
    cursor: pointer; font-weight: 600;
}
.tpl-vars-skip:hover { background: rgba(255,255,255,0.06); }
.tpl-vars-apply {
    padding: 9px 18px; border-radius: 8px; border: none;
    background: linear-gradient(135deg, #7C6FFF, #FF7849);
    color: #fff; cursor: pointer; font-weight: 700;
}
.tpl-vars-apply:hover { filter: brightness(1.08); }

/* Tutorial overlay */
.tutorial-overlay {
    position: fixed; inset: 0; z-index: 100001;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    pointer-events: auto;
    animation: tutFadeIn 0.25s ease;
}
@keyframes tutFadeIn { from { opacity: 0; } to { opacity: 1; } }
.tutorial-spotlight {
    position: fixed;
    border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.55), 0 0 0 3px #7C6FFF, 0 0 36px rgba(124,111,255,0.85);
    pointer-events: none;
    transition: top 0.3s ease, left 0.3s ease, width 0.3s ease, height 0.3s ease;
    animation: tutPulse 2s ease-in-out infinite;
}
@keyframes tutPulse {
    0%, 100% { box-shadow: 0 0 0 9999px rgba(0,0,0,0.55), 0 0 0 3px #7C6FFF, 0 0 24px rgba(124,111,255,0.7); }
    50%      { box-shadow: 0 0 0 9999px rgba(0,0,0,0.55), 0 0 0 3px #FF7849, 0 0 40px rgba(255,120,73,0.85); }
}
.tutorial-tooltip {
    position: fixed;
    width: 320px;
    background: var(--surface, #1e1e2e);
    border: 1px solid var(--border, rgba(255,255,255,0.14));
    border-radius: 14px;
    box-shadow: 0 22px 60px rgba(0,0,0,0.5);
    padding: 16px 18px;
    color: var(--text, #fff);
    transition: top 0.3s ease, left 0.3s ease;
}
.tutorial-step-indicator {
    display: inline-block;
    font-size: 10px; font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, #7C6FFF, #FF7849);
    padding: 3px 9px;
    border-radius: 999px;
    margin-bottom: 10px;
}
.tutorial-text {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text, #fff);
    margin-bottom: 14px;
}
.tutorial-text b { color: #7C6FFF; font-weight: 700; }
.tutorial-actions { display: flex; justify-content: space-between; gap: 8px; }
.tutorial-skip {
    background: transparent;
    color: var(--text-3, #888);
    border: none; cursor: pointer;
    font-size: 12px; font-weight: 600;
    padding: 6px 10px;
}
.tutorial-skip:hover { color: var(--text, #fff); }
.tutorial-next {
    padding: 8px 16px;
    background: linear-gradient(135deg, #7C6FFF, #FF7849);
    color: #fff;
    border: none; border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    font-size: 13px;
}
.tutorial-next:hover { filter: brightness(1.1); transform: translateY(-1px); }

/* ════════════════════════════════════════════
   Set 8 — Export dialog
   ════════════════════════════════════════════ */
.exp-extras-modal {
    position: fixed; inset: 0; z-index: 99999;
    display: flex; align-items: center; justify-content: center;
}
.exp-extras-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
}
.exp-extras-card {
    position: relative; z-index: 1;
    width: 92vw; max-width: 460px;
    background: var(--surface, #1e1e2e);
    border: 1px solid var(--border, rgba(255,255,255,0.12));
    border-radius: 16px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.5);
    overflow: hidden;
    color: var(--text, #fff);
}
.exp-extras-header {
    padding: 14px 18px;
    background: linear-gradient(135deg,#7C6FFF,#FF7849);
    color:#fff; font-weight:700;
    display:flex; justify-content:space-between; align-items:center;
}
.exp-extras-close {
    background: rgba(255,255,255,0.2); color:#fff;
    border:none; width:26px; height:26px;
    border-radius:50%; cursor:pointer; font-size:12px;
}
.exp-extras-body {
    padding: 14px;
    display:flex; flex-direction:column; gap:10px;
}
.exp-opt {
    display:flex; align-items:center; gap:14px;
    padding: 12px 14px;
    border:1.5px solid var(--border, rgba(255,255,255,0.12));
    border-radius:10px;
    background: var(--surface2, rgba(255,255,255,0.04));
    cursor:pointer; text-align:left;
    color: var(--text, #fff);
    transition: border-color 0.15s, transform 0.1s;
}
.exp-opt:hover { border-color:#7C6FFF; transform: translateY(-1px); }
.exp-opt-icon { font-size:24px; }
.exp-opt-title { font-weight:700; font-size:13.5px; }
.exp-opt-sub { font-size:11.5px; color: var(--text-3, #888); margin-top:2px; }

/* ════════════════════════════════════════════
   Set 9 — Performance / Virtualization
   ════════════════════════════════════════════ */
.map-node.virt-hidden {
    visibility: hidden !important;
    pointer-events: none !important;
    contain: strict;
}

/* ════════════════════════════════════════════
   Set 10 — Command palette + ⌘K FAB
   ════════════════════════════════════════════ */
.cmdk-fab {
    position: fixed;
    bottom: 16px; left: 16px;
    z-index: 90;
    background: rgba(124,111,255,0.14);
    color: var(--text, #fff);
    border: 1px solid rgba(124,111,255,0.35);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    backdrop-filter: blur(8px);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background 0.15s, transform 0.1s;
}
.cmdk-fab:hover { background: rgba(124,111,255,0.28); transform: translateY(-1px); }
.cmdk-fab span { font-size: 14px; }
@media (max-width: 720px) { .cmdk-fab { display: none; } }

.cmdk-modal {
    position: fixed; inset: 0; z-index: 100002;
    display: flex; align-items: flex-start; justify-content: center;
    padding-top: 12vh;
}
.cmdk-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
}
.cmdk-card {
    position: relative; z-index: 1;
    width: 90vw; max-width: 600px;
    background: var(--surface, #1e1e2e);
    border: 1px solid var(--border, rgba(255,255,255,0.14));
    border-radius: 14px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.55);
    overflow: hidden;
    color: var(--text, #fff);
    animation: cmdkPop 0.18s ease;
}
@keyframes cmdkPop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.cmdk-input-row {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.1));
}
.cmdk-search-icon { font-size: 16px; color: var(--text-2, #aaa); }
.cmdk-input {
    flex: 1;
    background: transparent;
    border: none; outline: none;
    color: var(--text, #fff);
    font-size: 15px;
}
.cmdk-kbd {
    background: rgba(255,255,255,0.08);
    color: var(--text-3, #aaa);
    padding: 2px 7px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 4px;
}
.cmdk-list { max-height: 50vh; overflow-y: auto; padding: 6px; }
.cmdk-item {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.1s;
}
.cmdk-item.active, .cmdk-item:hover { background: rgba(124,111,255,0.18); }
.cmdk-item-icon { font-size: 18px; width: 22px; text-align: center; }
.cmdk-item-text { flex: 1; min-width: 0; }
.cmdk-item-title {
    font-size: 13.5px; font-weight: 600;
    color: var(--text, #fff);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cmdk-item-sub {
    font-size: 11.5px;
    color: var(--text-3, #888);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cmdk-item-kind {
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-3, #888);
    background: rgba(255,255,255,0.05);
    padding: 2px 7px;
    border-radius: 999px;
}
.cmdk-empty {
    padding: 36px;
    text-align: center;
    color: var(--text-3, #888);
    font-size: 13px;
}
.cmdk-footer {
    display: flex; gap: 18px;
    padding: 8px 14px;
    border-top: 1px solid var(--border, rgba(255,255,255,0.1));
    font-size: 10.5px;
    color: var(--text-3, #888);
    background: rgba(0,0,0,0.18);
}
.cmdk-footer kbd {
    background: rgba(255,255,255,0.07);
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 9.5px;
    margin-right: 4px;
    border: 1px solid rgba(255,255,255,0.08);
}

/* ════════════════════════════════════════════
   Set 8 — Print stylesheet
   ════════════════════════════════════════════ */
@media print {
    @page { size: A4 landscape; margin: 14mm; }
    body {
        background: #fff !important;
        color: #000 !important;
    }
    /* Hide chrome */
    .toolbar, #toolbar, .nav-rail, #nav-rail, .ai-fab, #ai-fab, .ai-chat-fab,
    #ai-chat-fab, #cmdk-fab, .tag-rail, #tag-rail,
    .scroll-indicator, #share-btn, .floating-actions, .action-bar,
    #floating-action-bar, .bulk-action-bar, #breadcrumb-bar, .pomodoro-widget,
    #pomodoro-mini, .toast, .toast-stack, .auth-gate, .skeleton-overlay,
    .tutorial-overlay, .modal-overlay, .library-modal,
    #template-picker-modal, #share-dialog, #share-dialog-overlay {
        display: none !important;
    }
    /* Show map full bleed */
    #canvas, .canvas, .canvas-stage, .map-stage, .canvas-wrap {
        position: static !important;
        top: 0 !important; left: 0 !important;
        width: 100% !important; height: auto !important;
        background: #fff !important;
        overflow: visible !important;
    }
    /* Remove transforms so the SVG/world fits the page */
    body.print-mode .world,
    body.print-mode #world {
        transform: none !important;
        width: 100% !important; height: auto !important;
    }
    /* Nodes: B/W with a 1pt border for editorial look */
    .map-node {
        background: #fff !important;
        color: #000 !important;
        border: 1pt solid #222 !important;
        box-shadow: none !important;
        page-break-inside: avoid;
        break-inside: avoid;
        animation: none !important;
        filter: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    .map-node.virt-hidden { display: none !important; }
    .map-node.due-overdue, .map-node.due-today, .map-node.due-soon { box-shadow: none !important; }
    /* Edges: thicker B/W strokes */
    .connector-svg path,
    svg.connector-svg path {
        stroke: #222 !important;
        stroke-width: 0.8 !important;
        fill: none !important;
        opacity: 1 !important;
    }
    /* Optional title header at top of first page */
    body::before {
        content: attr(data-print-title);
        display: block;
        font-size: 18pt;
        font-weight: 700;
        color: #000;
        border-bottom: 1pt solid #222;
        padding-bottom: 6pt;
        margin-bottom: 12pt;
    }
}

/* ── Cross-link (relationship arrow) selection + delete UX ── */
svg path.cross-link { transition: stroke-width 120ms, opacity 120ms; }
svg path.cross-link:hover { stroke-width: 3.5 !important; opacity: 1 !important; }
svg path.cross-link.selected {
  stroke-width: 4 !important;
  opacity: 1 !important;
  filter: drop-shadow(0 0 4px currentColor);
}

/* ──────────────────────────────────────────────
   MAP TABS BAR (cross-device open-tabs strip)
   ────────────────────────────────────────────── */
.map-tabs-bar {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 56px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 11000;
  pointer-events: auto;
  max-width: min(720px, calc(100vw - 32px));
  display: flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}
[data-theme="light"] .map-tabs-bar {
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
.map-tabs-bar.hidden { display: none; }

.map-tabs-scroll {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.map-tabs-scroll::-webkit-scrollbar { height: 4px; }
.map-tabs-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.map-tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  max-width: 180px;
  height: 30px;
  padding: 0 6px 0 12px;
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: background .15s, color .15s;
}
.map-tab:hover { background: var(--surface2); color: var(--text); }
.map-tab.active {
  background: var(--surface2);
  color: var(--text);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--brand);
}
.map-tab-label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}
.map-tab-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 2px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  opacity: 0.6;
  transition: background .12s, opacity .12s;
}
.map-tab-close:hover { background: var(--border); opacity: 1; color: var(--text); }
.map-tab.active .map-tab-close { opacity: 0.85; }

@media (max-width: 600px) {
  .map-tabs-bar {
    /* On phones the floating title sits dead-center; push tabs lower so
       they don't collide. */
    top: calc(env(safe-area-inset-top, 0px) + 96px);
    max-width: calc(100vw - 16px);
  }
  .map-tab { max-width: 130px; font-size: 12px; height: 28px; }
}