/* ============================================
   CANVA-LIKE UNIFIED TIMELINE
   Refined: subtle ruler, dominant slides,
   conditional layers, compact audio
   ============================================ */

/* --- Overall Panel Height --- */

.canva-filmstrip.is-unified-timeline {
  --timeline-progress: 0;
  --timeline-origin-x: 16px;
  height: auto;
  min-height: 140px;
  max-height: 220px;
  background: #f1f3f5;
  border-top: 1px solid #d8dee6;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden !important; /* Unified scroll container handles it */
}

/* Audio trim adds ~64px (waveform + handles). Grow the desktop filmstrip so
   the bar fits without internal scroll. */
.canva-filmstrip.is-unified-timeline:has(.timeline-audio-track-trim) {
  max-height: 340px;
}

.timeline-unified-scroll {
  display: flex;
  flex-direction: column;
  overflow-x: auto;
  overflow-y: auto;
  flex: 1;
  width: 100%;
  height: 100%; /* Ensure it takes full height of parent filmstrip */
  min-height: 0;
  position: relative;
  padding-bottom: 14px; /* Extra padding to ensure footer is accessible */
}

.canva-filmstrip.is-unified-timeline.is-collapsed {
  height: 120px;
}

/* 
   FIX: iPad Air / Tablet Vertical Space
   When the unified timeline is active (220px), we must allow the canvas to shrink 
   to fit the remaining space, otherwise the timeline gets pushed out of the 
   overflow-hidden container.
*/
.editor-canvas.has-unified-timeline #canvas-viewport {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

/*
   FIX: Contextual Toolbar Position
   Position the toolbar below the header on iPad/Tablet so it doesn't sit at the very top.
*/
@media (max-width: 1024px) and (min-width: 769px) {
  .contextual-toolbar {
    top: 85px !important;
    z-index: 10000 !important;
    max-width: 90vw !important; /* Ensure all buttons fit without wrapping or cutting off */
    width: fit-content !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}


/* --- Panel & Footer Base --- */

.timeline-panel,
.timeline-footer {
  flex: 0 0 auto;
  background: transparent;
  color: #0f172a;
}

.timeline-panel {
  padding: 0 var(--timeline-origin-x) 0; /* Sync with slides origin */
}

.timeline-footer {
  padding: 0 var(--timeline-origin-x) 2px;
}

/* --- Toolbar Container (outside scroll, stays fixed) --- */

.timeline-toolbar-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  background: #f1f3f5;
  border-bottom: 1px solid rgba(216, 222, 230, 0.9);
  padding: 4px 16px;
  flex-shrink: 0;
  z-index: 20;
  min-width: max-content;
  overflow-x: auto;
  overflow-y: hidden;
}

/* --- Toolbar (within container, no longer sticky) --- */

.timeline-toolbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 0;
  position: relative;
  width: 100%;
  min-width: max-content; /* Prevent shrinking */
  z-index: 20;
  background: transparent;
  border-bottom: none;
  padding: 0;
  flex-shrink: 0; /* Don't shrink */
}

.timeline-toolbar-center {
  justify-self: center;
}

.timeline-toolbar-left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.timeline-toolbar-actions {
  justify-self: end;
}

.timeline-toolbar-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.timeline-toolbar-actions,
.timeline-footer-actions,
.timeline-footer-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Toolbar buttons — smaller, lighter */
.timeline-icon-btn,
.timeline-chip-btn,
.timeline-footer-toggle {
  border: 1px solid rgba(15, 23, 42, 0.06);
  background: rgba(255, 255, 255, 0.88);
  color: #0f172a;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  transition: all 0.15s ease;
}

.timeline-icon-btn:hover,
.timeline-chip-btn:hover,
.timeline-footer-toggle:hover {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
}

.timeline-icon-btn,
.timeline-footer-toggle {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  cursor: pointer;
}

.timeline-icon-btn svg {
  display: block;
  width: 18px;
  height: 18px;
}

.timeline-play-btn {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: #ffffff;
}

.timeline-chip-btn {
  height: 32px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}

.timeline-footer-toggle {
  width: auto;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 700;
}

/* --- Icons --- */

.timeline-icon {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #2563eb;
}

.timeline-icon svg {
  width: 14px;
  height: 14px;
  display: block;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Time Display --- */

.timeline-time {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #516174;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.timeline-time-divider {
  color: #a0aec0;
}

/* --- Grid Layout: Ruler & Track Groups --- */

.timeline-ruler-wrap,
.timeline-track-group {
  position: relative;
  display: block;
}

.timeline-ruler-wrap {
  margin-bottom: 0px;
  margin-top: 2px; /* tiny gap between ruler and toolbar border */
}

.timeline-track-group {
  margin-bottom: 2px;
}

/* --- Track Labels --- */

.timeline-track-label,
.timeline-ruler-label {
  display: none; /* Hide 'LAYERS' text and save vertical space */
}

/* --- Track Surfaces --- */

.timeline-ruler-surface,
.timeline-track-surface {
  position: relative;
  min-width: 0;
}

/* --- Ruler (subtle, borderless) --- */

.timeline-ruler {
  position: relative;
  height: 16px;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

/* --- Layer Stack --- */

.timeline-layer-stack {
  position: relative;
  /* Removed table-like borders to look cleaner (Canva style) */
  border: none;
  background: transparent;
  min-height: 16px;
  max-height: 80px;
  overflow-y: auto;
  padding: 0; /* Remove inner padding */
  display: grid;
  gap: 1px;
}

/* --- Audio Stack --- */

.timeline-audio-stack {
  position: relative;
  border: none;
  background: transparent;
  min-height: 18px;
  padding: 0;
}

/* When audio is attached, the trim editor is mounted and needs ~60px of
   vertical space for waveform + handles + labels. */
.timeline-audio-stack:has(.timeline-audio-track-trim) {
  min-height: 64px;
  overflow: visible; /* don't clip handles that overhang the bar */
}

.timeline-audio-stack-highlight {
  box-shadow:
    0 0 0 2px rgba(167, 139, 250, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: box-shadow 180ms ease;
}

/* --- Layers: hide when empty --- */

.timeline-track-group-layers.is-empty {
  display: none;
}

/* --- Playhead --- */

.timeline-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, #111827 0%, #2563eb 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.62);
  transform: translateX(-1px);
  pointer-events: none;
  z-index: 9999;
}

.timeline-playhead::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #111827;
  transform: translateX(-50%);
}

/* --- Ruler Ticks (lighter, subtler) --- */

.timeline-ruler-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
}

.timeline-ruler-line {
  position: absolute;
  top: 12px;
  bottom: 0;
  left: 0;
  width: 1px;
  background: rgba(100, 116, 139, 0.16);
}

.timeline-ruler-text {
  position: absolute;
  top: 3px;
  left: 5px;
  color: #8494a7;
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

/* --- Layer Tracks --- */

.timeline-layer-track {
  position: relative;
  display: block;
  margin-bottom: 2px;
}

.timeline-layer-track-name {
  display: none;
}

.timeline-layer-track-bars,
.timeline-audio-track {
  position: relative;
  min-height: 18px;
}

/* --- Layer & Audio Bars --- */

.timeline-layer-bar,
.timeline-audio-bar {
  position: absolute;
  top: 0;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  border: 0;
  border-radius: 8px;
  overflow: visible; /* allow handles to extend slightly */
  color: #0f172a;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.timeline-layer-bar {
  background: linear-gradient(90deg, rgba(103, 232, 249, 0.9) 0%, rgba(96, 165, 250, 0.9) 100%);
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.14);
  cursor: pointer;
  transition: box-shadow 0.15s ease, filter 0.15s ease;
}

/* Label inside the bar */
.timeline-layer-bar-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 4px;
  pointer-events: none;
  user-select: none;
}

/* Timing resize handles — shown on hover/selection */
.timeline-layer-handle {
  flex-shrink: 0;
  width: 6px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ew-resize;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease;
  background: rgba(255, 255, 255, 0.0);
  position: relative;
  z-index: 2;
}

/* Thin grip lines inside handle */
.timeline-layer-handle::before {
  content: '';
  display: block;
  width: 2px;
  height: 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.7);
  border-right: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 1px;
}

.timeline-layer-bar:hover .timeline-layer-handle,
.timeline-layer-bar.is-selected .timeline-layer-handle {
  opacity: 1;
  background: rgba(255, 255, 255, 0.22);
}

.timeline-layer-handle:hover {
  background: rgba(255, 255, 255, 0.38) !important;
}

