/* Fixed Video + Audio dual-lane timeline (all WorkSpace modes). */

.workspace-left .timeline-stack-row {
  --timeline-lane-split: rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-height: 0;
  flex: 1 1 0;
}

.workspace-left .timeline-pr-headers {
  flex: 0 0 44px;
  display: grid;
  grid-template-rows:
    var(--timeline-ruler-h, 36px)
    var(--timeline-video-lane-h, 44px)
    minmax(0, 1fr);
  background: var(--program-chrome-bg, #18191b);
  box-sizing: border-box;
  border-right: 1px solid var(--timeline-lane-split);
  user-select: none;
  pointer-events: none;
}

.workspace-left .timeline-pr-header-corner {
  background: var(--program-chrome-bg, #18191b);
  border-bottom: 1px solid var(--timeline-lane-split, rgba(255, 255, 255, 0.1));
}

.workspace-left .timeline-pr-header-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.workspace-left .timeline-pr-header-cell--video {
  height: var(--timeline-video-lane-h, 44px);
  background: var(--program-chrome-bg, #18191b);
  border-bottom: 1px solid var(--timeline-lane-split, rgba(255, 255, 255, 0.1));
}

.workspace-left .timeline-pr-header-cell--audio {
  height: auto;
  min-height: 0;
  align-self: stretch;
  background: var(--program-chrome-bg, #18191b);
  border-bottom: 0;
}

.workspace-left .timeline-stack-row > .timeline-wrapper {
  flex: 1 1 0;
  min-width: 0;
}

.workspace-left #timelineTrack {
  --timeline-ruler-h: 42px;
  --timeline-ruler-head-h: 10px;
  --timeline-video-lane-h: 56px;
  --timeline-audio-lane-h: 60px;
  display: grid;
  grid-template-rows:
    var(--timeline-ruler-h)
    var(--timeline-video-lane-h)
    minmax(0, 1fr);
  grid-template-columns: minmax(100%, 1fr);
  align-content: stretch;
  height: 100%;
  min-height: 0;
}

.workspace-left #timelineTrack.timeline-track--stacked #rulerCanvas {
  position: relative;
  grid-row: 1;
  grid-column: 1;
  top: auto !important;
  height: var(--timeline-ruler-h) !important;
  border-bottom: 1px solid var(--timeline-lane-split, rgba(255, 255, 255, 0.1)) !important;
  background: var(--program-chrome-bg, #18191b) !important;
}

.workspace-left #timelineTrack.timeline-track--stacked .timeline-video-lane {
  grid-row: 2;
  grid-column: 1;
  position: relative;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  height: var(--timeline-video-lane-h) !important;
  min-height: 0;
  overflow: hidden;
  background: var(--program-chrome-bg, #18191b);
  /* Single hairline — keep in sync with left header; drag handle stays invisible until hover. */
  border-bottom: 1px solid var(--timeline-lane-split, rgba(255, 255, 255, 0.1));
  box-sizing: border-box;
  pointer-events: none;
}

.workspace-left #timelineTrack.timeline-track--stacked .timeline-video-lane--empty {
  background: var(--program-chrome-bg, #18191b);
}

.workspace-left #timelineTrack.timeline-track--stacked .timeline-video-lane--empty .timeline-video-clips,
.workspace-left .timeline-video-clips[hidden] {
  display: none !important;
}

.workspace-left .timeline-video-clips {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* Premiere-like Video clip: solid dusty teal, left thumb sliver. */
.workspace-left .timeline-video-clip {
  /* Premiere-ish V-clip — locked to user-picked teal. */
  --ws-vclip-fill: #024b68;
  --ws-vclip-fill-end: #024b68;
  --ws-vclip-radius: 4px;
  --ws-vclip-wedge: 5px;
  --ws-vclip-wedge-fill: rgba(245, 245, 247, 0.72);
  position: absolute;
  top: var(--timeline-video-clip-pad, 20px);
  height: var(--timeline-video-clip-h, calc(100% - 24px));
  bottom: auto;
  min-width: 0;
  max-height: calc(
    100% - var(--timeline-video-clip-pad, 20px) - var(--timeline-video-clip-pad-bottom, 4px)
  );
  display: flex;
  align-items: stretch;
  box-sizing: border-box;
  border-radius: 0;
  border: 0;
  background: var(--ws-vclip-fill);
  overflow: hidden;
  box-shadow: none;
}

/* Soft micro-radius on every clip end (PR cut corners). */
.workspace-left .timeline-video-clip.is-first {
  border-top-left-radius: var(--ws-vclip-radius);
  border-bottom-left-radius: var(--ws-vclip-radius);
}

.workspace-left .timeline-video-clip.is-last {
  border-top-right-radius: var(--ws-vclip-radius);
  border-bottom-right-radius: var(--ws-vclip-radius);
}

.workspace-left .timeline-video-clip.is-join-left {
  border-top-right-radius: var(--ws-vclip-radius);
  border-bottom-right-radius: var(--ws-vclip-radius);
}

.workspace-left .timeline-video-clip.is-join-right {
  border-top-left-radius: var(--ws-vclip-radius);
  border-bottom-left-radius: var(--ws-vclip-radius);
}

.workspace-left .timeline-video-thumb {
  width: 42px;
  min-width: 42px;
  max-width: 28%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-right: 1px solid rgba(0, 0, 0, 0.4);
  background: #12181a;
  flex: 0 0 auto;
}

.workspace-left .timeline-video-clip-fill {
  flex: 1 1 auto;
  min-width: 0;
  /* Solid PR body — no stripe pattern. */
  background: transparent;
  position: relative;
}

/*
 * Source in/out corner wedges — top corners only (video + audio).
 * Video: left on clip (covers thumb); right on fill.
 * Audio: left ::before / right ::after (same element can be first+last).
 */
.workspace-left .timeline-video-clip.is-first::before,
.workspace-left .timeline-video-clip.is-last .timeline-video-clip-fill::before,
.workspace-left .timeline-audio-clip.is-first::before,
.workspace-left .timeline-audio-clip.is-last::after {
  content: '';
  position: absolute;
  width: var(--ws-vclip-wedge, 5px);
  height: var(--ws-vclip-wedge, 5px);
  background: var(--ws-vclip-wedge-fill, rgba(245, 245, 247, 0.72));
  pointer-events: none;
  z-index: 3;
}

/* Video — top-left / top-right */
.workspace-left .timeline-video-clip.is-first::before {
  left: 0;
  top: 0;
  border-top-left-radius: var(--ws-vclip-radius);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.workspace-left .timeline-video-clip.is-last .timeline-video-clip-fill::before {
  right: 0;
  top: 0;
  border-top-right-radius: var(--ws-vclip-radius);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

/* Kill any leftover bottom wedges from older builds */
.workspace-left .timeline-video-clip.is-first::after,
.workspace-left .timeline-video-clip.is-last .timeline-video-clip-fill::after {
  content: none;
}

/* Premiere-style through-edit (▶◀) at applied scene cuts — keep scout ticks too. */
.workspace-left .timeline-through-edits {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 9;
  overflow: visible;
}

.workspace-left .timeline-through-edits--audio {
  top: var(--timeline-wave-pad, 4px);
  height: var(--timeline-wave-band-h, calc(100% - 12px));
  bottom: auto;
  inset: auto 0 auto 0;
  z-index: 9;
}

/* Black cut seam — hairline (PR through-edit gap). */
.workspace-left .timeline-through-gap {
  position: absolute;
  top: var(--timeline-video-clip-pad, 20px);
  height: var(--timeline-video-clip-h, calc(100% - 24px));
  width: 1px;
  margin-left: -0.5px;
  background: #000;
  z-index: 1;
}

.workspace-left .timeline-through-edits--audio .timeline-through-gap {
  top: 0;
  height: 100%;
  width: 1px;
  margin-left: -0.5px;
  background: #000;
}

.workspace-left .timeline-through-gap.is-active {
  width: 2px;
  margin-left: -1px;
  background: #34c759;
  box-shadow: 0 0 0 1px rgba(52, 199, 89, 0.45);
  z-index: 3;
}

.workspace-left .timeline-through-edit {
  position: absolute;
  top: 50%;
  width: 18px;
  height: 16px;
  margin-left: 0;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translate(-50%, -50%);
  color: rgba(235, 236, 238, 0.96);
  filter: drop-shadow(0 0 0.6px rgba(0, 0, 0, 1));
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ew-resize;
  touch-action: none;
}

/*
 * Video lane pad is asymmetric (outer 20 / inner ~4) — center bowtie on the teal clip
 * band, not the full lane midpoint (which sat too high).
 */
.workspace-left .timeline-through-edits--video .timeline-through-edit {
  pointer-events: auto;
  top: calc(
    var(--timeline-video-clip-pad, 20px) + (var(--timeline-video-clip-h, calc(100% - 24px)) / 2)
  );
}

.workspace-left .timeline-through-edit.is-active {
  color: #34c759;
  filter: drop-shadow(0 0 0.6px rgba(0, 0, 0, 1)) drop-shadow(0 0 5px rgba(52, 199, 89, 0.7));
  z-index: 4;
  transform: translate(-50%, -50%) scale(1.2);
}

.workspace-left .timeline-through-edit svg {
  display: block;
  width: 12px;
  height: 9px;
  pointer-events: none;
}

/* Hide red playhead while a through-edit cut is selected or dragged. */
#timelineTrack.is-through-edit-selected #playhead,
#timelineTrack.is-through-edit-dragging #playhead {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#timelineTrack.is-through-edit-dragging {
  cursor: ew-resize;
}

.workspace-left #timelineTrack.timeline-track--stacked .timeline-audio-lane {
  grid-row: 3;
  grid-column: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  padding-top: var(--timeline-wave-pad, 4px);
  padding-bottom: var(--timeline-wave-pad-bottom, 20px);
  height: auto !important;
  min-height: 0;
  align-self: stretch;
  overflow: hidden;
  background: var(--program-chrome-bg, #18191b);
  box-sizing: border-box;
}

.workspace-left .timeline-audio-lane.is-empty {
  background: var(--program-chrome-bg, #18191b);
}

/* Same teal shell as Video — segments + rounded join corners. */
.workspace-left .timeline-audio-clips {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--timeline-wave-pad, 4px);
  height: var(--timeline-wave-band-h, calc(100% - 12px));
  pointer-events: none;
  z-index: 1;
}

.workspace-left .timeline-audio-clips[hidden] {
  display: none !important;
}

.workspace-left .timeline-audio-clip {
  --ws-aclip-fill: #024b68;
  --ws-aclip-radius: 4px;
  --ws-aclip-wedge: 5px;
  --ws-aclip-wedge-fill: rgba(245, 245, 247, 0.72);
  position: absolute;
  top: 0;
  height: 100%;
  min-width: 0;
  box-sizing: border-box;
  background: var(--ws-aclip-fill);
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
}

.workspace-left .timeline-audio-clip.is-first {
  border-top-left-radius: var(--ws-aclip-radius);
  border-bottom-left-radius: var(--ws-aclip-radius);
}

.workspace-left .timeline-audio-clip.is-last {
  border-top-right-radius: var(--ws-aclip-radius);
  border-bottom-right-radius: var(--ws-aclip-radius);
}

/* Audio — top-left / top-right only */
.workspace-left .timeline-audio-clip.is-first::before {
  left: 0;
  top: 0;
  width: var(--ws-aclip-wedge);
  height: var(--ws-aclip-wedge);
  background: var(--ws-aclip-wedge-fill);
  border-top-left-radius: var(--ws-aclip-radius);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.workspace-left .timeline-audio-clip.is-last::after {
  right: 0;
  top: 0;
  width: var(--ws-aclip-wedge);
  height: var(--ws-aclip-wedge);
  background: var(--ws-aclip-wedge-fill);
  border-top-right-radius: var(--ws-aclip-radius);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.workspace-left .timeline-audio-clip.is-join-left {
  border-top-right-radius: var(--ws-aclip-radius);
  border-bottom-right-radius: var(--ws-aclip-radius);
}

.workspace-left .timeline-audio-clip.is-join-right {
  border-top-left-radius: var(--ws-aclip-radius);
  border-bottom-left-radius: var(--ws-aclip-radius);
}

.workspace-left .timeline-wave-viewport {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  height: var(--timeline-wave-band-h, 100%);
  min-height: 0;
  overflow: hidden;
  /* Transparent — teal body is .timeline-audio-clip underneath. */
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  z-index: 2;
}

.workspace-left #timelineTrack.timeline-track--stacked .timeline-wave-viewport #waveformCanvas {
  top: 0 !important;
  left: 0;
  width: 100%;
  height: 100% !important;
  bottom: auto !important;
  max-height: none !important;
  background: transparent;
}

/* Short scene-cut strip along the bottom of the waveform (not full-height).
   top/height are set by drawScoutMarkers(). */
.workspace-left #timelineTrack.timeline-track--stacked .timeline-wave-viewport #scoutCanvas {
  position: absolute;
  left: 0;
  right: auto;
  width: 100%;
  max-height: none !important;
  z-index: 6;
  pointer-events: none;
}

.workspace-left #timelineTrack.timeline-track--stacked .timeline-wave-viewport #waveformPlaceholderHint {
  top: 50% !important;
  height: auto !important;
  bottom: auto !important;
}

.workspace-left #timelineTrack.timeline-track--stacked .timeline-lane-divider {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--timeline-lane-divider-y, 74px) - 3px);
  height: 6px;
  z-index: 28;
  cursor: row-resize;
  pointer-events: auto;
  touch-action: none;
}

.workspace-left #timelineTrack.timeline-track--stacked .timeline-lane-divider::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
  /* Default transparent so video-lane border is the only mid split (matches header). */
  background: transparent;
  pointer-events: none;
  transition: background 0.12s ease;
  box-shadow: none;
}

.workspace-left #timelineTrack.timeline-track--stacked .timeline-lane-divider:hover::after,
.workspace-left #timelineTrack.timeline-track--stacked .timeline-lane-divider.is-active::after {
  background: rgba(255, 255, 255, 0.18);
  box-shadow: none;
}

.workspace-left #timelineTrack.timeline-track--stacked.is-timeline-empty #playhead {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.workspace-left #timelineTrack.timeline-track--stacked .timeline-lane-divider[hidden] {
  display: none !important;
}

