/* ═══════════════════════════════════════════════════════════════════════
   VidGenerator — Timeline editor (v1)
   Uses the :root variables defined in app.html (--bg --card --line --txt
   --dim --ok --warn --bad --accent --accent2). Does not redefine them.
   Source colors consistent with the review's .srcbadge:
   AI #c9a2ff · Pexels/real #7be3a0 · NASA var(--warn) · Avatar #9ecbff
   ═══════════════════════════════════════════════════════════════════════ */

/* ── header ── */
.ed-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.ed-head h2{margin:0}
.ed-back{cursor:pointer}
.ed-banner{background:#3a2f18;border:1px solid var(--warn);color:var(--warn);
  padding:10px 16px;border-radius:10px;margin:12px 0;font-size:13.5px}
.ed-meta{color:var(--dim);font-size:13px;margin:4px 0 10px}
.ed-zoomctl{margin-left:12px;display:inline-flex;gap:4px;align-items:center}
.ed-zbtn{background:var(--card);border:1px solid var(--line);color:var(--dim);
  border-radius:6px;padding:1px 8px;font-size:11.5px;cursor:pointer;line-height:1.6}
.ed-zbtn:hover{border-color:var(--accent);color:var(--accent)}

/* ── video ── */
.ed-videowrap{margin-bottom:16px}
.ed-videowrap video{width:100%;max-width:860px;border-radius:12px;
  border:1px solid var(--line);background:#000;display:block}

/* ── timeline ── */
.ed-tl{overflow-x:auto;background:linear-gradient(180deg,var(--card2),var(--card));
  border:1px solid var(--line);border-radius:var(--r);padding:14px;
  box-shadow:0 4px 18px rgba(0,0,0,.2)}
.ed-strip{display:flex;gap:0}
.ed-scene{position:relative;height:64px;min-width:46px;flex:0 0 auto;
  border-radius:8px;background-color:#10141d;background-size:cover;
  background-position:center;border:2px solid var(--line);cursor:pointer;
  overflow:hidden;transition:border-color .12s,transform .12s,box-shadow .12s}
.ed-scene:hover{transform:translateY(-2px);filter:brightness(1.08);
  box-shadow:0 6px 14px rgba(0,0,0,.35)}
.ed-scene.sel{border-color:var(--accent) !important;
  box-shadow:0 0 0 2px #5b8cff55;z-index:1}
.ed-scene .ed-sid{position:absolute;top:3px;left:5px;font-size:10.5px;
  font-weight:700;color:#fff;text-shadow:0 1px 3px #000;white-space:nowrap}
.ed-scene .ed-sdur{position:absolute;bottom:3px;right:5px;font-size:10px;
  color:#e8ebf2cc;text-shadow:0 1px 3px #000}
.ed-scene .ed-ssrc{position:absolute;bottom:3px;left:4px;font-size:9px;
  font-weight:800;letter-spacing:.3px;background:rgba(0,0,0,.55);
  padding:1px 5px;border-radius:4px;line-height:1.5;white-space:nowrap}
.ed-ssrc-ai{color:#c9a2ff}.ed-ssrc-px{color:#7be3a0}
.ed-ssrc-nasa{color:#e8a33d}.ed-ssrc-avatar{color:#9ecbff}
/* border by visual source */
.ed-src-ai{border-color:#c9a2ff88}
.ed-src-px{border-color:#7be3a088}
.ed-src-nasa{border-color:#e8a33d88}
.ed-src-avatar{border-color:#9ecbff88}
/* swap mode: the candidate scenes get highlighted */
.ed-swapmode .ed-scene:not(.sel){outline:2px dashed #8f6fff88;
  outline-offset:-4px;cursor:copy}

/* time ruler */
.ed-ruler{position:relative;height:22px;margin-top:8px;
  border-top:1px solid var(--line)}
.ed-mark{position:absolute;top:0;height:100%;border-left:1px solid var(--line);
  padding:5px 0 0 4px;font-size:10px;color:var(--dim);white-space:nowrap}
.ed-mark.ed-end{border-left:none;border-right:1px solid var(--line);
  padding:5px 4px 0 0;transform:translateX(-100%)}

/* audio lanes */
.ed-lane{margin-top:8px;height:30px;border-radius:8px;display:flex;
  align-items:center;font-size:12px;padding:0 10px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.ed-voice{background:#152a3f;border:1px solid #9ecbff44;color:#9ecbff}
.ed-music{background:transparent;border:none;padding:0;gap:2px;overflow:visible}
.ed-mtrack{flex:1;min-width:60px;height:30px;display:flex;align-items:center;
  padding:0 10px;border-radius:8px;background:#12301e;
  border:1px solid #7be3a044;color:#7be3a0;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}

/* legend → clickable source filters (highlight in the timeline) */
.ed-legend{display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  margin:10px 2px;color:var(--dim);font-size:12px}
.ed-legend span{display:inline-flex;align-items:center;gap:5px}
.ed-lchip{display:inline-flex;align-items:center;gap:6px;background:var(--card);
  border:1px solid var(--line);color:var(--dim);border-radius:999px;
  padding:3px 11px;font-size:12px;cursor:pointer}
.ed-lchip:hover{border-color:var(--accent);color:var(--txt)}
.ed-lchip.on{border-color:var(--accent);color:var(--accent);background:#152a3f}
.ed-lchip.clear{color:var(--bad)}
.ed-dot{display:inline-block;width:9px;height:9px;border-radius:50%;border:none}
.ed-dot.ed-src-ai{background:#c9a2ff}
.ed-dot.ed-src-px{background:#7be3a0}
.ed-dot.ed-src-nasa{background:#e8a33d}
.ed-dot.ed-src-avatar{background:#9ecbff}
.ed-lgnote{opacity:.8;margin-left:8px}
/* while a filter is active, non-matching scenes fade out */
.ed-filter-on .ed-scene:not(.ed-match){opacity:.22;filter:grayscale(.5)}
.ed-filter-on .ed-scene.ed-match{box-shadow:0 0 0 2px #ffffff26}
.ed-filter-on .ed-scene.sel{opacity:1}

/* ── scene panel ── */
.ed-panelwrap{margin-top:14px}
.ed-panel{display:flex;gap:18px;flex-wrap:wrap;
  background:linear-gradient(180deg,var(--card2),var(--card));
  border:1px solid var(--line);border-radius:var(--r);padding:18px;
  box-shadow:0 4px 18px rgba(0,0,0,.2)}
.ed-pimg{flex:0 0 320px;max-width:100%}
.ed-pimg img{width:100%;border-radius:10px;border:1px solid var(--line);
  cursor:zoom-in;display:block}
.ed-noimg{aspect-ratio:16/9;display:flex;align-items:center;
  justify-content:center;background:#10141d;border:1.5px dashed var(--line);
  border-radius:10px;color:var(--dim);font-size:13px;text-align:center;
  padding:10px}
.ed-pbody{flex:1;min-width:300px}
.ed-ptitle{font-weight:700;font-size:15px;display:flex;gap:8px;
  align-items:center;flex-wrap:wrap}
.ed-ptag{font-size:11px;padding:2px 8px;border-radius:999px;background:#1b2334;
  color:var(--dim);font-weight:600}
.ed-ptag.warn{color:var(--warn);background:#3a2f1866}
/* saved-but-not-applied regeneration (pending_regen) */
.ed-ptag.pend{color:#c9a2ff;background:#2a214066;border:1px solid #c9a2ff44;
  display:inline-flex;align-items:center;gap:5px}
.ed-pcancel{background:none;border:none;color:var(--bad);cursor:pointer;
  font-size:11px;padding:0;line-height:1}
.ed-pcancel:hover{filter:brightness(1.3)}
.ed-ptime{color:var(--dim);font-size:12.5px;font-weight:400;margin-left:auto}
.ed-narr{font-size:13.5px;margin:10px 0;color:var(--txt)}
.ed-overlaytxt{font-size:12px;color:var(--warn);margin:4px 0}
.ed-flagnote{font-size:12.5px;color:var(--accent2);margin:6px 0;font-style:italic}

/* panel actions */
.ed-actions{display:flex;flex-direction:column;gap:10px;margin-top:14px;
  padding-top:12px;border-top:1px solid var(--line)}
.ed-act{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ed-act .btn{padding:8px 14px;font-size:13px;white-space:nowrap}
.ed-act input[type=number]{width:104px;padding:7px 10px;font-size:13px}
.ed-alabel{font-size:12.5px;color:var(--dim);min-width:150px}
.ed-hint{color:var(--accent);font-size:12.5px}
/* overrides the global label style (display:block;margin:16px 0 6px) inside the panel */
.ed-bounds label{display:inline;margin:0;font-size:12px;color:var(--dim)}
.ed-ai{align-items:flex-start}
.ed-ai textarea{flex:1;min-width:220px;min-height:44px;display:block}
.ed-aicol{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.ed-libchk{display:flex;align-items:center;gap:7px;font-size:12.5px;
  color:var(--dim);cursor:pointer;white-space:nowrap}
.ed-libchk input{accent-color:var(--accent);cursor:pointer}

/* ── audio mix ── */
.ed-vol{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:16px 18px;margin-top:14px;max-width:560px}
.ed-mtracks{margin-bottom:14px;border-bottom:1px solid var(--line);
  padding-bottom:12px}
.ed-mtrackrow{display:flex;gap:8px;align-items:center;margin:7px 0;font-size:13px}
.ed-mname{flex:1;color:var(--txt);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.ed-mbtn{background:none;border:1px solid var(--line);color:var(--dim);
  border-radius:6px;padding:2px 9px;cursor:pointer;font-size:12px}
.ed-mbtn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.ed-mbtn:disabled{opacity:.3;cursor:default}
.ed-mtrackrow select{background:#10141d;border:1px solid var(--line);
  border-radius:8px;color:var(--txt);padding:7px 10px;font-size:12.5px}
.ed-voltitle{font-size:13.5px;font-weight:600;margin-bottom:8px}
.ed-volrow{display:flex;align-items:center;gap:12px;margin:8px 0}
.ed-vlabel{width:84px;font-size:13.5px;flex:0 0 auto}
.ed-volrow input[type=range]{flex:1;accent-color:var(--accent);cursor:pointer}
.ed-volrow input[type=range]:disabled{cursor:not-allowed;opacity:.4}
.ed-vval{width:64px;text-align:right;font-size:12.5px;color:var(--dim);
  font-variant-numeric:tabular-nums}

/* ── bottom bar: op chips + save/apply ── */
.ed-footspace{height:76px}
.ed-foot{position:fixed;left:0;right:0;bottom:0;background:#0d111bde;
  border-top:1px solid var(--line);backdrop-filter:blur(16px);
  padding:12px 28px;display:flex;align-items:center;gap:14px;z-index:20;
  box-shadow:0 -10px 30px rgba(0,0,0,.3)}
.ed-chips{flex:1;display:flex;gap:8px;align-items:center;overflow-x:auto;
  padding:2px 0;scrollbar-width:thin}
.ed-chip{background:#1b2334;border:1px solid var(--line);color:var(--txt);
  font-size:12px;padding:4px 10px;border-radius:999px;white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;flex:0 0 auto}
.ed-chip.last{border-color:var(--accent)}
.ed-undo{background:none;border:none;color:var(--bad);cursor:pointer;
  font-size:12px;padding:0;line-height:1}
.ed-undo:hover{filter:brightness(1.3)}
.ed-nochanges{color:var(--dim);font-size:13px}

@media (max-width:760px){
  .ed-pimg{flex:1 1 100%}
  .ed-alabel{min-width:0;flex-basis:100%}
  .ed-foot{flex-wrap:wrap;padding:10px 14px}
}

/* ── skimmer (hover), playhead and the ✂ split button ── */
.ed-strip{position:relative;cursor:crosshair}
.ed-skim{position:absolute;top:0;bottom:0;width:1px;background:var(--accent);
  opacity:.9;pointer-events:none;display:none;z-index:4}
.ed-skim span{position:absolute;top:-22px;left:0;transform:translateX(-50%);
  background:rgba(0,0,0,.85);border:1px solid var(--line);color:var(--txt);
  padding:1px 7px;border-radius:5px;font-size:11px;white-space:nowrap}
.ed-playhead{position:absolute;top:0;bottom:0;width:2px;background:var(--bad);
  pointer-events:none;display:none;z-index:3;box-shadow:0 0 6px rgba(224,93,93,.6)}
.ed-tlhint{color:var(--dim);font-size:11.5px;margin:4px 2px 0}
.ed-strip{user-select:none}
.ed-cut{position:absolute;top:-15px;transform:translateX(-50%);width:28px;height:28px;
  border-radius:50%;border:1px solid var(--accent);background:var(--card);color:var(--accent);
  font-size:13px;cursor:pointer;display:none;align-items:center;justify-content:center;
  z-index:6;box-shadow:0 2px 8px rgba(0,0,0,.5)}
.ed-cut:hover{background:var(--accent);color:#0d1017}
/* draggable boundary between adjacent scenes */
.ed-bhandle{position:absolute;top:0;bottom:0;width:11px;margin-left:-5px;
  cursor:col-resize;z-index:5}
.ed-bhandle::after{content:'';position:absolute;left:4px;top:0;bottom:0;
  width:3px;border-radius:2px;background:transparent;transition:background .12s}
.ed-bhandle:hover::after,.ed-bhandle.drag::after{background:var(--accent2)}