/* ============================================================================
 * Music Video overlay — song → finished music video (analysis, section
 * timeline, formats, AI clips, progress, results). Same placement contract
 * as the Advanced overlay: starts below the unified header, fades/slides in
 * with `is-open`. Z-index 27: above the stage and Advanced (25), below the
 * settings drawer (30) and header (40).
 * ========================================================================== */

#musicVideoOverlay {
  position: fixed;
  top: var(--vizzy-header-height, 52px);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 27;
  background: #0a0a0a;
  color: var(--ink);
  font-family: var(--font-body);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 220ms ease, transform 220ms ease;
  pointer-events: none;
}
#musicVideoOverlay.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
#musicVideoOverlay[hidden] { display: none !important; }

.mv-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-7) var(--space-5) calc(var(--space-8) * 2 + env(safe-area-inset-bottom));
}

.mv-top { display: flex; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-6); }
.mv-top-text { flex: 1; min-width: 0; }
.mv-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 700;
}
.mv-title { font-family: var(--font-display); font-size: 22px; font-weight: 700; margin-top: var(--space-1); }
.mv-sub { font-size: 13px; color: var(--ink-3); margin-top: var(--space-1); line-height: 1.45; }
.mv-close {
  background: var(--surface-3);
  border: 1px solid var(--hairline);
  color: var(--ink-3);
  width: 32px; height: 32px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.mv-close:hover { color: var(--ink); background: var(--surface-4); }

.mv-section { margin-top: var(--space-6); }
.mv-section > .mv-eyebrow { margin-bottom: var(--space-2); display: block; }
.mv-card {
  background: var(--surface-3);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-4);
  padding: var(--space-3) var(--space-4);
}
.mv-hint { font-size: 11px; color: var(--ink-4); line-height: 1.45; margin-top: var(--space-2); }
.mv-hint code, .mv-banner code {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--surface-4);
  padding: 1px 5px;
  border-radius: var(--radius-1);
  color: var(--ink-2);
  word-break: break-all;
}
.mv-error { color: var(--err); font-size: 12px; margin-top: var(--space-2); }

.mv-banner {
  border: 1px solid rgba(255, 122, 156, 0.35);
  background: rgba(255, 122, 156, 0.08);
  border-radius: var(--radius-4);
  padding: var(--space-3) var(--space-4);
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.5;
  margin-bottom: var(--space-4);
}

