/* ============================================================
   show-lab — style.css
   Mobile-first. Apple-inspired. Clean and calm.
   Base target: 375px. Enhanced at 768px+.
   ============================================================ */

/* ─── Design tokens ─────────────────────────────────────────── */
:root {
  --color-bg:            #0b111a;
  --color-surface:       #121b28;
  --color-surface-2:     #1a2638;
  --color-primary:       #5ea0ff;
  --color-primary-dark:  #3d79dc;
  --color-danger:        #ff6b6b;
  --color-warning:       #f8c75c;
  --color-success:       #4fd9a6;
  --color-text:          #e6edf7;
  --color-text-2:        #b9c6d9;
  --color-text-muted:    #8fa2bd;
  --color-border:        #26354b;
  --color-border-light:  #1f2c40;
  --color-overlay:       rgba(5,10,18,0.72);
  --color-stage-dir:     #f5d98b;
  --color-stage-dir-bg:  #2f2510;

  --font-sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:  'Courier New', Courier, monospace;

  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  20px;
  --radius-pill: 100px;

  --shadow-xs:  0 1px 3px rgba(0,0,0,0.32);
  --shadow-sm:  0 4px 14px rgba(0,0,0,0.28);
  --shadow-md:  0 10px 28px rgba(0,0,0,0.32);
  --shadow-sheet: 0 -10px 34px rgba(0,0,0,0.4);

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;

  --nav-top-h:    52px;
  --nav-bottom-h: 56px;
  --safe-top:     env(safe-area-inset-top, 0px);
  --safe-bottom:  env(safe-area-inset-bottom, 0px);
}

/* ─── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  background: radial-gradient(1200px 700px at 20% -10%, #1b2d44 0%, transparent 55%), var(--color-bg);
  color: var(--color-text);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}
.fa-solid,
.fa-regular,
.fa-brands {
  line-height: 1;
}
img { display: block; max-width: 100%; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select {
  font-family: inherit;
  font-size: 1rem;
  color: var(--color-text);
}
input::placeholder,
textarea::placeholder {
  color: var(--color-text-muted);
}

/* ─── Top nav ────────────────────────────────────────────────── */
.top-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: calc(var(--nav-top-h) + var(--safe-top));
  padding-top: var(--safe-top);
  background: rgba(11,17,26,0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border-light);
  display: flex;
  align-items: flex-end;
  padding-bottom: var(--space-2);
  padding-left: var(--space-4);
  padding-right: var(--space-4);
  gap: var(--space-2);
}
.top-nav-left  { flex: 1; display: flex; align-items: center; min-width: 0; }
.top-nav-title { flex: 2; text-align: center; font-weight: 600; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-nav-right { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); }

.nav-back {
  font-size: 1.5rem;
  color: var(--color-primary);
  line-height: 1;
  padding: 0 var(--space-1);
  text-decoration: none;
}
.nav-project-name {
  font-size: 0.85rem;
  color: var(--color-primary);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}