.workspace-left #timelineTrack.timeline-track--stacked #ioRange {
  top: 0 !important;
  height: 100% !important;
  bottom: auto !important;
}

.workspace-left #timelineTrack.timeline-track--stacked #multiRangeContainer {
  top: var(--timeline-ruler-h, 36px) !important;
  height: calc(100% - var(--timeline-ruler-h, 36px)) !important;
  bottom: auto !important;
}

.workspace-left .timeline-audio-lane .waveform-placeholder-hint {
  top: 50% !important;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0 10px;
  background: none;
  border: none;
  color: rgba(235, 235, 245, 0.38);
  font-size: 11px;
  font-weight: 500;
  text-shadow: none;
  max-width: min(88%, 360px);
}

.workspace-left .timeline-audio-lane .waveform-placeholder-hint__sub {
  margin-top: 4px;
  color: rgba(235, 235, 245, 0.28);
  font-size: 10px;
}

.workspace-left #timelineTrack.timeline-track--stacked #playhead {
  top: calc(var(--timeline-ruler-h) - 1px) !important;
  height: calc(100% - var(--timeline-ruler-h) + 1px) !important;
  width: 1px !important;
  background: var(--timeline-playhead, #ff5a4f) !important;
  box-shadow: none;
  z-index: 30;
  transform: translateX(-0.5px);
}