/* Buttons ------------------------------------------------------------------- */
.mv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: var(--surface-4);
  border: 1px solid var(--hairline-2);
  color: var(--ink);
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s var(--ease-out), border-color 0.15s var(--ease-out), transform 0.1s var(--ease-out);
}
.mv-btn:hover:not(:disabled) { background: var(--surface-5); }
.mv-btn:active:not(:disabled) { transform: scale(0.98); }
.mv-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.mv-btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 0 16px var(--accent-glow);
}
.mv-btn.primary:hover:not(:disabled) { background: #ff5589; }
.mv-btn.ghost { background: none; border-color: transparent; color: var(--ink-3); padding-left: 0; padding-right: 0; }
.mv-btn.ghost:hover:not(:disabled) { color: var(--ink); background: none; }
.mv-btn.danger:hover:not(:disabled) { border-color: var(--err); color: var(--err); }
.mv-btn.wide { width: 100%; padding: 12px 16px; font-size: 13px; }

/* Home ---------------------------------------------------------------------- */
.mv-loaded { display: flex; align-items: center; gap: var(--space-3); }
.mv-loaded-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mvDrop { position: relative; display: block; margin-top: var(--space-3); padding: var(--space-7) var(--space-4); }
.mv-jobs { display: flex; flex-direction: column; gap: var(--space-1); }
.mv-job-row {
  display: flex; align-items: stretch;
  background: var(--surface-3); border: 1px solid var(--hairline);
  border-radius: var(--radius-3); overflow: hidden;
}
.mv-job-open {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-3);
  background: none; border: 0; padding: var(--space-2) var(--space-3); min-height: 44px;
  cursor: pointer; color: var(--ink); text-align: left; font: inherit;
}
.mv-job-open:hover { background: var(--surface-4); }
.mv-job-del {
  flex: none; width: 44px; background: none; border: 0; border-left: 1px solid var(--hairline);
  color: var(--ink-3); font-size: 14px; cursor: pointer;
}
.mv-job-del:hover, .mv-job-del:focus-visible { color: var(--err); background: var(--surface-4); }
.mv-job-del:disabled { opacity: 0.4; cursor: default; }
.mv-jobs-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.mv-jobs-head .mv-link { min-height: 44px; padding: 0 var(--space-1); }
.mv-job-title { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-job-date { font-size: 11px; color: var(--ink-4); }
.mv-job-status { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.mv-job-status.completed { color: var(--ok); }
.mv-job-status.failed { color: var(--err); }
.mv-job-status.awaiting_approval { color: var(--accent); }

/* Progress bars ------------------------------------------------------------- */
.mv-bar { height: 4px; background: var(--surface-4); border-radius: var(--radius-1); overflow: hidden; }
.mv-bar-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), #ff8eb2); transition: width 0.4s var(--ease-out); }
.mv-center { text-align: center; padding: var(--space-8) 0; }
.mv-center .mv-bar { max-width: 320px; margin: var(--space-4) auto 0; }

/* Setup: inputs, timeline, formats ------------------------------------------ */
.mv-input {
  width: 100%;
  background: var(--surface-3);
  color: var(--ink);
  border: 1px solid var(--hairline-2);
  border-radius: var(--radius-3);
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
}
.mv-input:focus { outline: none; border-color: var(--accent); }

.mv-tl-meta { display: flex; align-items: center; gap: var(--space-2); font-size: 11px; color: var(--ink-4); margin-bottom: var(--space-2); }
.mv-tl-meta .mv-chip {
  font-family: var(--font-mono); font-weight: 700; color: var(--ink-2);
  background: var(--surface-4); border-radius: var(--radius-pill); padding: 2px 8px;
}
.mv-tl-meta .mv-tl-help { margin-left: auto; }
.mv-play {
  width: 28px; height: 28px; border-radius: var(--radius-pill);
  background: var(--surface-4); border: 1px solid var(--hairline-2); color: var(--ink);
  cursor: pointer; font-size: 11px;
}
.mv-play:hover { background: var(--surface-5); }
.mv-timeline {
  position: relative; height: 96px; border-radius: var(--radius-4);
  background: var(--surface-3); border: 1px solid var(--hairline);
  overflow: hidden; cursor: pointer; user-select: none; touch-action: none;
}
.mv-tl-sec { position: absolute; top: 0; bottom: 0; border-right: 1px solid var(--hairline-2); }
.mv-tl-sec span {
  position: absolute; top: 4px; left: 6px; right: 4px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mv-tl-sec.intro, .mv-tl-sec.outro { background: rgba(148, 163, 184, 0.14); }
.mv-tl-sec.verse { background: rgba(45, 212, 191, 0.14); }
.mv-tl-sec.build { background: rgba(167, 139, 250, 0.2); }
.mv-tl-sec.drop  { background: rgba(255, 60, 120, 0.24); }
.mv-tl-sec.break { background: rgba(56, 189, 248, 0.14); }
.mv-tl-wave { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mv-tl-handle { position: absolute; top: 0; bottom: 0; width: 14px; margin-left: -7px; cursor: ew-resize; }
.mv-tl-handle::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 6px; width: 2px;
  background: var(--ink-4); transition: background 0.15s;
}
.mv-tl-handle:hover::after, .mv-tl-handle.dragging::after { background: var(--ink); }
.mv-tl-head { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent); pointer-events: none; box-shadow: 0 0 8px var(--accent-glow); }

.mv-formats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.mv-format {
  background: var(--surface-3); border: 1px solid var(--hairline);
  border-radius: var(--radius-3); padding: var(--space-3); text-align: left;
  color: var(--ink); cursor: pointer; font: inherit; opacity: 0.55;
  transition: background 0.15s var(--ease-out), border-color 0.15s var(--ease-out), opacity 0.15s;
}
.mv-format b { display: block; font-size: 13px; }
.mv-format small { font-size: 11px; color: var(--ink-4); }
.mv-format.on { opacity: 1; background: var(--accent-soft); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

.mv-row { display: flex; align-items: center; gap: var(--space-3); }
.mv-row-text { flex: 1; min-width: 0; }
.mv-row-text b { font-size: 13px; display: block; }
.mv-row-text small { font-size: 11px; color: var(--ink-4); }
.mv-link {
  background: none; border: none; color: var(--ink-3); cursor: pointer;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 700; padding: var(--space-3) 0 0;
}
.mv-link:hover { color: var(--ink); }
.mv-prompt { margin-top: var(--space-3); }
.mv-prompt-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1); font-size: 12px; font-weight: 600; }
.mv-prompt-head small { font-weight: 400; color: var(--ink-4); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-prompt-head .mv-link { margin-left: auto; padding: 0; }
.mv-swatch { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.4); flex-shrink: 0; }
.mv-prompt textarea { min-height: 72px; font-family: var(--font-body); font-size: 12px; }
.mv-mood { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.mv-mood .mv-btn { white-space: nowrap; flex-shrink: 0; }

.mv-footer { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-6); }
.mv-cost { margin-left: auto; text-align: right; font-size: 11px; color: var(--ink-4); line-height: 1.5; }
.mv-cost b { color: var(--ink-2); font-weight: 600; }