.nav-app-name { font-size: 0.9rem; font-weight: 600; }
.nav-icon-btn {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  font-size: 1.1rem;
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius-pill);
}
.nav-icon-btn:hover { background: rgba(255,255,255,0.06); }
.nav-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  object-fit: cover;
}
.nav-avatar-placeholder {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.badge {
  position: absolute;
  top: 2px; right: 2px;
  background: var(--color-danger);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: var(--radius-pill);
  min-width: 16px;
  text-align: center;
  line-height: 1.4;
}
.badge-sm {
  font-size: 0.6rem;
  background: var(--color-danger);
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 0 3px;
  vertical-align: super;
  margin-left: 1px;
}

/* ─── Main content ───────────────────────────────────────────── */
.main-content {
  padding-top: calc(var(--nav-top-h) + var(--safe-top) + var(--space-4));
  padding-bottom: calc(var(--nav-bottom-h) + var(--safe-bottom) + var(--space-4));
  padding-left: var(--space-4);
  padding-right: var(--space-4);
  min-height: 100dvh;
}
.main-content-wide { max-width: 720px; margin: 0 auto; }

/* ─── Bottom nav ─────────────────────────────────────────────── */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 100;
  height: calc(var(--nav-bottom-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: rgba(11,17,26,0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--color-border-light);
  display: flex;
  align-items: flex-start;
  padding-top: var(--space-2);
}
.bottom-nav-item {
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: 2px;
  padding: var(--space-1) 0;
  color: var(--color-text-muted);
  font-size: 0.65rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s;
}
.bottom-nav-item.active { color: var(--color-primary); }
.bottom-nav-item:hover  { color: var(--color-primary); }
.bottom-nav-icon { font-size: 1.35rem; line-height: 1; }
.bottom-nav-label { line-height: 1; }

/* ─── Flash messages ─────────────────────────────────────────── */
.flash {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  font-size: 0.9rem;
  font-weight: 500;
}
.flash-success { background: rgba(79,217,166,0.16); color: #88f4cf; border: 1px solid rgba(79,217,166,0.25); }
.flash-error   { background: rgba(255,107,107,0.16); color: #ffb0b0; border: 1px solid rgba(255,107,107,0.28); }
.flash-warning { background: rgba(248,199,92,0.16); color: #f7dd9b; border: 1px solid rgba(248,199,92,0.28); }
.flash-info    { background: rgba(94,160,255,0.16); color: #b8d5ff; border: 1px solid rgba(94,160,255,0.26); }

/* ─── Auth pages ─────────────────────────────────────────────── */
.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: var(--space-6) var(--space-4);
  background: var(--color-bg);
}
.auth-container {
  width: 100%;
  max-width: 380px;
}
.auth-logo {
  text-align: center;
  margin-bottom: var(--space-8);
}
.auth-logo-icon { font-size: 3rem; display: block; margin-bottom: var(--space-2); }
.auth-logo h1   { font-size: 1.6rem; font-weight: 700; margin-bottom: var(--space-1); }
.auth-logo p    { color: var(--color-text-muted); font-size: 0.9rem; }
.auth-form      { display: flex; flex-direction: column; gap: var(--space-4); }
.auth-links {
  text-align: center;
  margin-top: var(--space-5);
  font-size: 0.9rem;
  color: var(--color-text-muted);
  display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap;
}

/* ─── Forms ──────────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: var(--space-1); }
.form-group label { font-size: 0.875rem; font-weight: 500; color: var(--color-text); }
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: 1rem;
  color: var(--color-text);
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
}
.form-group input[type="file"] {
  padding: var(--space-3);
  -webkit-appearance: auto;
  appearance: auto;
  line-height: 1.4;
}
.form-group input[type="file"]::-webkit-file-upload-button,
.form-group input[type="file"]::file-selector-button {
  margin-right: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0,122,255,0.15);
}
.form-group input[type="file"]:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0,122,255,0.15);
}
.form-group textarea { resize: vertical; min-height: 100px; }
.form-hint { font-size: 0.78rem; color: var(--color-text-muted); }
.file-input-label {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
}

/* ─── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  font-weight: 600;
  transition: opacity 0.15s, transform 0.1s;
  min-height: 44px; /* Apple HIG touch target */
  border: none;
  cursor: pointer;
}
.btn:active { transform: scale(0.97); }
.btn-primary   { background: var(--color-primary); color: #fff; }
.btn-secondary { background: var(--color-bg); color: var(--color-primary); border: 1.5px solid var(--color-border); }
.btn-danger    { background: var(--color-danger); color: #fff; }
.btn-ghost     { background: transparent; color: var(--color-primary); }
.btn-full      { width: 100%; }
.btn-sm        { padding: var(--space-2) var(--space-3); font-size: 0.82rem; min-height: 36px; }
.btn:disabled  { opacity: 0.45; pointer-events: none; }

/* ─── Cards ──────────────────────────────────────────────────── */
.card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
}
.card + .card { margin-top: var(--space-3); }
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}
.card-title { font-size: 1rem; font-weight: 600; }
.card-meta  { font-size: 0.78rem; color: var(--color-text-muted); }

/* ─── Section headers ────────────────────────────────────────── */
.section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-3);
}
.section-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text);
}
.acts-page-controls {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.acts-row-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.acts-row-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.acts-scene-list {
  margin-top: 8px;
  margin-left: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.acts-scene-row {
  border-radius: 8px;
  border: 1px solid var(--color-border-light);
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  align-items: center;
  gap: 8px;
}
.acts-scene-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.acts-scene-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.acts-scene-description {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* ─── List items ─────────────────────────────────────────────── */
.list-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.list-item {
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-text);
  transition: background 0.1s;
}
.list-item:last-child { border-bottom: none; }
.list-item:active,
.list-item:hover { background: var(--color-bg); }
.list-item-icon  { font-size: 1.25rem; flex-shrink: 0; width: 32px; text-align: center; }
.list-item-body  { flex: 1; min-width: 0; }
.list-item-title { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-item-meta  { font-size: 0.78rem; color: var(--color-text-muted); margin-top: 2px; }
.list-item-arrow { color: var(--color-text-muted); font-size: 1.1rem; flex-shrink: 0; }
.list-item-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border-bottom: 1px solid var(--color-border-light);
  padding-right: var(--space-3);
}
.list-item-row:last-child { border-bottom: none; }
.list-item-row .list-item {
  flex: 1;
  min-width: 0;
  border-bottom: 0;
}
.chat-thread-delete-btn {
  flex-shrink: 0;
  color: var(--color-danger);
}

/* ─── Script editor (chat-like) ──────────────────────────────── */
.script-filter-toggle-wrap {
  position: fixed;
  top: calc(var(--nav-top-h) + var(--space-2));
  right: var(--space-4);
  z-index: 95;
  display: flex;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
}

.script-filter-toggle {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(11, 17, 26, 0.92);
  border: 1px solid var(--color-border-light);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.script-filter-drawer {
  position: fixed;
  top: calc(var(--nav-top-h) + var(--space-2) + 42px);
  right: var(--space-4);
  width: min(320px, calc(100vw - (var(--space-4) * 2)));
  max-height: min(60vh, 480px);
  overflow: auto;
  z-index: 94;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-sheet);
}

.script-filter-drawer[hidden] {
  display: none !important;
}

.script-filter-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.script-filter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-4);
}

.script-feed {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  /* Keep final bubbles visible above fixed toolbar + bottom nav. */
  padding-bottom: calc(var(--nav-bottom-h) + var(--safe-bottom) + 72px);
}

.script-selection-toolbar {
  position: sticky;
  top: calc(var(--nav-top-h) + var(--safe-top) + var(--space-2));
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(94, 160, 255, 0.24);
  border-radius: var(--radius-lg);
  background: rgba(15, 24, 38, 0.94);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
}

.script-selection-toolbar[hidden] {
  display: none !important;
}

.script-selection-summary {
  font-size: 0.86rem;
  font-weight: 600;
  color: #cfe0ff;
}

.script-selection-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.script-toolbar .btn.is-active {
  background: rgba(94, 160, 255, 0.18);
  color: #d9e8ff;
  border-color: rgba(94, 160, 255, 0.45);
}

.script-entry {
  width: 100%;
}

.script-entry.dialogue-entry {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.script-bubble {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-xs);
  position: relative;
  touch-action: pan-y;
  transition: transform 0.2s, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  overflow: hidden;
  border: 1px solid transparent;
}
.script-bubble:active { opacity: 0.9; }
.script-bubble.script-bubble-focus {
  box-shadow: 0 0 0 2px rgba(94,160,255,0.8), var(--shadow-md);
}
.script-feed.is-selection-mode .script-bubble {
  cursor: pointer;
}
.script-bubble.is-selected {
  border-color: rgba(94, 160, 255, 0.8);
  box-shadow: 0 0 0 2px rgba(94, 160, 255, 0.28), var(--shadow-md);
}
.script-bubble.is-selected::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(94, 160, 255, 0.18);
}

.script-entry.dialogue-entry .script-bubble {
  flex: 1;
  min-width: 0;
}

.bubble-inline-controls {
  display: none;
  margin-top: var(--space-2);
  gap: 6px;
  justify-content: flex-end;
}

.script-bubble.is-active .bubble-inline-controls {
  display: flex;
}

.bubble-inline-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text-2);
  font-size: 0.76rem;
  font-weight: 600;
}

.bubble-inline-btn:hover {
  background: rgba(255, 255, 255, 0.09);
  color: var(--color-text);
}

.bubble-inline-btn-add {
  padding: 4px 10px;
}

