/* Timeline scrollbar (from lab/fx/timeline-scrollbar). The strip is an NLE panel: always dark. */
html { scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }

.tsb {
  --tsb-bg: rgba(14, 14, 16, 0.94);
  --red: var(--rec, #ff453a);
  --text: #f1efea; --muted: #a3a097; --line: rgba(255, 255, 255, 0.1); --line-strong: rgba(255, 255, 255, 0.2);
  --font-mono: var(--f-mono); --font-ui: var(--f-ui);
  position: fixed; z-index: 60; display: flex; gap: 6px;
  background: var(--tsb-bg); border: 1px solid var(--line-strong); border-radius: 12px;
  /* no backdrop-filter: blurring a playing background video every frame halves the frame rate */
  box-shadow: 0 14px 40px -18px rgba(0, 0, 0, .9);
  font-family: var(--font-mono); color: var(--text); user-select: none; -webkit-user-select: none;
}
.tsb-track { position: relative; flex: 1 1 auto; touch-action: none; cursor: pointer; }
.tsb.scrubbing .tsb-track { cursor: grabbing; }
.tsb-clips { position: absolute; }
.tsb-clip {
  position: absolute; padding: 0; margin: 0; border: 0; cursor: pointer; overflow: hidden;
  background: color-mix(in srgb, var(--c) 55%, #000); border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  transition: filter .2s, box-shadow .2s, opacity .2s; opacity: .78; color: #fff;
}
.tsb-clip:hover { filter: brightness(1.18); opacity: 1; }
.tsb-clip.on { opacity: 1; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .92); }
.tsb-clip:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; z-index: 2; }
.tsb-film {
  position: absolute; inset: 0; background-image: var(--poster, none); opacity: .55; pointer-events: none;
}
.tsb-film::after { content: ''; position: absolute; inset: 0; background: color-mix(in srgb, var(--c) 25%, transparent); }
.tsb-name {
  position: absolute; display: flex; gap: 6px; align-items: center; white-space: nowrap; pointer-events: none;
  font-family: var(--font-ui); font-weight: 600; font-size: 11px; letter-spacing: .01em; text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.tsb-name b { font-family: var(--font-mono); font-weight: 500; font-size: 9.5px; opacity: .75; }
.tsb-name .short { display: none; }
.tsb-clip::before { content: ''; position: absolute; background: var(--c); z-index: 1; }

.tsb-ruler { position: absolute; pointer-events: auto; cursor: ew-resize; }
.tsb-head { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform; z-index: 3; }
.tsb-line { position: absolute; background: var(--red); box-shadow: 0 0 8px color-mix(in srgb, var(--red) 60%, transparent); }
.tsb-flag { position: absolute; background: var(--red); pointer-events: auto; cursor: grab; }
.tsb-bubble {
  position: absolute; background: var(--red); color: #fff; font-size: 10.5px; font-weight: 500; padding: 3px 7px; border-radius: 6px;
  white-space: nowrap; opacity: 0; transition: opacity .2s; pointer-events: none;
}
.tsb:hover .tsb-bubble, .tsb.scrubbing .tsb-bubble { opacity: 1; }
.tsb-tc { display: flex; flex-direction: column; justify-content: center; gap: 2px; pointer-events: none; }
.tsb-tc-main { font-size: 12px; font-weight: 500; letter-spacing: .02em; }
.tsb-tc-sec { font-family: var(--font-ui); font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- vertical: right edge ---------- */
.tsb[data-mode='v'] { right: 12px; top: 12px; bottom: 12px; width: 62px; flex-direction: column; padding: 8px 6px 8px 6px; }
.tsb[data-mode='v'] .tsb-tc { align-items: center; text-align: center; }
.tsb[data-mode='v'] .tsb-tc-main { font-size: 9.5px; }
.tsb[data-mode='v'] .tsb-tc-sec { display: none; }
.tsb[data-mode='v'] .tsb-ruler {
  left: 0; top: 0; bottom: 0; width: 10px;
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.4) 0 1px, transparent 1px calc(var(--tick, 8px) * 5)) left top / 10px 100% no-repeat,
    repeating-linear-gradient(to bottom, rgba(255,255,255,.18) 0 1px, transparent 1px var(--tick, 8px)) left top / 5px 100% no-repeat;
}
.tsb[data-mode='v'] .tsb-clips { left: 13px; right: 0; top: 0; bottom: 0; }
.tsb[data-mode='v'] .tsb-clip { left: 0; right: 0; }
.tsb[data-mode='v'] .tsb-clip > .tsb-film { background-size: 100% auto; background-repeat: repeat-y; }
.tsb[data-mode='v'] .tsb-clip::before { left: 0; top: 0; bottom: 0; width: 3px; }
.tsb[data-mode='v'] .tsb-name { left: 50%; top: 8px; writing-mode: vertical-rl; transform: translateX(-50%); }
.tsb[data-mode='v'] .tsb-clip.tiny .tsb-name .full { display: none; }
.tsb[data-mode='v'] .tsb-head { right: -6px; left: -4px; height: 0; }
.tsb[data-mode='v'] .tsb-line { left: 0; right: 0; top: -1px; height: 2px; }
.tsb[data-mode='v'] .tsb-flag { left: -4px; top: -6px; width: 12px; height: 12px; clip-path: polygon(0 0, 60% 0, 100% 50%, 60% 100%, 0 100%); }
.tsb[data-mode='v'] .tsb-bubble { right: calc(100% + 12px); top: -11px; }

/* ---------- horizontal: bottom ---------- */
.tsb[data-mode='h'] { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); height: 64px; padding: 6px 8px; align-items: stretch; }
.tsb[data-mode='h'] .tsb-tc { width: 112px; flex: none; padding: 0 6px; border-right: 1px solid var(--line); margin-right: 4px; }
.tsb[data-mode='h'] .tsb-ruler {
  left: 0; right: 0; top: 0; height: 12px;
  background:
    repeating-linear-gradient(to right, rgba(255,255,255,.42) 0 1px, transparent 1px calc(var(--tick, 8px) * 5)) left bottom / 100% 10px no-repeat,
    repeating-linear-gradient(to right, rgba(255,255,255,.18) 0 1px, transparent 1px var(--tick, 8px)) left bottom / 100% 5px no-repeat;
}
.tsb[data-mode='h'] .tsb-clips { left: 0; right: 0; top: 15px; bottom: 0; }
.tsb[data-mode='h'] .tsb-clip { top: 0; bottom: 0; }
.tsb[data-mode='h'] .tsb-clip > .tsb-film { background-size: auto 100%; background-repeat: repeat-x; }
.tsb[data-mode='h'] .tsb-clip::before { left: 0; right: 0; top: 0; height: 3px; }
.tsb[data-mode='h'] .tsb-name { left: 7px; top: 50%; transform: translateY(-50%); }
.tsb[data-mode='h'] .tsb-clip.tiny .tsb-name .full { display: none; }
.tsb[data-mode='h'] .tsb-head { top: -4px; bottom: -2px; width: 0; }
.tsb[data-mode='h'] .tsb-line { top: 0; bottom: 0; left: -1px; width: 2px; }
.tsb[data-mode='h'] .tsb-flag { left: -6px; top: 0; width: 12px; height: 12px; clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%); }
.tsb[data-mode='h'] .tsb-bubble { bottom: calc(100% + 6px); left: 0; transform: translateX(-50%); }

/* ---------- phone: compact strip ---------- */
.tsb.compact[data-mode='h'] { left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); height: 46px; padding: 4px 6px; border-radius: 10px; }
.tsb.compact .tsb-tc { width: 70px; padding: 0 4px 0 2px; }
.tsb.compact .tsb-tc-main { font-size: 10px; }
.tsb.compact .tsb-tc-sec { font-size: 9.5px; }
.tsb.compact .tsb-ruler { height: 8px; }
.tsb.compact .tsb-clips { top: 10px; }
.tsb.compact .tsb-name { left: 4px; font-size: 9px; gap: 3px; }
.tsb.compact .tsb-name b { display: none; }
.tsb.compact .tsb-name .full { display: none; }
.tsb.compact .tsb-name .short { display: inline; }
.tsb.compact .tsb-clip.tiny .tsb-name { display: none; }
.tsb.compact .tsb-bubble { display: none; }
.tsb.compact .tsb-flag { width: 10px; height: 9px; left: -5px; }

@media (prefers-reduced-motion: reduce) {
  .tsb-clip, .tsb-bubble { transition: none; }
}

/* ---------- v1: nested sequence (a group of sections = one clip with sub-clips) ---------- */
.tsb-clip.is-group { background: #1b1b1f; }
.tsb-clip.is-group::before { display: none; }
.tsb-subs { position: absolute; inset: 0; pointer-events: none; }
.tsb-sub { position: absolute; display: block; background: color-mix(in srgb, var(--c) 42%, #0c0c0e); box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, .55); transition: background-color .25s; }
.tsb-sub::before { content: ''; position: absolute; background: var(--c); }
.tsb-sub.on { background: color-mix(in srgb, var(--c) 78%, #0c0c0e); }
.tsb[data-mode='v'] .tsb-sub { left: 0; right: 0; }
.tsb[data-mode='v'] .tsb-sub::before { left: 0; top: 0; bottom: 0; width: 3px; }
.tsb[data-mode='h'] .tsb-sub { top: 0; bottom: 0; }
.tsb[data-mode='h'] .tsb-sub::before { left: 0; right: 0; top: 0; height: 3px; }
.tsb-clip.is-group .tsb-name { z-index: 1; }
/* names are the point now (9 clips instead of 14): bigger, numbers quieter */
.tsb-name { font-size: 11.5px; }
.tsb-name b { opacity: .55; }
.tsb[data-mode='v'] .tsb-name { top: 9px; }

/* hover tooltip: poster + name + in-point */
.tsb-tip {
  position: absolute; z-index: 5; pointer-events: none; display: flex; gap: 10px; align-items: center;
  padding: 6px 12px 6px 6px; border-radius: 10px; background: rgba(14, 14, 16, .96); border: 1px solid var(--line-strong);
  box-shadow: 0 16px 36px -18px rgba(0, 0, 0, .9); white-space: nowrap; opacity: 0; transition: opacity .18s, transform .25s cubic-bezier(.16, 1, .3, 1);
}
.tsb-tip-img { width: 72px; height: 41px; border-radius: 5px; flex: none; background: #222 center / cover no-repeat; box-shadow: inset 0 -3px 0 var(--c); }
.tsb-tip.no-img .tsb-tip-img { background: color-mix(in srgb, var(--c) 55%, #000); }
.tsb-tip-t { display: grid; gap: 2px; }
.tsb-tip b { font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; color: var(--text); }
.tsb-tip em { font-style: normal; font-size: 10.5px; color: var(--muted); letter-spacing: .03em; }
.tsb[data-mode='v'] .tsb-tip { right: calc(100% + 14px); top: 0; transform: translate3d(6px, calc(var(--at, 0px) - 50%), 0); }
.tsb[data-mode='v'].tipping .tsb-tip { opacity: 1; transform: translate3d(0, calc(var(--at, 0px) - 50%), 0); }
.tsb[data-mode='h'] .tsb-tip { bottom: calc(100% + 12px); left: 0; transform: translate3d(calc(var(--at, 0px) - 50%), 6px, 0); }
.tsb[data-mode='h'].tipping .tsb-tip { opacity: 1; transform: translate3d(calc(var(--at, 0px) - 50%), 0, 0); }
.tsb.scrubbing .tsb-tip, .tsb.compact .tsb-tip { display: none; }
@media (hover: none) { .tsb-tip { display: none; } }
/* while the tooltip names the clip, the timecode bubble steps aside */
.tsb.tipping .tsb-bubble { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .tsb-tip { transition: none; } }