/* ── Desktop multi-track timeline editor ──────────────────────────────────────
   Docked to the bottom of the viewport, dark regardless of app theme — an edit
   suite reads as an instrument, and a light timeline fights the picture above
   it. Canvas draws the lanes; this file styles the chrome around them. */

.tle {
  --tle-bg:      #0f1315;
  --tle-bar:     #171c1f;
  --tle-ruler:   #1b2024;
  --tle-gutter:  #12161a;
  --tle-laneA:   #15191c;
  --tle-laneB:   #181d20;
  --tle-grid:    #2b3134;
  --tle-ink:     #dfe4e1;
  --tle-faint:   #7b8482;
  --tle-clip:    #235f66;
  --tle-selc:    #7ee0e8;
  --tle-play:    #e8523f;
  --tle-adj:     #d8a63f;
  --tle-adjfill: rgba(216, 166, 63, 0.26);
  --tle-ov:      #b98bff;
  --tle-ovfill:  rgba(155, 92, 255, 0.32);

  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  background: var(--tle-bg);
  border-top: 1px solid #000;
  box-shadow: 0 -12px 34px rgba(0, 0, 0, 0.45);
  color: var(--tle-ink);
  font: 12px/1.4 system-ui, -apple-system, sans-serif;
  display: flex;
  flex-direction: column;
  max-height: 62vh;
}
.tle[hidden] { display: none; }

/* The dock takes real space instead of covering the app.
   Every pane in main.workspace is position:fixed with top:0;bottom:0, so they
   span the viewport and a padding-bottom on the container does nothing — their
   bottom edge has to be lifted by the dock's own measured height, which
   timeline.js publishes as --tle-h. */
/* ...but ONLY when the timeline really is a dock over the editor.
 *
 * Under the desktop shell or the PDA the timeline is its own WINDOW, sitting
 * beside the editor rather than on top of it, so lifting the editor's panes
 * reserves 300px for something that is not there. Worse, `tle-on` stays on the
 * body for as long as that window exists, so the editor kept the gap after you
 * switched back to it — half its layout missing, measured at 336px of content
 * in a 644px body until the page was reloaded.
 *
 * The dock behaviour is still right when there is no shell, which is why this
 * is scoped rather than deleted. */
body:not(.sh-on):not(.pda-on).tle-on .sidebar,
body:not(.sh-on):not(.pda-on).tle-on .sidebar-left,
body:not(.sh-on):not(.pda-on).tle-on .sidebar-right,
body:not(.sh-on):not(.pda-on).tle-on .canvas-area,
body:not(.sh-on):not(.pda-on).tle-on #drop-zone {
  bottom: var(--tle-h, 300px) !important;
}
/* Floating chrome that would otherwise sit under the dock. */
body:not(.sh-on):not(.pda-on).tle-on .filmstrip,
body:not(.sh-on):not(.pda-on).tle-on .zoom-controls,
body:not(.sh-on):not(.pda-on).tle-on .toolbar {
  bottom: calc(var(--tle-h, 300px) + 12px) !important;
}

.tle-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  background: var(--tle-bar);
  border-bottom: 1px solid #000;
  flex-wrap: wrap;
}
.tle-spacer { flex: 1 1 auto; }
.tle-sep {
  width: 1px; align-self: stretch; margin: 2px 4px;
  background: var(--tle-grid);
}