.script-insert-marker {
  width: 100%;
  margin: 2px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.script-insert-marker-line {
  width: 100%;
  height: 0;
  border-top: 2px dashed rgba(94, 160, 255, 0.72);
}

.script-insert-marker-label {
  font-size: 0.72rem;
  line-height: 1.2;
  color: #b8d5ff;
  font-weight: 600;
}

.script-insert-marker.align-dialogue {
  padding-left: calc(46px + var(--space-2));
}

/* Stage directions */
.script-bubble.stage-dir {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-xl);
  box-shadow: none;
}
.script-bubble.stage-dir .bubble-content {
  font-style: italic;
  color: var(--color-stage-dir);
  font-size: 0.9rem;
}

/* Idea note */
.script-bubble.idea-note {
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-xl);
  box-shadow: none;
}
.script-bubble.idea-note .bubble-content {
  font-size: 0.92rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.86);
}
.script-bubble.idea-note .idea-content {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.script-bubble.idea-note .idea-icon {
  color: rgba(255, 255, 255, 0.6);
  margin-top: 1px;
  flex: 0 0 auto;
}
.script-bubble.idea-note .idea-text {
  min-width: 0;
}

.script-bubble.story-point-note {
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-xl);
  box-shadow: none;
}
.script-bubble.story-point-note .bubble-content {
  font-size: 0.92rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.9);
}
.script-bubble.story-point-note .story-point-content {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.script-bubble.story-point-note .story-point-icon {
  color: rgba(255, 255, 255, 0.62);
  margin-top: 1px;
  flex: 0 0 auto;
}
.script-bubble.story-point-note .story-point-text {
  min-width: 0;
}

/* Character header */
.bubble-char {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 2px;
}
.bubble-char-name {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

/* Dialogue layout */
.dialogue-char-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 46px;
  flex-shrink: 0;
}
.dialogue-char-col .char-avatar,
.dialogue-char-col .char-avatar-placeholder {
  width: 38px;
  height: 38px;
  border: 2px solid rgba(255,255,255,0.85);
  box-shadow: var(--shadow-xs);
}
.dialogue-char-label {
  width: 100%;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.script-bubble.dialogue .dialogue-main {
  min-width: 0;
}

.script-bubble.dialogue {
  background: var(--dialogue-bubble-color, #18263a);
  border-top-left-radius: 0;
  border-top-right-radius: var(--radius-xl);
  border-bottom-right-radius: var(--radius-xl);
  border-bottom-left-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.script-bubble.dialogue .bubble-content {
  font-size: 1rem;
  line-height: 1.45;
}

/* Song cue */
.script-bubble.song-cue {
  background: transparent;
  color: var(--color-warning);
  border: 1px solid transparent;
  border-radius: var(--radius-xl);
  box-shadow: none;
}
.script-bubble.song-cue .bubble-content {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
}
.bubble-type-label {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  color: rgba(14, 16, 21, 0.65);
  margin-right: 2px;
  line-height: 1;
}

/* Bubble meta row */
.bubble-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: 0;
  justify-content: flex-end;
  flex-wrap: wrap;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: max-height 0.2s ease, opacity 0.15s ease, margin-top 0.2s ease;
}
.script-bubble.is-active .bubble-meta {
  margin-top: var(--space-2);
  max-height: 180px;
  opacity: 1;
  pointer-events: auto;
}
.bubble-badge {
  font-size: 0.68rem;
  background: var(--color-bg);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  color: var(--color-text-muted);
}
.bubble-badge.live { background: rgba(79,217,166,0.2); color: #98f1d4; }
.bubble-badge.stale { background: rgba(248,199,92,0.2); color: #f7db97; }
.script-bubble.stage-dir.is-active .bubble-meta,
.script-bubble.song-cue.is-active .bubble-meta,
.script-bubble.idea-note.is-active .bubble-meta,
.script-bubble.story-point-note.is-active .bubble-meta {
  margin-top: var(--space-3);
}
.script-bubble.stage-dir .stars,
.script-bubble.song-cue .stars,
.script-bubble.idea-note .stars,
.script-bubble.story-point-note .stars {
  background: rgba(0, 0, 0, 0.16);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}
.script-bubble.song-cue .bubble-badge,
.script-bubble.song-cue .bubble-type-label {
  color: rgba(20, 20, 20, 0.55);
  background: rgba(255, 255, 255, 0.25);
}
.script-bubble.idea-note .bubble-type-label {
  color: var(--color-text-muted);
}
.script-bubble.story-point-note .bubble-type-label {
  color: var(--color-text-muted);
}
/* Swipe-revealed actions */
.bubble-swipe-actions {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  display: flex;
  align-items: stretch;
  transform: translateX(100%);
  transition: transform 0.2s;
}
.bubble-swipe-action {
  display: flex; align-items: center; justify-content: center;
  width: 64px;
  font-size: 1.1rem;
  color: #fff;
  cursor: pointer;
}
.bubble-swipe-action.edit   { background: var(--color-primary); }
.bubble-swipe-action.chat   { background: var(--color-success); }
.bubble-swipe-action.delete { background: var(--color-danger); }
.bubble-swipe-action.menu   { background: #7e57c2; }

.script-feed.is-selection-mode .bubble-swipe-actions {
  opacity: 0.45;
}

.script-filter-media-row {
  padding: var(--space-2) 0 0;
  margin: var(--space-2) 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.script-filter-media-row .filter-media-img {
  max-width: min(240px, 100%);
}

.script-filter-media-row .filter-media-audio {
  display: block;
  visibility: visible;
  opacity: 1;
  width: 100%;
  max-width: 280px;
  min-height: 34px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
}

.script-filter-media-row .filter-media-video {
  display: block;
  visibility: visible;
  opacity: 1;
  max-width: 280px;
  width: 100%;
  min-height: 120px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
}

.script-filter-media-row .filter-media-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0 1 280px;
  min-width: 220px;
  max-width: 100%;
}

@media (max-width: 767px) {
  .script-selection-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .script-selection-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

/* Version indicator dots */
.version-dots {
  display: flex; gap: 4px; align-items: center;
  margin-right: auto;
}
.version-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-border);
  transition: background 0.15s;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.version-dot.active { background: var(--color-primary); }

/* ─── Script bottom toolbar ───────────────────────────────────── */
.script-toolbar {
  position: fixed;
  bottom: calc(var(--nav-bottom-h) + var(--safe-bottom));
  left: 0; right: 0;
  z-index: 90;
  background: rgba(11,17,26,0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--color-border-light);
  padding: var(--space-2) var(--space-4);
  display: flex;
  gap: var(--space-2);
  align-items: center;
}
.script-toolbar select {
  flex: 1;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.875rem;
}
.script-toolbar select option {
  background: var(--color-surface);
  color: var(--color-text);
}
.script-toolbar .btn { flex-shrink: 0; }

/* ─── Import Script Sheet ───────────────────────────────────────── */
.import-sheet-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 190;
}
.import-sheet-backdrop[hidden] {
  display: none !important;
}
.import-sheet {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  top: 10vh;
  z-index: 195;
  background: var(--color-surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: import-sheet-in 0.3s cubic-bezier(0.32,0.72,0,1);
}
.import-sheet[hidden] {
  display: none !important;
}
@keyframes import-sheet-in {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.import-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
  flex-shrink: 0;
}
.import-sheet-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
}
.import-sheet-close {
  background: none; border: none;
  color: var(--color-muted);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}
.import-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: var(--space-4);
}
.import-tabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  flex-shrink: 0;
}
.import-tab {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-muted);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.import-tab.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.import-tab-content {
  flex: 1;
  overflow: auto;
  min-height: 0;
}
.import-textarea {
  width: 100%;
  height: 100%;
  min-height: 180px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  font-size: 0.9rem;
  font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
  line-height: 1.5;
  resize: none;
  background: var(--color-surface-2, var(--color-bg));
  color: var(--color-text);
}
.import-textarea::placeholder { color: var(--color-muted); opacity: 0.6; }
.import-file-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-8) var(--space-4);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  min-height: 180px;
}
.import-file-drop:hover,
.import-file-drop.drag-over {
  border-color: var(--color-primary);
  background: rgba(94,160,255,0.06);
}
.import-file-icon { font-size: 2rem; color: var(--color-muted); }
.import-file-label { font-size: 0.875rem; color: var(--color-muted); }
.import-format-help {
  flex-shrink: 0;
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: rgba(94,160,255,0.08);
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  color: var(--color-muted);
  line-height: 1.5;
}
.import-format-help code {
  background: rgba(255,255,255,0.08);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.75rem;
}
.import-step-actions {
  flex-shrink: 0;
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-light);
}
.import-stats {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}
.import-warnings {
  background: rgba(255,180,50,0.12);
  border: 1px solid rgba(255,180,50,0.3);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
  max-height: 100px;
  overflow-y: auto;
}
.import-warning-item {
  font-size: 0.78rem;
  color: #e8a735;
  line-height: 1.6;
}
.import-preview-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.import-preview-item {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  line-height: 1.5;
}
.import-preview-dialogue {
  background: rgba(94,160,255,0.08);
  border-left: 3px solid var(--color-primary);
}
.import-preview-char {
  font-weight: 700;
  color: var(--color-primary);
}
.import-preview-stage_direction {
  background: rgba(255,200,50,0.08);
  border-left: 3px solid #c9a227;
  font-style: italic;
  color: #c9a227;
}
.import-preview-bracket { opacity: 0.5; }
.import-preview-song {
  background: rgba(160,100,255,0.08);
  border-left: 3px solid #a064ff;
}
.import-preview-idea {
  background: rgba(255, 214, 102, 0.14);
  border-left: 3px solid #e0a200;
}
.import-preview-song-icon { color: #a064ff; margin-right: 4px; }
.import-preview-idea .import-preview-song-icon { color: #e0a200; }

/* ─── Import Undo Banner ────────────────────────────────────────── */
.import-undo-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  margin-bottom: var(--space-3);
  background: rgba(94,160,255,0.1);
  border: 1px solid rgba(94,160,255,0.25);
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  color: var(--color-text);
}
.import-undo-btn {
  background: var(--color-danger, #e53935) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 600;
}
.import-undo-dismiss {
  margin-left: auto;
  background: none; border: none;
  color: var(--color-muted);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
}

/* ─── Song view ───────────────────────────────────────────────── */
.song-section { margin-bottom: var(--space-6); }
.song-section-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.version-pager {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.version-viewport {
  flex: 1;
}
.version-slide[hidden] {
  display: none !important;
}
.version-nav[disabled] {
  opacity: 0.35;
  pointer-events: none;
}
.lyric-line {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  line-height: 1.8;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: background 0.1s;
}
.lyric-line:hover { background: var(--color-bg); }
.lyric-line.stale { opacity: 0.5; text-decoration: line-through; }

/* ─── Stars ──────────────────────────────────────────────────── */
.stars { display: inline-flex; gap: 2px; }
.star  { font-size: 1rem; color: var(--color-border); cursor: default; }
.star.filled { color: var(--color-warning); }
.stars-interactive .star { cursor: pointer; transition: color 0.1s; }
.stars-interactive .star:hover { color: var(--color-warning); }

/* ─── Character avatar ───────────────────────────────────────── */
.char-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.char-avatar-link {
  display: inline-flex;
  text-decoration: none;
}
.char-avatar-placeholder {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

/* ─── Chat ───────────────────────────────────────────────────── */
.chat-feed {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: transparent;
  padding: 0;
  padding-bottom: 80px; /* space for input */
}
.chat-message {
  display: flex;
  gap: var(--space-2);
  align-items: flex-end;
}
.chat-message.mine { flex-direction: row-reverse; }
.chat-bubble {
  max-width: min(82vw, 720px);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 6px 10px;
  box-shadow: var(--shadow-xs);
  font-size: 0.88rem;
  line-height: 1.4;
  white-space: pre-wrap;
  border: 1px solid var(--color-border-light);
}
.chat-message.mine .chat-bubble {
  background: #18263a;
  color: var(--color-text);
  border-color: #22344c;
}
.chat-message.ai .chat-bubble {
  background: var(--color-surface-2);
  border-left: 3px solid var(--color-primary);
}
.chat-meta {
  font-size: 0.68rem;
  color: var(--color-text-muted);
  margin-top: 2px;
  padding: 0 2px;
}
.chat-input-bar {
  position: fixed;
  bottom: calc(var(--nav-bottom-h) + var(--safe-bottom));
  left: 0; right: 0;
  z-index: 90;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border-light);
  padding: var(--space-2) var(--space-4);
  display: flex;
  gap: var(--space-2);
  align-items: flex-end;
}
.chat-attach-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  cursor: pointer;
  flex-shrink: 0;
}
.chat-input-bar textarea {
  flex: 1;
  resize: none;
  border: 1px solid var(--color-border);
  border-radius: 24px;
  padding: var(--space-2) var(--space-3);
  font-size: 0.95rem;
  max-height: 120px;
  overflow-y: auto;
  background: var(--color-bg);
  color: var(--color-text);
}
.chat-input-bar textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}
.chat-send-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.chat-send-btn:disabled { opacity: 0.4; }

.chat-attachment-queue {
  position: fixed;
  left: var(--space-4);
  right: var(--space-4);
  bottom: calc(var(--nav-bottom-h) + var(--safe-bottom) + 58px);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  z-index: 95;
}
.chat-attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-surface-2);
  color: var(--color-text);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.72rem;
}
.chat-attachment-chip-name {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-attachment-chip-remove {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-border-light);
  color: var(--color-text);
  font-size: 0.78rem;
  line-height: 1;
}
.chat-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  max-width: min(86vw, 560px);
}
.chat-attachment {
  position: relative;
  width: 96px;
  height: 96px;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-surface-2);
}
.chat-attachment-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}
.chat-attachment-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.chat-attachment-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 1.2rem;
}
.chat-attachment-delete {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(11, 17, 26, 0.75);
  color: #fff;
  font-size: 0.9rem;
  line-height: 1;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* ─── Breadcrumb ─────────────────────────────────────────────── */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
  align-items: center;
}
.breadcrumb a   { color: var(--color-primary); }
.breadcrumb-sep { color: var(--color-border); }

