/* =============================================================
   Timeline Pro — layout polish layer
   Loaded AFTER ai-studio.css so these refinements win on equal
   specificity. Scoped to .as-dock-panel-timeline to stay contained.
   Refines: the toolbar grouping, the Duration + coverage controls
   added to the header, the statusbar, and the image clips (now that
   they carry thumbnails). Nothing here changes IDs or behaviour.
   ============================================================= */

/* ---- Toolbar: segmented, graceful wrapping ---- */
.as-dock-panel-timeline .workspace-timeline-head {
  padding: 9px 14px;
  gap: 12px;
}
.as-dock-panel-timeline .workspace-timeline-actions {
  gap: 7px;
  row-gap: 8px;
}
/* Visually separate logical groups with a hairline before snap/duration */
.as-dock-panel-timeline .workspace-timeline-actions .timeline-snap-control,
.as-dock-panel-timeline .workspace-timeline-actions #fpcTimelineDurWrap {
  padding-left: 10px;
  margin-left: 2px;
  border-left: 1px solid var(--tl-divider-strong);
  min-height: 28px;
}
.as-dock-panel-timeline .workspace-timeline-actions .btn {
  height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
/* Active toolbar buttons (e.g. Duration's Auto when in auto mode) */
.as-dock-panel-timeline .workspace-timeline-actions .btn.active {
  background: linear-gradient(135deg, rgba(245,158,11,.26), rgba(217,119,6,.2));
  border-color: rgba(245,158,11,.55);
  color: #fde68a;
}

/* ---- Duration control (added in JS) ---- */
.as-dock-panel-timeline #fpcTimelineDurWrap {
  font-size: 10px;
  font-weight: 700;
  color: var(--tl-text-dim);
  text-transform: uppercase;
  letter-spacing: .05em;
  gap: 5px;
}
.as-dock-panel-timeline #fpcTimelineDurInput {
  height: 26px;
  width: 60px;
  padding: 0 7px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(148,163,184,.22);
  border-radius: 6px;
  color: var(--tl-text);
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.as-dock-panel-timeline #fpcTimelineDurInput:focus {
  outline: none;
  border-color: rgba(245,158,11,.6);
  box-shadow: 0 0 0 2px rgba(245,158,11,.18);
}
/* Strip the spinner arrows for a cleaner look */
.as-dock-panel-timeline #fpcTimelineDurInput::-webkit-outer-spin-button,
.as-dock-panel-timeline #fpcTimelineDurInput::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.as-dock-panel-timeline #fpcTimelineDurInput { -moz-appearance: textfield; }
.as-dock-panel-timeline #fpcTimelineDurAuto {
  height: 26px;
  padding: 0 9px;
  border-radius: 6px;
  border: 1px solid rgba(148,163,184,.2);
  background: rgba(255,255,255,.05);
  color: var(--tl-text-dim);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .14s;
}
.as-dock-panel-timeline #fpcTimelineDurAuto:hover {
  background: rgba(96,165,250,.16);
  border-color: rgba(96,165,250,.42);
  color: var(--tl-text);
}
.as-dock-panel-timeline #fpcTimelineDurAuto.active {
  background: linear-gradient(135deg, rgba(34,197,94,.24), rgba(21,128,61,.2));
  border-color: rgba(34,197,94,.5);
  color: #bbf7d0;
}

/* ---- Coverage note (added in JS) — pill ---- */
.as-dock-panel-timeline #fpcTimelineCoverage {
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(148,163,184,.1);
  border: 1px solid var(--tl-divider-strong);
  font-size: 10px;
  letter-spacing: .02em;
  text-transform: none;
  white-space: nowrap;
}

/* ---- Statusbar: value pills ---- */
.as-dock-panel-timeline .timeline-statusbar {
  gap: 8px;
  padding: 6px 14px;
  flex-wrap: wrap;
}
.as-dock-panel-timeline .timeline-statusbar span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(148,163,184,.08);
  border: 1px solid var(--tl-divider);
}

