/* ==========================================================================
   Vidsync — styles
   Layout: a fixed-height app shell. The sidebar scrolls on its own; the editor
   column stays put so the preview never leaves the screen while you tweak
   settings. Every column owns its overflow, so short laptop viewports clip
   instead of letting panels collide.
   ========================================================================== */

:root{
  --bg:#0d1117; --surface:#161b23; --raised:#1b2230; --hover:#232c3c;
  --border:#2e3a4d; --border-soft:#232d3d;
  --text:#eef3fa; --muted:#94a3b8; --dim:#64748b;

  /* bright blue accent */
  --accent:#2f9dff; --accent-hover:#5ab4ff; --accent-ink:#04131f;
  --accent-line:#1d5a94; --accent-wash:#0e2338;
  --brand:#2c91d0;

  --amber:#e0a23c; --red:#e0685a;
  --r-card:10px; --r-btn:7px;
  --bar-h:46px;
  --gap:12px;
  --pad:13px;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0}
body{
  background:var(--bg); color:var(--text); font-size:14px; line-height:1.5;
  font-family:"Inter",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; overflow:hidden;
}
button,input,select{font-family:inherit;font-size:inherit;color:inherit}
h1,h2,h3{margin:0;font-weight:650;line-height:1.3}

/* ---------- top bar ---------- */
.topbar{
  flex:0 0 auto; height:var(--bar-h); display:flex; align-items:center; gap:10px;
  padding:0 14px; background:var(--surface); border-bottom:1px solid var(--border-soft);
}
.brand{display:flex;align-items:center}
.logo{height:23px;width:auto;display:block;fill:var(--brand)}
.topbar .spacer{flex:1}
.pill{
  font-size:12px;color:var(--muted);background:var(--raised);
  border:1px solid var(--border-soft);border-radius:999px;padding:3px 11px;white-space:nowrap;
}
.pill.ok{color:var(--accent);border-color:var(--accent-line)}
.pill.warn{color:var(--amber);border-color:#5a4520}
.pill.sync{min-width:112px;text-align:center}

/* ---------- account bits in the top bar ---------- */
.topbtn{
  font-size:12.5px;color:var(--muted);background:var(--raised);border:1px solid var(--border-soft);
  border-radius:var(--r-btn);padding:5px 10px;white-space:nowrap;text-decoration:none;cursor:pointer;
  transition:color .15s ease,border-color .15s ease;
}
.topbtn:hover{color:var(--text);border-color:var(--border)}
.projname{
  background:transparent;border:1px solid transparent;border-radius:6px;padding:4px 8px;
  font-size:13px;font-weight:600;color:var(--text);max-width:220px;min-width:80px;
}
.projname:hover{border-color:var(--border-soft)}
.projname:focus{outline:none;border-color:var(--accent-line);background:var(--raised)}
.userEmail{font-size:12px;color:var(--dim);white-space:nowrap;max-width:170px;overflow:hidden;text-overflow:ellipsis}
@media(max-width:860px){
  .userEmail{display:none}
}

/* ---------- app shell ---------- */
.app{
  flex:1; min-height:0; width:100%; max-width:1680px; margin:0 auto;
  display:grid; grid-template-columns:326px minmax(0,1fr); gap:var(--gap);
  padding:var(--gap);
}
.sidebar{
  min-height:0; min-width:0; overflow-y:auto; overscroll-behavior:contain;
  display:flex; flex-direction:column; gap:var(--gap); padding-right:5px;
}
.editor{min-height:0; min-width:0; display:flex; flex-direction:column; gap:var(--gap); overflow:hidden}

.sidebar::-webkit-scrollbar{width:9px}
.sidebar::-webkit-scrollbar-track{background:transparent}
.sidebar::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px;border:3px solid var(--bg)}
.sidebar::-webkit-scrollbar-thumb:hover{background:#3c4a60}

.card{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r-card);padding:var(--pad)}
.card h3{font-size:11.5px;color:var(--muted);font-weight:600;margin-bottom:10px;letter-spacing:.05em;text-transform:uppercase;position:relative}
.card h3 .scope{text-transform:none;letter-spacing:0;color:var(--dim);font-weight:400}

/* Small "i" badge that always carries its explanation as a tooltip, so the
   text is never lost to a height-based breakpoint the way .hint-line can be. */
.info-dot{
  display:inline-flex;align-items:center;justify-content:center;
  width:14px;height:14px;margin-left:5px;border-radius:50%;
  background:var(--raised);border:1px solid var(--border);color:var(--muted);
  font-size:9.5px;font-weight:700;font-style:italic;font-family:Georgia,serif;
  text-transform:none;letter-spacing:0;cursor:help;vertical-align:1px;
  padding:0;line-height:1;
}
.info-dot:hover,.info-dot:focus-visible{color:var(--accent);border-color:var(--accent-line);outline:none}
.info-dot::after{
  content:attr(data-tip);
  position:absolute;top:calc(100% + 7px);left:0;z-index:20;
  width:240px;max-width:60vw;
  background:var(--raised);border:1px solid var(--border);border-radius:8px;
  padding:9px 10px;font-size:11.5px;font-weight:400;line-height:1.45;
  color:var(--text);text-transform:none;letter-spacing:0;
  font-style:normal;font-family:"Inter",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  opacity:0;visibility:hidden;transform:translateY(-2px);
  transition:opacity .12s,transform .12s;
  pointer-events:none;
}
.info-dot:hover::after,.info-dot:focus-visible::after{
  opacity:1;visibility:visible;transform:translateY(0);
}

/* the stage card fills the editor column and clips its own contents */
.card--stage{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:9px;overflow:hidden}
.card--scenes{flex:0 0 auto}

/* ---------- preview ---------- */
.stage{
  flex:1 1 0; min-height:0; background:#000; border-radius:8px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; border:1px solid var(--border-soft);
}
.stage canvas{max-width:100%;max-height:100%;display:block}
.stage .empty{color:var(--dim);font-size:13px;text-align:center;padding:18px;max-width:38ch}

.transport{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:0 0 auto}
.time{font-variant-numeric:tabular-nums;color:var(--muted);font-size:12.5px}