/* ─── Action sheet ───────────────────────────────────────────── */
.action-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--color-overlay);
}
.action-sheet {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 201;
  background: var(--color-surface);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: var(--shadow-sheet);
  padding: var(--space-2) 0 calc(var(--safe-bottom) + var(--space-4));
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32,0.72,0,1);
}
.action-sheet.open { transform: translateY(0); }
.action-sheet-handle {
  width: 36px; height: 4px;
  background: var(--color-border);
  border-radius: 2px;
  margin: 0 auto var(--space-3);
}
.action-sheet-list { }
.action-sheet-list li button {
  width: 100%;
  text-align: left;
  padding: var(--space-4) var(--space-6);
  font-size: 1rem;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border-light);
  display: flex; align-items: center; gap: var(--space-3);
}
.action-sheet-list li:last-child button { border-bottom: none; }
.action-sheet-list li button:hover { background: var(--color-bg); }
.action-sheet-list li button.danger { color: var(--color-danger); }
.action-sheet-cancel {
  width: calc(100% - 32px);
  margin: var(--space-3) 16px 0;
  padding: var(--space-4);
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-primary);
  text-align: center;
}

/* ─── Toast ──────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: calc(var(--nav-bottom-h) + var(--safe-bottom) + var(--space-4));
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  background: rgba(28,28,30,0.88);
  color: #fff;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  font-weight: 500;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.toast.show { opacity: 1; }

/* ─── AI assist ──────────────────────────────────────────────── */
.ai-page { display: flex; flex-direction: column; gap: var(--space-4); color-scheme: dark; }

/* Fields sit on .ai-panel (--color-surface); use deeper surface + border so text is readable */
.ai-page input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
.ai-page textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 0.9375rem;
  line-height: 1.45;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ai-page select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: var(--space-3) var(--space-4);
  padding-right: 2.25rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238fa2bd' d='M1.4 0L6 4.6 10.6 0 12 1.4l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  color: var(--color-text);
  font-size: 0.9375rem;
  line-height: 1.45;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
}
.ai-page input::placeholder,
.ai-page textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}
.ai-page input:focus,
.ai-page select:focus,
.ai-page textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(94, 160, 255, 0.2);
}
.ai-page select option,
.ai-page select optgroup {
  background: var(--color-surface-2);
  color: var(--color-text);
}
.ai-page .ai-inline-tools > select,
.ai-page .ai-picker-row > select {
  min-height: 40px;
}

.ai-layout {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.ai-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.ai-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.ai-panel-kicker {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  font-weight: 700;
}
.ai-panel-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text);
  margin-top: 2px;
}
.ai-panel-meta {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}
.ai-inline-tools {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.ai-helper {
  font-size: 0.78rem;
  color: var(--color-text-muted);
}
.ai-page .ai-panel details.ai-disclosure {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  margin-top: var(--space-2);
}
.ai-page .ai-panel details.ai-disclosure > summary {
  cursor: pointer;
  list-style: none;
  padding: 10px 12px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ai-page .ai-panel details.ai-disclosure > summary::-webkit-details-marker {
  display: none;
}
.ai-page .ai-panel details.ai-disclosure > summary::after {
  content: "▸";
  float: right;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.ai-page .ai-panel details.ai-disclosure[open] > summary::after {
  content: "▾";
}
.ai-page .ai-panel details.ai-disclosure > :not(summary) {
  padding: 0 12px 12px;
}
.ai-subhead {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.ai-simple-grid {
  display: grid;
  gap: var(--space-3);
}
.ai-builder-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  font-size: 0.88rem;
}
.ai-context-picker-group {
  display: grid;
  gap: 8px;
}
.ai-picker-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}
.ai-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ai-block-list,
.ai-library-list {
  display: grid;
  gap: 8px;
}
.ai-block-row,
.ai-library-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}
.ai-block-main {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.ai-block-order {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
}
.ai-block-title {
  font-size: 0.84rem;
  font-weight: 700;
}
.ai-block-subtitle {
  font-size: 0.78rem;
  color: var(--color-text-muted);
}
.ai-block-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.ai-library-manager {
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--color-border-light);
  padding-top: var(--space-3);
}
.ai-page .ai-panel details.ai-disclosure .ai-library-manager {
  border-top: 0;
  padding-top: 0;
}
.ai-library-preview {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  white-space: pre-wrap;
  max-width: 420px;
}
.ai-result {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--color-border);
  padding: var(--space-4);
  font-size: 0.9rem;
  line-height: 1.7;
  min-height: 120px;
  white-space: pre-wrap;
}
.ai-preview-warnings {
  margin-bottom: var(--space-2);
  border: 1px solid rgba(248,199,92,0.3);
  background: rgba(248,199,92,0.16);
  color: #f7dd9b;
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-size: 0.82rem;
}
.ai-preview-grid {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.ai-preview-box {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
}
.ai-preview-box-title {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: 6px;
  font-weight: 600;
}
.ai-preview-text {
  margin: 0;
  white-space: pre-wrap;
  font-size: 0.82rem;
  line-height: 1.5;
  max-height: 260px;
  overflow: auto;
  font-family: var(--font-mono);
}
.ai-section-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ai-section-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}
.ai-section-main {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ai-section-label {
  font-size: 0.84rem;
  font-weight: 600;
}
.ai-section-badge {
  font-size: 0.74rem;
  border-radius: var(--radius-pill);
  padding: 1px 8px;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
.ai-section-badge.on {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: rgba(94,160,255,0.14);
}
.ai-section-meta {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.ai-section-empty {
  font-size: 0.82rem;
  color: var(--color-text-muted);
}
.ai-advanced-edit {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ai-advanced-label {
  font-size: 0.84rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ai-plot-beat-modal {
  position: fixed;
  inset: 0;
  z-index: 320;
}
.ai-plot-beat-backdrop {
  position: absolute;
  inset: 0;
  background: var(--color-overlay);
}
.ai-plot-beat-dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(720px, calc(100% - 24px));
  max-height: min(78vh, 760px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sheet);
  padding: 12px;
}
.ai-plot-beat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ai-plot-beat-head h3 {
  margin: 0;
  font-size: 0.95rem;
}
.ai-plot-beat-list {
  display: grid;
  gap: 8px;
  padding: 2px;
  overflow: auto;
}
.ai-plot-beat-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  cursor: pointer;
}
.ai-plot-beat-item > span {
  display: grid;
  gap: 4px;
}
@media (max-width: 720px) {
  .ai-layout {
    grid-template-columns: 1fr;
  }
  .ai-picker-row,
  .ai-inline-tools {
    grid-template-columns: 1fr;
  }
  .ai-block-row,
  .ai-library-item {
    flex-direction: column;
    align-items: stretch;
  }
  .ai-plot-beat-dialog {
    width: calc(100% - 16px);
    max-height: calc(100vh - 16px);
    top: 8px;
    left: 8px;
    transform: none;
  }
}

/* ─── Book view ──────────────────────────────────────────────── */
.book-view { font-family: var(--font-mono); }
.book-front-matter {
  margin-bottom: var(--space-5);
}
.book-front-title {
  font-size: 1.35rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
  padding: var(--space-2) 0 var(--space-1);
}
.book-front-subtitle {
  text-align: center;
  font-style: italic;
  color: var(--color-text-muted);
  padding-bottom: var(--space-3);
}
.book-front-section {
  padding: var(--space-2) 0;
}
.book-front-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--color-text-muted);
  padding-bottom: var(--space-1);
}
.book-act-title {
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
  padding: var(--space-6) 0 var(--space-2);
  color: var(--color-text);
}
.book-scene-title {
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  padding: var(--space-4) 0 var(--space-2);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.book-direction {
  font-style: italic;
  color: var(--color-stage-dir);
  padding: var(--space-2) var(--space-6);
  text-align: center;
  font-size: 0.9rem;
}
.book-char-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding-top: var(--space-3);
}
.book-char-head .char-avatar,
.book-char-head .char-avatar-placeholder {
  width: 24px;
  height: 24px;
  font-size: 0.7rem;
}
.book-char-name {
  text-transform: uppercase;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.book-dialogue {
  text-align: center;
  padding: var(--space-1) var(--space-8);
  line-height: 1.8;
  font-size: 0.95rem;
}
.book-character-summary {
  font-style: italic;
}
.book-song-title {
  text-align: center;
  font-weight: 700;
  padding: var(--space-4) 0 var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.book-node-link {
  color: inherit;
  text-decoration: none;
}
.book-node-link:hover,
.book-node-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.book-node-link-block {
  display: block;
}
.book-lyric {
  text-align: center;
  font-size: 0.9rem;
  line-height: 2;
}
.book-node-block {
  scroll-margin-top: calc(var(--nav-top-h) + var(--safe-top) + 84px);
  border-radius: var(--radius-sm);
  transition: background-color 0.35s ease, box-shadow 0.35s ease;
}
.book-node-focus {
  background: var(--color-surface-2);
  box-shadow: 0 0 0 1px var(--color-primary);
}

/* ─── Node edit ──────────────────────────────────────────────── */
.node-edit-form { display: flex; flex-direction: column; gap: var(--space-4); }
.node-edit-page.node-edit-page-with-actions {
  padding-bottom: calc(var(--nav-bottom-h) + var(--safe-bottom) + 88px);
}
.node-edit-action-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--nav-bottom-h) + var(--safe-bottom));
  z-index: 95;
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--color-border-light);
  background: rgba(11,17,26,0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.node-edit-action-bar > * {
  flex: 1;
  min-width: 0;
}
.version-tabs {
  display: flex; gap: var(--space-2); overflow-x: auto;
  padding-bottom: var(--space-1);
  scrollbar-width: none;
}
.version-tabs::-webkit-scrollbar { display: none; }
.version-tab {
  flex-shrink: 0;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-border);
  font-size: 0.8rem;
  font-weight: 500;
  background: var(--color-surface);
  cursor: pointer;
  transition: all 0.15s;
}
.version-tab.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.version-tab.live::after { content: ' ✓'; }

/* ─── Drag-and-drop sort ─────────────────────────────────────── */
.sortable-list { display: flex; flex-direction: column; gap: var(--space-2); }
.sortable-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-xs);
}
.sortable-handle { cursor: grab; color: var(--color-text-muted); font-size: 1.2rem; touch-action: none; }
.sortable-handle:active { cursor: grabbing; }
.sortable-item.dragging { opacity: 0.6; box-shadow: var(--shadow-md); }

/* ─── Acts overview ──────────────────────────────────────────── */
.acts-overview-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.acts-overview-act {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: var(--space-3) var(--space-4);
}
.acts-overview-act-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.acts-overview-index {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.acts-overview-scenes {
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.acts-overview-scene {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
}
.acts-overview-scene-title {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.acts-overview-meta {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.acts-overview-empty {
  margin-top: 8px;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

/* ─── Search ─────────────────────────────────────────────────── */
.search-bar {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.search-input {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  font-size: 0.95rem;
  color: var(--color-text);
}
.search-input:focus {
  outline: none;
  border-color: var(--color-primary);
}
.search-result-type {
  font-size: 0.7rem;
  background: var(--color-bg);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  flex-shrink: 0;
}

/* ─── Notifications ──────────────────────────────────────────── */
.notif-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
  align-items: flex-start;
}
.notif-item.unread { background: rgba(94,160,255,0.08); }
.notif-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
  flex-shrink: 0;
  margin-top: 6px;
}
.notif-dot.read { background: transparent; }
.notif-body { flex: 1; min-width: 0; }
.notif-message { font-size: 0.875rem; line-height: 1.4; }
.notif-time { font-size: 0.72rem; color: var(--color-text-muted); margin-top: 2px; }

/* ─── Attachments ────────────────────────────────────────────── */
.attachment-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.attachment-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-size: 0.82rem;
  text-decoration: none;
  color: var(--color-text);
  border: 1px solid var(--color-border-light);
}
.attachment-item:hover { background: var(--color-surface); }

.attachment-manage-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.attachment-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
}
.attachment-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.attachment-card.is-live {
  border-color: rgba(79,217,166,0.5);
  box-shadow: 0 0 0 1px rgba(79,217,166,0.2) inset;
}
.attachment-card-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
}
.attachment-thumb {
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  border-radius: var(--radius-xs);
}
.attachment-audio,
.attachment-video {
  width: 100%;
}
.attachment-video {
  border-radius: var(--radius-xs);
}
.attachment-generic-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.82rem;
}
.attachment-card-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.attachment-card-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.attachment-card-detail {
  font-size: 0.74rem;
  color: var(--color-text-muted);
}
.attachment-card-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.attachment-live-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.76rem;
  color: var(--color-text-2);
}
.attachment-live-toggle input[type="checkbox"] {
  accent-color: var(--color-primary);
}
.attachment-manage-actions {
  display: flex;
  justify-content: flex-end;
}