/* ---- Image clips: refine now that they show thumbnails ---- */
/* Drop the dark header strip on image clips — the thumbnail is the visual. */
.as-dock-panel-timeline .tl-img.tl-img-clip::before { display: none !important; }
.as-dock-panel-timeline .tl-img.tl-img-clip {
  padding: 5px 8px 0 8px;
  text-shadow: 0 1px 3px rgba(0,0,0,.85);
  border-color: rgba(0,0,0,.45);
}
/* Timed clips get an accent ring in the track colour */
.as-dock-panel-timeline .tl-img.tl-img-clip.fpc-timed {
  outline: 1.5px solid var(--tl-track-color, rgba(255,255,255,.7));
  outline-offset: -1px;
  box-shadow: 0 2px 8px rgba(0,0,0,.45), 0 0 10px var(--tl-track-color-glow, transparent);
}
/* Grab affordance + smoother lift while dragging */
.as-dock-panel-timeline .tl-img.tl-img-clip { cursor: grab; }
.as-dock-panel-timeline .tl-img.tl-img-clip.fpc-lifted { opacity: .28; filter: grayscale(.2); }
.as-dock-panel-timeline .tl-clip-ghost { border: 1px solid rgba(255,255,255,.4); }

/* Time badge + reset button (added in JS) — align to the clip's design */
.as-dock-panel-timeline .tl-img-clip .tl-clip-badge {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  backdrop-filter: blur(2px);
}
.as-dock-panel-timeline .tl-img-clip .tl-clip-reset {
  box-shadow: 0 1px 4px rgba(0,0,0,.5);
}

/* Drop-target lane highlight while dragging across tracks */
.as-dock-panel-timeline .track-lane.fpc-drop-target {
  outline: 2px dashed var(--tl-track-color, rgba(120,170,255,.9));
  outline-offset: -3px;
  background-image:
    linear-gradient(90deg, var(--tl-track-color-bg, rgba(120,170,255,.18)) 0%, transparent 60%) !important;
}

/* ---- Snap / zoom controls: tighten ---- */
.as-dock-panel-timeline .workspace-zoom { width: 104px; }
.as-dock-panel-timeline .timeline-zoom-readout { min-width: 44px; }

/* ---- Custom scrollbar inside the lanes ---- */
.as-dock-panel-timeline .timeline-premiere-scroll::-webkit-scrollbar { height: 10px; width: 10px; }
.as-dock-panel-timeline .timeline-premiere-scroll::-webkit-scrollbar-track { background: rgba(0,0,0,.25); }
.as-dock-panel-timeline .timeline-premiere-scroll::-webkit-scrollbar-thumb {
  background: rgba(148,163,184,.3);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.as-dock-panel-timeline .timeline-premiere-scroll::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,.5); background-clip: padding-box; }

/* ---- Help button polish ---- */
.as-dock-panel-timeline .timeline-help-btn:hover {
  background: rgba(124,58,237,.32);
  border-color: rgba(167,139,250,.55);
  color: #ede9fe;
}

/* ---- Small screens: let the toolbar breathe ---- */
@media (max-width: 760px) {
  .as-dock-panel-timeline .workspace-timeline-head { flex-wrap: wrap; }
  .as-dock-panel-timeline .workspace-timeline-actions { width: 100%; justify-content: flex-start; }
  .as-dock-panel-timeline .workspace-zoom { width: 84px; }
}

/* =============================================================
   Scrolling fix — bound the height chain so the timeline scrolls
   inside itself (vertical to reach every track) and the horizontal
   scrollbar sits at the visible bottom instead of far below the
   content. The label column stays pinned and is vertically synced
   to the lanes by the engine's existing scroll handler.
   ============================================================= */

/* Make the dock body fill the dock and stop being its own scroller,
   so the timeline panel gets a real bounded height to work within. */
.as-dock.timeline-active .as-dock-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}
.as-dock.timeline-active .as-dock-panel.active { height: 100%; min-height: 0; }

/* Panel fills the body; track-list flexes and is allowed to shrink
   (min-height:0) so its children — not the panel — do the scrolling. */
.as-dock-panel-timeline #workspaceTimeline { height: 100%; min-height: 0; }
.as-dock-panel-timeline .track-list { flex: 1; min-height: 0; overflow: hidden; }
.as-dock-panel-timeline .timeline-premiere-shell { height: 100%; min-height: 0; }

/* Right pane = the real scroller, both axes. Sticky ruler keeps it
   visible while scrolling tracks vertically. */
.as-dock-panel-timeline .timeline-premiere-scroll {
  height: 100%;
  min-height: 0;
  overflow: auto;
}
/* Left label column scrolls vertically in lock-step (engine syncs
   scrollTop) but hides its own scrollbar. */
.as-dock-panel-timeline .timeline-premiere-labels {
  height: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
}
.as-dock-panel-timeline .timeline-premiere-labels::-webkit-scrollbar { width: 0; height: 0; }

/* Clips can't bleed past the timeline's right edge any more. */
.as-dock-panel-timeline #workspaceTimeline .timeline-premiere-lane { overflow-x: clip !important; }

/* Comfortable horizontal scrollbar on the lanes. */
.as-dock-panel-timeline .timeline-premiere-scroll::-webkit-scrollbar { height: 11px; width: 11px; }

/* =============================================================
   Empty / hidden track placeholders — centered, subtle, dashed
   ============================================================= */
.as-dock-panel-timeline .tl-block.muted {
  left: 6px !important;
  right: 6px !important;
  width: auto !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(148,163,184,.045) !important;
  border: 1px dashed rgba(148,163,184,.2) !important;
  color: var(--tl-text-dim) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  padding: 0 10px !important;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .04em;
  opacity: .8;
}
.as-dock-panel-timeline .tl-block.muted::before,
.as-dock-panel-timeline .tl-block.muted::after { display: none !important; }
/* tiny "+" cue so an empty track reads as fillable */
.as-dock-panel-timeline .tl-block.muted::after {
  content: "+" !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 1px dashed rgba(148,163,184,.4);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  color: var(--tl-text-dim);
  flex: 0 0 auto;
}

/* =============================================================
   Touch reliability — make the clip interactions work on phones
   and tablets. Draggable blocks claim the gesture (touch-action:
   none) so a drag moves/trims the clip instead of panning the
   timeline; empty lane area keeps native panning for scroll. On
   coarse (touch) pointers the grab/trim targets are enlarged so
   edges are tappable. Desktop/mouse is unaffected.
   ============================================================= */
.as-dock-panel-timeline .tl-img.tl-img-clip,
.as-dock-panel-timeline .timeline-premiere .tl-sub,
.as-dock-panel-timeline .tl-img-clip .tl-trim,
.as-dock-panel-timeline .tl-img-clip .tl-clip-reset {
  touch-action: none;
}
/* The floating drag-ghost should never intercept touches. */
.as-dock-panel-timeline .tl-clip-ghost,
.tl-clip-ghost { touch-action: none; }

@media (pointer: coarse) {
  /* Wider trim grips on the edges of image clips */
  .as-dock-panel-timeline .tl-img-clip .tl-trim { width: 16px; }
  .as-dock-panel-timeline .tl-img-clip .tl-trim-l { left: -3px; }
  .as-dock-panel-timeline .tl-img-clip .tl-trim-r { right: -3px; }
  /* Wider subtitle trim grips too */
  .as-dock-panel-timeline .timeline-premiere .tl-sub::before,
  .as-dock-panel-timeline .timeline-premiere .tl-sub::after { width: 9px; }
  /* Larger reset target */
  .as-dock-panel-timeline .tl-img-clip .tl-clip-reset { width: 20px; height: 20px; font-size: 13px; line-height: 18px; }
}

/* =============================================================
   Subtitle clips — correct RTL (Urdu/Arabic) display on the
   timeline. dir="auto" on the block (set in JS) makes the text
   pick its own direction; here we centre it and keep it tidy so
   Urdu captions read right-to-left and truncate on the correct
   side instead of laying out like English.
   ============================================================= */
.as-dock-panel-timeline .tl-block.tl-sub {
  text-align: center;
  unicode-bidi: plaintext;
  padding: 0 14px;
  align-items: center;
  justify-content: center;
}