/* vfloor.css — VIDEO-specific production-floor components, additive on top of
   shell.css + floor.css (same token language). The video floor reuses the
   carousel chrome (.floor.carousel rail | workbench | wall, .srail, .sdot,
   .setbar) and adds: 9:16 take cards · per-clip audio · ingredients rows ·
   clip-details expander · assemble-externally panel · ElevenLabs key card. */

/* the video floor uses the carousel 3-column grid; alias for readability */
.floor.video { grid-template-columns:212px 420px 1fr; }
@media (max-width:1240px) { .floor.video { grid-template-columns:200px 1fr; }
  .floor.video .wall { grid-column:1 / -1; } }
@media (max-width:1080px) { .floor.video { grid-template-columns:1fr; }
  .floor.video .wall { grid-column:auto; } }

/* rail dot extra state: a clip's run is live */
.sdot.generating { background:var(--primary); border:none; width:8px; height:8px;
  animation:vf-pulse 1.1s ease-in-out infinite; }
@keyframes vf-pulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }

/* clip duration tag in the rail row */
.slide .meta .nm .cdur { font:700 10px/1 var(--display); color:var(--muted-2); margin-left:5px; }

/* ───────────────────────── TAKES WALL (9:16 video) ─────────────────────── */
.takegrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:12px; }
.take { border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  background:var(--surface); box-shadow:var(--sh-sm); cursor:pointer; position:relative;
  transition:border-color .14s, box-shadow .14s, transform .06s; }
.take:hover { border-color:#d5d2ec; box-shadow:var(--sh-md); transform:translateY(-1px); }
.take.picked { border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-ring), var(--sh-sm); }
.take .tpv { aspect-ratio:9/16; display:grid; place-items:center; position:relative;
  color:rgba(255,255,255,.85); }
.take .tplay { position:absolute; inset:0; display:grid; place-items:center; }
.take .tplay .pc { width:34px; height:34px; border-radius:50%;
  background:rgba(21,23,58,.45); border:1.5px solid rgba(255,255,255,.75);
  display:grid; place-items:center; color:#fff; backdrop-filter:blur(2px);
  transition:background .14s, transform .06s; }