/* PR-style head: anchored to bottom of ruler band */
.workspace-left #timelineTrack.timeline-track--stacked #playhead::after {
  content: '';
  position: absolute;
  top: calc(-1 * var(--timeline-ruler-head-h, 9px));
  left: 0;
  transform: translateX(-50%);
  width: 9px;
  height: var(--timeline-ruler-head-h, 9px);
  border-radius: 1px 1px 0 0;
  background: var(--timeline-playhead, #ff5a4f);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.workspace-left #timelineTrack.timeline-track--stacked #playheadTime {
  display: none !important;
}

/* Cut refine hits: audio lane, grab from the bottom where short scout ticks live. */
.workspace-left #timelineTrack.timeline-track--stacked #cutMarkerLayer {
  top: calc(var(--timeline-ruler-h, 36px) + var(--timeline-video-lane-h, 44px)) !important;
  height: calc(100% - var(--timeline-ruler-h, 36px) - var(--timeline-video-lane-h, 44px)) !important;
  bottom: auto !important;
}

.workspace-left #timelineTrack.timeline-track--stacked .cut-marker-hit {
  top: auto;
  bottom: 0;
  height: 28px;
}

.workspace-left .io-duration-float {
  top: calc(var(--timeline-ruler-h, 36px) + 6px) !important;
  background: rgba(10, 10, 12, 0.72) !important;
  border: 1px solid rgba(10, 132, 255, 0.35) !important;
  color: rgba(245, 245, 247, 0.92) !important;
  font-weight: 600 !important;
}
/* —— In / Out selection chrome —— */
.workspace-left #timelineTrack #ioRange.io-range-pr {
  --io-marker-line: rgba(245, 245, 247, 0.62);
  --io-marker-dot: rgba(245, 245, 247, 0.92);
  --io-marker-hover: #fff;
  --io-range-ruler-fill: rgba(255, 255, 255, 0.22);
  --io-range-body-fill: rgba(255, 255, 255, 0.12);
  --io-range-body-edge: rgba(255, 255, 255, 0.06);
  background: transparent !important;
  border: none !important;
  border-left: none !important;
  border-right: none !important;
  pointer-events: none;
  box-sizing: border-box;
  z-index: 22;
  overflow: visible;
}

