/* ============================================================
   niqVID — timeline.css
   ============================================================ */
#timelineWrap {
  flex: 0 0 300px; background: var(--bg-panel);
  border-top: 1px solid var(--border); display: flex; flex-direction: column;
}
#tlToolbar {
  display: flex; align-items: center; gap: 7px; padding: 8px 12px;
  border-bottom: 1px solid var(--border); flex: 0 0 auto; flex-wrap: wrap;
}
#tlToolbar strong { font-size: 13px; margin-right: 4px; }
#tlToolbar input[type="range"] { width: 90px; accent-color: var(--accent); }
#tlBody { flex: 1; display: flex; min-height: 0; }
#trackHeaders { flex: 0 0 92px; border-right: 1px solid var(--border); background: var(--bg-panel); }
.th-row {
  height: 40px; display: flex; align-items: center; justify-content: center; gap: 5px;
  border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 700; color: var(--text-dim);
}
.th-row .mute {
  width: 20px; height: 20px; border-radius: 5px; border: 1px solid var(--border);
  background: transparent; font-size: 10px; color: var(--text-dim);
}
.th-row .mute.on { background: var(--danger); color: #fff; border-color: var(--danger); }
#tlScroll { flex: 1; overflow-x: auto; overflow-y: hidden; position: relative; background: #0a0e13; }
#tlContent { position: relative; min-height: 100%; }
#ruler { display: block; height: 24px; position: sticky; top: 0; z-index: 5; background: #0a0e13; cursor: pointer; }
#lanes { position: relative; }
.lane {
  height: 40px; border-bottom: 1px solid #1a222c; position: relative;
  background: repeating-linear-gradient(90deg, transparent 0 79px, #141a22 79px 80px);
}
.lane.dragover { background: rgba(76,141,255,.12); outline: 1px dashed var(--accent); outline-offset: -1px; }
.clip {
  position: absolute; top: 4px; bottom: 4px; border-radius: 7px;
  background: linear-gradient(135deg, #2b3a4d, #22303f);
  border: 1px solid #3a4c63; overflow: hidden; cursor: grab;
  font-size: 10px; color: #cfe0f5; user-select: none; touch-action: none;
}
.clip .cl-label {
  padding: 3px 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
}
.clip.sel { border-color: var(--accent); box-shadow: 0 0 0 1.5px var(--accent); }
.clip.kind-audio { background: linear-gradient(135deg, #1d3a2a, #16301f); border-color: #2c5b3f; }
.clip.kind-text { background: linear-gradient(135deg, #3d2f5a, #2e2347); border-color: #5b4a8a; }
.clip.kind-caption { background: linear-gradient(135deg, #5a3d1e, #47300f); border-color: #8a6a2c; }
.clip .wave { position: absolute; inset: 14px 4px 2px; opacity: .55; pointer-events: none; }
.clip .handle {
  position: absolute; top: 0; bottom: 0; width: 9px; cursor: ew-resize; z-index: 3;
}
.clip .handle.l { left: 0; border-radius: 7px 0 0 7px; }
.clip .handle.r { right: 0; border-radius: 0 7px 7px 0; }
.clip .handle:hover { background: rgba(76,141,255,.5); }
#playhead {
  position: absolute; top: 0; bottom: 0; width: 2px; background: var(--danger);
  z-index: 10; pointer-events: none; box-shadow: 0 0 6px rgba(248,81,73,.7);
}
#playhead::before {
  content: ""; position: absolute; top: 0; left: -5px;
  border: 6px solid transparent; border-top: 8px solid var(--danger);
}