/* =========================================================================
 * Video Maker (photos + music -> a video)
 *
 * Deliberately plain: it borrows the app's existing card/button look and adds
 * only what this tool needs (a job grid, a two-column editor, the render
 * progress panel and the result player). Colours come from CSS variables so the
 * dark sidebar / light content split and RTL both follow the shell.
 * ========================================================================= */

#videoMakerView { padding: 4px 2px 40px; }

.vm-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 10px;
}
.vm-head h2 { margin: 0; font-size: 20px; font-weight: 700; color: var(--text, #0f172a); }
.vm-sub { margin: 4px 0 0; font-size: 13px; color: var(--muted, #64748b); }
.vm-head-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vm-meter {
  font-size: 12.5px; color: var(--muted, #475569); background: #f1f5f9;
  border: 1px solid var(--border, #e2e8f0); border-radius: 999px; padding: 5px 12px;
  white-space: nowrap;
}
.vm-note { font-size: 12.5px; color: var(--muted, #64748b); margin: 8px 0 14px; line-height: 1.7; }
.vm-note a { color: #0e7490; word-break: break-all; }
.vm-loading { text-align: center; color: var(--muted, #64748b); }

/* ---- buttons ------------------------------------------------------------ */
.vm-btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 13px; font-weight: 600; line-height: 1; padding: 9px 14px;
  border-radius: 10px; border: 1px solid var(--border, #d8dee9);
  background: #fff; color: var(--text, #0f172a); text-decoration: none;
  transition: background .15s, box-shadow .15s, border-color .15s;
}
.vm-btn:hover { background: #f8fafc; border-color: #cbd5e1; }
.vm-btn[disabled] { opacity: .5; cursor: not-allowed; }
.vm-btn-primary { background: #0e7490; border-color: #0e7490; color: #fff; }
.vm-btn-primary:hover { background: #155e75; border-color: #155e75; }
.vm-btn-danger { background: #dc2626; border-color: #dc2626; color: #fff; }
.vm-btn-danger:hover { background: #b91c1c; border-color: #b91c1c; }
.vm-btn-ghost { background: transparent; border-color: transparent; color: var(--muted, #475569); }
.vm-btn-ghost:hover { background: #f1f5f9; }
.vm-upload { position: relative; overflow: hidden; }
.vm-ic {
  width: 28px; height: 28px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border, #d8dee9); background: #fff; color: #334155;
  font-size: 13px; line-height: 1;
}
.vm-ic[disabled] { opacity: .35; cursor: not-allowed; }
.vm-ic-del { color: #b91c1c; }
.vm-ic-del:hover { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; }

/* ---- job list ----------------------------------------------------------- */
.vm-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
}
.vm-card {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--border, #e2e8f0); border-radius: 14px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.vm-card-img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #0f172a;
  display: flex; align-items: center; justify-content: center;
}
.vm-card-noimg { font-size: 30px; color: #64748b; }
.vm-card-body { padding: 12px 13px 13px; display: flex; flex-direction: column; gap: 7px; }
.vm-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vm-card-top b { font-size: 14px; color: var(--text, #0f172a); }
.vm-card-meta { font-size: 12px; color: var(--muted, #64748b); }
/* "Deletes in N days" (shared .ss-del-in supplies the red + bold). */
.vm-card-del { font-size: 11.5px; line-height: 1.35; margin-top: -3px; }
.vm-grid.st-list .vm-card-del { flex: 0 0 auto; }
.vm-card-note { font-size: 11.5px; color: var(--muted, #94a3b8); }
.vm-card-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.vm-card-acts .vm-btn { padding: 7px 11px; font-size: 12.5px; }
.vm-empty, .vm-empty-sm {
  text-align: center; color: var(--muted, #64748b); padding: 30px 18px;
  border: 1px dashed var(--border, #d8dee9); border-radius: 14px; font-size: 13.5px;
}
.vm-empty-sm { padding: 16px; }

/* List view (shared ▦/☰ toggle, window.SSViews): the same card as one dense row —
   poster, name + status, meta, actions — with a tick box in front for bulk delete.
   Only the layout changes, so no action is ever lost by switching views. */
.vm-grid.st-list { grid-template-columns: 1fr; gap: 8px; }
.vm-grid.st-list .vm-card { flex-direction: row; align-items: center; }
.vm-grid.st-list .vm-card > .ssv-cb { margin: 0 4px 0 12px; }
.vm-grid.st-list .vm-card-img {
  width: 88px; flex: 0 0 88px; height: 52px; aspect-ratio: auto;
}
.vm-grid.st-list .vm-card-body {
  flex: 1; min-width: 0; flex-direction: row; align-items: center;
  flex-wrap: wrap; gap: 10px; padding: 10px 12px;
}
.vm-grid.st-list .vm-card-top { flex: 0 1 auto; min-width: 0; }
.vm-grid.st-list .vm-card-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vm-grid.st-list .vm-card-meta { flex: 1 1 120px; }
.vm-grid.st-list .vm-card-acts { margin: 0 0 0 auto; flex-wrap: nowrap; }
@media (max-width: 620px) {
  .vm-grid.st-list .vm-card-body { flex-direction: column; align-items: flex-start; }
  .vm-grid.st-list .vm-card-acts { margin: 0; }
}

.vm-chip {
  font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 9px;
  white-space: nowrap; border: 1px solid transparent;
}
.vm-st-draft { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
.vm-st-queued { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.vm-st-run { background: #cffafe; color: #155e75; border-color: #a5f3fc; }
.vm-st-done { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.vm-st-fail { background: #fee2e2; color: #991b1b; border-color: #fecaca; }

.vm-bar {
  height: 6px; border-radius: 999px; background: #e2e8f0; overflow: hidden;
}
.vm-bar span {
  display: block; height: 100%; background: linear-gradient(90deg, #0e7490, #22d3ee);
  transition: width .4s ease;
}
.vm-bar-lg { height: 10px; margin: 12px 0 8px; }

/* ---- the preview stage + the timeline -----------------------------------
   The editor's hero: what the video looks like, and the strip you drag to
   change it. Everything is measured in SECONDS and drawn in %, so the layout
   survives any width (and a phone rotation) without a re-render. */
.vm-studio {
  background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: 14px;
  padding: 14px; margin-bottom: 14px;
  display: grid; gap: 14px; grid-template-columns: minmax(260px, 380px) 1fr;
  align-items: start;
}
/* On a desktop the settings columns are long, so the studio is kept in front of
   you while you scroll them — but ONLY when doing so still leaves the settings a
   usable slice of the screen. The stage is drawn at the project's own aspect
   ratio, so a 9:16 project is ~675px tall in a 380px column: pinning that pushed
   every option panel under an opaque card that covered the whole viewport. The
   pin is therefore decided in JS (see syncStudioPin in video_maker.js), which
   measures the card and adds .vm-pin only when it fits. --vm-pin-top is the
   measured topbar offset, so the card parks BELOW the 62px sticky header instead
   of under it. */
.vm-studio.vm-pin {
  position: sticky; top: var(--vm-pin-top, 72px); z-index: 6;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
}
@media (max-width: 860px) { .vm-studio { grid-template-columns: 1fr; } }

/* The "▲ Preview" pill: the stand-in for the pin when pinning is impossible
   (a 9:16 project on a laptop). It shows only while the preview has scrolled up
   behind the topbar; tapping it puts the preview back at the top of the screen.
   Deliberately its own class, not the Video Studio's .pe-prevjump, which hides
   itself at >=561px. */
.vm-jump {
  display: none; position: fixed;
  top: calc(72px + env(safe-area-inset-top, 0px)); z-index: 120;
  right: 12px; align-items: center; gap: 6px; padding: 9px 15px;
  border-radius: 999px; border: 1px solid #ea6a0c;
  background: linear-gradient(180deg, #fb923c, #f97316); color: #fff;
  font-size: 13px; font-weight: 800; line-height: 1; cursor: pointer;
  box-shadow: 0 5px 16px rgba(249, 115, 22, .4); white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.vm-jump.vm-on { display: inline-flex; }
.vm-jump:hover { filter: brightness(1.05); }
.vm-jump:active { transform: scale(.96); }
.vm-jump .vm-jump-ico { font-size: 9px; line-height: 1; transform: translateY(-1px); display: inline-flex; }
html[dir="rtl"] .vm-jump { right: auto; left: 12px; }
.vm-tl-hint {
  font-size: 12.5px; color: var(--muted, #64748b); padding: 6px 2px;
}
.vm-tl-keys {
  font-size: 11.5px; color: var(--muted, #94a3b8); padding: 0 2px 6px; margin: 0;
  font-variant-numeric: tabular-nums;
}
.vm-stage-wrap { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.vm-stage {
  position: relative; width: 100%; background: #090c1c; border-radius: 12px;
  overflow: hidden; line-height: 0; margin: 0 auto;
  background-image: linear-gradient(135deg, #1e1b4b 0%, #0f172a 55%, #083344 100%);
}
/* FULL SCREEN framing: the renderer blurs a blow-up of the photo to fill the
   frame and lays the WHOLE photo on top of it, so nothing is ever cropped.
   The preview does the same, which is what "see all of it" means. */
.vm-fit-fill .vm-frame-bg { display: block; }
.vm-fit-fill .vm-shot {
  inset: 0; width: 100%; height: 100%; background: none; box-shadow: none;
  border-radius: 0; padding: 0;
}
.vm-fit-fill .vm-frame { object-fit: contain; inset: 7%; width: 86%; height: 86%; }
/* FRAMED CARD framing: a white card on the brand background, 74% of the width
   and 4:3, sitting a little above centre — the numbers layer_layout() uses.
   NOT `.vm-card`: that is the job LIST card, and sharing the name made every job
   card in the list position:absolute in the middle of the page. */
.vm-shot {
  position: absolute; left: 50%; top: 46%; width: 74%; aspect-ratio: 4 / 3;
  transform: translate(-50%, -50%); background: #fff; border-radius: 6px;
  box-shadow: 0 10px 30px rgba(2, 4, 14, .5); padding: 1.4%;
}
.vm-frame-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: blur(22px) brightness(.75) saturate(1.1); transform: scale(1.08);
  display: none;
}
.vm-frame {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  border-radius: 4px; transition: opacity .12s linear; transform-origin: center;
}
/* a video slide: the same box as a photo, so the framing modes apply unchanged */
.vm-vframe {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  border-radius: 4px; background: #000; display: none;
}
.vm-fit-fill .vm-vframe {
  object-fit: contain; inset: 7%; width: 86%; height: 86%; border-radius: 0;
}
.vm-tl-film, .vm-slide-film {
  position: absolute; left: 4px; top: 3px; font-size: 11px; line-height: 1;
  background: rgba(15, 23, 42, .62); border-radius: 5px; padding: 2px 4px;
}
.vm-slide-film { position: absolute; left: 3px; bottom: 3px; z-index: 2; }
.vm-slide { position: relative; }
html[dir="rtl"] .vm-tl-film, html[dir="rtl"] .vm-slide-film { left: auto; right: 4px; }
.vm-frame-under { display: none; }
/* the burned-in text, drawn as plain HTML over the photo (an approximation of
   the libass pass the renderer uses, with the same placement rules) */
.vm-ov { position: absolute; color: #fff; font-weight: 700; pointer-events: none; }
.vm-ov-title, .vm-ov-outro {
  left: 6%; right: 6%; text-align: center; font-size: 4vh; line-height: 1.35;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .65); transition: opacity .2s linear;
}
.vm-ov-title { top: 38%; }
.vm-ov-outro { bottom: 22%; }
.vm-ov-cap {
  left: 5%; right: 5%; bottom: 6%; text-align: center; font-size: 2.6vh;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .7); transition: opacity .2s linear;
}
.vm-ov-wm { font-size: 3.2vh; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.vm-ov-logo { width: 14%; height: auto; }

.vm-transport { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vm-tl-tools { display: inline-flex; gap: 4px; margin-left: auto; }
.vm-tl-tool { padding: 5px 9px; font-size: 12px; }
.vm-tl-tool[disabled] { opacity: .45; cursor: not-allowed; }
.vm-tl-mini {
  position: relative; z-index: 5; border: 0; background: rgba(15, 23, 42, .55);
  color: #fff; border-radius: 5px; font-size: 11px; line-height: 1;
  padding: 3px 5px; cursor: pointer;
}
.vm-tl-mini:hover { background: #0e7490; }
.vm-tl-mini-del:hover { background: #dc2626; }
.vm-tl-clip-acts {
  position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  display: inline-flex; gap: 3px; z-index: 5;
}
html[dir="rtl"] .vm-tl-clip-acts { right: auto; left: 20px; }
.vm-tl-time { font-size: 12.5px; color: var(--muted, #475569); font-variant-numeric: tabular-nums; }
.vm-snap {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px;
  color: var(--muted, #475569); cursor: pointer;
}

.vm-tl {
  position: relative; padding: 22px 0 6px; min-width: 0;
  touch-action: none;              /* dragging a block must not scroll the page */
  -webkit-user-select: none; user-select: none;
}
.vm-tl-ruler { position: relative; height: 18px; margin-bottom: 6px; }
.vm-tl-tick {
  position: absolute; top: 0; transform: translateX(-50%); font-size: 10px;
  color: var(--muted, #94a3b8); white-space: nowrap;
}
.vm-tl-beat {
  position: absolute; top: 13px; width: 1px; height: 6px;
  background: rgba(14, 116, 144, .35);
}
.vm-tl-rows { display: flex; flex-direction: column; gap: 6px; }
.vm-tl-track {
  position: relative; height: 46px; border-radius: 9px;
  background: #f1f5f9; border: 1px solid var(--border, #e2e8f0); overflow: hidden;
}
.vm-tl-audio { height: 40px; background: #faf5ff; }
.vm-tl-card {
  position: absolute; top: 0; height: 100%; background: repeating-linear-gradient(
    45deg, rgba(148, 163, 184, .18) 0 6px, rgba(148, 163, 184, .32) 6px 12px);
  color: var(--muted, #475569); font-size: 10.5px; display: flex;
  align-items: center; justify-content: center; text-align: center; padding: 0 4px;
}
.vm-tl-block, .vm-tl-clip { cursor: grab; }
.vm-tl-block:active, .vm-tl-clip:active { cursor: grabbing; }
.vm-tl-photo {
  position: absolute; top: 0; height: 100%; overflow: hidden;
  border-right: 2px solid #0e7490; background: #0f172a;
}
.vm-tl-photo img { width: 100%; height: 100%; object-fit: cover; opacity: .92; }
.vm-tl-noimg {
  display: flex; align-items: center; justify-content: center; height: 100%;
  color: #94a3b8; font-size: 18px;
}
.vm-tl-dur {
  position: absolute; left: 4px; bottom: 3px; font-size: 10px; font-weight: 700;
  color: #fff; background: rgba(15, 23, 42, .66); border-radius: 5px; padding: 1px 5px;
}
.vm-tl-cut { box-shadow: inset 0 0 0 2px #dc2626; }
.vm-tl-h {
  position: absolute; top: 0; width: 16px; height: 100%; cursor: ew-resize;
  z-index: 3; touch-action: none;
}
/* The handle lives INSIDE the block: the blocks clip their overflow (the thumbnail
   fills them), so a handle hanging outside would be half-invisible and — the bug
   this fixes — half of it would not be clickable at all. */
.vm-tl-h-r { right: 0; }
.vm-tl-h-l { left: 0; }
.vm-tl-h::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 4px; height: 22px;
  margin: -11px 0 0 -2px; border-radius: 3px; background: #fff;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .35);
}
.vm-tl-h:hover::after, .vm-tl-h:active::after { background: #22d3ee; }
.vm-tl-clip {
  position: absolute; top: 0; height: 100%; background: #7c3aed; overflow: hidden;
  border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}
.vm-tl-sel { box-shadow: inset 0 0 0 2px #0e7490, 0 0 0 2px rgba(14, 116, 144, .35); }
/* the part of a clip that sits past the end of the video: drawn, hatched and
   labelled, because "the rest of the song is out of the frame" is information */
.vm-tl-out {
  position: absolute; top: 0; height: 100%; min-width: 2px;
  background: repeating-linear-gradient(135deg, rgba(220, 38, 38, .3) 0 5px,
                                        rgba(220, 38, 38, .12) 5px 10px);
  pointer-events: none; z-index: 2;
}
.vm-tl-out span {
  position: absolute; left: 4px; top: 3px; font-size: 9.5px; white-space: nowrap;
  color: #991b1b; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
}
.vm-tl-endcap {
  position: absolute; bottom: 0; transform: translateX(-50%); font-size: 9.5px;
  font-weight: 700; color: #b91c1c; white-space: nowrap;
}
.vm-tl-h-move { cursor: grab; }
.vm-tl-wave { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; }
.vm-tl-name {
  position: absolute; left: 6px; top: 3px; font-size: 10.5px; color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 12px);
}
.vm-tl-ghost {
  position: absolute; top: 0; height: 100%; background: rgba(124, 58, 237, .16);
  border-top: 1px dashed rgba(124, 58, 237, .5);
  border-bottom: 1px dashed rgba(124, 58, 237, .5);
}
.vm-tl-head {
  position: absolute; top: 18px; bottom: 0; width: 2px; background: #dc2626;
  pointer-events: none; z-index: 6;
}
/* The playhead is dragged by its HANDLE, not by the 2px line: the cap above the
   line and a taller invisible strip in the ruler band are both grabbable. The
   line itself stays click-through so it cannot steal clicks from the clips. */
.vm-tl-head-cap {
  position: absolute; top: -18px; left: -21px; width: 44px; text-align: center;
  font-size: 9.5px; color: #fff; background: #dc2626; border-radius: 4px;
  line-height: 14px; height: 14px; cursor: ew-resize; pointer-events: auto;
  font-variant-numeric: tabular-nums;
}
.vm-tl-head-cap::after {
  content: ""; position: absolute; left: 50%; bottom: -5px; margin-left: -4px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid #dc2626;
}
.vm-tl-head-grab {
  position: absolute; top: -2px; left: 50%; height: 22px; width: 20px;
  margin-left: -10px; cursor: ew-resize; z-index: 7; pointer-events: auto;
}
.vm-tl-head-grab:active { background: rgba(220, 38, 38, .12); border-radius: 4px; }
.vm-warn {
  color: #92400e; background: #fffbeb; border: 1px solid #fde68a;
  border-radius: 10px; padding: 8px 11px; font-size: 12.5px;
}
html[dir="rtl"] .vm-tl-dur { left: auto; right: 4px; }
html[dir="rtl"] .vm-tl-name { left: auto; right: 6px; }

/* ---- editor (the settings columns, below the timeline) ------------------- */
.vm-editor {
  display: grid; gap: 16px;
  grid-template-columns: minmax(280px, 1fr) minmax(300px, 1.15fr);
  align-items: start;
}
@media (max-width: 860px) { .vm-editor { grid-template-columns: 1fr; } }
.vm-col {
  background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: 14px;
  padding: 14px; display: flex; flex-direction: column; gap: 8px;
}
.vm-lbl { font-size: 12px; font-weight: 600; color: var(--muted, #475569); margin-top: 4px; }
.vm-in {
  width: 100%; font-size: 13.5px; padding: 9px 11px; border-radius: 10px;
  border: 1px solid var(--border, #d8dee9); background: #fff; color: var(--text, #0f172a);
}
.vm-in:focus { outline: 2px solid #a5f3fc; border-color: #22d3ee; }
.vm-in-lg { font-size: 15px; font-weight: 600; }
.vm-row { display: flex; align-items: center; justify-content: space-between; }
.vm-row2 { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.vm-row2 > .vm-field { flex: 1 1 130px; display: flex; flex-direction: column; gap: 4px; }
.vm-field { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.vm-count { font-size: 11.5px; color: var(--muted, #94a3b8); }
.vm-picked { font-size: 12.5px; color: #166534; }
.vm-picked-none { color: var(--muted, #94a3b8); }

.vm-slides { display: flex; flex-direction: column; gap: 8px; }
.vm-slide {
  display: grid; grid-template-columns: 20px 54px 1fr auto; gap: 8px;
  align-items: center; padding: 7px; border-radius: 10px; background: #f8fafc;
  border: 1px solid var(--border, #eef2f7);
}
.vm-slide img { width: 54px; height: 40px; object-fit: cover; border-radius: 7px; background: #0f172a; }
.vm-slide-noimg {
  width: 54px; height: 40px; border-radius: 7px; background: #e2e8f0;
  display: flex; align-items: center; justify-content: center;
}
.vm-slide-n { font-size: 11.5px; color: var(--muted, #94a3b8); text-align: center; }
.vm-slide-fields { display: flex; flex-direction: column; gap: 5px; }
.vm-slide-fields .vm-in { padding: 6px 9px; font-size: 12.5px; }
.vm-slide-acts { display: flex; gap: 4px; }

.vm-styles { display: flex; gap: 8px; flex-wrap: wrap; }
.vm-style {
  cursor: pointer; font-size: 12.5px; font-weight: 600; padding: 8px 13px;
  border-radius: 999px; border: 1px solid var(--border, #d8dee9); background: #fff;
  color: var(--text, #0f172a);
}
.vm-style.on { background: #0e7490; border-color: #0e7490; color: #fff; }
.vm-seg-row { display: flex; gap: 6px; flex-wrap: wrap; }
.vm-seg {
  cursor: pointer; font-size: 12.5px; padding: 7px 11px; border-radius: 9px;
  border: 1px solid var(--border, #d8dee9); background: #fff; color: var(--text, #0f172a);
}
.vm-seg.on { background: #e0f2fe; border-color: #7dd3fc; color: #075985; font-weight: 600; }
.vm-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.vm-chip-btn {
  cursor: pointer; font-size: 12px; padding: 7px 11px; border-radius: 999px;
  border: 1px dashed var(--border, #cbd5e1); background: #fff; color: var(--muted, #475569);
}
.vm-chip-btn.on { border-style: solid; background: #ecfeff; border-color: #67e8f9; color: #0e7490; }

/* ---- video length -------------------------------------------------------
   A slider + a number box side by side, with the plan's ceiling spelled out.
   The range is the same control the platform uses for the audio, so the length
   reads as one more thing about the soundtrack rather than a new language. */
.vm-len-row { display: flex; align-items: center; gap: 8px; margin: 6px 0 2px; }
.vm-len-row input[type="range"] { flex: 1; min-width: 0; accent-color: #0e7490; }
.vm-len-row .vm-in-sm { width: 74px; flex: none; text-align: center; }

.vm-foot {
  position: sticky; bottom: 0; margin-top: 16px; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: rgba(255, 255, 255, .94); backdrop-filter: blur(6px);
  border-top: 1px solid var(--border, #e2e8f0); padding: 12px 4px;
}
.vm-est { font-size: 12.5px; color: var(--muted, #475569); }

/* On a phone the bottom tab bar is fixed over the page (design.css), and this bar
   is sticky to the BOTTOM of the viewport — so without this lift the Save and
   Render buttons sat behind the tab bar, half-visible and half-clickable. */
@media (max-width: 860px) {
  .vm-foot { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}

/* ---- progress ----------------------------------------------------------- */
.vm-prog { margin-top: 8px; }
.vm-steps { list-style: none; display: flex; gap: 14px; flex-wrap: wrap; margin: 0 0 4px; padding: 0; }
.vm-step { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted, #94a3b8); }
.vm-step .vm-dot {
  width: 9px; height: 9px; border-radius: 999px; background: #e2e8f0; display: inline-block;
}
.vm-step.on { color: #0e7490; font-weight: 600; }
.vm-step.on .vm-dot { background: #22d3ee; box-shadow: 0 0 0 4px rgba(34, 211, 238, .18); }
.vm-step.done { color: #166534; }
.vm-step.done .vm-dot { background: #22c55e; }
.vm-prog-msg { font-size: 13px; color: var(--text, #0f172a); margin: 2px 0 4px; }
.vm-pct { color: #0e7490; }
.vm-away {
  font-size: 12.5px; color: #92400e; background: #fffbeb; border: 1px solid #fde68a;
  border-radius: 10px; padding: 9px 12px; margin: 8px 0 12px; line-height: 1.7;
}

/* ---- the soundtrack: one card per clip ---- */
.vm-tracks { display: flex; flex-direction: column; gap: 8px; }
.vm-track {
  border: 1px solid var(--border, #e2e8f0); border-radius: 11px;
  background: #f8fafc; padding: 8px 9px;
}
.vm-track-top { display: flex; align-items: center; gap: 7px; }
.vm-track-n {
  font-size: 11px; font-weight: 700; color: #0e7490; background: #e0f2fe;
  border-radius: 999px; min-width: 18px; height: 18px; line-height: 18px; text-align: center;
}
.vm-track-name {
  flex: 1; font-size: 12.5px; color: var(--text, #0f172a);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vm-track-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 7px;
}
@media (max-width: 520px) { .vm-track-grid { grid-template-columns: repeat(2, 1fr); } }
.vm-mini {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 10.5px; color: var(--muted, #64748b);
}
.vm-mini-hint { font-size: 9.5px; line-height: 1.35; color: #94a3b8; }
.vm-in-sm { padding: 5px 7px; font-size: 12px; }
.vm-logo-chip {
  height: 30px; max-width: 120px; object-fit: contain; border-radius: 6px;
  background: #f1f5f9; padding: 3px;
}

/* ---- the versions of one project ---- */
.vm-vers { margin-top: 14px; border-top: 1px solid var(--border, #e2e8f0); padding-top: 12px; }
.vm-vers-head { font-size: 13.5px; font-weight: 700; color: var(--text, #0f172a); margin-bottom: 10px; }
.vm-vers-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.vm-ver {
  border: 1px solid var(--border, #e2e8f0); border-radius: 12px; overflow: hidden;
  background: #fff; display: flex; flex-direction: column;
}
.vm-ver.on { border-color: #22d3ee; box-shadow: 0 0 0 3px rgba(34, 211, 238, .16); }
.vm-ver-img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #0f172a;
  display: flex; align-items: center; justify-content: center;
}
.vm-ver-body { padding: 9px 10px; display: flex; flex-direction: column; gap: 6px; }
.vm-ver-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vm-ver-top b { font-size: 13px; color: var(--text, #0f172a); }
.vm-ver .vm-card-acts { gap: 6px; }
.vm-ver .vm-btn { padding: 6px 9px; font-size: 12px; }

/* ---- result ------------------------------------------------------------- */
.vm-result {
  margin-top: 18px; background: #fff; border: 1px solid var(--border, #e2e8f0);
  border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px;
}
.vm-result-head { font-size: 15px; font-weight: 700; color: #166534; }
.vm-player { width: 100%; border-radius: 12px; background: #000; max-height: 62vh; }

/* RTL: the editor's number/thumbnail columns read better mirrored, and the
   range inputs follow the page direction on their own. */
html[dir="rtl"] .vm-slide { grid-template-columns: 20px 54px 1fr auto; }
html[dir="rtl"] .vm-est { text-align: right; }

/* Dark pages (the shell's sidebar is dark, the content is light — but the
   Activity dashboard and embedded contexts can be dark), keep the text legible. */
@media (prefers-color-scheme: dark) {
  .dash-dark #videoMakerView .vm-col,
  .dash-dark #videoMakerView .vm-card,
  .dash-dark #videoMakerView .vm-result { background: #0f172a; border-color: #1e293b; }
}

/* ---- the interview's last screen: a summary, not a form ------------------- */
.vm-review { display: flex; flex-direction: column; gap: 4px; }
.vm-rev-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  border-bottom: 1px dashed var(--border, #e2e8f0); padding: 7px 2px;
}
.vm-rev-k { font-size: 12.5px; font-weight: 600; color: var(--text-3, #94a3b8); }
.vm-rev-v {
  font-size: 13.5px; font-weight: 700; color: var(--text-1, #334155);
  text-align: end; min-width: 0; overflow-wrap: anywhere;
}