/* ─── Admin table ────────────────────────────────────────────── */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.data-table th {
  background: var(--color-bg);
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border-light);
}
.data-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
  vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--color-bg); }

/* ─── Divider / empty state ──────────────────────────────────── */
.divider { border: none; border-top: 1px solid var(--color-border-light); margin: var(--space-4) 0; }
.empty-state {
  text-align: center;
  padding: var(--space-10) var(--space-4);
  color: var(--color-text-muted);
}
.empty-state-icon { font-size: 2.5rem; display: block; margin-bottom: var(--space-3); }
.empty-state-title { font-size: 1rem; font-weight: 600; color: var(--color-text); margin-bottom: var(--space-1); }
.empty-state p { font-size: 0.875rem; }

/* ─── Pill / tag ─────────────────────────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.4;
}
.pill-live    { background: rgba(79,217,166,0.2); color: #93efd0; }
.pill-stale   { background: rgba(248,199,92,0.2); color: #f8df9f; }
.pill-deleted { background: rgba(255,107,107,0.2); color: #ffc0c0; }
.pill-draft   { background: rgba(143,162,189,0.2); color: #d1dbe8; }
.pill-admin   { background: rgba(152,127,255,0.2); color: #cdbdff; }
.pill-editor  { background: rgba(94,160,255,0.2); color: #b8d4ff; }
.pill-viewer  { background: rgba(143,162,189,0.2); color: #d1dbe8; }

/* ─── Responsive: tablet 768px+ ─────────────────────────────── */
@media (min-width: 768px) {
  .main-content {
    /* Keep clearance for fixed bottom tabs (sidebar markup is not in layout yet). */
    padding-bottom: calc(var(--nav-bottom-h) + var(--safe-bottom) + var(--space-6));
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }
}

/* Reserved for a future sidebar; no matching markup in templates today. */
.side-nav { display: none; }

/* ─── Acts overview filter panel ────────────────────────────── */
.filter-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  overflow: hidden;
}
.filter-panel-summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.875rem;
  gap: var(--space-2);
  user-select: none;
}
.filter-panel-summary::-webkit-details-marker { display: none; }
.filter-panel[open] .filter-chevron { transform: rotate(180deg); }
.filter-chevron { transition: transform 0.2s; color: var(--color-text-muted); }
.filter-panel-body {
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-top: 1px solid var(--color-border-light);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.filter-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2) var(--space-5);
}
@media (min-width: 480px) {
  .filter-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 680px) {
  .filter-grid { grid-template-columns: repeat(5, 1fr); }
}
.filter-check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.82rem;
  color: var(--color-text-2);
  cursor: pointer;
}
.filter-check input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--color-primary);
  cursor: pointer;
  flex-shrink: 0;
}
.filter-actions {
  display: flex;
  gap: var(--space-2);
  padding-top: var(--space-1);
}

/* ─── Acts overview scene navigator ─────────────────────────── */
.scene-jump-panel {
  position: fixed;
  top: calc(var(--nav-top-h) + var(--safe-top) + var(--space-4));
  right: var(--space-4);
  z-index: 80;
  width: min(320px, calc(100vw - (var(--space-4) * 2)));
}
.scene-jump-toggle {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 10px 14px;
  background: rgba(18, 27, 40, 0.94);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  user-select: none;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.scene-jump-toggle::-webkit-details-marker { display: none; }
.scene-jump-chevron {
  color: var(--color-text-muted);
  transition: transform 0.2s ease;
}
.scene-jump-panel[open] .scene-jump-chevron {
  transform: rotate(-90deg);
}
.scene-jump-body {
  margin-top: var(--space-2);
  padding: var(--space-3);
  background: rgba(18, 27, 40, 0.96);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  max-height: min(70vh, 720px);
  overflow-y: auto;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.scene-jump-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.scene-jump-act + .scene-jump-act {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-light);
}
.scene-jump-act-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.scene-jump-empty {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}
.scene-jump-link {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--color-text-2);
  line-height: 1.35;
}
.scene-jump-link:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
  text-decoration: none;
}
.scene-jump-link-number {
  flex: 0 0 auto;
  min-width: 30px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
}
.book-scene-block {
  scroll-margin-top: calc(var(--nav-top-h) + var(--safe-top) + 84px);
}
@media (max-width: 767px) {
  .scene-jump-panel {
    top: auto;
    right: var(--space-3);
    bottom: calc(var(--nav-bottom-h) + var(--safe-bottom) + var(--space-3));
    width: min(300px, calc(100vw - (var(--space-3) * 2)));
  }
}

/* Logline block */
.filter-logline {
  background: var(--color-surface-2);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-text-2);
}
.filter-logline-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  margin-bottom: var(--space-1);
}

/* Character summary cards */
.filter-char-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.filter-char-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}
.filter-char-name {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-primary);
  margin-bottom: var(--space-1);
}
.filter-char-summary {
  font-size: 0.82rem;
  color: var(--color-text-2);
  line-height: 1.5;
}

/* Media attachments */
.filter-media-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-2) 0 var(--space-3);
  padding: var(--space-2) var(--space-8);
}
.filter-media-item { max-width: 100%; }
.filter-media-img {
  max-width: 240px;
  max-height: 160px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  border: 1px solid var(--color-border);
}
.filter-media-audio { width: 240px; }
.filter-media-video {
  max-width: 300px;
  border-radius: var(--radius-sm);
}
.filter-media-file {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.82rem;
  color: var(--color-primary);
  padding: var(--space-1) var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

/* ─── Node Browser ───────────────────────────────────────────── */
.node-browser-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.node-browser-toolbar-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--color-text-2);
}
.node-browser-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text-2);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.node-browser-root-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}
.node-browser-root-form select,
.node-browser-root-form input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  color: var(--color-text);
  font-size: 0.85rem;
}
.node-browser-shell {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.node-browser-breadcrumb-card {
  margin-bottom: var(--space-3);
}
.node-browser-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
}
.node-browser-crumb-link {
  border: none;
  background: transparent;
  color: var(--color-primary);
  font-size: 0.82rem;
  padding: 0;
  cursor: pointer;
}
.node-browser-crumb-link.is-active {
  color: var(--color-text);
  font-weight: 600;
}
.node-browser-crumb-sep {
  color: var(--color-text-muted);
  font-size: 0.8rem;
  padding: 0 2px;
}
.node-browser-empty {
  color: var(--color-text-muted);
  font-size: 0.84rem;
}
.node-browser-current-card {
  margin-bottom: var(--space-3);
}
.node-browser-current-title {
  font-size: 1rem;
  font-weight: 700;
}
.node-browser-current-meta {
  margin-top: 4px;
  color: var(--color-text-muted);
  font-size: 0.82rem;
}
.node-browser-columns {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  padding-bottom: var(--space-2);
  scroll-snap-type: x proximity;
}
.node-browser-pane {
  min-width: min(320px, calc(100vw - (var(--space-4) * 2)));
  max-width: 380px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  scroll-snap-align: start;
}
.node-browser-pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
  font-size: 0.82rem;
  color: var(--color-text-muted);
}
.node-browser-pane-head strong {
  color: var(--color-text);
  font-size: 0.86rem;
}
.node-browser-pane-empty {
  padding: var(--space-4);
  color: var(--color-text-muted);
  font-size: 0.84rem;
}
.node-browser-list {
  display: flex;
  flex-direction: column;
}
.node-browser-item {
  border-bottom: 1px solid var(--color-border-light);
  padding: var(--space-2) var(--space-3);
}
.node-browser-item:last-child {
  border-bottom: none;
}
.node-browser-item.is-selected {
  background: rgba(94, 160, 255, 0.12);
}
.node-browser-item-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}
.node-browser-node-btn {
  flex: 1;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
}
.node-browser-node-btn:hover {
  background: rgba(255, 255, 255, 0.04);
}
.node-browser-node-title {
  color: var(--color-text);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
}
.node-browser-node-meta {
  color: var(--color-text-muted);
  font-size: 0.76rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.node-browser-live {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  font-size: 0.64rem;
  letter-spacing: 0.03em;
  color: #9ff2d6;
  background: rgba(79, 217, 166, 0.16);
}
.node-browser-live.is-off {
  color: #f7dd9b;
  background: rgba(248, 199, 92, 0.16);
}
.node-browser-item-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.node-browser-add-form {
  margin-top: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}
.node-browser-add-form select,
.node-browser-add-form input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  color: var(--color-text);
  font-size: 0.85rem;
}
@media (min-width: 1024px) {
  .node-browser-pane {
    min-width: 320px;
  }
}

.image-cropper-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(7, 11, 16, 0.82);
  backdrop-filter: blur(10px);
}
.image-cropper-dialog {
  width: min(100%, 1040px);
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
  border-radius: 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
}
.image-cropper-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.image-cropper-header h3 {
  margin: 0;
  font-size: 1rem;
}
.image-cropper-header p {
  margin: 4px 0 0;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}
.image-cropper-stage {
  overflow: auto;
  border-radius: 14px;
  border: 1px solid var(--color-border-light);
  background:
    linear-gradient(45deg, rgba(255,255,255,0.05) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.05) 75%),
    linear-gradient(45deg, rgba(255,255,255,0.05) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.05) 75%);
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
}
.image-cropper-canvas {
  display: block;
  max-width: 100%;
  height: auto;
  touch-action: none;
  cursor: crosshair;
}
.image-cropper-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 720px) {
  .image-cropper-modal {
    padding: 12px;
  }
  .image-cropper-dialog {
    max-height: calc(100vh - 24px);
    padding: 14px;
  }
  .image-cropper-actions {
    justify-content: stretch;
  }
  .image-cropper-actions .btn {
    flex: 1 1 140px;
  }
}

/* ─── Print (book view) ──────────────────────────────────────── */
@media print {
  .top-nav, .bottom-nav, .side-nav, .btn,
  .script-toolbar, .chat-input-bar,
  .action-sheet, .action-sheet-backdrop,
  .toast, #toast { display: none !important; }

  body { background: #fff; display: block; font-family: var(--font-mono); }
  .main-content { padding: 0; }

  .book-view { max-width: 100%; margin: 0; padding: 1cm; }
  .book-act-title { font-size: 14pt; page-break-before: always; }
  .book-scene-title { font-size: 11pt; }
  .book-char-name { font-size: 11pt; }
  .book-dialogue { font-size: 11pt; }
  .book-direction { font-size: 11pt; color: #555; }
  .book-lyric { font-size: 11pt; }
}