src/styles.css
:root {
  --bg: #0f1115;
  --panel: #151821;
  --panel-2: #0f141b;
  --border: #2a3040;
  --text: #e5e7eb;
  --muted: #9aa4b2;
  --accent: #3b82f6;
  --accent-2: #22c55e;
  --danger: #ef4444;
}

* { box-sizing: border-box; }
html, body, #root { height: 100%; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Arial, Apple Color Emoji, Segoe UI Emoji;
  background: radial-gradient(80% 80% at 50% 0%, #151821 0%, #0f1115 60%);
  color: var(--text);
  overflow: hidden; /* prevent page vertical scroll */
}

.appbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--border); background: rgba(15,17,21,0.7); backdrop-filter: blur(6px);
}
.logo { display:flex; align-items:center; gap:8px; }
.badge { width:32px; height:32px; background: var(--accent); border-radius: 8px; display:flex; align-items:center; justify-content:center; font-weight: 800; }
.badge.github { background: #0D1117; color: #e5e7eb; border:1px solid var(--border); transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.badge.github:hover { transform: translateY(-1px) scale(1.05) rotate(-2deg); box-shadow: 0 6px 20px rgba(0,0,0,0.35); background: #111826; }
.title { font-weight: 700; font-size: 16px; }

.layout { display:flex; height: calc(100vh - 57px); }
.panel { background: rgba(21,24,33,0.7); border-right:1px solid var(--border); width: 300px; overflow:auto; transition: width 0.2s ease; }
.panel.collapsed { width: 0; padding: 0; border: none; }
.panel.right { border-left:1px solid var(--border); border-right:none; }
.panel.right.collapsed { width: 0; padding: 0; border: none; }
.center { flex:1; display:flex; flex-direction: column; min-width: 0; min-height: 0; }
.center .resizer {
  height: 8px;
  cursor: row-resize;
  background: transparent;
}

.section { padding: 8px; }
.panel.section .card { margin-bottom: 8px; }
.panel.right.section .card { margin-bottom: 0px; }
.card { border:1px solid var(--border); border-radius: 12px; background: var(--panel); padding: 12px; }

.row { display:flex; align-items:center; gap:8px; }
.space { flex:1; }
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding: 8px 10px; border:1px solid var(--border); border-radius: 8px; color: var(--text);
  background: linear-gradient(180deg, #1a1f2b 0%, #141824 100%);
  cursor:pointer;
}
.btn:hover { border-color:#3b4255; }
.btn.ghost { background: transparent; }
.btn.icon { width:34px; height:34px; padding:0; }
.btn.primary { border-color: transparent; background: var(--accent); color:black; font-weight: 700; }

.grid { display:grid; gap: 8px; }
.grid.two { grid-template-columns: 1fr 1fr; }

.file-list-item { display:flex; align-items:center; gap:10px; padding:8px; border:1px solid var(--border); border-radius:8px; }
.file-icon { width:18px; height:18px; opacity:0.9; }
.badge-sm { font-size: 11px; color: var(--muted); }

.uploader {
  border: 2px dashed var(--border); border-radius:12px; padding: 16px; text-align:center; color: var(--muted);
}
.uploader.drag { border-color: var(--accent); background: rgba(59,130,246,0.08); }

.video-wrap { border:1px solid var(--border); border-radius: 12px; overflow:hidden; background: var(--panel); }
.controls-bar { display:flex; align-items:center; gap:8px; padding: 10px; border-top:1px solid var(--border); background: var(--panel-2); }

.timeline-wrap {
  padding: 0 12px 12px 12px;
  /* Fill remaining height and adapt to content */
  min-height: 0;
  overflow-y: auto;
}
.timeline {
  position: relative; border:1px solid var(--border); border-radius: 6px; background: #0e1016;
  overflow-x: auto; overflow-y: hidden; white-space: nowrap; /* only timeline scrolls horizontally */
}
.ruler { position: relative; height: 24px; border-bottom:1px solid var(--border); }
.ruler .tick { position:absolute; top:0; bottom:0; width:1px; background:#2c3242; }
.ruler .label { position:absolute; top:2px; font-size: 11px; color: var(--muted); transform: translateX(-50%); }
.ruler .label[style*="right"] { transform: translateX(0); }

/* Waveform container (optional in future) */
.wave { position: relative; height: 56px; border-bottom:1px solid var(--border); background:#0e1016; }
.wave canvas { display:block; width:100%; height:100%; }

.playhead { position:absolute; top:0; bottom:0; width:2px; background: var(--danger); pointer-events:none; z-index: 3; }

/* Long playhead spanning speaker tracks area */
.tracks { position: relative; display: flex; flex-direction: column; min-height: 0; }
.der-overlay { position: absolute; left:0; right:0; top:0; bottom:0; pointer-events: none; }
.der-overlay .der-chunk { position:absolute; top:0; bottom:0; border-radius:4px; transform-origin: center; transition: transform .12s ease, opacity .12s ease; }
.der-overlay .der-chunk:hover { transform: translateY(-1px); opacity: 0.3; }

.track { position: relative; height: 28px; background:#121624; border-top:1px solid #20263a; }
.seg { position:absolute; top:3px; bottom:3px; border-radius: 4px; opacity: 0.9; transition: box-shadow .1s ease; }
.seg.ghost { background: rgba(59,130,246,0.35); outline: 1px dashed rgba(59,130,246,0.9); pointer-events: none; }
.seg.active { outline: 2px solid rgba(255,255,255,0.9); box-shadow: 0 0 0 2px rgba(239,68,68,0.5) inset; }
.seg.selected { box-shadow: 0 0 0 2px rgba(255,255,255,0.5) inset; }
.seg .handle { position:absolute; top:-2px; bottom:-2px; width:6px; background: rgba(255,255,255,0.2); opacity:0; transition: opacity .12s ease; cursor: ew-resize; }
.seg .handle.left { left:-3px; border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.seg .handle.right { right:-3px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
.seg:hover .handle { opacity:1; }

/* Context menu */
.context-menu { position: fixed; z-index: 1000; background:#0f141b; border:1px solid var(--border); border-radius:8px; box-shadow: 0 8px 30px rgba(0,0,0,0.4); padding:4px; }
.context-menu .menu-item { display:block; width:100%; text-align:left; padding:8px 12px; background:transparent; border:none; color:var(--text); cursor:pointer; }
.context-menu .menu-item:hover { background:#111827; }

/* Modal */
.modal-backdrop { position: fixed; inset:0; background: rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center; z-index: 1000; }
.modal { width: 360px; background: #0f141b; border:1px solid var(--border); border-radius:12px; padding:16px; }

/* Toast */
.toast { position: fixed; left:50%; transform: translateX(-50%); bottom: 20px; background:#0f141b; border:1px solid var(--border); padding:8px 12px; border-radius:8px; display:flex; align-items:center; gap:8px; z-index: 1000; }
.toast .link { background: transparent; border:none; color: var(--accent); cursor: pointer; }

.legend-item { display:flex; align-items:center; gap:8px; padding:8px; border:1px solid var(--border); border-radius:8px; min-width:0; }
.color-dot { width:14px; height:14px; border-radius:4px; }
.hidden { opacity: 0.5; }
.legend-item.current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
input[type="range"] { width: 200px; }

/* Overlay variant of appbar when we added extra controls; reuse same look */
.appbar.overlay-controls { position: sticky; top: 0; }