/* ---------- buttons ---------- */
.btn{
  background:var(--raised);border:1px solid var(--border);border-radius:var(--r-btn);
  padding:7px 13px;cursor:pointer;transition:.13s;display:inline-flex;align-items:center;
  justify-content:center;gap:6px;line-height:1.2;
}
.btn:hover:not(:disabled){background:var(--hover);border-color:#3e4a5f}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:650}
.btn.primary:hover:not(:disabled){background:var(--accent-hover)}
.btn.ghost{background:transparent}
.btn.danger{color:var(--red);border-color:#5c2f29}
.btn.sm{padding:5px 10px;font-size:12.5px}
.btn.icon{padding:6px 9px;min-width:34px}
.btn.block{width:100%}
.btnrow{display:flex;gap:6px;margin-top:9px}
.btnrow .btn{flex:1}

/* ---------- drop zones ---------- */
.drop{
  border:1.5px dashed var(--border);border-radius:9px;padding:12px 12px;text-align:center;
  cursor:pointer;transition:.14s;background:var(--raised);
}
.drop:hover,.drop.over{border-color:var(--accent);background:var(--accent-wash)}
.drop.filled{border-style:solid;border-color:var(--accent-line)}
.drop .ico{font-size:17px;display:block;margin-bottom:2px;opacity:.7;line-height:1.2}
.drop .lbl{font-size:13px;display:block}
.drop .hint{font-size:11.5px;color:var(--dim);margin-top:3px;display:block;line-height:1.35}
.drop + .drop{margin-top:8px}

/* ---------- scene strip ---------- */
.scenes{display:flex;gap:7px;overflow-x:auto;padding:1px 1px 8px}
.scene{
  flex:0 0 106px;border-radius:8px;overflow:hidden;border:2px solid transparent;
  background:var(--raised);cursor:pointer;position:relative;transition:.12s;
}
.scene:hover{border-color:var(--border)}
.scene.sel{border-color:var(--accent)}
.scene.untimed{border-color:var(--amber)}
.scene .thumb{height:56px;background:#000 center/cover no-repeat;display:flex;align-items:center;justify-content:center;color:var(--dim);font-size:10.5px}
.scene.untimed .thumb{opacity:.55}
.scene .meta{padding:4px 5px;display:flex;align-items:center;gap:4px}
.scene .dur{font-size:10.5px;color:var(--dim);font-variant-numeric:tabular-nums;margin-left:auto;white-space:nowrap}
.scene .vbadge{
  position:absolute;left:4px;top:4px;background:#000c;color:var(--accent);
  border-radius:4px;padding:1px 5px;font-size:9.5px;font-weight:650;letter-spacing:.04em;
}
.scene .x{
  position:absolute;right:3px;top:3px;background:#000b;border:0;color:#fff;border-radius:5px;
  width:18px;height:18px;line-height:1;cursor:pointer;font-size:12px;opacity:0;transition:.12s;
}
.scene:hover .x{opacity:1}

/* editable timestamp on each scene */
.tstamp{
  width:54px;background:#0c1118;border:1px solid var(--border);border-radius:5px;
  padding:2px 4px;font-size:11px;font-variant-numeric:tabular-nums;
  color:var(--text);text-align:center;
}
.tstamp:hover{border-color:#3e4a5f}
.tstamp:focus{outline:none;border-color:var(--accent);background:#0a1620}
.tstamp::placeholder{color:var(--amber);opacity:.85}
.scene.untimed .tstamp{border-color:var(--amber)}
.tstamp.bad{border-color:var(--red);background:#1e1210}

/* ---------- timeline ---------- */
.tl{
  position:relative;height:35px;background:var(--raised);border:1px solid var(--border-soft);
  border-radius:8px;overflow:hidden;cursor:pointer;flex:0 0 auto;
}
.tl svg{position:absolute;inset:0;width:100%;height:100%}
.tl .marks{position:absolute;inset:0}
.tl .mk{position:absolute;top:0;bottom:0;width:2px;background:rgba(47,157,255,.4)}
.tl .ph{position:absolute;top:0;bottom:0;width:2px;background:var(--amber);pointer-events:none}
.tl .ph::after{content:"";position:absolute;top:0;left:-4px;border:5px solid transparent;border-top-color:var(--amber)}

/* ---------- form rows ---------- */
.row{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.row:last-child{margin-bottom:0}
.row label{flex:0 0 92px;font-size:12.5px;color:var(--muted)}
.row .val{font-size:11.5px;color:var(--dim);font-variant-numeric:tabular-nums;min-width:42px;text-align:right}
select,input[type=range]{flex:1;min-width:0}
select{background:var(--raised);border:1px solid var(--border);border-radius:6px;padding:5px 7px;font-size:12.5px}
select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
input[type=range]{accent-color:var(--accent);height:18px}

.sub{font-size:11.5px;color:var(--muted);margin:10px 0 6px}
.sub:first-of-type{margin-top:0}

.chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.chip{
  background:var(--raised);border:1px solid var(--border);border-radius:6px;
  padding:4px 8px;font-size:11.5px;cursor:pointer;display:flex;align-items:center;gap:5px;
}
.chip:hover{background:var(--hover)}
.chip.on{border-color:var(--accent);background:var(--accent-wash);color:var(--accent)}

/* ---------- alerts ---------- */
.alerts{display:flex;flex-direction:column;gap:5px;flex:0 1 auto;min-height:0;overflow-y:auto}
.alerts:empty{display:none}
.alert{font-size:12px;padding:6px 10px;border-radius:7px;border:1px solid;display:flex;gap:8px;align-items:flex-start;line-height:1.4}
.alert.warn{color:var(--amber);border-color:#5a4520;background:#221a0e}
.alert.err{color:var(--red);border-color:#5c2f29;background:#231311}
.alert.ok{color:var(--accent);border-color:var(--accent-line);background:var(--accent-wash)}
.alert .fix{margin-left:auto;background:none;border:0;color:inherit;text-decoration:underline;cursor:pointer;font-size:12px;padding:0;white-space:nowrap}

/* ---------- export ---------- */
.bar{height:7px;background:var(--raised);border-radius:99px;overflow:hidden;border:1px solid var(--border-soft)}
.bar i{display:block;height:100%;background:var(--accent);transition:width .18s}
.exp{display:flex;flex-direction:column;gap:8px}
.exp .btn{width:100%}
.exp .lineinfo{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;margin-top:5px}
.hint-line{font-size:11.5px;color:var(--dim);line-height:1.45}
.hidden{display:none !important}

/* ---------- short viewports (laptops at 768px and below) ---------- */
@media(max-height:820px){
  :root{--gap:10px;--pad:11px}
  .scene .thumb{height:48px}
  .tl{height:30px}
  .drop{padding:10px}
  .hint-line{display:none}
}
@media(max-height:680px){
  .scenes{padding-bottom:5px}
  .scene{flex:0 0 94px}
  .scene .thumb{height:42px}
  .tl{height:25px}
}

/* ---------- narrow screens: one column, page scrolls normally ---------- */
@media(max-width:1000px){
  body{overflow:auto}
  .app{grid-template-columns:minmax(0,1fr);padding:var(--gap)}
  .sidebar,.editor{overflow:visible;min-height:auto}
  .card--stage{flex:none}
  .stage{aspect-ratio:16/9;flex:none}
  .alerts{max-height:none;overflow:visible}
  .editor{order:-1}
  .hint-line{display:block}
}
@media(max-width:560px){
  .row{flex-wrap:wrap}
  .row label{flex:0 0 100%;margin-bottom:2px}
  .row .val{min-width:38px}
}