/**
 * video-tools.css — "Polish your video" tray (Video Studio, WP2, 2026-07-09).
 * Component: src/public/js/video-tools.js (window.CBVideoTools).
 *
 * Design source of truth: css/outreach-dashboard.css (.mi-card/.mi-action/
 * .range-tabs idioms — Alex 2026-07-09: "that styling is spot on"). The tray
 * is appended to <body> and mounts from pages OUTSIDE the outreach dashboard's
 * `#page-outreach-dashboard` token scope (e.g. Settings → Media, which uses
 * the plain app-shell light theme). Exactly like the rel-editor modal further
 * down outreach-dashboard.css documents for its own overlay, this file uses
 * EXPLICIT colours copied from that same palette rather than `var(--...)`
 * tokens that would resolve to nothing here.
 */

.cbvt-overlay {
  position: fixed; inset: 0; z-index: 4000;
  background: rgba(13, 8, 25, 0.5);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
/* R2.1 (Alex, 2026-07-09): ONE constant frame for every view. The modal used
   to be 620px on the tray home and 900px in the working views — every tool
   switch visibly reshaped the window ("it just feels a bit stuck together").
   Now the frame never changes: same width and a steady min-height everywhere;
   only the content inside swaps, with a gentle cross-fade (.cbvt-anim below). */
.cbvt-modal {
  background: #ffffff; color: #15172b;
  width: 100%; max-width: 900px;
  min-height: min(640px, calc(100vh - 40px));
  max-height: calc(100vh - 40px);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(13, 8, 25, 0.35);
  font-family: inherit;
  display: flex; flex-direction: column;
  animation: cbvt-pop 0.22s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}
@keyframes cbvt-pop {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
/* Tool-switch cross-fade — applied by switchTool() only (deliberately NOT on
   a tool's own internal re-renders, e.g. a gaps checkbox toggle, which would
   flicker). */
.cbvt-panel.cbvt-anim { animation: cbvt-panel-in 0.18s ease both; }
@keyframes cbvt-panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cbvt-modal, .cbvt-panel.cbvt-anim { animation: none; }
}
.cbvt-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 18px 20px 12px; flex: none;
}
.cbvt-head h3 { margin: 0; font-size: 16px; font-weight: 600; color: #15172b; }
.cbvt-close {
  flex: none; border: none; background: transparent; font-size: 22px; line-height: 1;
  color: #9ca3af; cursor: pointer; padding: 0 2px; min-width: 32px; min-height: 32px;
}
.cbvt-close:hover { color: #374151; }

/* R2.1 — the chips (and the ← Back slot) stay pinned; only the tool's own
   content (#cbvt-panel) scrolls. Navigation never scrolls out of reach. */
.cbvt-body {
  display: flex; gap: 20px; padding: 6px 20px 20px;
  flex: 1; min-height: 0; overflow: hidden;
}

/* R2.1 — the old 200px "what people see" side column is gone; the tray home
   now shows the effective thumbnail on the SAME big stage every other tool
   uses (#cbvt-home-stage in video-tools.js), so the media area sits in the
   same place on every view. The empty/label/badge pieces below are still
   used by that stage. */
.cbvt-home-stage { position: relative; } /* anchors the absolute play badge to the stage, not the modal */
.cbvt-home-stage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cbvt-preview-empty {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; color: #4b4e63;
}
.cbvt-play-badge {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 15px; pointer-events: none;
}
.cbvt-preview-label {
  font-size: 11.5px; color: #6b7280; text-align: center;
}

/* Layer-order bar — select a layer on the canvas, then reorder it (Alex
   2026-07-09). Sits between the preview label and the canvas stage. */
.cbvt-layer-bar {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 10px; margin: 6px auto 2px; max-width: 640px;
}
.cbvt-layer-hint { font-size: 11.5px; color: #9096a3; }
.cbvt-layer-btns { display: inline-flex; gap: 6px; }
.cbvt-layer-btn {
  border: 1px solid #e0ddef; background: #fbfbfe; color: #4b40c9;
  border-radius: 8px; padding: 6px 10px; font-size: 12px; font-weight: 600;
  font-family: inherit; cursor: pointer; min-height: 32px; line-height: 1;
}
.cbvt-layer-btn:hover:not(:disabled) { border-color: #cfc9ec; background: #f2f0fb; }
.cbvt-layer-btn:disabled { opacity: 0.45; cursor: not-allowed; color: #9096a3; }

/* Tool chips + the active tool's panel. */
.cbvt-tools { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 14px; }

.cbvt-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  background: #f6f4ee; border-radius: 10px; padding: 4px;
}
.cbvt-chip {
  border: none; background: transparent;
  font-size: 12.5px; font-weight: 600; color: #6b7280;
  padding: 7px 12px; border-radius: 8px;
  display: inline-flex; align-items: center; gap: 5px;
  cursor: default;
}
.cbvt-chip:not(.soon) { cursor: pointer; }
.cbvt-chip:not(.soon):hover { color: #15172b; }
.cbvt-chip.active { background: #ffffff; color: #15172b; box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.cbvt-chip.soon { color: #9ca3af; cursor: not-allowed; }
.cbvt-chip-badge {
  font-size: 9px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  background: #ece9f7; color: #6a4cf1; padding: 2px 6px; border-radius: 999px;
}
/* WP12 (UX Round 2 §1) — the OTHER two chips while a job runs on this video:
   genuinely locked (the server 409s a second subtitles/trim/remove-gaps job
   regardless of which one asks) but not the one actually running, so this
   reads as "something else has this locked" rather than repeating the same
   claim on every chip. */
.cbvt-chip-badge-locked { background: #f0f1f5; color: #9ca3af; }

/* WP12 — the shared "← Back" slot for Subtitles/Trim/Remove-gaps (see
   syncWideBackButton() in video-tools.js); `display:flex` so the embedded
   .cbvt-back-btn's `align-self:flex-start` behaves exactly like the maker's
   own (a real flex item, not an incidental inline-block); collapsed via
   :empty whenever the Thumbnail tool is active, so it never adds a stray gap. */
#cbvt-panel-back { display: flex; }
#cbvt-panel-back:empty { display: none; }

.cbvt-panel {
  display: flex; flex-direction: column; gap: 12px;
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 2px; /* breathing room so focus rings/shadows aren't clipped by the scroll box */
}

/* Thumbnail action cards — the outreach dashboard's .mi-action idiom, sized
   up into full clickable cards (min-height 48px for touch). */
.cbvt-actions { display: flex; flex-direction: column; gap: 10px; }
.cbvt-action-card {
  display: flex; align-items: center; gap: 12px;
  background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px;
  padding: 12px 14px; min-height: 48px;
  text-align: left; cursor: pointer;
  font-family: inherit;
  transition: border-color .12s, background .12s;
}
.cbvt-action-card:hover { border-color: #6a4cf1; background: #faf9ff; }
.cbvt-action-card:disabled { opacity: 0.55; cursor: not-allowed; }
.cbvt-action-ico { font-size: 20px; flex: none; }
.cbvt-action-text { display: flex; flex-direction: column; gap: 2px; }
.cbvt-action-text b { font-size: 13.5px; color: #15172b; font-weight: 600; }
.cbvt-action-text small { font-size: 11.5px; color: #6b7280; }

.cbvt-reset-row { display: flex; }
.cbvt-ghost-btn {
  border-radius: 9px; font-size: 13px; font-weight: 600; padding: 9px 14px;
  cursor: pointer; border: 1px solid #e5e7eb; min-height: 40px;
  background: #fff; color: #374151; font-family: inherit;
}
.cbvt-ghost-btn:hover { border-color: #c9ccd3; }
.cbvt-ghost-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.cbvt-primary-btn {
  border-radius: 9px; font-size: 13.5px; font-weight: 600; padding: 9px 16px;
  cursor: pointer; border: 1px solid transparent; min-height: 44px;
  background: #6a4cf1; color: #fff; font-family: inherit;
}
.cbvt-primary-btn:hover { background: #5a3fd8; }
.cbvt-primary-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.cbvt-status { font-size: 12px; color: #6b7280; min-height: 16px; }
.cbvt-status.error { color: #c0423a; }

/* Pick-a-frame scrubber */
.cbvt-scrub { display: flex; flex-direction: column; gap: 10px; }
.cbvt-back-btn {
  align-self: flex-start; border: none; background: transparent; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: #6a4cf1; padding: 4px 2px;
  min-height: 32px;
}
.cbvt-back-btn:hover { color: #5a3fd8; }
/* WP12 ("bigger UI", spec §2) — shared by Pick-a-frame, Trim, Subtitles and
   Remove-gaps' preview stages. Capped + centred like the maker's own
   `.cbvt-maker-stage` (below) rather than stretched edge-to-edge, so all the
   tray's "big preview" views share one proportion. `width:100%` still makes
   it fill a narrower (e.g. mobile) container correctly — the cap only binds
   once there's room to spare. */
/* The stage takes the VIDEO's shape (--cbvt-ar, set by the tray from the
   video's own dimensions) and is held in by HEIGHT (--cbvt-cap), so a
   portrait video fills the sheet instead of being letterboxed into a strip
   inside a 16:9 slot. Both variables fall back to today's 16:9 behaviour, so
   a stage with no video behind it looks exactly as it did. */
.cbvt-overlay { --cbvt-cap: 62vh; }
.cbvt-stage,
.cbvt-scrub-stage {
  position: relative;
  width: min(100%, calc(var(--cbvt-cap, 62vh) * var(--cbvt-arnum, 1.7778)));
  max-width: 640px; margin: 0 auto;
  aspect-ratio: var(--cbvt-ar, 16 / 9); background: #000;
  border-radius: 10px; overflow: hidden;
}
/* Caption preview strip — sits directly under the video, linked above the
   editable transcript. Shows the line covering the current moment (or the line
   being edited), with a muted hint when there's nothing to show. */
.cbvt-caption-preview {
  width: 100%; max-width: 640px; margin: 0 auto;
  background: #15172b; color: #fff; text-align: center;
  font-size: 15px; font-weight: 600; line-height: 1.4;
  padding: 10px 14px; border-radius: 10px; white-space: pre-wrap; min-height: 20px;
}
.cbvt-caption-preview.empty {
  background: #f5f4fb; color: #9096a3; font-weight: 500; font-size: 12.5px;
}
.cbvt-stage video,
.cbvt-scrub-stage video { width: 100%; height: 100%; object-fit: contain; background: #000; }
/* The home view puts the poster on the same stage — cover, not contain, because
   a thumbnail is a still that should fill its frame. */
.cbvt-stage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cbvt-scrub-range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 8px;
  border-radius: 6px; background: #ece9f7; outline: none; margin: 2px 0;
}
.cbvt-scrub-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 26px; height: 26px;
  border-radius: 50%; background: #6a4cf1; cursor: pointer; border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(106, 76, 241, 0.5);
}
.cbvt-scrub-range::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%; background: #6a4cf1;
  cursor: pointer; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(106, 76, 241, 0.5);
}
.cbvt-scrub-range:disabled { opacity: 0.5; }
.cbvt-scrub-time { font-size: 11.5px; color: #6b7280; text-align: center; margin-top: -6px; }
.cbvt-scrub-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

/* AI: Suggest frames (Video Studio WP7, spec §2.5) — top-3 suggestion grid
   shown inside the Pick-a-frame panel (same scrub player, no second video). */
.cbvt-suggest-grid { display: flex; gap: 8px; }
.cbvt-suggest-card {
  position: relative; flex: 1 1 0; min-width: 0;
  aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden;
  border: 2px solid #e5e7eb; background: #15172b; padding: 0; cursor: pointer;
  font-family: inherit;
}
.cbvt-suggest-card:hover { border-color: #6a4cf1; }
.cbvt-suggest-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cbvt-suggest-score {
  position: absolute; top: 4px; right: 4px;
  background: rgba(10, 10, 20, 0.72); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 1;
  padding: 4px 6px; border-radius: 999px;
}

/* Subtitles tab — explainer / progress / editable-transcript states. */
.cbvt-subs-empty, .cbvt-subs-processing {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 10px; padding: 18px 8px;
}
.cbvt-subs-empty-ico { font-size: 30px; }
.cbvt-subs-empty p, .cbvt-subs-processing p { margin: 0; font-size: 13px; color: #4b5563; line-height: 1.5; max-width: 380px; }
.cbvt-subs-note { font-size: 11.5px !important; color: #9ca3af !important; }
.cbvt-spinner {
  width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid #ece9f7; border-top-color: #6a4cf1;
  animation: cbvt-spin 0.8s linear infinite;
}
@keyframes cbvt-spin { to { transform: rotate(360deg); } }

.cbvt-subs-editor { display: flex; flex-direction: column; gap: 10px; }
.cbvt-subs-rows {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 260px; overflow-y: auto;
  border: 1px solid #e5e7eb; border-radius: 10px; padding: 8px;
}
.cbvt-subs-row { display: flex; align-items: center; gap: 8px; }
/* WP12 — a <button> now (was a <span>): clicking it seeks the big preview
   player added above the row list. Reset button chrome, keep the original
   look exactly (same size/colour/weight) plus a hover to signal it's live. */
.cbvt-subs-time {
  flex: none; width: 76px; font-size: 11px; font-variant-numeric: tabular-nums;
  color: #6b7280; font-weight: 600;
  border: none; background: transparent; padding: 0; margin: 0;
  font-family: inherit; text-align: left; cursor: pointer;
}
.cbvt-subs-time:hover { color: #6a4cf1; }
.cbvt-subs-text {
  flex: 1; min-width: 0; border: 1px solid #e5e7eb; border-radius: 8px;
  padding: 7px 10px; font-size: 13px; font-family: inherit; min-height: 34px;
}
.cbvt-subs-text:focus { outline: none; border-color: #6a4cf1; }
.cbvt-subs-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Subtitle looks — the picker on the Words face. Each tile is a CSS
   rendering of its look in the face the burn uses (/fonts/, the same files
   the engine is handed), so what you pick is what you get. */
@font-face { font-family: 'CBVT Anton'; src: url('/fonts/Anton-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'CBVT Poppins'; src: url('/fonts/Poppins-ExtraBold.ttf') format('truetype'); font-weight: 800; font-display: swap; }
.cbvt-looks-wrap { display: flex; flex-direction: column; gap: 6px; width: 100%; min-width: 0; }
.cbvt-looks-title { font-size: 11px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; text-align: left; }
.cbvt-looks { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.cbvt-look {
  flex: none; width: 92px; scroll-snap-align: start;   /* three and a peek on a phone: the row scrolls */
  border: 2px solid #e5e7eb; border-radius: 10px; background: #fff; padding: 0;
  cursor: pointer; font-family: inherit; overflow: hidden; text-align: center;
}
.cbvt-look.on { border-color: #6a4cf1; box-shadow: 0 0 0 2px rgba(106, 76, 241, .18); }
.cbvt-look-sample {
  display: flex; align-items: center; justify-content: center; height: 56px; padding: 0 6px;
  background: linear-gradient(180deg, #3b4252 0%, #1f2430 100%); overflow: hidden;
}
.cbvt-look-text {
  color: #fff; line-height: 1.05; font-size: 12px; white-space: nowrap;
  max-width: 100%;
  text-shadow: 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 -1px 0 #000, 1px 1px 2px rgba(0, 0, 0, .8);
}
.cbvt-look-text[data-look="classic"], .cbvt-look-text[data-look="soft"], .cbvt-look-text[data-look="spoken"] { white-space: normal; }
.cbvt-look-text[data-look="classic"] { font-family: 'Courier New', monospace; font-size: 10.5px; background: rgba(0, 0, 0, .63); padding: 2px 4px; text-shadow: none; }
.cbvt-look-text[data-look="soft"] { font-family: 'CBVT Poppins', system-ui, sans-serif; font-weight: 800; font-size: 11px; text-shadow: 0 2px 3px rgba(0, 0, 0, .9); }
.cbvt-look-text[data-look="bold"] { font-family: 'CBVT Anton', Impact, sans-serif; font-size: 20px; letter-spacing: .01em; }
.cbvt-look-text[data-look="yellow"] { font-family: 'CBVT Anton', Impact, sans-serif; font-size: 21px; color: #FFE600; }
.cbvt-look-text[data-look="oneword"] { font-family: 'CBVT Anton', Impact, sans-serif; font-size: 28px; }
.cbvt-look-text[data-look="pop"] { font-family: 'CBVT Poppins', system-ui, sans-serif; font-weight: 800; font-size: 12.5px; }
.cbvt-look-text[data-look="pop"] em { font-style: normal; }
.cbvt-look-text[data-look="spoken"] { font-family: 'CBVT Poppins', system-ui, sans-serif; font-weight: 800; font-size: 12px; color: #FFE600; }
.cbvt-look-name { display: block; font-size: 11px; font-weight: 600; color: #374151; padding: 5px 4px; }
.cbvt-look-accents { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #4b5563; }
.cbvt-swatch { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #d1d5db; cursor: pointer; padding: 0; }
.cbvt-swatch.on { box-shadow: 0 0 0 2px #6a4cf1; }
/* Secondary actions (Redo / Remove) — tidied into a proper button row with a
   separator, so they read as deliberate options rather than floating text
   (Alex 2026-07-09). */
.cbvt-subs-secondary {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding-top: 10px; margin-top: 2px; border-top: 1px solid #eceaf4;
}
.cbvt-text-btn {
  border: none; background: transparent; cursor: pointer; font-family: inherit;
  font-size: 12px; font-weight: 600; color: #9ca3af; padding: 4px 2px; min-height: 28px;
}
.cbvt-text-btn:hover { color: #6b7280; }
/* In the subtitles secondary row, give them a light chip treatment so they sit
   as tidy buttons, not stray links. */
.cbvt-subs-secondary .cbvt-text-btn {
  border: 1px solid #e0ddef; border-radius: 8px; background: #fbfbfe;
  color: #6b7280; padding: 7px 12px; min-height: 34px;
}
.cbvt-subs-secondary .cbvt-text-btn:hover { border-color: #cfc9ec; background: #f5f4fb; color: #4b40c9; }

/* Trim tab (Video Studio WP6, spec §2.4) — reuses .cbvt-scrub-stage/
   .cbvt-scrub-range/.cbvt-scrub-time/.cbvt-scrub-actions from the pick-a-frame
   scrubber above; adds two labeled range sliders (start/end) instead of one. */
.cbvt-trim { display: flex; flex-direction: column; gap: 10px; }
.cbvt-trim-labels {
  display: flex; justify-content: space-between;
  font-size: 11.5px; color: #6b7280; font-weight: 600;
}
.cbvt-trim-labels b { color: #15172b; font-variant-numeric: tabular-nums; }
.cbvt-trim-sliders { display: flex; flex-direction: column; gap: 6px; }

/* Remove-gaps tab — quiet-moment suggestion list (parity with the recorder's
   own silence-detect checkbox rows, recorder/recorder.js renderSilence()). */
.cbvt-gaps { display: flex; flex-direction: column; gap: 10px; }
.cbvt-gaps-list {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 220px; overflow-y: auto;
  border: 1px solid #e5e7eb; border-radius: 10px; padding: 6px 8px;
}
.cbvt-gap-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: #374151; padding: 6px 2px; cursor: pointer;
}
.cbvt-gap-row span { display: inline-flex; align-items: baseline; gap: 4px; font-variant-numeric: tabular-nums; }
.cbvt-gap-row small { color: #9ca3af; }
.cbvt-gap-check { flex: none; width: 16px; height: 16px; accent-color: #6a4cf1; cursor: pointer; }

/* R2.1 — every tool's content sits in one shared 640px column, centred in
   the constant 900px frame, so nothing stretches edge-to-edge and the eye
   stays in the same place as you move between tools. The maker is the one
   exception: it's a working canvas and uses the full width. */
#cbvt-panel > * { width: 100%; max-width: 640px; margin-left: auto; margin-right: auto; }
#cbvt-panel > .cbvt-maker { max-width: none; }

.cbvt-maker { display: flex; flex-direction: column; gap: 12px; }

.cbvt-maker-stage {
  width: 100%; max-width: 640px; margin: 0 auto;
  aspect-ratio: 16 / 9; background: #15172b;
  border-radius: 10px; overflow: hidden; position: relative;
}
.cbvt-maker-stage canvas,
.cbvt-maker-stage .canvas-container {
  width: 100% !important; height: 100% !important; max-width: 100%;
}

.cbvt-maker-templates { display: flex; flex-wrap: wrap; gap: 8px; }
.cbvt-tmpl-chip {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 76px; border: 1.5px solid #e5e7eb; border-radius: 10px;
  background: #fff; padding: 6px; cursor: pointer; font-family: inherit;
}
.cbvt-tmpl-chip:hover { border-color: #c9ccd3; }
.cbvt-tmpl-chip.active { border-color: #6a4cf1; box-shadow: 0 0 0 1px #6a4cf1 inset; }
.cbvt-tmpl-swatch {
  display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 6px;
  background: #15172b; position: relative; overflow: hidden;
}
.cbvt-tmpl-label { font-size: 10px; font-weight: 600; color: #374151; text-align: center; line-height: 1.2; }

/* Per-template visual hint inside the swatch, pure CSS (no bitmap thumbnails
   — templates are data, per spec). Approximates each layout at a glance. */
.cbvt-tmpl-scrim-bold .cbvt-tmpl-swatch { background: linear-gradient(to bottom, #4b4e63 0%, #4b4e63 55%, rgba(10,10,20,0.75) 55%, rgba(10,10,20,0.75) 100%); }
.cbvt-tmpl-colour-block-left .cbvt-tmpl-swatch { background: linear-gradient(to right, #6a4cf1 0%, #6a4cf1 38%, #4b4e63 38%, #4b4e63 100%); }
.cbvt-tmpl-centred-title .cbvt-tmpl-swatch { background: #6a4cf1; }
.cbvt-tmpl-logo-corner .cbvt-tmpl-swatch { background: linear-gradient(to bottom, #4b4e63 0%, #4b4e63 65%, rgba(10,10,20,0.7) 65%, rgba(10,10,20,0.7) 100%); }
.cbvt-tmpl-lower-third .cbvt-tmpl-swatch { background: linear-gradient(to bottom, #4b4e63 0%, #4b4e63 82%, #6a4cf1 82%, #6a4cf1 100%); }

.cbvt-maker-field { display: flex; flex-direction: column; gap: 6px; }
.cbvt-maker-field > span { font-size: 12px; font-weight: 600; color: #374151; }
.cbvt-maker-field input[type="text"],
.cbvt-maker-field textarea {
  border: 1px solid #e5e7eb; border-radius: 9px; padding: 9px 12px;
  font-size: 13.5px; font-family: inherit; min-height: 40px;
}
.cbvt-maker-field textarea { resize: vertical; line-height: 1.45; }
.cbvt-maker-field input[type="text"]:focus,
.cbvt-maker-field textarea:focus { outline: none; border-color: #6a4cf1; }

/* AI: Draft headline (Video Studio WP7, spec §2.5) — button sits inline with
   the headline input; chips below set the input + the live Fabric Textbox. */
.cbvt-maker-headline-row { display: flex; gap: 8px; }
.cbvt-maker-headline-row input[type="text"] { flex: 1; min-width: 0; }
.cbvt-maker-headline-row .cbvt-ghost-btn { flex: none; white-space: nowrap; }
.cbvt-headline-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cbvt-headline-chip {
  border: 1px solid #e5e7eb; background: #faf9ff; color: #15172b;
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  padding: 7px 12px; border-radius: 999px; cursor: pointer;
}
.cbvt-headline-chip:hover { border-color: #6a4cf1; background: #ece9f7; }

.cbvt-swatches { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cbvt-swatch {
  width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent;
  cursor: pointer; padding: 0; box-shadow: 0 0 0 1px #e5e7eb; flex: none;
}
.cbvt-swatch.active { box-shadow: 0 0 0 2px #6a4cf1; }
.cbvt-swatch-custom {
  position: relative; overflow: hidden;
  background: conic-gradient(from 0deg, #ff004d, #ffe100, #00ff6a, #00c8ff, #7a3bff, #ff004d);
}
.cbvt-swatch-custom input[type="color"] {
  position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px);
  border: none; padding: 0; cursor: pointer; opacity: 0;
}

.cbvt-maker-actions-row { display: flex; flex-wrap: wrap; gap: 8px; }
.cbvt-maker-save-row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

@media (max-width: 480px) {
  .cbvt-overlay { padding: 0; align-items: flex-end; }
  .cbvt-modal { max-width: 100%; max-height: 92vh; border-radius: 16px 16px 0 0; }
  .cbvt-body { flex-direction: column; padding: 6px 16px 16px; }
  .cbvt-modal { min-height: 0; } /* bottom-sheet on mobile — content-sized, not frame-sized */
  .cbvt-action-card { min-height: 52px; }
  .cbvt-scrub-actions { flex-direction: column-reverse; }
  .cbvt-scrub-actions .cbvt-ghost-btn,
  .cbvt-scrub-actions .cbvt-primary-btn { width: 100%; }
  .cbvt-gap-row { padding: 8px 2px; } /* touch target */
  .cbvt-subs-actions { flex-direction: column-reverse; }
  .cbvt-subs-actions .cbvt-ghost-btn,
  .cbvt-subs-actions .cbvt-primary-btn { width: 100%; }
  .cbvt-overlay { --cbvt-cap: 52vh; }
  .cbvt-maker-stage,
  .cbvt-scrub-stage { max-width: 100%; }
  .cbvt-maker-save-row { flex-direction: column-reverse; }
  .cbvt-maker-save-row .cbvt-ghost-btn,
  .cbvt-maker-save-row .cbvt-primary-btn { width: 100%; }
  .cbvt-maker-actions-row .cbvt-ghost-btn { flex: 1 1 auto; }
  .cbvt-maker-headline-row { flex-direction: column; }
  .cbvt-maker-headline-row .cbvt-ghost-btn { width: 100%; }
}

/* WP13 (UX Round 2 §3.3) — background-effect preset chips. Same pill
   language as the template chips; disabled = the active template shows no
   background image (or none is set yet), so an effect would do nothing. */
.cbvt-effect-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cbvt-effect-chip {
  border: 1px solid #d0d3e0; border-radius: 999px; background: #fff;
  color: #374151; font-size: 12px; font-weight: 600; padding: 5px 12px;
  cursor: pointer; font-family: inherit;
}
.cbvt-effect-chip:hover:not(:disabled) { border-color: #6a4cf1; color: #6a4cf1; }
.cbvt-effect-chip.active { background: #6a4cf1; border-color: #6a4cf1; color: #fff; }
.cbvt-effect-chip:disabled { opacity: 0.45; cursor: default; }

/* WP13 (§3.1) — the "Use a video frame" strip: six clickable frame thumbs
   sampled from the video, scrolling horizontally if cramped. */
.cbvt-maker-frames-row { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0; }
.cbvt-frame-thumb {
  flex: none; width: 128px; aspect-ratio: 16 / 9; padding: 0;
  border: 2px solid transparent; border-radius: 8px; overflow: hidden;
  background: #000; cursor: pointer;
}
.cbvt-frame-thumb:hover { border-color: #6a4cf1; }
.cbvt-frame-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* R2.1 — the video's saved AI metadata (title/description/tags from the
   transcript, video-meta.js) shown in the maker under the headline tools. */
.cbvt-meta-block {
  border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px; background: #fbfaf7;
}
.cbvt-meta-head { font-size: 12px; font-weight: 700; color: #15172b; }
.cbvt-meta-head small { font-weight: 500; color: #9ca3af; }
.cbvt-meta-row { display: flex; gap: 10px; align-items: baseline; font-size: 12.5px; }
.cbvt-meta-row > span { flex: none; width: 78px; color: #6b7280; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.cbvt-meta-row b { font-weight: 600; color: #15172b; }
.cbvt-meta-row p { margin: 0; color: #374151; }
.cbvt-meta-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.cbvt-meta-tags em {
  font-style: normal; font-size: 11px; font-weight: 600;
  background: #ece9f7; color: #6a4cf1; border-radius: 999px; padding: 2px 8px;
}

/* R2.5 (Alex: alternative titles as tap-to-apply pills) — same look as the
   headline chips (.cbvt-headline-chip) so title alternatives read as one
   consistent pattern across the maker. */
.cbvt-title-chip {
  border: 1px solid #e5e7eb; background: #faf9ff; color: #15172b;
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  padding: 7px 12px; border-radius: 999px; cursor: pointer;
}
.cbvt-title-chip:hover { border-color: #6a4cf1; background: #ece9f7; }

/* R2.5 — alternative descriptions: full text always visible (no line-clamp/
   ellipsis — the whole point is letting the user read and pick a complete
   option), tap anywhere on the card to apply it. */
.cbvt-desc-options { display: flex; flex-direction: column; gap: 6px; }
.cbvt-desc-option {
  display: block; width: 100%; text-align: left; border: 1px solid #e5e7eb;
  background: #faf9ff; color: #374151; font-family: inherit; font-size: 12.5px;
  line-height: 1.45; padding: 8px 12px; border-radius: 9px; cursor: pointer;
  white-space: normal; overflow-wrap: break-word;
}
.cbvt-desc-option:hover { border-color: #6a4cf1; background: #ece9f7; }

/* R2.2 — the tray's own confirm (cbvtConfirm in video-tools.js), replacing
   native confirm()'s browser chrome. Above the tray (4000), below the media
   picker (4600). */
.cbvt-confirm-overlay {
  /* 9400: above Maya's panel (9000) and the room's band, below nothing that
     matters — a question to the coach must never open UNDER her. */
  position: fixed; inset: 0; z-index: 9400;
  background: rgba(13, 8, 25, 0.45);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  overflow-y: auto; /* Tall content scrolls instead of falling off-screen. */
}
.cbvt-confirm {
  background: #fff; color: #15172b;
  width: 100%; max-width: 420px;
  border-radius: 14px; padding: 20px;
  box-shadow: 0 20px 50px rgba(13, 8, 25, 0.35);
  animation: cbvt-pop 0.18s cubic-bezier(0.2, 0.8, 0.3, 1) both;
  margin-top: auto; margin-bottom: auto;
}
@media (prefers-reduced-motion: reduce) { .cbvt-confirm { animation: none; } }
.cbvt-confirm p { margin: 0 0 16px; font-size: 13.5px; line-height: 1.5; color: #374151; }
.cbvt-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ── R2.4 — maker flow inversion + banner + premium + text look ─────────── */

/* Top bar: Back · status banner · Cancel · Save — feedback lives where the
   eye already is (Alex: the bottom status line was "easy to miss"). */
.cbvt-maker-topbar { display: flex; align-items: center; gap: 10px; }
.cbvt-maker-topbar .cbvt-back-btn { flex: none; }
.cbvt-maker-topbar .cbvt-ghost-btn, .cbvt-maker-topbar .cbvt-primary-btn { flex: none; }
.cbvt-banner {
  flex: 1; min-width: 0;
  font-size: 12.5px; font-weight: 600; line-height: 1.35;
  padding: 8px 12px; border-radius: 10px;
  background: #f2effe; color: #4c3ac2; /* info: something is happening */
}
.cbvt-banner:empty { display: none; }
.cbvt-banner.error { background: #fdf0ef; color: #c0423a; }
.cbvt-banner.ok { background: #eaf6f0; color: #1c8e5a; }

/* Premium action card — the Studio maker leads the list (Alex: "high-value
   tools need to be premium, at the top"). */
.cbvt-action-premium {
  position: relative;
  border-color: #6a4cf1;
  background: linear-gradient(135deg, #faf9ff 0%, #ffffff 60%);
}
.cbvt-action-premium:hover { background: linear-gradient(135deg, #f4f1ff 0%, #ffffff 60%); }
.cbvt-premium-badge {
  position: absolute; top: 10px; right: 12px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  color: #fff; background: #6a4cf1;
  padding: 3px 8px; border-radius: 999px;
}

/* Text-look controls */
.cbvt-textstyle-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cbvt-swatches-small .cbvt-swatch { width: 22px; height: 22px; }
.cbvt-swatches-small .cbvt-swatch.active { outline: 2px solid #6a4cf1; outline-offset: 2px; }

/* Chooser (cbvtChooser) — stacked option cards inside the confirm shell */
.cbvt-choice-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.cbvt-choice-btn {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
  padding: 10px 12px; cursor: pointer; font-family: inherit;
}
.cbvt-choice-btn:hover { border-color: #6a4cf1; background: #faf9ff; }
.cbvt-choice-btn b { font-size: 13px; color: #15172b; font-weight: 600; }
.cbvt-choice-btn small { font-size: 11.5px; color: #6b7280; }

/* Frame-strip instruction line (background step + the cut-out dialog) */
.cbvt-strip-note { font-size: 11.5px; color: #6b7280; margin-bottom: 6px; }

/* R2.4f — the self-contained cut-out dialog (Alex: "whether it's an error
   message, the result, or part of the process, it should be contained
   within that modal"). Wider than the base confirm so the frame strip
   breathes; its own banner carries every progress/error/result line. */
.cbvt-cutout-dialog { max-width: 640px; }
.cbvt-cutout-dialog .cbvt-cutout-body { margin-bottom: 12px; }
.cbvt-cutout-dialog .cbvt-cutout-body:empty { display: none; }
.cbvt-cutout-dialog .cbvt-banner { margin-bottom: 12px; }
.cbvt-choice-btn:disabled { opacity: 0.55; cursor: default; }

/* R2.4b — the maker's numbered decision-tree steps (Alex: "collapse
   something so it's not all overwhelming… a logical workflow"). Native
   <details>: step 1 starts open, the rest expand on demand. */
.cbvt-step {
  border: 1px solid #e5e7eb; border-radius: 12px; background: #fff;
}
.cbvt-step > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  font-size: 13.5px; font-weight: 600; color: #15172b;
}
.cbvt-step > summary::-webkit-details-marker { display: none; }
.cbvt-step > summary i {
  flex: none; font-style: normal; width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: #ece9f7; color: #6a4cf1;
  font-size: 11.5px; font-weight: 700;
}
.cbvt-step[open] > summary i { background: #6a4cf1; color: #fff; }
.cbvt-step > summary small { font-weight: 500; font-size: 11.5px; color: #9ca3af; }
.cbvt-step > summary::after {
  content: '▾'; margin-left: auto; color: #9ca3af; font-size: 11px;
  transition: transform 0.15s ease;
}
.cbvt-step[open] > summary::after { transform: rotate(180deg); }
.cbvt-step-body {
  display: flex; flex-direction: column; gap: 12px;
  padding: 2px 14px 14px;
}

/* R2.4c — pulsing skeleton tiles in the suggestions zone while frames are
   sampled + scored: the "something is happening" signal lives exactly where
   the results will land. */
.cbvt-suggest-card.cbvt-skel {
  background: #eceef3; border: 1px solid #e5e7eb; cursor: default;
  animation: cbvt-skel-pulse 1.1s ease-in-out infinite;
}
@keyframes cbvt-skel-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) { .cbvt-suggest-card.cbvt-skel { animation: none; } }

/* R2.4d — real-time proofing. The subtitles preview carries a live caption
   overlay (styled like the burn: bottom-centred, dark box) that follows
   playback and repaints per keystroke while a line is being edited… */
.cbvt-live-caption {
  position: absolute; left: 50%; bottom: 8%;
  transform: translateX(-50%);
  max-width: 86%;
  background: rgba(10, 10, 20, 0.75); color: #fff;
  font-size: 15px; font-weight: 600; line-height: 1.35; text-align: center;
  padding: 4px 10px; border-radius: 6px;
  pointer-events: none; white-space: pre-wrap;
}
.cbvt-subs-row.active { background: #faf9ff; border-radius: 8px; }

/* …and each suggested quiet moment gets a play-through button, with the row
   highlighted while its stretch of video plays. */
.cbvt-gap-play {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid #d0d3e0; background: #fff; color: #6a4cf1;
  font-size: 10px; line-height: 1; cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center;
}
.cbvt-gap-play:hover { border-color: #6a4cf1; background: #faf9ff; }
.cbvt-gap-row.playing { background: #f2effe; border-radius: 8px; }

/* R2.4e — the suggestions strip scrolls horizontally (up to 8 ranked
   frames), and the previewed pick is clearly selected. */
.cbvt-suggest-grid { overflow-x: auto; padding: 2px; }
.cbvt-suggest-card { flex: 0 0 150px; }
.cbvt-suggest-card.selected { border-color: #6a4cf1; box-shadow: 0 0 0 2px rgba(106, 76, 241, 0.25); }


/* ══ THE PREVIEW CARD ═════════════════════════════════════════════════════
   The funnel builder's Preview card (src/public/js/subpages.js), rebuilt here
   with this file's explicit palette rather than the app-shell `var(--…)`
   tokens, which resolve to nothing inside a body-level overlay (see the note
   at the top of this file). Alex, 2026-09-01: "I don't want us to be building
   new UIs. I want everything now to be conformity and familiarity."

   The card holds the ONE stage. Tools mount their player into it and change
   only the controls below, so the picture never jumps on a tool switch. */
.cbvt-preview-card {
  flex: none;
  border: 1px solid #e5e7eb; border-radius: 14px; background: #fff;
  padding: 11px 11px 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.cbvt-preview-card[hidden] { display: none; }
.cbvt-preview-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: wrap;
}
.cbvt-preview-head-l { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cbvt-preview-head-l h4 { margin: 0; font-size: 13.5px; font-weight: 600; color: #15172b; }
.cbvt-preview-head-r { display: flex; align-items: center; gap: 6px; }

/* Three states, the builder's three words. Green = what you see is stored;
   purple = you are looking at something not yet saved; amber = the server is
   still making it. */
.cbvt-state-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 99px;
  background: #e7f6ed; color: #15803d; white-space: nowrap;
}
.cbvt-state-chip .cbvt-state-dot {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none;
}
.cbvt-state-chip.dirty { background: #efeaff; color: #4a32b8; }
.cbvt-state-chip.working { background: #fdf1e3; color: #b45309; }

.cbvt-mini-btn {
  height: 28px; padding: 0 10px; border: 1px solid #d0d3e0; border-radius: 8px;
  background: #fff; color: #4d5168; font: inherit; font-size: 11.5px;
  font-weight: 600; cursor: pointer; white-space: nowrap;
}
.cbvt-mini-btn:hover:not(:disabled) { border-color: #6a4cf1; color: #15172b; }
.cbvt-mini-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.cbvt-mini-btn[hidden] { display: none; }

.cbvt-preview-foot {
  font-size: 11px; color: #9096a3; text-align: center; min-height: 14px;
}


/* ══ THE CUT TOOL ═════════════════════════════════════════════════════════
   Trim and Remove-gaps were two screens over one operation. This is that
   operation: an outer keep-window (the two sliders, reusing .cbvt-scrub-range
   and .cbvt-trim-* from the tab it replaces) plus a list of pieces cut out of
   the middle, each switchable and each saying why it is there. */
.cbvt-cut { display: flex; flex-direction: column; gap: 10px; }
.cbvt-sect-t {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: #9096a3;
}
.cbvt-cut-list { display: flex; flex-direction: column; gap: 7px; }
.cbvt-clip {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border: 1px solid #e5e7eb; border-radius: 11px; background: #fff;
}
.cbvt-clip.off { opacity: 0.5; }
.cbvt-clip-tc {
  flex: none; font-size: 11px; font-weight: 700; color: #9096a3;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cbvt-clip-m { flex: 1; min-width: 0; font-size: 13px; color: #15172b; line-height: 1.35; }

/* The switch says "this piece is cut out". On = removed, which is why the
   row dims when it is OFF: an off switch means the piece stays in. */
.cbvt-sw {
  flex: none; width: 38px; height: 23px; border-radius: 12px; border: 0; padding: 0;
  background: #6a4cf1; position: relative; cursor: pointer;
}
.cbvt-sw::after {
  content: ''; position: absolute; top: 2.5px; left: 17.5px;
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  transition: left 0.16s ease;
}
.cbvt-sw[aria-checked="false"] { background: #d0d3e0; }
.cbvt-sw[aria-checked="false"]::after { left: 2.5px; }
.cbvt-sw:focus-visible { outline: 2px solid #6a4cf1; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .cbvt-sw::after { transition: none; } }

/* The list-building tool sits with the list it builds, never in the row of
   decisions below it (which stacks primary-first on a phone, and would put
   the first thing you do at the very bottom of the sheet). */
.cbvt-cut-find { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cbvt-cut-find-hint { font-size: 11.5px; color: #9096a3; }

/* ══ MAYA, IN THE CUT TOOL ════════════════════════════════════════════════
   She proposes into the list above; this block is what she SAYS about it and
   the one line where you argue back. Teal, not the app's purple, so "what
   Maya suggested" and "what you set" stay tellable apart at a glance. */
/* An off switch the coach set is theirs to know about, not ours to hide. */

/* The clip rows carry a name and a reason now, so they need two lines. */
.cbvt-clip-m b { display: block; font-size: 13px; font-weight: 600; color: #15172b; line-height: 1.3; }
.cbvt-clip-m small { display: block; font-size: 11.5px; color: #6b7280; line-height: 1.35; margin-top: 2px; }
.cbvt-clip { align-items: flex-start; }
.cbvt-clip-tc { padding-top: 2px; }
.cbvt-clip .cbvt-sw { margin-top: 1px; }

/* The one button, wherever a video lives. Deliberately unopinionated about
   its surroundings — a host passes `className`/`style` for local fit rather
   than each surface inventing its own button. */
.cbvt-open-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px; border-radius: 8px;
  border: 1px solid #d0d3e0; background: #fff; color: #4a32b8;
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  white-space: nowrap;
}
.cbvt-open-btn:hover { border-color: #6a4cf1; background: #faf9ff; }
.cbvt-open-btn:focus-visible { outline: 2px solid #6a4cf1; outline-offset: 2px; }
.cbvt-open-ico { font-size: 12px; line-height: 1; }

/* "Keep the original too" — a decision, not a tool, so it sits with the
   Apply row rather than in the list above it. */
.cbvt-keep-orig {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 11px; border: 1px solid #e5e7eb; border-radius: 11px;
  background: #fff; cursor: pointer;
}
.cbvt-keep-orig input { margin: 2px 0 0; width: 16px; height: 16px; accent-color: #6a4cf1; flex: none; }
.cbvt-keep-orig b { display: block; font-size: 13px; font-weight: 600; color: #15172b; }
.cbvt-keep-orig small { display: block; font-size: 11.5px; color: #6b7280; margin-top: 2px; }

.cbvt-cut-note {
  font-size: 12.5px; line-height: 1.45; color: #15803d;
  background: #e7f6ed; border-radius: 10px; padding: 9px 11px;
}

/* ══ SOUND ════════════════════════════════════════════════════════════════
   A voiceover and a bed. Nothing on this panel renders — the mix is built on
   Apply cut — which is why the panel ends with a line saying so. */
.cbvt-sound { display: flex; flex-direction: column; gap: 10px; }
.cbvt-vo { display: flex; flex-direction: column; gap: 9px; }
.cbvt-vo-script {
  width: 100%; box-sizing: border-box; resize: vertical;
  border: 1px solid #d0d3e0; border-radius: 11px; padding: 10px 12px;
  font: inherit; font-size: 13.5px; line-height: 1.5; color: #15172b; background: #fff;
}
.cbvt-vo-script:focus { outline: 2px solid #6a4cf1; outline-offset: 1px; }
.cbvt-vo-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* Recording is a state the coach must be able to see at a glance — it is the
   one control on this panel that is doing something to their microphone. */
.cbvt-rec-on { background: #c0423a; }
.cbvt-rec-on:hover { background: #a5372f; }
.cbvt-vo-have {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 13px; color: #15803d; background: #e7f6ed;
  border-radius: 10px; padding: 9px 11px;
}
.cbvt-music-off {
  font-size: 12.5px; line-height: 1.5; color: #6b7280;
  background: #f5f4fb; border-radius: 10px; padding: 10px 12px;
}
.cbvt-music { display: flex; flex-direction: column; gap: 8px; }
.cbvt-opt {
  text-align: left; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 11px;
  background: #fff; font: inherit; font-size: 13px; color: #15172b; cursor: pointer;
}
.cbvt-opt.on { border-color: #6a4cf1; background: #faf9ff; }
.cbvt-gain { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: #6b7280; }

/* ══ COMING UP TEASER ═══════════════════════════════════════════════════════
   docs/projects/video-studio/coming-up-teaser-spec.md §3.

   Explicit colours, like the rest of this file — the tray mounts outside the
   outreach dashboard's token scope, so a var() here resolves to nothing. */

.cbvt-cu { display: flex; flex-direction: column; gap: 12px; }

/* How long it runs. Three answers, and none of them is a text field. */
.cbvt-cu-lens { display: flex; gap: 6px; }
.cbvt-cu-len {
  font-size: 13px; font-weight: 600; padding: 10px 17px; border-radius: 999px;
  border: 1px solid #e5e7eb; background: #f7f7fb; color: #4d5168; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.cbvt-cu-len:hover { border-color: #c7c9d4; }
.cbvt-cu-len.on { background: #6a4cf1; border-color: #6a4cf1; color: #fff; }

/* The teaser as one bar: a block per line, sized by how long it runs. */
.cbvt-cu-bar-row {
  position: relative; display: flex; height: 40px; border-radius: 10px;
  overflow: hidden; border: 1px solid #e5e7eb; background: #f7f7fb;
}
.cbvt-cu-seg {
  display: flex; align-items: center; justify-content: center; min-width: 0;
  font-size: 11.5px; font-weight: 700; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, #f17d6e, #e85a8a 55%, #b15dde);
  border-right: 2px solid #fff; transition: flex-grow 0.18s ease;
}
.cbvt-cu-seg:last-of-type { border-right: 0; }
.cbvt-cu-seg.on { outline: 2px solid #4a32b8; outline-offset: -2px; }
.cbvt-cu-head {
  position: absolute; top: 0; bottom: 0; width: 2px; background: #15172b;
  left: 0; display: none; pointer-events: none;
}

.cbvt-cu-meta { font-size: 12.5px; color: #6b7280; font-variant-numeric: tabular-nums; }
.cbvt-cu-meta b { color: #15172b; }
.cbvt-cu-hint { display: block; font-size: 12px; color: #9096a3; margin-top: 2px; }

.cbvt-cu-transport { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ── The lines ───────────────────────────────────────────────────────────── */
.cbvt-cu-list { display: flex; flex-direction: column; gap: 8px; }
.cbvt-cu-line { border: 1px solid #e5e7eb; border-radius: 12px; background: #fafafd; overflow: hidden; }
.cbvt-cu-line.open { border-color: #6a4cf1; background: #fff; }
.cbvt-cu-head-btn {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 11px 12px; display: grid; grid-template-columns: 24px 1fr; gap: 10px;
  align-items: start; font: inherit; color: inherit;
}
.cbvt-cu-n {
  font-size: 11px; font-weight: 700; color: #9096a3; background: #eef0f6;
  border-radius: 6px; text-align: center; padding: 3px 0; margin-top: 2px;
}
.cbvt-cu-line.open .cbvt-cu-n { background: #efeaff; color: #4a32b8; }
.cbvt-cu-body { min-width: 0; }
.cbvt-cu-say { display: block; font-size: 14.5px; line-height: 1.45; color: #15172b; }
.cbvt-cu-say.big { font-size: 15.5px; margin: 0 0 11px; }
.cbvt-cu-foot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 5px; }
.cbvt-cu-tc { font-size: 11px; color: #9096a3; font-variant-numeric: tabular-nums; }
.cbvt-cu-why { display: block; font-size: 12px; color: #6b7280; margin-top: 4px; line-height: 1.4; }
.cbvt-cu-flag { font-size: 11px; padding: 2px 8px; border-radius: 999px; font-weight: 600; }
.cbvt-cu-flag.bad { background: #fceceb; color: #c0392f; }
.cbvt-cu-flag.ok { background: #e2f3ea; color: #1c8e5a; }
.cbvt-cu-flag.warn { background: #fdf0dd; color: #a8620a; }

/* The letters a cut is eating, shown as letters. Dragging gives them back. */
.cbvt-cu-w-out { color: #b3b6c4; }
.cbvt-cu-tap { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.cbvt-cu-w-in { color: #15172b; }
.cbvt-cu-w-lost { color: #c0392f; opacity: 0.55; text-decoration: line-through; }
.cbvt-cu-w-clip { border-bottom: 2px solid #c0392f; }

/* ── The trimmer ─────────────────────────────────────────────────────────── */
.cbvt-cu-trim { border-top: 1px solid #e5e7eb; padding: 13px 12px 14px; background: #fff; }

/* Built from the WORD TIMINGS: a block per word, a gap per silence. Not a
   waveform — there is no amplitude data on this side, and drawing one would be
   a picture of nothing. */
.cbvt-cu-ribbon {
  position: relative; height: 44px; border-radius: 9px; background: #f7f7fb;
  border: 1px solid #eef0f6; overflow: hidden;
}
.cbvt-cu-bar {
  position: absolute; top: 12px; height: 20px; border-radius: 3px;
  background: #cdd0da;
}
.cbvt-cu-bar.in { background: #6a4cf1; }
.cbvt-cu-edge { position: absolute; top: 0; bottom: 0; width: 2px; background: #15172b; }
.cbvt-cu-edge.sel { background: #4a32b8; box-shadow: 0 0 0 3px rgba(106, 76, 241, 0.18); }

.cbvt-cu-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 11px; }
.cbvt-cu-edges { display: flex; border: 1px solid #e5e7eb; border-radius: 9px; overflow: hidden; }
.cbvt-cu-edges button {
  font: inherit; font-size: 13px; font-weight: 600; border: 0; padding: 11px 17px;
  background: #f7f7fb; color: #4d5168; cursor: pointer;
}
.cbvt-cu-edges button[aria-pressed="true"] { background: #6a4cf1; color: #fff; }
.cbvt-cu-nudge {
  font: inherit; font-size: 12.5px; font-weight: 600; min-width: 60px; padding: 12px 8px;
  border: 1px solid #e5e7eb; border-radius: 9px; background: #f7f7fb; color: #15172b;
  cursor: pointer; font-variant-numeric: tabular-nums;
}
.cbvt-cu-nudges { display: flex; align-items: center; gap: 8px; flex: 1 1 200px; justify-content: space-between; }
.cbvt-cu-read {
  font-size: 13px; font-weight: 600; color: #4a32b8; min-width: 76px; text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ⚠️ THE RAIL. The cut point stays still and the world moves under it, at 5ms
   per pixel — because dragging the clip itself on a 390px phone is 29ms per
   pixel and a fingertip covers a whole second of speech. 66px tall so a thumb
   has somewhere to land. */
.cbvt-cu-rail {
  position: relative; margin-top: 11px; height: 66px; border-radius: 11px;
  border: 1px solid #e5e7eb; background: #f7f7fb; overflow: hidden;
  cursor: ew-resize; touch-action: none; user-select: none;
}
.cbvt-cu-ticks {
  position: absolute; left: 0; right: 0; top: 0; height: 15px; opacity: 0.4;
  background-image: repeating-linear-gradient(90deg, #b3b6c4 0 1px, transparent 1px 20px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.cbvt-cu-ticks.major {
  height: 26px; opacity: 0.6;
  background-image: repeating-linear-gradient(90deg, #9096a3 0 2px, transparent 2px 100px);
}
/* Stops short of the label rather than striking through it. */
.cbvt-cu-centre {
  position: absolute; left: 50%; top: 6px; bottom: 24px; width: 3px;
  border-radius: 2px; background: #6a4cf1; transform: translateX(-1.5px);
}
.cbvt-cu-magnet {
  position: absolute; left: 50%; top: 6px; transform: translateX(-50%);
  font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700;
  color: #1c8e5a; background: #e2f3ea; padding: 1px 7px; border-radius: 999px;
  opacity: 0; transition: opacity 0.12s ease;
}
.cbvt-cu-magnet.on { opacity: 1; }
.cbvt-cu-raillabel {
  position: absolute; left: 0; right: 0; bottom: 7px; text-align: center;
  font-size: 11.5px; color: #9096a3; pointer-events: none;
}

.cbvt-cu-trimfoot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-top: 11px;
}
.cbvt-cu-len { font-size: 12px; color: #6b7280; font-variant-numeric: tabular-nums; }
.cbvt-cu-acts { display: flex; gap: 6px; }

.cbvt-cu-done { text-align: center; padding: 26px 16px; }
.cbvt-cu-done-ico { font-size: 30px; margin-bottom: 8px; }
.cbvt-cu-done p { margin: 0 0 6px; font-size: 15px; color: #15172b; }
.cbvt-cu-done-sub { font-size: 13px; color: #6b7280; line-height: 1.5; max-width: 44ch; margin: 0 auto 14px; }

@media (prefers-reduced-motion: reduce) {
  .cbvt-cu-seg, .cbvt-cu-magnet { transition: none; }
}

/* ══ THE END CARD ═══════════════════════════════════════════════════════════
   Set here, drawn by video-end-card.js — the same component the published page
   uses, so the preview in this tray is the thing itself, not a picture of it. */

.cbvt-ec { display: flex; flex-direction: column; gap: 14px; }
.cbvt-ec-lede { margin: 0; font-size: 13.5px; line-height: 1.55; color: #6b7280; max-width: 58ch; }
.cbvt-ec-field { display: flex; flex-direction: column; gap: 6px; }
.cbvt-ec-field > span {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #9096a3;
}
.cbvt-ec-field input, .cbvt-ec-field select {
  font: inherit; font-size: 14px; padding: 11px 13px; border: 1px solid #e5e7eb;
  border-radius: 10px; background: #fff; color: #15172b; width: 100%;
}
.cbvt-ec-field input:focus, .cbvt-ec-field select:focus { outline: 2px solid #6a4cf1; outline-offset: 1px; border-color: #6a4cf1; }
.cbvt-ec-field input[hidden] { display: none; }
.cbvt-ec-secs { display: flex; gap: 6px; flex-wrap: wrap; }


/* ═══ §11 — THE ROOM ("Filmstrip") ═══════════════════════════════════════════
   The Edit video tray on the funnel builder's grammar: a band across the top
   (manage-board.css's .fm-deck, COPIED here under the room's own class —
   that stylesheet belongs to the builder agent and its deck is scoped to its
   own room, `body.fm-room-open #fm-workspace-view`), the video on the floor,
   its parts as a filmstrip under it, and the open part's controls below.
   The room IS the screen, on a phone and on a desk alike (Alex: "make sure
   it's the same for desktop"). The name-sheet uses the builder's .fm-wh /
   .fm-fsh classes as they are — those are unscoped, so they are used, not
   copied. Values here are the builder's own; change them there first. */
.cbvt-overlay.cbvt-room {
  padding: 0; align-items: stretch; justify-content: stretch;
  background: #141322; backdrop-filter: none;
  --cbvt-cap: 50vh;
}
.cbvt-room-modal {
  position: relative; flex: 1; min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
  background: #141322; color: #fff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}
/* ── The band ── */
.cbvt-room .cbvt-deck {
  position: relative; z-index: 3; flex: none;
  display: flex; align-items: center; gap: 7px;
  min-height: 52px; padding: env(safe-area-inset-top, 0px) 9px 0;
  background: #23212f; color: #fff;
  font: 500 12px/1.3 "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  white-space: nowrap;
}
.cbvt-room .cbvt-deck .dk-grow { flex: 1; min-width: 0; }
.cbvt-room .cbvt-deck .dk-btn {
  background: rgba(255, 255, 255, .14); border: 0; color: #fff;
  font: 600 12px/1 "Inter", -apple-system, sans-serif;
  padding: 9px 10px; border-radius: 7px; cursor: pointer; white-space: nowrap;
}
.cbvt-room .cbvt-deck .dk-btn:hover:not([disabled]) { background: rgba(255, 255, 255, .26); }
.cbvt-room .cbvt-deck .dk-btn[disabled] { opacity: .32; cursor: default; }
.cbvt-room .cbvt-deck .dk-btn.on { background: rgba(255, 255, 255, .26); }
.cbvt-room .cbvt-deck .dk-btn.dk-pri { background: #fff; color: #23212f; }
.cbvt-room .cbvt-deck .dk-btn.dk-go { background: #10b981; color: #fff; }
.cbvt-room .cbvt-deck .dk-ic { padding: 9px; min-width: 34px; text-align: center; }
.cbvt-room .cbvt-deck .dk-maya {
  position: relative; display: inline-flex; align-items: center; gap: 6px; flex: none;
  background: rgba(255, 255, 255, .12); border: 0; color: #fff;
  padding: 5px 11px 5px 5px; border-radius: 999px; cursor: pointer;
  font: 600 12px/1 "Inter", -apple-system, sans-serif;
  animation: cbvt-maya-breathe 2.4s ease-in-out infinite;
}
.cbvt-room .cbvt-deck .dk-maya:hover { background: rgba(255, 255, 255, .24); animation: none; }
.cbvt-room .cbvt-deck .dk-mav {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, #f0559a, #c23bd6);
  display: flex; align-items: center; justify-content: center;
  font: 800 12px/1 "Inter", -apple-system, sans-serif; color: #fff;
  animation: cbvt-maya-pulse 2.4s ease-in-out infinite;
}
.cbvt-room .cbvt-deck .dk-mark { width: 72%; height: 72%; display: block; }
@keyframes cbvt-maya-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240, 85, 154, .6); }
  55%      { box-shadow: 0 0 0 9px rgba(240, 85, 154, 0); }
}
@keyframes cbvt-maya-breathe {
  0%, 100% { background: rgba(255, 255, 255, .12); }
  55%      { background: rgba(240, 85, 154, .30); }
}
.cbvt-room .cbvt-deck .dk-dot { width: 7px; height: 7px; border-radius: 50%; background: #fbbf24; flex: none; }
.cbvt-room .cbvt-deck .dk-dot[hidden] { display: none !important; }
.cbvt-room .cbvt-deck .dk-what {
  display: inline-flex; flex-direction: column; min-width: 0; line-height: 1.25;
  font: 600 12px/1.25 "Inter", -apple-system, sans-serif;
  color: rgba(255, 255, 255, .78); overflow: hidden;
}
.cbvt-room .cbvt-deck .dk-what b { color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbvt-room .cbvt-deck .dk-what em {
  font-style: normal; font-weight: 400; font-size: 10.5px;
  color: rgba(255, 255, 255, .62); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cbvt-room .cbvt-deck .dk-what.warn em { color: #fbbf24; font-weight: 600; }
.cbvt-room .cbvt-deck .dk-exit {
  border: 0; background: rgba(255, 255, 255, .14); color: #fff; flex: none;
  font-size: 13px; line-height: 1; cursor: pointer;
  width: 34px; height: 34px; border-radius: 7px; margin-left: 2px;
}
.cbvt-room .cbvt-deck .dk-exit:hover { background: rgba(255, 255, 255, .26); }
/* The room's own two faces of the band: the door carries the video's own
   cover (not a funnel — Alex), and a render is a job IN the band, exactly
   like the builder's "writing…". */
.cbvt-room .cbvt-deck .dk-vid {
  display: inline-flex; align-items: center; gap: 7px; min-width: 40px;
  max-width: 46vw; overflow: hidden; padding: 5px 10px 5px 5px;
}
.cbvt-room .cbvt-deck .dk-cov {
  width: 26px; height: 26px; border-radius: 5px; flex: none; display: block; object-fit: cover;
  background: linear-gradient(160deg, #4a4380, #221f38 70%);
}
.cbvt-room .cbvt-deck .dk-vid b { overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.cbvt-room .cbvt-deck .dk-job {
  display: inline-flex; align-items: center; gap: 7px; min-width: 0;
  color: #fbbf24; font: 600 12px/1 "Inter", -apple-system, sans-serif;
}
.cbvt-room .cbvt-deck .dk-job span { overflow: hidden; text-overflow: ellipsis; }
.cbvt-room .cbvt-deck .dk-job i {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  border: 2px solid #fbbf24; border-right-color: transparent;
  animation: cbvt-spin 1s linear infinite;
}
@keyframes cbvt-spin { to { transform: rotate(360deg); } }
.cbvt-deck-hint {
  flex: none; background: rgba(35, 33, 47, .92); color: rgba(255, 255, 255, .82);
  font: 500 11.5px/1 "Inter", -apple-system, sans-serif; padding: 7px 12px; text-align: center;
}
.cbvt-deck-hint[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .cbvt-room .cbvt-deck .dk-mav, .cbvt-room .cbvt-deck .dk-maya, .cbvt-room .cbvt-deck .dk-job i { animation: none; }
}
/* ── The floor: stage, strip, then the open part's controls ── */
.cbvt-room-body {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 12px 14px 24px;
}
.cbvt-room-stage {
  width: 100%; max-width: 900px; flex: none;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.cbvt-room-stage[hidden] { display: none; }
.cbvt-room .cbvt-stage { border-radius: 12px; overflow: hidden; background: #000; }
/* THE STRIP — the video laid out as its parts. A filmstrip is the one control
   a phone owner already has under every video. Segments for time (teaser,
   talk); attachments, one size, for the two things that are not time (cover,
   end card). */
.cbvt-strip { width: 100%; flex: none; }
.cbvt-strip-lab {
  display: flex; justify-content: space-between; margin: 0 2px 5px;
  font: 500 10.5px ui-monospace, SFMono-Regular, Menlo, monospace; color: rgba(255, 255, 255, .5);
}
.cbvt-strip-bar { position: relative; display: flex; gap: 3px; height: 48px; touch-action: none; }
.cbvt-part {
  position: relative; border: 0; border-radius: 8px; cursor: pointer; min-width: 0; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  padding: 0 8px; font: 600 11px/1.2 "Inter", -apple-system, sans-serif; color: #fff; text-align: center;
}
.cbvt-part span { font-weight: 500; opacity: .85; font-size: 10px; }
.cbvt-part-tile {
  flex: 0 0 58px; background: linear-gradient(160deg, #4a4380, #221f38 70%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}
.cbvt-part-tile b { font-weight: 600; font-size: 10px; }
.cbvt-part-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cbvt-part-cover span { position: relative; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
.cbvt-part-teaser { flex: 0 0 22%; background: linear-gradient(135deg, #f17d6e, #e85a8a 60%, #b15dde); }
.cbvt-part-talk { flex: 1; background: repeating-linear-gradient(90deg, #3d3a55 0 10px, #464260 10px 20px); }
.cbvt-part-cut {
  position: absolute; top: 0; bottom: 0; pointer-events: none;
  background: rgba(20, 19, 34, .85); border-left: 2px solid #fbbf24; border-right: 2px solid #fbbf24;
}
.cbvt-part.empty {
  background: transparent; box-shadow: none; border: 1.5px dashed rgba(255, 255, 255, .35);
  color: rgba(255, 255, 255, .7); font-weight: 500;
}
.cbvt-part.on { outline: 2px solid #fff; outline-offset: -2px; }
.cbvt-part.making { background: repeating-linear-gradient(135deg, #8a6a3a 0 8px, #5a4a2a 8px 16px); color: #fbbf24; }
.cbvt-playhead {
  position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px;
  background: #fff; pointer-events: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, .4);
}
.cbvt-playhead::before {
  content: ""; position: absolute; top: -4px; left: -4px; width: 10px; height: 10px; border-radius: 50%; background: #fff;
}
.cbvt-playhead[hidden] { display: none; }
.cbvt-room-foot {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 8px;
  font-size: 11.5px; color: rgba(255, 255, 255, .62);
}
.cbvt-room .cbvt-preview-foot { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; color: inherit; }
.cbvt-room-foot-r { display: flex; align-items: center; gap: 6px; flex: none; }
.cbvt-room .cbvt-state-chip { background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .85); }
.cbvt-room .cbvt-state-chip.dirty { background: rgba(106, 76, 241, .35); color: #dcd6ff; }
.cbvt-room .cbvt-state-chip.working { background: rgba(251, 191, 36, .18); color: #fbbf24; }
.cbvt-room .cbvt-mini-btn { background: rgba(255, 255, 255, .1); border-color: transparent; color: #fff; }
.cbvt-room .cbvt-mini-btn:hover:not(:disabled) { border-color: transparent; color: #fff; background: rgba(255, 255, 255, .2); }
/* The open part's controls: the tools we already have, on a white card. The
   body scrolls, the card does not — one scrollbar on a phone, never two. */
.cbvt-room #cbvt-panel-back { width: 100%; max-width: 900px; }
.cbvt-room .cbvt-panel {
  width: 100%; max-width: 900px; flex: none; overflow: visible;
  background: #fff; color: #15172b; border-radius: 14px; padding: 14px;
  box-sizing: border-box;
}
.cbvt-room .cbvt-panel:empty { display: none; }
/* On a desk she floats bottom-right (the builder's own corner). The floor
   leaves her that corner instead of letting her land on the strip's last
   tile: measured at 1280, the panel sat squarely on "End card" and Refresh. */
@media (min-width: 1100px) {
  .cbvt-room-body { padding-right: 420px; }
}
@media (max-width: 760px) {
  .cbvt-overlay.cbvt-room { --cbvt-cap: 40vh; }
  .cbvt-room-body { padding: 10px 10px 24px; }
  /* ⭐ ONE MAYA ON A PHONE (Alex, 2026-09-01): her chip in the band is the
     handle. Minimised, she is not a bar across the foot covering the tools;
     she is gone, and the chip (with its unread dot) brings her back at half.
     The builder's room does exactly this (manage-board.css, fm-room-open). */
  body.cbvt-room-open .mpp.mpp-min { display: none !important; }
  .cbvt-room .cbvt-deck { gap: 5px; padding-left: 6px; padding-right: 6px; }
  .cbvt-room .cbvt-deck .dk-btn { padding: 9px 8px; font-size: 11.5px; }
  .cbvt-room .cbvt-panel { padding: 12px; }
}

/* ── §11.5 the teaser card, §11.7 the hold-to-record button ─────────────── */
.cbvt-cu-lede { margin: 0 0 12px; font-size: 13.5px; line-height: 1.45; color: #374151; }
.cbvt-cu-empty { display: flex; flex-direction: column; gap: 8px; padding: 6px 2px; }
.cbvt-cu-empty p { margin: 0; }
.cbvt-cu-empty .cbvt-primary-btn { align-self: flex-start; margin-top: 4px; }
.cbvt-hold {
  display: block; width: 100%; min-height: 56px; border: 0; border-radius: 999px;
  background: #c0392f; color: #fff; font: 600 15px/1 "Inter", -apple-system, sans-serif;
  cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none; margin: 4px 0 12px;
}
.cbvt-hold:active, .cbvt-hold.on { background: #e74c3c; }
.cbvt-hold.on { animation: cbvt-hold-pulse 1s ease-in-out infinite; }
@keyframes cbvt-hold-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, .55); }
  50%      { box-shadow: 0 0 0 10px rgba(231, 76, 60, 0); }
}
@media (prefers-reduced-motion: reduce) { .cbvt-hold.on { animation: none; } }
.cbvt-vo-typed { margin: 10px 0 4px; }
.cbvt-vo-typed summary { cursor: pointer; font-size: 13px; color: #6b7280; padding: 6px 0; }
.cbvt-vo-typed[open] summary { color: #15172b; }

/* ── §11.6 the talk as the editor: pieces, handles, "cut here" ──────────── */
.cbvt-cut-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.cbvt-cut-tools .cbvt-ghost-btn { flex: 1 1 auto; min-height: 44px; }
.cbvt-cut-tools #cbvt-cut-here-at { font-weight: 500; opacity: .7; margin-left: 4px; font-variant-numeric: tabular-nums; }
.cbvt-cut-how { margin-top: 8px; }
.cbvt-clip.sel { outline: 2px solid #fbbf24; outline-offset: -2px; border-radius: 10px; }
.cbvt-part-talk.editing { overflow: visible; background: #2e2b44; }
.cbvt-part-talk.editing > span { position: relative; z-index: 1; }
.cbvt-piece {
  position: absolute; top: 0; bottom: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, #3d3a55 0 10px, #464260 10px 20px);
  box-shadow: inset -1px 0 0 rgba(20, 19, 34, .9);
}
.cbvt-piece.off { background: repeating-linear-gradient(135deg, rgba(20, 19, 34, .9) 0 6px, rgba(70, 66, 96, .9) 6px 12px); }
.cbvt-piece.on { outline: 2px solid #fbbf24; outline-offset: -2px; z-index: 1; }
.cbvt-handle {
  position: absolute; top: -6px; bottom: -6px; width: 16px; z-index: 3;
  background: #fff; border-radius: 5px; cursor: ew-resize; touch-action: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .45);
}
.cbvt-handle.l { margin-left: 0; }        /* both sit INSIDE the talk at the bound, never on a neighbour tile */
.cbvt-handle.r { margin-left: -16px; }
.cbvt-handle::before { content: ""; position: absolute; inset: -6px -8px; }          /* the thumb's real target */
.cbvt-handle::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 2px; height: 16px;
  margin: -8px 0 0 -1px; background: #23212f; border-radius: 1px;
}

.cbvt-part-teaser.draft { background: repeating-linear-gradient(135deg, #e85a8a 0 8px, #b15dde 8px 16px); opacity: .85; }

.cbvt-cu-empty .cbvt-ec-field { margin: 4px 0; }
.cbvt-cu-empty .cbvt-ec-field input[type="text"] { width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 10px; font-size: 14px; color: #15172b; }
.cbvt-cu-empty .cbvt-scrub-actions { margin-top: 6px; }
.cbvt-status.err { color: #b42318; }