/* Drag-active state */
.timeline-layer-bar.is-resizing {
  box-shadow: 0 0 0 2px #2563eb, 0 6px 16px rgba(37, 99, 235, 0.3);
  filter: brightness(1.05);
  cursor: ew-resize;
}

.timeline-layer-bar:hover {
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.22);
}

.timeline-layer-bar.is-selected {
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.5), 0 6px 14px rgba(37, 99, 235, 0.26);
  filter: saturate(1.1) brightness(1.03);
}


.timeline-audio-track {
  height: 24px;
}

.timeline-audio-wave {
  position: absolute;
  inset: 4px 0;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(14, 165, 233, 0.12) 0%, rgba(59, 130, 246, 0.06) 100%),
    repeating-linear-gradient(
      90deg,
      rgba(37, 99, 235, 0.18) 0 2px,
      transparent 2px 7px
    );
}

.timeline-audio-bar {
  top: 2px;
  height: 20px;
  background: linear-gradient(90deg, #0ea5e9 0%, #2563eb 100%);
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.14);
  color: #ffffff;
}

/* ============================================
   AUDIO TRIM EDITOR — waveform, handles, controls
   ============================================ */

.timeline-audio-track-trim {
  position: relative;
  height: 60px;
  width: 100%;
  /* Room above + below for the handles to extend beyond the bar. */
  padding: 4px 0;
}

.timeline-audio-track-trim .timeline-audio-bar {
  position: relative;
  inset: auto;
  top: 0;
  left: 0;
  width: 100%;
  height: 52px;
  background: linear-gradient(90deg, #0ea5e9 0%, #2563eb 100%);
  border-radius: 8px;
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.18);
  color: #fff;
  /* IMPORTANT: do NOT clip — the trim handles overhang the bar's edges
     and extend above/below so they're visible and grabbable. The inner
     .timeline-audio-clip handles waveform clipping for rounded corners. */
  overflow: visible;
  padding: 0;
  display: block;
}

.timeline-audio-clip {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  overflow: hidden;
}

.timeline-audio-waveform {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.42;
}

.timeline-audio-selection {
  position: absolute;
  top: 0;
  height: 100%;
  background: rgba(255, 255, 255, 0.16);
  border-left: 2px solid rgba(255, 255, 255, 0.92);
  border-right: 2px solid rgba(255, 255, 255, 0.92);
  pointer-events: none;
}

.timeline-audio-playhead {
  position: absolute;
  top: 0;
  width: 2px;
  height: 100%;
  background: #fbbf24;
  box-shadow: 0 0 6px rgba(251, 191, 36, 0.8);
  opacity: 0;
  transition: opacity 120ms ease;
  pointer-events: none;
}

/* ─── Trim handles ──────────────────────────────────────────────────────
   Visual element is a bright amber bracket centered on the trim line.
   Hit-zone extends well beyond the visual via the wider button width so
   fingers don't have to pinpoint the 10px bracket. */

.timeline-audio-handle {
  position: absolute;
  top: -6px;
  height: 64px;          /* extends 6px above + below the 52px bar */
  width: 40px;           /* finger-friendly hit zone */
  margin-left: -20px;    /* center the hit zone on the trim line */
  padding: 0;
  border: 0;
  background: transparent;
  cursor: ew-resize;
  touch-action: none;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.timeline-audio-handle-bracket {
  position: relative;
  width: 12px;
  height: 100%;
  background: #fbbf24;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.15) inset;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.timeline-audio-handle-chevron {
  width: 6px;
  height: 10px;
  background: rgba(15, 23, 42, 0.78);
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
}

.timeline-audio-handle-in .timeline-audio-handle-chevron {
  transform: rotate(180deg);
}

.timeline-audio-handle:hover .timeline-audio-handle-bracket,
.timeline-audio-bar.is-trimming .timeline-audio-handle-bracket {
  background: #f59e0b;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.35), 0 2px 8px rgba(0, 0, 0, 0.4);
}

.timeline-audio-handle:active .timeline-audio-handle-bracket {
  background: #d97706;
}

@media (max-width: 768px) {
  /* Even larger hit zone on mobile + slightly wider visible bracket. */
  .timeline-audio-handle { width: 48px; margin-left: -24px; }
  .timeline-audio-handle-bracket { width: 14px; }
}

.timeline-audio-meta {
  position: absolute;
  top: 4px;
  left: 8px;
  right: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  pointer-events: none;
  z-index: 3;
}

.timeline-audio-name {
  flex: 1;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timeline-audio-volume,
.timeline-audio-track-trim .timeline-audio-remove {
  pointer-events: auto;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  border: 0;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 120ms ease;
}

.timeline-audio-volume:hover,
.timeline-audio-track-trim .timeline-audio-remove:hover {
  background: rgba(0, 0, 0, 0.45);
}

.timeline-audio-volume.is-muted {
  background: rgba(220, 38, 38, 0.7);
}

.timeline-audio-time {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  z-index: 3;
  pointer-events: none;
  text-shadow: none;
}

.timeline-audio-volume-popover {
  position: fixed;
  z-index: 10000;
  background: #0f172a;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 8px;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
}

.timeline-audio-volume-popover input[type="range"] {
  width: 120px;
  accent-color: #60a5fa;
}

.timeline-audio-volume-popover span {
  font-size: 11px;
  font-weight: 700;
  color: #e2e8f0;
  min-width: 32px;
  text-align: right;
}

/* --- Empty State Text --- */

.timeline-layer-empty {
  min-height: 18px;
  display: flex;
  align-items: center;
  color: #8494a7;
  font-size: 11px;
  font-weight: 600;
}

.timeline-audio-empty {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: rgba(168, 85, 247, 0.1);
  border: 1px dashed rgba(168, 85, 247, 0.4);
  border-radius: 6px;
  color: #9333ea;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.timeline-audio-remove {
  appearance: none;
  background: rgba(255, 255, 255, 0.18);
  border: 0;
  border-radius: 999px;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  color: inherit;
  font-size: 12px;
  line-height: 14px;
  text-align: center;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.timeline-audio-remove:hover {
  background: rgba(255, 255, 255, 0.32);
}

.timeline-audio-bar > span {
  padding: 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.timeline-audio-empty small {
  color: #a78bfa;
  font-size: 9px;
  font-weight: 700;
}

.timeline-audio-empty.is-disabled {
  cursor: not-allowed;
  opacity: 0.78;
}

.timeline-audio-empty:hover {
  background: rgba(168, 85, 247, 0.15);
  border-color: rgba(168, 85, 247, 0.6);
}

.timeline-audio-empty.is-disabled:hover {
  background: rgba(168, 85, 247, 0.1);
  border-color: rgba(168, 85, 247, 0.4);
}

.timeline-audio-empty::before {
  content: '🎵';
  font-size: 10px;
}

/* --- Footer Bar --- */

.timeline-footer-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0; /* Slim down the hide bar */
  gap: 12px;
  border-top: 1px solid rgba(148, 163, 184, 0.15); /* Subtle line above Hide row */
}

.timeline-footer-pill,
.timeline-footer-zoom {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(148, 163, 184, 0.16);
  color: #64748b;
  font-size: 10px;
  font-weight: 700;
}

/* ============================================
   FILMSTRIP SLIDES — UNIFIED TIMELINE MODE
   These are the dominant "main track"
   ============================================ */

.filmstrip-slides {
  position: relative !important;
  flex: none !important;
  display: block !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x pan-y !important;
  background: transparent !important;
  min-height: 54px;
}

/* Container width set by JS based on total duration */
.canva-filmstrip.is-unified-timeline .filmstrip-slides {
  justify-content: flex-start;
  gap: 0 !important;
}

/* --- Slide Cards (dominant row) --- */
.canva-filmstrip.is-unified-timeline .filmstrip-slide {
  /* width is set by JavaScript based on slide duration */
  flex-shrink: 0;
  height: 48px;
  position: absolute; /* Changed from relative for time-based positioning */
  border-radius: 7px;
  border: 0;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none;
  background: transparent;
  transition: border-color 0.18s ease, box-shadow 0.18s ease; /* Avoid animating width/left */
  overflow: visible;
  /* width is set by JavaScript based on slide duration */
}

.canva-filmstrip.is-unified-timeline .filmstrip-add-slide {
  height: 48px;
  position: relative;
  border-radius: 7px;
  border: 1px dashed rgba(15, 23, 42, 0.16);
  background: rgba(255, 255, 255, 0.62);
  transition: all 0.18s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.canva-filmstrip.is-unified-timeline .filmstrip-slide.is-resizing {
  transition: none !important;
}

.canva-filmstrip.is-unified-timeline .filmstrip-add-slide:hover {
  background: rgba(241, 245, 249, 0.8);
  border-color: rgba(15, 23, 42, 0.25);
}


.canva-filmstrip.is-unified-timeline .filmstrip-slide:hover {
  box-shadow: none;
}

.canva-filmstrip.is-unified-timeline .filmstrip-slide.active,
.canva-filmstrip.is-unified-timeline .filmstrip-slide.timeline-active {
  box-shadow: none;
}

/* --- Slide Thumbnails --- */

.canva-filmstrip.is-unified-timeline .filmstrip-thumb {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: auto;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 7px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: none;
}

.canva-filmstrip.is-unified-timeline .filmstrip-thumb.filmstrip-thumb-image {
  background-position: left center;
  background-repeat: repeat-x;
  background-size: auto 100%;
}

.canva-filmstrip.is-unified-timeline .filmstrip-slide:hover .filmstrip-thumb {
  border-color: rgba(37, 99, 235, 0.35);
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.18);
}

.canva-filmstrip.is-unified-timeline .filmstrip-slide.active .filmstrip-thumb,
.canva-filmstrip.is-unified-timeline .filmstrip-slide.timeline-active .filmstrip-thumb {
  border-color: #2563eb;
  border-width: 1px;
  box-shadow: inset 0 0 0 1px #2563eb;
}

.canva-filmstrip.is-unified-timeline .filmstrip-thumb img,
.canva-filmstrip.is-unified-timeline .filmstrip-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.canva-filmstrip.is-unified-timeline .filmstrip-thumb.filmstrip-thumb-image img {
  /* Show the <img> as the actual thumbnail — more reliable than the inline
     background-image (some prod URLs don't render via CSS url() but do load
     as <img src>). Object-fit: cover from the rule above gives a clean single
     thumbnail, matching how video slides render. */
  opacity: 1;
}

/* Blank/default-background slides render a labeled card instead of the white
   placehold.co image so users can tell empty slides apart. */
.canva-filmstrip.is-unified-timeline .filmstrip-thumb-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(
    -45deg,
    #f3f4f6 0,
    #f3f4f6 6px,
    #e5e7eb 6px,
    #e5e7eb 12px
  );
  border-radius: 6px;
  pointer-events: none;
}

.canva-filmstrip.is-unified-timeline .filmstrip-thumb-placeholder-label {
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

/* --- Slide Number Badge --- */

.canva-filmstrip.is-unified-timeline .filmstrip-slide .slide-number {
  position: absolute;
  top: 4px;
  left: 4px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 9px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  z-index: 10;
}

/* --- Slide Meta (duration overlay) --- */

.filmstrip-slide-main {
  position: absolute;
  right: 3px;
  bottom: 3px;
  left: 3px;
  z-index: 10;
  display: grid;
  gap: 4px;
  pointer-events: none;
}

.filmstrip-duration-field {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  justify-self: start;
  color: #0f172a;
  font-size: 9px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.56);
  min-height: 16px;
  padding: 0 4px;
  border: 1px solid transparent;
  border-radius: 999px;
  opacity: 0.72;
  box-shadow: none;
  transition: opacity 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  pointer-events: auto;
  position: absolute;
  bottom: 4px;
  left: 4px;
  z-index: 20;
}

/* Hide controls if slide is too narrow */
.filmstrip-slide[style*="width: 0"],
.filmstrip-slide[style*="width: 1"],
.filmstrip-slide[style*="width: 2"],
.filmstrip-slide[style*="width: 3"],
.filmstrip-slide[style*="width: 4"],
.filmstrip-slide[style*="width: 5"] {
}

.canva-filmstrip.is-unified-timeline .filmstrip-slide {
  container-type: size;
}

@container (max-width: 60px) {
  .filmstrip-duration-field,
  .filmstrip-slide-handle {
    display: none !important;
  }
}

.canva-filmstrip.is-unified-timeline .filmstrip-slide:hover .filmstrip-duration-field,
.canva-filmstrip.is-unified-timeline .filmstrip-slide.active .filmstrip-duration-field {
  opacity: 1;
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(148, 163, 184, 0.22);
}

.filmstrip-duration-field input {
  width: 23px;
  height: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: #0f172a;
  font-size: 9px;
  font-weight: 700;
  text-align: right;
  outline: none;
}

.filmstrip-duration-field input:focus {
  background: rgba(241, 245, 249, 0.8);
  border-radius: 2px;
}

/* Keep slide names, corner delete button, and slide number hidden in compact mode */
.canva-filmstrip.is-unified-timeline .filmstrip-slide .slide-name,
.canva-filmstrip.is-unified-timeline .filmstrip-add-slide .slide-name,
.canva-filmstrip.is-unified-timeline .filmstrip-slide .btn-delete-slide,
.canva-filmstrip.is-unified-timeline .filmstrip-slide .slide-number {
  display: none !important;
}

/* Canva-style edge drag handles */
.filmstrip-slide-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 16px;
  z-index: 25;
  cursor: ew-resize;
  background: transparent;
  pointer-events: auto;
  /* Prevent the parent draggable="true" from hijacking pointer events */
  -webkit-user-drag: none;
  user-select: none;
  touch-action: none;
}

.filmstrip-slide-handle.left {
  left: 0;
}

.filmstrip-slide-handle.right {
  right: 0;
}

.filmstrip-slide-handle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 28px;
  background: rgba(255,255,255,0.7);
  border-radius: 999px;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

/* Always show handles on the active slide for discoverability */
.canva-filmstrip.is-unified-timeline .filmstrip-slide.active .filmstrip-slide-handle::after {
  opacity: 0.7;
}

/* Full reveal on hover */
.canva-filmstrip.is-unified-timeline .filmstrip-slide:hover .filmstrip-slide-handle::after,
.filmstrip-slide-handle:hover::after {
  opacity: 1;
  background: rgba(37, 99, 235, 0.9);
  transform: translate(-50%, -50%) scaleY(1.15);
}

/* Active drag state */
.filmstrip-slide-handle:active::after,
.filmstrip-slide.is-resizing .filmstrip-slide-handle::after {
  opacity: 1;
  background: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
}


/* ============================================
   TRANSITION INDICATORS (compact)
   ============================================ */

.transition-indicator {
  position: relative;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #ffffff !important;
  border: 1px solid #d1d5db;
  color: #475569;
  cursor: pointer;
  transition: opacity 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
  z-index: 10;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.14);
  padding: 0;
  line-height: 0;
}

.transition-indicator svg {
  width: 8px;
  height: 8px;
  display: block;
}

.transition-indicator span {
  font-size: 8px !important;
  line-height: 1 !important;
  display: block;
}

.transition-indicator:hover {
  background: #ffffff !important;
  border-color: #2563eb;
  color: #2563eb;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2);
  transform: scale(1.05);
}

.slide-gap-controls {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  z-index: 50;
  pointer-events: none;
  background: transparent !important;
  width: 20px;
  height: 36px;
  overflow: visible;
}

.slide-gap-controls > * {
  pointer-events: auto;
}

.slide-gap-add {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #ffffff !important;
  color: #334155;
  border: 1px solid #d1d5db;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
  z-index: 10;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.14);
  padding: 0;
  line-height: 0;
}

.slide-gap-add svg {
  width: 8px;
  height: 8px;
  display: block;
  stroke-width: 3;
}

.slide-gap-controls:hover .slide-gap-add {
  opacity: 1;
}

.slide-gap-add:hover {
  border-color: #2563eb;
  color: #2563eb;
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2);
}

.transition-indicator.is-none {
  background: #ffffff !important;
  border: 1px solid #d1d5db;
  color: #64748b;
  opacity: 0;
}

.transition-indicator.is-none:hover {
  background: #ffffff !important;
  border-style: solid;
  border-color: #2563eb;
  color: #2563eb;
  opacity: 1;
}

.slide-gap-controls:hover .transition-indicator.is-none {
  opacity: 1;
}

@media (min-width: 769px) {
  .slide-gap-add {
    opacity: 0;
  }

  .slide-gap-controls:hover .slide-gap-add {
    opacity: 1;
  }

  .slide-gap-controls:hover .transition-indicator.is-none {
    opacity: 1;
  }
}

.timeline-zoom-btn {
  min-width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(255, 255, 255, 0.78);
  color: #475569;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.timeline-zoom-btn:hover {
  background: rgba(255, 255, 255, 0.96);
  color: #0f172a;
}

/* ============================================
   VISIBILITY TOGGLES
   ============================================ */

.timeline-footer[hidden],
.timeline-panel[hidden] {
  display: none;
}

.canva-filmstrip.is-collapsed .timeline-track-group-layers,
.canva-filmstrip.is-collapsed .timeline-footer {
  display: none;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1200px) {
  .timeline-layer-track {
    grid-template-columns: 60px minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .canva-filmstrip.is-unified-timeline {
    max-height: 100px;
  }

  .filmstrip-slides {
    padding: 0 !important;
    gap: 0;
    -webkit-overflow-scrolling: touch;
  }

  .canva-filmstrip.is-unified-timeline .filmstrip-slide,
  .canva-filmstrip.is-unified-timeline .filmstrip-add-slide {
    height: 48px;
    min-width: 90px;
    border-radius: 7px;
  }

  /* Simplify tracks but don't hide completely on tablets */
  .timeline-track-label,
  .timeline-ruler-label {
    width: 0;
    overflow: hidden;
    padding: 0;
  }
}

@media (max-width: 600px) {


  .canva-filmstrip.is-unified-timeline .filmstrip-slide,
  .canva-filmstrip.is-unified-timeline .filmstrip-add-slide {
    height: 48px !important;
    min-width: 90px;
  }

  .transition-indicator,
  .slide-gap-add {
    width: 20px;
    height: 20px;
  }
}


/* --- Context Menu --- */
.timeline-context-menu {
  position: absolute;
  z-index: 10000;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  padding: 4px 0;
  min-width: 160px;
}

.timeline-context-menu-item {
  padding: 8px 16px;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s ease;
}

.timeline-context-menu-item:hover {
  background: #f1f5f9;
}

@media (max-width: 600px) {
  .timeline-context-menu-item {
    padding: 14px 20px !important;
    font-size: 14px !important;
  }
  .timeline-context-menu {
    min-width: 200px;
  }
  
  /* Slide context menu as bottom toolbar on mobile */
  .timeline-context-menu.slide-menu-bottom {
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    padding: 6px 8px calc(env(safe-area-inset-bottom, 0) + 6px) !important;
    gap: 4px !important;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1) !important;
    border-top: 1px solid #e5e7eb !important;
  }
  
  .timeline-context-menu.slide-menu-bottom .timeline-context-menu-item {
    flex: 1 !important;
    justify-content: center !important;
    padding: 6px 4px !important;
    font-size: 10px !important;
    border-radius: 6px !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
  }
  
  .timeline-context-menu.slide-menu-bottom .timeline-context-menu-item span {
    font-size: 16px !important;
  }
}

/* --- Mobile Toolbar (phones ≤768px only) --- */
.mobile-actions-group {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 100%;
}

.floating-bar-divider {
  width: 1px;
  height: 24px;
  background: #e2e8f0;
  margin: 0 8px;
  flex-shrink: 0;
}

.mobile-add-audio-btn,
.mobile-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #475569;
  font-size: 10px;
  font-weight: 600;
  padding: 6px 8px;
  gap: 3px;
  cursor: pointer;
  min-width: 44px;
  border-radius: 8px;
  transition: background 0.15s;
}

.mobile-add-audio-btn:active,
.mobile-action-btn:active {
  background: #f1f5f9;
}

.mobile-add-audio-btn svg {
  color: #6366f1;
}

.mobile-action-btn svg {
  color: #64748b;
}

.mobile-actions-left {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.mobile-agent-wrap {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  justify-content: flex-end;
  gap: 6px;
}

.floating-bar-content {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 8px;
}

/* ─── Renderer Mode ─── */

.is-renderer-mode .main-header,
.is-renderer-mode .editor-top-bar,
.is-renderer-mode .ai-agent-sidebar,
.is-renderer-mode #config-sidebar,
.is-renderer-mode .editor-right-rail,
.is-renderer-mode .zoom-controls-container,
.is-renderer-mode .canva-filmstrip,
.is-renderer-mode .editor-mobile-bottom-nav,
.is-renderer-mode .contextual-toolbar,
.is-renderer-mode #properties-panel,
.is-renderer-mode .floating-agent-bubble,
.is-renderer-mode .agent-mobile-floating-bar,
.is-renderer-mode .editor-mobile-nav {
  display: none !important;
}

.is-renderer-mode .editor-page-wrapper {
  padding-top: 0 !important;
  margin-top: 0 !important;
  height: 100vh !important;
  width: 100vw !important;
  background: black !important;
}

.is-renderer-mode .editor-main {
  height: 100vh !important;
}

.is-renderer-mode .editor-workspace {
  grid-template-columns: 1fr !important;
  padding: 0 !important;
  height: 100vh !important;
}

.is-renderer-mode .editor-canvas {
  padding: 0 !important;
  margin: 0 !important;
  height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: black !important;
}

.is-renderer-mode .canvas-viewport {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.is-renderer-mode .canvas-zoom-wrapper {
  transform: none !important; /* Renderer handles its own scaling if needed */
}

/* ============================================================
   PHASE 1 — Mobile Timeline: Compact Filmstrip-Only Mode
   The filmstrip must be visible on mobile without pushing
   the canvas offscreen. Caps height to 72px on mobile.
   The full timeline panel (layers/ruler) is hidden by default
   and toggled by Phase 2 chevron logic.
   ============================================================ */
@media (max-width: 768px) {
  .editor-canvas.has-unified-timeline {
    padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Let filmstrip height adapt to toolbar + slides + layers. Allow enough
     room for ruler + layer bars + slide tracks + audio row + zoom/hide
     footer so nothing gets clipped by the bottom nav (the editor-canvas
     padding-bottom keeps us above the nav itself). */
  .canva-filmstrip.is-unified-timeline {
    min-height: 0 !important;
    max-height: min(60vh, 340px) !important;
    height: auto !important;
    overflow: hidden !important;
    flex-shrink: 0;
  }

  /* Collapsed: show ONLY the play/time toolbar. Hide ruler, layer stack,
     slide tracks, audio row, and zoom footer. */
  .canva-filmstrip.is-unified-timeline.is-collapsed {
    height: auto !important;
    max-height: 56px !important;
  }
  .canva-filmstrip.is-unified-timeline.is-collapsed .timeline-unified-scroll,
  .canva-filmstrip.is-unified-timeline.is-collapsed #timeline-panel,
  .canva-filmstrip.is-unified-timeline.is-collapsed .filmstrip-slides,
  .canva-filmstrip.is-unified-timeline.is-collapsed #timeline-footer {
    display: none !important;
  }

  /* When layers are toggled open via Phase 2 chevron */
  .canva-filmstrip.is-unified-timeline.layers-expanded {
    max-height: min(60vh, 340px) !important;
  }

  /* Ensure panel padding matches mobile slides padding (16px) */
  .timeline-panel {
    padding: 0 var(--timeline-origin-x) 0;
  }

  /* Filmstrip slides row takes all available space */
  .filmstrip-slides {
    height: 54px;
    display: block !important;
    position: relative !important;
    overflow-x: hidden !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    flex-shrink: 0;
    padding: 0 !important;
  }

  /* Compact slide thumbnails on mobile - width controlled by JS based on duration */
  .canva-filmstrip.is-unified-timeline .filmstrip-slide,
  .canva-filmstrip.is-unified-timeline .filmstrip-add-slide {
    height: 48px !important;
    min-width: 0 !important;
    flex-shrink: 0;
    position: absolute !important;
    /* width is set by JavaScript based on slide duration - do NOT override */
  }

  .canva-filmstrip.is-unified-timeline .filmstrip-thumb img,
  .canva-filmstrip.is-unified-timeline .filmstrip-thumb video {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
  }
}

/* Applied Transition Styling */
.transition-indicator:not(.is-none) {
  background: #ffffff !important;
  border-color: rgba(37, 99, 235, 0.45) !important;
  color: #2563eb !important;
  opacity: 1 !important;
  box-shadow: 0 1px 4px rgba(37, 99, 235, 0.18);
}

.transition-indicator:not(.is-none):hover {
  background: #2563eb !important;
  color: white !important;
  border-color: #2563eb !important;
}
body:not(.editor-preview-mode) #v2-preview-close {
  display: none !important;
}

.btn-active-feedback, .ctx-btn:active, .toolbar-context-btn:active {
  transform: scale(0.92) !important;
  opacity: 0.7 !important;
  transition: transform 0.1s, opacity 0.1s !important;
}