/* Kill legacy workspace.css #ioRange borders + .io-handle::before bright stems */
.workspace-left #timelineTrack #ioRange .io-handle::before,
.workspace-left #timelineTrack #ioRange .io-handle::after {
  display: none !important;
  content: none !important;
}

.workspace-left #timelineTrack #ioRange .io-range-ruler {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--timeline-ruler-h, 36px);
  pointer-events: none;
  z-index: 1;
}

.workspace-left #timelineTrack #ioRange .io-range-ruler-fill {
  position: absolute;
  inset: 0;
  background: var(--io-range-ruler-fill);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.1);
  box-sizing: border-box;
}

.workspace-left #timelineTrack #ioRange .io-range-body {
  position: absolute;
  top: var(--timeline-ruler-h, 36px);
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    180deg,
    var(--io-range-body-fill) 0%,
    var(--io-range-body-edge) 100%
  );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  pointer-events: none;
  z-index: 0;
}

.workspace-left #timelineTrack #ioRange .io-range-move {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 12px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.18);
  cursor: grab;
  pointer-events: auto;
  z-index: 4;
  opacity: 0.72;
  transition: opacity 0.12s ease, background 0.12s ease;
}

.workspace-left #timelineTrack #ioRange .io-range-move::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 8px;
  background: repeating-linear-gradient(
    90deg,
    rgba(235, 235, 245, 0.55) 0 1px,
    transparent 1px 3px
  );
  pointer-events: none;
}

.workspace-left #timelineTrack #ioRange .io-range-move:hover,
.workspace-left #timelineTrack #ioRange .io-range-move:active {
  opacity: 1;
  background: rgba(0, 0, 0, 0.28);
}

.workspace-left #timelineTrack #ioRange .io-range-move:active {
  cursor: grabbing;
}

.workspace-left #timelineTrack #ioRange .io-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 14px;
  background: transparent;
  cursor: ew-resize;
  z-index: 5;
  pointer-events: auto;
  color: var(--io-marker-line);
  transition: color 0.1s ease;
}

.workspace-left #timelineTrack #ioRange .io-marker-art {
  position: absolute;
  top: 0;
  bottom: 0;
  display: block;
  width: 12px;
  height: 100%;
  pointer-events: none;
  shape-rendering: crispEdges;
}

.workspace-left #timelineTrack #ioRange .io-marker-dot {
  position: absolute;
  top: calc(var(--timeline-ruler-h, 36px) + var(--timeline-video-lane-h, 44px) / 2);
  left: 50%;
  width: 6px;
  height: 6px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--io-marker-dot);
  opacity: 0.55;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28);
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
}

.workspace-left #timelineTrack #ioRange #handleIn {
  left: 0;
  transform: translateX(-50%);
}

.workspace-left #timelineTrack #ioRange #handleIn .io-marker-art {
  left: 50%;
  transform: translateX(-2px);
}

.workspace-left #timelineTrack #ioRange #handleOut {
  right: 0;
  transform: translateX(50%);
}

.workspace-left #timelineTrack #ioRange #handleOut .io-marker-art {
  left: 50%;
  transform: translateX(-10px);
}

.workspace-left #timelineTrack #ioRange .io-handle:hover,
.workspace-left #timelineTrack #ioRange .io-handle:active,
.workspace-left #timelineTrack #ioRange .io-handle.is-dragging {
  color: var(--io-marker-hover);
}

.workspace-left #timelineTrack #ioRange .io-handle.is-dragging .io-marker-dot {
  opacity: 1;
  background: var(--io-marker-hover);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.42),
    0 1px 5px rgba(0, 0, 0, 0.5);
}

/* In-page shell: PR blue playhead */
html.cutgo-inpage-shell .workspace-left #timelineTrack.timeline-track--stacked #playhead {
  width: 1px !important;
  background: #4da3ff !important;
}

html.cutgo-inpage-shell .workspace-left #timelineTrack.timeline-track--stacked #playhead::after {
  display: block !important;
  background: #4da3ff !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}

html.cutgo-inpage-shell .workspace-left #timelineTrack.timeline-track--stacked #playheadTime {
  display: none !important;
}