/* ================================================================
   AVIQUILL — Main Stylesheet
   ================================================================ */

/* ----------------------------------------------------------------
   1. Variables / Design Tokens
---------------------------------------------------------------- */
:root {
  /* Base surfaces — clear contrast steps for depth */
  --bg-void:      #0c0d14;   /* canvas background */
  --bg-base:      #0c0d14;
  --bg-surface:   #0d0e1a;   /* floating panels */
  /* On-canvas blocks — lifted off the void; tray (--tray-bg) stays a darker inset */
  --bg-block:     #171b2c;
  --bg-elevated:  #1a1b2e;   /* modals, block editor popups */
  /* Checklist cards, color picker, etc. (was referenced but never set — cards had no real fill) */
  --bg-2:         #1a1b2e;
  --surface-hover:     color-mix(in srgb, var(--primary) 12%, var(--bg-2));
  --surface-selected:  color-mix(in srgb, var(--primary) 22%, var(--bg-2));
  --surface-active:    color-mix(in srgb, var(--primary) 32%, var(--bg-2));
  /* Checklist item rows: sit darker than --bg-2 in block tray + popup (dark) */
  --cl-item-surface: color-mix(in srgb, var(--bg-2) 22%, var(--bg-block) 78%);
  --cl-item-surface-hover: color-mix(in srgb, var(--bg-2) 38%, var(--bg-block) 62%);

  /* Borders — neutral, no colored glow */
  --border-dim:    #262840;
  --border:        #1e2030;
  --border-bright: #30324e;
  --dot-color:     rgba(255, 255, 255, 0.035);

  /* Text */
  --text-1:       #dde1f0;
  --text-2:       #8a90aa;
  --text-3:       #52566e;
  --text-4:       #33364c;

  /* Primary color — violet, the main dark-theme brand color */
  --primary:       #6c5fe4;
  --primary-h:     #7d70ee;
  --primary-04:    rgba(108, 95, 228, 0.04);
  --primary-06:    rgba(108, 95, 228, 0.06);
  --primary-dim:   rgba(108, 95, 228, 0.08);
  --primary-10:    rgba(108, 95, 228, 0.10);
  --primary-12:    rgba(108, 95, 228, 0.12);
  --primary-mid:   rgba(108, 95, 228, 0.14);
  --primary-15:    rgba(108, 95, 228, 0.15);
  --primary-glow:  rgba(108, 95, 228, 0.18);
  --primary-20:    rgba(108, 95, 228, 0.20);
  --primary-22:    rgba(108, 95, 228, 0.22);
  --primary-25:    rgba(108, 95, 228, 0.25);
  --primary-30:    rgba(108, 95, 228, 0.30);
  --primary-35:    rgba(108, 95, 228, 0.35);
  --primary-40:    rgba(108, 95, 228, 0.40);
  --primary-55:    rgba(108, 95, 228, 0.55);
  --primary-60:    rgba(108, 95, 228, 0.60);
  --primary-70:    rgba(108, 95, 228, 0.70);
  --primary-text:  #a89ef6;

  /* Secondary color — teal (kept, used for connections/links) */
  --teal:         #3ec4bc;

  /* States */
  --danger:       #e04f68;
  --danger-dim:   rgba(224, 79, 104, 0.1);
  --success:      #4ec9a0;
  --warn:         #e0a84f;

  /* Chroma anchors — use in rules instead of raw white/black hex */
  --color-white: #ffffff;
  --color-black: #000000;
  --on-primary: var(--color-white);

  /* Shape */
  --r:            6px;
  --r-sm:         3px;

  /* Floating glass panels (profile, prefs, inbox, toolbar, etc.) */
  --panel-bg:     rgba(12, 13, 20, 0.92);
  --panel-border: var(--primary-15);
  --panel-shadow: 0 0 0 1px var(--primary-06), 0 8px 32px rgba(0, 0, 0, 0.45);

  /* Tray behind gallery / YouTube / text / checklist — darker inset than the block face */
  --tray-bg:     color-mix(in srgb, var(--color-black) 44%, var(--bg-block));
  /* Slightly lift the rim from the tray fill so the 1px edge stays visible (not more black) */
  --tray-border: 1px solid color-mix(in srgb, var(--border-bright) 52%, var(--tray-bg));

  /* Offscreen checkpoint minimap (.cp-minimap-graph) — dark UI */
  --cp-minimap-bg:     rgba(0, 0, 0, 0.2);
  --cp-minimap-border: rgba(108, 95, 228, 0.08);

  /* Drawing overlay + free-draw — glass bars & panels (overridden in [data-theme=light]) */
  --draw-surface:         rgba(12, 13, 20, 0.92);
  --draw-border:          color-mix(in srgb, var(--primary) 15%, var(--border-dim));
  --draw-shadow:          0 0 0 1px var(--primary-06), 0 2px 12px rgba(0, 0, 0, 0.22);
  --draw-topbar-edge:     color-mix(in srgb, var(--primary) 12%, var(--border-dim));
  --draw-topbar-sheen:    none;
  /* Icon buttons: primary hairline (same pattern as light once border-dim / primary switch) */
  --draw-icon-border:     color-mix(in srgb, var(--primary) 14%, var(--border-dim));
  --draw-icon-border-h:   color-mix(in srgb, var(--primary) 24%, var(--border-dim));
  --draw-danger-border:   color-mix(in srgb, var(--danger) 30%, var(--border-dim));

  /* Bottom .toolbar-dock (toolbar + optional constellation search row) */
  --avq-toolbar-b:     calc(20px + env(safe-area-inset-bottom, 0px));
  --avq-toolbar-h:     46px;
  --avq-search-h:      40px;
  /* #toolbar-context-banner hidden — keep at 0 so floating-panel offsets stay correct */
  --avq-toolbar-context-label-h: 0px;
  /* Breathing room between dock top and floating panels (profile, inbox, drawers, …) */
  --avq-floating-gap: 80px;
  /* Outer .toolbar stack: pad + context banner + gap + button row (matches default padding/gap) */
  --avq-toolbar-stack-h: calc(
    16px + var(--avq-toolbar-context-label-h) + 5px + var(--avq-toolbar-h)
  );
  /* Distance from viewport bottom to floating panel bottom — includes dock inset via --avq-toolbar-b (do not add safe-area again) */
  --avq-floating-above-toolbar: calc(
    var(--avq-toolbar-b) + var(--avq-toolbar-stack-h) + var(--avq-floating-gap)
  );
  /* Constellation: search row + same toolbar stack + gap */
  --avq-const-bottom-clearance: calc(
    var(--avq-toolbar-b) + var(--avq-search-h) + var(--avq-toolbar-stack-h) + var(--avq-floating-gap)
  );
  /* Canvas HUD (block/port/connection/tag rails) — under .toolbar-dock (200), profile/prefs (5k), md-bubble (9100), modal overlays (9500) */
  --avq-canvas-hud-z: 199;
  /* Bottom-adjacent floating panels + toolbar + top banner */
  --toolbar-panel-border: 1px solid #1e1f36;
  --toolbar-panel-top: 1px solid #1e1f36;
  --toolbar-panel-radius: 4px;
  --toolbar-panel-shadow: none;
}

/* Premium light theme — clean whites on a cool-gray canvas */
[data-theme="light"] {
  /* Canvas is a soft cool-gray so white panels visually lift off it */
  --bg-void:      #edf0f7;
  --bg-base:      #edf0f7;
  --bg-surface:   var(--color-white);   /* panels/sidebars are pure white */
  --bg-elevated:  var(--color-white);   /* modals and popups */
  --bg-block:     var(--color-white);   /* block card face (overridden with gradients in places) */
  --bg-2:         var(--color-white);
  --surface-hover:     #e4e7f2;
  --surface-selected:  #dce0ee;
  --surface-active:    #d3d7e8;
  /* Checklist item rows (light) — unchecked matches block face; outline via --cl-item-color on each row */
  --cl-item-surface: var(--bg-block);
  --cl-item-surface-hover: color-mix(in srgb, var(--primary) 12%, #eef0f4);
  /* Checked: lighter than before so rows read paler, not a heavy gray (canvas + popup) */
  --cl-item-surface-checked: color-mix(in srgb, var(--primary) 5%, #f1f2f6);
  --cl-item-surface-checked-hover: color-mix(in srgb, var(--primary) 10%, #e5e7ef);

  --border-dim:    #e8eaf4;
  --border:        #dce0ec;
  --border-bright: #c8ccde;
  --dot-color:     rgba(78, 82, 112, 0.18);

  /* Text — near-black with the brand's subtle indigo undertone */
  --text-1:       #141520;
  --text-2:       #4e5270;
  --text-3:       #8e92aa;
  --text-4:       #b8bbcc;

  --primary:       #6c5fe4;
  --primary-h:     #5b4ed6;
  --primary-dim:   rgba(108, 95, 228, 0.08);
  --primary-mid:   rgba(108, 95, 228, 0.14);
  --primary-glow:  rgba(108, 95, 228, 0.20);
  --primary-text:  #5347c4;

  --teal:         #2ba69f;

  --danger:       #c93650;
  --danger-dim:   rgba(201, 54, 80, 0.10);
  --success:      #2e9472;
  --warn:         #b8812e;

  --panel-bg:     rgba(255, 255, 255, 0.94);
  --panel-border: var(--border);
  --panel-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);

  --tray-bg:     #f2f4fb;
  --tray-border: 1px solid color-mix(in srgb, #0a0c10 8%, var(--border-dim));

  --toolbar-panel-border: 1px solid var(--border);
  --toolbar-panel-top: 1px solid var(--border);
  --toolbar-panel-radius: 4px;
  --toolbar-panel-shadow: none;

  --cp-minimap-bg:     var(--bg-elevated);
  --cp-minimap-border: var(--border-dim);

  --draw-surface:       rgba(255, 255, 255, 0.94);
  --draw-border:        var(--border);
  --draw-shadow:        0 0 0 1px var(--primary-06), 0 1px 6px rgba(0, 0, 0, 0.07);
  --draw-topbar-edge:   var(--border-dim);
  --draw-topbar-sheen:  0 1px 0 color-mix(in srgb, #0a0c10 3%, transparent);
  --draw-danger-border: color-mix(in srgb, var(--danger) 32%, var(--border-dim));
}

/* ----------------------------------------------------------------
   2. Reset & Base
---------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  line-height: 1.55;
  background: var(--bg-void);
  color: var(--text-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

input, button, textarea {
  font-family: inherit;
  font-size: inherit;
}

button {
  cursor: pointer;
}

/* ----------------------------------------------------------------
   4. App Shell / Layout
---------------------------------------------------------------- */
.app {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 100vh;
  grid-template-rows: 100dvh;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* ----------------------------------------------------------------
   5. Profile Toggle Button & Panel
---------------------------------------------------------------- */
.profile-toggle-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--border-dim);
  background: transparent;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 0 6px var(--primary-10);
  transition: border-color 0.15s, box-shadow 0.15s;
  flex-shrink: 0;
  margin-left: 14px;
}
.profile-toggle-btn:hover {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-15);
}
.profile-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.profile-avatar-fallback {
  color: var(--primary-text);
}

/* ── Quick Note Panel ───────────────────────────────────────────── */
.quick-note-panel {
  position: fixed;
  bottom: var(--avq-floating-above-toolbar);
  left: 50%;
  width: 320px;
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: var(--toolbar-panel-border);
  border-top: var(--toolbar-panel-top);
  border-radius: var(--toolbar-panel-radius);
  box-shadow: var(--toolbar-panel-shadow);
  overflow: hidden;
  z-index: 5000;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transform: translateX(-50%) translateY(8px) scale(0.97);
  transform-origin: bottom center;
  transition: opacity 0.15s ease, transform 0.15s cubic-bezier(0.16,1,0.3,1), visibility 0s linear 0.15s;
}
.quick-note-panel.is-open {
  opacity: 1;
  pointer-events: all;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
  transition: opacity 0.15s ease, transform 0.15s cubic-bezier(0.16,1,0.3,1), visibility 0s;
}
.quick-note-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--panel-border);
  flex-shrink: 0;
}
.quick-note-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.quick-note-textarea {
  flex: 1;
  resize: none;
  min-height: 180px;
  max-height: 400px;
  padding: 10px 12px;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-1);
  font-size: 12.5px;
  line-height: 1.6;
  font-family: inherit;
}
.quick-note-textarea::placeholder { color: var(--text-4); }
.quick-note-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 4px 10px 6px;
  border-top: 1px solid var(--panel-border);
  flex-shrink: 0;
}
.quick-note-status {
  font-size: 10px;
  color: var(--text-4);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.quick-note-status.is-visible { opacity: 1; }

/* ── Quick Notes — multi-note list + editor views ──────────────── */
.qn-view {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.qn-view[hidden] { display: none; }
.qn-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.qn-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--text-3);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  flex-shrink: 0;
}
.qn-icon-btn:hover {
  background: var(--primary-06);
  color: var(--text-1);
}
.qn-delete-btn:hover {
  background: color-mix(in srgb, #f44 12%, transparent);
  color: #f66;
}
.qn-search-row {
  padding: 6px 10px;
  border-bottom: 1px solid var(--panel-border);
  flex-shrink: 0;
}
.qn-search-input {
  width: 100%;
  min-width: 0;
  padding: 5px 10px;
  background: var(--primary-06);
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  color: var(--text-1);
  font-size: 12.5px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
[data-theme="light"] .qn-search-input { background: rgba(0,0,0,0.03); border-color: var(--border); }
.qn-search-input::placeholder { color: var(--text-3); }
.qn-search-input:focus { border-color: var(--primary); }
.qn-note-list {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 300px;
  min-height: 52px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--primary-dim) transparent;
}
.qn-note-list::-webkit-scrollbar { width: 3px; }
.qn-note-list::-webkit-scrollbar-track { background: transparent; }
.qn-note-list::-webkit-scrollbar-thumb { background: var(--primary-dim); border-radius: 2px; }
.qn-note-row {
  display: flex;
  align-items: stretch;
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  border-bottom: 1px solid var(--primary-dim);
  border-radius: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: left;
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.1s;
}
.qn-note-row:last-child { border-bottom: none; }
.qn-note-row:hover { background: var(--primary-06); }
.qn-note-row:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.qn-note-row__meter {
  flex: 0 0 6px;
  width: 6px;
  align-self: stretch;
  border-radius: 4px;
  overflow: hidden;
  margin: 6px 0 6px 8px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-3) 22%, transparent);
}
.qn-note-row__main {
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.qn-note-row__title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qn-note-row__meta {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.qn-empty-msg {
  padding: 20px 12px;
  text-align: center;
  font-size: 11.5px;
  color: var(--text-4);
}

/* ── Multi-block color picker popup ─────────────────────────────── */
.mb-color-popup {
  background: var(--bg-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: var(--toolbar-panel-border);
  border-radius: 8px;
  box-shadow: var(--toolbar-panel-shadow);
  padding: 8px;
  z-index: 6000;
}
.mb-color-popup__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 196px;
}

/* Profile panel — floating popup above toolbar */
.profile-panel {
  position: fixed;
  bottom: var(--avq-floating-above-toolbar);
  left: 50%;
  width: 260px;
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: var(--toolbar-panel-border);
  border-top: var(--toolbar-panel-top);
  border-radius: var(--toolbar-panel-radius);
  box-shadow: var(--toolbar-panel-shadow);
  overflow: hidden;
  /* Above block editor popups (38xx–4xxx); below fixed editor chrome / menus (9xxx+) */
  z-index: 5000;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transform: translateX(-50%) translateY(8px) scale(0.97);
  transform-origin: bottom center;
  transition: opacity 0.15s ease, transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.15s;
}
.profile-panel.is-open {
  opacity: 1;
  pointer-events: all;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
  transition: opacity 0.15s ease, transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
}

.profile-panel-header {
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--panel-border);
}
.profile-panel-user {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pp-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid var(--primary-35);
  box-shadow: 0 0 8px var(--primary-15);
  object-fit: cover;
  background: var(--bg-surface);
}
.pp-avatar-fallback {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid var(--primary-35);
  box-shadow: 0 0 8px var(--primary-15);
  background: var(--primary-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-text);
}
.pp-user-info {
  min-width: 0;
  flex: 1;
}
.pp-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pp-email {
  font-size: 10.5px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pp-premium-badge {
  flex-shrink: 0;
  align-self: center;
  padding: 3px 9px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.2;
  color: #e8c86a;
  background: rgba(255, 185, 0, 0.1);
  border: 1px solid rgba(255, 185, 0, 0.38);
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(255, 185, 0, 0.18);
  pointer-events: none;
}

.profile-panel-body {
  padding: 6px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pp-action-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 34px;
  padding: 0 10px;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--text-2);
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.pp-action-btn:hover {
  background: var(--primary-dim);
  color: var(--text-1);
}
.pp-upgrade-btn {
  color: #ffb900;
}
.pp-upgrade-btn:hover {
  background: rgba(255, 185, 0, 0.1);
  border-color: rgba(255, 185, 0, 0.3);
  color: #ffb900;
}
.pp-manage-btn {
  color: var(--text-2);
}
.pp-discord-btn svg {
  color: #5865F2;
}
.pp-signout-btn:hover {
  background: var(--danger-dim);
  color: var(--danger);
  border-color: rgba(224, 79, 104, 0.25);
}
.pp-signin-btn {
  color: var(--primary);
}
.pp-redeem-btn {
  color: var(--text-2);
}
.pp-access-code-input-row {
  display: flex;
  gap: 4px;
  padding: 4px 8px 2px;
}
.pp-code-input {
  flex: 1;
  min-width: 0;
  height: 26px;
  padding: 0 8px;
  border-radius: 5px;
  border: 1px solid var(--panel-border);
  background: var(--bg-2, var(--primary-dim));
  color: var(--text-1);
  font-size: 11px;
  font-family: inherit;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  outline: none;
}
.pp-code-input:focus {
  border-color: var(--primary);
}
.pp-code-submit-btn {
  height: 26px;
  padding: 0 10px;
  border-radius: 5px;
  border: 1px solid var(--panel-border);
  background: var(--primary-dim);
  color: var(--primary);
  font-size: 11px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.pp-code-submit-btn:hover {
  background: var(--primary);
  color: #fff;
}
.pp-code-submit-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.pp-divider {
  width: 100%;
  height: 1px;
  background: var(--panel-border);
  margin: 2px 0;
}

/* Preferences popup — separate floating panel */
.prefs-panel {
  position: fixed;
  bottom: var(--avq-floating-above-toolbar);
  left: 50%;
  width: 300px;
  max-width: calc(100vw - 24px);
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: var(--toolbar-panel-border);
  border-top: var(--toolbar-panel-top);
  border-radius: var(--toolbar-panel-radius);
  box-shadow: var(--toolbar-panel-shadow);
  overflow: hidden;
  z-index: 5001;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transform: translateX(-50%) translateY(8px) scale(0.97);
  transform-origin: bottom center;
  transition: opacity 0.15s ease, transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.15s;
}
.prefs-panel.is-open {
  opacity: 1;
  pointer-events: all;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
  transition: opacity 0.15s ease, transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
}
.prefs-panel-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 10px 8px;
  border-bottom: 1px solid var(--border-dim);
  background: transparent;
}
.prefs-back-btn {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: var(--r-sm);
  background: none;
  color: var(--text-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s;
}
.prefs-back-btn:hover {
  background: var(--primary-dim);
  border-color: var(--primary-glow);
  color: var(--text-1);
}
.prefs-panel-title {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-1);
}
.prefs-panel-body {
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pp-pref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30px;
  padding: 0 6px;
  border-radius: var(--r-sm);
}
.pp-pref-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
}

/* Toggle switch */
.pp-toggle {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}
.pp-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.pp-toggle-track {
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: var(--surface-active);
  border: 1px solid var(--border-bright);
  position: relative;
  transition: background 0.2s, border-color 0.2s;
}
.pp-toggle-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text-3);
  transition: transform 0.2s ease, background 0.2s;
}
.pp-toggle input:checked + .pp-toggle-track {
  background: var(--primary);
  border-color: var(--primary);
}
.pp-toggle input:checked + .pp-toggle-track::after {
  transform: translateX(16px);
  background: var(--color-white);
}
.pp-toggle-icon-sun,
.pp-toggle-icon-moon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.2s;
}
.pp-toggle-icon-sun {
  left: 4px;
  color: var(--warn);
  opacity: 0;
}
.pp-toggle-icon-moon {
  right: 4px;
  color: var(--text-4);
  opacity: 1;
}
.pp-toggle input:checked + .pp-toggle-track .pp-toggle-icon-sun {
  opacity: 1;
}
.pp-toggle input:checked + .pp-toggle-track .pp-toggle-icon-moon {
  opacity: 0;
}

/* Effects section inside prefs panel */
.pp-section-divider {
  height: 1px;
  background: var(--border-dim);
  margin: 4px 2px;
}
.pp-section-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-text);
  padding: 4px 8px 2px;
  text-shadow: 0 0 10px var(--primary-25);
}
.pp-canvas-bg-hint {
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--text-2);
  margin: 0 8px 4px;
  max-width: 20rem;
}
/* Canvas background upload row */
.pp-bg-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 6px 6px;
}
.pp-bg-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border-radius: 3px;
  border: 1px solid var(--primary-10);
  background: var(--primary-04);
  color: var(--text-3);
  cursor: pointer;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background 0.14s, border-color 0.14s, color 0.14s;
}
.pp-bg-btn:hover {
  background: var(--primary-dim);
  border-color: var(--primary-20);
  color: var(--text-1);
}
.pp-bg-btn--remove {
  border-color: rgba(220, 60, 60, 0.15);
  background: rgba(220, 60, 60, 0.04);
  color: var(--text-4);
}
.pp-bg-btn--remove:hover {
  background: rgba(220, 60, 60, 0.10);
  border-color: rgba(220, 60, 60, 0.3);
  color: var(--danger);
}
.pp-bg-btn--visibility .pp-bg-vicon--off {
  display: none;
}
.pp-bg-btn--visibility.is-off .pp-bg-vicon--on {
  display: none;
}
.pp-bg-btn--visibility.is-off .pp-bg-vicon--off {
  display: block;
}
.pp-bg-btn--visibility.is-off {
  border-color: rgba(255, 180, 60, 0.25);
  background: rgba(255, 180, 60, 0.08);
  color: var(--text-2);
}

/* Background color / gradient controls in prefs panel */
.pp-bg-color-section {
  padding: 2px 6px 4px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.pp-bg-mode-row {
  display: flex;
  gap: 3px;
}
.pp-bg-mode-btn {
  flex: 1;
  padding: 5px 2px;
  border-radius: 3px;
  border: 1px solid var(--primary-10);
  background: var(--primary-04);
  color: var(--text-3);
  cursor: pointer;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background 0.14s, border-color 0.14s, color 0.14s;
}
.pp-bg-mode-btn:hover {
  background: var(--primary-dim);
  border-color: var(--primary-20);
  color: var(--text-1);
}
.pp-bg-mode-btn.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.pp-bg-color-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 2px;
}
.pp-color-field-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: 0.03em;
}
.pp-color-swatch {
  width: 32px;
  height: 22px;
  padding: 1px 2px;
  border-radius: 3px;
  border: 1px solid var(--primary-20);
  background: transparent;
  cursor: pointer;
}
.pp-bg-angle-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 2px;
}
.pp-range-input {
  flex: 1;
  accent-color: var(--primary);
  cursor: pointer;
}
.pp-angle-val {
  font-size: 10px;
  color: var(--text-3);
  min-width: 30px;
  text-align: right;
}

.pp-effects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 2px 6px 6px;
}
.pp-effect-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 9px 4px 7px;
  border-radius: 3px;
  border: 1px solid var(--primary-10);
  background: var(--primary-04);
  color: var(--text-3);
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s, color 0.14s, box-shadow 0.14s;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
}
.pp-effect-btn:hover {
  background: var(--primary-dim);
  border-color: var(--primary-20);
  color: var(--text-1);
}
.pp-effect-btn.is-active {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: 0 0 8px color-mix(in srgb, var(--primary) 30%, transparent);
}

/* FX overlay canvas — sits above grid, below blocks */
.fx-canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none;
  z-index: 5;
  will-change: contents; /* canvas pixels change every frame — promote to own compositor layer */
}

/* Scan lines CSS effect */
.fx-scanlines::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(0, 0, 0, 0.10) 3px,
    rgba(0, 0, 0, 0.10) 4px
  );
  pointer-events: none;
  z-index: 6;
  animation: fx-scan-drift 12s linear infinite;
}
/* Subtle vignette for scanlines mode */
.fx-scanlines::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.35) 100%);
  pointer-events: none;
  z-index: 7;
  animation: fx-flicker 5s steps(1) infinite;
}
@keyframes fx-scan-drift {
  from { background-position: 0 0; }
  to   { background-position: 0 120px; }
}
@keyframes fx-flicker {
  0%,100% { opacity: 1; }
  92%     { opacity: 1; }
  93%     { opacity: 0.88; }
  94%     { opacity: 1; }
  97%     { opacity: 0.92; }
  98%     { opacity: 1; }
}

/* ----------------------------------------------------------------
   5a. Inbox Panel — floating HUD-style game chat
---------------------------------------------------------------- */
/* ── Layers panel ─────────────────────────────────────────────────────────── */
.layers-panel {
  position: fixed;
  bottom: var(--avq-floating-above-toolbar);
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  background: var(--bg-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: var(--toolbar-panel-border);
  border-top: var(--toolbar-panel-top);
  border-radius: var(--toolbar-panel-radius);
  box-shadow: var(--toolbar-panel-shadow);
  z-index: 5000;
  overflow: hidden;
  animation: layers-panel-in 0.15s cubic-bezier(0.16,1,0.3,1) both;
}
.layers-panel[hidden] {
  display: none;
}
@keyframes layers-panel-in {
  from { opacity: 0; transform: translateX(-50%) translateY(6px) scale(0.97); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
#app:has(.toolbar.is-constellation) .layers-panel {
  bottom: var(--avq-const-bottom-clearance);
}
.layers-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px 6px;
  border-bottom: 1px solid var(--border-dim);
}
.layers-panel__title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
  user-select: none;
}
.layers-panel__header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.layers-panel__add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--text-2);
  cursor: pointer;
  padding: 0;
  transition: background 0.12s, color 0.12s;
}
.layers-panel__add-btn:hover {
  background: var(--hover-bg);
  color: var(--text-1);
}
.layers-panel__list {
  padding: 4px;
}
.layers-panel__item {
  display: flex;
  align-items: center;
  border-radius: 6px;
  transition: background 0.1s;
}
.layers-panel__item:hover {
  background: var(--hover-bg);
}
.layers-panel__item.is-active {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}
.layers-panel__item-btn {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-1);
  font-size: 12px;
  text-align: left;
  border-radius: 6px;
  min-width: 0;
}
.layers-panel__item.is-active .layers-panel__item-btn {
  color: var(--primary);
  font-weight: 500;
}
.layers-panel__item-dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-3);
  transition: background 0.12s;
}
.layers-panel__item.is-active .layers-panel__item-dot {
  background: var(--primary);
}
.layers-panel__item-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.layers-panel__item-check {
  flex-shrink: 0;
  color: var(--primary);
}
.layers-panel__item-actions {
  display: flex;
  align-items: center;
  gap: 1px;
  padding-right: 4px;
}
.layers-panel__item-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--text-3);
  cursor: pointer;
  padding: 0;
  transition: background 0.1s, color 0.1s;
}
.layers-panel__item-action:hover {
  background: var(--hover-bg);
  color: var(--text-1);
}
.layers-delete-btn:hover {
  color: #e05e76 !important;
}
/* Inline rename input inside layer item */
.layers-panel__rename-input {
  flex: 1;
  min-width: 0;
  background: var(--input-bg, color-mix(in srgb, var(--surface-2) 80%, transparent));
  border: 1px solid var(--primary);
  border-radius: 4px;
  color: var(--text-1);
  font-size: 12px;
  padding: 1px 5px;
  outline: none;
  height: 20px;
}
/* Active / pressed state for layers toolbar button */
#layers-btn.is-active {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}
/* Layer badge inside the block-link picker rows */
.etags-row__layer-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.03em;
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary);
  flex-shrink: 0;
  margin-left: auto;
  margin-right: 4px;
}
/* Cross-layer search result badge */
.const-search-ranklist__layer-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.03em;
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  color: var(--primary);
  margin-top: 2px;
  align-self: flex-start;
}
/* ── End layers panel ────────────────────────────────────────────────────── */

.inbox-panel {
  position: fixed;
  bottom: var(--avq-floating-above-toolbar);
  left: 50%;
  width: 340px;
  max-height: 460px;
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: var(--toolbar-panel-border);
  border-top: var(--toolbar-panel-top);
  border-radius: var(--toolbar-panel-radius);
  box-shadow: var(--toolbar-panel-shadow);
  overflow: hidden;
  z-index: 5000;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transform: translateX(-50%) translateY(8px) scale(0.97);
  transform-origin: bottom center;
  transition: opacity 0.15s ease, transform 0.15s cubic-bezier(0.16,1,0.3,1), visibility 0s linear 0.15s;
}
.inbox-panel.is-open {
  opacity: 1;
  pointer-events: all;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
  transition: opacity 0.15s ease, transform 0.15s cubic-bezier(0.16,1,0.3,1), visibility 0s;
}
#app:has(.toolbar.is-constellation) .inbox-panel,
#app:has(.toolbar.is-constellation) .tag-usage-inspector:not(.tag-usage-inspector--canvas-anchor),
#app:has(.toolbar.is-constellation) .canvas-edit-popup.etags-popup:not(.canvas-edit-popup--canvas-block-anchor) {
  bottom: var(--avq-const-bottom-clearance);
}

.inbox-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px 6px;
  border-bottom: 1px solid var(--panel-border);
  flex-shrink: 0;
}

.inbox-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  user-select: none;
}

.inbox-feed {
  flex: 1;
  overflow-y: auto;
  padding: 8px 8px 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  z-index: 1;
}
.inbox-feed::-webkit-scrollbar { width: 3px; }
.inbox-feed::-webkit-scrollbar-track { background: transparent; }
.inbox-feed::-webkit-scrollbar-thumb { background: var(--primary-dim); border-radius: 2px; }

.inbox-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--text-4);
  text-align: center;
  padding: 32px 24px;
}

/* ── Chat messages — game HUD style ───────────────────────────── */
.chat-msg {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  max-width: 85%;
  margin-top: 4px;
}

.chat-msg.mine {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.chat-msg.theirs {
  align-self: flex-start;
}

.chat-msg-avatar {
  width: 24px;
  height: 24px;
  border-radius: 3px;
  object-fit: cover;
  flex-shrink: 0;
}
.chat-msg-avatar--fallback {
  background: var(--primary-dim);
  color: var(--primary-text);
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
}

.chat-msg-content {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.chat-msg.mine .chat-msg-content { align-items: flex-end; }
.chat-msg.theirs .chat-msg-content { align-items: flex-start; }

.chat-msg-sender {
  font-size: 10px;
  font-weight: 700;
  color: var(--primary-text);
  padding-left: 2px;
  margin-bottom: 1px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.chat-msg-bubble {
  padding: 6px 10px;
  border-radius: 2px;
  font-size: 12.5px;
  line-height: 1.4;
  word-break: break-word;
  white-space: pre-wrap;
  position: relative;
}

.chat-msg.mine .chat-msg-bubble {
  background: var(--primary-glow);
  border-left: 2px solid var(--primary);
  color: var(--text-1);
}
[data-theme="light"] .chat-msg.mine .chat-msg-bubble {
  background: var(--primary-10);
}

.chat-msg.theirs .chat-msg-bubble {
  background: rgba(255, 255, 255, 0.04);
  border-left: 2px solid var(--text-3);
  color: var(--text-1);
}
[data-theme="light"] .chat-msg.theirs .chat-msg-bubble {
  background: rgba(0, 0, 0, 0.03);
  border-left-color: var(--border-bright);
}

.chat-msg-time {
  font-size: 9px;
  color: var(--text-4);
  padding: 0 2px;
  margin-top: 1px;
  font-variant-numeric: tabular-nums;
}

/* ── Inbox input area — game chat bar ─────────────────────────── */
.inbox-input-area {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 6px 8px 8px;
  border-top: 1px solid var(--panel-border);
  flex-shrink: 0;
}

.inbox-input {
  flex: 1;
  background: var(--primary-06);
  border: 1px solid var(--primary-15);
  border-radius: 3px;
  color: var(--text-1);
  font-size: 12.5px;
  font-family: inherit;
  padding: 7px 10px;
  resize: none;
  line-height: 1.4;
  max-height: 120px;
  overflow-y: auto;
  transition: border-color 0.15s;
  outline: none;
}
[data-theme="light"] .inbox-input {
  background: rgba(0, 0, 0, 0.03);
  border-color: var(--border);
}

.inbox-input::placeholder {
  color: var(--text-3);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.inbox-input:focus {
  border-color: var(--primary);
  background: var(--primary-04);
}
[data-theme="light"] .inbox-input:focus {
  background: var(--primary-04);
}

.inbox-send-btn {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  border: none;
  border-radius: 3px;
  color: var(--color-white);
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}

.inbox-send-btn:hover {
  opacity: 0.85;
  transform: scale(1.04);
}

.inbox-send-btn:disabled {
  opacity: 0.2;
  cursor: default;
  transform: none;
}

/* ----------------------------------------------------------------
   6. Workspace
---------------------------------------------------------------- */
.workspace {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg-surface);
  position: relative;
}


/* ----------------------------------------------------------------
   7. Editor View
---------------------------------------------------------------- */
.editor-view {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  position: relative;
}

/* Canvas title stack — positions the space title watermark + layer indicator as a column */
.canvas-title-stack {
  position: absolute;
  bottom: 120px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  pointer-events: none;
  user-select: none;
  max-width: min(98vw, 1200px);
}

/* Canvas space title — ghosted watermark; above .canvas-viewport (3) + blocks, below .fx-canvas (5) */
.canvas-space-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.12);
  text-align: center;
  line-height: 1.35;
  max-height: 3.2em;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

[data-theme="light"] .canvas-space-title {
  color: rgba(78, 82, 112, 0.22);
}

/* Current layer indicator — shown when space has multiple layers */
.canvas-layer-indicator {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.22);
  text-align: center;
}
.canvas-layer-indicator:empty { display: none; }

[data-theme="light"] .canvas-layer-indicator {
  color: rgba(78, 82, 112, 0.35);
}

/* ----------------------------------------------------------------
   8. Editor Canvas — free-position canvas
---------------------------------------------------------------- */
.editor-canvas {
  flex: 1;
  overflow: hidden;
  position: relative;
  background-color: var(--bg-void);
  touch-action: none;
  isolation: isolate;
}

/* User-supplied background image — sits behind the grid but above the void fill */
.canvas-bg-image {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.12;
  filter: blur(1px) saturate(0.6);
}
.canvas-bg-image.is-hidden {
  display: none;
}
[data-theme="light"] .canvas-bg-image {
  opacity: 0.10;
  filter: blur(1px) saturate(0.5) brightness(1.1);
}

.canvas-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background-image: none;
}

/* Zoom-pan viewport: all blocks live here, transformed for zoom/pan */
.canvas-viewport {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  min-width: 500px;
  min-height: 500px;
  z-index: 3;
  will-change: transform; /* viewport is CSS-transformed on every pan/zoom frame */
}

/* ----------------------------------------------------------------
   9. Blocks — absolutely positioned cards
---------------------------------------------------------------- */
.block {
  --block-color: var(--primary);
  position: absolute;
  z-index: 2;
  background: var(--bg-surface);
  border: 1px solid color-mix(in srgb, var(--block-color) 22%, var(--border-dim));
  border-top: 2px solid var(--block-color);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: none;
  cursor: default;
  contain: layout style;
}

.block::before,
.block::after {
  content: none;
}

.block:hover {
  border-top-color: var(--block-color);
}

/* has-open-popup and has-pinned-popup: no border/opacity change —
   state is shown via overhead icons rendered by _renderBlockTitles */

.block.is-selected {
  border-top-color: var(--block-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--block-color) 28%, transparent);
}


.is-edit-mode .block {
  cursor: grab;
  overflow: visible;
}
.is-edit-mode .block:hover {
  border-top-color: var(--block-color);
}
.is-edit-mode .block.is-selected {
  border-top-color: var(--block-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--block-color) 32%, transparent);
}
/* Keep content clipped inside rounded shape */
.is-edit-mode .block-content {
  border-radius: 9px;
}

.block > .block-content {
  position: relative;
}
[data-theme="light"] .block.is-selected,
[data-theme="light"] .is-edit-mode .block.is-selected {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--block-color) 28%, transparent);
}

/* Connection drop target — flat ring */
.block.is-conn-target {
  border-color: var(--teal) !important;
  box-shadow: 0 0 0 2px rgba(62, 196, 188, 0.45) !important;
}
[data-theme="light"] .block.is-conn-target {
  box-shadow: 0 0 0 2px rgba(62, 196, 188, 0.5) !important;
}
/* Tap a port, then a block: only the port you started from pulses (diamonds on the other 3 sides stay static) */
/* N/S: translateX+rotate; E/W: translateY+rotate */
/* Only the specific selected port pulses — not the whole side */
body.is-conn-pending-mode #editor-canvas .block-port.is-pending-port {
  animation: avq-pending-port 0.85s ease-in-out infinite;
  z-index: 35;
  display: block !important;
}
@keyframes avq-pending-port {
  0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--block-color) 40%, transparent); }
  50%       { box-shadow: 0 0 0 5px color-mix(in srgb, var(--block-color) 20%, transparent); }
}

/* ─ Port rename popup — shell matches .checkpoint-ctx-menu (see below) ─ */
/* Trays/YouTube re-enable events on children (.bc-youtube-tray { pointer-events: auto }) */
body.is-conn-pending-mode #editor-canvas .block .block-content,
body.is-conn-pending-mode #editor-canvas .block .block-content * {
  pointer-events: none !important;
}
body.is-conn-pending-mode #editor-canvas .block .block-content {
  opacity: 0.92;
}
body.is-conn-pending-mode #editor-canvas .block .block-resize-corner {
  pointer-events: none !important;
}
body.is-conn-pending-mode #editor-canvas .block .block-port {
  pointer-events: auto !important;
  cursor: crosshair;
}
/* Pan tool: same — nested trays re-enable events for normal editing; while panning, no micro-UI */
body.is-pan-mode-active #editor-canvas .block .block-content,
body.is-pan-mode-active #editor-canvas .block .block-content * {
  pointer-events: none !important;
}
body.is-pan-mode-active #editor-canvas .block .block-resize-corner,
body.is-pan-mode-active #editor-canvas .block .block-port {
  pointer-events: none !important;
}
body.is-pan-mode-active #canvas-block-titles,
body.is-pan-mode-active .tag-pill-layer,
body.is-pan-mode-active .tag-line-svg {
  pointer-events: none !important;
}
/* Pills use inline pointer-events:auto; descendants can still receive hits unless forced off */
body.is-pan-mode-active .tag-pill-layer :is(.block-tag-pill, .block-link-pill),
body.is-pan-mode-active .tag-pill-layer :is(.block-tag-pill, .block-link-pill) * {
  pointer-events: none !important;
}
body.is-pan-mode-active #editor-canvas .conn-arrow-marker {
  pointer-events: none !important;
}
body.is-pan-mode-active #editor-canvas .checkpoint-marker {
  pointer-events: none !important;
}
body.is-pan-mode-active,
body.is-pan-mode-active #editor-canvas {
  cursor: grab;
}
body.is-pan-mode-active #editor-canvas .block {
  cursor: grab;
}
/* Floating titles & tag pills can steal hits */
body.is-conn-pending-mode #canvas-block-titles,
body.is-conn-pending-mode .tag-pill-layer,
body.is-conn-pending-mode .tag-line-svg {
  pointer-events: none !important;
}
/* Pending link mode: only set on body in edit mode from JS */
body.is-conn-pending-mode,
body.is-conn-pending-mode #editor-canvas {
  cursor: crosshair;
}
body.is-conn-pending-mode #editor-canvas .block {
  cursor: crosshair;
}
/* Type-specific: media & data — no extra frame */
.block .bc-drawing-clip,
.block .bc-youtube-thumb,
.block .bc-tbl-preview {
  border-radius: 0;
  border: none;
}
/* Rich text in canvas tray: flat (no second “card” on top of the well) */
.block .bc-canvas-tray .bc-text.bc-text--preview {
  flex: 1;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 6px 8px 8px;
  background: none;
  border-radius: 0;
}
/* Chart: inner stage */
.block .bc-chart-canvas-svg-wrap {
  margin: 4px 4px 6px;
  padding: 2px 0 4px;
  border-radius: 0;
  background: none;
  border: none;
}
.block .bc-canvas-tray .bc-chart-canvas-svg-wrap {
  margin: 0;
  flex: 1;
  min-height: 0;
  padding: 0 2px 2px;
  border-radius: 0;
  background: none;
}
.block .bc-chart-canvas-title {
  margin: 0 4px 2px;
  padding: 0 2px;
}
.block .bc-canvas-tray .bc-chart-canvas-title {
  margin: 0 0 2px 0;
  padding: 0 4px 0 4px;
}
.block .bc-canvas-tray .bc-drawing-clip {
  flex: 1;
  min-height: 0;
  width: 100%;
  border-radius: 0;
  overflow: hidden;
}
/* Image block gallery header — matches .bc-cl-progress so the block’s top band visible — checklist does this with .bc-cl-progress above the tray */
.bc-block-header-title {
  font-size: 12px;
  line-height: 1.32;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--block-color);
  text-align: start;
  width: 100%;
  flex-shrink: 0;
  margin: 0;
  padding: 0 0 2px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.bc-block-header-desc {
  font-size: 11px;
  line-height: 1.38;
  font-weight: 500;
  color: var(--text-2);
  white-space: pre-line;
  word-break: break-word;
  text-align: start;
  width: 100%;
  flex-shrink: 0;
  padding: 0 0 1px 0;
}
.bc-gallery-header--with-desc .bc-block-header-title,
.bc-cl-progress--with-desc > .bc-block-header-title,
.bc-cl-editor-header .bc-block-header-title {
  width: 100%;
  box-sizing: border-box;
  align-self: stretch;
}
/* Stacked top band: user title and/or description (type label is omitted when either is set). */
.bc-gallery-header--with-desc {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 6px 12px 6px;
}
.bc-gallery-header--with-desc .bc-block-header-desc {
  width: 100%;
  align-self: stretch;
}
.bc-gallery-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 6px;
  flex-shrink: 0;
}
.bc-gallery-header-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-3);
  white-space: nowrap;
  text-transform: uppercase;
  text-align: start;
}
.block .bc-gallery-header {
  border-radius: 4px 4px 0 0;
  background: transparent;
}
.block .block-empty-hint {
  margin: 4px 6px 6px;
  min-height: 0;
  border-radius: 6px;
  background: none;
}
/* Image / YouTube / audio / media / empty checklist / generic empty tray: skip the extra inset box on the hint */
.block .bc-gallery--empty .block-empty-hint,
.block .bc-youtube-tray--empty .block-empty-hint,
.block .bc-audio-tray--empty .block-empty-hint,
.block .bc-media-tray--empty .block-empty-hint,
.block .bc-cl-list--empty .block-empty-hint,
.block .bc-canvas-tray--empty .block-empty-hint {
  margin: 0;
  padding: 6px 8px;
  min-height: 0;
  border-radius: 0;
  background: none;
}
.block .bc-cl-progress {
  border-radius: 4px 4px 0 0;
  background: transparent;
}

.block.block-moving {
  cursor: grabbing;
  opacity: 0.9;
  box-shadow: none;
  z-index: 100;
  user-select: none;
}

.block.block-drag-lifted {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  opacity: 0.93;
  z-index: 200;
}

.block.block-drag-miniature {
  transform: scale(0.45);
  transform-origin: center center;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.18s;
  opacity: 0.6;
  z-index: 50;
}

.block-stack-backing.block-drag-miniature {
  transform: scale(0.45) !important;
  transform-origin: center center;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.18s;
  opacity: 0.4;
}

/* ── Block resize handles (4 corners) ───────────────────────────── */
.block-resize-corner {
  position: absolute;
  width: 20px;
  height: 20px;
  z-index: 202;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}
.block-resize-corner::before {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
}
.block-resize-nw { top: 0;    left: 0;  cursor: nw-resize; }
.block-resize-ne { top: 0;    right: 0; cursor: ne-resize; }
.block-resize-se { bottom: 0; right: 0; cursor: se-resize; }
.block-resize-bl { bottom: 0; left: 0;  cursor: sw-resize; }

.block-resize-nw::before {
  top: 5px; left: 5px;
  border-top: 2px solid var(--border-bright);
  border-left: 2px solid var(--border-bright);
  border-radius: 2px 0 0 0;
}
.block-resize-ne::before {
  top: 5px; right: 5px;
  border-top: 2px solid var(--border-bright);
  border-right: 2px solid var(--border-bright);
  border-radius: 0 2px 0 0;
}
.block-resize-se::before {
  bottom: 5px; right: 5px;
  border-bottom: 2px solid var(--border-bright);
  border-right: 2px solid var(--border-bright);
  border-radius: 0 0 2px 0;
}
.block-resize-bl::before {
  bottom: 5px; left: 5px;
  border-bottom: 2px solid var(--border-bright);
  border-left: 2px solid var(--border-bright);
  border-radius: 0 0 0 2px;
}
.is-edit-mode .block.is-selected .block-resize-nw::before {
  border-top-color: var(--block-color);
  border-left-color: var(--block-color);
}
.is-edit-mode .block.is-selected .block-resize-ne::before {
  border-top-color: var(--block-color);
  border-right-color: var(--block-color);
}
.is-edit-mode .block.is-selected .block-resize-se::before {
  border-bottom-color: var(--block-color);
  border-right-color: var(--block-color);
}
.is-edit-mode .block.is-selected .block-resize-bl::before {
  border-bottom-color: var(--block-color);
  border-left-color: var(--block-color);
}
.is-edit-mode .block:hover .block-resize-corner,
.is-edit-mode .block.is-selected .block-resize-corner {
  opacity: 1;
  pointer-events: auto;
}

/* ── Empty block hint ────────────────────────────────────────────── */
.block-empty-hint {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  pointer-events: none;
  user-select: none;
}
.block-empty-hint__pill {
  display: inline-block;
  padding: 6px 18px;
  background: var(--bg-2);
  border: 1px solid var(--border-dim);
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-2);
  letter-spacing: 0.01em;
  text-align: center;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.block:hover .block-empty-hint__pill {
  background: color-mix(in srgb, var(--block-color) 12%, var(--bg-2));
  border-color: color-mix(in srgb, var(--block-color) 50%, var(--border-dim));
  color: var(--text-1);
}

/* When no title, optional standalone type icon; with title, type lives inside .block-title-label */
.block-overhead-title-cluster {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  min-width: 0;
}

/* Type icon to the right of the title — plain icon, same look as .block-overhead-icon */
.block-overhead-type {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-3);
  pointer-events: none;
  user-select: none;
}

.block-overhead-type__icon {
  display: block;
}

/* ---- Block content ---- */
.block-content {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 9px;
  pointer-events: none; /* allow port dots on top to receive mousedown */
}

/* Off-viewport canvas cards: no placeholder fill */
.block-content.block-content--virtual {
  background: none;
}
/* Re-enable pointer events inside the editor popup */
.block-editor-body .block-content,
.block-content--editable {
  pointer-events: auto;
}

/* Hover tips / offscreen: same .block-content DOM, but not inside .block — drop canvas-only
   9px radius + hidden overflow (was clipping text/images at a second rounded rect). The card
   (e.g. .bep-tab-preview) supplies outer border-radius and overflow. */
.const-tip__block-preview .block-content--for-hover-tip {
  border-radius: 0;
  overflow: visible;
}
/* Reused preview subroots that still carry on-canvas radii; tips are not 9px inset “cards” */
.const-tip__block-preview .bc-gallery,
.const-tip__block-preview .bc-drawing-clip,
.const-tip__block-preview .bc-youtube-thumb,
.const-tip__block-preview .bc-media-tray,
.const-tip__block-preview .bc-audio-tray {
  border-radius: 0;
}
.const-tip__block-preview .bc-gallery {
  overflow: visible;
}

/* ----------------------------------------------------------------
   10. Block Content
---------------------------------------------------------------- */


/* ── Premium markdown bubble toolbar ─────────────────────────── */
.md-bubble-toolbar {
  position: fixed;
  z-index: 9100;
  display: none;
  flex-direction: column;
  background: var(--bg-surface);
  border: var(--toolbar-panel-border);
  border-top: var(--toolbar-panel-top);
  border-radius: var(--toolbar-panel-radius);
  box-shadow: var(--toolbar-panel-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
  pointer-events: auto;
  user-select: none;
}
.md-bubble-toolbar.is-visible {
  display: flex;
}
.md-bt-main-row {
  display: flex;
  align-items: center;
  padding: 4px 6px;
  gap: 1px;
}
.md-bt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  border-radius: 5px;
  color: rgba(255,255,255,0.72);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-style: normal;
  text-decoration: none;
  line-height: 1;
  flex-shrink: 0;
  transition: background 0.1s, color 0.1s;
}
.md-bt-btn b  { font-weight: 900; font-size: 12px; }
.md-bt-btn i  { font-style: italic; }
.md-bt-btn u  { text-decoration: underline; }
.md-bt-btn s  { text-decoration: line-through; }
.md-bt-btn:hover {
  background: rgba(108,95,228,0.22);
  color: var(--color-white);
}
.md-bt-btn.is-active {
  background: rgba(108,95,228,0.38);
  color: var(--color-white);
}
.md-bt-sep {
  width: 1px;
  height: 16px;
  background: linear-gradient(to bottom, transparent, var(--primary-30) 30%, var(--primary-30) 70%, transparent);
  margin: 0 3px;
  flex-shrink: 0;
}
.md-bt-link-row {
  display: none;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border-top: 1px solid rgba(108,95,228,0.15);
}
.md-bt-link-input {
  flex: 1;
  min-width: 180px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(108,95,228,0.3);
  border-radius: 5px;
  color: var(--color-white);
  font-size: 12px;
  padding: 5px 9px;
  outline: none;
}
.md-bt-link-input:focus {
  border-color: rgba(108,95,228,0.65);
}
.md-bt-link-input::placeholder { color: rgba(255,255,255,0.32); }

.md-bt-link-ok,
.md-bt-link-x {
  width: 26px;
  height: 26px;
  font-size: 13px;
}

/* Inline code span */
.md-inline-code {
  font-family: ui-monospace, "Cascadia Code", "Fira Code", monospace;
  font-size: 0.87em;
  background: rgba(108,95,228,0.16);
  border: 1px solid rgba(108,95,228,0.22);
  border-radius: 3px;
  padding: 0.1em 0.35em;
  color: var(--primary-text);
}

/* ── Slash command menu ──────────────────────────────────────── */
.md-slash-menu {
  position: fixed;
  z-index: 9099;
  display: none;
  flex-direction: column;
  background: var(--bg-surface);
  border: var(--toolbar-panel-border);
  border-top: var(--toolbar-panel-top);
  border-radius: var(--toolbar-panel-radius);
  box-shadow: var(--toolbar-panel-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 5px;
  min-width: 224px;
  max-height: 296px;
  overflow-y: auto;
  gap: 1px;
}
.md-slash-menu.is-open { display: flex; }
.md-slash-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border-radius: 6px;
  cursor: pointer;
  color: rgba(255,255,255,0.78);
  font-size: 13px;
  transition: background 0.09s;
}
.md-slash-item:hover,
.md-slash-item.is-focused {
  background: rgba(108,95,228,0.22);
  color: var(--color-white);
}
.md-slash-item-icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(108,95,228,0.14);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  color: rgba(255,255,255,0.85);
}
.md-slash-item-text { flex: 1; }
.md-slash-item-label {
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  font-size: 13px;
}
.md-slash-item-desc {
  font-size: 11px;
  color: rgba(255,255,255,0.38);
  margin-top: 1px;
}

/* ── Link tooltip ────────────────────────────────────────────── */
.md-link-tooltip {
  position: fixed;
  z-index: 9102;
  display: none;
  align-items: center;
  gap: 2px;
  background: var(--bg-surface);
  border: var(--toolbar-panel-border);
  border-top: var(--toolbar-panel-top);
  border-radius: var(--toolbar-panel-radius);
  box-shadow: var(--toolbar-panel-shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 5px 8px;
  max-width: 340px;
}
.md-link-tooltip.is-visible { display: flex; }
.md-lt-open {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  font-size: 12px;
  min-width: 0;
  flex: 1;
}
.md-lt-url {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.md-lt-open:hover { color: var(--color-white); }
.md-lt-open:hover .md-lt-url { text-decoration: underline; }
.md-lt-btn {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  border-radius: 5px;
  cursor: pointer;
  color: rgba(255,255,255,0.5);
  flex-shrink: 0;
}
.md-lt-btn:hover {
  background: rgba(108,95,228,0.2);
  color: rgba(255,255,255,0.9);
}
[data-theme="light"] .md-lt-open { color: rgba(0,0,0,0.7); }
[data-theme="light"] .md-lt-open:hover { color: var(--text-1); }
[data-theme="light"] .md-lt-btn { color: rgba(0,0,0,0.4); }
[data-theme="light"] .md-lt-btn:hover { background: rgba(108,95,228,0.1); color: rgba(0,0,0,0.8); }

/* ── Light theme overrides ───────────────────────────────────── */
[data-theme="light"] .md-bt-btn { color: rgba(0,0,0,0.68); }
[data-theme="light"] .md-bt-btn:hover {
  background: rgba(108,95,228,0.1);
  color: rgba(0,0,0,0.9);
}
[data-theme="light"] .md-bt-btn.is-active {
  background: rgba(108,95,228,0.18);
  color: rgba(0,0,0,0.9);
}
[data-theme="light"] .md-bt-sep { background: rgba(0,0,0,0.1); }
[data-theme="light"] .md-bt-link-row { border-top-color: rgba(0,0,0,0.08); }
[data-theme="light"] .md-bt-link-input {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.18);
  color: #111;
}
[data-theme="light"] .md-bt-link-input::placeholder { color: rgba(0,0,0,0.35); }
[data-theme="light"] .md-slash-item { color: rgba(0,0,0,0.72); }
[data-theme="light"] .md-slash-item:hover,
[data-theme="light"] .md-slash-item.is-focused {
  background: rgba(108,95,228,0.09);
  color: rgba(0,0,0,0.9);
}
[data-theme="light"] .md-slash-item-icon {
  background: rgba(108,95,228,0.1);
  color: rgba(0,0,0,0.8);
}
[data-theme="light"] .md-slash-item-label { color: rgba(0,0,0,0.88); }
[data-theme="light"] .md-slash-item-desc  { color: rgba(0,0,0,0.4); }
[data-theme="light"] .md-inline-code {
  background: rgba(108,95,228,0.09);
  border-color: rgba(108,95,228,0.18);
  color: #5b4ecf;
}

/* — Text block wrapper (holds editor + minimap side by side) — */
.bc-text-area {
  flex: 1;
  display: flex;
  flex-direction: row;
  min-height: 0;
  overflow: hidden;
}

/* — Text block — */
.bc-text {
  flex: 1;
  padding: 16px 20px;
  outline: none;
  color: var(--text-1);
  font-size: 14px;
  line-height: 1.6;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  min-height: 40px;
  overflow-y: auto;
}

/* — Document outline sidebar — */
.bc-outline {
  width: 0;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  transition: width 0.18s ease, border-color 0.18s ease;
  border-left: 1px solid transparent;
  user-select: none;
  display: flex;
  flex-direction: column;
}
.bc-outline--active {
  width: 160px;
  border-left-color: var(--border-dim);
}

/* Collapse toggle */
.bc-outline-toggle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 26px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-4);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color 0.12s, background 0.12s;
  border-bottom: 1px solid var(--border-dim);
}
.bc-outline-toggle::before { content: "Outline"; }
.bc-outline-toggle::after {
  content: "\276E";
  margin-left: 5px;
  font-size: 9px;
  transition: transform 0.18s;
}
.bc-outline-toggle:hover { color: var(--text-2); background: var(--primary-06); }

/* Collapsed state — thin strip with rotated icon only */
.bc-outline--collapsed { width: 28px !important; }
.bc-outline--collapsed .bc-outline-toggle::before { content: ""; }
.bc-outline--collapsed .bc-outline-toggle::after { transform: rotate(180deg); }
.bc-outline--collapsed .bc-outline-list { display: none; }

/* Outline list */
.bc-outline-list {
  display: flex;
  flex-direction: column;
  padding: 4px 0;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.bc-outline-list::-webkit-scrollbar { width: 0; }
.bc-outline-item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 4px 10px 4px 0;
  cursor: pointer;
  border-left: 2px solid var(--border-dim);
  transition: border-color 0.15s, background 0.12s;
}
.bc-outline-item:hover {
  background: var(--primary-06);
}
.bc-outline-item--active {
  border-left-color: var(--primary);
}
.bc-outline-item--active .bc-outline-label {
  color: var(--text-1);
}
.bc-outline-h1 { padding-left: 12px; }
.bc-outline-h2 { padding-left: 24px; }
.bc-outline-h3 { padding-left: 36px; }
.bc-outline-label {
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.12s;
}
.bc-outline-item:hover .bc-outline-label {
  color: var(--text-1);
}

.bc-text.bc-text--readonly:empty::before {
  content: none;
}
.bc-text:empty::before {
  content: attr(data-placeholder);
  color: var(--text-4);
  pointer-events: none;
}

/* Formatted elements inside rich text blocks */
.bc-text h1 { font-size: 1.75em; font-weight: 700; margin: 0.5em 0 0.25em; line-height: 1.2; color: var(--text-1); }
.bc-text h2 { font-size: 1.35em; font-weight: 600; margin: 0.5em 0 0.25em; line-height: 1.3; color: var(--text-1); }
.bc-text h3 { font-size: 1.1em;  font-weight: 600; margin: 0.4em 0 0.2em;  line-height: 1.4; color: var(--text-1); }
.bc-text blockquote {
  margin: 0.45em 0;
  padding: 0.5em 0.75em 0.5em 1rem;
  border-left: 3px solid var(--primary-mid);
  background: var(--primary-04);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--text-2);
}
.bc-text blockquote p { margin: 0.25em 0; }
.bc-text blockquote p:first-child { margin-top: 0; }
.bc-text blockquote p:last-child { margin-bottom: 0; }
.bc-text p  { margin: 0.35em 0; }
.bc-text ul, .bc-text ol { padding-left: 1.5em; margin: 0.35em 0; }
.bc-text li { margin: 0.15em 0; }
.bc-text a  { color: var(--teal); text-decoration: underline; }
.bc-text a:hover { color: #5ad5cd; }
.bc-text img { max-width: 100%; height: auto; border-radius: 4px; display: block; margin: 4px 0; }
.bc-text strong, .bc-text b { font-weight: 700; }
.bc-text em, .bc-text i { font-style: italic; }
.bc-text u { text-decoration: underline; }
.bc-text s, .bc-text strike { text-decoration: line-through; }

/* Read-only text preview (canvas block) — not editable, scrollable */
.bc-text--preview {
  user-select: none;
  pointer-events: none;
  overflow: hidden;
}
/*
 * Block hover cards (.const-tip__block-preview) reuse .bc-text. Base .bc-text targets the
 * on-canvas/editor block (14px, 16–20px padding, min-height: 40px). In tips, use the same
 * type scale as .const-tip__preview so rich HTML is not oversized or double-padded.
 */
.const-tip__block-preview:has(.bc-text--preview) .block-content--for-hover-tip,
.const-tip__block-preview:has(.bc-text--preview) .block-content--for-hover-tip .bc-canvas-tray {
  min-height: 0;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  flex: 0 1 auto;
  align-self: stretch;
  width: 100%;
  overflow: visible;
}
.const-tip__block-preview .bc-text--preview {
  padding: 0;
  min-height: 0;
  flex: 0 1 auto;
  width: 100%;
  box-sizing: border-box;
  font-size: 10px;
  line-height: 1.42;
  color: var(--text-2);
  border-radius: 0;
  overflow: visible;
}
.const-tip__block-preview .bc-text--preview h1,
.const-tip__block-preview .bc-text--preview h2,
.const-tip__block-preview .bc-text--preview h3 {
  font-size: 1.12em;
  font-weight: 600;
  line-height: 1.3;
  margin: 0.3em 0 0.15em;
  color: var(--text-1);
}
.const-tip__block-preview .bc-text--preview blockquote {
  margin: 0.3em 0;
  padding: 0.35em 0.5em 0.35em 0.65em;
  border-left-width: 2px;
  font-size: 1em;
}
.const-tip__block-preview .bc-text--preview p {
  margin: 0.25em 0;
}
.const-tip__block-preview .bc-text--preview p:first-child {
  margin-top: 0;
}
.const-tip__block-preview .bc-text--preview p:last-child {
  margin-bottom: 0;
}
.const-tip__block-preview .bc-text--preview ul,
.const-tip__block-preview .bc-text--preview ol {
  margin: 0.25em 0;
  padding-left: 1.25em;
}
.const-tip__block-preview .bc-text--preview img {
  margin: 3px 0;
}

/* ── Inline table ──────────────────────────────────────────────── */
.bc-inline-table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
  font-size: 12px;
  border: 1px solid var(--border-dim);
  border-radius: 6px;
  overflow: hidden;
}
.bc-inline-table th,
.bc-inline-table td {
  border: 1px solid var(--border-dim);
  padding: 6px 10px;
  text-align: left;
  outline: none;
  min-width: 60px;
}
.bc-inline-table th {
  background: var(--primary-dim);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-2);
}
.bc-inline-table td {
  background: rgba(0, 0, 0, 0.15);
  color: var(--text-1);
}
.bc-inline-table td:focus,
.bc-inline-table th:focus {
  background: var(--primary-dim);
  box-shadow: inset 0 0 0 1.5px var(--primary);
}

/* ----------------------------------------------------------------
   11. Toolbar Overlay — .toolbar-dock is fixed; .toolbar is the bar row
   Same glass chrome as profile/prefs / md-bubble (--toolbar-panel-*).
---------------------------------------------------------------- */
.toolbar-dock {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: var(--avq-toolbar-b);
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  box-sizing: border-box;
  /* Shrink-wrap to the toolbar (wider than the search row); do not set width in JS — that can read 0 and collapse. */
  width: max-content;
  max-width: min(100vw - 20px, calc(100% - 20px));
  pointer-events: all;
}
.toolbar {
  position: relative;
  bottom: auto;
  left: auto;
  right: auto;
  transform: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  overflow: visible;
  background: var(--bg-surface);
  border: var(--toolbar-panel-border);
  border-top: var(--toolbar-panel-top);
  border-radius: var(--toolbar-panel-radius);
  box-shadow: var(--toolbar-panel-shadow);
  padding: 8px 10px 8px 8px;
  z-index: 15;
  pointer-events: all;
  white-space: nowrap;
  flex: 0 0 auto;
}
/* Single horizontal row: context tray + sep + trailing icons (banner is sibling above) */
.toolbar-body {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  min-width: 0;
  flex: 0 1 auto;
  width: 100%;
}
.toolbar-search-inbox-cluster {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}
/* .toolbar-search-inbox-cluster removed — search/inbox now live inside section panels */
/* Context label — hidden */
.toolbar-context-banner {
  position: relative;
  display: none;
  flex-direction: row;
  align-items: stretch;
  align-self: flex-start;
  gap: 0;
  max-width: min(280px, 44vw);
  padding: 5px 3px 0 7px;
  background: transparent;
  border: none;
  box-shadow: none;
  pointer-events: none;
  user-select: none;
}
.toolbar-context-banner__rail {
  display: none;
}
.toolbar-context-banner__text {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  justify-content: center;
  padding: 0;
}
.toolbar-context-banner__kicker {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary-text);
  line-height: 1.2;
  text-shadow: 0 0 10px var(--primary-30);
}
.toolbar-context-banner__title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-1);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#toolbar.is-constellation .toolbar-context-banner {
  display: none;
}
/* Context tools column — same flex rhythm as .toolbar-body */
.toolbar-context-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 1 auto;
  min-width: 0;
}
/* Constellation: one shell wraps const-panel-slot + toolbar (single dock, not stacked cards) */
#app:has(.toolbar.is-constellation) .toolbar-dock {
  border-radius: var(--toolbar-panel-radius);
  background: var(--bg-surface);
  border: var(--toolbar-panel-border);
  border-top: var(--toolbar-panel-top);
  box-shadow: var(--toolbar-panel-shadow);
  overflow: visible;
  gap: 0;
}
#app:has(.toolbar.is-constellation) .toolbar-dock .toolbar {
  border: none;
  box-shadow: none;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0;
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 6px;
  padding-bottom: 6px;
}
[data-theme="light"] .toolbar-sep {
  background: var(--border);
}
[data-theme="light"] .toolbar-btn:hover {
  background: var(--primary-dim);
}

.toolbar-btn {
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--text-2);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s, box-shadow 0.12s, border-color 0.12s;
  flex-shrink: 0;
}
.toolbar-btn:hover {
  background: var(--primary-12);
  color: var(--text-1);
}
.toolbar-btn:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}
.toolbar-btn--icon {
  position: relative;
}
.toolbar-btn--text {
  position: relative;
  width: auto;
  min-width: 0;
  max-width: min(140px, 28vw);
  height: auto;
  min-height: 36px;
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.toolbar-sep {
  width: 1px;
  height: 20px;
  background: var(--border-dim);
  margin: 0 3px;
  flex-shrink: 0;
}

.toolbar-zoom-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary-text);
  min-width: 44px;
  text-align: center;
  user-select: none;
  padding: 0 2px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}


/* Active state for mode toggle buttons (pan / highlight) */
.toolbar-btn.is-active {
  background: var(--primary-12);
  color: var(--primary-text);
  box-shadow: none;
}

/* ── Toolbar Sections ──────────────────────────────────────────── */
.toolbar-section {
  position: static;
  display: flex;
  align-items: center;
}
.toolbar-btn.toolbar-section-toggle {
  width: max-content;
  min-width: 36px;
  flex-shrink: 0;
  padding: 0 9px 0 7px;
  gap: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border-radius: 6px;
}
/* Alias without extra class for any future use */
.toolbar-section-toggle {
  min-width: 36px;
  flex-shrink: 0;
  border-radius: 6px;
  white-space: nowrap;
}
.toolbar-section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1;
  pointer-events: none;
}
.toolbar-section-toggle[aria-expanded="true"] {
  background: var(--primary-12);
  color: var(--primary-text);
  border-color: color-mix(in srgb, var(--primary) 25%, transparent);
}
.toolbar-section-toggle.has-active-child {
  color: var(--primary-text);
}
/* Section panel — floats above the toolbar */
.toolbar-section-panel {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-surface);
  border: var(--toolbar-panel-border);
  border-top: var(--toolbar-panel-top);
  border-radius: var(--toolbar-panel-radius);
  box-shadow: var(--toolbar-panel-shadow);
  padding: 8px;
  z-index: 20;
  min-width: min(max-content, calc(100vw - 16px));
  max-width: min(480px, calc(100vw - 16px));
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  white-space: nowrap;
  animation: toolbar-section-panel-in 0.13s ease forwards;
}
.toolbar-section-panel::-webkit-scrollbar { display: none; }
.toolbar-section-panel[hidden] { display: none; }
/* Ensure [hidden] beats .toolbar-btn display:flex inside panels */
.toolbar-section-panel-row .toolbar-btn[hidden] { display: none !important; }
.toolbar-section-panel-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 4px;
  align-items: center;
}
@keyframes toolbar-section-panel-in {
  from { opacity: 0; transform: translateX(-50%) translateY(5px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
/* Map section: canvas mode hides it; constellation mode shows it */
#toolbar-section-map { display: none; }
#toolbar.is-constellation #toolbar-section-tools { display: none; }
#toolbar.is-constellation #toolbar-section-map  { display: flex; }

/* Reflect active child into the section toggle button */
.toolbar-section-toggle.has-active-child {
  color: var(--primary-text);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}
.toolbar-section-toggle {
  position: relative;
}
.toolbar-section-toggle.has-active-child::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary);
  pointer-events: none;
}

/* Section panel header label */
.toolbar-section-panel-header {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 0 2px 6px;
  display: block;
}

/* Section panel buttons: icon on top + small label below */
.toolbar-section-panel-row > .toolbar-btn:not([hidden]),
.toolbar-section-panel-row > div:not(.toolbar-freedraw-actions) > .toolbar-btn:not([hidden]) {
  flex-direction: column;
  gap: 3px;
  height: auto;
  min-height: 54px;
  width: 62px;
  padding: 9px 4px 7px;
  border-radius: 6px;
}
.toolbar-section-panel-row > .toolbar-btn:not([hidden])::after,
.toolbar-section-panel-row > div:not(.toolbar-freedraw-actions) > .toolbar-btn:not([hidden])::after {
  content: attr(aria-label);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-3);
  text-align: center;
  line-height: 1.3;
  max-width: 58px;
  white-space: normal;
  word-break: break-word;
  pointer-events: none;
  display: block;
}
/* Freedraw action buttons: icon on top + label below, matching other section buttons */
.toolbar-freedraw-actions .toolbar-btn {
  flex-direction: column;
  gap: 3px;
  height: auto;
  min-height: 54px;
  width: 62px;
  padding: 9px 4px 7px;
  border-radius: 6px;
}
.toolbar-freedraw-actions .toolbar-btn::after {
  content: attr(aria-label);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-3);
  text-align: center;
  line-height: 1.3;
  max-width: 58px;
  white-space: normal;
  word-break: break-word;
  pointer-events: none;
  display: block;
}
/* Highlight active buttons inside panels */
.toolbar-section-panel-row .toolbar-btn.is-active::after {
  color: var(--primary-text);
}

/* Light theme tweaks for section panels */
[data-theme="light"] .toolbar-section-toggle[aria-expanded="true"] {
  background: var(--primary-dim);
}

/* Mobile: fixed overlay panels so they never clip off-screen */
@keyframes toolbar-section-panel-in-edge {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ----------------------------------------------------------------
   11c. Proxy Nodes — circular markers for cross-group connections
---------------------------------------------------------------- */
.proxy-node {
  position: absolute;
  border-radius: 50%;
  background: var(--panel-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 2px solid var(--primary-25);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.15s, border-color 0.15s, transform 0.1s;
  z-index: 10;
  box-shadow: 0 0 0 1px var(--primary-06), 0 2px 10px rgba(0, 0, 0, 0.35);
}
.proxy-node:hover {
  border-color: var(--primary);
  transform: scale(1.08);
  box-shadow: 0 0 0 1px var(--primary-15), 0 4px 18px rgba(0, 0, 0, 0.45), 0 0 14px var(--primary-25);
}
.proxy-node.is-selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-35), 0 4px 18px rgba(0, 0, 0, 0.4), 0 0 18px var(--primary-30);
}
/* ----------------------------------------------------------------
   12. Modal
---------------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9500;
  animation: fadeIn 0.15s ease;
}
/* Narrow viewports: visualViewport pin (app.js). Centered until a text field is focused. */
.modal-overlay.avq-vv-pinned {
  align-items: center;
  justify-content: center;
  padding: 0 12px max(12px, env(safe-area-inset-bottom));
  box-sizing: border-box;
}
.modal-overlay.avq-vv-pinned.avq-vv-input-focused {
  align-items: flex-end;
  padding-bottom: var(--avq-floating-above-toolbar);
}
.modal-overlay.avq-vv-pinned .modal {
  min-width: 0;
  width: min(360px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: calc(100% - 24px);
}
[data-theme="light"] .modal-overlay {
  background: color-mix(in srgb, var(--bg-void) 60%, rgba(14, 16, 32, 0.25));
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ----------------------------------------------------------------
   Canvas loading overlay
---------------------------------------------------------------- */
.canvas-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  z-index: 200;
  background: var(--bg-base);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease; /* only applies on hide (fade-out) */
}
.canvas-loading.is-visible {
  opacity: 1;
  pointer-events: all; /* block clicks while loading */
  transition: none; /* appear instantly, no fade-in */
}
.canvas-loading-spinner {
  width: 40px;
  height: 40px;
  animation: canvas-loading-spin 0.9s linear infinite;
  filter: drop-shadow(0 0 8px var(--primary-20));
}
.canvas-loading-spinner svg {
  width: 40px;
  height: 40px;
}
@keyframes canvas-loading-spin {
  to { transform: rotate(360deg); }
}
.canvas-loading-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}
.canvas-loading-dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--primary);
  opacity: 0.25;
  animation: canvas-loading-dot 1.1s ease-in-out infinite;
}
.canvas-loading-dots span:nth-child(2) { animation-delay: 0.18s; }
.canvas-loading-dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes canvas-loading-dot {
  0%, 80%, 100% { opacity: 0.2; transform: scale(0.85); }
  40% { opacity: 1; transform: scale(1.15); }
}

.modal {
  background: var(--bg-surface);
  border: var(--toolbar-panel-border);
  border-radius: var(--toolbar-panel-radius);
  padding: 0;
  min-width: 360px;
  box-shadow: var(--toolbar-panel-shadow);
  animation: slideUp 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUp {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  height: 42px;
  flex-shrink: 0;
  background: transparent;
  border-bottom: 1px solid var(--border-dim);
  border-radius: var(--toolbar-panel-radius) var(--toolbar-panel-radius) 0 0;
}

.modal-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary-text);
}

.modal-body {
  padding: 18px 20px;
}

.modal-input {
  width: 100%;
  padding: 8px 10px;
  background: var(--primary-06);
  border: 1px solid var(--primary-20);
  border-radius: var(--toolbar-panel-radius);
  color: var(--text-1);
  font-size: 12.5px;
  outline: none;
  transition: border-color 0.12s;
  box-sizing: border-box;
}
[data-theme="light"] .modal-input {
  background: rgba(0, 0, 0, 0.03);
  border-color: var(--border);
}

.modal-input::placeholder {
  color: var(--text-4);
}

.modal-input:focus {
  border-color: var(--primary);
  background: var(--primary-04);
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 14px 12px;
  border-top: 1px solid var(--border-dim);
}

.btn-primary {
  padding: 6px 16px;
  background: var(--primary-22);
  border: 1px solid var(--primary-55);
  border-top-color: rgba(160, 140, 255, 0.55);
  border-radius: var(--toolbar-panel-radius);
  color: var(--primary-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background 0.12s, box-shadow 0.12s, border-color 0.12s;
}

.btn-primary:hover {
  background: var(--primary-30);
  border-color: var(--primary-60);
}

.btn-primary:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.btn-primary:disabled:hover {
  background: var(--primary-22);
  border-color: var(--primary-55);
}

.btn-secondary {
  padding: 6px 14px;
  background: var(--primary-06);
  border: 1px solid var(--primary-20);
  border-radius: var(--toolbar-panel-radius);
  color: var(--text-3);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.btn-secondary:hover {
  background: var(--primary-dim);
  border-color: var(--primary-35);
  color: var(--text-1);
}

.btn-danger-solid {
  padding: 6px 16px;
  background: rgba(224, 79, 104, 0.18);
  border: 1px solid rgba(224, 79, 104, 0.5);
  border-radius: var(--toolbar-panel-radius);
  color: #f07090;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.12s, box-shadow 0.12s;
}

.btn-danger-solid:hover {
  background: rgba(224, 79, 104, 0.28);
}

.modal-text {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.6;
}

.modal-text strong {
  color: var(--text-1);
}

.delete-space-confirm-modal {
  min-width: 0;
  width: min(320px, 92vw);
  max-width: 92vw;
}

/* Upgrade modal */
.upgrade-modal { max-width: 460px; overflow: hidden; }

.upgrade-hero {
  padding: 30px 24px 22px;
  text-align: center;
  background: transparent;
  border-bottom: 1px solid var(--border-dim);
  position: relative;
}
.upgrade-hero-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  color: var(--text-1);
  line-height: 0;
}
.upgrade-hero-icon svg {
  display: block;
  width: 32px;
  height: 32px;
}
.upgrade-hero-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-1);
  margin: 0 0 6px;
}
.upgrade-hero-sub {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.55;
  margin: 0;
}

.upgrade-plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 18px;
}
.upgrade-plans--single { grid-template-columns: 1fr; max-width: 260px; margin: 0 auto; }

.upgrade-plan {
  border-radius: 3px;
  padding: 16px;
  border: 1px solid var(--primary-12);
  background: var(--primary-04);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.upgrade-plan--pro  { border-color: var(--primary-25); border-left: 3px solid var(--primary); }
.upgrade-plan--founders {
  border-color: rgba(224,168,79,0.3);
  border-left: 3px solid var(--warn);
  background: rgba(224,168,79,0.04);
}

.upgrade-plan-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.upgrade-plan--pro      .upgrade-plan-label { color: var(--primary-text); }
.upgrade-plan--founders .upgrade-plan-label { color: var(--warn); }

.upgrade-founders-spots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(224,168,79,0.14);
  border: 1px solid rgba(224,168,79,0.35);
  border-radius: 20px;
  padding: 1px 6px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #f0c26a;
  vertical-align: middle;
  margin-left: 4px;
}
.upgrade-founders-spots-count {
  font-size: 10px;
  font-weight: 900;
}

.upgrade-plan-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-1);
}
.upgrade-plan--founders .upgrade-plan-name { color: #f0c26a; }

.upgrade-plan-desc {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.5;
  flex: 1;
  margin: 2px 0 6px;
}

.upgrade-plan-btn {
  width: 100%;
  padding: 7px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.12s, box-shadow 0.12s;
  text-align: center;
}
.upgrade-plan--pro .upgrade-plan-btn {
  background: var(--primary-20);
  border: 1px solid var(--primary-55);
  border-top-color: rgba(160,140,255,0.5);
  color: var(--primary-text);
}
.upgrade-plan--pro .upgrade-plan-btn:hover {
  background: var(--primary-30);
  box-shadow: 0 0 12px var(--primary-glow);
}
.upgrade-plan--founders .upgrade-plan-btn {
  background: rgba(224,168,79,0.16);
  border: 1px solid rgba(224,168,79,0.45);
  border-top-color: rgba(255,210,100,0.45);
  color: #f0c26a;
}
.upgrade-plan--founders .upgrade-plan-btn:hover {
  background: rgba(224,168,79,0.28);
  box-shadow: 0 0 12px rgba(224,168,79,0.18);
}

.upgrade-dismiss {
  display: block;
  width: 100%;
  text-align: center;
  padding: 10px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
  cursor: pointer;
  border: none;
  background: none;
  border-top: 1px solid var(--primary-12);
  transition: color 0.12s;
}
.upgrade-dismiss:hover { color: var(--text-2); }

/* ----------------------------------------------------------------
   15. Shared Icon Button
---------------------------------------------------------------- */
.btn-icon-x {
  background: none;
  border: 1px solid transparent;
  color: var(--text-3);
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}

.btn-icon-x:hover {
  color: var(--danger);
  background: rgba(224, 79, 104, 0.1);
  border-color: rgba(224, 79, 104, 0.25);
}

/* ----------------------------------------------------------------
   16. Scrollbars
---------------------------------------------------------------- */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-bright) transparent;
}

::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

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

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

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

/* ----------------------------------------------------------------
   17. Selection & Focus helpers
---------------------------------------------------------------- */
::selection {
  background: var(--primary-40);
  color: var(--text-1);
}

/* Contenteditable focus ring (subtle) */
[contenteditable]:focus {
  background: var(--primary-04);
}

/* ----------------------------------------------------------------
   18. Edit Space Modal
---------------------------------------------------------------- */
.modal-field-label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
}


.edit-space-footer {
  gap: 8px;
}

.edit-space-footer .btn-danger-outline {
  margin-right: auto;
}

.btn-danger-outline {
  padding: 7px 14px;
  background: rgba(224, 79, 104, 0.06);
  border: 1px solid rgba(224, 79, 104, 0.35);
  border-radius: var(--r);
  color: rgba(224, 79, 104, 0.85);
  font-size: 12px;
  font-weight: 600;
  transition: background 0.12s, box-shadow 0.12s, border-color 0.12s;
}

.btn-danger-outline:hover {
  background: rgba(224, 79, 104, 0.16);
  border-color: rgba(224, 79, 104, 0.6);
  box-shadow: 0 0 10px rgba(224, 79, 104, 0.2);
}


/* ----------------------------------------------------------------
   18. Responsive — mobile support
---------------------------------------------------------------- */
@media (max-width: 860px) {
  :root {
    --avq-toolbar-b: calc(12px + env(safe-area-inset-bottom, 0px));
    --avq-toolbar-h: 40px;
    --avq-search-h: 36px;
    /* Compact .toolbar: 4+4 padding, 2px gap (see .toolbar rules below) */
    --avq-toolbar-stack-h: calc(
      12px + var(--avq-toolbar-context-label-h) + 3px + var(--avq-toolbar-h)
    );
  }
  /* Compact toolbar — tighter spacing, smaller buttons */
  .toolbar-dock {
    max-width: min(100vw - 16px, calc(100% - 16px));
  }

  .toolbar {
    padding: 6px 8px 6px 6px;
    gap: 3px;
  }
  .toolbar-canvas-group,
  .toolbar-const-group { gap: 1px; }
  .toolbar-btn {
    width: 34px;
    height: 34px;
    font-size: 17px;
  }
  .toolbar .toolbar-btn--text {
    width: auto;
    height: auto;
    min-height: 34px;
    max-width: min(120px, 36vw);
    padding: 3px 6px;
    font-size: 11px;
  }
  .toolbar-zoom-label {
    font-size: 10px;
    min-width: 36px;
  }

  /* Canvas hint — shorter text for narrow screens */
  .canvas-hint span {
    font-size: 10px;
  }

  .inbox-panel {
    width: calc(100% - 16px);
    max-width: 360px;
  }
}

/* ── Mobile full-screen sheet ──────────────────────────────────── */
/* iOS-style sheet: slides up from bottom, respects safe areas,
   height tracks visualViewport via JS for keyboard handling.     */
.bep--mobile-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0 !important;
  border: none !important;
  min-width: unset !important;
  min-height: unset !important;
  box-shadow: none !important;
  animation: none !important;
  overflow: hidden !important;
  /* Slide transition — the spring curve gives it that native iOS feel */
  transform: translateY(0);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  /* Safe area: popup background extends behind the status bar;
     padding pushes content into the safe zone */
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* Entry state — starts off-screen, removed on next frame to trigger slide-up */
.bep--mobile-fullscreen.bep--entering {
  transform: translateY(100%);
}
/* Exit state — slides back down */
.bep--mobile-fullscreen.bep--closing {
  transform: translateY(100%);
  pointer-events: none;
}
.bep--mobile-fullscreen .bep-topbar {
  border-radius: 0;
  height: 44px;
}
.bep--mobile-fullscreen .bep-rz {
  display: none !important;
}
.block-editor-popup.bep--readonly .bep-rz {
  display: none;
}
/* Ensure topbar buttons have adequate touch target on mobile */
.bep--mobile-fullscreen .bep-topbar .bep-icon-btn {
  width: 40px;
  height: 40px;
}

/* Prevent scroll chaining into the layout viewport / rubber-band moving the fixed sheet */
.bep--mobile-fullscreen .block-editor-body {
  overscroll-behavior: contain;
}
.bep--mobile-fullscreen .block-editor-body .bc-text-area {
  overflow: hidden;
  overscroll-behavior: contain;
}
.bep--mobile-fullscreen .block-editor-body .bc-text {
  min-height: 0;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

@media (hover: none) and (pointer: coarse) {
  /* Expand invisible hit zone for connection ports without changing visual size */
  .block-port::before {
    inset: -18px;
  }
  /* Resize corners: expand to 44×44px minimum touch target on mobile.
     The visual ::before indicator stays at the actual corner position — only the
     interactive hit area grows inward so the finger lands reliably on the corner. */
  .is-edit-mode .block.is-selected .block-resize-corner {
    width: 44px;
    height: 44px;
  }
}

/* ================================================================
   22. Block Editor Popup (floating panel — no overlay, no backdrop)
   ================================================================ */

/* ── Block editor popup ──────────────────────────────────────────── */
.block-editor-popup {
  position: fixed;
  z-index: 3800;
  background: var(--bg-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid color-mix(in srgb, var(--block-color, var(--primary)) 40%, var(--border-bright));
  border-radius: var(--toolbar-panel-radius);
  display: flex;
  flex-direction: column;
  box-shadow: var(--toolbar-panel-shadow);
  min-width: 340px;
  min-height: 280px;
  overflow: visible;
  animation: bepIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  transition: opacity 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, border-top-color 0.2s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Restored from Firestore — skip bepIn so docked scale / saved geometry isn’t overridden by keyframes */
.block-editor-popup.bep--restore-skip-in {
  animation: none !important;
}
/* Back stack: the front window is “selected”; other floating popups are only slightly de-emphasized. */
.block-editor-popup:not(.bep--active):not(.bep--mobile-fullscreen) {
  opacity: 0.9;
  pointer-events: auto;
}
.block-editor-popup.bep--active {
  opacity: 1;
}
.block-editor-popup.bep--active:not(.bep--mobile-fullscreen) {
  border-color: color-mix(in srgb, var(--block-color, var(--primary)) 50%, var(--border-bright));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--block-color, var(--primary)) 22%, transparent),
    0 2px 10px rgba(0, 0, 0, 0.28);
}
[data-theme="light"] .block-editor-popup {
  border-color: color-mix(in srgb, var(--block-color, var(--primary)) 35%, var(--border));
}
[data-theme="light"] .block-editor-popup.bep--active:not(.bep--mobile-fullscreen) {
  border-color: color-mix(in srgb, var(--block-color, var(--primary)) 45%, var(--border));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--block-color, var(--primary)) 18%, rgba(0, 0, 0, 0.06)),
    0 1px 5px rgba(0, 0, 0, 0.08);
}
.block-editor-popup > .block-editor-body,
.bep-tab-panel > .block-editor-body {
  overflow: hidden;
  border-radius: 0 0 9px 9px;
}
/* Don’t apply the global contenteditable focus wash here — it reads as a lighter panel while typing */
.block-editor-popup [contenteditable]:focus,
.block-editor-popup [contenteditable]:focus-visible {
  background: transparent;
}

/* ── Docked (edge-snapped) state ──────────────────────────────────── */
.block-editor-popup.bep--docked {
  cursor: grab;
  transition: none !important;
  pointer-events: auto;
}
/* All descendants must ignore hits so nested contenteditable/UI stays inert; hits fall through to the popup root. */
.block-editor-popup.bep--docked * {
  pointer-events: none !important;
}
/* These use pointer-events: auto !important elsewhere — need higher specificity */
.block-editor-popup.bep--docked .block-editor-body .bc-text,
.block-editor-popup.bep--docked .block-editor-body .bc-text-area,
.block-editor-popup.bep--docked .block-editor-body .block-content,
.block-editor-popup.bep--docked .block-editor-body .block-content--editable {
  pointer-events: none !important;
  user-select: none !important;
  cursor: inherit;
}
.block-editor-popup.bep--docked .bep-rz {
  display: none;
}

/* ── Pan/zoom shrink state — popup recedes while navigating the canvas ── */
.block-editor-popup.bep--panzoom-shrunk:not(.bep--docked):not(.bep--mobile-fullscreen) {
  transform: scale(0.22);
  transform-origin: top left;
  opacity: 0.38;
  cursor: pointer;
}
/* Children are inert — events fall through to the popup root (for click-to-restore)
   and wheel events are forwarded to canvas pan/zoom via JS. Mirrors docked behaviour. */
.block-editor-popup.bep--panzoom-shrunk:not(.bep--docked):not(.bep--mobile-fullscreen) * {
  pointer-events: none !important;
  user-select: none !important;
}

/* ── Dock indicator (shown while dragging near an edge) ──────────── */
/* ── Dock indicator: sci-fi neon beam ───────────── */
.bep-dock-line {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s ease-out;
  background: #5ad2ff;
  box-shadow:
    0 0 3px #5ad2ff,
    0 0 10px rgba(90, 210, 255, 0.85),
    0 0 22px rgba(90, 210, 255, 0.5),
    0 0 48px rgba(90, 210, 255, 0.25),
    0 0 80px rgba(108, 95, 228, 0.15);
}
.bep-dock-line--visible {
  opacity: 1;
  animation: bepDockLineGlow 1.6s ease-in-out infinite;
}
@keyframes bepDockLineGlow {
  0%, 100% {
    opacity: 1;
    box-shadow:
      0 0 3px #5ad2ff,
      0 0 10px rgba(90, 210, 255, 0.85),
      0 0 22px rgba(90, 210, 255, 0.5),
      0 0 48px rgba(90, 210, 255, 0.25),
      0 0 80px rgba(108, 95, 228, 0.15);
  }
  35% {
    opacity: 1;
    box-shadow:
      0 0 5px #7ee8ff,
      0 0 16px rgba(90, 210, 255, 1),
      0 0 36px rgba(90, 210, 255, 0.65),
      0 0 70px rgba(90, 210, 255, 0.35),
      0 0 110px rgba(108, 95, 228, 0.25);
  }
  68% {
    opacity: 0.65;
    box-shadow:
      0 0 2px #5ad2ff,
      0 0 6px rgba(90, 210, 255, 0.6),
      0 0 12px rgba(90, 210, 255, 0.3),
      0 0 26px rgba(90, 210, 255, 0.12);
  }
}
.bep-dock-ghost {
  position: fixed;
  z-index: 9998;
  border-radius: var(--toolbar-panel-radius);
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
  transition: opacity 0.12s ease-out;
  border: 1px solid rgba(90, 210, 255, 0.4);
  background: rgba(90, 210, 255, 0.03);
  box-shadow:
    inset 0 0 30px rgba(90, 210, 255, 0.05),
    0 0 0 1px rgba(90, 210, 255, 0.1),
    0 0 20px rgba(90, 210, 255, 0.12),
    0 0 50px rgba(108, 95, 228, 0.08);
}
.bep-dock-ghost--visible {
  opacity: 1;
  animation: bepDockGhostPulse 2.4s ease-in-out infinite;
}
@keyframes bepDockGhostPulse {
  0%, 100% {
    border-color: rgba(90, 210, 255, 0.4);
    box-shadow:
      inset 0 0 30px rgba(90, 210, 255, 0.05),
      0 0 0 1px rgba(90, 210, 255, 0.1),
      0 0 20px rgba(90, 210, 255, 0.12),
      0 0 50px rgba(108, 95, 228, 0.08);
  }
  50% {
    border-color: rgba(90, 210, 255, 0.7);
    box-shadow:
      inset 0 0 40px rgba(90, 210, 255, 0.09),
      0 0 0 1px rgba(90, 210, 255, 0.22),
      0 0 32px rgba(90, 210, 255, 0.22),
      0 0 70px rgba(108, 95, 228, 0.15);
  }
}
/* Scan line sweep */
.bep-dock-ghost::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 56px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(90, 210, 255, 0.05) 35%,
    rgba(90, 210, 255, 0.11) 50%,
    rgba(90, 210, 255, 0.05) 65%,
    transparent 100%
  );
  animation: bepDockGhostScan 1.9s linear infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes bepDockGhostScan {
  from { top: -56px; }
  to   { top: 100%; }
}
/* Corner brackets */
.bep-dock-ghost::after {
  content: '';
  position: absolute;
  inset: 4px;
  pointer-events: none;
  z-index: 2;
  background-image:
    linear-gradient(rgba(90,210,255,0.85), rgba(90,210,255,0.85)),
    linear-gradient(rgba(90,210,255,0.85), rgba(90,210,255,0.85)),
    linear-gradient(rgba(90,210,255,0.85), rgba(90,210,255,0.85)),
    linear-gradient(rgba(90,210,255,0.85), rgba(90,210,255,0.85)),
    linear-gradient(rgba(90,210,255,0.85), rgba(90,210,255,0.85)),
    linear-gradient(rgba(90,210,255,0.85), rgba(90,210,255,0.85)),
    linear-gradient(rgba(90,210,255,0.85), rgba(90,210,255,0.85)),
    linear-gradient(rgba(90,210,255,0.85), rgba(90,210,255,0.85));
  background-size:
    12px 1.5px, 1.5px 12px,
    12px 1.5px, 1.5px 12px,
    12px 1.5px, 1.5px 12px,
    12px 1.5px, 1.5px 12px;
  background-position:
    top left, top left,
    top right, top right,
    bottom left, bottom left,
    bottom right, bottom right;
  background-repeat: no-repeat;
}

@keyframes bepIn {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

@keyframes popupIn {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Topbar (minimal drag handle) ───────────────────────────────── */
.bep-topbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  height: 34px;
  flex-shrink: 0;
  background: transparent;
  border-bottom: 1px solid var(--border-dim);
  border-radius: var(--toolbar-panel-radius) var(--toolbar-panel-radius) 0 0;
  user-select: none;
  cursor: grab;
  overflow: visible;
}
.bep-topbar:active { cursor: grabbing; }

/* Block settings: title button opens panel (color, title/desc, type) */
.bep-settings-top-wrap {
  position: relative;
  flex-shrink: 0;
  max-width: min(240px, 42vw);
  z-index: 4;
  align-self: center;
  min-width: 0;
}
.bep-settings-top-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  max-width: 100%;
  min-height: 26px;
  padding: 3px 8px;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 3px;
  background: none;
  color: var(--text-1);
  cursor: pointer;
  box-sizing: border-box;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  text-align: left;
}
.bep-settings-top-btn:hover {
  background: var(--primary-dim);
  border-color: var(--primary-glow);
  color: var(--text-1);
}
.bep-settings-top-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--primary-35);
}
.bep-settings-top-wrap.is-open .bep-settings-top-btn {
  color: var(--text-1);
  background: var(--primary-12);
  border-color: var(--primary-25);
}
.bep-settings-top-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  pointer-events: none;
  opacity: 0.9;
}
.bep-settings-top-icon svg {
  display: block;
}
.bep-settings-top-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.02em;
  pointer-events: none;
}
/* Preview / no-edit: title where the settings gear row is hidden */
.bep-topbar-title-readonly {
  flex-shrink: 0;
  max-width: min(240px, 42vw);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-1);
  padding: 3px 4px;
  pointer-events: none;
}
.bep-settings-top-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 200;
  display: none;
  flex-direction: column;
  gap: 10px;
  width: min(272px, calc(100vw - 24px));
  padding: 11px 12px 12px;
  border-radius: var(--toolbar-panel-radius);
  background: var(--bg-surface);
  border: var(--toolbar-panel-border);
  box-shadow: var(--toolbar-panel-shadow);
  pointer-events: auto;
  cursor: default;
}
.bep-settings-top-wrap.is-open .bep-settings-top-panel {
  display: flex;
  animation: bepMetaDdIn 0.13s cubic-bezier(0.2, 0, 0, 1);
}
.bep-settings-section {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.bep-settings-section-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  line-height: 1.2;
}
.bep-settings-top-panel .bep-color-top-dropdown {
  position: static;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  gap: 6px;
  padding: 4px 0;
  border: none;
  background: none;
  box-shadow: none;
}
[data-theme="light"] .bep-settings-top-panel .bep-color-top-dropdown {
  background: none;
  border-color: transparent;
}
.bep-settings-top-panel .bep-meta-top-dropdown {
  position: static;
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: 5px;
  border: 1px solid var(--primary-12);
  background: var(--primary-06);
  overflow: hidden;
  box-shadow: none;
}
[data-theme="light"] .bep-settings-top-panel .bep-meta-top-dropdown {
  background: rgba(255, 255, 255, 0.55);
  border-color: var(--border-dim);
}
.bep-settings-top-panel .bep-type-top-dropdown {
  position: static;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  box-sizing: border-box;
}
[data-theme="light"] .bep-settings-top-panel .bep-type-top-dropdown {
  background: none;
  border-color: transparent;
}

.bep-type-top-option {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  flex-shrink: 0;
  font-family: inherit;
  color: var(--text-3);
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 0;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}
.bep-type-top-option:hover {
  color: var(--text-1);
  background: var(--primary-dim);
  border-color: var(--primary-glow);
}
.bep-type-top-option.is-active {
  color: var(--primary-text);
  background: var(--primary-12);
  border-color: var(--primary-25);
  box-shadow: 0 0 0 1px var(--primary-20) inset;
}
.bep-type-top-option:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--primary-35);
}
.bep-type-top-option.is-active:focus-visible {
  box-shadow: 0 0 0 1px var(--primary-20) inset, 0 0 0 2px var(--primary-35);
}
.bep-type-top-option svg {
  width: 22px;
  height: 22px;
  display: block;
  flex-shrink: 0;
  stroke-width: 1.25px;
}

.bep-drag-region {
  flex: 1;
  height: 100%;
  min-width: 0;
}

/* Dock hint — fixed chip outside the scaled dock panel (JS positions by edge) */
.bep-dock-hint-float {
  position: fixed;
  z-index: 3850;
  max-width: min(220px, calc(100vw - 16px));
  padding: 5px 11px;
  box-sizing: border-box;
  font-size: 9.5px;
  font-family: 'SF Mono', 'Fira Mono', 'Cascadia Code', 'Consolas', monospace;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(90, 210, 255, 0.92);
  text-align: center;
  line-height: 1.3;
  pointer-events: none;
  border-radius: var(--toolbar-panel-radius);
  border: 1px solid rgba(90, 210, 255, 0.28);
  background: rgba(8, 12, 22, 0.93);
  box-shadow:
    0 0 0 1px rgba(90, 210, 255, 0.07),
    0 0 14px rgba(90, 210, 255, 0.18),
    inset 0 0 10px rgba(90, 210, 255, 0.04);
  animation: bepDockHintPulse 2.2s ease-in-out infinite;
}
@keyframes bepDockHintPulse {
  0%, 100% {
    border-color: rgba(90, 210, 255, 0.28);
    color: rgba(90, 210, 255, 0.92);
    box-shadow:
      0 0 0 1px rgba(90, 210, 255, 0.07),
      0 0 14px rgba(90, 210, 255, 0.18),
      inset 0 0 10px rgba(90, 210, 255, 0.04);
  }
  50% {
    border-color: rgba(90, 210, 255, 0.55);
    color: rgba(140, 235, 255, 1);
    box-shadow:
      0 0 0 1px rgba(90, 210, 255, 0.15),
      0 0 22px rgba(90, 210, 255, 0.32),
      inset 0 0 14px rgba(90, 210, 255, 0.07);
  }
}
[data-theme="light"] .bep-dock-hint-float {
  color: rgba(0, 125, 165, 0.9);
  border-color: rgba(0, 125, 165, 0.3);
  background: rgba(240, 250, 255, 0.95);
  box-shadow:
    0 0 0 1px rgba(0, 125, 165, 0.08),
    0 0 12px rgba(0, 125, 165, 0.12);
  animation: none;
}

@keyframes bepMetaDdIn {
  from { opacity: 0; transform: translateY(-5px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.bep-meta-dd-input {
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--primary-08);
  color: var(--text-1);
  font-family: inherit;
  outline: none;
  transition: background 0.12s, border-color 0.15s;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
}
.bep-meta-dd-input:last-child {
  border-bottom: none;
}
.bep-meta-dd-input--title {
  padding: 7px 10px 6px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.35;
}
.bep-meta-dd-input--desc {
  padding: 6px 10px 7px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-2);
  letter-spacing: -0.01em;
  line-height: 1.4;
}
.bep-meta-dd-input::placeholder {
  color: var(--text-4);
  font-weight: 400;
}
.bep-meta-dd-input:focus {
  background: color-mix(in srgb, var(--primary) 4%, transparent);
  border-bottom-color: var(--primary-25);
  box-shadow: none;
}
.bep-meta-dd-input:last-child:focus {
  border-bottom: none;
}
[data-theme="light"] .bep-meta-dd-input {
  border-bottom-color: var(--border-dim);
}
[data-theme="light"] .bep-meta-dd-input:last-child {
  border-bottom: none;
}

/* ── Read-only description preview in panel ──────────────────────── */
.bep-description-preview {
  border-bottom: 1px solid var(--primary-10);
  padding: 8px 16px 10px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.45;
  flex-shrink: 0;
  word-break: break-word;
  user-select: text;
}
[data-theme="light"] .bep-description-preview {
  border-bottom-color: var(--border-dim);
}

/* ── Color swatches (block topbar + dropdown) ──────────────────── */
.bep-color-swatch {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2.5px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform 0.12s, border-color 0.12s;
  outline: none;
  flex-shrink: 0;
}
.bep-color-swatch:hover {
  transform: scale(1.3);
}
.bep-color-swatch.is-active {
  border-color: var(--text-1);
  transform: scale(1.2);
}

/* ── Drawing / image block content in popup ─── */
.block-content--drawing {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  pointer-events: auto;
}
.bep-crop-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  position: relative;
  overflow: hidden;
  touch-action: none;
  /* Inset from popup edges so crop handles don't collide with popup resize handles */
  margin: 6px 16px 16px;
  border-radius: 6px;
}
.bep-crop-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}
/* SVG overlay dims everything outside the crop cutout */
.bep-crop-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.18s;
}

/* ── Crop box ─── */
.bep-crop-box {
  position: absolute;
  border: 2px solid rgba(255, 255, 255, 0.88);
  border-radius: 3px;
  cursor: move;
  z-index: 3;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25),
              0 0 0 9999px transparent;
  transition: box-shadow 0.18s;
}
.bep-crop-box.is-active {
  border-color: var(--color-white);
}

/* Rule of thirds grid — visible on hover / active drag */
.bep-crop-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s;
  background:
    linear-gradient(
      to right,
      transparent 0%, transparent calc(33.333% - 0.5px),
      rgba(255, 255, 255, 0.18) calc(33.333% - 0.5px),
      rgba(255, 255, 255, 0.18) calc(33.333% + 0.5px),
      transparent calc(33.333% + 0.5px), transparent calc(66.666% - 0.5px),
      rgba(255, 255, 255, 0.18) calc(66.666% - 0.5px),
      rgba(255, 255, 255, 0.18) calc(66.666% + 0.5px),
      transparent calc(66.666% + 0.5px), transparent 100%
    ),
    linear-gradient(
      to bottom,
      transparent 0%, transparent calc(33.333% - 0.5px),
      rgba(255, 255, 255, 0.18) calc(33.333% - 0.5px),
      rgba(255, 255, 255, 0.18) calc(33.333% + 0.5px),
      transparent calc(33.333% + 0.5px), transparent calc(66.666% - 0.5px),
      rgba(255, 255, 255, 0.18) calc(66.666% - 0.5px),
      rgba(255, 255, 255, 0.18) calc(66.666% + 0.5px),
      transparent calc(66.666% + 0.5px), transparent 100%
    );
}
.bep-crop-box:hover .bep-crop-grid,
.bep-crop-box.is-active .bep-crop-grid {
  opacity: 1;
}

/* ── Crop handles ─── */
.bep-crop-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--color-white);
  border: 2px solid var(--primary);
  border-radius: 50%;
  z-index: 4;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  transition: transform 0.12s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.12s;
}
.bep-crop-handle:hover {
  transform: scale(1.35);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
.bep-crop-box.is-active .bep-crop-handle {
  transform: scale(1.15);
}
/* Corner handles */
.bep-crop-handle--nw { top: -7px; left: -7px; cursor: nw-resize; }
.bep-crop-handle--ne { top: -7px; right: -7px; cursor: ne-resize; }
.bep-crop-handle--se { bottom: -7px; right: -7px; cursor: se-resize; }
.bep-crop-handle--sw { bottom: -7px; left: -7px; cursor: sw-resize; }
/* Edge handles */
.bep-crop-handle--n  { top: -7px; left: 50%; margin-left: -6px; cursor: ns-resize; }
.bep-crop-handle--e  { top: 50%; right: -7px; margin-top: -6px; cursor: ew-resize; }
.bep-crop-handle--s  { bottom: -7px; left: 50%; margin-left: -6px; cursor: ns-resize; }
.bep-crop-handle--w  { top: 50%; left: -7px; margin-top: -6px; cursor: ew-resize; }
/* Mobile: larger touch targets */
@media (pointer: coarse) {
  .bep-crop-handle {
    width: 22px;
    height: 22px;
  }
  .bep-crop-handle--nw { top: -12px; left: -12px; }
  .bep-crop-handle--ne { top: -12px; right: -12px; }
  .bep-crop-handle--se { bottom: -12px; right: -12px; }
  .bep-crop-handle--sw { bottom: -12px; left: -12px; }
  .bep-crop-handle--n  { top: -12px; left: 50%; margin-left: -11px; }
  .bep-crop-handle--e  { top: 50%; right: -12px; margin-top: -11px; }
  .bep-crop-handle--s  { bottom: -12px; left: 50%; margin-left: -11px; }
  .bep-crop-handle--w  { top: 50%; left: -12px; margin-top: -11px; }
}

/* ── Crop floating toolbar (match .draw-tools-panel + .draw-icon-btn) ─── */
.bep-crop-toolbar {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 5;
  padding: 5px 6px;
  background: var(--draw-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--draw-border);
  border-radius: 4px;
  box-shadow: var(--draw-shadow);
}
.bep-crop-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--draw-icon-border);
  border-radius: 3px;
  background: transparent;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s, box-shadow 0.12s, transform 0.12s;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.bep-crop-btn svg { flex-shrink: 0; }
.bep-crop-btn:hover {
  background: var(--primary-dim);
  color: var(--text-1);
  border-color: var(--draw-icon-border-h);
}
.bep-crop-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--primary-40);
}
/* Same treatment as .draw-icon-btn--done (primary = confirm) */
.bep-crop-btn--primary {
  background: var(--primary);
  border-color: transparent;
  color: var(--color-white);
  font-weight: 600;
  box-shadow: 0 2px 10px var(--primary-40);
}
.bep-crop-btn--primary:hover {
  background: var(--primary-h);
  color: var(--color-white);
  box-shadow: 0 3px 16px var(--primary-55);
  transform: translateY(-1px);
}
.bep-crop-btn--primary:focus-visible {
  box-shadow: 0 0 0 2px var(--primary-55), 0 2px 10px var(--primary-40);
}

.bep-drawing-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--text-4);
  user-select: none;
}

/* ── Gallery popup (image block) — match block editor topbar glass ─── */
.block-content--gallery {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  pointer-events: auto;
}
.bep-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 10px;
  padding: 12px 14px 16px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  align-content: start;
}
.bep-gallery.bep-gallery--list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  grid-template-columns: unset;
  align-content: unset;
}
.bep-gallery.bep-gallery--list .bep-gallery-card {
  width: 100%;
  max-width: 100%;
  flex-shrink: 0;
}

/* Image gallery (grid) popup — ensure the grid scrolls and cards stay tall enough for action buttons */
.block-editor-body .block-content--gallery .bep-gallery:not(.bep-gallery--list) {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
/* thumb min (80px) + actions bar (~41px) + border = cards must not collapse below this */
.block-editor-body .block-content--gallery .bep-gallery:not(.bep-gallery--list) .bep-gallery-card {
  min-height: 130px;
}

/* Slot lists: natural height; parent .block-content scrolls (see .block-content--youtube below) so tall cards aren’t clipped */
.block-editor-body .block-content--youtube .bep-gallery.bep-gallery--list,
.block-editor-body .block-content--music .bep-gallery.bep-gallery--list,
.block-editor-body .block-content--video-file .bep-gallery.bep-gallery--list {
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
}
/* Popup list previews — video file slots (16:9 cap, cover) */
.block-editor-body .block-content--video-file .bep-gallery--list .bep-gallery-thumb {
  aspect-ratio: 16 / 9;
  width: 100%;
  min-height: 72px;
  max-height: min(200px, 42vh);
  flex-shrink: 0;
}
/*
 * YouTube — smaller min + tighter vh cap so short windows keep URL/actions visible
 * (avoid a tall min-height + 16:9 fighting the footer row).
 */
.block-editor-body .block-content--youtube .bep-gallery--list .bep-gallery-thumb {
  aspect-ratio: 16 / 9;
  width: 100%;
  min-height: 48px;
  max-height: min(152px, 30vh);
  flex-shrink: 0;
}
.block-editor-body .block-content--youtube .bep-gallery-thumb.bc-youtube-thumb .bc-youtube-thumb-img,
.block-editor-body .block-content--video-file .bep-gallery--list .bep-gallery-thumb .bc-media-video {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  object-fit: cover;
}
.block-editor-body .block-content--youtube .bep-gallery-thumb.bc-youtube-thumb:hover .bc-youtube-play-icon {
  transform: scale(1.08);
}
/* Popup: no canvas vignette on thumbnails (would darken the preview) */
.block-editor-body .bep-gallery-thumb.bc-youtube-thumb::after {
  content: none !important;
}
.bep-gallery-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg-surface);
  border: 1px solid var(--border-dim);
  box-shadow: none;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
  cursor: grab;
}
.bep-gallery-card:hover {
  border-color: color-mix(in srgb, var(--primary) 22%, var(--border-dim));
  box-shadow: none;
}
.bep-gallery-card.is-dragging { opacity: 0.3; }
[data-theme="light"] .bep-gallery-card {
  background: var(--bg-surface);
  box-shadow: none;
}
[data-theme="light"] .bep-gallery-card:hover {
  box-shadow: none;
}
.bep-gallery-thumb {
  aspect-ratio: 1;
  min-height: 80px;
  overflow: hidden;
  background: color-mix(in srgb, var(--color-black) 20%, var(--bg-base));
  border-bottom: 1px solid var(--border-dim);
}
/* Block editor popup — same inset treatment on every card thumb (image / YouTube / video / music) */
.block-editor-body .bep-gallery-card > .bep-gallery-thumb {
  background: transparent;
  border-bottom: none;
  padding: 12px 12px 10px;
  box-sizing: border-box;
}
.block-editor-body .block-content--video-file .bep-gallery-card > .bep-gallery-thumb {
  padding: 8px 10px 8px;
}
.block-editor-body .block-content--youtube .bep-gallery-card > .bep-gallery-thumb {
  padding: 6px 8px 6px;
}
.bep-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
}
.bep-gallery-thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  opacity: 0.72;
  padding: 10px 8px;
  text-align: center;
}
.bep-gallery-thumb--music {
  display: flex;
  aspect-ratio: auto;
  min-height: 88px;
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
}
.bep-gallery-thumb--music .bc-media-embed-area {
  flex: 0 0 auto;
  width: 100%;
}
.bep-gallery-thumb--music .bc-media-embed-area .bc-media-native {
  width: 100%;
}
.bep-music-popup-meta {
  font-size: 11px;
  word-break: break-word;
  opacity: 0.88;
  padding: 0;
  margin: 0;
}
.bep-gallery-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 5px 7px;
  flex-shrink: 0;
  background: var(--bg-surface);
  border-top: 1px solid color-mix(in srgb, var(--primary) 6%, var(--border-dim));
}
[data-theme="light"] .bep-gallery-actions {
  background: var(--bg-surface);
  border-top-color: var(--border-dim);
}
[data-theme="light"] .bep-gallery-action-btn {
  color: var(--color-black);
}
.block-content--youtube .bep-gallery-actions--youtube {
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: nowrap;
}
.block-content--youtube .bep-gallery-actions--youtube .bc-youtube-url-input {
  flex: 1;
  min-width: 0;
}
/* Same footprint as .bep-icon-btn — violet hairline on hover, danger on remove */
.bep-gallery-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: var(--color-white);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, color 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.bep-gallery-action-btn:hover {
  background: var(--primary-10);
  border-color: var(--primary-20);
  color: var(--text-1);
  box-shadow: 0 0 0 1px var(--primary-10) inset;
}
.bep-gallery-action-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--primary-40);
}
.bep-gallery-action-btn--del:hover {
  background: rgba(224, 79, 104, 0.12);
  border-color: rgba(224, 79, 104, 0.3);
  color: var(--danger);
  box-shadow: none;
}
/* Replace file — label + trash row isn’t icon-only */
.bep-gallery-action-btn--text {
  width: auto;
  min-width: auto;
  height: auto;
  min-height: 28px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
/* "Add Images" footer button — outside the grid, matches checklist "Add item" */
.bep-gallery-add-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 10px 10px;
  padding: 6px 10px;
  background: var(--primary-dim);
  border: 1px solid var(--primary);
  border-radius: var(--r);
  color: var(--primary-text);
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.12s, color 0.12s;
  flex-shrink: 0;
}
.bep-gallery-add-btn:hover {
  border-color: var(--primary-h);
  background: var(--primary);
  color: var(--color-white);
}
.bep-gallery-add-btn svg {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}
/* Drop indicator bar — used between image cards in popup and as an overlay on canvas */
.bc-img-drop-indicator {
  width: 3px;
  align-self: stretch;
  min-height: 40px;
  background: var(--primary);
  border-radius: 2px;
  pointer-events: none;
  box-shadow: 0 0 6px color-mix(in srgb, var(--primary) 50%, transparent);
  animation: clDropPulse 1s ease-in-out infinite;
}
/* Canvas overlay mode — absolutely positioned on top of the grid */
.bc-img-drop-indicator--abs {
  position: absolute;
  z-index: 10;
  min-height: 0;
  align-self: auto;
}

/* List slots (YouTube / music / video): horizontal insert line — not grid side bars */
.bc-img-drop-indicator--list {
  width: 100% !important;
  height: 3px !important;
  min-height: 3px !important;
  max-height: 3px !important;
  align-self: stretch;
  flex-shrink: 0;
  box-sizing: border-box;
  border-radius: 2px;
  box-shadow: 0 0 6px color-mix(in srgb, var(--primary) 50%, transparent);
  animation: clDropPulse 1s ease-in-out infinite;
}
.bc-img-drop-indicator--abs.bc-img-drop-indicator--list {
  width: calc(100% - 8px) !important;
  left: 4px;
  right: auto;
}

/* ── Image + video lightbox — dark stage + light-on-dark controls (default / dark theme) */
.bep-lightbox {
  --bep-lb-fg: #f0f2ff;
  --bep-lb-fg-mute: rgba(200, 204, 230, 0.8);
  --bep-lb-control-bg: rgba(18, 20, 32, 0.75);
  --bep-lb-control-bg-hover: color-mix(in srgb, var(--primary) 20%, rgba(18, 20, 32, 0.85));
  --bep-lb-close-hover-bg: color-mix(in srgb, var(--danger) 18%, rgba(18, 20, 32, 0.9));
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 7, 12, 0.9);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  animation: bepLbIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
}
[data-theme="light"] .bep-lightbox {
  --bep-lb-fg: var(--text-1);
  --bep-lb-fg-mute: var(--text-3);
  --bep-lb-control-bg: color-mix(in srgb, var(--bg-elevated) 88%, rgba(255, 255, 255, 0.4));
  --bep-lb-control-bg-hover: color-mix(in srgb, var(--primary) 16%, var(--color-white));
  --bep-lb-close-hover-bg: color-mix(in srgb, var(--danger) 14%, var(--color-white));
  background: color-mix(in srgb, #f0f2fa 88%, rgba(255, 255, 255, 0.5));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
@keyframes bepLbIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.bep-lightbox-img {
  max-width: min(90vw, 1200px);
  max-height: 88vh;
  object-fit: contain;
  border-radius: var(--r);
  user-select: none;
  box-shadow:
    0 0 0 1px var(--primary-12),
    0 16px 56px rgba(0, 0, 0, 0.45);
}
[data-theme="light"] .bep-lightbox-img {
  box-shadow:
    0 0 0 1px var(--border-dim),
    0 12px 48px rgba(10, 12, 20, 0.12);
}
.bep-lightbox-close,
.bep-lightbox-nav {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bep-lb-fg);
  cursor: pointer;
  font-family: inherit;
  background: var(--bep-lb-control-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid color-mix(in srgb, var(--primary) 32%, rgba(255, 255, 255, 0.12));
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}
[data-theme="light"] .bep-lightbox-close,
[data-theme="light"] .bep-lightbox-nav {
  border-color: var(--border-dim);
  box-shadow: 0 2px 14px rgba(10, 12, 20, 0.08);
}
.bep-lightbox-close {
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 3px;
}
.bep-lightbox-close:hover {
  background: var(--bep-lb-close-hover-bg);
  border-color: color-mix(in srgb, var(--danger) 45%, rgba(255, 255, 255, 0.1));
  color: #ff8aa0;
}
[data-theme="light"] .bep-lightbox-close:hover {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 40%, var(--border-dim));
}
.bep-lightbox-close:focus-visible,
.bep-lightbox-nav:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--primary-55);
}
[data-theme="light"] .bep-lightbox-close:focus-visible,
[data-theme="light"] .bep-lightbox-nav:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 50%, var(--border-dim));
}
.bep-lightbox-nav-bar {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
}
.bep-lightbox-counter {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--bep-lb-fg-mute);
  user-select: none;
  background: var(--bep-lb-control-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, var(--primary) 25%, rgba(255, 255, 255, 0.08));
  border-radius: 3px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
}
[data-theme="light"] .bep-lightbox-counter {
  border-color: var(--border-dim);
  box-shadow: 0 2px 10px rgba(10, 12, 20, 0.06);
}
.bep-lightbox-nav {
  position: static;
  width: 40px;
  height: 40px;
  border-radius: 3px;
}
.bep-lightbox-nav:hover {
  background: var(--bep-lb-control-bg-hover);
  border-color: color-mix(in srgb, var(--primary) 45%, rgba(255, 255, 255, 0.15));
  color: #c9c0ff;
}
[data-theme="light"] .bep-lightbox-nav:hover {
  color: var(--primary-text);
  border-color: color-mix(in srgb, var(--primary) 50%, var(--border-dim));
}

/* YouTube full-screen lightbox — iframe is interactable; stage matches image max width */
.bep-lightbox--video {
  pointer-events: auto;
  padding: 8px 16px 20px;
}
.bep-lightbox--video .bep-lightbox-close {
  z-index: 1;
}
.bep-lightbox-yt {
  width: min(90vw, 1200px);
  max-height: 88vh;
  aspect-ratio: 16 / 9;
  position: relative;
  /* Letterbox: keep true black behind the iframe in both themes */
  background: var(--color-black);
  border-radius: var(--r);
  box-shadow:
    0 0 0 1px var(--primary-12),
    0 16px 56px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
[data-theme="light"] .bep-lightbox-yt {
  box-shadow:
    0 0 0 1px var(--border-dim),
    0 12px 48px rgba(10, 12, 20, 0.12);
}
.bep-lightbox-yt-iframe,
.bep-lightbox-video-file {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  pointer-events: auto;
  touch-action: auto;
  object-fit: contain;
}

/* Audio file lightbox — same chrome as .block-editor-popup (gradient glass + primary rim) */
.bep-lightbox--audio {
  pointer-events: auto;
  padding: 8px 16px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bep-lightbox--audio .bep-lightbox-close {
  z-index: 1;
}
.bep-lightbox-audio-panel {
  width: min(92vw, 440px);
  max-height: 88vh;
  overflow: auto;
  padding: 20px 22px 22px;
  background: var(--bg-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: var(--toolbar-panel-border);
  border-top: var(--toolbar-panel-top);
  border-radius: var(--toolbar-panel-radius);
  box-shadow: var(--toolbar-panel-shadow);
  color-scheme: dark;
}
[data-theme="light"] .bep-lightbox-audio-panel {
  color-scheme: light;
}
.bep-lightbox-audio-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-1);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.bep-lightbox-audio-sub {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-3);
  word-break: break-word;
}
.bep-lightbox-audio-meta {
  margin-top: 10px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-4);
}
/* Native <audio> chrome — fullscreen lightbox + music block editor (same tray strip) */
.bep-lightbox-audio,
.block-content--music .bc-media-embed-area .bc-media-audio {
  width: 100%;
  display: block;
  border-radius: var(--r);
  box-sizing: border-box;
  padding: 6px 8px;
  background: var(--tray-bg);
  border: var(--tray-border);
  accent-color: var(--primary);
}
.bep-lightbox-audio {
  margin-top: 18px;
}
.block-content--music .bc-media-embed-area .bc-media-audio {
  margin-top: 0;
}
[data-theme="light"] .bep-lightbox-audio,
[data-theme="light"] .block-content--music .bc-media-embed-area .bc-media-audio {
  background: color-mix(in srgb, var(--primary) 4%, #f4f5f9);
  border: 1px solid var(--border-dim);
}
/* Chromium / Safari — tone down the default bright white control strip */
.bep-lightbox-audio::-webkit-media-controls-panel,
.block-content--music .bc-media-embed-area .bc-media-audio::-webkit-media-controls-panel {
  background-color: color-mix(in srgb, var(--bg-block) 94%, var(--color-black));
}
.bep-lightbox-audio::-webkit-media-controls-enclosure,
.block-content--music .bc-media-embed-area .bc-media-audio::-webkit-media-controls-enclosure {
  border-radius: var(--r-sm);
  background: transparent;
}
[data-theme="light"] .bep-lightbox-audio::-webkit-media-controls-panel,
[data-theme="light"] .block-content--music .bc-media-embed-area .bc-media-audio::-webkit-media-controls-panel {
  background-color: color-mix(in srgb, var(--color-white) 96%, var(--primary));
}

@media (pointer: coarse) {
  .bep-lightbox-nav { width: 48px; height: 48px; }
  .bep-lightbox-close { width: 48px; height: 48px; }
  .bep-gallery:not(.bep-gallery--list) {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
    padding: 10px 12px 12px;
  }
}


/* ── Drawing block preview on canvas ─── */
.bc-drawing-clip {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
}
.bc-drawing-preview {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

/* ── Image gallery grid on canvas ─── */
.bc-gallery {
  width: 100%;
  height: 100%;
  display: grid;
  gap: 2px;
  border-radius: 9px;
  overflow: hidden;
}
.bc-gallery--1 { grid-template: 1fr / 1fr; }
.bc-gallery--2 { grid-template: 1fr / 1fr 1fr; }
.bc-gallery--3 { grid-template: 1fr 1fr / 1fr 1fr; }
.bc-gallery--3 .bc-gallery-cell:first-child { grid-row: 1 / -1; }
.bc-gallery--4 { grid-template: 1fr 1fr / 1fr 1fr; }

/* Stacked list (YouTube / music / video file slots on canvas — not image grids) */
.bc-gallery.bc-gallery--list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}
.block .bc-gallery.bc-gallery--list .bc-gallery-cell {
  width: 100%;
  min-width: 0;
  flex-shrink: 0;
}
.block .bc-gallery.bc-gallery--list .bc-youtube-thumb {
  width: 100%;
  max-height: min(140px, 36vw);
  aspect-ratio: 16 / 9;
}
.block .bc-gallery.bc-gallery--list .bc-youtube-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Single video/youtube: expand to fill the full block height */
.block .bc-gallery.bc-gallery--list.bc-gallery--single {
  overflow: hidden;
  gap: 0;
}
.block .bc-gallery.bc-gallery--list.bc-gallery--single .bc-gallery-cell {
  flex: 1;
  min-height: 0;
  height: 100%;
}
.block .bc-gallery.bc-gallery--list.bc-gallery--single .bc-youtube-thumb {
  max-height: none;
  aspect-ratio: unset;
  height: 100%;
}

.bc-gallery-cell {
  position: relative;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.15);
}
.bc-gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  display: block;
}
.bc-gallery-badge {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  color: var(--color-white);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.02em;
  pointer-events: none;
}

/* Inset from block edges (ports) — same outer margin as .block .bc-cl-list, inner padding unchanged */
.block .bc-gallery,
.block .bc-youtube-tray,
.block .bc-media-tray,
.block .bc-audio-tray,
.block .bc-canvas-tray {
  position: relative;
  overflow: visible;
  width: auto;
  flex: 1;
  min-height: 0;
  height: auto;
  align-self: stretch;
  margin: 0 8px 8px;
  padding: 6px 6px 7px;
  gap: 5px;
  border-radius: 0;
  background: none;
  border: none;
  isolation: isolate;
}

/* Inner list/grid inside a tray — do not paint a second “tray” (same rule also matched .bc-gallery) */
.block .bc-youtube-tray > .bc-gallery,
.block .bc-media-tray > .bc-gallery,
.block .bc-audio-tray > .bc-gallery {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  /* Match tray / .bc-gallery-drop-active so dashed drop outline isn’t square like raw corners */
  border-radius: 8px;
  box-shadow: none;
  isolation: auto;
  flex: 1;
  min-height: 0;
  align-self: stretch;
  width: auto;
}

.block .bc-youtube-tray,
.block .bc-media-tray,
.block .bc-audio-tray,
.block .bc-canvas-tray {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.block .bc-canvas-tray--scroll {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.block .bc-gallery .bc-gallery-cell {
  position: relative;
  border-radius: var(--r);
  background: none;
  border: none;
  pointer-events: auto;
  cursor: pointer;
}
.block .bc-gallery .bc-gallery-img {
  border-radius: calc(var(--r) - 1px);
}

/* Empty gallery on canvas: same tray depth; min size for visual presence */
.bc-gallery--empty {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bc-youtube-tray--empty,
.bc-media-tray--empty,
.bc-audio-tray--empty {
  min-height: 48px;
  align-items: center;
  justify-content: center;
}
.block .bc-media-tray--video {
  min-height: 120px;
}
.block .bc-media-tray--video .bc-media-video {
  flex: 1;
  min-height: 0;
}

/* Image drag-and-drop between blocks */
.bc-gallery-cell.is-dragging { opacity: 0.3; }
.bc-gallery-drag-ghost {
  border-radius: var(--r);
  overflow: hidden;
  background: color-mix(in srgb, var(--bg-elevated) 78%, transparent);
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--primary) 40%, var(--border-dim));
  opacity: 0.72;
  transform: scale(0.66) rotate(1.5deg);
  transform-origin: center center;
  filter: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.bc-gallery-drag-ghost .bc-gallery-img {
  opacity: 1;
}
[data-theme="light"] .bc-gallery-drag-ghost {
  background: color-mix(in srgb, #f0f1f4 70%, rgba(255, 255, 255, 0.5));
  border-color: color-mix(in srgb, var(--primary) 60%, var(--border-dim));
}
.bc-gallery-drop-active {
  outline: 2px dashed var(--primary);
  outline-offset: -2px;
  border-radius: 8px;
}

/* ── YouTube block — canvas thumbnail preview ─── */
.bc-youtube-thumb {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Black bars = letterbox = instantly reads as "video player" */
  background: var(--color-black);
}
.block .bc-youtube-tray .bc-youtube-thumb {
  flex: 1;
  min-height: 0;
  width: auto;
  border-radius: var(--r);
  border: 1px solid transparent;
  transition: border-color 0.15s;
}
.block .bc-youtube-tray .bc-youtube-thumb::after {
  border-radius: inherit;
}
/* Empty tray: no thumb — match empty image gallery (grab/inherit), not pointer */
.block .bc-youtube-tray:not(.bc-youtube-tray--empty),
.block .bc-youtube-thumb {
  pointer-events: auto;
  cursor: pointer;
}
.block .bc-youtube-tray .bc-youtube-thumb:hover {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border-bright));
  transform: none;
}
[data-theme="light"] .block .bc-youtube-tray .bc-youtube-thumb:hover {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border-dim));
}
/* Play icon scales up on hover to reinforce clickability */
.block .bc-youtube-tray .bc-youtube-thumb:hover .bc-youtube-play-icon {
  transform: scale(1.08);
}
.bc-youtube-thumb-img {
  /* contain keeps the 16:9 frame intact, black bars fill the rest */
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  display: block;
}
.bc-video-file-thumb-vid {
  pointer-events: none;
  user-select: none;
}

/* Music / audio file — canvas card (not a video frame) */
.bc-music-file-thumb {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 58px;
  padding: 8px 10px;
  border-radius: var(--r);
  cursor: pointer;
  text-align: left;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--block-color) 14%, var(--tray-bg)) 0%,
    var(--tray-bg) 100%
  );
  border: 1px solid color-mix(in srgb, var(--block-color) 22%, var(--border-dim));
  box-sizing: border-box;
  pointer-events: auto;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
[data-theme="light"] .bc-music-file-thumb {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--block-color) 10%, #f0f1f4) 0%,
    #f0f1f4 100%
  );
}

/* Audio tray grid: single bordered row (cell + thumb merged in markup — overrides generic gallery-cell chrome) */
.block .bc-audio-tray .bc-gallery > .bc-gallery-cell.bc-music-file-thumb {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 58px;
  padding: 8px 10px;
  border-radius: var(--r);
  cursor: pointer;
  text-align: left;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--block-color) 14%, var(--tray-bg)) 0%,
    var(--tray-bg) 100%
  );
  border: 1px solid color-mix(in srgb, var(--block-color) 22%, var(--border-dim));
  box-sizing: border-box;
  pointer-events: auto;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.block .bc-audio-tray .bc-gallery > .bc-gallery-cell.bc-music-file-thumb:hover {
  border-color: color-mix(in srgb, var(--block-color) 45%, var(--border-bright));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--block-color) 20%, transparent);
  transform: none;
  z-index: 1;
}
[data-theme="light"] .block .bc-audio-tray .bc-gallery > .bc-gallery-cell.bc-music-file-thumb {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--block-color) 10%, #f0f1f4) 0%,
    #f0f1f4 100%
  );
  border-color: var(--border-dim);
}
[data-theme="light"] .block .bc-audio-tray .bc-gallery > .bc-gallery-cell.bc-music-file-thumb:hover {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border-dim));
}

.bc-music-thumb-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--block-color) 22%, var(--bg-base));
  color: var(--block-color);
}
.bc-music-thumb-icon-svg {
  width: 22px;
  height: 22px;
  display: block;
}
.bc-music-thumb-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.bc-music-thumb-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.bc-music-thumb-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.bc-music-thumb-dur {
  flex-shrink: 0;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
}
.bc-music-thumb-file {
  font-size: 11px;
  color: var(--text-4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bc-music-thumb-play {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--block-color) 35%, transparent);
  color: var(--block-color);
  pointer-events: none;
}
.bc-music-thumb-play svg {
  width: 14px;
  height: 14px;
  margin-left: 2px;
  display: block;
  opacity: 0.95;
}
.bc-music-thumb-probe {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
/* Subtle dark vignette so the play button pops on bright thumbnails */
.bc-youtube-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  border-radius: inherit;
  pointer-events: none;
}
.bc-youtube-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  /* sits above the vignette */
  z-index: 1;
}
/* Scales with the block (32–72px) and animates on hover */
.bc-youtube-play-icon {
  width: clamp(32px, 18%, 72px);
  height: auto;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), filter 0.18s;
}

/* ── YouTube block — popup content ─── */
.block-content--youtube {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  pointer-events: auto;
}
.bc-youtube-url-row {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-dim);
  flex-shrink: 0;
}
.bc-youtube-url-input {
  flex: 1;
  font-size: 12px;
  font-family: inherit;
  color: var(--text-1);
  /* Dark: same recessed surface as block face (--bg-block); light: soft gray field */
  background: var(--bg-block);
  border: 1px solid var(--border-dim);
  border-radius: var(--r-sm);
  padding: 5px 8px;
  outline: none;
  transition: border-color 0.15s;
}
[data-theme="light"] .bc-youtube-url-input {
  background: var(--surface-hover);
  border: 1px solid var(--border-bright);
}
.bc-youtube-url-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-20);
}
.bc-youtube-url-input::placeholder {
  color: var(--text-3);
}
.bc-youtube-embed-area {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}
.bc-youtube-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
/* ── Music / video file blocks — canvas tray + popup (same tray tokens as YouTube) ─── */
.block .bc-media-tray .bc-media-native {
  width: 100%;
  border-radius: var(--r);
  pointer-events: auto;
}
.block .bc-media-tray .bc-media-video {
  background: var(--color-black);
  object-fit: contain;
  max-height: 100%;
  display: block;
}
.block .bc-media-tray .bc-media-audio {
  margin-top: 2px;
}

.block-content--music,
.block-content--video-file {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  pointer-events: auto;
}
/* Hidden native picker — only the styled button is shown; click() still opens the dialog */
.bc-media-file-input {
  display: none !important;
}

.bc-media-file-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-dim);
  flex-shrink: 0;
}
.bc-media-file-label {
  flex: 1;
  font-size: 12px;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.bc-media-file-btn {
  flex-shrink: 0;
  font-size: 11px;
  font-family: inherit;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-dim);
  background: var(--bg-block);
  color: var(--text-1);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
[data-theme="light"] .bc-media-file-btn {
  background: var(--surface-hover);
  border-color: var(--border-bright);
}
.bc-media-file-btn:hover {
  border-color: var(--primary);
}
.bc-media-file-btn--danger {
  color: var(--danger, #f87171);
  border-color: color-mix(in srgb, var(--danger, #f87171) 35%, var(--border-dim));
}
.bc-media-embed-area {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}
.bc-media-embed-area .bc-media-video {
  flex: 1;
  min-height: 160px;
  width: 100%;
  object-fit: contain;
  background: var(--color-black);
  border-radius: var(--r);
}
/* Block editor popup — inset native audio controls so they align with the file row gutters */
.block-content--music .bc-media-embed-area {
  padding: 10px 12px 14px;
  box-sizing: border-box;
  color-scheme: dark;
}
[data-theme="light"] .block-content--music .bc-media-embed-area {
  color-scheme: light;
}

.bc-youtube-embed-hint {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--text-4);
  user-select: none;
  padding: 24px;
  text-align: center;
}

/* ── Icon buttons (topbar) ───────────────────────────────────────── */
.bep-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: none;
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--text-3);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.bep-zoom-btn:hover,
.bep-export-btn:hover,
.bep-pin-btn:hover,
.bep-history-btn:hover {
  background: var(--primary-dim);
  border-color: var(--primary-glow);
  color: var(--text-1);
}
.bep-close-btn:hover {
  background: rgba(224, 79, 104, 0.1);
  border-color: rgba(224, 79, 104, 0.25);
  color: var(--danger);
}

/* Drag-to-close: red selection rectangle drawn from the X button */
.bep-close-drag-overlay {
  position: fixed;
  z-index: 999990;
  border: 2px solid rgba(220, 50, 50, 0.75);
  background: rgba(220, 50, 50, 0.07);
  pointer-events: none;
  box-sizing: border-box;
  border-radius: 4px;
}

/* Popup highlighted as "will be closed" during drag-close */
.block-editor-popup.bep--close-marked {
  border-color: rgba(220, 50, 50, 0.9) !important;
  box-shadow:
    0 0 0 2px rgba(220, 50, 50, 0.4),
    inset 0 0 0 9999px rgba(220, 50, 50, 0.07) !important;
  opacity: 1 !important;
}

/* ── Body ────────────────────────────────────────────────────────── */
.block-editor-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.block-editor-body .block-content {
  flex: 1;
  min-height: 0;
  border-radius: 0;
  overflow: hidden;
}
.block-editor-body .block-content.block-content--youtube.block-content--gallery,
.block-editor-body .block-content.block-content--video-file.block-content--gallery,
.block-editor-body .block-content.block-content--music.block-content--gallery {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 14px;
  box-sizing: border-box;
}

/* Checklist popup — scroll long lists (readonly has no .bc-cl-editor-sections wrapper) */
.block-editor-body .block-content.block-content--checklist:not(:has(.bc-cl-editor-sections)) {
  overflow-y: auto;
  overflow-x: hidden;
}
.block-editor-body .bc-cl-editor-sections {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.block-editor-body .bc-text-area {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  pointer-events: auto;
}

.block-editor-body .bc-text {
  font-size: 15px;
  padding: 20px 24px;
  line-height: 1.7;
  overflow-x: hidden;
  pointer-events: auto !important;
  user-select: text !important;
  cursor: text;
}

.block-editor-body .bc-outline--active {
  width: 180px;
}



/* ── Tab bar (browser-style tabs inside a popup) ────────────────── */
.bep-tab-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.bep-tab-bar {
  display: flex;
  align-items: stretch;
  gap: 1px;
  padding: 0 6px;
  height: 30px;
  flex-shrink: 0;
  background: var(--primary-04);
  border-bottom: 1px solid var(--primary-12);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.bep-tab-bar::-webkit-scrollbar { display: none; }
[data-theme="light"] .bep-tab-bar {
  background: rgba(0, 0, 0, 0.02);
  border-bottom-color: var(--border-dim);
}
.bep-tab {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  min-width: 0;
  max-width: 160px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.bep-tab:hover {
  color: var(--text-1);
  background: var(--primary-06);
}
.bep-tab.is-active {
  color: var(--text-1);
  border-bottom-color: var(--tab-color, var(--primary));
}
.bep-tab.is-dragging {
  opacity: 0.45;
}
.bep-tab-icon {
  display: flex;
  align-items: center;
  color: var(--tab-color, var(--primary));
  flex-shrink: 0;
}
.bep-tab-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.bep-tab-close {
  font-size: 14px;
  line-height: 1;
  opacity: 0;
  color: var(--text-3);
  cursor: pointer;
  flex-shrink: 0;
  margin-left: 2px;
  transition: opacity 0.1s, color 0.1s;
}
.bep-tab:hover .bep-tab-close { opacity: 0.6; }
.bep-tab-close:hover { opacity: 1; color: var(--danger); }

/* Universal floating block tip (pill / tab / connection arrow) — see _createUniversalBlockPreviewEl */
.avq-block-preview--tip {
  position: fixed;
  width: 220px;
  max-height: min(50vh, 320px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 10px;
  box-sizing: border-box;
  background: var(--bg-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: var(--toolbar-panel-border);
  border-top: var(--toolbar-panel-top);
  border-radius: var(--toolbar-panel-radius);
  pointer-events: none;
  box-shadow: var(--toolbar-panel-shadow);
  animation: popupIn 0.14s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: var(--preview-z, 9990);
}
.avq-block-preview--tip .const-tip__block-preview {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.avq-block-preview--tip .const-tip__type,
.avq-block-preview--tip .const-tip__title,
.avq-block-preview--tip .const-tip__date {
  flex-shrink: 0;
}
/* Tab bar hover — bep-tab-preview is the dismiss hook; chrome from .avq-block-preview--tip */

/* ── Merge target highlight ─────────────────────────────────────── */
.bep-merge-target {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
  box-shadow:
    0 0 0 1px var(--primary-06),
    0 0 24px var(--primary-25),
    0 12px 32px rgba(0, 0, 0, 0.34),
    0 40px 80px rgba(0, 0, 0, 0.42);
}

/* ── Tab drag ghost ─────────────────────────────────────────────── */
.bep-tab-ghost {
  position: fixed;
  padding: 4px 12px;
  background: var(--bg-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: var(--toolbar-panel-border);
  border-top: var(--toolbar-panel-top);
  border-radius: var(--toolbar-panel-radius);
  color: var(--text-1);
  font-size: 10px;
  font-weight: 600;
  pointer-events: none;
  z-index: 9999;
  white-space: nowrap;
  box-shadow: var(--toolbar-panel-shadow);
}

/* ── Mobile tab bar overrides ───────────────────────────────────── */
.bep--mobile-fullscreen .bep-tab-bar {
  height: 36px;
  padding: 0 8px;
  gap: 2px;
}
.bep--mobile-fullscreen .bep-tab {
  max-width: 140px;
  padding: 0 10px;
  font-size: 11px;
}
.bep--mobile-fullscreen .bep-tab-close {
  opacity: 0.5;
}

/* ── Resize corner grip ──────────────────────────────────────────── */
/* ── 8-directional resize handles ───────────────────────────────── */
.bep-rz {
  position: absolute;
  z-index: 30;
  /* transparent but captures pointer events */
}
/* Edge strips */
.bep-rz--n  { top: -4px;  left: 14px;  right: 14px; height: 10px; cursor: n-resize; }
.bep-rz--s  { bottom: -4px; left: 14px; right: 14px; height: 10px; cursor: s-resize; }
.bep-rz--e  { right: -4px; top: 14px;  bottom: 14px; width: 10px; cursor: e-resize; }
.bep-rz--w  { left: -4px;  top: 14px;  bottom: 14px; width: 10px; cursor: w-resize; }
/* Corner squares */
.bep-rz--ne { top: -4px;    right: -4px;  width: 18px; height: 18px; cursor: ne-resize; }
.bep-rz--se { bottom: -4px; right: -4px;  width: 18px; height: 18px; cursor: se-resize; }
.bep-rz--sw { bottom: -4px; left: -4px;   width: 18px; height: 18px; cursor: sw-resize; }
.bep-rz--nw { top: -4px;    left: -4px;   width: 18px; height: 18px; cursor: nw-resize; }

/* ── Pinned popup pill ────────────────────────────────────────────── */
.bep-pill {
  position: fixed;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 6px 10px;
  background: var(--bg-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: var(--toolbar-panel-border);
  border-left: 2px solid var(--pill-color, var(--primary));
  border-radius: 30px;
  box-shadow: var(--toolbar-panel-shadow);
  cursor: grab;
  user-select: none;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.bep-pill:hover {
  border-color: color-mix(in srgb, var(--pill-color, var(--primary)) 45%, var(--primary-25));
  border-left-color: var(--pill-color, var(--primary));
}
.bep-pill-icon {
  color: var(--pill-color, var(--primary));
  display: flex;
  align-items: center;
}
.bep-pill-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--text-1);
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bep-pill-tab-count {
  font-size: 9px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border-radius: 8px;
  background: var(--pill-color, var(--primary));
  color: var(--color-white);
  margin-left: 2px;
  flex-shrink: 0;
}
/* Pinned pill hover — hidden until :hover; z below tab previews */
.avq-block-preview--tip.bep-pill-preview {
  display: none;
  z-index: 4000;
}
.avq-block-preview--tip.bep-pill-preview.is-visible { display: flex; }

/* ── Offscreen indicator hover preview ───────────────────────────── */
.offscreen-preview {
  position: absolute;
  width: 280px;
  max-height: 200px;
  overflow: hidden;
  background: var(--bg-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: var(--toolbar-panel-border);
  border-top: var(--toolbar-panel-top);
  border-radius: var(--toolbar-panel-radius);
  pointer-events: none;
  z-index: var(--preview-z, 70);
  box-shadow: var(--toolbar-panel-shadow);
  animation: popupIn 0.14s cubic-bezier(0.16, 1, 0.3, 1);
}
.offscreen-preview .block-content {
  pointer-events: none;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.5;
}
.avq-block-preview--tip .block-content--for-hover-tip {
  padding: 0;
  font-size: 10px;
  line-height: 1.42;
}
/* ── Connection ports on blocks ─────────────────────────────────── */
.block-port {
  position: absolute;
  width: 8px;
  height: 8px;
  z-index: 20;
  border-radius: 2px;
  background: color-mix(in srgb, var(--block-color) 35%, var(--bg-elevated));
  border: 1px solid color-mix(in srgb, var(--block-color) 55%, transparent);
  display: none;
  box-sizing: border-box;
}
/* Large transparent hit zone — makes dragging much easier, especially when zoomed out */
.block-port::before {
  content: '';
  position: absolute;
  inset: -22px;
  border-radius: 50%;
}

.is-edit-mode .block-port {
  display: block;
}
.is-edit-mode .block:hover .block-port {
  border-color: color-mix(in srgb, var(--block-color) 78%, transparent);
}
.is-edit-mode .block.is-selected .block-port {
  border-color: var(--block-color);
}

.block-port:hover {
  background: var(--block-color) !important;
  border-color: var(--block-color) !important;
}

/* ─ Port positions — JS sets left%/top% for even multi-port spacing ─ */
/* N/S: JS sets left%, we just handle the edge offset & diamond rotation */
.block-port--n {
  top: -5px;
  transform: translateX(-50%) rotate(45deg);
}
.block-port--s {
  bottom: -5px;
  transform: translateX(-50%) rotate(45deg);
}
/* E/W: JS sets top%, we handle edge offset & rotation */
.block-port--e {
  right: -5px;
  transform: translateY(-50%) rotate(45deg);
}
.block-port--w {
  left: -5px;
  transform: translateY(-50%) rotate(45deg);
}

.block-port--n:hover { transform: translateX(-50%) rotate(45deg) scale(1.5); }
.block-port--s:hover { transform: translateX(-50%) rotate(45deg) scale(1.5); }
.block-port--e:hover { transform: translateY(-50%) rotate(45deg) scale(1.5); }
.block-port--w:hover { transform: translateY(-50%) rotate(45deg) scale(1.5); }

/* Named port: diamond becomes filled to signal it carries a label */
.block-port--named {
  background: color-mix(in srgb, var(--block-color) 60%, var(--bg-elevated));
  border-color: var(--block-color);
}

/* Specific port selection — only the chosen port glows, not the whole side */
.block-port.is-pending-port {
  background: var(--block-color) !important;
  border-color: var(--block-color) !important;
  z-index: 35;
}

/* ─ Floating label chips — separate element, pointer-events:none ─── */
.block-port-label {
  position: absolute;
  z-index: 15;
  pointer-events: none;
  display: none;
  align-items: center;
  gap: 4px;
  padding: 2px 6px 2px 5px;
  border-radius: 4px;
  background: var(--bg-elevated);
  border: 1px solid color-mix(in srgb, var(--block-color) 30%, transparent);
  white-space: nowrap;
}
.is-edit-mode .block-port-label {
  display: flex;
}
.block-port-label__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--block-color) 65%, transparent);
  flex-shrink: 0;
  transition: background 0.15s;
}
.block-port-label__text {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.025em;
  color: color-mix(in srgb, var(--block-color) 80%, var(--text-2));
  line-height: 1;
  max-width: 88px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Per-side placement — the JS sets left%/top% for the port fraction; the chip offsets outward */
.block-port-label--n {
  bottom: calc(100% + 9px);
  transform: translateX(-50%);
}
.block-port-label--s {
  top: calc(100% + 9px);
  transform: translateX(-50%);
}
.block-port-label--e {
  left: calc(100% + 9px);
  transform: translateY(-50%);
}
.block-port-label--w {
  right: calc(100% + 9px);
  left: auto;
  transform: translateY(-50%);
}

/* Hover: label brightens when cursor is near that edge */
.is-edit-mode .block:hover .block-port-label {
  border-color: color-mix(in srgb, var(--block-color) 50%, transparent);
}

/* Selected label chip — matches selected port's glow */
.block-port-label.is-pending-port {
  border-color: var(--block-color) !important;
}
.block-port-label.is-pending-port .block-port-label__dot {
  background: var(--block-color) !important;
}

/* Signed-in but non-premium: same affordances as public view — no ports / resize hit zones */
#editor-canvas.is-edit-mode.is-canvas-layout-locked .block-port {
  display: none !important;
  pointer-events: none !important;
}
#editor-canvas.is-edit-mode.is-canvas-layout-locked .block-resize-corner {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
#editor-canvas.is-edit-mode.is-canvas-layout-locked .block {
  cursor: default;
}

/* ── Connection lines (SVG inside canvas-viewport) ───────────────── */
.conn-line {
  stroke-width: 3;
  stroke-linecap: butt;
  transition: stroke-width 0.18s, filter 0.18s, stroke-linecap 0.18s, opacity 0.15s;
}
.conn-line--active {
  stroke-width: 3.5;
}
/* Selected connection, or locked “follow” links while their source (or a chained source) is being dragged */
.conn-line--selected,
.conn-line--lock-follow,
.conn-line--lock-follow.conn-line--active {
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.18));
  opacity: 1;
}
.conn-line--cross {
  stroke-dasharray: 6 4;
  opacity: 0.55;
}

/* ── Connection arrow markers (HTML buttons on the bezier) ──────── */
/* Round .conn-arrow-marker: target block (opaque) + --conn-marker-ink for chevron. .conn-arrow-marker__lock unchanged. */
.conn-arrow-marker {
  position: absolute;
  width: 26px;
  height: 26px;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--conn-marker-color, var(--primary));
  border: 1px solid color-mix(in srgb, #0a0b10 32%, var(--conn-marker-color, var(--primary)) 68%);
  border-radius: 50%;
  color: var(--conn-marker-ink, #f0f1f5);
  box-shadow: 0 0 0 1px color-mix(in srgb, #0a0b10 18%, var(--conn-marker-color, var(--primary)) 42%);
  pointer-events: all;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s, transform 0.12s, color 0.12s;
  padding: 0;
  z-index: 60;
  overflow: visible;
}
.conn-arrow-marker__lock {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--app-bg, #1a1a1e) 86%, var(--conn-marker-color, var(--primary)) 14%);
  border: 1px solid color-mix(in srgb, var(--conn-marker-color, var(--primary)) 50%, transparent);
  border-radius: 5px;
  color: var(--conn-marker-color, var(--primary));
  pointer-events: none;
  transition: width 0.14s, height 0.14s, bottom 0.14s, transform 0.14s, border-color 0.12s;
}
.conn-arrow-marker__lock svg {
  display: block;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  transition: width 0.14s, height 0.14s;
}
.conn-arrow-marker--selected .conn-arrow-marker__lock {
  width: 28px;
  height: 28px;
  bottom: calc(100% + 5px);
  border-radius: 7px;
}
.conn-arrow-marker--selected .conn-arrow-marker__lock svg {
  width: 16px;
  height: 16px;
}
[data-theme="light"] .conn-arrow-marker__lock {
  background: color-mix(in srgb, var(--color-white) 88%, var(--conn-marker-color, var(--primary)) 12%);
}
.conn-arrow-marker:hover {
  background: color-mix(in srgb, var(--color-white) 14%, var(--conn-marker-color, var(--primary)) 86%);
  border-color: color-mix(in srgb, #0a0b10 24%, var(--conn-marker-color, var(--primary)) 76%);
  box-shadow: 0 0 0 1px color-mix(in srgb, #0a0b10 10%, var(--conn-marker-color) 35%);
  color: var(--conn-marker-ink, #f0f1f5);
  transform: translate(-50%, -50%) scale(1.12);
}
.conn-arrow-marker:hover .conn-arrow-marker__lock {
  border-color: color-mix(in srgb, var(--conn-marker-color, var(--primary)) 70%, transparent);
}
/* Slightly larger lock on hover (non-selected marker only — selected uses rules below) */
.conn-arrow-marker:not(.conn-arrow-marker--selected):hover .conn-arrow-marker__lock {
  width: 24px;
  height: 24px;
  bottom: calc(100% + 4px);
}
.conn-arrow-marker:not(.conn-arrow-marker--selected):hover .conn-arrow-marker__lock svg {
  width: 14px;
  height: 14px;
}
.conn-arrow-marker--selected:hover .conn-arrow-marker__lock {
  width: 30px;
  height: 30px;
  bottom: calc(100% + 5px);
}
.conn-arrow-marker--selected:hover .conn-arrow-marker__lock svg {
  width: 17px;
  height: 17px;
}
.conn-arrow-marker--active {
  background: color-mix(in srgb, #0a0b10 6%, var(--conn-marker-color, var(--primary)) 94%);
  border-color: color-mix(in srgb, #0a0b10 36%, var(--conn-marker-color) 64%);
  box-shadow: 0 0 0 1px color-mix(in srgb, #0a0b10 20%, var(--conn-marker-color) 45%);
  color: var(--conn-marker-ink, #f0f1f5);
}
.conn-arrow-marker--selected {
  background: color-mix(in srgb, #0a0b10 9%, var(--conn-marker-color, var(--primary)) 91%);
  border-color: color-mix(in srgb, #0a0b10 42%, var(--conn-marker-color) 58%);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-white) 18%, var(--conn-marker-color) 82%);
  color: var(--conn-marker-ink, #f0f1f5);
}

@keyframes conn-arrow-marker-pulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
    animation-timing-function: cubic-bezier(0.33, 0, 0.18, 1);
  }
  42% {
    transform: translate(-50%, -50%) scale(1.1);
    animation-timing-function: cubic-bezier(0.24, 0.88, 0.34, 1);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}
.conn-arrow-marker--pulse {
  will-change: transform;
  animation: conn-arrow-marker-pulse 0.5s linear 0s 2 both;
}

/* ── Connection label pill ────────────────────────────────────────── */
.conn-label {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: all;
  cursor: pointer;
  z-index: 59;
  max-width: 180px;
  background: var(--bg-surface);
  border: 1px solid var(--border-dim, rgba(255, 255, 255, 0.12));
  border-radius: 5px;
  padding: 2px 8px;
  font-size: 11px;
  line-height: 1.55;
  font-weight: 500;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
  transition: border-color 0.12s;
}
.conn-label:hover,
.conn-label--selected {
  border-color: var(--primary-25, rgba(120, 80, 255, 0.25));
}

/* ── Connection drag preview ─────────────────────────────────────── */
.conn-drag-line {
  /* stroke color set in JS from source block (_constBlockColor) */
  stroke-width: 2.5;
  stroke-dasharray: 8 5;
  stroke-linecap: round;
}
.conn-drag-end-dot {
  pointer-events: none;
}
.conn-drag-end-dot-core {
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.5));
  pointer-events: none;
}
.conn-drag-end-dot-ripple {
  stroke-width: 2.4;
  transform-box: fill-box;
  transform-origin: center;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
  animation: conn-drag-end-dot-ripple 1.1s ease-out infinite;
}
@keyframes conn-drag-end-dot-ripple {
  0%   { transform: scale(0.45); stroke-opacity: 0.5; }
  100% { transform: scale(1.3);  stroke-opacity: 0; }
}

/* ── Off-screen selection hints (Figma-style edge bars) ──────────── */
.offscreen-sel-hint {
  position: absolute;
  pointer-events: none;
  z-index: 59;
  background: var(--primary);
  border-radius: 1px;
  opacity: 0.7;
}
.offscreen-sel-hint--h {
  min-width: 8px;
}
.offscreen-sel-hint--v {
  min-height: 8px;
}

/* ── Off-screen block indicators ─────────────────────────────────── */
.offscreen-indicator {
  position: absolute;
  width: 26px;
  height: 26px;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-mid);
  border: 1px solid var(--primary-40);
  border-radius: 50%;
  color: var(--primary-text);
  z-index: 60;
  pointer-events: all;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
  padding: 0;
}
.offscreen-indicator:hover {
  background: var(--primary-22);
  border-color: var(--primary);
}

/* ----------------------------------------------------------------
   Share / Collaborate Styles
---------------------------------------------------------------- */


/* Notification badge on inbox toggle button */
.inbox-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  background: var(--danger);
  border-radius: 7px;
  font-size: 9px;
  font-weight: 700;
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
}

/* Per-space messages with avatars */
.inbox-empty-space {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-4);
  text-align: center;
  padding: 32px 24px;
}

/* ── Invite cards — game-style system alerts ───────────────────── */
.invite-card {
  align-self: center;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--primary-06);
  border: 1px solid var(--primary-12);
  border-left: 3px solid var(--primary);
  border-radius: 2px;
  padding: 10px 12px;
  margin-top: 6px;
  max-width: 95%;
  transition: border-color 0.15s, background 0.15s;
}
[data-theme="light"] .invite-card {
  background: var(--primary-04);
  border-color: var(--border);
  border-left-color: var(--primary);
}
.invite-card:hover {
  background: var(--primary-10);
}

.invite-avatar {
  width: 26px;
  height: 26px;
  border-radius: 3px;
  object-fit: cover;
  flex-shrink: 0;
}

.invite-avatar-fallback {
  width: 26px;
  height: 26px;
  border-radius: 3px;
  background: var(--primary-dim);
  color: var(--primary-text);
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.invite-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.invite-text {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-2);
}

.invite-text strong {
  color: var(--text-1);
  font-weight: 700;
}

.invite-space-name {
  color: var(--primary-text);
  font-weight: 700;
}

.invite-time {
  font-size: 9px;
  color: var(--text-4);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.invite-actions {
  display: flex;
  gap: 6px;
  width: 100%;
  margin-top: 4px;
}

.invite-accept-btn {
  flex: 1;
  padding: 5px 12px;
  background: var(--primary);
  border: none;
  border-radius: 3px;
  color: var(--color-white);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: opacity 0.12s;
}

.invite-accept-btn:hover {
  opacity: 0.85;
}

.invite-decline-btn {
  flex: 1;
  padding: 5px 12px;
  background: transparent;
  border: 1px solid var(--border-bright);
  border-radius: 3px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.invite-decline-btn:hover {
  background: rgba(224, 79, 104, 0.08);
  color: var(--danger);
  border-color: rgba(224, 79, 104, 0.25);
}

.invite-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 2px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.invite-status-badge.accepted {
  background: rgba(78, 201, 160, 0.12);
  color: var(--success);
}

.invite-status-badge.declined {
  background: var(--danger-dim);
  color: var(--danger);
}


/* Share modal specific styles */
.share-modal {
  width: 400px;
  max-width: 90vw;
}

.share-invite-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.share-email-input {
  flex: 1;
  min-width: 0;
}

.share-send-btn {
  flex-shrink: 0;
  padding: 7px 14px;
}

.share-members-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
  max-height: 200px;
  overflow-y: auto;
}

.share-member-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--primary-04);
  border: 1px solid var(--primary-10);
  border-radius: 3px;
}

.share-member-avatar {
  width: 24px;
  height: 24px;
  border-radius: 3px;
  object-fit: cover;
  background: var(--bg-surface);
  border: 1px solid var(--primary-15);
  flex-shrink: 0;
}

.share-member-avatar-fallback {
  width: 24px;
  height: 24px;
  border-radius: 3px;
  background: var(--primary-dim);
  border: 1px solid var(--primary-20);
  color: var(--primary-text);
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.share-member-info {
  flex: 1;
  min-width: 0;
}

.share-member-name {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-member-email {
  font-size: 10.5px;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-member-role {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-4);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.share-member-pending {
  font-size: 10px;
  font-weight: 600;
  color: var(--warn);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.share-members-empty {
  font-size: 12px;
  color: var(--text-4);
  font-style: italic;
  padding: 8px 0;
  text-align: center;
}

.share-access-dropdown {
  flex-shrink: 0;
}

.share-access-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 10px 4px 12px;
  border-radius: 2px;
  border: 1px solid var(--primary-15);
  background: var(--primary-04);
  color: var(--text-2);
  cursor: pointer;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}

.share-access-dropdown-trigger:hover {
  border-color: var(--primary);
  color: var(--primary-text);
  background: var(--primary-dim);
}

.share-access-dropdown-chevron {
  flex-shrink: 0;
  opacity: 0.75;
  transition: transform 0.15s ease;
}

.share-access-dropdown.is-open .share-access-dropdown-chevron {
  transform: rotate(180deg);
}

.share-access-dropdown.is-open .share-access-dropdown-trigger {
  border-color: var(--primary);
  color: var(--primary-text);
  background: var(--primary-dim);
}

/* Menu is portaled to document.body with fixed position (see app.js). */
.share-access-dropdown-menu--floating {
  position: fixed;
  z-index: 10050;
  min-width: 148px;
  padding: 4px;
  background: var(--bg-surface);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: var(--toolbar-panel-border);
  border-top: var(--toolbar-panel-top);
  border-radius: var(--toolbar-panel-radius);
  box-shadow: var(--toolbar-panel-shadow);
}

.share-access-dropdown-item {
  display: block;
  width: 100%;
  padding: 7px 10px;
  border: none;
  border-left: 2px solid transparent;
  border-radius: 2px;
  background: transparent;
  color: var(--text-1);
  font-size: 11.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
}

.share-access-dropdown-item:hover {
  background: var(--primary-dim);
  border-left-color: var(--primary);
}

.share-access-dropdown-item.is-selected {
  background: var(--primary-10);
  border-left-color: var(--primary);
  color: var(--primary-text);
}

/* ================================================================
   Preview badge — shown in popup header when user is a viewer
   ================================================================ */
.bep-preview-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: rgba(62, 196, 188, 0.12);
  border: 1px solid rgba(62, 196, 188, 0.35);
  border-radius: 4px;
  color: rgba(62, 196, 188, 0.9);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  flex-shrink: 0;
  user-select: none;
}

/* ================================================================
   Marquee selection overlay
   ================================================================ */
.marquee-select {
  pointer-events: none;
  border: 1px solid var(--primary-70);
  background: var(--primary-06);
  border-radius: 2px;
  z-index: 99999;
  box-shadow: 0 0 0 1px var(--primary-20) inset;
}

.drag-create-preview-text {
  display: none;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  min-height: 0;
  padding: var(--drag-preview-pad-top, 6px) var(--drag-preview-pad-x, 8px) var(--drag-preview-pad-bottom, 8px);
  color: var(--text-1);
  font-size: var(--drag-preview-font-size, 14px);
  line-height: 1.6;
  opacity: 0.75;
  background: none;
  border-radius: 0;
  overflow: hidden;
  user-select: none;
  pointer-events: none;
}

.marquee-select.show-create-preview .drag-create-preview-text {
  display: block;
}

.drag-create-preview-text p {
  margin: 0.35em 0;
}

/* Multi-block selection — keeps the active marquee-hover appearance while blocks are part of a group selection */
.block.is-group-selected {
  border-color: var(--block-color) !important;
  border-top-color: var(--block-color) !important;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--block-color) 35%, transparent) !important;
  background: color-mix(in srgb, var(--block-color) 22%, var(--bg-block)) !important;
}


.block.is-group-selected .block-content.block-content--virtual {
  background: color-mix(
    in srgb,
    var(--block-color) 14%,
    color-mix(in srgb, var(--block-color) 6%, var(--bg-block))
  ) !important;
}

/* Blocks highlighted while inside a live marquee drag — per-block chroma (same as selection), not global primary */
.block.is-marquee-hover {
  border-color: var(--block-color) !important;
  border-top-color: var(--block-color) !important;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--block-color) 35%, transparent) !important;
  background: color-mix(in srgb, var(--block-color) 22%, var(--bg-block)) !important;
}


.block.is-marquee-hover .block-content.block-content--virtual {
  background: color-mix(
    in srgb,
    var(--block-color) 14%,
    color-mix(in srgb, var(--block-color) 6%, var(--bg-block))
  ) !important;
}

.canvas-group.is-marquee-hover {
  border: none !important;
  background: color-mix(in srgb, var(--group-color, var(--primary)) 10%, transparent) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--group-color, var(--primary)) 25%, transparent),
    0 0 0 2px color-mix(in srgb, var(--group-color, var(--primary)) 35%, transparent),
    0 0 8px color-mix(in srgb, var(--group-color, var(--primary)) 20%, transparent) !important;
}

.canvas-group.is-marquee-hover::after {
  opacity: 0.8 !important;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--group-color, var(--primary)) 65%, transparent)) !important;
}

.checkpoint-marker.is-marquee-hover .checkpoint-icon {
  filter:
    brightness(1.4)
    drop-shadow(0 0 8px color-mix(in srgb, var(--cp-color, var(--teal)) 70%, transparent))
    drop-shadow(0 0 3px color-mix(in srgb, var(--cp-color, var(--teal)) 55%, transparent));
}


/* ================================================================
   Block title labels — fixed-size overlay rendered outside viewport
   ================================================================ */
#canvas-block-titles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 90;
}
#canvas-group-titles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 91;
}
/* Overhead info container: centered above the block via the parent's position */
.block-overhead-info {
  position: absolute;
  transform: translate(-50%, -100%);
  display: flex;
  align-items: center;
  gap: 4px;
  pointer-events: none;
  margin-top: -4px;
}

.block-overhead-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-3);
}

.block-overhead-icon--pin {
  color: var(--primary);
  opacity: 0.9;
}

.block-overhead-icon--popup {
  color: var(--teal, #3ec4bc);
  opacity: 0.9;
}

.block-overhead-icon--viewers {
  color: var(--teal, #3ec4bc);
  opacity: 0.9;
  gap: 2px;
  pointer-events: auto;
  cursor: default;
}

.block-overhead-viewers-count {
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}

.block-title-label {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  min-width: 0;
  max-width: 200px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-1);
  background: #0d0e1a;
  /* --block-color is set inline in JS to match the block’s assigned color */
  border: 1px solid color-mix(in srgb, var(--block-color) 18%, var(--border-dim));
  border-left: 2px solid var(--block-color);
  border-radius: 3px;
  padding: 2px 5px 2px 7px;
  pointer-events: none;
  letter-spacing: 0.03em;
}

[data-theme="light"] .block-title-label {
  background: var(--bg-surface);
}

[data-theme="light"] .checkpoint-overhead-label {
  background: var(--bg-surface);
}

[data-theme="light"] .comment-overhead-label {
  background: var(--bg-surface);
}

[data-theme="light"] .comment-overhead-tail {
  border-top-color: var(--bg-surface);
}

.block-title-label__text {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Type icon cozied to the right inside the title chip */
.block-title-label .block-overhead-type {
  flex-shrink: 0;
  opacity: 0.9;
}

/* ================================================================
   Canvas groups — visual containers that wrap blocks
   (Match constellation overlay: nebula fill + faint edge + corner brackets; see _constDraw groups)
   ================================================================ */
.canvas-group {
  --group-color: var(--primary);
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--group-color) 25%, transparent);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  overflow: visible;
  contain: layout style;
  background: color-mix(in srgb, var(--group-color) 6%, transparent);
  pointer-events: none;
  z-index: 1;
}

/* Overhead label — title rendered outside the group boundary (like block/comment titles) */
.group-overhead-label {
  position: absolute;
  z-index: 1;
  transform: translate(0, calc(-100% - 4px));
  font-size: 10px;
  font-weight: 600;
  color: var(--group-color, var(--primary));
  background: #0d0e1a;
  border: 1px solid color-mix(in srgb, var(--group-color, var(--primary)) 30%, transparent);
  border-radius: 3px;
  padding: 2px 6px;
  white-space: nowrap;
  pointer-events: none;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
}
[data-theme="light"] .group-overhead-label {
  background: var(--bg-surface);
}

/* Header row: title | centered grip | actions — `1fr auto 1fr` keeps dots at true horizontal center */
.group-header-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 8px;
  flex-shrink: 0;
  box-sizing: border-box;
  height: 40px;
  min-height: 40px;
  padding: 0 8px;
  pointer-events: auto;
  position: relative;
  z-index: 2;
  border-radius: var(--toolbar-panel-radius) var(--toolbar-panel-radius) 0 0;
  user-select: none;
  transition: background 0.15s;
}

/* Shell-only group: body hit-target so the frame is draggable (parent .canvas-group has pointer-events: none). */
.canvas-group.is-shell-empty .group-empty-fill {
  flex: 1 1 auto;
  min-height: 0;
  pointer-events: auto;
  position: relative;
  z-index: 1;
  border-radius: 0 0 9px 9px;
}

.is-edit-mode .canvas-group.is-shell-empty .group-empty-fill {
  cursor: grab;
}

.canvas-group.is-shell-empty.block-moving .group-empty-fill {
  cursor: grabbing;
}

.canvas-group .group-header-bar:hover {
  background: color-mix(in srgb, var(--group-color) 8%, transparent);
}

.group-header-title {
  grid-column: 1;
  justify-self: start;
  min-width: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--group-color, var(--primary));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
}

.group-header-actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.canvas-group .group-header-actions .group-header-btn {
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  padding: 0;
  margin: 0;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  border: 1px solid color-mix(in srgb, var(--group-color) 38%, var(--border-dim));
  background: color-mix(in srgb, var(--group-color) 14%, var(--bg-surface));
  color: var(--text-1);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background 0.12s, border-color 0.12s, transform 0.08s ease;
}

.canvas-group .group-header-actions .group-header-btn:hover {
  background: color-mix(in srgb, var(--group-color) 26%, var(--bg-surface));
  border-color: color-mix(in srgb, var(--group-color) 55%, transparent);
}

.canvas-group .group-header-actions .group-header-btn:active {
  transform: scale(0.94);
}

.canvas-group .group-header-actions .group-header-btn--danger {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 42%, var(--border-dim));
  background: color-mix(in srgb, var(--danger) 12%, var(--bg-surface));
}

.canvas-group .group-header-actions .group-header-btn--danger:hover {
  background: var(--danger-dim);
  border-color: var(--danger);
}

.canvas-group .group-header-actions .group-header-btn svg {
  width: 14px;
  height: 14px;
}

/* Six-dot grip — centered in header (middle grid column) */
.group-header-bar > .group-drag-dots {
  grid-column: 2;
  justify-self: center;
  display: block;
  width: 16px;
  height: 8px;
  background-image:
    radial-gradient(circle at 2px 2px, currentColor 1.5px, transparent 1.5px),
    radial-gradient(circle at 8px 2px, currentColor 1.5px, transparent 1.5px),
    radial-gradient(circle at 14px 2px, currentColor 1.5px, transparent 1.5px),
    radial-gradient(circle at 2px 6px, currentColor 1.5px, transparent 1.5px),
    radial-gradient(circle at 8px 6px, currentColor 1.5px, transparent 1.5px),
    radial-gradient(circle at 14px 6px, currentColor 1.5px, transparent 1.5px);
  color: var(--group-color);
  opacity: 0.45;
}

.group-header-bar:hover > .group-drag-dots {
  opacity: 0.85;
}

.is-edit-mode .canvas-group .group-header-bar {
  cursor: grab;
}

.is-edit-mode .canvas-group .group-header-actions .group-header-btn {
  cursor: pointer;
}

/* Moving state while dragging a group */
.canvas-group.block-moving {
  opacity: 0.85;
  cursor: grabbing;
}

/* Drop-target highlight when dragging a block over a group */
.canvas-group.is-drop-target {
  background: color-mix(in srgb, var(--group-color) 10%, transparent);
  border-color: color-mix(in srgb, var(--group-color) 50%, transparent);
}

/* Selected group — distinct from block selection */
.canvas-group.is-selected {
  background: color-mix(in srgb, var(--group-color) 10%, transparent);
  border-color: color-mix(in srgb, var(--group-color) 60%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--group-color) 20%, transparent);
}

/* ── Collapsed group — mini constellation preview replaces full block rendering ── */
.canvas-group.is-collapsed {
  overflow: hidden;
  border-radius: 8px;
  pointer-events: auto;
  cursor: grab;
  display: flex;
  flex-direction: column;
  border-width: 1px;
  border-style: solid;
  border-color: color-mix(in srgb, var(--group-color) 40%, transparent);
  background: color-mix(in srgb, var(--group-color) 9%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--group-color) 12%, transparent);
}

.canvas-group.is-collapsed .group-header-bar {
  pointer-events: auto;
  cursor: grab;
  border-bottom: 1px solid color-mix(in srgb, var(--group-color) 22%, transparent);
  flex-shrink: 0;
}

.canvas-group.is-collapsed .group-collapsed-canvas {
  display: block;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  pointer-events: none;
}

.canvas-group.is-collapsed.block-moving {
  cursor: grabbing;
  opacity: 0.88;
}

.canvas-group.is-collapsed.block-moving .group-header-bar {
  cursor: grabbing;
}

.canvas-group.is-collapsed.is-selected {
  border-color: color-mix(in srgb, var(--group-color) 65%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--group-color) 22%, transparent);
}

.is-edit-mode .canvas-group.is-collapsed .group-header-bar {
  cursor: grab;
}

/* ── Solid-group mode: groups become opaque draggable units when zoomed out ── */
#editor-canvas.is-group-solid-mode .canvas-group {
  pointer-events: auto;
  cursor: grab;
  background: color-mix(in srgb, var(--group-color) 12%, transparent);
  border-color: color-mix(in srgb, var(--group-color) 35%, transparent);
}
#editor-canvas.is-group-solid-mode .canvas-group.block-moving {
  cursor: grabbing;
}
/* Block and free-draw interactions disabled while groups are solid */
#editor-canvas.is-group-solid-mode .block.is-in-group {
  pointer-events: none;
  opacity: 0.45;
}
/* Group header still visible but non-interactive (drag handled by body) */
#editor-canvas.is-group-solid-mode .canvas-group .group-header-bar {
  pointer-events: none;
}
/* Block content children re-enable pointer-events; must kill them so the group drag is smooth */
#editor-canvas.is-group-solid-mode .block.is-in-group .block-content,
#editor-canvas.is-group-solid-mode .block.is-in-group .block-content * {
  pointer-events: none !important;
}
#editor-canvas.is-group-solid-mode .block.is-in-group .block-resize-corner,
#editor-canvas.is-group-solid-mode .block.is-in-group .block-port {
  pointer-events: none !important;
}
/* Tag pills and link pills for blocks inside solid groups */
#editor-canvas.is-group-solid-mode .block-tag-pill.is-in-group,
#editor-canvas.is-group-solid-mode .block-link-pill.is-in-group,
#editor-canvas.is-group-solid-mode .block-tag-pill.is-in-group *,
#editor-canvas.is-group-solid-mode .block-link-pill.is-in-group * {
  pointer-events: none !important;
}
#editor-canvas.is-group-solid-mode .block-tag-pill.is-in-group,
#editor-canvas.is-group-solid-mode .block-link-pill.is-in-group {
  opacity: 0.45;
}
/* Checkpoints belonging to a canvas group */
#editor-canvas.is-group-solid-mode .checkpoint-marker.is-in-group {
  pointer-events: none !important;
  opacity: 0.45;
}
/* Selected solid group — stronger fill + glow to distinguish from unselected */
#editor-canvas.is-group-solid-mode .canvas-group.is-selected {
  background: color-mix(in srgb, var(--group-color) 18%, transparent);
  border-color: color-mix(in srgb, var(--group-color) 70%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--group-color) 25%, transparent);
}
/* Hide block selection ring inside solid groups (blocks are non-interactive, group is the unit) */
#editor-canvas.is-group-solid-mode .block.is-in-group.is-selected {
  box-shadow: none;
  border-color: transparent;
  border-top-color: transparent;
}

.checkpoint-marker.is-selected .checkpoint-icon {
  filter:
    brightness(1.35)
    drop-shadow(0 0 6px var(--cp-color, var(--teal)))
    drop-shadow(0 0 2px color-mix(in srgb, var(--cp-color, var(--teal)) 70%, var(--color-white)));
}

/* ================================================================
   Canvas hint — shown when canvas is empty
   ================================================================ */
.canvas-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.18);
  font-size: 13px;
  pointer-events: none;
  user-select: none;
  text-align: center;
  letter-spacing: 0.02em;
}
[data-theme="light"] .canvas-hint {
  color: var(--text-3);
}

/* ================================================================
   Checkpoint markers — canvas-space navigation pins
   ================================================================ */
.checkpoint-marker {
  position: absolute;
  transform: translate(-50%, -100%);
  cursor: grab;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  transition: transform 0.12s;
  user-select: none;
}

.checkpoint-marker:hover {
  transform: translate(-50%, -100%) scale(1.1);
}

.checkpoint-icon {
  color: var(--cp-color, var(--teal, #3ec4bc));
  transition: color 0.15s, opacity 0.15s;
}

.checkpoint-marker:hover .checkpoint-icon {
  opacity: 0.85;
}

#canvas-checkpoint-titles,
#canvas-comment-titles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.checkpoint-overhead-label {
  position: absolute;
  transform: translate(-50%, -100%);
  font-size: 10px;
  font-weight: 700;
  color: var(--cp-color, var(--teal, #3ec4bc));
  background: #0d0e1a;
  border: 1px solid color-mix(in srgb, var(--cp-color, var(--teal)) 20%, var(--border-dim));
  border-left: 2px solid var(--cp-color, var(--teal));
  border-radius: 3px;
  padding: 2px 7px;
  white-space: nowrap;
  pointer-events: none;
  letter-spacing: 0.03em;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.comment-overhead-label {
  position: absolute;
  transform: translate(-50%, -100%);
  font-size: 11px;
  color: var(--text-1);
  background: #0d0e1a;
  border: 1px solid rgba(224, 79, 104, 0.2);
  border-radius: 6px;
  padding: 7px 10px 6px;
  pointer-events: none;
  max-width: 240px;
  min-width: 120px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.14);
  line-height: 1.4;
}
.comment-overhead-header {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
}
.comment-overhead-author {
  font-weight: 700;
  font-size: 11px;
  color: rgba(224, 79, 104, 0.9);
  white-space: nowrap;
}
.comment-overhead-time {
  font-size: 10px;
  color: var(--text-3);
  white-space: nowrap;
}
.comment-overhead-text {
  font-size: 11px;
  color: var(--text-1);
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.45;
}
.comment-overhead-tail {
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #0d0e1a;
  filter: drop-shadow(0 1px 0 rgba(224,79,104,0.2));
}

/* Checkpoint offscreen indicator — teal tint vs block's default */
.offscreen-indicator--checkpoint {
  background: color-mix(in srgb, var(--cp-color, var(--teal)) 18%, transparent) !important;
  border-color: color-mix(in srgb, var(--cp-color, var(--teal)) 45%, transparent) !important;
  color: var(--cp-color, var(--teal)) !important;
  overflow: visible;
}

.offscreen-cp-label {
  position: absolute;
  top: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cp-color, var(--teal));
  white-space: nowrap;
  max-width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.offscreen-indicator--checkpoint:hover {
  background: color-mix(in srgb, var(--cp-color, var(--teal)) 30%, transparent) !important;
}
.offscreen-indicator--comment {
  background: rgba(224, 79, 104, 0.18) !important;
  border-color: rgba(224, 79, 104, 0.45) !important;
  color: rgba(255, 120, 140, 0.9);
}
.offscreen-indicator--comment:hover {
  background: rgba(224, 79, 104, 0.3) !important;
  border-color: rgba(224, 79, 104, 0.7) !important;
}
/* Keep checkpoint hue visible; primary ring marks selection (matches on-canvas pins). */
.offscreen-indicator--checkpoint.is-selected {
  background: color-mix(in srgb, var(--cp-color, var(--teal)) 22%, var(--primary-22)) !important;
  border-color: color-mix(in srgb, var(--cp-color, var(--teal)) 52%, var(--primary-55)) !important;
  color: var(--cp-color, var(--teal)) !important;
  box-shadow: 0 0 0 2px var(--primary-40);
}
.offscreen-indicator--checkpoint.is-selected:hover {
  background: color-mix(in srgb, var(--cp-color, var(--teal)) 30%, var(--primary-25)) !important;
}

/* ── Offscreen cluster indicator ───────────────────────────────── */
.offscreen-indicator--cluster {
  width: 30px;
  height: 30px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  letter-spacing: -0.5px;
  background: var(--primary-mid);
  border: 1.5px solid var(--primary-glow);
  color: var(--primary-text);
}
.offscreen-indicator--cluster:hover {
  background: var(--primary-glow);
  border-color: var(--primary);
  box-shadow: 0 0 8px var(--primary-glow);
}
.offscreen-indicator--cluster-checkpoint {
  background: color-mix(in srgb, var(--cp-color, var(--teal)) 18%, transparent) !important;
  border-color: color-mix(in srgb, var(--cp-color, var(--teal)) 50%, transparent) !important;
  color: var(--cp-color, var(--teal)) !important;
}
.offscreen-indicator--cluster-checkpoint:hover {
  background: color-mix(in srgb, var(--cp-color, var(--teal)) 30%, transparent) !important;
}
.offscreen-indicator--cluster-comment {
  background: var(--danger-dim) !important;
  border-color: color-mix(in srgb, var(--danger) 45%, transparent) !important;
  color: var(--danger) !important;
}
.offscreen-indicator--cluster-comment:hover {
  background: color-mix(in srgb, var(--danger) 22%, transparent) !important;
}

/* ── Offscreen cluster popup list ──────────────────────────────── */
.offscreen-cluster-popup {
  position: absolute;
  z-index: 70;
  background: var(--bg-surface);
  border: var(--toolbar-panel-border);
  border-top: var(--toolbar-panel-top);
  border-radius: var(--toolbar-panel-radius);
  padding: 4px 0;
  min-width: 160px;
  max-height: 260px;
  overflow-y: auto;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--toolbar-panel-shadow);
  pointer-events: all;
  animation: offscreen-popup-in 0.14s ease-out;
}
@keyframes offscreen-popup-in {
  from { opacity: 0; transform: scale(0.95) translateY(4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.offscreen-cluster-popup::-webkit-scrollbar { width: 4px; }
.offscreen-cluster-popup::-webkit-scrollbar-thumb {
  background: var(--border-bright);
  border-radius: 4px;
}
.offscreen-cluster-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 12px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-1);
  font-size: 12px;
  font-family: inherit;
  text-align: left;
  white-space: nowrap;
  transition: background 0.1s;
}
.offscreen-cluster-item:hover {
  background: var(--primary-glow);
}
.offscreen-cluster-item--checkpoint {
  color: var(--cp-color, var(--teal));
}
.offscreen-cluster-item--checkpoint:hover {
  background: color-mix(in srgb, var(--cp-color, var(--teal)) 14%, transparent);
}
.offscreen-cluster-item--comment {
  color: var(--danger);
}
.offscreen-cluster-item--comment:hover {
  background: var(--danger-dim);
}
.offscreen-cluster-item svg {
  flex-shrink: 0;
  opacity: 0.75;
}
.offscreen-cluster-item-label {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Checkpoint offscreen hover preview — minimap style */
.offscreen-preview--checkpoint {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
}
.cp-minimap-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cp-minimap-header svg {
  color: var(--teal);
  flex-shrink: 0;
}
.cp-minimap-graph {
  background: var(--cp-minimap-bg);
  border: 1px solid var(--cp-minimap-border);
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
}
.cp-minimap-block {
  position: absolute;
  background: var(--primary-40);
  border: 1px solid var(--primary-70);
  border-radius: 2px;
  box-sizing: border-box;
}
.cp-minimap-block--live {
  background: transparent;
  overflow: hidden;
  pointer-events: none;
}
.cp-minimap-block--dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dot-color, #a0a0ff);
  border-color: color-mix(in srgb, var(--dot-color, #a0a0ff) 40%, transparent);
  opacity: 0.88;
}
.cp-minimap-block-scaler {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  pointer-events: none;
}
.cp-minimap-graph .cp-minimap-block--live .block-content--for-hover-tip {
  max-height: none;
  padding: 0;
  font-size: 10px;
  line-height: 1.42;
}
.cp-minimap-cp-dot {
  position: absolute;
  width: 7px;
  height: 9px;
  transform: translate(-50%, -100%);
  background: var(--teal, #3ec4bc);
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 50% 85%, 18% 100%, 0% 38%);
  z-index: 2;
}
.cp-minimap-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--text-3);
}

/* Comment offscreen hover (cluster list row) */
.offscreen-preview--comment {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  width: 280px;
}
.offscreen-comment-preview-author {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-1);
  flex-shrink: 0;
}
.offscreen-comment-preview-text {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.45;
  white-space: pre-wrap;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 8;
  line-clamp: 8;
  -webkit-box-orient: vertical;
}

/* ================================================================
   Checkpoint context menu
   ================================================================ */
.checkpoint-ctx-menu {
  background: #0d0e1a;
  border: 1px solid #1e1f36;
  border-radius: 4px;
  padding: 4px;
  min-width: 170px;
  z-index: 9000;
  box-shadow: none;
  animation: popupIn 0.1s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Canvas / group-shell context menus — pan/zoom hit the canvas through chrome; rows stay clickable */
.checkpoint-ctx-menu.ctx-menu-view-through {
  pointer-events: none;
}
.checkpoint-ctx-menu.ctx-menu-view-through .ctx-menu-item,
.checkpoint-ctx-menu.ctx-menu-view-through button {
  pointer-events: auto;
}
/* Body-fixed canvas HUD (replaces inline z-index:99999) — see :root --avq-canvas-hud-z */
.port-rename-popup,
.canvas-selection-popup.canvas-selection-popup--floating,
.port-actions-popup.port-actions-popup--floating,
.checkpoint-selection-popup,
.canvas-tool-popup {
  z-index: var(--avq-canvas-hud-z);
  /* Don’t let the browser treat two-finger pinch / pan on the rail as page zoom; wheel is forwarded in editor.js */
  touch-action: none;
}
.checkpoint-selection-popup.checkpoint-ctx-menu {
  padding: 6px;
}
.checkpoint-selection-popup-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.port-actions-popup.checkpoint-ctx-menu {
  padding: 6px;
}
.port-actions-popup.port-actions-popup--floating {
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
  min-width: 0;
  animation: popupIn 0.12s cubic-bezier(0.16, 1, 0.3, 1);
}
.port-actions-popup-stack {
  display: flex;
  align-items: center;
  gap: 8px;
}
.port-actions-popup-stack--ns-cross {
  flex-direction: column;
  align-items: center;
}
.port-actions-popup__nsBand {
  display: flex;
  justify-content: center;
}
.port-actions-popup__crossMid {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.port-actions-popup__moveRow {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.port-actions-popup-stack--ew-cross {
  flex-direction: column;
  align-items: center;
}
.port-actions-popup__ewShell {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.port-actions-popup__ewTrashBand {
  display: flex;
  justify-content: center;
}
.port-actions-popup__ewCol {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.port-actions-popup__ewMoves {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.port-actions-icon-btn {
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  border: 1px solid var(--toolbar-panel-border);
  background: var(--bg-surface);
  color: var(--text-1);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--toolbar-panel-shadow);
  transition: background 0.1s, border-color 0.1s, transform 0.08s ease;
}
.port-actions-icon-btn:hover {
  background:
    linear-gradient(
      175deg,
      color-mix(in srgb, var(--primary) 26%, transparent) 0%,
      color-mix(in srgb, var(--primary) 12%, transparent) 60%
    ),
    var(--bg-surface);
  border-color: var(--primary);
}
.port-actions-icon-btn:active {
  transform: scale(0.94);
}
.port-actions-icon-btn--danger {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 52%, var(--border));
  background: color-mix(in srgb, var(--danger) 24%, var(--bg-elevated));
}
.port-actions-icon-btn--danger:hover {
  background: color-mix(in srgb, var(--danger) 38%, var(--bg-elevated));
  border-color: var(--danger);
}
.port-actions-popup-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.canvas-selection-popup.canvas-selection-popup--floating {
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
  min-width: 0;
  animation: popupIn 0.12s cubic-bezier(0.16, 1, 0.3, 1);
}
.canvas-selection-popup-list {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 8px;
  justify-content: center;
  justify-items: center;
  align-items: center;
  min-width: 0;
}

.canvas-icon-toolbar--themed .port-actions-icon-btn {
  box-sizing: border-box;
  border-radius: 6px;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1.5px solid var(--primary-25);
  background: var(--bg-elevated);
  color: var(--text-1);
  transition: background 0.1s, border-color 0.1s, transform 0.08s ease;
}
/*
  Accent rest + hover for canvas HUD icon stacks (same recipe as .group-header-btn):
  block selection, port actions, tag/link/connection tool strips.
  Exclude danger + connection lock (warn) rows.
*/
.canvas-selection-popup.canvas-icon-toolbar--themed
  .port-actions-icon-btn:not(.port-actions-icon-btn--danger):not(.port-actions-icon-btn--conn-lock-on):not(.port-actions-icon-btn--conn-label-on),
.port-actions-popup.canvas-icon-toolbar--themed
  .port-actions-icon-btn:not(.port-actions-icon-btn--danger):not(.port-actions-icon-btn--conn-lock-on):not(.port-actions-icon-btn--conn-label-on),
.canvas-tool-popup.canvas-icon-toolbar--themed
  .port-actions-icon-btn:not(.port-actions-icon-btn--danger):not(.port-actions-icon-btn--conn-lock-on):not(.port-actions-icon-btn--conn-label-on) {
  border: 1px solid color-mix(in srgb, var(--canvas-sel-accent) 38%, var(--border-dim));
  background: color-mix(in srgb, var(--canvas-sel-accent) 14%, var(--bg-surface));
}
.canvas-icon-toolbar--themed .port-actions-icon-btn:hover {
  background: color-mix(in srgb, var(--primary) 22%, var(--bg-elevated));
  border-color: var(--primary);
}
.canvas-selection-popup.canvas-icon-toolbar--themed
  .port-actions-icon-btn:not(.port-actions-icon-btn--danger):not(.port-actions-icon-btn--conn-lock-on):not(.port-actions-icon-btn--conn-label-on):hover,
.port-actions-popup.canvas-icon-toolbar--themed
  .port-actions-icon-btn:not(.port-actions-icon-btn--danger):not(.port-actions-icon-btn--conn-lock-on):not(.port-actions-icon-btn--conn-label-on):hover,
.canvas-tool-popup.canvas-icon-toolbar--themed
  .port-actions-icon-btn:not(.port-actions-icon-btn--danger):not(.port-actions-icon-btn--conn-lock-on):not(.port-actions-icon-btn--conn-label-on):hover {
  background: color-mix(in srgb, var(--canvas-sel-accent) 26%, var(--bg-surface));
  border-color: color-mix(in srgb, var(--canvas-sel-accent) 55%, transparent);
}
.canvas-icon-toolbar--themed .port-actions-icon-btn:active {
  transform: scale(0.94);
}
.canvas-icon-toolbar--themed .port-actions-icon-btn.port-actions-icon-btn--danger {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 52%, var(--border));
  background: color-mix(in srgb, var(--danger) 24%, var(--bg-elevated));
}
.canvas-icon-toolbar--themed .port-actions-icon-btn.port-actions-icon-btn--danger:hover {
  background: color-mix(in srgb, var(--danger) 38%, var(--bg-elevated));
  border-color: var(--danger);
}
.canvas-icon-toolbar--themed .port-actions-icon-btn.port-actions-icon-btn--conn-lock-on {
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 50%, var(--border));
  background: color-mix(in srgb, var(--warn) 16%, var(--bg-elevated));
  box-shadow: none;
}
.canvas-icon-toolbar--themed .port-actions-icon-btn.port-actions-icon-btn--conn-lock-on:hover {
  background: color-mix(in srgb, var(--warn) 26%, var(--bg-elevated));
  border-color: color-mix(in srgb, var(--warn) 65%, var(--border));
}

.canvas-tool-popup.checkpoint-ctx-menu {
  padding: 6px;
}
.canvas-tool-popup.canvas-tool-popup--conn-floating {
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
  min-width: 0;
}
.canvas-tool-popup-stack--conn {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
/* Locked connection — warn tint + icon (toolbar engaged lock), not primary-dim (reads as hover). */
.port-actions-icon-btn--conn-lock-on {
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 42%, var(--toolbar-panel-border));
  background: color-mix(in srgb, var(--warn) 14%, var(--bg-surface));
  box-shadow: none;
}
.port-actions-icon-btn--conn-lock-on:hover {
  background: color-mix(in srgb, var(--warn) 22%, var(--bg-surface));
  border-color: color-mix(in srgb, var(--warn) 55%, var(--toolbar-panel-border));
}
.port-actions-icon-btn--conn-label-on {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 42%, var(--toolbar-panel-border));
  background: color-mix(in srgb, var(--primary) 14%, var(--bg-surface));
  box-shadow: none;
}
.port-actions-icon-btn--conn-label-on:hover {
  background: color-mix(in srgb, var(--primary) 22%, var(--bg-surface));
  border-color: color-mix(in srgb, var(--primary) 55%, var(--toolbar-panel-border));
}
.canvas-icon-toolbar--themed .port-actions-icon-btn.port-actions-icon-btn--conn-label-on {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 50%, var(--border));
  background: color-mix(in srgb, var(--primary) 16%, var(--bg-elevated));
  box-shadow: none;
}
.canvas-icon-toolbar--themed .port-actions-icon-btn.port-actions-icon-btn--conn-label-on:hover {
  background: color-mix(in srgb, var(--primary) 26%, var(--bg-elevated));
  border-color: color-mix(in srgb, var(--primary) 65%, var(--border));
}
.canvas-tool-popup-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
[data-theme="light"] .checkpoint-ctx-menu {
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: none;
}

.port-rename-popup.checkpoint-ctx-menu {
  min-width: 200px;
  padding: 6px 8px;
}

.port-rename-input {
  width: 100%;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--primary-22);
  background: var(--primary-06);
  color: var(--text-1);
  font-size: 12px;
  outline: none;
  box-sizing: border-box;
}
.port-rename-input::placeholder {
  color: var(--text-3);
}
.port-rename-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-12);
}

.ctx-menu-title {
  padding: 6px 10px 5px;
  margin: -2px -2px 4px;
  font-size: 10px;
  font-weight: 700;
  color: var(--primary-text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.35;
  user-select: none;
  border-bottom: 1px solid var(--border-dim);
}
/* Connection context menu: block names with forward (connect) arrow, not a two-way pictogram */
.ctx-menu-title--conn {
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 600;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  flex-wrap: wrap;
  line-height: 1.3;
  text-align: center;
  color: var(--text-1, var(--primary-text));
}
.ctx-conn-title-arrow {
  display: inline-flex;
  flex-shrink: 0;
  opacity: 0.9;
  color: var(--text-2, var(--primary-70));
  align-items: center;
  margin: 0 0.1em;
}

.ctx-menu-section-label {
  padding: 8px 10px 4px;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--primary-text);
  user-select: none;
}
.ctx-menu-title + .ctx-menu-section-label {
  margin-top: 0;
  padding-top: 2px;
}

.ctx-menu-item > svg {
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  display: block;
}
.ctx-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  box-sizing: border-box;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--text-1);
  font-size: 11.5px;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s, color 0.1s, transform 0.08s ease;
}
.ctx-menu-item:hover {
  background: var(--primary-dim);
  color: var(--text-1);
}
[data-theme="light"] .ctx-menu-item:hover {
  background: var(--primary-dim);
}
.ctx-menu-item:active {
  transform: scale(0.94);
}
.ctx-menu-item:disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}
.ctx-menu-item--danger {
  color: var(--danger);
}
.ctx-menu-item--danger:hover {
  background: color-mix(in srgb, var(--danger) 38%, var(--bg-elevated));
  border-left-color: var(--danger);
}
.ctx-menu-item--with-sub {
  align-items: flex-start;
  padding-top: 7px;
  padding-bottom: 7px;
}
.ctx-menu-item--stacked {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  line-height: 1.25;
  min-width: 0;
}
.ctx-menu-item--stacked__main {
  font-weight: 600;
}
.ctx-menu-item--stacked__warn {
  font-size: 9.5px;
  font-weight: 500;
  color: var(--text-3);
  max-width: 14rem;
}
.ctx-menu-item--danger .ctx-menu-item--stacked__warn {
  color: var(--danger);
  opacity: 0.88;
}
.ctx-menu-sep {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary-20) 20%, var(--primary-30) 50%, var(--primary-20) 80%, transparent);
  margin: 3px 0;
}
[data-theme="light"] .ctx-menu-sep {
  background: var(--border-dim);
}
[data-theme="light"] .ctx-menu-title {
  border-bottom-color: var(--border-dim);
}

/* ── Open space popup ── */
.open-space-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  animation: popupIn 0.12s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-theme="light"] .open-space-popup-overlay {
  background: color-mix(in srgb, #e8ebf4 45%, rgba(20, 21, 32, 0.12));
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.open-space-popup {
  background: var(--bg-surface);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: var(--toolbar-panel-border);
  border-top: var(--toolbar-panel-top);
  border-radius: var(--toolbar-panel-radius);
  width: 320px;
  max-width: calc(100vw - 32px);
  max-height: 420px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--toolbar-panel-shadow);
  overflow: hidden;
}

.open-space-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--border-dim);
}

.open-space-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary-text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.open-space-close {
  background: none;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  padding: 2px;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
}
.open-space-close:hover {
  color: var(--text-1);
  background: var(--primary-dim);
}

.open-space-list {
  overflow-y: auto;
  padding: 6px;
  flex: 1;
}
.open-space-list::-webkit-scrollbar { width: 4px; }
.open-space-list::-webkit-scrollbar-track { background: transparent; }
.open-space-list::-webkit-scrollbar-thumb { background: var(--border-dim); border-radius: 2px; }

.open-space-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--text-1);
  font-size: 12.5px;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s, color 0.1s;
}
.open-space-item:hover {
  background: var(--primary-dim);
}
[data-theme="light"] .open-space-item:hover {
  background: var(--primary-dim);
}
.open-space-item:hover svg {
  color: var(--primary-text);
}
.open-space-item svg {
  color: var(--text-3);
  flex-shrink: 0;
  transition: color 0.1s;
}

.open-space-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.open-space-shared {
  font-size: 9px;
  font-weight: 700;
  color: var(--primary-text);
  background: var(--primary-12);
  padding: 2px 6px;
  border-radius: 2px;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

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

/* ================================================================
   My Space panel — floating above toolbar (same layout as layers)
   ================================================================ */
.ms-panel {
  position: fixed;
  bottom: var(--avq-floating-above-toolbar);
  left: 50%;
  transform: translateX(-50%);
  width: 260px;
  max-height: 480px;
  background: var(--bg-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: var(--toolbar-panel-border);
  border-top: var(--toolbar-panel-top);
  border-radius: var(--toolbar-panel-radius);
  box-shadow: var(--toolbar-panel-shadow);
  z-index: 5000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: ms-panel-in 0.15s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes ms-panel-in {
  from { opacity: 0; transform: translateX(-50%) translateY(6px) scale(0.97); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
#app:has(.toolbar.is-constellation) .ms-panel {
  bottom: var(--avq-const-bottom-clearance);
}

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

.ms-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--text-2);
  cursor: pointer;
  padding: 0;
  transition: background 0.12s, color 0.12s;
}
.ms-add-btn:hover {
  background: var(--hover-bg);
  color: var(--text-1);
}

/* Edit view: back + title only */
.ms-header--edit {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px 6px 8px;
}
.ms-header--edit .ms-header-title {
  flex: 1;
  min-width: 0;
  text-align: left;
}
.ms-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: none;
  color: var(--text-2);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.12s, background 0.12s;
}
.ms-back:hover {
  color: var(--text-1);
  background: var(--hover-bg);
}
.ms-header-title {
  min-width: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ms-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ms-header-right {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ms-header-icon {
  color: var(--primary-text);
  opacity: 0.7;
}

.ms-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  user-select: none;
}

.ms-close {
  background: none;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  padding: 4px;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
}
.ms-close:hover {
  color: var(--text-1);
  background: var(--primary-dim);
}

.ms-body {
  overflow-y: auto;
  padding: 4px;
}
.ms-body--edit {
  padding: 4px 8px 8px;
}
.ms-body::-webkit-scrollbar { width: 4px; }
.ms-body::-webkit-scrollbar-track { background: transparent; }
.ms-body::-webkit-scrollbar-thumb { background: var(--border-dim); border-radius: 2px; }

.ms-section {
  padding: 0;
}

.ms-section--edit {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ms-section-label--edit {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 8px 4px 4px;
}
.ms-section-label--edit:first-child {
  padding-top: 4px;
}

.ms-section-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 2px 8px 4px;
}

.ms-spaces-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ms-space-item {
  display: flex;
  align-items: center;
  border-radius: 6px;
  transition: background 0.1s;
  min-width: 0;
}
.ms-space-item:hover {
  background: var(--hover-bg);
}
.ms-space-item.is-current {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.ms-space-item .ms-space-row {
  flex: 1;
  min-width: 0;
  width: auto;
}

.ms-space-edit {
  flex: 0 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  margin-right: 4px;
  border: none;
  border-radius: 4px;
  background: none;
  color: var(--text-3);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.ms-space-edit__ic {
  display: block;
}
.ms-space-edit:hover {
  color: var(--text-1);
  background: var(--hover-bg);
}
.ms-space-item__tail {
  flex: 0 0 24px;
}

.ms-space-row {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 6px 8px;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--text-1);
  font-size: 12px;
  cursor: pointer;
  text-align: left;
  transition: color 0.1s;
}
.ms-space-item.is-current .ms-space-row {
  color: var(--primary);
  font-weight: 500;
  cursor: default;
}
.ms-space-item.is-current .ms-space-icon {
  color: var(--primary);
}

.ms-space-icon {
  flex-shrink: 0;
  color: var(--text-3);
  transition: color 0.12s;
}

.ms-space-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ms-space-badges {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}

.ms-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
}
.ms-badge--shared {
  color: var(--primary-text);
  background: var(--primary-dim);
}
.ms-space-check {
  flex-shrink: 0;
  color: var(--primary);
}

.ms-new-row {
  display: flex;
  gap: 7px;
  margin-top: 6px;
}

.ms-new-input {
  flex: 1;
  background: var(--primary-06);
  border: 1px solid var(--primary-20);
  border-radius: 6px;
  color: var(--text-1);
  font-size: 12px;
  padding: 7px 10px;
  outline: none;
  transition: border-color 0.15s;
  min-width: 0;
}
[data-theme="light"] .ms-new-input {
  background: rgba(0, 0, 0, 0.03);
  border-color: var(--border);
}
.ms-new-input::placeholder { color: var(--text-3); }
.ms-new-input:focus { border-color: var(--primary); }

.ms-create-btn {
  background: var(--primary);
  color: var(--color-white);
  border: none;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 7px 14px;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.15s, background 0.15s;
  box-shadow: 0 0 12px var(--primary-30);
}
.ms-create-btn:hover:not(:disabled) { background: var(--primary-h); }
.ms-create-btn:disabled { opacity: 0.35; cursor: default; }

.ms-rename-row {
  display: flex;
  gap: 7px;
  margin-top: 4px;
}
.ms-section--edit .ms-rename-row,
.ms-section--edit .ms-invite-row {
  margin-top: 0;
}

.ms-rename-input {
  flex: 1;
  background: var(--primary-06);
  border: 1px solid var(--primary-15);
  border-radius: 3px;
  color: var(--text-1);
  font-size: 12px;
  padding: 7px 10px;
  outline: none;
  transition: border-color 0.15s;
  min-width: 0;
}
[data-theme="light"] .ms-rename-input {
  background: rgba(0, 0, 0, 0.03);
  border-color: var(--border);
}
.ms-rename-input::placeholder { color: var(--text-3); }
.ms-rename-input:focus { border-color: var(--primary); }

.ms-save-btn {
  background: none;
  border: 1px solid var(--primary-20);
  border-radius: 3px;
  color: var(--text-2);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 7px 12px;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.ms-save-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary-text); background: var(--primary-dim); }
.ms-save-btn:disabled { opacity: 0.35; cursor: default; }

.ms-invite-row {
  display: flex;
  gap: 7px;
  margin-top: 4px;
}

.ms-invite-input {
  flex: 1;
  background: var(--primary-06);
  border: 1px solid var(--primary-15);
  border-radius: 3px;
  color: var(--text-1);
  font-size: 12px;
  padding: 7px 10px;
  outline: none;
  transition: border-color 0.15s;
  min-width: 0;
}
[data-theme="light"] .ms-invite-input {
  background: rgba(0, 0, 0, 0.03);
  border-color: var(--border);
}
.ms-invite-input::placeholder { color: var(--text-3); }
.ms-invite-input:focus { border-color: var(--primary); }

.ms-invite-btn {
  background: none;
  border: 1px solid var(--primary-20);
  border-radius: 3px;
  color: var(--text-2);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 7px 12px;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.ms-invite-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary-text); background: var(--primary-dim); }
.ms-invite-btn:disabled { opacity: 0.35; cursor: default; }

.ms-members {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.ms-section--edit .ms-members {
  margin-top: 6px;
}

/* Match .share-member-item (share modal) — same card + hover as rest of app */
.ms-member-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 3px;
  background: var(--primary-04);
  border: 1px solid var(--primary-10);
  transition: background 0.12s, border-color 0.12s;
  box-sizing: border-box;
}
.ms-member-row:hover {
  background: var(--primary-dim);
  border-color: var(--primary-20);
}

.ms-member-row--pending {
  opacity: 0.88;
  border-style: dashed;
  border-color: var(--border-bright);
  background: var(--primary-04);
}
.ms-member-row--pending:hover {
  border-color: var(--primary-20);
  border-style: solid;
  background: var(--primary-dim);
}

.ms-member-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}
.ms-member-avatar--fallback {
  background: var(--primary-mid);
  color: var(--primary-text);
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ms-member-avatar--pending {
  background: var(--surface-hover);
  color: var(--text-3);
  border: 1px dashed var(--border-bright);
}

.ms-member-name {
  flex: 1;
  font-size: 12px;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ms-member-role {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  flex-shrink: 0;
}
.ms-member-role--owner {
  color: var(--primary-text);
  font-size: 10px;
  font-weight: 600;
}
.ms-member-role--toggle {
  background: none;
  border: 1px solid var(--border-bright);
  border-radius: 5px;
  color: var(--text-2);
  cursor: pointer;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.ms-member-role--toggle:hover:not(:disabled) { border-color: var(--primary); color: var(--primary-text); background: var(--primary-dim); }
.ms-member-role--toggle:disabled { opacity: 0.4; cursor: default; }
.ms-member-role--pending {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-3);
  background: var(--surface-hover);
  border-radius: 5px;
  padding: 2px 7px;
  border: 1px dashed var(--border-bright);
}

/* Always visible so remove works on touch (no :hover) */
.ms-member-remove {
  background: none;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  padding: 3px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}
.ms-member-remove:hover {
  color: var(--danger);
  background: var(--danger-dim);
}
.ms-member-remove:disabled {
  opacity: 0.3;
  cursor: default;
}

.ms-pending-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
  padding: 8px 4px 2px;
  letter-spacing: 0.03em;
}
.ms-section--edit .ms-pending-label {
  padding: 6px 2px 2px;
}

.ms-edit-footer {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--primary-12);
}

.ms-public-link-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  margin-bottom: 8px;
}

.ms-public-link-info {
  flex: 1;
  font-size: 11.5px;
  color: var(--text-3);
}

.ms-public-copy-row {
  display: flex;
  gap: 7px;
  margin-bottom: 8px;
}

.ms-public-copy-input {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  color: var(--text-2);
  cursor: text;
  user-select: all;
}

.ms-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 10px 14px;
  background: none;
  border: 1px solid color-mix(in srgb, var(--danger) 28%, var(--border-dim));
  border-radius: 3px;
  color: var(--danger);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ms-delete-btn:hover {
  background: var(--danger-dim);
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border-dim));
  color: var(--danger);
}
[data-theme="light"] .ms-delete-btn {
  border-color: color-mix(in srgb, var(--danger) 32%, var(--border));
}
[data-theme="light"] .ms-delete-btn:hover {
  border-color: color-mix(in srgb, var(--danger) 50%, var(--border));
}

/* Share modal — remove button */
.share-member-remove-btn {
  background: none;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s, background 0.15s;
  margin-left: 4px;
}
.share-member-item:hover .share-member-remove-btn {
  opacity: 1;
}
.share-member-remove-btn:hover {
  color: var(--danger);
  background: var(--danger-dim);
}
.share-member-remove-btn:disabled {
  opacity: 0.3;
  cursor: default;
}


/* ── Share modal: public link section ──────────────────────────── */
.modal-divider {
  border: none;
  border-top: 1px solid var(--border-dim);
  margin: 14px 0;
}

.share-public-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.share-public-info {
  flex: 1;
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.4;
}

.share-public-link-row {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
}

.share-public-link-input {
  flex: 1;
  min-width: 0;
  font-size: 11.5px;
  color: var(--text-2);
  cursor: text;
  user-select: all;
}

.share-public-copy-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

/* ── Public view banner — same glass chrome as toolbar / profile (--toolbar-panel-*) ─ */
.public-view-banner {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 150;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  justify-content: flex-start;
  box-sizing: border-box;
  width: auto;
  max-width: min(100vw - 24px, 640px);
  padding: 6px 8px;
  background: var(--bg-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: var(--toolbar-panel-border);
  border-top: var(--toolbar-panel-top);
  border-radius: var(--toolbar-panel-radius);
  box-shadow: var(--toolbar-panel-shadow);
  font-size: 11px;
  color: var(--text-2);
  pointer-events: auto;
}

.public-view-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
  background: var(--tray-bg);
  border: var(--tray-border);
  border-radius: 8px;
  padding: 5px 8px;
  line-height: 1.2;
}

.public-view-name {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.35;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.public-view-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 30px;
  padding: 0 12px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--color-white);
  text-decoration: none;
  white-space: nowrap;
  background: var(--primary);
  border: 1px solid color-mix(in srgb, var(--primary) 72%, #0a0c12);
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--color-white) 12%, transparent);
  transition: background 0.12s, color 0.12s, border-color 0.12s, filter 0.12s;
}
.public-view-cta:hover {
  background: var(--primary-h);
  color: var(--color-white);
  border-color: color-mix(in srgb, var(--primary-h) 75%, #0a0c12);
  filter: brightness(1.03);
}

button.public-view-cta {
  margin: 0;
  text-align: center;
  appearance: none;
}

[data-theme="light"] .public-view-badge {
  color: var(--text-2);
}
[data-theme="light"] .public-view-cta {
  background: var(--primary);
  color: var(--color-white);
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
  box-shadow: none;
}
[data-theme="light"] .public-view-cta:hover {
  background: var(--primary-h);
  color: var(--color-white);
  border-color: color-mix(in srgb, var(--primary-h) 60%, var(--border));
  filter: brightness(1.02);
}

/* ── Update-available banner ─────────────────────────────────────────────── */
.update-banner {
  top: auto;
  bottom: 80px;
  animation: _updateBannerIn 0.25s ease;
}
@keyframes _updateBannerIn {
  from { opacity: 0; transform: translateX(-50%) translateY(6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Baseline hidden; shown via inline style when user is signed in and non‑premium after premium doc loads. */
#subscribe-banner {
  display: none;
}

/* ================================================================
   Inline constellation — zoomed-out canvas mode
   ================================================================ */

/* ── Constellation overlay canvas ── */
.const-overlay-canvas {
  position: absolute;
  inset: 0;
  z-index: 85;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
  user-select: none;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.editor-canvas.is-constellation .const-overlay-canvas {
  pointer-events: auto;
  opacity: 1;
}

/* Always-on block preview cards (replaces one-line canvas labels; pointer-events none so canvas stays clickable) */
.const-map-cards {
  position: absolute;
  inset: 0;
  z-index: 86;
  pointer-events: none;
  overflow: visible;
}
/* Children may use pointer-events:auto (e.g. checklist); parent none alone still lets hits reach them */
.const-map-cards * {
  pointer-events: none !important;
}
.editor-canvas:not(.is-constellation) .const-map-cards {
  display: none !important;
}
.const-map-card {
  position: absolute;
  left: 0;
  top: 0;
  width: min(200px, 42vw);
  max-height: min(38vh, 260px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px 8px;
  box-sizing: border-box;
  background: var(--bg-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: var(--toolbar-panel-border);
  border-top: var(--toolbar-panel-top);
  border-radius: var(--toolbar-panel-radius);
  box-shadow: var(--toolbar-panel-shadow);
}
.const-map-card .const-tip__block-preview {
  max-height: min(120px, 22vh);
  overflow: hidden;
}

/* ── Constellation search — top row in .toolbar-dock (width matches .toolbar) ── */
.const-search-bar {
  position: relative;
  left: auto;
  transform: none;
  z-index: 1;
  display: none;
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 4px 6px;
  pointer-events: auto;
  background: transparent;
}
.const-search-panel[hidden] {
  display: none !important;
}
.toolbar-dock .const-search-panel {
  position: relative;
  left: auto;
  bottom: auto;
  transform: none;
  z-index: 10;
  width: 100%;
  max-width: none;
  min-width: 0;
  box-sizing: border-box;
  border-radius: 0;
  border: none;
  background: transparent;
  overflow: visible;
}
.toolbar-dock .const-search-panel:not([hidden]) .const-search-bar {
  display: flex;
}
#app:has(.toolbar.is-constellation) .toolbar-dock .const-search-panel:not([hidden]) .const-input,
#app:has(.toolbar.is-constellation) .toolbar-dock .const-search-panel:not([hidden]) .const-search-bar__nav {
  box-shadow: none;
}
#app:has(.toolbar.is-constellation) .toolbar-dock .const-search-panel:not([hidden]) .const-search-bar__nav {
  background: color-mix(in srgb, var(--panel-bg) 80%, var(--surface-hover));
}
#app:has(.toolbar.is-constellation) .toolbar-dock .const-search-panel:not([hidden]) .const-input {
  background: color-mix(in srgb, var(--panel-bg) 78%, var(--surface-hover));
}
[data-theme="light"] #app:has(.toolbar.is-constellation) .toolbar-dock .const-search-panel:not([hidden]) .const-search-bar__nav {
  background: rgba(255, 255, 255, 0.6);
  border-color: var(--border);
}
[data-theme="light"] #app:has(.toolbar.is-constellation) .toolbar-dock .const-search-panel:not([hidden]) .const-input {
  background: rgba(255, 255, 255, 0.7);
  border-color: var(--border);
  box-shadow: none;
}

.const-input-wrap {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  width: 100%;
}
.const-search-bar__nav {
  flex: 0 0 auto;
  /* Match .const-input so arrows read as the same control cluster (toolbar-btn is otherwise borderless) */
  background: var(--panel-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--panel-border);
  color: var(--text-1);
  box-shadow: 0 0 0 1px var(--primary-06), 0 2px 12px rgba(0, 0, 0, 0.3);
}
.const-search-bar__nav:hover {
  background: color-mix(in srgb, var(--panel-bg) 70%, var(--primary-dim));
  border-color: color-mix(in srgb, var(--panel-border) 55%, var(--primary));
  color: var(--text-1);
}
.const-search-bar__nav:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}
[data-theme="light"] .const-search-bar__nav {
  background: rgba(255, 255, 255, 0.92);
  border-color: var(--border);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .const-search-bar__nav:hover {
  background: var(--surface-hover);
  border-color: var(--border);
}
.const-input-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  z-index: 1;
  transform: translateY(-50%);
  color: var(--text-3);
  pointer-events: none;
}
.const-input {
  position: relative;
  z-index: 0;
  width: 100%;
  min-width: 0;
  padding: 7px 10px 7px 30px;
  background: var(--panel-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  color: var(--text-1);
  font-size: 12.5px;
  font-family: inherit;
  outline: none;
  box-shadow: 0 0 0 1px var(--primary-06), 0 4px 20px rgba(0, 0, 0, 0.35);
  transition: border-color 0.15s;
}
[data-theme="light"] .const-input {
  background: rgba(255, 255, 255, 0.92);
  border-color: var(--border);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.const-input:focus {
  border-color: var(--primary);
  background: var(--panel-bg);
}
.const-input::placeholder { color: var(--text-3); }

/* Ranked search hits — centered floating card (.tag-usage-inspector chrome), not edge-to-edge on the dock */
.const-search-ranklist {
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  top: auto;
  bottom: calc(100% + 12px);
  width: min(300px, calc(100% - 24px));
  max-width: calc(100% - 24px);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: min(42vh, 280px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0;
  border-radius: var(--toolbar-panel-radius);
  border: var(--toolbar-panel-border);
  border-top: var(--toolbar-panel-top);
  background: var(--bg-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--toolbar-panel-shadow);
  transform: translateZ(0);
  scrollbar-width: thin;
  scrollbar-color: var(--primary-dim) transparent;
  pointer-events: all;
  -webkit-tap-highlight-color: transparent;
}
.const-search-ranklist.const-search-ranklist--portal {
  position: fixed;
  transform: none;
  z-index: 220;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.const-search-ranklist::-webkit-scrollbar {
  width: 3px;
}
.const-search-ranklist::-webkit-scrollbar-track {
  background: transparent;
}
.const-search-ranklist::-webkit-scrollbar-thumb {
  background: var(--primary-dim);
  border-radius: 2px;
}
.const-search-ranklist[hidden] {
  display: none !important;
}
/* Rows / meter / text: same rules as .tui-block-row / __accent / __info / __title / __meta */
.const-search-ranklist__row {
  display: flex;
  align-items: stretch;
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  border-bottom: 1px solid var(--primary-dim);
  border-radius: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: left;
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.1s;
}
.const-search-ranklist__row:last-child {
  border-bottom: none;
}
.const-search-ranklist__row:hover {
  background: var(--primary-06);
}
.const-search-ranklist__row:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
.const-search-ranklist__meter {
  flex: 0 0 6px;
  width: 6px;
  align-self: stretch;
  border-radius: 4px;
  overflow: hidden;
  margin: 6px 0 6px 8px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-3) 22%, transparent);
}
.const-search-ranklist__main {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.const-search-ranklist__title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.const-search-ranklist__meta {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ── Ranklist group wrappers ── */
.const-search-ranklist__group {
  display: flex;
  flex-direction: column;
}
.const-search-ranklist__group + .const-search-ranklist__group,
.const-search-ranklist__group + .const-search-ranklist__row,
.const-search-ranklist__row + .const-search-ranklist__group {
  border-top: 1px solid var(--primary-dim);
}
.const-search-ranklist__group-hdr {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 10px 10px 10px 10px;
  background: color-mix(in srgb, var(--text-3) 6%, transparent);
  border: none;
  border-bottom: 1px solid var(--primary-dim);
  color: var(--text-2);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  text-align: left;
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.1s;
}
.const-search-ranklist__group.is-collapsed .const-search-ranklist__group-hdr {
  border-bottom: none;
}
.const-search-ranklist__group-hdr:hover {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}
.const-search-ranklist__group-hdr:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
.const-search-ranklist__group-label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.const-search-ranklist__group-count {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-3);
  background: color-mix(in srgb, var(--text-3) 12%, transparent);
  padding: 1px 5px;
  border-radius: 8px;
}
.const-search-ranklist__group-chevron {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--text-3);
  display: flex;
  align-items: center;
  transition: transform 0.15s;
}
.const-search-ranklist__group.is-collapsed .const-search-ranklist__group-chevron {
  transform: rotate(-90deg);
}
.const-search-ranklist__group-body {
  display: flex;
  flex-direction: column;
}
.const-search-ranklist__group-body .const-search-ranklist__row {
  padding-left: 6px;
}
.const-search-ranklist__group-meter {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 2px;
  border-radius: 0;
  overflow: hidden;
  margin: 0;
  box-shadow: none;
  flex: none;
}

/* ── Time-range: popover (toolbar) + inner ribbon row ── */
.const-time-popover {
  position: fixed;
  left: 50%;
  right: auto;
  top: auto;
  transform: translateX(-50%);
  bottom: var(
    --avq-const-bottom-clearance,
    calc(env(safe-area-inset-bottom, 0px) + 20px + 32px + 2px)
  );
  z-index: 400;
  min-width: min(360px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  padding: 10px 12px;
  background: var(--bg-surface);
  border: var(--toolbar-panel-border);
  border-top: var(--toolbar-panel-top);
  border-radius: var(--toolbar-panel-radius);
  box-shadow: var(--toolbar-panel-shadow);
  display: block;
  overflow: hidden;
}
.const-time-popover[hidden] {
  display: none !important;
}
.const-time-popover .const-time-ribbon {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  z-index: 0;
  max-width: 100%;
  margin: 0;
  background: transparent;
  border: none;
  padding: 0;
}
.const-time-ribbon {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  user-select: none;
  transition: border-color 0.18s, box-shadow 0.18s, opacity 0.22s;
}
.const-time-panel {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.const-time-popover:has(.const-time-ribbon.is-active) {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border-dim));
  border-top-color: var(--primary);
  box-shadow: none;
}
[data-theme="light"] .const-time-popover:has(.const-time-ribbon.is-active) {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border-dim));
  border-top-color: var(--primary);
  box-shadow: none;
}
.const-time-reset {
  flex-shrink: 0; width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 6px;
  color: var(--text-3); cursor: pointer; opacity: 0; pointer-events: none;
  transition: opacity 0.15s, background 0.12s, color 0.12s;
}
.const-time-ribbon.is-active .const-time-reset { opacity: 1; pointer-events: all; }
.const-time-reset:hover { background: var(--primary-dim); border-color: var(--primary-glow); color: var(--text-1); }

/* ── Tag filter: badge on toolbar icon (chips in popover) ── */
.const-tag-panel {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.const-tag-panel .toolbar-btn--icon .const-tags-badge[hidden] {
  display: none !important;
}
.const-tag-panel .toolbar-btn--icon .const-tags-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 7px;
  background: var(--primary);
  color: var(--color-white);
  pointer-events: none;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--bg-elevated) 30%, rgba(0, 0, 0, 0.35));
}
[data-theme="light"] .const-tag-panel .toolbar-btn--icon .const-tags-badge {
  color: var(--color-white);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.const-time-panel .toolbar-btn--icon .const-time-badge[hidden] {
  display: none !important;
}
.const-time-panel .toolbar-btn--icon .const-time-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  background: var(--primary);
  pointer-events: none;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--bg-elevated) 30%, rgba(0, 0, 0, 0.35));
}
[data-theme="light"] .const-time-panel .toolbar-btn--icon .const-time-badge {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}
/* Constellation dock: vertical stack — entity bar, tags, time, then search above the toolbar row */
.const-panel-slot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  flex: 0 0 auto;
  align-self: stretch;
}
.const-panel-slot > * {
  flex: 0 0 auto;
  min-width: 0;
}
.toolbar-dock .const-tag-popover {
  position: relative;
  left: auto; right: auto; top: auto; bottom: auto;
  transform: none;
  z-index: 1;
  min-width: 0;
  max-width: none;
  width: 100%;
  box-sizing: border-box;
  padding: 6px 6px 8px;
  gap: 8px;
  box-shadow: none !important;
  border-radius: 0 !important;
  border: none !important;
  border-top: none !important;
  overflow: hidden;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  outline: none !important;
}
.toolbar-dock .const-tag-popover .const-tag-chips {
  min-width: 0;
}
.toolbar-dock .const-tag-popover__foot {
  padding: 0;
}
/* Light theme re-applied panel chrome on .const-tag-popover — must override after that rule */
[data-theme="light"] .toolbar-dock .const-tag-popover {
  background: transparent !important;
  border: none !important;
  border-top: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
}

/* Time range — primary slot: one tight header row (clock · dates · clear) + track row */
.toolbar-dock .const-time-popover {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  transform: none;
  z-index: 1;
  width: 100%;
  max-width: none;
  min-width: 0;
  box-sizing: border-box;
  padding: 6px 12px 11px;
  margin: 0;
  box-shadow: none;
  border-radius: 0;
  border: none;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: visible;
}
.toolbar-dock .const-time-popover:has(.const-time-ribbon.is-active) {
  box-shadow: none;
}
.toolbar-dock .const-time-ribbon {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  width: 100%;
  min-width: 0;
  max-width: min(328px, 100%);
  margin: 0 auto;
  box-sizing: border-box;
}
.toolbar-dock .const-time-ribbon-top {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.toolbar-dock .const-time-date-fields {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}
.toolbar-dock .const-time-range-sep--inline {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  opacity: 0.65;
  user-select: none;
}
.toolbar-dock .const-time-date-trigger {
  flex: 1 1 auto;
  min-width: 0;
  max-width: min(148px, 44vw);
  box-sizing: border-box;
  height: 28px;
  padding: 0 10px;
  margin: 0;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-1);
  text-align: center;
  cursor: pointer;
  background: color-mix(in srgb, var(--panel-bg) 78%, var(--surface-hover));
  border: 1px solid var(--border-dim);
  border-radius: 6px;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
[data-theme="light"] .toolbar-dock .const-time-date-trigger {
  background: rgba(255, 255, 255, 0.72);
  border-color: var(--border);
}
.toolbar-dock .const-time-date-trigger:hover {
  background: color-mix(in srgb, var(--panel-bg) 55%, var(--primary-dim));
  border-color: color-mix(in srgb, var(--border-dim) 60%, var(--primary));
}
.toolbar-dock .const-time-date-trigger:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}
.toolbar-dock .const-time-reset {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid var(--primary-12);
  background: color-mix(in srgb, var(--primary-06) 85%, transparent);
  color: var(--text-2);
  transition: background 0.12s, border-color 0.12s, color 0.12s, opacity 0.15s;
}
.toolbar-dock .const-time-ribbon:not(.is-active) .const-time-reset {
  display: none;
}
.toolbar-dock .const-time-ribbon.is-active .const-time-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  pointer-events: all;
}
.toolbar-dock .const-time-reset:hover {
  background: var(--primary-12);
  border-color: var(--primary-22);
  color: var(--text-1);
}
[data-theme="light"] .toolbar-dock .const-time-reset {
  background: rgba(255, 255, 255, 0.55);
  border-color: var(--border);
}

/* Constellation — custom date calendar (no native OS date picker) */
.const-time-cal-popover[hidden] {
  display: none !important;
}
.const-time-cal-popover {
  box-sizing: border-box;
  width: min(260px, calc(100vw - 24px));
  padding: 10px 10px 12px;
  background: var(--bg-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: var(--toolbar-panel-border);
  border-top: var(--toolbar-panel-top);
  border-radius: var(--toolbar-panel-radius);
  box-shadow: var(--toolbar-panel-shadow);
}
.const-time-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.const-time-cal-month-label {
  flex: 1 1 auto;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: 0.02em;
}
.const-time-cal-nav-btn {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  color: var(--text-2);
  background: color-mix(in srgb, var(--panel-bg) 70%, var(--surface-hover));
  border: 1px solid var(--border-dim);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.const-time-cal-nav-btn:hover:not(:disabled) {
  background: var(--primary-dim);
  border-color: var(--primary-22);
  color: var(--text-1);
}
.const-time-cal-nav-btn:disabled {
  opacity: 0.28;
  cursor: default;
}
.const-time-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  text-align: center;
}
.const-time-cal-weekdays span {
  padding: 2px 0;
}
.const-time-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.const-time-cal-pad {
  min-height: 30px;
}
.const-time-cal-day {
  min-height: 30px;
  margin: 0;
  padding: 0;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-1);
  background: color-mix(in srgb, var(--panel-bg) 55%, transparent);
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.const-time-cal-day:hover:not(:disabled):not(.is-disabled) {
  background: var(--primary-15);
  border-color: var(--primary-22);
}
.const-time-cal-day:focus-visible:not(:disabled):not(.is-disabled) {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}
.const-time-cal-day.is-disabled {
  opacity: 0.22;
  cursor: default;
}

.const-tag-popover {
  position: fixed; left: 50%; right: auto; top: auto; transform: translateX(-50%);
  bottom: var(
    --avq-const-bottom-clearance,
    calc(env(safe-area-inset-bottom, 0px) + 20px + 32px + 2px)
  );
  z-index: 400; min-width: min(220px, calc(100vw - 32px)); max-width: min(320px, calc(100vw - 32px));
  max-height: min(200px, 32vh); padding: 8px;
  background: var(--bg-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: var(--toolbar-panel-border);
  border-top: var(--toolbar-panel-top);
  border-radius: var(--toolbar-panel-radius);
  box-shadow: var(--toolbar-panel-shadow);
  overflow: hidden;
  display: flex; flex-direction: column; gap: 8px;
}
.const-tag-popover[hidden] { display: none !important; }

/* ── Sort order popover ── */
.const-sort-popover {
  position: fixed; left: 50%; right: auto; top: auto; transform: translateX(-50%);
  bottom: var(
    --avq-const-bottom-clearance,
    calc(env(safe-area-inset-bottom, 0px) + 20px + 32px + 2px)
  );
  z-index: 400; min-width: min(170px, calc(100vw - 32px)); max-width: min(220px, calc(100vw - 32px));
  padding: 6px;
  background: var(--bg-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: var(--toolbar-panel-border);
  border-top: var(--toolbar-panel-top);
  border-radius: var(--toolbar-panel-radius);
  box-shadow: var(--toolbar-panel-shadow);
  display: flex; flex-direction: column; gap: 2px;
}
.const-sort-popover[hidden] { display: none !important; }
.toolbar-dock .const-sort-popover {
  position: relative;
  left: auto; right: auto; top: auto; bottom: auto;
  transform: none;
  z-index: 1;
  min-width: 0;
  max-width: none;
  background: transparent !important;
  border: none !important;
  border-top: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
[data-theme="light"] .toolbar-dock .const-sort-popover {
  background: transparent !important;
  border: none !important;
  border-top: none !important;
  box-shadow: none !important;
}
.const-sort-options {
  display: flex; flex-direction: column; gap: 2px;
}
.const-sort-option {
  display: flex; align-items: center; width: 100%;
  background: transparent; border: 1px solid transparent; color: var(--text-2);
  font-size: 11px; font-weight: 600; font-family: inherit;
  padding: 6px 10px; border-radius: 3px;
  cursor: pointer; text-align: left;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.const-sort-option:hover { background: var(--primary-12); border-color: var(--primary-20); color: var(--primary-text); }
[data-theme="light"] .const-sort-option:hover { background: var(--surface-hover); border-color: var(--border-bright); color: var(--text-1); }
.const-sort-option--active {
  background: var(--primary-mid); border-color: var(--primary-35); color: var(--primary-text);
}
[data-theme="light"] .const-sort-option--active {
  background: var(--surface-selected); border-color: var(--border-bright); color: var(--text-1);
}
/* Sort panel wrapper + badge (mirrors .const-time-panel) */
.const-sort-panel {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.const-sort-panel .toolbar-btn--icon .const-sort-badge[hidden] {
  display: none !important;
}
.const-sort-panel .toolbar-btn--icon .const-sort-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  background: var(--primary);
  pointer-events: none;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--bg-elevated) 30%, rgba(0, 0, 0, 0.35));
}
[data-theme="light"] .const-sort-panel .toolbar-btn--icon .const-sort-badge {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}

/* ── Cluster mode panel + popover — mirrors .const-sort-panel / .const-sort-popover ── */
.const-cluster-panel { position: relative; display: inline-flex; align-items: center; }
.const-cluster-badge[hidden] { display: none !important; }
.const-cluster-badge {
  position: absolute; top: 3px; right: 3px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--primary); pointer-events: none;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--bg-elevated) 30%, rgba(0,0,0,0.35));
}
[data-theme="light"] .const-cluster-badge { box-shadow: 0 0 0 1px rgba(0,0,0,0.12); }


  bottom: var(--avq-const-bottom-clearance, calc(env(safe-area-inset-bottom, 0px) + 20px + 32px + 2px));
  z-index: 400; min-width: min(190px, calc(100vw - 32px)); max-width: min(220px, calc(100vw - 32px));
  padding: 6px;

.const-tag-chips {
  display: flex; flex-wrap: wrap; gap: 5px; align-content: flex-start; align-items: flex-start;
  min-width: 0; flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
}
.const-tag-popover__foot {
  flex-shrink: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.const-tag-foot-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: 1 1 auto; min-width: 0;
  min-height: 30px; padding: 0 8px; border-radius: 3px; font-size: 11px; font-weight: 600;
  font-family: inherit; cursor: pointer; background: var(--primary-08); border: 1px solid var(--primary-15);
  color: var(--text-2); transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.const-tag-foot-btn:hover { background: var(--primary-12); color: var(--text-1); }
.const-tag-foot-btn[aria-pressed="true"] { background: var(--primary-mid); border-color: var(--primary-30); color: var(--primary-text); }
#const-tag-clear-btn { flex: 0 0 auto; }
[data-theme="light"] .const-tag-foot-btn[aria-pressed="true"] { background: var(--surface-selected); border-color: var(--border-bright); color: var(--text-1); }
.const-tag-chips:empty::before { content: "No tags on this canvas"; font-size: 11px; color: var(--text-3); padding: 4px 2px; }
.const-tag-chip {
  display: inline-flex; align-items: center; flex-shrink: 0;
  background: var(--primary-06); border: 1px solid var(--primary-12); color: var(--text-2);
  font-size: 11px; font-weight: 600; font-family: inherit; padding: 5px 12px; border-radius: 3px;
  cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.const-tag-chip:hover { background: var(--primary-12); border-color: var(--primary-22); color: var(--text-1); }
[data-theme="light"] .const-tag-chip:hover { background: var(--surface-hover); border-color: var(--border-bright); color: var(--text-1); }
.const-tag-chip--active { background: var(--primary-mid); border-color: var(--primary-35); color: var(--primary-text); }
[data-theme="light"] .const-tag-chip--active { background: var(--surface-selected); border-color: var(--border-bright); color: var(--text-1); }
.const-tag-chip__name { min-width: 0; }
.const-tag-chip__count {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  opacity: 0.72;
}
.const-tag-chip:hover .const-tag-chip__count,
.const-tag-chip--active .const-tag-chip__count {
  opacity: 0.92;
}

/* ── Constellation tooltip ── */
.const-tip {
  position: absolute; pointer-events: none;
  background: var(--bg-surface);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: var(--toolbar-panel-border);
  border-top: var(--toolbar-panel-top);
  border-radius: var(--toolbar-panel-radius);
  padding: 8px 10px;
  width: 220px; display: flex; flex-direction: column; gap: 3px;
  max-height: min(50vh, 320px);
  overflow: hidden;
  box-shadow: var(--toolbar-panel-shadow); opacity: 0;
  transform: translate(-50%, calc(-100% - 14px)); transition: opacity 0.12s; z-index: 190;
}
.const-tip.is-visible { opacity: 1; }
.const-tip__type { font-size: 9px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; line-height: 1; }
.const-tip__title { font-size: 12px; font-weight: 600; color: var(--text-1); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.const-tip__desc { font-size: 10px; font-weight: 500; line-height: 1.4; color: var(--text-2); max-height: 3.1em; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; word-break: break-word; }
.const-tip__preview { font-size: 10px; color: var(--text-2); line-height: 1.42; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.const-tip__date { font-size: 9px; color: var(--text-3); margin-top: 2px; }
.const-tip mark { background: var(--primary-25); color: var(--primary-text); border-radius: 2px; padding: 0 1px; }
.const-tip * {
  pointer-events: none !important;
}

/* ── Entity action bar — first row in .toolbar-dock (constellation), above search + toolbar ── */
.toolbar-dock .const-actions {
  position: relative;
  left: auto;
  bottom: auto;
  transform: none;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding: 8px 10px 10px;
  background: transparent;
  border: none;
  border-radius: 0;
  z-index: 0;
}
#app:has(.toolbar.is-constellation) .toolbar-dock .const-actions {
  border-bottom: 1px solid var(--panel-border);
}
.toolbar-dock .const-actions.is-open {
  pointer-events: all;
}
.const-ba-header { min-width: 0; text-align: left; padding-right: 2px; }
.const-ba-type { font-size: 9px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; line-height: 1.2; margin-bottom: 2px; }
.const-ba-title { font-size: 12.5px; font-weight: 600; color: var(--text-1); line-height: 1.3; min-width: 0; max-height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.const-ba-preview { min-width: 0; max-width: 100%; max-height: 140px; overflow: hidden; box-sizing: border-box; border-radius: 4px; }
.const-ba-preview * { max-width: 100%; min-width: 0; box-sizing: border-box; flex-shrink: 1; pointer-events: none !important; }
.const-ba-preview .block-content--for-hover-tip { width: 100%; overflow: hidden; font-size: 10px; line-height: 1.42; padding: 0; }
.const-ba-preview .bc-text { padding: 0; min-height: 0; font-size: 10px; line-height: 1.42; overflow: hidden; }
.const-ba-preview img { max-height: 130px; width: 100%; object-fit: cover; display: block; border-radius: 3px; }
.const-ba-preview .bc-gallery-cell img { height: 110px; }
.const-ba-row { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; }
.const-ba-btn {
  flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center;
  gap: 5px; height: 32px; padding: 0 8px; font: inherit; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em; background: var(--primary-06);
  border: 1px solid var(--primary-15); border-radius: 3px; color: var(--text-1); cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.const-ba-btn-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.const-ba-btn:hover { background: var(--primary-12); border-color: var(--primary-25); }
.const-ba-btn--primary { background: var(--primary); border-color: var(--primary); color: var(--color-white); flex: 1 1 auto; }
.const-ba-btn--primary:hover { background: var(--primary); border-color: var(--primary); filter: brightness(1.1); }
.const-ba-btn#const-ba-edit { flex: 0 1 auto; min-width: 64px; max-width: 40%; }
.const-ba-close {
  flex: 0 0 32px; width: 32px; height: 32px; min-width: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-04); border: 1px solid var(--primary-12); border-radius: 3px;
  color: var(--text-3); cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s; box-sizing: border-box;
}
.const-ba-close:hover { background: var(--primary-dim); color: var(--text-1); border-color: var(--primary-glow); }

/* ── Toolbar button groups: swap canvas ↔ constellation ── */
.toolbar-canvas-group,
.toolbar-const-group {
  display: flex;
  align-items: center;
  gap: 2px;
}
/* canvas-group and const-group are always flex inside their section panels;
   section visibility is controlled by the section div show/hide (see .toolbar-section rules above) */
.toolbar-const-group { display: flex; }

/* View-only canvas: hide tools that require full edit / subscription (same gate as inventory class) */
#toolbar.is-view-only #highlight-mode-btn,
#toolbar.is-view-only #toolbar-live-btn,
#toolbar.is-view-only #toolbar-free-draw-btn {
  display: none !important;
}

/* [hidden] on these buttons must win over .toolbar-btn { display: flex } (non‑subscriber preview, etc.) */
#toolbar .toolbar-canvas-group > #toolbar-live-btn[hidden],
#toolbar .toolbar-canvas-group > #toolbar-free-draw-btn[hidden] {
  display: none !important;
}

/* Go Live — danger red in both idle and live (readable vs pan/highlight toggles) */
#toolbar-live-btn {
  color: var(--danger);
}
#toolbar-live-btn:hover {
  color: color-mix(in srgb, var(--danger) 85%, var(--color-white));
}
#toolbar-live-btn.is-active {
  color: var(--danger);
}
#toolbar-live-btn.is-active:hover {
  color: color-mix(in srgb, var(--danger) 85%, var(--color-white));
}

/* Inventory: hide when canvas-inventory feature is disabled */
#toolbar.is-canvas-inventory-off #inventory-toolbar-btn {
  display: none !important;
}
/* Constellation / freedraw: buttons now live inside section panels (closed by default),
   so no mass-hiding rules needed here — sections handle discoverability naturally.
   Only keep functional state rules below. */

.toolbar-freedraw-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
#toolbar .toolbar-canvas-group > #toolbar-freedraw-actions[hidden] {
  display: none !important;
}
#toolbar.is-freedraw #fd-toolbar-clear {
  color: var(--danger);
}
#toolbar.is-freedraw #fd-toolbar-clear:hover:not(:disabled) {
  color: color-mix(in srgb, var(--danger) 85%, var(--color-white));
}

/* Free-draw: tool & properties as toolbar dropdowns (opens upward — dock is bottom-fixed) */
.fd-toolbar-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}
@keyframes fd-toolbar-popover-in {
  from {
    opacity: 0;
    transform: translateX(-50%) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}
/* Same glass chrome as .toolbar / constellation popovers; centered on trigger; gap above bar */
.fd-toolbar-popover {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  z-index: 390;
  min-width: 44px;
  padding: 8px 6px;
  box-sizing: border-box;
  background: var(--bg-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: var(--toolbar-panel-border);
  border-top: var(--toolbar-panel-top);
  border-radius: var(--toolbar-panel-radius);
  box-shadow: var(--toolbar-panel-shadow);
  animation: fd-toolbar-popover-in 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.fd-toolbar-popover[hidden] {
  display: none !important;
}
.fd-toolbar-tools-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  max-height: min(70vh, 420px);
  overflow-y: auto;
}
.fd-toolbar-popover--tools .draw-tool-btn {
  width: 36px;
  height: 36px;
}
#fd-toolbar-tool-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
#fd-toolbar-tool-icon svg {
  width: 17px;
  height: 17px;
  display: block;
}
.fd-toolbar-popover--props {
  width: 192px;
  padding: 12px 12px 14px;
  box-sizing: border-box;
}
.fd-props-popover-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.toolbar-single-block-actions {
  display: none;
  align-items: center;
  gap: 2px;
}
.toolbar-connection-actions {
  display: none;
  align-items: center;
  gap: 2px;
}
#toolbar.toolbar--connection-focus .toolbar-connection-actions {
  display: inline-flex;
}
#toolbar.toolbar--connection-focus .toolbar-connection-actions > [hidden] {
  display: none !important;
}
#toolbar.toolbar--connection-focus .toolbar-connection-actions > :not([hidden]) {
  display: inline-flex;
}
#toolbar.toolbar--connection-focus #zoom-out-btn,
#toolbar.toolbar--connection-focus #zoom-label,
#toolbar.toolbar--connection-focus #zoom-in-btn,
#toolbar.toolbar--connection-focus #pan-mode-btn,
#toolbar.toolbar--connection-focus #highlight-mode-btn {
  display: none !important;
}

/* Port actions toolbar */
.toolbar-port-actions {
  display: none;
  align-items: center;
  gap: 2px;
}
#toolbar.toolbar--port-focus .toolbar-port-actions {
  display: inline-flex;
}
#toolbar.toolbar--port-focus .toolbar-port-actions > [hidden] {
  display: none !important;
}
#toolbar.toolbar--port-focus .toolbar-port-actions > :not([hidden]) {
  display: inline-flex;
}
#toolbar.toolbar--port-focus #zoom-out-btn,
#toolbar.toolbar--port-focus #zoom-label,
#toolbar.toolbar--port-focus #zoom-in-btn,
#toolbar.toolbar--port-focus #pan-mode-btn,
#toolbar.toolbar--port-focus #highlight-mode-btn {
  display: none !important;
}
#toolbar.toolbar--port-focus .toolbar-port-delete-btn {
  color: var(--danger);
}
#toolbar.toolbar--port-focus .toolbar-port-delete-btn:hover {
  color: var(--danger);
  background: var(--danger-dim);
}
#toolbar.toolbar--single-block-focus .toolbar-single-block-actions {
  display: inline-flex;
}
.toolbar-sb-view-only {
  display: none !important;
}
#toolbar.toolbar--single-block-focus:not(.toolbar--single-block-editable) .toolbar-sb-view-only {
  display: inline-flex !important;
}
#toolbar.toolbar--single-block-focus .toolbar-sb-requires-edit {
  display: none !important;
}
#toolbar.toolbar--single-block-editable .toolbar-sb-requires-edit {
  display: inline-flex !important;
}
/* [hidden] on context buttons must win over .toolbar-btn / .toolbar-sb-requires-edit / .toolbar-sb-view-only (see connection-actions pattern) */
#toolbar.toolbar--single-block-focus:not(.toolbar--single-block-editable) .toolbar-single-block-actions .toolbar-sb-view-only[hidden],
#toolbar.toolbar--single-block-editable .toolbar-single-block-actions .toolbar-sb-requires-edit[hidden],
#toolbar.toolbar--single-block-focus .toolbar-single-block-actions > button[hidden] {
  display: none !important;
}
#toolbar.toolbar--multi-block-focus .toolbar-multi-block-actions > [hidden],
#toolbar.toolbar--mixed-selection-focus .toolbar-mixed-selection-actions > [hidden] {
  display: none !important;
}
#toolbar.toolbar--single-block-editable .toolbar-sb-delete-btn {
  color: var(--danger);
}
#toolbar.toolbar--single-block-editable .toolbar-sb-delete-btn:hover {
  color: var(--danger);
  background: var(--danger-dim);
}
#toolbar.toolbar--connection-focus #toolbar-conn-break-btn {
  color: var(--danger);
}
#toolbar.toolbar--connection-focus #toolbar-conn-break-btn:hover {
  color: var(--danger);
  background: var(--danger-dim);
}
#toolbar.toolbar--connection-focus #toolbar-conn-lock-btn.toolbar-conn-lock-btn--engaged {
  color: var(--warn);
}
#toolbar.toolbar--connection-focus #toolbar-conn-lock-btn.toolbar-conn-lock-btn--engaged:hover {
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 18%, transparent);
}
#toolbar.toolbar--single-block-editable #toolbar-sb-lock-targets-btn.toolbar-sb-lock-targets-btn--engaged {
  color: var(--warn);
}
#toolbar.toolbar--single-block-editable #toolbar-sb-lock-targets-btn.toolbar-sb-lock-targets-btn--engaged:hover {
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 18%, transparent);
}

.toolbar-tag-pill-actions,
.toolbar-link-pill-actions {
  display: none;
  align-items: center;
  gap: 2px;
}
#toolbar.toolbar--tag-pill-focus .toolbar-tag-pill-actions {
  display: inline-flex;
}
#toolbar.toolbar--link-pill-focus .toolbar-link-pill-actions {
  display: inline-flex;
}
#toolbar.toolbar--tag-pill-focus #zoom-out-btn,
#toolbar.toolbar--tag-pill-focus #zoom-label,
#toolbar.toolbar--tag-pill-focus #zoom-in-btn,
#toolbar.toolbar--tag-pill-focus #pan-mode-btn,
#toolbar.toolbar--tag-pill-focus #highlight-mode-btn,
#toolbar.toolbar--link-pill-focus #zoom-out-btn,
#toolbar.toolbar--link-pill-focus #zoom-label,
#toolbar.toolbar--link-pill-focus #zoom-in-btn,
#toolbar.toolbar--link-pill-focus #pan-mode-btn,
#toolbar.toolbar--link-pill-focus #highlight-mode-btn {
  display: none !important;
}
#toolbar.toolbar--tag-pill-focus #inventory-toolbar-btn,
#toolbar.toolbar--link-pill-focus #inventory-toolbar-btn {
  display: none !important;
}
#toolbar.toolbar--tag-pill-focus #toolbar-tp-remove-tag-btn {
  gap: 5px;
  color: var(--danger);
}
#toolbar.toolbar--tag-pill-focus #toolbar-tp-remove-tag-btn:hover {
  color: var(--danger);
  background: var(--danger-dim);
}
#toolbar.toolbar--link-pill-focus #toolbar-lp-remove-link-btn {
  gap: 5px;
  color: var(--danger);
}
#toolbar.toolbar--link-pill-focus #toolbar-lp-remove-link-btn:hover {
  color: var(--danger);
  background: var(--danger-dim);
}

/* Same gate as inventory / block popup editing — hide remove even if [hidden] loses to .toolbar-btn { display:flex } */
#toolbar.is-canvas-inventory-off #toolbar-lp-remove-link-btn,
#toolbar.is-canvas-inventory-off #toolbar-tp-remove-tag-btn {
  display: none !important;
}

.toolbar-checkpoint-actions {
  display: none;
  align-items: center;
  gap: 2px;
}
#toolbar.toolbar--checkpoint-focus .toolbar-checkpoint-actions {
  display: inline-flex;
}
#toolbar.toolbar--checkpoint-focus #toolbar-cp-delete-btn {
  color: var(--danger);
}
#toolbar.toolbar--checkpoint-focus #toolbar-cp-delete-btn:hover {
  color: var(--danger);
  background: var(--danger-dim);
}
#toolbar.toolbar--checkpoint-focus #zoom-out-btn,
#toolbar.toolbar--checkpoint-focus #zoom-label,
#toolbar.toolbar--checkpoint-focus #zoom-in-btn,
#toolbar.toolbar--checkpoint-focus #pan-mode-btn,
#toolbar.toolbar--checkpoint-focus #highlight-mode-btn {
  display: none !important;
}
#toolbar.toolbar--checkpoint-focus #inventory-toolbar-btn {
  display: none !important;
}

.toolbar-group-actions {
  display: none;
  align-items: center;
  gap: 2px;
}
#toolbar.toolbar--group-focus .toolbar-group-actions {
  display: inline-flex;
}
#toolbar.toolbar--group-focus:not(.toolbar--group-editable) .toolbar-gr-requires-edit {
  display: none !important;
}
#toolbar.toolbar--group-editable .toolbar-gr-requires-edit {
  display: inline-flex !important;
}
#toolbar.toolbar--group-focus:not(.toolbar--group-editable) .toolbar-group-actions .toolbar-gr-requires-edit[hidden],
#toolbar.toolbar--group-editable .toolbar-group-actions .toolbar-gr-requires-edit[hidden],
#toolbar.toolbar--group-focus .toolbar-group-actions > button[hidden] {
  display: none !important;
}
#toolbar.toolbar--group-editable .toolbar-gr-delete-btn {
  color: var(--danger);
}
#toolbar.toolbar--group-editable .toolbar-gr-delete-btn:hover {
  color: var(--danger);
  background: var(--danger-dim);
}
#toolbar.toolbar--group-focus #zoom-out-btn,
#toolbar.toolbar--group-focus #zoom-label,
#toolbar.toolbar--group-focus #zoom-in-btn,
#toolbar.toolbar--group-focus #pan-mode-btn,
#toolbar.toolbar--group-focus #highlight-mode-btn {
  display: none !important;
}
#toolbar.toolbar--group-focus #inventory-toolbar-btn {
  display: none !important;
}

.toolbar-multi-block-actions,
.toolbar-mixed-selection-actions {
  display: none;
  align-items: center;
  gap: 2px;
}
#toolbar.toolbar--multi-block-focus .toolbar-multi-block-actions {
  display: inline-flex;
}
#toolbar.toolbar--mixed-selection-focus .toolbar-mixed-selection-actions {
  display: inline-flex;
}
#toolbar.toolbar--multi-block-focus #toolbar-mb-delete-btn,
#toolbar.toolbar--mixed-selection-focus #toolbar-ms-delete-btn {
  color: var(--danger);
}
#toolbar.toolbar--multi-block-focus #toolbar-mb-delete-btn:hover,
#toolbar.toolbar--mixed-selection-focus #toolbar-ms-delete-btn:hover {
  color: var(--danger);
  background: var(--danger-dim);
}
#toolbar.toolbar--multi-block-focus #zoom-out-btn,
#toolbar.toolbar--multi-block-focus #zoom-label,
#toolbar.toolbar--multi-block-focus #zoom-in-btn,
#toolbar.toolbar--multi-block-focus #pan-mode-btn,
#toolbar.toolbar--multi-block-focus #highlight-mode-btn,
#toolbar.toolbar--mixed-selection-focus #zoom-out-btn,
#toolbar.toolbar--mixed-selection-focus #zoom-label,
#toolbar.toolbar--mixed-selection-focus #zoom-in-btn,
#toolbar.toolbar--mixed-selection-focus #pan-mode-btn,
#toolbar.toolbar--mixed-selection-focus #highlight-mode-btn {
  display: none !important;
}
#toolbar.toolbar--multi-block-focus #inventory-toolbar-btn,
#toolbar.toolbar--mixed-selection-focus #inventory-toolbar-btn {
  display: none !important;
}

#toolbar.toolbar--single-block-focus #zoom-out-btn,
#toolbar.toolbar--single-block-focus #zoom-label,
#toolbar.toolbar--single-block-focus #zoom-in-btn,
#toolbar.toolbar--single-block-focus #pan-mode-btn,
#toolbar.toolbar--single-block-focus #highlight-mode-btn {
  display: none !important;
}

/* ── Constellation empty state ── */
.const-empty {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  color: var(--text-3); font-size: 13px; pointer-events: none;
  z-index: 86; /* above .const-overlay-canvas (85), below .const-tip */
}
.const-empty svg { opacity: 0.25; margin-bottom: 4px; }
/* Only valid while zoomed into constellation — hide if ever left in DOM */
.editor-canvas:not(.is-constellation) .const-empty {
  display: none !important;
}

/* ── Viewport fade for crossfade zone ── */
.editor-canvas.is-constellation .canvas-viewport { pointer-events: none; }
.editor-canvas.is-constellation .canvas-grid { opacity: 0; }
/* Main empty-canvas hint conflicts with constellation / const-empty messaging */
.editor-canvas.is-constellation #canvas-hint {
  display: none !important;
}

/* Connection markers/lines sit on the canvas behind the fixed frosted toolbar — hide so they don’t show through */
.editor-canvas.is-constellation .conn-arrow-marker,
.editor-canvas.is-constellation .conn-label,
.editor-canvas.is-constellation .conn-svg {
  opacity: 0;
  pointer-events: none;
}

/* ── Responsive ── */
@media (max-width: 860px) {
  .toolbar-dock .const-time-ribbon-top {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
  .toolbar-dock .const-time-date-fields {
    flex: 1 1 100%;
    width: 100%;
    justify-content: stretch;
    gap: 6px;
  }
  .toolbar-dock .const-time-date-trigger {
    max-width: none;
    flex: 1 1 0;
  }
  .toolbar-dock .const-time-reset {
    margin-left: auto;
  }
}
@media (max-width: 640px) {
  .const-tip { width: min(220px, calc(100vw - 48px)); }
  .toolbar-dock .const-actions { padding: 8px 8px 10px; }
  .const-ba-btn { padding: 0 6px; font-size: 10.5px; }
  .const-ba-btn#const-ba-edit { min-width: 56px; }
}


/* ================================================================
   Canvas edit popup — checkpoint / group / comment dialogs (shared chrome)
   ================================================================ */
/* Color picker — row of swatches inside canvas edit popups */
.cp-color-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
  max-width: 100%;
  min-width: 0;
}
.cp-color-swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.1s, border-color 0.1s;
  outline: none;
}
.cp-color-swatch:hover {
  transform: scale(1.2);
}
.cp-color-swatch.is-active {
  border-color: var(--text-1, var(--color-white));
  transform: scale(1.15);
}

.canvas-edit-popup {
  box-sizing: border-box;
  /* Cap width so .cp-color-row wraps instead of one ~500px row of swatches */
  max-width: min(280px, calc(100vw - 24px));
  background: var(--bg-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: var(--toolbar-panel-border);
  border-top: var(--toolbar-panel-top);
  border-radius: var(--toolbar-panel-radius);
  padding: 10px;
  min-width: 220px;
  box-shadow: var(--toolbar-panel-shadow);
  animation: popupIn 0.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.canvas-edit-popup.canvas-edit-popup--tags {
  min-width: 0;
  max-width: min(360px, calc(100vw - 16px));
  width: min(360px, calc(100vw - 16px));
  padding-top: max(10px, env(safe-area-inset-top, 0px));
  padding-right: max(10px, env(safe-area-inset-right, 0px));
  padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
  padding-left: max(10px, env(safe-area-inset-left, 0px));
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.canvas-edit-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--primary-text);
  margin-bottom: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.canvas-edit-input {
  width: 100%;
  background: var(--primary-06);
  border: 1px solid var(--primary-15);
  border-radius: 3px;
  color: var(--text-1);
  font-size: 12px;
  padding: 6px 8px;
  outline: none;
  box-sizing: border-box;
  margin-bottom: 8px;
}
[data-theme="light"] .canvas-edit-input {
  background: rgba(0, 0, 0, 0.03);
  border-color: var(--border);
}
.canvas-edit-input:focus {
  border-color: var(--primary);
  background: var(--primary-04);
}
.canvas-edit-row {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.canvas-edit-btn {
  padding: 5px 12px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  border: 1px solid var(--primary-20);
  transition: background 0.1s;
}
.canvas-edit-btn--confirm {
  background: var(--primary);
  color: var(--color-white);
  border-color: var(--primary);
}
.canvas-edit-btn--confirm:hover {
  filter: brightness(1.1);
}
.canvas-edit-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
}
.canvas-edit-btn--confirm:disabled:hover {
  filter: none;
}
.canvas-edit-btn--cancel {
  background: none;
  color: var(--text-2);
}
.canvas-edit-btn--cancel:hover {
  background: var(--surface-hover);
}

.canvas-edit-subhead {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  margin: 2px 0 6px;
}
.canvas-edit-tag-empty {
  font-size: 11px;
  color: var(--text-3);
  font-style: italic;
  line-height: 1.4;
  padding: 2px 0 6px;
  width: 100%;
}

/* ================================================================
   Real-time cursor sharing
   ================================================================ */
.remote-cursor {
  pointer-events: none;
  user-select: none;
  transform: translate(-2px, -2px);
  /* Smooth Figma-like interpolation between position updates */
  transition: left 0.12s cubic-bezier(0.22, 1, 0.36, 1),
              top  0.12s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: left, top;
}
.remote-cursor-name {
  display: inline-block;
  margin-top: 2px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  color: var(--color-white);
  white-space: nowrap;
  letter-spacing: 0.05em;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* ================================================================
   Canvas comments
   ================================================================ */
.canvas-comment {
  position: absolute;
  z-index: 160;
  cursor: pointer;
  user-select: none;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(224, 79, 104, 0.92);
  border: 2px solid rgba(255, 255, 255, 0.4);
  font-size: 12px;
  font-weight: 700;
  color: var(--color-white);
  transition: transform 0.12s;
}
.canvas-comment:hover {
  transform: translate(-50%, -50%) scale(1.15);
}
.canvas-comment.is-unread::after {
  content: '!';
  position: absolute;
  top: -5px;
  right: -5px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-white);
  color: rgba(224, 79, 104, 0.95);
  font-size: 9px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(224, 79, 104, 0.5);
}
.canvas-comment.is-selected {
  box-shadow: 0 0 0 3px rgba(224, 79, 104, 0.55), 0 0 0 5px rgba(224, 79, 104, 0.18);
  border-color: rgba(255, 255, 255, 0.85);
}
/* Comment popup header/text — rendered inside .checkpoint-ctx-menu */
.ctx-menu-comment-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 4px;
}
.ctx-menu-comment-author {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-1);
  flex: 1;
}
.ctx-menu-comment-time {
  font-size: 10px;
  color: var(--text-3);
}
.ctx-menu-comment-text {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  padding: 0 10px 8px;
  max-width: 240px;
}

/* ── Comment items — game-style feed entries ───────────────────── */
.comment-list-item {
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 10px;
  background: var(--primary-04);
  border: 1px solid var(--primary-dim);
  border-left: 2px solid var(--teal);
  border-radius: 2px;
  cursor: pointer;
  margin-top: 4px;
  transition: background 0.12s, border-color 0.12s;
}
[data-theme="light"] .comment-list-item {
  background: rgba(0, 0, 0, 0.02);
  border-color: var(--border-dim);
  border-left-color: var(--teal);
}
.comment-list-item:hover {
  background: var(--primary-06);
}
.comment-list-item-icon {
  flex-shrink: 0;
  color: var(--teal);
  margin-top: 2px;
}
.comment-list-item-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.comment-list-item-author {
  font-size: 10px;
  font-weight: 700;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.comment-list-item-text {
  font-size: 12px;
  color: var(--text-1);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.comment-list-item-time {
  font-size: 9px;
  color: var(--text-4);
  font-variant-numeric: tabular-nums;
}
/* ── Stream Chat Overlay — in-game scrolling chat log ──────────── */
.stream-chat-overlay {
  position: fixed;
  bottom: 80px;
  left: 16px;
  z-index: 130;
  display: flex;
  flex-direction: column;
  gap: 1px;
  pointer-events: none;
  user-select: none;
  max-width: 340px;
}

.stream-chat-msg {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 2px 0;
  background: none;
  border: none;
  border-radius: 0;
  animation: stream-msg-in 0.15s ease both;
  opacity: 1;
  transition: opacity 0.5s ease;
  /* text shadow for readability over any background */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

.stream-chat-msg.is-leaving {
  opacity: 0;
}

@keyframes stream-msg-in {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: translateY(0); }
}

.stream-chat-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary-text);
  white-space: nowrap;
  flex-shrink: 0;
}

.stream-chat-name::after {
  content: ":";
  color: var(--text-3);
}

.stream-chat-text {
  font-size: 12px;
  color: var(--text-1);
  line-height: 1.35;
  word-break: break-word;
}

.stream-chat-text.is-error   { color: var(--danger); }
.stream-chat-text.is-success { color: var(--success); }

[data-theme="light"] .stream-chat-msg {
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.15));
}
[data-theme="light"] .stream-chat-name {
  color: var(--primary-text);
}
[data-theme="light"] .stream-chat-text {
  color: var(--text-1);
}
[data-theme="light"] .stream-chat-text.is-error   { color: var(--danger); }
[data-theme="light"] .stream-chat-text.is-success { color: var(--success); }

/* ================================================================
   Drawing Canvas Overlay
   ================================================================ */

.draw-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  box-sizing: border-box;
  width: 100%;
  min-height: 100%;
  min-height: -webkit-fill-available;
  min-height: 100dvh;
  background: var(--bg-base);
  animation: draw-in 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Canvas fills the overlay; toolbar floats over the bottom (same inset as .toolbar-dock) */
.draw-overlay .draw-workspace {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.draw-overlay-toolbar-dock {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  right: auto;
  bottom: var(--avq-toolbar-b);
  /* Single viewport cap — avoid max-width: % on the inner bar (shrink-to-fit + % created a too-narrow strip) */
  max-width: calc(100vw - 16px);
  width: auto;
  display: flex;
  justify-content: center;
  padding: 0 8px;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 9601;
}
.draw-overlay-toolbar-dock > * {
  pointer-events: all;
}
.draw-overlay-toolbar {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  width: max-content;
  min-width: min-content;
  flex-shrink: 0;
  background: var(--bg-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: var(--toolbar-panel-border);
  border-top: var(--toolbar-panel-top);
  border-radius: var(--toolbar-panel-radius);
  box-shadow: var(--toolbar-panel-shadow);
  box-sizing: border-box;
}
.draw-overlay-toolbar .toolbar-btn {
  flex-shrink: 0;
}
.draw-overlay-toolbar .fd-toolbar-dropdown {
  flex-shrink: 0;
}
.draw-overlay-toolbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 4px;
  padding-left: 6px;
  border-left: 1px solid var(--border-dim);
}
.draw-overlay-toolbar #dv-clear {
  color: var(--danger);
}
.draw-overlay-toolbar #dv-clear:hover:not(:disabled) {
  color: color-mix(in srgb, var(--danger) 85%, var(--color-white));
}
.draw-overlay-toolbar #dv-done {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--color-white);
}
.draw-overlay-toolbar #dv-done:hover:not(:disabled) {
  filter: brightness(1.08);
}
.draw-overlay-toolbar #dv-toolbar-tool-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.draw-overlay-toolbar #dv-toolbar-tool-icon svg {
  width: 17px;
  height: 17px;
  display: block;
}
.draw-overlay-toolbar #dv-toolbar-props-btn svg {
  width: 17px;
  height: 17px;
  display: block;
}

@keyframes draw-in {
  from { opacity: 0; transform: scale(0.985); }
  to   { opacity: 1; transform: scale(1); }
}

/* Top bar (surface + edge from --draw-*; theme in :root / [data-theme=light]) */
.draw-topbar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 18px;
  height: 54px;
  background: var(--draw-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--draw-topbar-edge);
  box-shadow: var(--draw-topbar-sheen);
  flex-shrink: 0;
}

.draw-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: -0.01em;
}

.draw-brand svg { color: var(--primary-text); }

.draw-topbar-spacer { flex: 1; }

.draw-topbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.draw-topbar-sep {
  width: 1px;
  height: 26px;
  background: var(--border-dim);
  margin: 0 3px;
}

/* Icon-only action buttons in the drawing topbar */
.draw-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--draw-icon-border);
  background: transparent;
  border-radius: 3px;
  color: var(--text-2);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s, opacity 0.12s, transform 0.12s;
  flex-shrink: 0;
}

.draw-icon-btn:hover:not(:disabled) {
  background: var(--primary-dim);
  color: var(--text-1);
  border-color: var(--draw-icon-border-h);
}

.draw-icon-btn:disabled { opacity: 0.28; cursor: default; }

/* Must beat .draw-icon-btn:hover:not(:disabled) so Clear keeps danger on hover */
.draw-icon-btn--danger:hover:not(:disabled) {
  background: var(--danger-dim);
  border-color: var(--draw-danger-border);
  color: var(--danger);
}

.draw-icon-btn--done {
  background: var(--primary);
  border-color: transparent;
  color: var(--color-white);
  box-shadow: 0 2px 10px var(--primary-40);
}

.draw-icon-btn--done:hover:not(:disabled) {
  background: var(--primary-h);
  color: var(--color-white);
  box-shadow: 0 3px 16px var(--primary-55);
  transform: translateY(-1px);
}
/* Workspace */
.draw-workspace {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.draw-canvas-area {
  position: absolute;
  inset: 0;
  background: var(--bg-void);
  background-image:
    radial-gradient(circle, var(--dot-color) 1px, transparent 1px);
  background-size: 24px 24px;
}

#dv-canvas,
#dv-preview {
  position: absolute;
  top: 0;
  left: 0;
  touch-action: none;
  display: block;
}

#dv-preview { z-index: 2; }

/* Tool panel */
.draw-tools-panel {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: var(--draw-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--draw-border);
  border-radius: 4px;
  padding: 8px 6px;
  box-shadow: var(--draw-shadow);
  z-index: 10;
}

.draw-tools-sep {
  width: 22px;
  height: 1px;
  background: var(--border-dim);
  margin: 4px 0;
}

.draw-tool-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  border-radius: 3px;
  color: var(--text-3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s;
  position: relative;
}

.draw-tool-btn:hover {
  background: var(--primary-dim);
  color: var(--text-1);
}

.draw-tool-btn.is-active {
  background: var(--primary-mid);
  color: var(--primary-text);
  box-shadow: inset 0 0 0 1px var(--primary-glow);
}

/* Props panel — collapsible */
.draw-props-panel {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  background: var(--draw-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--draw-border);
  border-radius: 4px;
  box-shadow: var(--draw-shadow);
  z-index: 10;
  overflow: hidden;
  transition: width 0.22s cubic-bezier(0.16,1,0.3,1);
}

.draw-props-panel--open {
  width: 192px;
}

/* Toggle button at the top of the props panel */
.dp-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 11px 12px;
  border: none;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  border-radius: 16px;
  transition: color 0.12s;
  white-space: nowrap;
  gap: 6px;
}

.dp-toggle-btn:hover { color: var(--text-1); }

/* Collapsible body */
.dp-body {
  display: none;
  flex-direction: column;
  gap: 14px;
  padding: 0 13px 14px;
  overflow: hidden;
}

.dp-body--open {
  display: flex;
}

.dp-section { display: flex; flex-direction: column; gap: 7px; }

.dp-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-3);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dp-label span {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-2);
  text-transform: none;
  letter-spacing: 0;
}

.dp-color-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
}

.dp-swatch {
  width: 100%;
  aspect-ratio: 1;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: transform 0.1s;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
  position: relative;
  padding: 0;
}

.dp-swatch:hover { transform: scale(1.18); z-index: 1; }

.dp-swatch.is-active::after {
  content: '';
  position: absolute;
  inset: -2.5px;
  border-radius: 7px;
  border: 2px solid var(--color-white);
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
}

.dp-custom-row {
  display: flex;
  align-items: center;
  gap: 7px;
}

.dp-custom-row input[type="color"] {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border-bright);
  border-radius: 7px;
  padding: 2px;
  cursor: pointer;
  background: var(--surface-hover);
  flex-shrink: 0;
}

.dp-custom-label {
  font-size: 11px;
  color: var(--text-3);
}

.dp-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--surface-hover);
  outline: none;
  cursor: pointer;
}

.dp-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
  box-shadow: 0 1px 5px rgba(0,0,0,0.5);
  transition: transform 0.1s;
}

.dp-range::-webkit-slider-thumb:hover { transform: scale(1.25); }
.dp-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--primary);
  border: none;
  cursor: pointer;
}

/* Toggle switch */
.dp-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dp-toggle-wrap {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 19px;
  flex-shrink: 0;
}

.dp-toggle-wrap input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.dp-toggle-track {
  position: absolute;
  inset: 0;
  background: var(--surface-hover);
  border-radius: 10px;
  border: 1px solid var(--border-dim);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.dp-toggle-track::after {
  content: '';
  position: absolute;
  left: 2px;
  top: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--text-3);
  transition: all 0.2s;
}

.dp-toggle-wrap input:checked + .dp-toggle-track {
  background: var(--primary-25);
  border-color: var(--primary-40);
}

.dp-toggle-wrap input:checked + .dp-toggle-track::after {
  transform: translateX(15px);
  background: var(--primary-text);
}

/* Text tool input on canvas */
.draw-text-input {
  position: absolute;
  background: transparent;
  border: none;
  border-bottom: 1.5px dashed var(--primary-70);
  outline: none;
  font-family: Inter, system-ui, sans-serif;
  font-weight: 500;
  min-width: 60px;
  caret-color: var(--primary);
  z-index: 20;
  padding: 2px 0;
  white-space: nowrap;
}

/* Selection bounding box — SVG drawn, cursor feedback via JS */
#dv-area svg [stroke="#6c6fee"],
#freedraw-select-svg [stroke="#6c6fee"] {
  /* Handles are rendered in SVG; no extra CSS needed */
}

/* Eraser cursor: show a circle proportional to brush size */
#editor-canvas.is-freedraw.is-erasing {
  cursor: none;
}

/* ================================================================
   Free-draw mode — no blocking overlay. Tool & props live in
   #toolbar-freedraw-actions dropdowns. z-indexes stay below
   block-editor popups (3900+) so everything remains interactable.
   ================================================================ */

/* Cursor hint while free-draw is active */
#editor-canvas.is-freedraw { cursor: crosshair; }

/* ================================================================
   Live Streaming
   ================================================================ */

/* Pulsing animation shared by all live indicators */
@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 59, 92, 0.65); }
  50%       { box-shadow: 0 0 0 5px rgba(255, 59, 92, 0); }
}
@keyframes live-pulse-soft {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; }
}

/* Live dot on remote cursor SVG */
.remote-cursor-wrap {
  position: relative;
  display: inline-block;
}
.remote-cursor-live-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 9px;
  height: 9px;
  background: #ff3b5c;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 0, 0, 0.55);
  animation: live-pulse 1.6s ease-in-out infinite;
  pointer-events: none;
}

/* Live offscreen edge indicator */
.remote-cursor-edge.is-live {
  border-color: #ff3b5c !important;
  box-shadow: 0 0 0 3px rgba(255, 59, 92, 0.28), 0 2px 8px rgba(0,0,0,0.45);
}
.remote-cursor-edge.is-live svg circle {
  fill: #ff3b5c !important;
}

/* ── Action trail SVG ───────────────────────────────────────────── */
.action-trail-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 5;
}

.trail-sparkle {
  animation: trail-twinkle 1.8s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes trail-twinkle {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  40%       { opacity: 0.2;  transform: scale(0.5); }
  70%       { opacity: 1;    transform: scale(1.3); }
}

/* ── Live stream banner (streamer + viewer) ─────────────────────── */
.live-stream-banner {
  position: fixed;
  bottom: var(--avq-floating-above-toolbar);
  left: 50%;
  transform: translateX(-50%);
  z-index: 140;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, visibility 0.18s ease;
}
.live-stream-banner.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.live-stream-banner__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: rgba(12, 10, 24, 0.92);
  border: 1px solid rgba(255, 59, 92, 0.2);
  border-left: 3px solid #ff3b5c;
  border-radius: 3px;
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  gap: 12px;
}
[data-theme="light"] .live-stream-banner__inner {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Red LIVE badge */
.live-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #ff3b5c;
  text-transform: uppercase;
  flex-shrink: 0;
}
.live-badge-dot {
  width: 7px;
  height: 7px;
  background: #ff3b5c;
  border-radius: 50%;
  animation: live-pulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}

/* Text inside banner */
.live-banner-hint {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  flex: 1;
  min-width: 0;
}
.live-banner-hint strong {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600;
}

/* Watcher count */
.live-watcher-count {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  flex-shrink: 0;
}
.live-watcher-count svg {
  flex-shrink: 0;
}

/* Separator inside banner */
.live-banner-sep {
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}

/* Reaction buttons in viewer banner */
.live-reactions {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}
.live-reaction-btn {
  background: rgba(255, 59, 92, 0.08);
  border: 1px solid rgba(255, 59, 92, 0.15);
  border-radius: 3px;
  cursor: pointer;
  font-size: 15px;
  padding: 3px 7px;
  line-height: 1;
  transition: background 0.1s, transform 0.12s;
  color: inherit;
}
.live-reaction-btn:hover {
  background: rgba(255, 59, 92, 0.18);
  border-color: rgba(255, 59, 92, 0.3);
  transform: scale(1.18) translateY(-1px);
}
.live-reaction-btn:active {
  transform: scale(0.95);
}

/* Action buttons */
.live-end-btn {
  padding: 5px 13px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 3px;
  cursor: pointer;
  border: 1px solid rgba(255, 59, 92, 0.4);
  background: rgba(255, 59, 92, 0.15);
  color: #ff7a8f;
  transition: background 0.12s, filter 0.12s;
  flex-shrink: 0;
  font-family: inherit;
}
.live-end-btn:hover {
  background: rgba(255, 59, 92, 0.3);
  filter: brightness(1.08);
}
.live-leave-btn {
  padding: 5px 13px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 3px;
  cursor: pointer;
  border: 1px solid var(--primary-20);
  background: var(--primary-06);
  color: rgba(255, 255, 255, 0.8);
  transition: background 0.12s;
  flex-shrink: 0;
  font-family: inherit;
}
.live-leave-btn:hover {
  background: var(--primary-12);
}

/* ── Watchers side panel (streamer view) ────────────────────────── */
.live-watchers-panel {
  position: fixed;
  top: 72px;
  right: 14px;
  z-index: 130;
  background: rgba(12, 10, 24, 0.92);
  border: 1px solid rgba(255, 59, 92, 0.15);
  border-left: 3px solid #ff3b5c;
  border-radius: 3px;
  backdrop-filter: blur(14px);
  padding: 10px 13px;
  min-width: 154px;
  max-width: 210px;
  display: none;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}
.live-watchers-panel.is-visible {
  display: block;
}
.live-watchers-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 59, 92, 0.85);
  margin-bottom: 7px;
}
.live-watchers-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.live-watcher-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.82);
}
.live-watcher-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  animation: live-pulse-soft 2s ease-in-out infinite;
}
.live-watchers-empty {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  font-style: italic;
}

/* ── Live invite card — game-style urgent alert ────────────────── */
.live-invite-card {
  align-self: center;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: rgba(255, 59, 92, 0.06);
  border: 1px solid rgba(255, 59, 92, 0.12);
  border-left: 3px solid #ff3b5c;
  border-radius: 2px;
  padding: 10px 12px;
  margin-top: 6px;
  max-width: 95%;
}
[data-theme="light"] .live-invite-card {
  background: rgba(255, 59, 92, 0.04);
  border-color: rgba(255, 59, 92, 0.15);
  border-left-color: #ff3b5c;
}
.live-invite-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ff3b5c;
  background: rgba(255, 59, 92, 0.12);
  padding: 2px 6px;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  vertical-align: middle;
}
.live-invite-badge-dot {
  width: 5px;
  height: 5px;
  background: #ff3b5c;
  border-radius: 50%;
  animation: live-pulse-soft 1.6s ease-in-out infinite;
}
.live-invite-avatar {
  width: 26px;
  height: 26px;
  border-radius: 3px;
  object-fit: cover;
  flex-shrink: 0;
}
.live-invite-avatar-fallback {
  width: 26px;
  height: 26px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--color-white);
  flex-shrink: 0;
}
.live-invite-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.live-invite-text {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.4;
}
.live-invite-text strong {
  color: var(--text-1);
  font-weight: 700;
}
.live-invite-space-name {
  color: var(--primary-text);
  font-weight: 700;
}
.live-invite-time {
  font-size: 9px;
  color: var(--text-4);
  font-variant-numeric: tabular-nums;
}
.live-invite-actions {
  display: flex;
  gap: 6px;
  width: 100%;
  margin-top: 4px;
}
.live-watch-btn {
  padding: 5px 14px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 3px;
  cursor: pointer;
  border: none;
  background: #ff3b5c;
  color: var(--color-white);
  transition: opacity 0.12s;
  font-family: inherit;
}
.live-watch-btn:hover {
  opacity: 0.85;
}
.live-decline-btn {
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 3px;
  cursor: pointer;
  border: 1px solid var(--border-bright);
  background: transparent;
  color: var(--text-3);
  transition: background 0.12s, color 0.12s;
  font-family: inherit;
}
.live-decline-btn:hover {
  background: var(--surface-hover);
  color: var(--text-2);
}
.live-invite-expired {
  font-size: 10px;
  color: var(--text-4);
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ── Floating reaction emojis ───────────────────────────────────── */
@keyframes reaction-float {
  0%   { transform: translateY(0)    scale(1);    opacity: 1; }
  20%  { transform: translateY(-20px) scale(1.2); opacity: 1; }
  80%  { opacity: 0.7; }
  100% { transform: translateY(-130px) scale(1.35); opacity: 0; }
}
.live-reaction-float {
  position: fixed;
  bottom: 145px;
  font-size: 30px;
  pointer-events: none;
  user-select: none;
  z-index: 165;
  animation: reaction-float 2.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
}

/* ── Go-Live countdown overlay ──────────────────────────────────── */
@keyframes countdown-pop {
  0%   { transform: translate(-50%, -50%) scale(0.6); opacity: 0; }
  20%  { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
  70%  { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
}
.live-countdown-overlay {
  position: fixed;
  inset: 0;
  z-index: 180;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.live-countdown-num {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 96px;
  font-weight: 900;
  color: #ff3b5c;
  text-shadow: 0 0 40px rgba(255, 59, 92, 0.6), 0 4px 16px rgba(0,0,0,0.7);
  animation: countdown-pop 0.9s ease forwards;
}

/* ── Context-menu live item ─────────────────────────────────────── */
.ctx-menu-item--live {
  color: #ff7a8f;
}
.ctx-menu-item--live:hover {
  background: rgba(255, 59, 92, 0.12);
  border-left-color: #ff3b5c;
  color: #ffaab8;
}

/* ── Live alert toast (floats up from bottom-right when someone goes live) ── */
.live-alert-toast {
  position: fixed;
  bottom: 85px;
  right: 18px;
  z-index: 145;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translateY(12px);
}
.live-alert-toast.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.live-alert-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(12, 10, 24, 0.92);
  border: 1px solid rgba(255, 59, 92, 0.2);
  border-left: 3px solid #ff3b5c;
  border-radius: 3px;
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  max-width: 340px;
}
[data-theme="light"] .live-alert-inner {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.live-alert-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #ff3b5c;
  text-transform: uppercase;
  flex-shrink: 0;
}
.live-alert-text {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.8);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.live-alert-text strong {
  color: var(--color-white);
  font-weight: 600;
}
.live-alert-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.live-alert-dismiss {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  font-size: 13px;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color 0.1s;
  font-family: inherit;
  line-height: 1;
}
.live-alert-dismiss:hover {
  color: rgba(255, 255, 255, 0.7);
}

/* ================================================================
   Checklist block — Trello-like canvas preview & popup editor
   Supports drag-and-drop reordering, color tags, cross-block moves
   ================================================================ */

/* ── Canvas preview — Trello-style cards ────────────────────────── */
/* Single band: .bc-cl-progress (gradient) wraps optional description + label/bar row. */
.bc-cl-progress {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  padding: 8px 12px 6px;
  flex-shrink: 0;
  box-sizing: border-box;
}
.bc-cl-progress--with-desc {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.bc-cl-progress--with-desc > .bc-block-header-desc {
  width: 100%;
  margin: 0;
  padding: 0 0 1px 0;
  box-sizing: border-box;
  align-self: stretch;
  text-align: start;
}
.bc-cl-progress-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  width: 100%;
  flex: 1;
  box-sizing: border-box;
  align-self: stretch;
  text-align: start;
}
.bc-cl-progress-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-3);
  white-space: nowrap;
  flex-shrink: 0;
  text-transform: uppercase;
  text-align: start;
  margin-inline: 0;
  align-self: center;
}
.bc-cl-progress-bar {
  flex: 1;
  height: 3px;
  background: var(--border-dim);
  border-radius: 99px;
  overflow: hidden;
}
.bc-cl-progress-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 99px;
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.bc-cl-progress-fill.is-complete {
  background: var(--success);
}
/* Inset “tray” on canvas only — .block is the on-map block shell (popup uses .block-editor-body, not .block) */
.bc-cl-list {
  flex: 1;
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Inset from block edges (ports) + inner air around list items (well padding, not the block itself). */
.block .bc-cl-list {
  margin: 0 8px 8px;
  padding: 10px;
  gap: 4px;
  background: none;
  border: none;
  border-radius: 0;
  isolation: isolate;
}
/* Block hover tips: one flat well — see wrapper below */
.const-tip__block-preview .bc-cl-list {
  margin: 0;
  padding: 6px 8px 8px;
  gap: 4px;
  background: transparent;
  border: none;
  border-radius: 0;
  isolation: isolate;
}
/* Checklist in tips: no extra well behind content (tip popover is the only surface) */
.const-tip__block-preview:has(.bc-cl-list) .block-content--for-hover-tip {
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
}
.const-tip__block-preview:has(.bc-cl-list) .bc-cl-progress {
  background: transparent;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--primary-10);
}
/* Empty checklist on canvas: same drop zone as populated lists; min size for hit-testing */
.bc-cl-list--empty,
.bc-canvas-tray--empty {
  min-height: 48px;
  justify-content: center;
}
.bc-cl-list.bc-cl-drop-active {
  outline: 2px dashed var(--primary);
  outline-offset: -2px;
  border-radius: var(--r-sm);
}
.block .bc-cl-list.bc-cl-drop-active,
.const-tip__block-preview .bc-cl-list.bc-cl-drop-active {
  border-radius: 8px;
}
/* In the tray, cards match popup .bc-cl-editor-row (left primary, flat — no top stripe) */
.block .bc-cl-list .bc-cl-card-stripe,
.const-tip__block-preview .bc-cl-list .bc-cl-card-stripe {
  display: none;
}
.block .bc-cl-list .bc-cl-card,
.const-tip__block-preview .bc-cl-list .bc-cl-card {
  flex-direction: row;
  align-items: center;
  min-height: 36px;
  padding: 0;
  overflow: visible;
  border: none;
  border-left: 3px solid transparent;
  border-radius: var(--r);
  background: var(--cl-item-surface);
  --cl-item-outline: color-mix(in srgb, var(--cl-item-color, var(--primary)) 18%, var(--border-dim));
  --cl-item-outline-hover: color-mix(in srgb, var(--cl-item-color, var(--primary)) 28%, var(--border-bright));
  transform: none;
  transition: background 0.15s, opacity 0.15s;
}
.block .bc-cl-list .bc-cl-card[style*="--cl-item-color"],
.const-tip__block-preview .bc-cl-list .bc-cl-card[style*="--cl-item-color"] {
  border-left-color: var(--cl-item-color);
  background: var(--cl-item-surface);
}
.block .bc-cl-list .bc-cl-card:hover,
.const-tip__block-preview .bc-cl-list .bc-cl-card:hover {
  background: var(--cl-item-surface-hover);
  transform: none;
  z-index: 1;
}
.block .bc-cl-list .bc-cl-card[style*="--cl-item-color"]:hover,
.const-tip__block-preview .bc-cl-list .bc-cl-card[style*="--cl-item-color"]:hover {
  background: color-mix(in srgb, var(--cl-item-color) 14%, var(--cl-item-surface-hover));
}
.block .bc-cl-list .bc-cl-card-body,
.const-tip__block-preview .bc-cl-list .bc-cl-card-body {
  padding: 3px 7px 3px 4px;
  min-height: 36px;
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
}
.block .bc-cl-list .bc-cl-card:active,
.const-tip__block-preview .bc-cl-list .bc-cl-card:active {
  transform: none;
  cursor: grabbing;
}
/* Checked: one step dimmer (opaque only), strikethrough on label */
.block .bc-cl-list .bc-cl-card.is-checked,
.const-tip__block-preview .bc-cl-list .bc-cl-card.is-checked {
  opacity: 1;
  background: color-mix(in srgb, var(--cl-item-surface) 58%, var(--color-black) 42%);
  border: none;
  border-left: 3px solid transparent;
}
.block .bc-cl-list .bc-cl-card.is-checked[style*="--cl-item-color"],
.const-tip__block-preview .bc-cl-list .bc-cl-card.is-checked[style*="--cl-item-color"] {
  background: color-mix(in srgb, var(--cl-item-surface) 58%, var(--color-black) 42%);
  border-left-color: var(--cl-item-color);
}
.block .bc-cl-list .bc-cl-card.is-checked:hover,
.const-tip__block-preview .bc-cl-list .bc-cl-card.is-checked:hover {
  background: color-mix(in srgb, var(--cl-item-surface-hover) 50%, var(--color-black) 50%);
  border: none;
  border-left: 3px solid transparent;
  border-radius: var(--r);
  transform: none;
}
.block .bc-cl-list .bc-cl-card.is-checked[style*="--cl-item-color"]:hover,
.const-tip__block-preview .bc-cl-list .bc-cl-card.is-checked[style*="--cl-item-color"]:hover {
  border-left: 3px solid var(--cl-item-color);
  background: color-mix(
    in srgb,
    var(--cl-item-color) 10%,
    color-mix(in srgb, var(--cl-item-surface-hover) 50%, var(--color-black) 50%)
  );
}

/* Canvas checklist when edits are disabled — no grab row / checkbox hover affordance */
.block .bc-cl-list.bc-cl-readonly .bc-cl-card {
  cursor: default;
}
.block .bc-cl-list.bc-cl-readonly .bc-cl-card:hover,
.block .bc-cl-list.bc-cl-readonly .bc-cl-card[style*="--cl-item-color"]:hover {
  background: var(--cl-item-surface);
  transform: none;
  z-index: auto;
}
.block .bc-cl-list.bc-cl-readonly .bc-cl-card:active {
  cursor: default;
}
.block .bc-cl-list.bc-cl-readonly .bc-cl-card.is-checked:hover,
.block .bc-cl-list.bc-cl-readonly .bc-cl-card.is-checked[style*="--cl-item-color"]:hover {
  background: color-mix(in srgb, var(--cl-item-surface) 58%, var(--color-black) 42%);
  border-left-color: var(--cl-item-color);
}
.block .bc-cl-list.bc-cl-readonly .bc-cl-checkbox {
  cursor: default;
}
.block .bc-cl-list.bc-cl-readonly .bc-cl-checkbox:hover {
  transform: none;
  color: color-mix(in srgb, var(--primary) 32%, var(--text-2));
}
.block .bc-cl-list.bc-cl-readonly .bc-cl-card[style*="--cl-item-color"] .bc-cl-checkbox:hover {
  color: color-mix(in srgb, var(--cl-item-color) 80%, var(--text-2));
}
.block .bc-cl-list.bc-cl-readonly .bc-cl-card.is-checked .bc-cl-checkbox:hover {
  color: var(--primary);
}
.block .bc-cl-list.bc-cl-readonly .bc-cl-card.is-checked[style*="--cl-item-color"] .bc-cl-checkbox:hover {
  color: var(--cl-item-color);
}
[data-theme="light"] .block .bc-cl-list.bc-cl-readonly .bc-cl-checkbox:hover {
  color: color-mix(in srgb, var(--primary) 26%, var(--text-2));
}
[data-theme="light"] .block .bc-cl-list.bc-cl-readonly .bc-cl-card[style*="--cl-item-color"] .bc-cl-checkbox:hover {
  color: color-mix(in srgb, var(--cl-item-color) 70%, var(--text-2));
}

/* Floating previews (tab/pill, constellation dot / actions bar): tip-scale checklist — not full canvas tray */
.const-tip__block-preview .bc-cl-list {
  gap: 2px;
  padding: 4px 6px 6px;
}
.const-tip__block-preview .bc-cl-list .bc-cl-card,
.const-tip__block-preview .bc-cl-list .bc-cl-card-body {
  min-height: 0;
}
.const-tip__block-preview .bc-cl-list .bc-cl-card-body {
  padding: 2px 6px 2px 3px;
}
.const-tip__block-preview .bc-cl-checkbox {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.const-tip__block-preview .bc-cl-checkbox:hover {
  transform: none;
}
.const-tip__block-preview .bc-cl-checkbox svg {
  width: 14px;
  height: 14px;
}
.const-tip__block-preview .bc-cl-text {
  font-size: 10px;
  line-height: 1.35;
}
.const-tip__block-preview .bc-cl-progress {
  padding: 5px 8px 4px;
}

/* Card item — flat (checklist editor / tray) */
.bc-cl-card {
  display: flex;
  flex-direction: column;
  min-height: 38px;
  background: var(--bg-2);
  border: none;
  border-left: 3px solid transparent;
  border-radius: var(--r);
  overflow: hidden;
  cursor: grab;
  pointer-events: auto;
  flex-shrink: 0;
  transition: opacity 0.2s, background 0.15s, border-color 0.15s;
}
.bc-cl-card:hover {
  background: var(--surface-hover);
  border-left-color: color-mix(in srgb, var(--cl-item-color, var(--primary)) 28%, var(--border-bright));
  transform: none;
  z-index: 1;
}
[data-theme="light"] .bc-cl-card {
  background: var(--bg-block);
  border-left-color: color-mix(in srgb, var(--cl-item-color, var(--primary)) 28%, var(--border-dim));
}
[data-theme="light"] .bc-cl-card:hover {
  border-left-color: color-mix(in srgb, var(--cl-item-color, var(--primary)) 42%, var(--border));
}
[data-theme="light"] .bc-cl-card.is-checked:hover {
  background: var(--cl-item-surface-checked-hover);
  border-left-color: color-mix(in srgb, var(--cl-item-color, var(--primary)) 42%, var(--border));
  transform: none;
}
.bc-cl-card.is-checked:hover {
  background: color-mix(in srgb, var(--bg-2) 82%, var(--color-black) 18%);
  border-left-color: color-mix(in srgb, var(--cl-item-color, var(--primary)) 28%, var(--border-bright));
  transform: none;
}
.bc-cl-card:active {
  cursor: grabbing;
  transform: none;
  border-left-color: color-mix(in srgb, var(--cl-item-color, var(--primary)) 28%, var(--border-bright));
}
.bc-cl-card.is-dragging {
  opacity: 0.3;
}
/* .bc-cl-card.is-checked sets opacity:1 below; without this, the tray "slot" stays
   fully opaque while dragging a checked item (unlike .bc-gallery-cell.is-dragging). */
.bc-cl-card.is-checked.is-dragging {
  opacity: 0.3;
}
/* Canvas tray: match .bc-cl-editor-row.is-dragging (popup) */
.block .bc-cl-list .bc-cl-card.is-dragging,
.block .bc-cl-list .bc-cl-card.is-checked.is-dragging,
.const-tip__block-preview .bc-cl-list .bc-cl-card.is-dragging,
.const-tip__block-preview .bc-cl-list .bc-cl-card.is-checked.is-dragging {
  opacity: 0.25;
  background: var(--primary-dim);
  border: none;
  border-left: 3px solid transparent;
  transform: none;
}
.bc-cl-card.is-checked.is-dragging .bc-cl-text {
  text-decoration: none;
  color: var(--text-2);
}
.bc-cl-card.is-checked.is-dragging .bc-cl-checkbox {
  color: var(--text-3);
}
.bc-cl-card.is-checked {
  opacity: 1;
  background: color-mix(in srgb, var(--bg-2) 78%, var(--color-black) 22%);
  border-left-color: color-mix(in srgb, var(--cl-item-color, var(--primary)) 18%, var(--border-dim));
}
[data-theme="light"] .bc-cl-card.is-checked {
  opacity: 1;
  background: var(--cl-item-surface-checked);
  border-left-color: color-mix(in srgb, var(--cl-item-color, var(--primary)) 28%, var(--border-dim));
}
[data-theme="light"] .bc-cl-card.is-checked.is-dragging {
  opacity: 0.3;
}
[data-theme="light"] .block .bc-cl-list .bc-cl-card.is-dragging,
[data-theme="light"] .block .bc-cl-list .bc-cl-card.is-checked.is-dragging,
[data-theme="light"] .const-tip__block-preview .bc-cl-list .bc-cl-card.is-dragging,
[data-theme="light"] .const-tip__block-preview .bc-cl-list .bc-cl-card.is-checked.is-dragging {
  opacity: 0.25;
}
/* Light-theme tray rows — outline mixes match --cl-item-* ratios; tint follows each row’s --cl-item-color */
[data-theme="light"] .block .bc-cl-list .bc-cl-card,
[data-theme="light"] .const-tip__block-preview .bc-cl-list .bc-cl-card {
  background: var(--cl-item-surface);
  --cl-item-outline: color-mix(in srgb, var(--cl-item-color, var(--primary)) 28%, var(--border-dim));
  --cl-item-outline-hover: color-mix(in srgb, var(--cl-item-color, var(--primary)) 42%, var(--border));
}
[data-theme="light"] .block .bc-cl-list .bc-cl-card[style*="--cl-item-color"],
[data-theme="light"] .const-tip__block-preview .bc-cl-list .bc-cl-card[style*="--cl-item-color"] {
  background: var(--cl-item-surface);
}
[data-theme="light"] .block .bc-cl-list .bc-cl-card:hover,
[data-theme="light"] .const-tip__block-preview .bc-cl-list .bc-cl-card:hover {
  background: var(--cl-item-surface-hover);
}
[data-theme="light"] .block .bc-cl-list .bc-cl-card[style*="--cl-item-color"]:hover,
[data-theme="light"] .const-tip__block-preview .bc-cl-list .bc-cl-card[style*="--cl-item-color"]:hover {
  background: color-mix(in srgb, var(--cl-item-color) 22%, var(--cl-item-surface-hover));
}
[data-theme="light"] .block .bc-cl-list .bc-cl-card.is-checked,
[data-theme="light"] .const-tip__block-preview .bc-cl-list .bc-cl-card.is-checked {
  background: var(--cl-item-surface-checked);
}
[data-theme="light"] .block .bc-cl-list .bc-cl-card.is-checked[style*="--cl-item-color"],
[data-theme="light"] .const-tip__block-preview .bc-cl-list .bc-cl-card.is-checked[style*="--cl-item-color"] {
  background: var(--cl-item-surface-checked);
}
[data-theme="light"] .block .bc-cl-list .bc-cl-card.is-checked:hover,
[data-theme="light"] .const-tip__block-preview .bc-cl-list .bc-cl-card.is-checked:hover {
  background: var(--cl-item-surface-checked-hover);
}
[data-theme="light"] .block .bc-cl-list .bc-cl-card.is-checked[style*="--cl-item-color"]:hover,
[data-theme="light"] .const-tip__block-preview .bc-cl-list .bc-cl-card.is-checked[style*="--cl-item-color"]:hover {
  background: color-mix(in srgb, var(--cl-item-color) 18%, var(--cl-item-surface-checked-hover));
}

/* Color stripe at top of card */
.bc-cl-card-stripe {
  height: 5px;
  background: var(--cl-item-color);
  border-radius: var(--r) var(--r) 0 0;
}

/* Card body: checkbox + text */
.bc-cl-card-body {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 10px 3px 6px;
  min-height: 0;
  flex: 1;
  box-sizing: border-box;
}
.bc-cl-checkbox {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  pointer-events: auto;
  /* Unchecked: readable on row bg — not washed-out --text-3 */
  color: color-mix(in srgb, var(--primary) 32%, var(--text-2));
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, transform 0.12s;
  border-radius: 0;
}
.bc-cl-checkbox:hover {
  color: var(--primary);
  transform: scale(1.06);
}
.bc-cl-card.is-checked .bc-cl-checkbox {
  color: var(--primary);
}
/* Colored item (canvas): checkbox follows tag */
.bc-cl-card[style*="--cl-item-color"] .bc-cl-checkbox {
  color: color-mix(in srgb, var(--cl-item-color) 80%, var(--text-2));
}
.bc-cl-card[style*="--cl-item-color"] .bc-cl-checkbox:hover {
  color: var(--cl-item-color);
}
.bc-cl-card.is-checked[style*="--cl-item-color"] .bc-cl-checkbox {
  color: var(--cl-item-color);
}
.bc-cl-checkbox svg {
  width: 20px;
  height: 20px;
  display: block;
  border-radius: 0;
}
.bc-cl-text {
  font-size: 12.5px;
  color: var(--text-1);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  transition: color 0.2s, text-decoration-color 0.2s;
}
.bc-cl-card.is-checked .bc-cl-text {
  text-decoration: line-through;
  text-decoration-color: var(--text-3);
  color: var(--text-3);
}

/* Floating ghost — same language as .bc-cl-editor-drag-ghost + tray row (left primary) */
.bc-cl-card.bc-cl-drag-ghost {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  min-height: 36px !important;
  padding: 0 !important;
  background: color-mix(in srgb, var(--bg-elevated) 78%, transparent) !important;
  border: none !important;
  border-left: 3px solid var(--cl-item-color, transparent) !important;
  border-radius: var(--r);
  color: var(--text-1);
  opacity: 0.72 !important;
  transform: scale(0.66) rotate(1.5deg);
  transform-origin: center center;
  filter: none;
  overflow: hidden;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.bc-cl-card.bc-cl-drag-ghost .bc-cl-card-stripe {
  display: none !important;
}
.bc-cl-card.bc-cl-drag-ghost .bc-cl-text {
  color: var(--text-1) !important;
  text-decoration: none !important;
}
.bc-cl-card.bc-cl-drag-ghost .bc-cl-checkbox {
  color: var(--text-3) !important;
}
.bc-cl-card.bc-cl-drag-ghost[style*="--cl-item-color"] .bc-cl-checkbox {
  color: color-mix(in srgb, var(--cl-item-color) 88%, var(--text-2)) !important;
}
.bc-cl-drag-ghost .bc-cl-card-stripe,
.bc-cl-drag-ghost .bc-cl-card-body {
  background: transparent;
}

/* Drop indicator line (rendered with bc-cl-drop-indicator--fixed on body; avoids overflow clipping) */
.bc-cl-drop-indicator {
  height: 2px;
  background: var(--primary);
  border-radius: 2px;
  margin: 1px 0;
  pointer-events: none;
  animation: clDropPulse 1s ease-in-out infinite;
}
.bc-cl-drop-indicator--fixed {
  position: fixed;
  right: auto;
  margin: 0;
  z-index: 999999;
  box-shadow: 0 0 6px color-mix(in srgb, var(--primary) 45%, transparent);
}
@keyframes clDropPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ── Popup editor ───────────────────────────────────────────────── */
.block-content--checklist {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  pointer-events: auto;
}
.bc-cl-editor-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 10px 18px 10px;
  border-bottom: 1px solid var(--border-dim);
  min-height: 36px;
  flex-shrink: 0;
  background: transparent;
  border-radius: 0;
  box-sizing: border-box;
  text-align: start;
}
.bc-cl-editor-header:empty {
  display: none;
}
.bc-cl-editor-header .bc-block-header-title {
  font-size: 12.5px;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
.bc-cl-editor-header .bc-block-header-desc {
  font-size: 12px;
  line-height: 1.4;
  padding: 0;
  max-height: 5em;
  overflow-y: auto;
  width: 100%;
  align-self: stretch;
  text-align: start;
  box-sizing: border-box;
}
.bc-cl-editor-header-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-height: 0;
  width: 100%;
  flex-shrink: 0;
  align-self: stretch;
  text-align: start;
}
.bc-cl-editor-progress-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
  flex-shrink: 0;
  text-align: start;
  margin-inline: 0;
  align-self: center;
}
.bc-cl-editor-progress-bar {
  flex: 1;
  height: 4px;
  background: var(--border-dim);
  border-radius: 99px;
  overflow: hidden;
}
.bc-cl-editor-progress-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 99px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s;
}
.bc-cl-editor-progress-fill.is-complete {
  background: var(--success);
}
/* Popup list: flat—tray look is canvas-only (see .block .bc-cl-list) */
.bc-cl-editor-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 40px;
  transition: outline-color 0.15s;
}
.bc-cl-editor-list.bc-cl-drop-active {
  outline: 2px dashed var(--primary);
  outline-offset: -2px;
  border-radius: var(--r-sm);
}
.bc-cl-editor-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 7px 3px 4px;
  min-height: 36px;
  box-sizing: border-box;
  border-radius: var(--r);
  transition: background 0.15s, opacity 0.15s;
  border-left: 3px solid transparent;
  background: var(--cl-item-surface);
  --cl-item-outline: color-mix(in srgb, var(--cl-item-color, var(--primary)) 18%, var(--border-dim));
  --cl-item-outline-hover: color-mix(in srgb, var(--cl-item-color, var(--primary)) 28%, var(--border-bright));
}
.bc-cl-editor-row.is-checked {
  background: color-mix(in srgb, var(--cl-item-surface) 58%, var(--color-black) 42%);
}
.bc-cl-editor-row[style*="--cl-item-color"] {
  border-left-color: var(--cl-item-color);
  background: var(--cl-item-surface);
}
.bc-cl-editor-row.is-checked[style*="--cl-item-color"] {
  background: color-mix(in srgb, var(--cl-item-surface) 58%, var(--color-black) 42%);
}
.bc-cl-editor-row:hover {
  background: var(--cl-item-surface-hover);
  border-radius: var(--r);
}
.bc-cl-editor-row[style*="--cl-item-color"]:hover {
  background: color-mix(in srgb, var(--cl-item-color) 14%, var(--cl-item-surface-hover));
}
.bc-cl-editor-row.is-checked:hover {
  background: color-mix(in srgb, var(--cl-item-surface-hover) 50%, var(--color-black) 50%);
}
.bc-cl-editor-row.is-checked[style*="--cl-item-color"]:hover {
  border-left-color: var(--cl-item-color);
  background: color-mix(
    in srgb,
    var(--cl-item-color) 10%,
    color-mix(in srgb, var(--cl-item-surface-hover) 50%, var(--color-black) 50%)
  );
}
/* Light-theme overrides for popup rows */
[data-theme="light"] .bc-cl-editor-row {
  background: var(--cl-item-surface);
  --cl-item-outline: color-mix(in srgb, var(--cl-item-color, var(--primary)) 28%, var(--border-dim));
  --cl-item-outline-hover: color-mix(in srgb, var(--cl-item-color, var(--primary)) 42%, var(--border));
}
[data-theme="light"] .bc-cl-editor-row.is-checked {
  background: var(--cl-item-surface-checked);
}
[data-theme="light"] .bc-cl-editor-row[style*="--cl-item-color"] {
  background: var(--cl-item-surface);
}
[data-theme="light"] .bc-cl-editor-row.is-checked[style*="--cl-item-color"] {
  background: var(--cl-item-surface-checked);
}
[data-theme="light"] .bc-cl-editor-row:hover {
  background: var(--cl-item-surface-hover);
}
[data-theme="light"] .bc-cl-editor-row[style*="--cl-item-color"]:hover {
  background: color-mix(in srgb, var(--cl-item-color) 22%, var(--cl-item-surface-hover));
}
[data-theme="light"] .bc-cl-editor-row.is-checked:hover {
  background: var(--cl-item-surface-checked-hover);
}
[data-theme="light"] .bc-cl-editor-row.is-checked[style*="--cl-item-color"]:hover {
  background: color-mix(in srgb, var(--cl-item-color) 18%, var(--cl-item-surface-checked-hover));
}
.bc-cl-editor-row.is-dragging {
  opacity: 0.25;
  background: var(--primary-dim);
}

/* Floating ghost row while dragging in popup */
.bc-cl-editor-drag-ghost {
  background: color-mix(in srgb, var(--bg-elevated) 78%, transparent);
  border: none;
  border-left: 3px solid var(--cl-item-color, transparent);
  border-radius: var(--r);
  opacity: 0.72;
  transform: scale(0.66) rotate(1.5deg);
  transform-origin: center center;
  padding: 5px 6px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
[data-theme="light"] .bc-cl-editor-drag-ghost {
  background: color-mix(in srgb, #f0f1f4 70%, rgba(255, 255, 255, 0.5));
  border: none;
  border-left: 3px solid var(--cl-item-color, transparent);
  box-shadow:
    0 3px 10px rgba(12, 13, 20, 0.12);
}
[data-theme="light"] .bc-cl-card.bc-cl-drag-ghost {
  background: color-mix(in srgb, #f0f1f4 70%, rgba(255, 255, 255, 0.5)) !important;
  border: none !important;
  border-left: 3px solid var(--cl-item-color, transparent) !important;
  color: var(--text-1);
  opacity: 0.72 !important;
}
[data-theme="light"] .bc-cl-card.bc-cl-drag-ghost .bc-cl-text {
  color: var(--text-1) !important;
}
[data-theme="light"] .bc-cl-card.bc-cl-drag-ghost .bc-cl-checkbox {
  color: var(--text-3) !important;
}
[data-theme="light"] .bc-cl-card.bc-cl-drag-ghost[style*="--cl-item-color"] .bc-cl-checkbox {
  color: color-mix(in srgb, var(--cl-item-color) 75%, var(--text-2)) !important;
}

/* Drag handle — matches .bc-dlg-handle */
.bc-cl-editor-handle {
  flex-shrink: 0;
  width: 16px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  cursor: grab;
  transition: color 0.1s, background 0.1s;
  border-radius: 3px;
  user-select: none;
}
.bc-cl-editor-handle:active {
  cursor: grabbing;
}
.bc-cl-editor-handle:hover {
  color: var(--text-1);
  background: color-mix(in srgb, var(--surface-active) 55%, transparent);
}
.bc-cl-editor-handle svg {
  width: 8px;
  height: 14px;
}

.bc-cl-editor-checkbox {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: color-mix(in srgb, var(--primary) 32%, var(--text-2));
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, transform 0.12s;
  border-radius: 0;
}
.bc-cl-editor-checkbox:hover {
  color: var(--primary);
  transform: scale(1.06);
}
.bc-cl-editor-row.is-checked .bc-cl-editor-checkbox {
  color: var(--primary);
}
/* Colored item (popup): checkbox follows tag; drag handle stays neutral like dialogue */
.bc-cl-editor-row[style*="--cl-item-color"] .bc-cl-editor-checkbox {
  color: color-mix(in srgb, var(--cl-item-color) 80%, var(--text-2));
}
.bc-cl-editor-row[style*="--cl-item-color"] .bc-cl-editor-checkbox:hover {
  color: var(--cl-item-color);
}
.bc-cl-editor-row.is-checked[style*="--cl-item-color"] .bc-cl-editor-checkbox {
  color: var(--cl-item-color);
}
.bc-cl-editor-checkbox svg {
  width: 20px;
  height: 20px;
  display: block;
  border-radius: 0;
}

/* Color picker trigger — --cl-dot-color always set in JS (block default = visible, not dark-on-dark) */
.bc-cl-editor-color-btn {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  padding: 0;
  background: none;
  border: 1px dashed color-mix(in srgb, var(--cl-dot-color) 50%, var(--border-dim));
  cursor: pointer;
  color: var(--text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: border-color 0.15s, border-style 0.15s, transform 0.12s;
}
.bc-cl-editor-color-btn:hover {
  border-color: var(--cl-dot-color, var(--primary));
  border-style: solid;
  transform: scale(1.12);
}
.bc-cl-editor-color-btn.has-color {
  border-color: color-mix(in srgb, var(--cl-dot-color) 35%, var(--border-dim));
  border-style: solid;
}
.bc-cl-editor-color-btn.has-color:hover {
  border-color: var(--cl-dot-color);
}
.bc-cl-editor-color-btn svg {
  width: 12px;
  height: 12px;
  display: block;
  border-radius: 50%;
}

.bc-cl-editor-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text-1);
  font-size: 13px;
  font-family: inherit;
  line-height: 1.45;
  padding: 0;
  min-width: 0;
  transition: color 0.2s;
}
.bc-cl-editor-input::placeholder {
  color: var(--text-4);
}
.bc-cl-editor-row.is-checked .bc-cl-editor-input {
  text-decoration: line-through;
  text-decoration-color: var(--text-3);
  color: var(--text-3);
}
/* Delete — matches .bc-dlg-del-btn */
.bc-cl-editor-delete {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  transition: color 0.12s, background 0.12s;
}
.bc-cl-editor-delete:hover {
  color: var(--danger);
  background: var(--danger-dim);
}
.bc-cl-editor-delete svg {
  width: 10px;
  height: 10px;
}
/* Light: unchecked checkboxes — slightly less primary than dark */
[data-theme="light"] .bc-cl-checkbox,
[data-theme="light"] .bc-cl-editor-checkbox {
  color: color-mix(in srgb, var(--primary) 26%, var(--text-2));
}
/* Light + colored row: must win over rule above */
[data-theme="light"] .bc-cl-card[style*="--cl-item-color"] .bc-cl-checkbox,
[data-theme="light"] .bc-cl-editor-row[style*="--cl-item-color"] .bc-cl-editor-checkbox {
  color: color-mix(in srgb, var(--cl-item-color) 70%, var(--text-2));
}
[data-theme="light"] .bc-cl-card[style*="--cl-item-color"] .bc-cl-checkbox:hover,
[data-theme="light"] .bc-cl-editor-row[style*="--cl-item-color"] .bc-cl-editor-checkbox:hover {
  color: var(--cl-item-color);
}
[data-theme="light"] .bc-cl-card.is-checked[style*="--cl-item-color"] .bc-cl-checkbox,
[data-theme="light"] .bc-cl-editor-row.is-checked[style*="--cl-item-color"] .bc-cl-editor-checkbox {
  color: var(--cl-item-color);
}
[data-theme="light"] .bc-cl-editor-handle:hover {
  color: var(--text-1);
  background: color-mix(in srgb, var(--primary) 8%, var(--surface-active));
}
/* View mode — read-only list / table / chart in block popups */
.bc-cl-readonly-empty,
.bc-tbl-readonly-empty,
.bc-chart-readonly-empty {
  padding: 12px 10px;
  font-size: 12px;
  color: var(--text-3);
  text-align: center;
}
.bc-cl-readonly-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bc-cl-readonly-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 7px 3px 4px;
  min-height: 36px;
  box-sizing: border-box;
  border-radius: var(--r);
  border-left: 3px solid transparent;
  background: var(--cl-item-surface);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 1px 4px rgba(0, 0, 0, 0.35);
}
.bc-cl-readonly-row.is-checked {
  background: color-mix(in srgb, var(--cl-item-surface) 58%, var(--color-black) 42%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.02),
    0 1px 3px rgba(0, 0, 0, 0.4);
}
.bc-cl-readonly-row[style*="--cl-item-color"] {
  border-left-color: var(--cl-item-color);
  background: color-mix(in srgb, var(--cl-item-color) 9%, var(--cl-item-surface));
}
.bc-cl-readonly-row.is-checked[style*="--cl-item-color"] {
  background: color-mix(
    in srgb,
    var(--cl-item-color) 6%,
    color-mix(in srgb, var(--cl-item-surface) 58%, var(--color-black) 42%)
  );
}
.bc-cl-readonly-check {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--text-2);
}
.bc-cl-readonly-text {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-1);
  word-break: break-word;
}
.block-content--table .bc-tbl-cell-inner[contenteditable="false"] {
  cursor: default;
  user-select: text;
}
.bc-cl-editor-add {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 10px 10px;
  padding: 6px 10px;
  background: var(--primary-dim);
  border: 1px solid var(--primary);
  border-radius: var(--r);
  color: var(--primary-text);
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.12s, color 0.12s;
  flex-shrink: 0;
}
.bc-cl-editor-add:hover {
  border-color: var(--primary-h);
  background: var(--primary);
  color: var(--color-white);
}
.bc-cl-editor-add svg {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}

/* ── Floating color picker ──────────────────────────────────────── */
.bc-cl-color-picker {
  position: fixed;
  z-index: 100000;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 8px;
  background: var(--bg-surface);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: var(--toolbar-panel-border);
  border-top: var(--toolbar-panel-top);
  border-radius: var(--toolbar-panel-radius);
  box-shadow: var(--toolbar-panel-shadow);
  width: 180px;
}
[data-theme="light"] .bc-cl-color-picker {
  background: var(--bg-surface);
  border: var(--toolbar-panel-border);
  border-top: var(--toolbar-panel-top);
  box-shadow: var(--toolbar-panel-shadow);
}
.bc-cl-color-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.12s, border-color 0.15s, box-shadow 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.bc-cl-color-swatch:hover {
  transform: scale(1.2);
  border-color: var(--text-2);
}
.bc-cl-color-swatch.is-active {
  border-color: var(--text-1);
  box-shadow: 0 0 0 2px var(--bg-void), 0 0 0 3px var(--text-1);
}

/* ================================================================
   Checklist — Sections (canvas + popup)
   ================================================================ */

/* ── Canvas: section grouping ───────────────────────────────────── */
.bc-cl-sections {
  display: flex;
  flex-direction: column;
}
.bc-cl-section {
  display: flex;
  flex-direction: column;
}
.bc-cl-section + .bc-cl-section {
  border-top: 1px solid var(--border-dim);
  margin-top: 4px;
  padding-top: 4px;
}
.bc-cl-section-head {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 4px 10px 2px;
}
.bc-cl-section-text-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.bc-cl-section-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-3);
}
.bc-cl-section-desc {
  font-size: 10px;
  color: var(--text-4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.bc-cl-section-prog {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-4);
  margin-left: auto;
  flex-shrink: 0;
}
.bc-cl-section-prog.is-complete {
  color: var(--accent-green, #4ade80);
}

/* Readonly section headers inside popup */
.bc-cl-readonly-section-head {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 10px 16px 2px;
  border-top: 1px solid var(--border-dim);
  margin-top: 6px;
}
.bc-cl-readonly-section-head:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: 4px;
}
.bc-cl-readonly-section-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-3);
}
.bc-cl-readonly-section-desc {
  font-size: 11px;
  color: var(--text-4);
  font-style: italic;
}

/* ── Popup editor: sections ─────────────────────────────────────── */
.bc-cl-editor-sections {
  display: flex;
  flex-direction: column;
  padding: 6px 14px 10px;
}

/* Each section — flat, separator-based, no card background */
.bc-cl-sec {
  display: flex;
  flex-direction: column;
}
.bc-cl-sec + .bc-cl-sec {
  border-top: 1px solid var(--border-dim);
  margin-top: 4px;
  padding-top: 6px;
}
.bc-cl-sec.is-dragging {
  opacity: 0.3;
}

/* Section header — no background, just layout */
.bc-cl-sec-head {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 8px 4px 2px;
  min-height: 28px;
}

/* Section drag handle */
.bc-cl-sec-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 22px;
  color: var(--text-4);
  cursor: grab;
  flex-shrink: 0;
  border-radius: 3px;
  transition: color 0.12s;
}
.bc-cl-sec-handle:hover { color: var(--text-1); }
.bc-cl-sec-handle:active { cursor: grabbing; }
.bc-cl-sec-handle svg { width: 7px; height: 12px; }

/* Title + description stacked */
.bc-cl-sec-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.bc-cl-sec-title-input {
  background: transparent;
  border: none;
  outline: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
  width: 100%;
  padding: 0;
  font-family: inherit;
}
.bc-cl-sec-title-input::placeholder {
  color: var(--text-4);
  font-weight: 500;
}
.bc-cl-sec-desc-input {
  background: transparent;
  border: none;
  outline: none;
  font-size: 12px;
  color: var(--text-3);
  width: 100%;
  padding: 0;
  font-family: inherit;
}
.bc-cl-sec-desc-input::placeholder {
  color: var(--text-4);
  opacity: 0.7;
}
.bc-cl-sec-title-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
}
.bc-cl-sec-desc-label {
  font-size: 12px;
  color: var(--text-3);
}

/* Progress pill — small and subdued */
.bc-cl-sec-pill {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-4);
  flex-shrink: 0;
  min-width: 28px;
  text-align: right;
  letter-spacing: 0.02em;
}
.bc-cl-sec-pill.is-complete {
  color: var(--accent-green, #4ade80);
}

/* Collapse toggle */
.bc-cl-sec-collapse {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: var(--text-4);
  cursor: pointer;
  border-radius: 4px;
  flex-shrink: 0;
  transition: color 0.12s;
}
.bc-cl-sec-collapse:hover { color: var(--text-1); }
.bc-cl-sec-collapse svg {
  width: 9px;
  height: 5px;
  transition: transform 0.18s;
}
.bc-cl-sec-collapse.is-collapsed svg { transform: rotate(-90deg); }

/* Delete section */
.bc-cl-sec-delete {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: var(--text-4);
  cursor: pointer;
  border-radius: 4px;
  flex-shrink: 0;
  transition: color 0.12s, background 0.12s;
}
.bc-cl-sec-delete:hover { color: #ef4444; background: color-mix(in srgb, #ef4444 10%, transparent); }
.bc-cl-sec-delete svg { width: 10px; height: 10px; }

/* Section body */
.bc-cl-sec-body {
  display: flex;
  flex-direction: column;
}

/* Per-section item list drop zone */
.bc-cl-sec-body .bc-cl-editor-list {
  padding: 0;
}
.bc-cl-sec-body .bc-cl-editor-list:empty {
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
}
.bc-cl-sec-body .bc-cl-editor-list.bc-cl-drop-active:empty {
  min-height: 40px;
}
.bc-cl-sec-body .bc-cl-editor-list.bc-cl-drop-active {
  background: color-mix(in srgb, var(--primary) 5%, transparent);
  border-radius: 4px;
}

/* Items inside sections: no background fill, slimmer height */
.bc-cl-sec-body .bc-cl-editor-row {
  min-height: 28px;
  padding: 1px 6px 1px 2px;
  background: transparent;
}
.bc-cl-sec-body .bc-cl-editor-row.is-checked {
  background: transparent;
}
.bc-cl-sec-body .bc-cl-editor-row[style*="--cl-item-color"] {
  background: transparent;
}
.bc-cl-sec-body .bc-cl-editor-row.is-checked[style*="--cl-item-color"] {
  background: transparent;
}
.bc-cl-sec-body .bc-cl-editor-row:hover {
  background: color-mix(in srgb, var(--primary) 6%, transparent);
}
[data-theme="light"] .bc-cl-sec-body .bc-cl-editor-row:hover {
  background: color-mix(in srgb, var(--primary) 5%, transparent);
}

/* Per-section "Add item" — minimal text button */
.bc-cl-sec-add-item {
  align-self: flex-start !important;
  margin: 12px 0 6px 28px !important;
  padding: 3px 6px !important;
  font-size: 11px !important;
  border: none !important;
  background: transparent !important;
  color: var(--text-4) !important;
  opacity: 1 !important;
  gap: 4px !important;
  border-radius: 4px !important;
  font-weight: 400 !important;
  height: auto !important;
}
.bc-cl-sec-add-item:hover {
  color: var(--text-2) !important;
  background: color-mix(in srgb, var(--primary) 8%, transparent) !important;
}
.bc-cl-sec-add-item svg { width: 10px !important; height: 10px !important; opacity: 0.7; }

/* Add section — minimal text button */
.bc-cl-add-section {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 6px 0 20px 14px;
  padding: 5px 8px;
  background: transparent;
  border: none;
  border-radius: 5px;
  color: var(--text-4);
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
  align-self: flex-start;
  transition: color 0.12s, background 0.12s;
  font-family: inherit;
}
.bc-cl-add-section:hover {
  color: var(--text-2);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}
.bc-cl-add-section svg {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  opacity: 0.7;
}

/* ================================================================
   Table block — canvas preview & popup editor
   ================================================================ */

/* ================================================================
   Table block — canvas preview & popup editor
   ================================================================ */

/* ── Canvas preview ─────────────────────────────────────────────── */
.bc-tbl-preview {
  width: 100%;
  height: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 11px;
  color: var(--text-1);
}
.bc-tbl-preview-cell {
  border: 1px solid var(--border-dim);
  padding: 4px 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 0;
  vertical-align: top;
  font-weight: 400;
  text-align: left;
}
.bc-tbl-preview--align-center .bc-tbl-preview-cell {
  text-align: center;
}
.bc-tbl-preview--align-right .bc-tbl-preview-cell {
  text-align: right;
}
.bc-tbl-preview--flat .bc-tbl-preview-cell {
  background: transparent !important;
}
.bc-tbl-preview-header .bc-tbl-preview-cell,
.bc-tbl-preview th {
  background: color-mix(in srgb, var(--primary) 10%, var(--bg-elevated));
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 9px;
}
/* Canvas / preview table — zebra (requires .bc-tbl-body-row on body trs; respect flat toggle) */
.bc-tbl-preview:not(.bc-tbl-preview--flat) .bc-tbl-body-row:nth-child(even) .bc-tbl-preview-cell {
  background: rgba(255, 255, 255, 0.018);
}
[data-theme="light"] .bc-tbl-preview:not(.bc-tbl-preview--flat) .bc-tbl-body-row:nth-child(even) .bc-tbl-preview-cell {
  background: rgba(0, 0, 0, 0.022);
}

/* ── Popup editor ───────────────────────────────────────────────── */
.block-content--table {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  pointer-events: auto;
}

/* Toolbar */
.bc-tbl-toolbar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--border-dim);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.bc-tbl-tb-sep {
  flex: 1;
}

/* Segmented button group — hairline divider only, no outer box */
.bc-tbl-btn-group {
  display: inline-flex;
  gap: 0;
}
.bc-tbl-btn-group .bc-tbl-tb-btn + .bc-tbl-tb-btn {
  border-left: 1px solid var(--border-dim);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.bc-tbl-btn-group .bc-tbl-tb-btn:first-child {
  border-radius: var(--r-sm) 0 0 var(--r-sm);
}

/* Ghost-style toolbar buttons — matches .bep-icon-btn pattern in popup */
.bc-tbl-tb-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 3px 6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--text-3);
  font-size: 11px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  line-height: 1;
}
.bc-tbl-tb-btn svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}
.bc-tbl-tb-btn:hover {
  background: var(--primary-dim);
  border-color: var(--primary-glow);
  color: var(--text-1);
}
.bc-tbl-tb-header {
  color: var(--text-3);
}
.bc-tbl-tb-header.is-active {
  background: var(--primary-dim);
  border-color: var(--primary-glow);
  color: var(--primary-text);
}
.bc-tbl-tb-header.is-active:hover {
  background: var(--primary-mid);
  border-color: var(--primary-20);
  color: var(--primary-text);
}
.bc-tbl-tb-stripe.is-active {
  background: var(--primary-dim);
  border-color: var(--primary-glow);
  color: var(--primary-text);
}

/* Editor grid — table area + drag handles */
.bc-tbl-editor-grid {
  display: grid;
  grid-template-columns: 1fr 32px;
  grid-template-rows: 1fr 32px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Table area */
.bc-tbl-area {
  grid-column: 1;
  grid-row: 1;
  flex: 1;
  overflow: auto;
  min-height: 0;
  min-width: 0;
}
.bc-tbl-area::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
.bc-tbl-area::-webkit-scrollbar-track {
  background: transparent;
}
.bc-tbl-area::-webkit-scrollbar-thumb {
  background: var(--border-bright);
  border-radius: 99px;
}

/* Row drag handle — bottom strip */
.bc-tbl-row-handle {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  align-items: center;
  cursor: ns-resize;
  border-top: 1px solid var(--border-dim);
  background: transparent;
  transition: background 0.12s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.bc-tbl-row-handle:hover,
.bc-tbl-row-handle.is-dragging {
  background: var(--primary-dim);
}

/* Col drag handle — right strip */
.bc-tbl-col-handle {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: ew-resize;
  border-left: 1px solid var(--border-dim);
  background: transparent;
  transition: background 0.12s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.bc-tbl-col-handle:hover,
.bc-tbl-col-handle.is-dragging {
  background: var(--primary-dim);
}

/* Corner piece */
.bc-tbl-corner {
  grid-column: 2;
  grid-row: 2;
  border-top: 1px solid var(--border-dim);
  border-left: 1px solid var(--border-dim);
}

/* Drag pill — fills space between +/- buttons and shows the grip indicator */
.bc-tbl-drag-pill {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.bc-tbl-row-handle .bc-tbl-drag-pill::after {
  content: '';
  display: block;
  width: 36px;
  height: 4px;
  border-radius: 99px;
  background: var(--border-bright);
  transition: background 0.12s;
}
.bc-tbl-col-handle .bc-tbl-drag-pill::after {
  content: '';
  display: block;
  width: 4px;
  height: 36px;
  border-radius: 99px;
  background: var(--border-bright);
  transition: background 0.12s;
}
.bc-tbl-row-handle:hover .bc-tbl-drag-pill::after,
.bc-tbl-row-handle.is-dragging .bc-tbl-drag-pill::after,
.bc-tbl-col-handle:hover .bc-tbl-drag-pill::after,
.bc-tbl-col-handle.is-dragging .bc-tbl-drag-pill::after {
  background: var(--text-3);
}

/* +/- buttons inside handles */
.bc-tbl-handle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background: transparent;
  border: none;
  border-radius: var(--r-sm, 4px);
  color: var(--text-3);
  cursor: pointer;
  padding: 0;
  transition: background 0.1s, color 0.1s;
}
.bc-tbl-handle-btn svg {
  width: 10px;
  height: 10px;
  pointer-events: none;
}
.bc-tbl-handle-btn:hover {
  background: var(--primary-mid);
  color: var(--text-1);
}
.bc-tbl-handle-btn:active {
  background: var(--primary-20);
}

/* Table element */
.bc-tbl-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 12px;
  color: var(--text-1);
}

/* Header row */
.bc-tbl-header-row th {
  background: var(--primary-dim);
  border-bottom: 1px solid var(--border-bright);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--text-2);
  position: sticky;
  top: 0;
  z-index: 1;
}
.bc-tbl-header-row th.bc-tbl-cell:hover:not(:focus-within) {
  background: var(--primary-mid);
  color: var(--text-1);
}
.bc-tbl-header-row th.bc-tbl-cell:focus-within {
  background: var(--primary-mid);
  box-shadow: inset 0 0 0 1.5px var(--primary-glow);
}

/* Body rows — zebra stripe */
.bc-tbl-body-row:nth-child(even) td {
  background: rgba(255, 255, 255, 0.018);
}
[data-theme="light"] .bc-tbl-body-row:nth-child(even) td {
  background: rgba(0, 0, 0, 0.022);
}
.bc-tbl-table--flat .bc-tbl-body-row:nth-child(even) td,
.bc-tbl-table--flat .bc-tbl-body-row td {
  background: transparent !important;
}
[data-theme="light"] .bc-tbl-table--flat .bc-tbl-body-row:nth-child(even) td,
[data-theme="light"] .bc-tbl-table--flat .bc-tbl-body-row td {
  background: transparent !important;
}
.bc-tbl-table--align-center .bc-tbl-cell-inner {
  text-align: center;
}
.bc-tbl-table--align-right .bc-tbl-cell-inner {
  text-align: right;
}

/* Cells */
.bc-tbl-cell {
  border: 1px solid var(--border-dim);
  padding: 0;
  vertical-align: top;
  min-width: 90px;
  position: relative;
  transition: background 0.08s;
}
.bc-tbl-cell:first-child {
  border-left: none;
}
.bc-tbl-cell:last-child {
  border-right: none;
}
.bc-tbl-header-row th:first-child {
  border-left: none;
}
.bc-tbl-header-row th:last-child {
  border-right: none;
}
.bc-tbl-cell-inner {
  display: block;
  padding: 7px 10px;
  min-height: 30px;
  outline: none;
  line-height: 1.5;
  word-break: break-word;
  caret-color: var(--primary);
}
.bc-tbl-cell:focus-within {
  background: var(--primary-dim);
  box-shadow: inset 0 0 0 1.5px var(--primary-glow);
  z-index: 1;
}
.bc-tbl-cell:hover:not(:focus-within) {
  background: var(--primary-dim);
}
.bc-tbl-header-row th:focus-within {
  background: var(--surface-active);
  box-shadow: inset 0 0 0 1.5px var(--primary-glow);
}

/* ================================================================
   Chart block
   ================================================================ */

/* ── Canvas preview ── */
.bc-chart-canvas-title {
  padding: 6px 10px 2px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  flex-shrink: 0;
}
.bc-chart-canvas-svg-wrap {
  flex: 1;
  min-height: 0;
  padding: 4px 8px 8px;
}

/* ── Popup editor ── */
.block-content--chart {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  pointer-events: auto;
}
.bc-chart-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 7px;
  border-bottom: 1px solid var(--border-dim);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.bc-chart-type-pills {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
}
.bc-chart-type-pill {
  padding: 3px 9px;
  background: var(--primary-04);
  border: 1px solid var(--primary-10);
  border-radius: 3px;
  color: var(--text-3);
  font-size: 11px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.bc-chart-type-pill:hover {
  color: var(--text-1);
  background: var(--primary-10);
  border-color: var(--primary-22);
}
.bc-chart-type-pill.is-active {
  background: var(--primary-mid);
  border-color: var(--primary-35);
  color: var(--primary-text);
  font-weight: 600;
}
.bc-chart-title-input {
  flex: 1 1 120px;
  background: none;
  border: none;
  outline: none;
  color: var(--text-1);
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  padding: 0;
  min-width: 0;
}
.bc-chart-title-input::placeholder { color: var(--text-4); }
.bc-chart-ylabel-input {
  width: 108px;
  flex: 0 0 auto;
  background: var(--primary-04);
  border: 1px solid var(--primary-10);
  border-radius: 3px;
  color: var(--text-2);
  font-size: 11px;
  font-family: inherit;
  padding: 4px 8px;
  outline: none;
}
.bc-chart-ylabel-input::placeholder { color: var(--text-4); }
.bc-chart-ylabel-input:focus {
  border-color: var(--primary-glow);
  box-shadow: 0 0 0 1px var(--primary-12);
}
.bc-chart-val-toggle {
  flex-shrink: 0;
  padding: 3px 10px;
  background: var(--primary-04);
  border: 1px solid var(--primary-10);
  border-radius: 3px;
  color: var(--text-3);
  font-size: 11px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.bc-chart-val-toggle:hover {
  color: var(--text-1);
  background: var(--primary-10);
  border-color: var(--primary-22);
}
.bc-chart-val-toggle.is-active {
  background: var(--primary-mid);
  border-color: var(--primary-35);
  color: var(--primary-text);
  font-weight: 600;
}
.bc-chart-preview {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 6px 8px 4px;
  border-bottom: 1px solid var(--border-dim);
}
.bc-chart-preview-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 2px;
  flex-shrink: 0;
}
.bc-chart-svg-wrap {
  flex: 1;
  min-height: 0;
}
.bc-chart-data {
  flex-shrink: 0;
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.bc-chart-data::-webkit-scrollbar { width: 4px; }
.bc-chart-data::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 99px; }
.bc-chart-data-header {
  display: grid;
  grid-template-columns: 1fr 80px 24px;
  gap: 4px;
  padding: 5px 10px 3px;
  border-bottom: 1px solid var(--border-dim);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.bc-chart-data-list { display: flex; flex-direction: column; }
.bc-chart-data-row {
  display: grid;
  grid-template-columns: 1fr 80px 24px;
  gap: 4px;
  align-items: center;
  padding: 3px 10px;
  border-bottom: 1px solid var(--border-dim);
  transition: background 0.08s;
}
.bc-chart-data-row:hover { background: var(--primary-dim); }
.bc-chart-data-row:hover .bc-chart-data-del { opacity: 1; }
.bc-chart-label-input,
.bc-chart-value-input {
  background: none;
  border: none;
  outline: none;
  color: var(--text-1);
  font-size: 12px;
  font-family: inherit;
  padding: 2px 0;
  width: 100%;
}
.bc-chart-label-input::placeholder,
.bc-chart-value-input::placeholder { color: var(--text-4); }
.bc-chart-data-del {
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: var(--text-3); border-radius: var(--r-sm);
  opacity: 0; transition: opacity 0.12s, background 0.1s, color 0.1s;
}
.bc-chart-data-del svg { width: 10px; height: 10px; }
.bc-chart-data-del:hover { background: var(--danger-dim); color: var(--danger); }
.bc-chart-data-add {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 8px 8px;
  padding: 6px 10px;
  background: var(--primary-dim);
  border: 1px solid var(--primary);
  border-radius: var(--r);
  color: var(--primary-text);
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.12s, color 0.12s;
  flex-shrink: 0;
}
.bc-chart-data-add svg {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}
.bc-chart-data-add:hover {
  border-color: var(--primary-h);
  background: var(--primary);
  color: var(--color-white);
}

/* ================================================================
   Canvas-level tag system — spider-leg tag pills
================================================================ */

/* ── Canvas-level tag line SVG (sibling of blocks in viewport) ── */
.tag-line-svg {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 3;
}

.block-tag-leg-line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.38;
}

/* ── Canvas-level pill layer (sibling of blocks in viewport) ──── */
.tag-pill-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 4;
}

/* ── Tag pill floating in canvas space ──────────────────────── */
.block-tag-pill {
  --pill-color: var(--primary);
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  max-width: min(260px, 52vw);
  background: #0d0e1a;
  border: 1px solid color-mix(in srgb, var(--pill-color) 35%, transparent);
  border-left: 2px solid var(--pill-color);
  color: var(--text-1);
  font-size: 10px;
  font-weight: 700;
  font-family: inherit;
  padding: 4px 10px;
  border-radius: 3px;
  cursor: default;
  user-select: none;
  touch-action: manipulation;
  letter-spacing: 0.04em;
  line-height: 1.5;
  transition: opacity 0.15s, border-color 0.15s, transform 0.12s, background 0.15s,
    font-size 0.12s ease, padding 0.12s ease;
}
.block-tag-pill__glyph {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: color-mix(in srgb, var(--pill-color, var(--primary)) 88%, var(--text-3));
  opacity: 0.95;
}
.block-tag-pill__glyph svg {
  display: block;
}
.block-tag-pill__txt {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Only when a single block is selected — larger canvas tag pills (multi-select uses default size) */
.block-tag-pill.is-solo-selected {
  font-size: 16px;
  font-weight: 800;
  padding: 8px 16px;
  border-radius: 6px;
  line-height: 1.4;
  letter-spacing: 0.05em;
  border-left-width: 3px;
}
.block-tag-pill.is-solo-selected .block-tag-pill__glyph svg {
  width: 13px;
  height: 13px;
}
/* Keyboard-selected tag (Delete / Backspace removes this tag from the block) */
.block-tag-pill.is-tag-pill-selected {
  outline: 2px solid var(--pill-color, var(--primary));
  outline-offset: 2px;
}
.block-link-pill.is-link-pill-selected .block-link-pill__card {
  outline: 2px solid var(--pill-color, var(--primary));
  outline-offset: 2px;
}
[data-theme="light"] .block-tag-pill {
  background: rgba(255, 255, 255, 0.92);
}
.block-tag-pill.is-tag-draggable {
  cursor: grab;
  touch-action: none;
}
/* Hover applies in view-only / preview / non-premium too (is-tag-draggable is edit+premium only). */
.block-tag-pill:hover {
  border-color: var(--pill-color);
  transform: translate(-50%, -50%) scale(1.06);
}
[data-theme="light"] .block-tag-pill:hover {
}

/* ── Block link cards — same flow as .avq-block-preview--tip: type, title, then block preview; preview non-interactive ── */
.block-link-pill {
  --pill-color: var(--primary);
  --link-card-w: 120px;
  --link-pill-scale-src: 240px;
  /* Content width inside card padding (8px 10px) — matches square thumb area for scale */
  --link-pill-inner: var(--link-card-w);
  --link-pill-scale: calc(var(--link-pill-inner) / var(--link-pill-scale-src));
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 2;
  cursor: default;
  user-select: none;
  touch-action: manipulation;
  color: var(--text-1);
  transition: transform 0.12s ease, opacity 0.15s;
}
.block-link-pill__card {
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: var(--link-card-w);
  padding: 8px 10px;
  border-radius: 4px;
  overflow: hidden;
  background: #0d0e1a;
  border: 1px solid color-mix(in srgb, var(--pill-color) 22%, var(--border-dim));
  border-top: 2px solid var(--pill-color);
}
.block-link-pill__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex-shrink: 0;
  pointer-events: none;
}
.block-link-pill__head .const-tip__title {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.block-link-pill__preview {
  position: relative;
  flex-shrink: 0;
  width: auto;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 2px;
  pointer-events: none !important;
  background: none;
  margin: 0 -10px -8px;
  width: calc(100% + 20px);
}
.block-link-pill__preview,
.block-link-pill__preview * {
  pointer-events: none !important;
  user-select: none !important;
}
.block-link-pill__preview-scaler {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--link-pill-scale-src);
  transform-origin: top left;
  transform: scale(var(--link-pill-scale));
  pointer-events: none !important;
}
.block-link-pill__preview .block-content--for-hover-tip {
  padding: 4px 5px;
  font-size: 11px;
  line-height: 1.42;
}
.block-link-pill.is-solo-selected {
  --link-card-w: 144px;
  --link-pill-scale-src: 288px;
}
.block-link-pill.is-solo-selected .block-link-pill__head .const-tip__title {
  font-size: 12px;
}
[data-theme="light"] .block-link-pill__card {
  background: rgba(255, 255, 255, 0.96);
  border-color: var(--border);
}
.block-link-pill.is-tag-draggable {
  cursor: grab;
  touch-action: none;
}
.block-link-pill:hover {
  transform: translate(-50%, -50%) scale(1.04);
}
.block-link-pill:hover .block-link-pill__card {
  border-color: color-mix(in srgb, var(--pill-color) 65%, var(--border-dim));
}
[data-theme="light"] .block-link-pill:hover .block-link-pill__card {
  border-color: color-mix(in srgb, var(--pill-color) 45%, var(--border));
}
.block-link-pill.is-tag-dragging {
  opacity: 0.92;
  transform: translate(-50%, -50%) scale(1.06);
  z-index: 12;
  cursor: grabbing;
}
.block-link-pill.is-tag-dragging .block-link-pill__card {
  border-style: solid;
}
[data-theme="light"] .block-link-pill.is-tag-dragging .block-link-pill__card {
  background: var(--bg-elevated);
}

.block-link-leg-line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 3 6;
  opacity: 0.48;
}

.block-tag-pill.is-tag-dragging {
  opacity: 0.92;
  transform: translate(-50%, -50%) scale(1.1);
  border-color: var(--pill-color);
  z-index: 10;
  cursor: grabbing;
}
[data-theme="light"] .block-tag-pill.is-tag-dragging {
  background: var(--bg-elevated);
}

/* Tag selected on canvas: floating inspector — all blocks, filter, jump (viewport-centered) */
/* ── Tag usage inspector ─────────────────────────────────────── */
.tag-usage-inspector.tag-usage-inspector--canvas-anchor {
  left: auto;
  bottom: auto;
  transform: none;
  transform-origin: top center;
  animation: tag-usage-in-anchor 0.15s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.tag-usage-inspector {
  position: fixed;
  bottom: var(--avq-floating-above-toolbar);
  left: 50%;
  transform: translateX(-50%) translateY(8px) scale(0.97);
  transform-origin: bottom center;
  width: min(300px, 92vw);
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: var(--toolbar-panel-border);
  border-top: var(--toolbar-panel-top);
  border-radius: var(--toolbar-panel-radius);
  box-shadow: var(--toolbar-panel-shadow);
  overflow: hidden;
  z-index: 5000;
  pointer-events: all;
  animation: tag-usage-in 0.15s cubic-bezier(0.16, 1, 0.3, 1) both;
  -webkit-tap-highlight-color: transparent;
}
.tag-usage-inspector__head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-dim);
  flex-shrink: 0;
}
.tag-usage-inspector__title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary-text);
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tag-usage-inspector__count {
  font-size: 10px;
  color: var(--text-3);
  flex-shrink: 0;
}
.tag-usage-inspector__close {
  background: none;
  border: 1px solid transparent;
  color: var(--text-3);
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.tag-usage-inspector__close:hover {
  color: var(--danger);
  background: rgba(224, 79, 104, 0.1);
  border-color: rgba(224, 79, 104, 0.25);
}
.tag-usage-inspector__search-wrap {
  flex-shrink: 0;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-dim);
}
.tag-usage-inspector__search {
  width: 100%;
  box-sizing: border-box;
  background: var(--primary-06);
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  color: var(--text-1);
  font-size: 12.5px;
  font-family: inherit;
  padding: 5px 10px;
  outline: none;
  transition: border-color 0.15s;
}
.tag-usage-inspector__search:focus { border-color: var(--primary); }
.tag-usage-inspector__search::placeholder { color: var(--text-3); }
.tag-usage-inspector__search::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
[data-theme="light"] .tag-usage-inspector__search { background: rgba(0,0,0,0.03); border-color: var(--border); }
.tag-usage-inspector__list {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  max-height: 240px;
}
.tag-usage-inspector__list::-webkit-scrollbar { width: 3px; }
.tag-usage-inspector__list::-webkit-scrollbar-track { background: transparent; }
.tag-usage-inspector__list::-webkit-scrollbar-thumb { background: var(--primary-dim); border-radius: 2px; }
.tui-block-row {
  display: flex;
  align-items: stretch;
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  border-bottom: 1px solid var(--primary-dim);
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: left;
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.1s;
}
.tui-block-row:last-child { border-bottom: none; }
.tui-block-row:hover { background: var(--primary-06); }
.tui-block-row__accent {
  flex: 0 0 6px;
  width: 6px;
  align-self: stretch;
  border-radius: 4px;
  overflow: hidden;
  margin: 6px 0 6px 8px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-3) 22%, transparent);
}
.tui-block-row__info {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tui-block-row__title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tui-block-row__meta {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.tui-block-row__snippet {
  font-size: 10px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tag-usage-inspector__empty {
  padding: 20px 12px;
  text-align: center;
  font-size: 11px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
@keyframes tag-usage-in {
  from { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.97); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0)   scale(1);    }
}
@keyframes tag-usage-in-anchor {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Edit tags popup — bottom center, same band as tag usage inspector */
.etags-popup {
  box-sizing: border-box;
  position: fixed;
  left: 50%;
  right: auto;
  top: auto;
  bottom: var(--avq-floating-above-toolbar);
  transform: translateX(-50%);
  transform-origin: bottom center;
  z-index: 5000;
  width: min(300px, 92vw);
  max-width: none;
  min-width: 0;
  max-height: min(360px, 50vh);
  padding: 0;
  background: var(--bg-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: var(--toolbar-panel-border);
  border-top: var(--toolbar-panel-top);
  border-radius: var(--toolbar-panel-radius);
  box-shadow: var(--toolbar-panel-shadow);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  animation: tag-usage-in 0.15s cubic-bezier(0.16, 1, 0.3, 1) both;
  display: flex;
  flex-direction: column;
}
/* Beside anchor block — positioned in JS; same reveal animation as canvas-anchored tag inspector */
.canvas-edit-popup.etags-popup.canvas-edit-popup--canvas-block-anchor {
  left: auto;
  right: auto;
  bottom: auto;
  top: auto;
  transform: none;
  transform-origin: center center;
  animation: tag-usage-in-anchor 0.15s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.etags-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 12px;
  height: 40px;
  border-bottom: 1px solid var(--panel-border);
}
.etags-head .btn-icon-x {
  flex-shrink: 0;
  margin-left: 4px;
}
.etags-head__title {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--primary-text);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.etags-head__block {
  font-weight: 400;
  color: var(--text-3);
  text-transform: none;
  letter-spacing: 0;
}
.elinks-hint {
  flex-shrink: 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-3);
  padding: 5px 12px;
  border-bottom: 1px solid var(--primary-08);
  text-align: center;
}
.elinks-popup.is-drop-target {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border-dim));
  border-top-color: var(--primary);
  box-shadow: none;
  outline: 2px solid var(--primary-30);
  outline-offset: 0;
}

/* Ghost-drag onto anchor block (same gesture as dropping on links panel) */
#editor-canvas.canvas--drop-target-links .block.block--link-anchor.is-drop-target {
  outline: 2px solid var(--primary-30);
  outline-offset: 2px;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--primary) 50%, transparent),
    0 0 20px color-mix(in srgb, var(--primary) 28%, transparent);
}

/* Inventory / edit-links open — blocks are clickable to toggle membership */
#editor-canvas.canvas--drop-target-inventory .block,
#editor-canvas.canvas--drop-target-links .block:not(.block--link-anchor) {
  cursor: pointer;
}

/* Link / tags panel — focused block (amber, not primary purple) */
#editor-canvas.canvas--drop-target-links .block.block--link-anchor,
#editor-canvas.canvas--tag-mode .block.block--link-anchor {
  outline: 3px solid color-mix(in srgb, var(--warn) 82%, transparent);
  outline-offset: 3px;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--warn) 48%, transparent),
    0 0 22px color-mix(in srgb, var(--warn) 32%, transparent);
}

/* Inventory — ports / arrows / pills must not steal drag-or-drop.
   Edit-links panel — same for ports/arrows/tag pills only; link pills stay interactive (parity with tag pills in tags panel). */
#editor-canvas.canvas--panel-drag-mode .block-port,
#editor-canvas.canvas--panel-drag-mode .conn-arrow-marker,
#editor-canvas.canvas--panel-drag-mode .conn-label,
#editor-canvas.canvas--drop-target-inventory .block-tag-pill,
#editor-canvas.canvas--drop-target-inventory .block-link-pill,
#editor-canvas.canvas--drop-target-links .block-tag-pill {
  pointer-events: none;
}

/* Pills set inline pointer-events:auto — must override when inventory is open */
#editor-canvas.canvas--drop-target-inventory .block-tag-pill,
#editor-canvas.canvas--drop-target-inventory .block-link-pill {
  pointer-events: none !important;
}

/* Inventory open — de-emphasize chrome except blocks (drag-to-inventory) */
#editor-canvas.canvas--drop-target-inventory #canvas-checkpoint-titles,
#editor-canvas.canvas--drop-target-inventory #canvas-comment-titles,
#editor-canvas.canvas--drop-target-inventory #canvas-group-titles,
#editor-canvas.canvas--drop-target-inventory .canvas-group,
#editor-canvas.canvas--drop-target-inventory .checkpoint-marker,
#editor-canvas.canvas--drop-target-inventory .canvas-comment,
#editor-canvas.canvas--drop-target-inventory .conn-svg,
#editor-canvas.canvas--drop-target-inventory .conn-arrow-marker,
#editor-canvas.canvas--drop-target-inventory .conn-label,
#editor-canvas.canvas--drop-target-inventory .block-tag-pill,
#editor-canvas.canvas--drop-target-inventory .block-link-pill,
#editor-canvas.canvas--drop-target-inventory .block-overhead-info {
  opacity: 0.36;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

/* Group chrome uses pointer-events:auto on header — must match other faded chrome */
#editor-canvas.canvas--drop-target-inventory .canvas-group .group-header-bar {
  pointer-events: none !important;
}

/* Edit-links open — same de-emphasis as inventory except link pills stay full-opacity (like tag pills in tags panel) */
#editor-canvas.canvas--drop-target-links #canvas-checkpoint-titles,
#editor-canvas.canvas--drop-target-links #canvas-comment-titles,
#editor-canvas.canvas--drop-target-links #canvas-group-titles,
#editor-canvas.canvas--drop-target-links .checkpoint-marker,
#editor-canvas.canvas--drop-target-links .canvas-comment,
#editor-canvas.canvas--drop-target-links .conn-svg,
#editor-canvas.canvas--drop-target-links .conn-arrow-marker,
#editor-canvas.canvas--drop-target-links .conn-label,
#editor-canvas.canvas--drop-target-links .block-tag-pill,
#editor-canvas.canvas--drop-target-links .block-overhead-info,
#editor-canvas.canvas--drop-target-links .canvas-group {
  opacity: 0.36;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

/* Tags panel — fade everything except focused block & tag pills */
#editor-canvas.canvas--tag-mode #canvas-checkpoint-titles,
#editor-canvas.canvas--tag-mode #canvas-comment-titles,
#editor-canvas.canvas--tag-mode #canvas-group-titles,
#editor-canvas.canvas--tag-mode #canvas-block-titles,
#editor-canvas.canvas--tag-mode .checkpoint-marker,
#editor-canvas.canvas--tag-mode .canvas-comment,
#editor-canvas.canvas--tag-mode .conn-svg,
#editor-canvas.canvas--tag-mode .conn-arrow-marker,
#editor-canvas.canvas--tag-mode .conn-label,
#editor-canvas.canvas--tag-mode .block-link-pill,
#editor-canvas.canvas--tag-mode .block-overhead-info,
#editor-canvas.canvas--tag-mode .canvas-group,
#editor-canvas.canvas--tag-mode .tag-line-svg {
  opacity: 0.36;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
#editor-canvas.canvas--tag-mode .block:not(.block--link-anchor) {
  opacity: 0.36;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

/* Offscreen jump markers stay interactive in tag / link / inventory panels */
#editor-canvas.canvas--tag-mode .offscreen-indicator,
#editor-canvas.canvas--drop-target-links .offscreen-indicator,
#editor-canvas.canvas--drop-target-inventory .offscreen-indicator {
  opacity: 0.36;
  pointer-events: auto;
  transition: opacity 0.15s ease;
}

/* Inventory / edit-links open — block inner content must not steal clicks from the toggle handler */
#editor-canvas.canvas--drop-target-inventory .block:not(.block-ghost) .block-content,
#editor-canvas.canvas--drop-target-inventory .block:not(.block-ghost) .block-content *,
#editor-canvas.canvas--drop-target-links .block:not(.block--link-anchor):not(.block-ghost) .block-content,
#editor-canvas.canvas--drop-target-links .block:not(.block--link-anchor):not(.block-ghost) .block-content * {
  pointer-events: none !important;
}

/* Block panel checkbox — visible only when inventory or block-link panel is open */
.block-panel-checkbox {
  display: none;
  position: absolute;
  top: 7px;
  right: 7px;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  border: 2px solid color-mix(in srgb, var(--primary) 55%, transparent);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  pointer-events: none;
  z-index: 10;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
}
.block-panel-checkbox svg {
  display: none;
}
.block-panel-checkbox--checked {
  background: var(--primary);
  border-color: var(--primary);
}
.block-panel-checkbox--checked svg {
  display: block;
}
#editor-canvas.canvas--drop-target-inventory .block:not(.block-ghost) .block-panel-checkbox,
#editor-canvas.canvas--drop-target-links .block:not(.block--link-anchor):not(.block-ghost) .block-panel-checkbox {
  display: flex;
}

.etags-search-wrap {
  flex-shrink: 0;
  padding: 8px 10px 5px;
}

.etags-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--primary-06);
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  color: var(--text-1);
  font-size: 12.5px;
  font-family: inherit;
  padding: 5px 10px;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.etags-input:focus {
  border-color: var(--primary);
  background: var(--primary-04, var(--primary-06));
}
.etags-list {
  flex: 1;
  min-height: 0;
  max-height: 220px;
  overflow-y: auto;
  padding: 3px 0 6px;
  -webkit-overflow-scrolling: touch;
}
.etags-row {
  display: flex;
  align-items: center;
  padding: 0 10px 0 8px;
  height: 34px;
  cursor: pointer;
  transition: background 0.1s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.etags-row:hover {
  background: var(--primary-06);
}
.etags-row__check {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  border-radius: 3px;
  border: 1.5px solid var(--panel-border);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, border-color 0.12s;
  pointer-events: none;
}
.etags-row--on .etags-row__check {
  background: var(--primary);
  border-color: var(--primary);
}
.etags-row--on .etags-row__check::after {
  content: "";
  display: block;
  width: 4px;
  height: 7px;
  border: 1.5px solid var(--color-white);
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translate(-1px, -1px);
}
.etags-row--partial .etags-row__check {
  background: var(--primary-12);
  border-color: var(--primary);
}
.etags-row--partial .etags-row__check::after {
  content: "";
  display: block;
  width: 6px;
  height: 1.5px;
  background: var(--primary);
  border-radius: 1px;
}
.etags-row__name {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.etags-row__count {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
  background: var(--primary-06);
  border-radius: 3px;
  padding: 1px 5px;
  margin: 0 6px 0 4px;
  pointer-events: none;
}
.etags-row--on .etags-row__count {
  color: var(--text-2);
  background: var(--primary-12);
}
.etags-row__actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.etags-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.etags-icon-btn:hover {
  background: var(--primary-10);
  border-color: var(--panel-border);
  color: var(--text-1);
}
.etags-icon-btn--danger:hover {
  background: color-mix(in srgb, var(--danger) 8%, transparent);
  border-color: var(--danger);
  color: var(--danger);
}
.etags-empty {
  font-size: 11.5px;
  color: var(--text-3);
  padding: 10px 12px 6px;
  line-height: 1.4;
}
.etags-row--rename {
  flex-direction: column;
  align-items: stretch;
  height: auto;
  padding: 8px 10px;
  gap: 6px;
  cursor: default;
}
.etags-row--rename:hover {
  background: transparent;
}
.etags-rename-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--primary-06);
  border: 1px solid var(--primary);
  border-radius: 4px;
  color: var(--text-1);
  font-size: 12.5px;
  font-family: inherit;
  padding: 5px 10px;
  outline: none;
}
.etags-rename-bar {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.etags-rename-btn {
  padding: 4px 10px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--panel-border);
  background: transparent;
  color: var(--text-2);
  font-family: inherit;
  transition: background 0.1s;
}
.etags-rename-btn:hover {
  background: var(--primary-06);
}
.etags-rename-btn--save {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--color-white);
}
.etags-rename-btn--save:hover {
  filter: brightness(1.1);
  background: var(--primary);
}
@media (max-width: 480px) {
  .etags-popup {
    width: calc(100vw - 12px);
  }
  .etags-input,
  .etags-rename-input {
    font-size: 16px;
  }
  .etags-icon-btn {
    width: 40px;
    height: 40px;
  }
  .etags-icon-btn:active {
    background: var(--primary-10);
    border-color: var(--panel-border);
    color: var(--text-1);
  }
  .etags-icon-btn--danger:active {
    background: color-mix(in srgb, var(--danger) 8%, transparent);
    border-color: var(--danger);
    color: var(--danger);
  }
  .etags-row {
    min-height: 44px;
    height: auto;
  }
}

/* ================================================================
   Inventory drawer
   ================================================================ */

.inventory-drawer {
  position: fixed;
  bottom: var(--avq-floating-above-toolbar);
  left: 50%;
  width: min(300px, 92vw);
  background: var(--bg-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: var(--toolbar-panel-border);
  border-top: var(--toolbar-panel-top);
  border-radius: var(--toolbar-panel-radius);
  box-shadow: var(--toolbar-panel-shadow);
  overflow: hidden;
  z-index: 280;
  display: flex;
  flex-direction: column;
  max-height: 70vh;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transform: translateX(-50%) translateY(8px) scale(0.97);
  transform-origin: bottom center;
  transition: opacity 0.15s ease, transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.15s;
}
.inventory-drawer.is-open {
  opacity: 1;
  pointer-events: all;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
  transition: opacity 0.15s ease, transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
}
.inventory-drawer.is-drop-target {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border-dim));
  border-top-color: var(--primary);
  box-shadow: none;
  outline: 2px solid var(--primary-30);
  outline-offset: 0;
}

/* ── Header ───────────────────────────────────────────────────── */
.inventory-drawer-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px 6px;
  border-bottom: 1px solid var(--panel-border);
}
.inventory-drawer-brand {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1 1 auto;
  min-width: 0;
}
.inventory-drawer-brand__icon,
.inventory-drawer-brand svg {
  display: flex;
  flex-shrink: 0;
  color: var(--primary-text);
}
.inventory-drawer-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  user-select: none;
}
.inventory-drawer-count {
  font-size: 10px;
  color: var(--text-3);
  flex-shrink: 0;
}
.inventory-drawer-close-btn {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--text-3);
  cursor: pointer;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.inventory-drawer-close-btn:hover {
  color: var(--danger);
  background: rgba(224, 79, 104, 0.1);
  border-color: rgba(224, 79, 104, 0.25);
}

/* ── Search ────────────────────────────────────────────────────── */
.inventory-drawer-search-wrap {
  flex-shrink: 0;
  padding: 6px 8px;
  border-bottom: 1px solid var(--panel-border);
}
.inventory-drawer-search {
  width: 100%;
  box-sizing: border-box;
  background: var(--primary-06);
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  color: var(--text-1);
  font-size: 12.5px;
  font-family: inherit;
  padding: 5px 10px;
  outline: none;
  transition: border-color 0.15s;
}
.inventory-drawer-search:focus { border-color: var(--primary); }
.inventory-drawer-search::placeholder { color: var(--text-3); }
.inventory-drawer-search::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
[data-theme="light"] .inventory-drawer-search { background: rgba(0,0,0,0.03); border-color: var(--border); }

/* ── List (vertical scroll) ────────────────────────────────────── */
.inventory-drawer-list {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}
.inventory-drawer-list::-webkit-scrollbar { width: 3px; }
.inventory-drawer-list::-webkit-scrollbar-track { background: transparent; }
.inventory-drawer-list::-webkit-scrollbar-thumb { background: var(--primary-dim); border-radius: 2px; }

/* ── Empty state ───────────────────────────────────────────────── */
.inventory-drawer-empty {
  padding: 20px 12px;
  text-align: center;
  font-size: 11px;
  color: var(--text-4);
}

/* ── Card rows ─────────────────────────────────────────────────── */
.inventory-drawer-card {
  display: flex;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
  background: none;
  border: none;
  border-bottom: 1px solid var(--primary-dim);
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: background 0.1s, opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.inventory-drawer-card:last-child { border-bottom: none; }
.inventory-drawer-card:hover { background: var(--primary-06); }
.inventory-drawer-card:active { background: var(--primary-08); }
.inventory-drawer-card__remove-btn {
  flex-shrink: 0;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  margin-right: 6px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: none;
  color: var(--text-3);
  cursor: pointer;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.inventory-drawer-card__remove-btn:hover {
  color: var(--danger);
  background: rgba(224, 79, 104, 0.1);
  border-color: rgba(224, 79, 104, 0.25);
}

.inventory-drawer-card__bar {
  flex: 0 0 6px;
  width: 6px;
  align-self: stretch;
  border-radius: 4px;
  overflow: hidden;
  margin: 6px 0 6px 8px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-3) 22%, transparent);
}
.inventory-drawer-card__body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.inventory-drawer-card__top {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.inventory-drawer-card__badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid currentColor;
  flex-shrink: 0;
  opacity: 0.8;
}
.inventory-drawer-card__title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}
.inventory-drawer-card__stack-count {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--stack-color, var(--primary));
  color: #fff;
  flex-shrink: 0;
  letter-spacing: 0.04em;
}
.inventory-drawer-card__sub {
  font-size: 10px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Pill card ────────────────────────────────────────────────── */
.inventory-drawer-card--pill .inventory-drawer-card__body,
.inventory-drawer-card--popup .inventory-drawer-card__body {
  gap: 5px;
  padding: 9px 10px 10px;
}
.inventory-pill-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.inventory-pill-row__icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--pill-color, var(--primary));
}
.inventory-pill-row__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.inventory-pill-row__count {
  font-size: 9px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border-radius: 8px;
  color: var(--color-white);
  flex-shrink: 0;
  padding: 0 4px;
}
.inventory-pill-row__type {
  font-size: 9px;
  font-weight: 700;
  color: var(--pill-color, var(--primary));
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

/* ── Popup card ───────────────────────────────────────────────── */
.inventory-popup-row__head {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.inventory-popup-row__dots {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}
.inventory-popup-row__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.inventory-popup-row__title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.inventory-popup-row__badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
  flex-shrink: 0;
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid var(--primary-15);
}

/* ── Shared tab strip for multi-tab cards ─────────────────────── */
.inventory-card-tabs {
  display: flex;
  align-items: stretch;
  gap: 1px;
  height: 18px;
  flex-shrink: 0;
  overflow: hidden;
  pointer-events: none;
  margin-top: 2px;
}
.inventory-card-tab {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 4px;
  min-width: 0;
  max-width: 70px;
  font-size: 8px;
  font-weight: 600;
  color: var(--text-3);
  background: transparent;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  flex-shrink: 0;
}
.inventory-card-tab.is-active {
  color: var(--text-1);
  border-bottom-color: var(--tab-color, var(--primary));
}
.inventory-card-tab .bep-tab-icon {
  display: flex;
  align-items: center;
  color: var(--tab-color, var(--primary));
  flex-shrink: 0;
}
.inventory-card-tab .bep-tab-icon svg { width: 9px; height: 9px; }
.inventory-card-tab .bep-tab-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Ghost drag helpers ───────────────────────────────────────── */
.inventory-ghost {
  opacity: 0.45;
  border: 2px dashed var(--primary) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
  border-radius: 6px;
  transition: none !important;
}
.inventory-card-ghost {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
  border-color: var(--primary-30);
}


/* ================================================================
   Version History Panel (bep-vh-*)
   ================================================================ */

.bep-history-btn.is-active {
  background: var(--primary-12);
  border-color: var(--primary-25);
  color: var(--primary);
}

.bep-export-btn.is-active,
.bep-zoom-btn.is-active {
  background: var(--primary-12);
  border-color: var(--primary-25);
  color: var(--primary);
}

.bep-vh-panel,
.bep-bz-panel {
  position: absolute;
  top: 38px;
  right: 0;
  width: 328px;
  max-height: min(520px, calc(100vh - 120px));
  background: var(--bg-surface);
  border: var(--toolbar-panel-border);
  border-radius: var(--toolbar-panel-radius);
  box-shadow: var(--toolbar-panel-shadow);
  display: flex;
  flex-direction: column;
  z-index: 10;
  overflow: hidden;
  animation: bepIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.bep-bz-search-wrap {
  flex-shrink: 0;
  padding: 6px 8px;
  border-bottom: 1px solid var(--primary-15);
}
[data-theme="light"] .bep-bz-search-wrap {
  border-bottom-color: var(--border);
}
.bep-bz-search {
  width: 100%;
  box-sizing: border-box;
  background: var(--primary-06);
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  color: var(--text-1);
  font-size: 12.5px;
  font-family: inherit;
  padding: 5px 10px;
  outline: none;
  transition: border-color 0.15s;
}
.bep-bz-search:focus {
  border-color: var(--primary);
}
.bep-bz-search::placeholder {
  color: var(--text-3);
}
.bep-bz-search::-webkit-search-cancel-button {
  -webkit-appearance: none;
  display: none;
}
[data-theme="light"] .bep-bz-search {
  background: rgba(0, 0, 0, 0.03);
  border-color: var(--border);
}

.bep-bz-panel .bep-bz-zoom-current {
  flex-shrink: 0;
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom: 1px solid var(--primary-dim);
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px;
  font-size: 11.5px;
}
.bep-bz-panel .bep-bz-zoom-current:hover {
  border-left: none;
}

.bep-bz-ranklist {
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(42vh, 280px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--primary-dim) transparent;
}
.bep-bz-ranklist::-webkit-scrollbar {
  width: 3px;
}
.bep-bz-ranklist::-webkit-scrollbar-track {
  background: transparent;
}
.bep-bz-ranklist::-webkit-scrollbar-thumb {
  background: var(--primary-dim);
  border-radius: 2px;
}
.bep-bz-empty {
  padding: 10px 12px;
  font-size: 11px;
  color: var(--text-3);
}

.bep-vh-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px 8px;
  border-bottom: 1px solid var(--primary-15);
  flex-shrink: 0;
}
[data-theme="light"] .bep-vh-header {
  border-bottom-color: var(--border);
}

.bep-vh-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
}

.bep-vh-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: none;
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--text-3);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.bep-vh-close:hover {
  background: rgba(224, 79, 104, 0.1);
  border-color: rgba(224, 79, 104, 0.25);
  color: var(--danger);
}

.bep-vh-list {
  overflow-y: auto;
  flex: 0 1 auto;
  max-height: 168px;
  min-height: 0;
  padding: 6px 0;
}
.bep-vh-list::-webkit-scrollbar { width: 4px; }
.bep-vh-list::-webkit-scrollbar-track { background: transparent; }
.bep-vh-list::-webkit-scrollbar-thumb { background: var(--primary-20); border-radius: 2px; }

.bep-vh-loader,
.bep-vh-empty {
  padding: 20px 14px;
  font-size: 12px;
  color: var(--text-3);
  text-align: center;
  line-height: 1.5;
}

.bep-vh-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  transition: background 0.1s;
  cursor: pointer;
}
.bep-vh-item:hover {
  background: var(--primary-08, rgba(108, 95, 228, 0.08));
}
.bep-vh-item.is-selected {
  background: var(--primary-12, rgba(108, 95, 228, 0.14));
}

.bep-vh-preview {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  border-top: 1px solid var(--primary-15);
}
[data-theme="light"] .bep-vh-preview {
  border-top-color: var(--border);
}

.bep-vh-preview-hint {
  flex-shrink: 0;
  padding: 8px 12px 6px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-3);
}

.bep-vh-preview-body {
  flex: 1;
  min-height: 120px;
  max-height: 260px;
  overflow: auto;
  padding: 0 10px 10px;
}
.bep-vh-preview-body::-webkit-scrollbar { width: 4px; }
.bep-vh-preview-body::-webkit-scrollbar-track { background: transparent; }
.bep-vh-preview-body::-webkit-scrollbar-thumb { background: var(--primary-20); border-radius: 2px; }

.bep-vh-preview-shield {
  pointer-events: none;
  user-select: none;
}

.bep-vh-preview-snapshot .block-content {
  font-size: 12px;
}
.bep-vh-preview-snapshot .bc-canvas-header {
  margin-bottom: 6px;
}

.bep-vh-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.bep-vh-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--primary-15);
}
.bep-vh-avatar--initials {
  background: var(--primary-20);
  color: var(--primary);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  align-items: center;
  justify-content: center;
}

.bep-vh-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.bep-vh-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bep-vh-time {
  font-size: 11px;
  color: var(--text-3);
}

.bep-vh-trigger {
  font-size: 10px;
  color: var(--text-3);
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.bep-vh-restore {
  flex-shrink: 0;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 500;
  background: var(--primary-12);
  border: 1px solid var(--primary-25);
  border-radius: 4px;
  color: var(--primary);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  white-space: nowrap;
}
.bep-vh-restore:hover {
  background: var(--primary-20);
  border-color: var(--primary-35);
  color: var(--text-1);
}

/* ── Version-history diff view ── */
.bep-vh-diff-view {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0 2px;
}

.bep-vh-diff-section {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.bep-vh-diff-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 0 1px;
}

.bep-vh-diff-body {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-1);
  word-break: break-word;
}

.bep-vh-diff-body--text {
  background: rgba(255,255,255,0.03);
  border-radius: 5px;
  padding: 7px 9px;
  border: 1px solid var(--primary-12);
}
[data-theme="light"] .bep-vh-diff-body--text {
  background: rgba(0,0,0,0.025);
}

.bep-vh-diff-ins {
  background: rgba(52, 211, 153, 0.18);
  color: #6ee7b7;
  border-radius: 2px;
  padding: 0 1px;
}
[data-theme="light"] .bep-vh-diff-ins {
  background: rgba(16, 185, 129, 0.15);
  color: #065f46;
}

.bep-vh-diff-del {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
  border-radius: 2px;
  padding: 0 1px;
  text-decoration: line-through;
  text-decoration-color: rgba(239, 68, 68, 0.6);
}
[data-theme="light"] .bep-vh-diff-del {
  background: rgba(239, 68, 68, 0.1);
  color: #991b1b;
}

.bep-vh-diff-same-msg {
  font-size: 11.5px;
  color: var(--text-3);
  font-style: italic;
}

.bep-vh-diff-ellipsis {
  color: var(--text-3);
  font-style: italic;
  opacity: 0.6;
  font-size: 11.5px;
}
.bep-vh-diff-same-msg--center {
  display: block;
  text-align: center;
  padding: 12px 0;
}

/* Checklist diff */
.bep-vh-diff-body--checklist {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.bep-vh-diff-cl-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12.5px;
  line-height: 1.5;
  padding: 2px 6px;
  border-radius: 4px;
}
.bep-vh-diff-cl-row--ins {
  background: rgba(52, 211, 153, 0.12);
  color: #6ee7b7;
}
[data-theme="light"] .bep-vh-diff-cl-row--ins {
  background: rgba(16, 185, 129, 0.1);
  color: #065f46;
}
.bep-vh-diff-cl-row--del {
  background: rgba(239, 68, 68, 0.1);
  color: #fca5a5;
  text-decoration: line-through;
  text-decoration-color: rgba(239, 68, 68, 0.45);
}
[data-theme="light"] .bep-vh-diff-cl-row--del {
  background: rgba(239, 68, 68, 0.08);
  color: #991b1b;
}
.bep-vh-diff-cl-row--changed {
  background: rgba(251, 191, 36, 0.1);
  color: var(--text-1);
}
.bep-vh-diff-cl-row--same {
  color: var(--text-2);
  opacity: 0.55;
}

.bep-vh-diff-cl-check {
  flex-shrink: 0;
  font-size: 13px;
  line-height: 1;
}
.bep-vh-diff-cl-text { flex: 1; min-width: 0; }
.bep-vh-diff-cl-state {
  flex-shrink: 0;
  font-size: 10px;
  font-style: italic;
  color: #fbbf24;
  opacity: 0.85;
}

/* Drawing diff */
.bep-vh-diff-drawing-sbs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.bep-vh-diff-drawing-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bep-vh-diff-drawing-caption {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 4px;
  border-radius: 3px;
  text-align: center;
}
.bep-vh-diff-drawing-caption--old {
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
}
[data-theme="light"] .bep-vh-diff-drawing-caption--old {
  background: rgba(239, 68, 68, 0.1);
  color: #991b1b;
}
.bep-vh-diff-drawing-caption--new {
  background: rgba(52, 211, 153, 0.12);
  color: #6ee7b7;
}
[data-theme="light"] .bep-vh-diff-drawing-caption--new {
  background: rgba(16, 185, 129, 0.1);
  color: #065f46;
}

.bep-vh-diff-drawing-img {
  width: 100%;
  border-radius: 4px;
  border: 1px solid var(--primary-15);
  object-fit: contain;
  background: rgba(255,255,255,0.03);
}

.bep-vh-diff-drawing-empty {
  font-size: 11px;
  color: var(--text-3);
  text-align: center;
  padding: 16px 0;
  font-style: italic;
}

/* Image chips */
.bep-vh-diff-body--images {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bep-vh-diff-img-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.bep-vh-diff-img-chip--ins {
  background: rgba(52, 211, 153, 0.1);
  color: #6ee7b7;
  border: 1px solid rgba(52, 211, 153, 0.2);
}
[data-theme="light"] .bep-vh-diff-img-chip--ins {
  background: rgba(16, 185, 129, 0.08);
  color: #065f46;
  border-color: rgba(16, 185, 129, 0.2);
}
.bep-vh-diff-img-chip--del {
  background: rgba(239, 68, 68, 0.09);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.18);
}
[data-theme="light"] .bep-vh-diff-img-chip--del {
  background: rgba(239, 68, 68, 0.07);
  color: #991b1b;
  border-color: rgba(239, 68, 68, 0.15);
}

.bep-vh-diff-img-thumb {
  width: 64px;
  height: 48px;
  object-fit: cover;
  border-radius: 3px;
}

/* URL rows */
.bep-vh-diff-body--urls {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bep-vh-diff-url-row {
  font-size: 11px;
  font-family: monospace;
  padding: 3px 7px;
  border-radius: 4px;
  word-break: break-all;
}
.bep-vh-diff-url-row--ins {
  background: rgba(52, 211, 153, 0.1);
  color: #6ee7b7;
}
[data-theme="light"] .bep-vh-diff-url-row--ins {
  background: rgba(16, 185, 129, 0.08);
  color: #065f46;
}
.bep-vh-diff-url-row--del {
  background: rgba(239, 68, 68, 0.09);
  color: #fca5a5;
  text-decoration: line-through;
  text-decoration-color: rgba(239, 68, 68, 0.45);
}
[data-theme="light"] .bep-vh-diff-url-row--del {
  background: rgba(239, 68, 68, 0.07);
  color: #991b1b;
}

/* Table diff */
.bep-vh-diff-body--table {
  overflow-x: auto;
}

.bep-vh-diff-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 11.5px;
}

.bep-vh-diff-table-cell {
  border: 1px solid var(--primary-12);
  padding: 3px 6px;
  max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-2);
}
[data-theme="light"] .bep-vh-diff-table-cell {
  border-color: var(--border);
}

.bep-vh-diff-table-cell--ins {
  background: rgba(52, 211, 153, 0.1);
  color: #6ee7b7;
}
[data-theme="light"] .bep-vh-diff-table-cell--ins {
  background: rgba(16, 185, 129, 0.08);
  color: #065f46;
}
.bep-vh-diff-table-cell--changed {
  background: rgba(251, 191, 36, 0.07);
}

/* Toggle button */
.bep-vh-toggle-view {
  display: block;
  margin: 8px auto 0;
  padding: 3px 10px;
  font-size: 10.5px;
  font-weight: 500;
  background: none;
  border: 1px solid var(--primary-20);
  border-radius: 4px;
  color: var(--text-3);
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
  letter-spacing: 0.02em;
}
.bep-vh-toggle-view:hover {
  border-color: var(--primary-40);
  color: var(--text-2);
}

/* ── Undo / redo toast ── */
.undo-redo-toast {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  z-index: 9000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  background: rgba(18, 14, 40, 0.94);
  border: 1px solid var(--primary-25);
  border-radius: 20px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-1);
  white-space: nowrap;
}
[data-theme="light"] .undo-redo-toast {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}
.undo-redo-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: none;
}
.undo-redo-toast svg {
  flex-shrink: 0;
  color: var(--primary);
  opacity: 0.85;
}

/* ================================================================
   Block Stacking
   ================================================================ */

/* Offset backing cards rendered behind the stack-top block */
.block-stack-backing {
  position: absolute;
  background: var(--bg-surface);
  border: 1px solid var(--border-dim);
  border-top: 3px solid var(--primary);
  border-radius: 6px;
  pointer-events: none;
  z-index: 1;
}

.stack-fan-source--hidden {
  visibility: hidden !important;
}

/* Title header that peeks above the top card — height matches PEEK_PER_CARD in JS */
.block-stack-backing__title {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-2);
  height: 14px;
  line-height: 14px;
  padding: 0 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Count badge on the top card */
.stack-count-badge {
  --badge-color: var(--primary);
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: var(--badge-color);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 20px;
  pointer-events: none;
  z-index: 10;
  letter-spacing: 0.03em;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
  user-select: none;
}


/* Stack slideshow overlay — card that fills center of bep-lightbox */
.stack-slideshow-card {
  width: min(88vw, 560px);
  max-height: 78vh;
  background: var(--bg-surface);
  border-radius: var(--r);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 4px 40px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.07);
  transition: transform 0.12s;
  user-select: none;
}
[data-theme="light"] .stack-slideshow-card {
  box-shadow:
    0 0 0 1px var(--border-dim),
    0 12px 48px rgba(10, 12, 20, 0.14);
}
.stack-slideshow-card:hover {
  transform: scale(1.012);
}

.stack-slideshow-card-header {
  --card-color: var(--primary);
  background: var(--card-color);
  padding: 12px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex-shrink: 0;
}

.stack-slideshow-card-type {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.stack-slideshow-card-title {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stack-slideshow-card-preview {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 14px 16px;
}
.stack-slideshow-card-preview .block-content--for-hover-tip {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-1);
  padding: 0;
}
.stack-slideshow-card-preview .block-content--for-hover-tip .bc-canvas-tray,
.stack-slideshow-card-preview .block-content--for-hover-tip .bc-text {
  padding: 0;
  margin: 0;
}
.stack-slideshow-card-preview .block-content--for-hover-tip h1,
.stack-slideshow-card-preview .block-content--for-hover-tip h2,
.stack-slideshow-card-preview .block-content--for-hover-tip h3 {
  font-size: 14px;
  margin: 0 0 4px;
}
.stack-slideshow-card-preview .block-content--for-hover-tip img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

/* Stack-top block: no shadow — rely on selection ring only */
.block.is-stack-top {
  box-shadow: none;
}
.is-edit-mode .block.is-stack-top {
  cursor: grab;
}

/* Drop target highlight when dragging a block onto another */
.block.is-stack-drop-target {
  border-color: var(--primary) !important;
  border-top-color: var(--primary) !important;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--primary) 50%, transparent),
    0 6px 24px rgba(0,0,0,0.5) !important;
  background: color-mix(in srgb, var(--primary) 10%, var(--bg-surface)) !important;
}
.block.is-stack-drop-target::after {
  content: "Stack";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  pointer-events: none;
  letter-spacing: 0.04em;
  z-index: 20;
  animation: popupIn 0.12s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Stack drop prompt (context-menu style) ── */
.stack-drop-prompt {
  min-width: 160px;
  animation: popupIn 0.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.stack-drop-prompt-label {
  font-size: 11.5px;
  color: var(--text-2);
  padding: 4px 8px 6px;
  font-weight: 500;
}
.stack-drop-prompt-btns {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.stack-drop-confirm {
  color: var(--primary-text);
  font-weight: 600;
}
.stack-drop-confirm svg {
  flex-shrink: 0;
}

/* ── Fan-out overlay ── */
.stack-fan-overlay {
  position: fixed;
  z-index: calc(var(--avq-canvas-hud-z, 9999) + 10);
  user-select: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none; /* let canvas pan/zoom pass through empty areas */
}

.stack-fan-stage {
  position: relative;
  width: 360px;
  height: 180px;
  overflow: visible;
  pointer-events: none;
}

/* Each card in the fan — shares a common pivot at stage bottom-center */
.stack-fan-card {
  pointer-events: auto;
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 100px;
  height: 140px;
  margin-left: -50px;
  transform-origin: 50% 155%;
  transform: rotate(var(--fan-rot, 0deg));
  border-radius: 8px 8px 3px 3px;
  background: var(--bg-surface);
  border: 1.5px solid color-mix(in srgb, var(--card-color, var(--primary)) 25%, var(--border-dim));
  border-top: 3px solid var(--card-color, var(--primary));
  cursor: grab;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.15s,
              border-color 0.15s;
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
  padding: 8px 8px 6px;
  overflow: hidden;
}

.stack-fan-card:hover {
  transform: rotate(var(--fan-rot, 0deg)) translateY(-20px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.55),
              0 0 0 1.5px color-mix(in srgb, var(--card-color, var(--primary)) 50%, transparent);
}


.stack-fan-card.is-dragging {
  opacity: 0.25;
  pointer-events: none;
}

.stack-fan-card-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  flex-shrink: 0;
}

.stack-fan-card-type {
  font-size: 8.5px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 5px;
  flex-shrink: 0;
}

/* Block content preview inside the fan card — bleeds to card edges like link-pill preview */
.stack-fan-card-preview {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border-radius: 0 0 3px 3px;
  background: none;
  position: relative;
  /* extend past the card's 8px side padding and 6px bottom padding */
  margin: 0 -8px -6px;
  width: calc(100% + 16px);
  pointer-events: none;
}
.stack-fan-card-preview,
.stack-fan-card-preview * {
  pointer-events: none !important;
  user-select: none !important;
}
/* Render at 200px then scale 0.5 → 100px = full card width. Mirrors link-pill scaler. */
.stack-fan-card-preview-scaler {
  position: absolute;
  left: 0;
  top: 0;
  width: 200px;
  transform-origin: top left;
  transform: scale(0.5);
  pointer-events: none !important;
}
.stack-fan-card-preview .block-content--for-hover-tip {
  padding: 4px 5px;
  font-size: 11px;
  line-height: 1.42;
}
/* Fade bottom edge so it doesn't look cut off */
.stack-fan-card-preview::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20px;
  background: linear-gradient(transparent, var(--bg-surface));
  pointer-events: none;
  border-radius: 0 0 3px 3px;
}

/* Dissolve button below the fan */
.stack-fan-dissolve {
  margin-top: 72px;
  pointer-events: auto;
  background: color-mix(in srgb, var(--danger, #e04f68) 18%, var(--bg-surface));
  border: 1px solid color-mix(in srgb, var(--danger, #e04f68) 50%, transparent);
  color: color-mix(in srgb, var(--danger, #e04f68) 90%, var(--text-1));
  font-size: 11px;
  font-weight: 500;
  padding: 4px 14px;
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  flex-shrink: 0;
}
.stack-fan-dissolve:hover {
  background: color-mix(in srgb, var(--danger, #e04f68) 30%, var(--bg-surface));
  color: color-mix(in srgb, var(--danger, #e04f68) 90%, var(--text-1));
  border-color: color-mix(in srgb, var(--danger, #e04f68) 65%, transparent);
}

/* Close button below the fan (always shown) */
.stack-fan-close {
  pointer-events: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border-dim);
  color: var(--text-2);
  font-size: 11px;
  font-weight: 500;
  padding: 4px 14px;
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  flex-shrink: 0;
}
.stack-fan-close:hover {
  background: var(--bg-hover, var(--bg-surface-2));
  color: var(--text-1);
  border-color: var(--border);
}

/* Ghost card when dragging out of the fan */
.stack-fan-drag-ghost {
  position: fixed;
  pointer-events: none;
  z-index: calc(var(--avq-canvas-hud-z, 9999) + 20);
  width: 90px;
  height: 120px;
  background: var(--bg-elevated);
  border: 1.5px solid var(--border-bright);
  border-top: 3px solid var(--card-color, var(--primary));
  border-radius: 8px 8px 3px 3px;
  padding: 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.55);
  opacity: 0.88;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.stack-fan-drag-ghost-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-1);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  line-height: 1.3;
}

/* Drop indicator shown between fan cards while reordering */
.stack-fan-drop-indicator {
  position: absolute;
  bottom: 0;
  width: 3px;
  height: 158px;
  background: var(--primary, #6c5fe4);
  border-radius: 2px 2px 0 0;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 300;
  box-shadow: 0 0 10px color-mix(in srgb, var(--primary, #6c5fe4) 70%, transparent),
              0 0 3px var(--primary, #6c5fe4);
  animation: fan-indicator-pulse 0.7s ease-in-out infinite;
}

@keyframes fan-indicator-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* ================================================================
   Split Canvas Panel
================================================================ */
.sc-panel {
  position: fixed;
  bottom: var(--avq-floating-above-toolbar);
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100vw - 32px);
  background: var(--bg-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: var(--toolbar-panel-border);
  border-top: var(--toolbar-panel-top);
  border-radius: var(--toolbar-panel-radius);
  box-shadow: var(--toolbar-panel-shadow);
  z-index: 5000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: sc-panel-in 0.15s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes sc-panel-in {
  from { opacity: 0; transform: translateX(-50%) translateY(6px) scale(0.97); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
#app:has(.toolbar.is-constellation) .sc-panel {
  bottom: var(--avq-const-bottom-clearance);
}

.sc-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px 6px;
  border-bottom: 1px solid var(--border-dim);
  flex-shrink: 0;
}
.sc-panel__title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
  user-select: none;
}

.sc-panel__slots {
  display: flex;
  flex-direction: row;
  gap: 10px;
  padding: 12px;
  overflow-x: auto;
  align-items: flex-start;
  scrollbar-width: thin;
  scrollbar-color: var(--border-dim) transparent;
}
.sc-panel__slots::-webkit-scrollbar { height: 4px; }
.sc-panel__slots::-webkit-scrollbar-track { background: transparent; }
.sc-panel__slots::-webkit-scrollbar-thumb { background: var(--border-dim); border-radius: 2px; }

/* Individual canvas slot card */
.sc-slot {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
}

.sc-slot__thumb {
  width: 148px;
  height: 92px;
  border-radius: 6px;
  border: 1.5px solid var(--border-dim);
  overflow: hidden;
  position: relative;
  transition: border-color 0.12s, box-shadow 0.12s;
  background: var(--bg-void);
}
.sc-slot:hover .sc-slot__thumb {
  border-color: var(--text-3);
}
.sc-slot--active .sc-slot__thumb {
  border-color: var(--primary, #6ab4ff);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary, #6ab4ff) 30%, transparent);
}
.sc-slot--active:hover .sc-slot__thumb {
  border-color: var(--primary, #6ab4ff);
}

.sc-slot__canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.sc-slot__empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-4, rgba(255,255,255,0.12));
  font-size: 10px;
  letter-spacing: 0.04em;
}

.sc-slot__icon {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-4, rgba(255,255,255,0.18));
}

.sc-slot__label {
  font-size: 11px;
  color: var(--text-2);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 148px;
  padding: 0 2px;
  user-select: none;
}
.sc-slot--active .sc-slot__label {
  color: var(--text-1);
  font-weight: 500;
}

.sc-slot__active-dot {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary, #6ab4ff);
  pointer-events: none;
}

/* Close button (×) on each card */
.sc-slot__close {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  border: none;
  color: rgba(255,255,255,0.75);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.1s, background 0.1s;
  z-index: 2;
  padding: 0;
  flex-shrink: 0;
}
.sc-slot:hover .sc-slot__close {
  opacity: 1;
}
.sc-slot__close:hover {
  background: rgba(210,45,45,0.85);
  color: #fff;
}

/* Add new slot button */
.sc-add-slot {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  flex-shrink: 0;
}
.sc-add-slot__btn {
  width: 148px;
  height: 92px;
  border-radius: 6px;
  border: 1.5px dashed var(--border-dim);
  background: none;
  color: var(--text-3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.sc-add-slot__btn:hover {
  border-color: var(--text-2);
  color: var(--text-1);
  background: var(--hover-bg);
}
.sc-add-slot__label {
  font-size: 11px;
  color: var(--text-3);
  user-select: none;
}

/* ================================================================
   QUEST HUD — gamification walkthrough overlay (demo mode)
   Left-anchored game overlay — Warframe / Division / Destiny style.
   z-index 150 keeps it behind toolbar-dock (200) and all panels (5000+)
   ================================================================ */

.quest-hud {
  position: fixed;
  left: 0;
  top: 90px;
  width: 240px;
  z-index: 150;
  pointer-events: none;
  font-family: 'Inter', sans-serif;
  animation: questHudSlideIn 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  user-select: none;
}

@keyframes questHudSlideIn {
  from { opacity: 0; transform: translateX(-18px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Step-progress — simple text counter */
.quest-track {
  padding: 0 0 4px 13px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.28);
  font-family: 'Inter', sans-serif;
}

/* Main card — transparent, no border */
.quest-card {
  background: none;
  border: none;
  border-radius: 0;
  padding: 2px 13px 11px 13px;
  position: relative;
  overflow: hidden;
}

/* Slide-in per quest */
.quest-card--appear {
  animation: questCardAppear 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
@keyframes questCardAppear {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Completion state */
.quest-hud--complete .quest-card {
  border-left-color: #4ec9a0;
  animation: questCardComplete 0.5s ease;
}

@keyframes questCardComplete {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.015) translateX(2px); }
  60%  { transform: scale(0.997); }
  100% { transform: scale(1); }
}

/* FFXIV-style quest list */
.quest-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Each quest row: title + objective */
.qli {
  padding: 5px 0;
}
.qli + .qli {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.qli-title {
  font-size: 12.5px;
  font-weight: 700;
  color: #c8a95a;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.1px;
}

.qli-obj {
  display: flex;
  align-items: flex-start;
  gap: 5px;
}

.qli-check {
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
  line-height: 1;
  min-width: 10px;
}

.qli-obj-text {
  font-size: 11px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Done state */
.qli--done .qli-title { color: rgba(200, 169, 90, 0.4); }
.qli--done .qli-check { color: #4ec9a0; }
.qli--done .qli-obj-text {
  color: rgba(255, 255, 255, 0.32);
  text-decoration: line-through;
  text-decoration-color: rgba(255, 255, 255, 0.2);
}

/* Active state */
.qli--active .qli-title { color: #d4b468; }
.qli--active .qli-check { color: rgba(255, 255, 255, 0.3); }
.qli--active .qli-obj-text {
  color: rgba(255, 255, 255, 0.82);
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

/* Upcoming state */
.qli--upcoming .qli-title { color: rgba(255, 255, 255, 0.2); }
.qli--upcoming .qli-check { color: rgba(255, 255, 255, 0.1); }
.qli--upcoming .qli-obj-text { color: rgba(255, 255, 255, 0.13); }

/* Light mode */
[data-theme="light"] .qli-title { color: #a07820; }
[data-theme="light"] .qli--done .qli-title { color: rgba(160, 120, 32, 0.4); }
[data-theme="light"] .qli--upcoming .qli-title { color: rgba(160, 120, 32, 0.5); }
[data-theme="light"] .qli--active .qli-obj-text { color: var(--text-1); }
[data-theme="light"] .qli--done .qli-obj-text { color: var(--text-4); }
[data-theme="light"] .qli--upcoming .qli-obj-text { color: var(--text-4); }
[data-theme="light"] .qli + .qli { border-top-color: rgba(0,0,0,0.06); }

.quest-xp-bar {
  height: 3px;
  background: rgba(108, 95, 228, 0.12);
  border-radius: 1px;
  overflow: hidden;
  margin-bottom: 4px;
}
.quest-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary) 0%, #9d8ff0 100%);
  border-radius: 1px;
  width: 0%;
  transition: width 0.85s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.quest-xp-label {
  font-size: 9.5px;
  color: rgba(255, 255, 255, 0.24);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Level-up badge */
.quest-levelup[hidden] { display: none; }
.quest-levelup {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding-bottom: 6px;
  pointer-events: none;
  opacity: 0;
}
.quest-levelup--show {
  animation: levelUpReveal 3.2s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}
@keyframes levelUpReveal {
  0%   { opacity: 0; transform: scale(0.7) translateY(10px); }
  12%  { opacity: 1; transform: scale(1.08) translateY(-4px); }
  22%  { transform: scale(1) translateY(0); }
  72%  { opacity: 1; transform: scale(1) translateY(-6px); }
  100% { opacity: 0; transform: scale(0.95) translateY(-18px); }
}

.quest-levelup-badge {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(135deg, #ffe066 0%, #ffaa00 50%, #ff7700 100%);
  border-radius: 4px;
  padding: 6px 18px;
  box-shadow:
    0 0 18px rgba(255, 200, 0, 0.55),
    0 0 40px rgba(255, 140, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.quest-levelup-label {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 4px;
  color: #3a1a00;
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
}
.quest-levelup-sub {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 200, 80, 0.8);
  font-family: 'Inter', sans-serif;
  text-shadow: 0 0 12px rgba(255, 180, 0, 0.6);
}

/* XP bar glow during level-up */
.quest-xp-strip--levelup .quest-xp-fill {
  animation: levelUpBarPulse 0.35s ease-in-out 6 alternate;
}
.quest-xp-strip--levelup .quest-xp-bar {
  box-shadow: 0 0 10px rgba(255, 200, 0, 0.45);
  transition: box-shadow 0.3s;
}
@keyframes levelUpBarPulse {
  from { filter: brightness(1); }
  to   { filter: brightness(2) saturate(0.5) sepia(1) hue-rotate(10deg); }
}

/* Minecraft-style XP strip above the toolbar */
.quest-xp-strip {
  width: 100%;
  padding: 0 0 5px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  box-sizing: border-box;
  position: relative;
}

.quest-xp-strip .quest-xp-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  font-family: 'Inter', sans-serif;
}

.quest-xp-strip .quest-xp-bar {
  width: 100%;
  height: 4px;
  background: rgba(108, 95, 228, 0.15);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 0;
}

[data-theme="light"] .quest-xp-strip .quest-xp-label { color: var(--text-3); }
[data-theme="light"] .quest-xp-strip .quest-xp-bar { background: rgba(108, 95, 228, 0.12); }

/* CTA button */
.quest-cta-btn {
  background: rgba(108, 95, 228, 0.8);
  color: #fff;
  border: 1px solid rgba(108, 95, 228, 0.5);
  border-radius: 4px;
  padding: 7px 12px;
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  letter-spacing: 0.3px;
  transition: background 0.18s, transform 0.1s;
}
.quest-cta-btn:hover { background: var(--primary); }
.quest-cta-btn:active { transform: scale(0.97); }

.quest-cta-btn--final {
  background: var(--primary);
}

/* XP pop-up text */
.quest-xp-pop {
  position: absolute;
  bottom: 4px; /* sits just above the bar */
  font-size: 11px;
  font-weight: 800;
  color: #4ec9a0;
  opacity: 0;
  pointer-events: none;
  letter-spacing: 0.5px;
  white-space: nowrap;
  text-shadow: 0 0 10px rgba(78, 201, 160, 0.45);
}
.quest-xp-pop--show {
  animation: questXpPop 1.3s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}
@keyframes questXpPop {
  0%   { opacity: 0; transform: translateX(-50%) translateY(0) scale(0.8); }
  18%  { opacity: 1; transform: translateX(-50%) translateY(-6px) scale(1.1); }
  75%  { opacity: 1; transform: translateX(-50%) translateY(-20px) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-28px) scale(0.9); }
}

/* Discord community popup */
.discord-popup-overlay[hidden] { display: none; }
.discord-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 6000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(3px);
  animation: discordOverlayIn 0.18s ease both;
}
@keyframes discordOverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.discord-popup-card {
  position: relative;
  background: var(--bg-surface);
  border: var(--toolbar-panel-border);
  border-radius: var(--toolbar-panel-radius);
  padding: 20px 20px 16px;
  max-width: 320px;
  width: calc(100vw - 40px);
  animation: discordCardIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes discordCardIn {
  from { opacity: 0; transform: translateY(6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

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

.discord-popup-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: 0.1px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.discord-popup-logo {
  width: 16px;
  height: 16px;
  color: #5865f2;
  flex-shrink: 0;
}

.discord-popup-close {
  background: none;
  border: none;
  color: var(--text-3);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
  transition: color 0.15s;
  font-family: inherit;
}
.discord-popup-close:hover { color: var(--text-1); }

.discord-popup-desc {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.6;
  margin: 0 0 16px;
}

.discord-popup-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.discord-popup-btn {
  display: block;
  width: 100%;
  padding: 8px 14px;
  border-radius: var(--toolbar-panel-radius);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  box-sizing: border-box;
  letter-spacing: 0.2px;
}
.discord-popup-btn--primary {
  background: var(--primary);
  color: #fff;
  border: none;
}
.discord-popup-btn--primary:hover { opacity: 0.88; }
.discord-popup-btn--secondary {
  background: none;
  border: var(--toolbar-panel-border);
  color: var(--text-2);
}
.discord-popup-btn--secondary:hover { color: var(--text-1); }

/* Toolbar button hint pulse */
.quest-hint-pulse {
  animation: questHintPulse 0.9s ease-in-out 4;
}
body.quest-hint-tag         .canvas-selection-popup [aria-label="Tags"],
body.quest-hint-link        .canvas-selection-popup [aria-label="Links"],
body.quest-hint-open-editor .canvas-selection-popup [aria-label="Edit"],
body.quest-hint-group       .canvas-selection-popup [aria-label="Group"],
body.quest-hint-switch-type .block-editor-popup .bep-settings-top-btn,
body.quest-hint-pin-editor  .block-editor-popup .bep-pin-btn {
  animation: questHintPulse 0.9s ease-in-out infinite;
}

/* Dock zone edge indicators (q-dock-editor) */
.quest-dock-zone {
  position: fixed;
  z-index: 149;
  pointer-events: none;
  animation: dockZonePulse 1.6s ease-in-out infinite;
}
.quest-dock-zone--top    { top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(to bottom, rgba(108,95,228,0.6), transparent); }
.quest-dock-zone--bottom { bottom: 0; left: 0; right: 0; height: 6px; background: linear-gradient(to top, rgba(108,95,228,0.6), transparent); }
.quest-dock-zone--left   { top: 0; left: 0; bottom: 0; width: 6px; background: linear-gradient(to right, rgba(108,95,228,0.6), transparent); }
.quest-dock-zone--right  { top: 0; right: 0; bottom: 0; width: 6px; background: linear-gradient(to left, rgba(108,95,228,0.6), transparent); }
@keyframes dockZonePulse {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 1; }
}
@keyframes questHintPulse {
  0%, 100% { box-shadow: none; }
  50%       { box-shadow: 0 0 0 3px rgba(108, 95, 228, 0.5); }
}

/* Light mode adjustments */
[data-theme="light"] .quest-card {
  background: rgba(248, 249, 253, 0.95);
  box-shadow: inset 1px 0 0 rgba(108, 95, 228, 0.06);
}
[data-theme="light"] .quest-hud--complete .quest-card {
  border-left-color: #2e9472;
}
[data-theme="light"] .quest-xp-bar {
  background: rgba(108, 95, 228, 0.1);
}
[data-theme="light"] .quest-xp-label { color: var(--text-4); }

/* Mobile: keep same top-left position, just adjust card padding */
@media (max-width: 640px) {
  .quest-hud {
    width: 250px;
    opacity: 0.88;
  }
  .quest-hud:hover,
  .quest-hud:focus-within {
    opacity: 1;
  }
  .quest-card {
    padding: 11px 12px 10px 14px;
  }
}

/* ── Block Compass ───────────────────────────────────────────────────────── */
#block-compass {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 19;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.block-compass-svg {
  position: absolute;
  left: 50%;
  top: 50%;
  overflow: visible;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.block-compass-shape {
  opacity: 0.5;
  fill: var(--primary);
  stroke: var(--primary);
}
.block-compass-shape--sm { opacity: 0.38; }
.block-compass-shape--xs { opacity: 0.28; }