/* Confirm dialog ------------------------------------------------------------ */
.mv-modal {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-start; justify-content: center;
  /* Scrolls instead of clipping when the card is taller than a landscape phone. */
  overflow-y: auto; overscroll-behavior: contain;
  padding: calc(var(--space-5) + env(safe-area-inset-top)) max(var(--space-5), env(safe-area-inset-right))
           calc(var(--space-5) + env(safe-area-inset-bottom)) max(var(--space-5), env(safe-area-inset-left));
}
.mv-modal-card { margin: auto; }
@media (max-height: 500px) { .mv-modal-card { padding: var(--space-5); } }
.mv-modal[hidden] { display: none; }
.mv-modal-back { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.mv-modal-card {
  position: relative; width: 100%; max-width: 420px;
  background: #0d0d0f; border: 1px solid var(--hairline-2); border-radius: var(--radius-5);
  padding: var(--space-6); box-shadow: 0 0 60px rgba(255, 60, 120, 0.12);
}
.mv-kv { display: flex; justify-content: space-between; gap: var(--space-3); font-size: 12px; padding: var(--space-2) var(--space-3); background: var(--surface-3); border-radius: var(--radius-3); margin-top: var(--space-2); }
.mv-kv span:first-child { color: var(--ink-3); }
.mv-modal-actions { display: flex; gap: var(--space-2); margin-top: var(--space-5); }
.mv-modal-actions .mv-btn { flex: 1; }

/* Job progress -------------------------------------------------------------- */
.mv-stages { list-style: none; margin-top: var(--space-4); }
.mv-stage { display: flex; align-items: center; gap: var(--space-3); padding: 7px var(--space-3); border-radius: var(--radius-3); font-size: 13px; color: var(--ink-3); }
.mv-stage.active { background: var(--surface-3); color: var(--ink); }
.mv-stage.done { color: var(--ink-2); }
.mv-stage-dot { width: 14px; text-align: center; font-size: 11px; }
.mv-stage.done .mv-stage-dot { color: var(--ok); }
.mv-stage.active .mv-stage-dot { color: var(--accent); animation: mvPulse 1.2s ease-in-out infinite; }
.mv-stage-name { flex: 1; min-width: 0; }
.mv-stage-name small { color: var(--ink-4); font-size: 11px; margin-left: var(--space-1); }
.mv-stage-pct { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); font-variant-numeric: tabular-nums; }
@keyframes mvPulse { 50% { opacity: 0.35; } }

