/* ============================================
   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 */
}

.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;
}

.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;
}

/* --- 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;
}

.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 {
  opacity: 0;
}

/* --- 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 */
  .canva-filmstrip.is-unified-timeline {
    min-height: 0 !important;
    max-height: 250px !important;
    height: auto !important;
    overflow: hidden !important;
    flex-shrink: 0;
  }

  .canva-filmstrip.is-unified-timeline.is-collapsed {
    height: 104px !important;
    max-height: 104px !important;
  }

  /* When layers are toggled open via Phase 2 chevron */
  .canva-filmstrip.is-unified-timeline.layers-expanded {
    max-height: 250px !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;
}