.take:hover .tplay .pc { background:rgba(21,23,58,.65); transform:scale(1.06); }
.take .tplay .pc .ic { width:14px; height:14px; margin-left:2px; }
.take .tdur { position:absolute; bottom:7px; right:7px; z-index:2;
  padding:2px 7px; border-radius:var(--pill); background:rgba(21,23,58,.62);
  color:#fff; font:700 9.5px/1.4 var(--display); letter-spacing:.03em; }
.take .pickmark { position:absolute; top:7px; right:7px; width:21px; height:21px;
  border-radius:50%; background:var(--acc); color:#fff; display:none;
  place-items:center; box-shadow:var(--sh-sm); z-index:2; }
.take .pickmark .ic { width:12px; height:12px; }
.take.picked .pickmark { display:grid; }
.take .newdot { position:absolute; top:8px; left:8px; z-index:2;
  display:inline-flex; align-items:center; gap:5px; padding:3px 8px;
  border-radius:var(--pill); background:rgba(255,255,255,.92); color:var(--acc-700);
  font:800 9.5px/1 var(--display); letter-spacing:.05em; text-transform:uppercase;
  box-shadow:var(--sh-sm); }
.take .newdot::before { content:''; width:6px; height:6px; border-radius:50%;
  background:var(--acc); }
.take .cf { display:flex; align-items:center; gap:6px; padding:6px 9px;
  font:600 10.5px/1 var(--display); color:var(--muted);
  border-top:1px solid var(--line); }
.take .cf .spacer { flex:1; }
/* tiny audio-embedded marker on a take footer */
.take .cf .aud { display:inline-flex; align-items:center; gap:3px; color:var(--primary); }
.take .cf .aud .ic { width:10px; height:10px; }

/* skeleton while a take renders */
.skel916 { aspect-ratio:9/16; border-radius:var(--r); border:1px solid var(--line); }

/* upload-your-own-take tile */
.take.add { display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; border-style:dashed; border-color:var(--line-strong); color:var(--muted-2);
  cursor:pointer; font:600 10.5px/1.35 var(--display); text-align:center; box-shadow:none;
  aspect-ratio:9/16; transition:border-color .14s, color .14s, background .14s; }
.take.add:hover { border-color:var(--acc); color:var(--acc-700); background:var(--acc-50); }
.take.add .ic { width:17px; height:17px; }

/* selected-take hero panel — 9:16 playback + as-generated prompt */
.heropanel.video { grid-template-columns:200px 1fr; }
@media (max-width:880px) { .heropanel.video { grid-template-columns:1fr; } }
.heroimg.v916 { aspect-ratio:9/16; }
.heroimg .playbig { position:absolute; inset:0; display:grid; place-items:center; }
.heroimg .playbig .pc { width:46px; height:46px; border-radius:50%;
  background:rgba(21,23,58,.5); border:2px solid rgba(255,255,255,.8);
  display:grid; place-items:center; color:#fff; cursor:pointer;
  transition:background .14s, transform .06s; }
.heroimg .playbig .pc:hover { background:rgba(21,23,58,.7); transform:scale(1.05); }
.heroimg .playbig .pc .ic { width:18px; height:18px; margin-left:2px; }
.heroimg .scrub { position:absolute; left:12px; right:12px; bottom:10px; height:3px;
  border-radius:var(--pill); background:rgba(255,255,255,.35); }
.heroimg .scrub::after { content:''; position:absolute; left:0; top:0; bottom:0; width:36%;
  border-radius:var(--pill); background:#fff; }

/* ─────────────────── WORKBENCH: INGREDIENTS (per-clip refs) ────────────── */
.inglist { display:flex; flex-direction:column; gap:7px; }
.ingrow { display:flex; align-items:center; gap:9px; padding:7px 9px;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); }
.ingrow .iic { width:30px; height:30px; flex:none; border-radius:7px;
  display:grid; place-items:center; background:var(--g100); color:var(--primary); }
.ingrow .iic .ic { width:14px; height:14px; }
.ingrow .iic.have { background:linear-gradient(135deg,#eae9fb,#eeedf9); }
.ingrow .im { flex:1; min-width:0; }
.ingrow .im .nm { font:700 11.5px/1.3 var(--display); color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ingrow .im .rs { display:flex; align-items:center; gap:6px; margin-top:2px; }
.rolebadge { font:700 8.5px/1 var(--display); letter-spacing:.05em; text-transform:uppercase;
  padding:2px 6px; border-radius:5px; background:var(--g100); color:var(--muted); }
.ingst { font:600 10px/1 var(--display); display:inline-flex; align-items:center; gap:4px; }
.ingst .ic { width:10px; height:10px; }
.ingst.have { color:var(--success-deep); }
.ingst.needed { color:var(--amber); }
.ingst.generating { color:var(--primary); }
.ingrow .iact { display:flex; gap:5px; flex:none; }
.ingrow .iact .btn.sm { height:26px; padding:0 9px; font-size:11px; }
.ingrow.needed { border-style:dashed; border-color:#f3d9a8; background:var(--amber-50); }

/* ─────────────────── WORKBENCH: MODEL & PARAMS SUMMARY ─────────────────── */
.paramchips { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.pchip { display:inline-flex; align-items:center; gap:5px; padding:4px 9px;
  border-radius:var(--pill); border:1px solid var(--line); background:var(--g50);
  font:600 10.5px/1 var(--display); color:var(--ink-2); }
.pchip .ic { width:11px; height:11px; color:var(--muted); }
.pchip b { color:var(--ink); }

/* ───────────────────────── WORKBENCH: AUDIO ROW ────────────────────────── */
.audhead { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.modechip { display:inline-flex; align-items:center; gap:6px; padding:4px 10px;
  border-radius:var(--pill); border:1px solid var(--line-strong); background:var(--surface);
  font:700 11px/1 var(--display); color:var(--ink-2); }
.modechip .ic { width:11px; height:11px; color:var(--primary); }
.modechip span { font-weight:500; color:var(--muted); }
.embedbadge { display:inline-flex; align-items:center; gap:5px; padding:4px 9px;
  border-radius:var(--pill); font:700 10px/1 var(--display); letter-spacing:.02em; }
.embedbadge .ic { width:10px; height:10px; }
.embedbadge.clip { background:rgba(43,45,124,.10); color:var(--primary); }
.embedbadge.overlay { background:var(--amber-50); color:var(--amber); }
.votext { width:100%; min-height:56px; resize:vertical; margin-top:8px;
  border:1px solid var(--line-strong); border-radius:var(--r-sm);
  padding:8px 11px; font:500 12px/1.55 var(--body); color:var(--ink-2);
  background:var(--surface); outline:none; transition:border-color .14s, box-shadow .14s; }
.votext:focus { border-color:var(--acc); box-shadow:var(--ring); }
.voacts { display:flex; align-items:center; gap:7px; margin-top:8px; flex-wrap:wrap; }
.voacts .vmeta { font:600 10.5px/1 var(--display); color:var(--muted); }
/* VO ready — compact player bar with a fake waveform */
.voplayer { display:flex; align-items:center; gap:9px; margin-top:8px;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--g50);
  padding:7px 10px; }
.voplayer .pbtn { width:26px; height:26px; flex:none; border-radius:50%;
  background:var(--primary); color:#fff; display:grid; place-items:center; cursor:pointer;
  transition:background .14s; }
.voplayer .pbtn:hover { background:var(--primary-hover); }
.voplayer .pbtn .ic { width:11px; height:11px; margin-left:1px; }
.voplayer .wave { flex:1; min-width:0; display:flex; align-items:center; gap:2px; height:20px; }
.voplayer .wave i { flex:1; border-radius:2px; background:var(--g300); min-height:4px; }
.voplayer .wave i.on { background:var(--primary); }
.voplayer .vtime { font:700 10.5px/1 var(--display); color:var(--muted); flex:none; }
/* not-connected variant */
.vodisabled { display:flex; align-items:flex-start; gap:9px; margin-top:8px;
  border:1px dashed var(--line-strong); border-radius:var(--r-sm); background:var(--g50);
  padding:9px 11px; font:500 11.5px/1.5 var(--body); color:var(--muted); }
.vodisabled .ic { width:13px; height:13px; flex:none; margin-top:1px; color:var(--amber); }
.vodisabled a { color:var(--acc-700); font-weight:700; text-decoration:none; }
.vodisabled a:hover { text-decoration:underline; }

/* ─────────────────── WORKBENCH: CLIP-DETAILS EXPANDER ──────────────────── */
.clipdetails { border:1px solid var(--line); border-radius:var(--r-sm); background:var(--g50);
  overflow:hidden; }
.clipdetails .cd-head { display:flex; align-items:center; gap:8px; padding:9px 11px;
  cursor:pointer; user-select:none; transition:background .14s; }
.clipdetails .cd-head:hover { background:var(--surface-2); }
.clipdetails .cd-head .chev { width:13px; height:13px; color:var(--muted-2);
  transition:transform .14s; flex:none; }
.clipdetails.open .cd-head .chev { transform:rotate(90deg); }
.clipdetails .cd-head .t { font:700 11.5px/1 var(--display); color:var(--ink-2); }
.clipdetails .cd-head .sum { font:600 10px/1 var(--display); color:var(--muted-2); }
.clipdetails .cd-head .spacer { flex:1; }
.clipdetails .cd-body { display:none; border-top:1px solid var(--line);
  background:var(--surface); padding:11px; }
.clipdetails.open .cd-body { display:block; }
.cd-sub { font:700 9.5px/1 var(--display); letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted-2); margin:0 0 7px; }
.cd-sec + .cd-sec { margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
/* shots list */
.shotrow { display:flex; align-items:flex-start; gap:8px; padding:6px 0; }
.shotrow + .shotrow { border-top:1px dashed var(--line); }
.shotrow .sn { flex:none; width:18px; height:18px; border-radius:6px; background:#eeedf9;
  color:var(--muted); display:grid; place-items:center; font:800 9.5px/1 var(--display); }
.shotrow .sd { flex:1; min-width:0; font:500 11.5px/1.5 var(--body); color:var(--ink-2); }
.shotrow .sd b { color:var(--ink); }
.shotrow .sdur { flex:none; font:700 10px/1.6 var(--display); color:var(--muted-2); }

/* ─────────────────── DELIVER: ASSEMBLE-EXTERNALLY PANEL ────────────────── */
.assemblepanel { border:1px solid var(--acc-100); border-radius:var(--r-lg);
  background:var(--surface); box-shadow:var(--sh); padding:16px; }
.assemblepanel .ah { display:flex; align-items:center; gap:8px;
  font:800 14px/1.25 var(--display); color:var(--ink); }
.assemblepanel .ah .ic { width:15px; height:15px; color:var(--acc-700); }
.assemblepanel .ad { font:500 12px/1.55 var(--body); color:var(--muted); margin-top:5px; }
.dllist { margin-top:12px; display:flex; flex-direction:column; gap:7px; }
.dlrow { display:flex; align-items:center; gap:10px; padding:8px 11px;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--g50); }
.dlrow .dn { flex:none; width:22px; height:22px; border-radius:7px; background:var(--primary);
  color:#fff; display:grid; place-items:center; font:800 10.5px/1 var(--display); }
.dlrow .dm { flex:1; min-width:0; }
.dlrow .dm .nm { font:700 11.5px/1.3 var(--display); color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dlrow .dm .mt { font:600 10px/1.4 var(--display); color:var(--muted); margin-top:1px; }
.dlrow .dm .mt .aud { color:var(--primary); }
/* upload-final drop strip */
.updrop { margin-top:14px; display:flex; align-items:center; gap:11px; padding:13px 14px;
  border:1.5px dashed var(--line-strong); border-radius:var(--r);
  color:var(--muted); cursor:pointer;
  transition:border-color .14s, color .14s, background .14s; }
.updrop:hover { border-color:var(--acc); color:var(--acc-700); background:var(--acc-50); }
.updrop .uic { width:34px; height:34px; flex:none; border-radius:var(--r-sm);
  display:grid; place-items:center; background:var(--g100); color:var(--primary); }
.updrop .uic .ic { width:16px; height:16px; }
.updrop .ut { font:700 12.5px/1.3 var(--display); color:var(--ink); }
.updrop .ud { font:500 11px/1.4 var(--body); color:var(--muted); margin-top:1px; }
/* final-render ready row */
.finalrow { margin-top:14px; display:flex; align-items:center; gap:11px; padding:11px 13px;
  border:1px solid #bfe6cb; border-radius:var(--r);
  background:linear-gradient(180deg,var(--emerald-50),var(--surface)); }
.finalrow .fic { width:34px; height:34px; flex:none; border-radius:var(--r-sm);
  display:grid; place-items:center; background:var(--success); color:#fff; }
.finalrow .fic .ic { width:16px; height:16px; }
.finalrow .fm { flex:1; min-width:0; }
.finalrow .fm .nm { font:700 12.5px/1.3 var(--display); color:var(--ink); }
.finalrow .fm .mt { font:600 10.5px/1.4 var(--display); color:var(--muted); margin-top:1px; }

/* 9:16 variant of the delivered set thumbnails */
.setthumbs.video { grid-template-columns:repeat(4, minmax(0,1fr)); max-width:640px; }
.setthumb .tpv.v916 { aspect-ratio:9/16; }

/* ─────────────────── ELEVENLABS KEY CARD (Connections inset) ───────────── */
.keycard { border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface);
  box-shadow:var(--sh-sm); padding:14px; max-width:430px; }
.keycard .kh { display:flex; align-items:center; gap:10px; }
.keycard .klogo { width:36px; height:36px; flex:none; border-radius:var(--r-sm);
  background:var(--g900); color:#fff; display:grid; place-items:center;
  font:800 13px/1 var(--display); }
.keycard .km { flex:1; min-width:0; }
.keycard .km .nm { font:800 13px/1.25 var(--display); color:var(--ink); }
.keycard .km .ds { font:500 11px/1.45 var(--body); color:var(--muted); margin-top:2px; }
.keycard .kbody { margin-top:12px; }
.keycard .kfoot { display:flex; align-items:center; gap:8px; margin-top:11px; }
.keycard .kfoot .note { font:500 10.5px/1.45 var(--body); color:var(--muted); flex:1; }

/* states-gallery grid used on the audio page */
.statesrow { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:12px; }
.statecard { border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface);
  box-shadow:var(--sh-sm); padding:13px; }
.statecard .st-t { display:flex; align-items:center; gap:7px;
  font:800 12px/1.25 var(--display); color:var(--ink); margin-bottom:9px; }
.statecard .st-t .ic { width:13px; height:13px; color:var(--acc-700); }