.tle-btn {
  border: 1px solid var(--tle-grid);
  background: #1e2427;
  color: var(--tle-ink);
  border-radius: 5px;
  padding: 6px 10px;
  font: 600 11px/1 system-ui, sans-serif;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s ease, border-color .12s ease;
}
.tle-btn:hover  { background: #262d31; border-color: #3a4247; }
.tle-btn:active { background: #1a1f22; }
.tle-btn:focus-visible { outline: 2px solid var(--tle-selc); outline-offset: 2px; }

.tle-play { width: 34px; font-size: 13px; }
.tle-go {
  background: var(--tle-clip);
  border-color: #2d757e;
  color: #eafeff;
}
.tle-go:hover { background: #2b757e; }
.tle-danger:hover { background: #52251f; border-color: #7d3628; }
.tle-x { background: none; border-color: transparent; color: var(--tle-faint); }
.tle-x:hover { color: #fff; background: #262d31; }

.tle-time {
  font: 600 12px/1 ui-monospace, "SF Mono", monospace;
  font-variant-numeric: tabular-nums;
  color: var(--tle-ink);
  padding: 0 4px;
}
.tle-sel {
  font: 500 11px/1 ui-monospace, monospace;
  color: var(--tle-faint);
  max-width: 42ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Drag the top edge to resize the dock. */
.tle-grip {
  height: 7px;
  cursor: ns-resize;
  background: var(--tle-bar);
  border-bottom: 1px solid #000;
  position: relative;
  flex: 0 0 auto;
}
.tle-grip::after {
  content: '';
  position: absolute; left: 50%; top: 3px;
  width: 46px; height: 2px; margin-left: -23px;
  border-radius: 2px;
  background: var(--tle-grid);
}
.tle-grip:hover::after { background: var(--tle-selc); }

/* Contextual editor for the selected title / sticker. */
.tle-props {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  padding: 8px 12px;
  background: #131719;
  border-bottom: 1px solid var(--tle-grid);
  overflow-x: auto;
  flex: 0 0 auto;
}
.tle-props[hidden] { display: none; }
.tle-field { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; }
.tle-field > span {
  font: 600 9px/1 ui-monospace, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tle-faint);
}
.tle-text-in {
  min-width: 220px; max-width: 340px;
  resize: vertical;
  background: #0d1113;
  border: 1px solid var(--tle-grid);
  border-radius: 5px;
  color: var(--tle-ink);
  font: 500 12px/1.35 system-ui, sans-serif;
  padding: 6px 8px;
}
.tle-sel-in {
  background: #0d1113;
  border: 1px solid var(--tle-grid);
  border-radius: 5px;
  color: var(--tle-ink);
  font: 600 11px/1 system-ui, sans-serif;
  padding: 7px 8px;
}
.tle-text-in:focus, .tle-sel-in:focus { outline: 2px solid var(--tle-selc); outline-offset: 1px; }
.tle-range { width: 128px; accent-color: var(--tle-selc); }

.tle-art-grid { display: flex; gap: 4px; }
.tle-art {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  padding: 0;
  background: #0d1113;
  border: 1px solid var(--tle-grid);
  border-radius: 6px;
  cursor: pointer;
}
.tle-art:hover { border-color: #4a545a; }
.tle-art.on { border-color: var(--tle-selc); background: #17252a; }
.tle-art canvas { display: block; }

.tle-mini { padding: 6px 6px; font-size: 10.5px; }

/* "+ Clip" popup: which of your loaded videos to add. */
.tle-menu {
  position: absolute;
  z-index: 5;
  min-width: 210px;
  max-height: 260px;
  overflow-y: auto;
  padding: 4px;
  background: #10161a;
  border: 1px solid var(--tle-grid);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6);
}
.tle-menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 8px 9px;
  background: none; border: 0; border-radius: 5px;
  color: var(--tle-ink);
  font: 500 12px/1 system-ui, sans-serif;
  cursor: pointer;
  text-align: left;
}
.tle-menu-item:hover { background: #1c2529; }
.tle-menu-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tle-menu-dur {
  font: 600 10px/1 ui-monospace, monospace;
  color: var(--tle-faint);
  font-variant-numeric: tabular-nums;
}
.tle-menu-empty { padding: 10px; color: var(--tle-faint); font-size: 11.5px; }

/* Chroma key row: toggle, presets, custom colour. */
.tle-keyrow { display: flex; align-items: center; gap: 4px; }
.tle-key-toggle { padding: 6px 9px; }
.tle-key-toggle.on { background: var(--tle-clip); border-color: #2d757e; color: #eafeff; }
.tle-swatch {
  width: 20px; height: 26px; padding: 0;
  border: 1px solid var(--tle-grid);
  border-radius: 4px; cursor: pointer;
}
.tle-swatch.on { border-color: var(--tle-selc); box-shadow: 0 0 0 1px var(--tle-selc) inset; }
.tle-color {
  width: 30px; height: 26px; padding: 0;
  background: none; border: 1px solid var(--tle-grid);
  border-radius: 4px; cursor: pointer;
}
.tle-keyrow:not(.tle-key-live) .tle-swatch,
.tle-keyrow:not(.tle-key-live) .tle-color { opacity: 0.5; }

.tle-body { overflow: auto hidden; flex: 1 1 auto; }
.tle-canvas { display: block; width: 100%; touch-action: none; }

.tle-foot {
  display: flex; align-items: center; gap: 12px;
  padding: 5px 12px;
  border-top: 1px solid var(--tle-grid);
  background: var(--tle-bar);
}
.tle-hint { color: var(--tle-faint); font-size: 10.5px; }
.tle-prog {
  margin-left: auto;
  font: 600 11px/1 ui-monospace, monospace;
  color: var(--tle-selc);
  font-variant-numeric: tabular-nums;
}

/* The dock owns the bottom of the screen — get the mobile trim widget and its
   toggle out of the way rather than letting them overlap it. */
body.tle-on .vedit,
body.tle-on .vedit-toggle { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .tle-btn { transition: none; }
}