.mv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-2); }
.mv-shot { border-radius: var(--radius-3); overflow: hidden; background: #000; border: 1px solid var(--hairline); }
.mv-shot img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.mv-shot.vertical img { aspect-ratio: 9 / 16; }
.mv-shot figcaption { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-4); padding: 4px 6px; }
.mv-preview-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.mv-preview-head .mv-eyebrow { flex: 1; }
.mv-early { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Results ------------------------------------------------------------------- */
.mv-player { border-radius: var(--radius-5); overflow: hidden; background: #000; border: 1px solid var(--hairline); display: flex; justify-content: center; }
.mv-player video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.mv-player video.vertical { width: auto; height: min(70vh, 640px); aspect-ratio: 9 / 16; }
/* Landscape phones: the whole player (and its controls) fits on screen. */
@media (max-height: 500px) {
  .mv-player video, .mv-player video.vertical {
    width: auto; max-width: 100%;
    height: calc(100dvh - var(--vizzy-header-height, 52px) - 48px);
  }
}
.mv-outputs { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-4); }
.mv-output {
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--surface-3); border: 1px solid var(--hairline); border-radius: var(--radius-3);
  padding: var(--space-2) var(--space-3);
}
.mv-output.selected { border-color: var(--accent); background: var(--accent-soft); }
.mv-output-pick { flex: 1; min-width: 0; background: none; border: none; color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.mv-output-pick b { display: block; font-size: 13px; }
.mv-output-pick small { font-size: 11px; color: var(--ink-4); font-family: var(--font-mono); }

/* "Settings → AI connections" links inside hints — a text link, not a
   default grey browser button. */
.mv-inline-link {
  background: none; border: 0; padding: 0; margin: 0; color: var(--accent);
  font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
/* Free-text boxes (Direction, lyrics, per-shot prompts) read as prose, not
   code — the global textarea is mono. */
.mv-textarea, .mv-prompt textarea { font-family: var(--font-body); line-height: 1.45; }
.mv-textarea { min-height: 96px; }

/* Touch screens: every button in Auto Video / Settings is a comfortable
   finger target (≥44px), without changing the desktop look. */
@media (pointer: coarse) {
  .mv-btn { min-height: 44px; }
  .mv-btn.ghost { min-height: 44px; }
  .mv-close { width: 44px; height: 44px; font-size: 20px; flex-shrink: 0; }
  .mv-play { width: 36px; height: 36px; }
  .mv-link { min-height: 44px; padding-bottom: var(--space-2); }
  .mv-prompt-head .mv-link { min-height: 36px; }
  .mv-inline-link { padding: 8px 0; margin: -8px 0; }
  .mv-format, .mv-output-pick { min-height: 44px; }
  /* 16px text on touch: give each shot prompt room for ~4 lines. */
  .mv-prompt textarea { min-height: 112px; }
}

@media (max-width: 767px) {
  .mv-wrap {
    padding: var(--space-5) max(var(--space-4), env(safe-area-inset-right)) calc(var(--space-8) + env(safe-area-inset-bottom)) max(var(--space-4), env(safe-area-inset-left));
  }
  .mv-formats { grid-template-columns: 1fr; }
  .mv-tl-meta .mv-tl-help { display: none; }
  .mv-footer { flex-wrap: wrap; }
  /* Your videos: full title on its own line, date + status underneath. */
  .mv-job-open { flex-wrap: wrap; row-gap: 2px; column-gap: var(--space-2); padding-top: var(--space-2); padding-bottom: var(--space-2); }
  .mv-job-title { flex: 1 1 100%; }
}

/* "Your music video is ready" banner — shows in any mode, above everything. */
.mv-ready-banner {
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 12px); z-index: 200;
  width: min(520px, calc(100vw - 24px));
  display: flex; align-items: center; gap: var(--space-3);
  padding: 12px 12px 12px 14px; border-radius: 16px;
  background: rgba(18, 18, 20, 0.96); border: 1px solid var(--accent-soft, rgba(255, 60, 120, 0.4));
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55), 0 0 24px var(--accent-glow, rgba(255, 60, 120, 0.25));
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  transform: translate(-50%, -140%); transition: transform 280ms cubic-bezier(.2, .9, .3, 1.2);
}
.mv-ready-banner.is-in { transform: translate(-50%, 0); }
.mv-ready-icon {
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent, #ff3c78); color: #fff; font-weight: 700; font-size: 17px;
}
.mv-ready-banner.is-error .mv-ready-icon { background: var(--err, #e5484d); }
.mv-ready-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mv-ready-text b { font-size: 14px; }
.mv-ready-text small { font-size: 12px; color: var(--ink-3, #aaa); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-ready-banner .mv-btn { min-height: 40px; }
.mv-ready-close { flex: none; width: 36px; height: 36px; border: 0; background: none; color: var(--ink-3, #aaa); font-size: 22px; cursor: pointer; }

.mv-hint.mv-note { color: var(--warn, #f5b14c); line-height: 1.45; margin-top: var(--space-2); }

/* AI clip type: video generator or image generator (image mode) */
.mv-seg { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-top: var(--space-2); }
.mv-seg[hidden] { display: none; }
.mv-seg-btn {
  background: var(--surface-3); border: 1px solid var(--hairline); border-radius: var(--radius-3);
  padding: var(--space-3); min-height: 56px; text-align: left; color: var(--ink); cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; opacity: 0.6;
  transition: background 0.15s var(--ease-out), border-color 0.15s var(--ease-out), opacity 0.15s;
}
.mv-seg-btn small { display: block; font-weight: 400; font-size: 11px; opacity: 0.75; margin-top: 2px; }
.mv-seg-btn.on { opacity: 1; background: var(--accent-soft); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.mv-job-row.is-deleting { opacity: 0.4; pointer-events: none; transition: opacity 0.15s; }

/* Style picker (Visualizer / Music video / Cinematic / Lyric video) */
.mv-styles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
@media (min-width: 720px) { .mv-styles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mv-style {
  background: var(--surface-3); border: 1px solid var(--hairline); border-radius: var(--radius-3);
  padding: var(--space-3); min-height: 64px; text-align: left; color: var(--ink); cursor: pointer; font: inherit;
  opacity: 0.6; transition: background 0.15s var(--ease-out), border-color 0.15s var(--ease-out), opacity 0.15s;
}
.mv-style b { display: block; font-size: 13px; }
.mv-style small { display: block; font-size: 11px; color: var(--ink-3); margin-top: 2px; line-height: 1.35; }
.mv-style.on { opacity: 1; background: var(--accent-soft); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

/* "Mix with AI clips / Only my clips" — same look as the other choices */
.mv-seg-opt {
  background: var(--surface-3); border: 1px solid var(--hairline); border-radius: var(--radius-3);
  padding: var(--space-2) var(--space-3); min-height: 44px; color: var(--ink); cursor: pointer; font: inherit;
  font-size: 13px; opacity: 0.6;
}
.mv-seg-opt.on { opacity: 1; background: var(--accent-soft); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

/* How many AI shots */
.mv-shots { margin-top: var(--space-3); display: grid; gap: var(--space-1); }
.mv-shots[hidden] { display: none; }
.mv-shots-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; }
.mv-shots-row b { font-family: var(--font-mono); font-size: 15px; color: var(--accent); }
.mv-shots input[type="range"] { width: 100%; min-height: 36px; accent-color: var(--accent); }
.mv-shots-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.mv-shots-foot small { color: var(--ink-3); font-size: 11px; }
.mv-shots-foot .mv-link { min-height: 36px; white-space: nowrap; }

/* Lyric video card */
#mvLyricsCard[hidden], #mvLyricsEdit[hidden] { display: none; }
#mvLyricsCard .dl-progress-bar { margin-top: var(--space-2); }
#mvLyricsBar:not([hidden]) .dl-progress-fill { width: 40%; animation: mv-indeterminate 1.4s ease-in-out infinite; }
@keyframes mv-indeterminate { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
#mvLyricsText { font-size: 13px; line-height: 1.5; }

/* Scene picker (Visualizer style): tap = ★ always → ✕ never → auto */
#mvScenesCard[hidden] { display: none; }
.mv-scenes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin-top: var(--space-3); }
@media (min-width: 560px) { .mv-scenes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 900px) { .mv-scenes { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.mv-scene {
  position: relative; display: block; padding: 0; overflow: hidden; aspect-ratio: 16 / 9; min-height: 44px;
  background: var(--surface-4); border: 1px solid var(--hairline); border-radius: var(--radius-3);
  cursor: pointer; color: #fff; font: inherit; transition: border-color 0.15s var(--ease-out), opacity 0.15s, filter 0.15s;
}
.mv-scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mv-scene-name {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 4px; font-size: 11px; font-weight: 600;
  text-align: left; line-height: 1.2; background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
}
.mv-scene-badge {
  position: absolute; top: 4px; right: 4px; min-width: 22px; height: 22px; border-radius: 11px; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; background: rgba(0, 0, 0, 0.6);
}
.mv-scene.liked { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.mv-scene.liked .mv-scene-badge { background: var(--accent); color: var(--accent-ink); }
.mv-scene.banned { opacity: 0.4; filter: grayscale(1); }
#mvScenesReset[hidden] { display: none; }
#mvScenesPlan { margin-top: var(--space-2); }

/* Camera impacts: shake level + hit markers under the timeline */
.mv-shake { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-1); margin-top: var(--space-2); }
.mv-shake .mv-seg-opt { padding: var(--space-2) 4px; text-align: center; }
.mv-tl-hits {
  position: relative; height: 30px; margin-top: 4px; border-radius: var(--radius-2);
  background: var(--surface-3); border: 1px dashed var(--hairline); cursor: copy; touch-action: manipulation;
}
.mv-tl-hits[hidden] { display: none; }
.mv-tl-hit {
  position: absolute; top: 50%; padding: 0; border: 0; cursor: pointer; transform: translate(-50%, -50%);
  background: transparent; min-width: 14px; min-height: 26px;
}
.mv-tl-hit::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 2px; }
.mv-tl-hit.small::after { width: 2px; height: 10px; background: var(--ink-4); }
.mv-tl-hit.big::after { width: 9px; height: 9px; transform: translate(-50%, -50%) rotate(45deg); background: #ffd166; box-shadow: 0 0 6px rgba(255, 209, 102, .6); }
.mv-tl-hit.mega::after { width: 13px; height: 13px; transform: translate(-50%, -50%) rotate(45deg); background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); }
.mv-tl-hit.mega { z-index: 2; } .mv-tl-hit.big { z-index: 1; }
.mv-tl-hit.small { min-width: 6px; }

.mv-drift-row { margin-top: var(--space-3); }

/* Clip source: AI video / AI images / Vizzy footage (only what's available shows) */
#mvSource { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
#mvSource .mv-seg-btn[hidden] { display: none; }
#mvModelUse { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 420px) { #mvModelUse { grid-template-columns: 1fr; } }
#mvCreditsRow { margin-top: var(--space-2); }
#mvCreditsRow[hidden] { display: none; }
.mv-select {
  min-height: 40px; padding: 0 var(--space-3); border-radius: var(--radius-3);
  background: var(--surface-4); color: var(--ink); border: 1px solid var(--hairline-2); font: inherit; font-size: 13px;
}
.mv-credit-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }

/* Stems & bands card: the switch greys out when stems aren't possible (local helper, > 12 min). */
#mvStemsToggle.disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
#mvLinksCard .mv-stems-row { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--hairline); }

/* Render in Blender (finished video page) */
.mv-bl-head small { display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px; line-height: 1.4; }
.mv-bl-templates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin-top: var(--space-3); }
.mv-bl-tpl {
  position: relative; display: block; padding: 0; overflow: hidden; aspect-ratio: 16 / 9; min-height: 44px;
  background: var(--surface-4); border: 1px solid var(--hairline); border-radius: var(--radius-3);
  cursor: pointer; color: #fff; font: inherit; opacity: 0.7;
  transition: border-color 0.15s var(--ease-out), opacity 0.15s, box-shadow 0.15s;
}
.mv-bl-tpl img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mv-bl-tpl:hover { opacity: 0.9; }
.mv-bl-tpl.on { opacity: 1; border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.mv-bl-blurb { margin-top: var(--space-2); }
.mv-bl-opts { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
@media (min-width: 720px) { .mv-bl-opts { grid-template-columns: 2fr 3fr; } }
.mv-bl-quality { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mv-bl-go, .mv-bl-export, .mv-bl-run-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); flex-wrap: wrap;
}
.mv-bl-go .mv-hint, .mv-bl-export .mv-hint, .mv-bl-run-foot .mv-hint { flex: 1 1 220px; margin: 0; }
.mv-bl-go .mv-btn { min-height: 44px; }
.mv-bl-export { border-top: 1px solid var(--hairline); padding-top: var(--space-3); }
.mv-bl-run { margin-top: var(--space-3); display: grid; gap: var(--space-2); }
.mv-bl-run-top { display: flex; gap: var(--space-3); align-items: center; }
.mv-bl-run-top img { width: 96px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-2, 6px); flex: none; }
.mv-bl-run-top .mv-row-text b { font-size: 13px; }
.mv-bl-run-top .mv-row-text small { display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.mv-bl-auto { margin-top: var(--space-3); border-top: 1px solid var(--hairline); padding-top: var(--space-3); }
.mv-bl-auto-seg { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mv-bl-auto-seg .mv-seg-opt { padding: var(--space-2) 4px; text-align: center; font-size: 12px; }
@media (max-width: 420px) { .mv-bl-auto-seg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }