/* ── Timeline pill (bottom, inset between sidebars) ──────────────────────────── */

#timeline-strip {
    position: fixed;
    bottom: var(--ui-gap);
    left: calc(var(--panel-width) + var(--ui-gap));
    right: calc(var(--panel-width) + var(--ui-gap));
    height: 44px;
    background: var(--panel-bg);
    backdrop-filter: blur(var(--panel-blur));
    -webkit-backdrop-filter: blur(var(--panel-blur));
    border: var(--border-panel);
    border-radius: var(--radius-1);
    z-index: var(--z-timeline);
    display: flex;
    align-items: center;
    padding: var(--pad-1);
    gap: 6px;
    font-family: var(--font-main);
    user-select: none;
}

/* Extended controls → dodge the second panel on the right edge too. */
body.controls-split #timeline-strip {
    right: calc(2 * var(--panel-width) + var(--ui-gap));
}

/* ── Play / pause button ─────────────────────────────────────────────────────── */
#timeline-play-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--surface-input);
    border: var(--border-input);
    border-radius: var(--radius-2);
    color: var(--text-label);
    padding: 0;
    cursor: pointer;
    transition: all var(--ease-hover);
}
#timeline-play-btn:hover {
    background: var(--surface-hover);
    border-color: var(--border-color-hover);
    color: var(--text-hover);
}

/* Icon — pause while playing, play while paused */
#timeline-play-btn::before {
    content: '';
    display: block;
    width: var(--icon-size);
    height: var(--icon-size);
    background-color: currentColor;
    -webkit-mask-image: url('/assets/icons/ui/timeline_pause.svg');
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-image: url('/assets/icons/ui/timeline_pause.svg');
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}
#timeline-play-btn.paused::before {
    -webkit-mask-image: url('/assets/icons/ui/timeline_play.svg');
    mask-image: url('/assets/icons/ui/timeline_play.svg');
}

/* ── Waveform wrap (centre, flex: 1) ─────────────────────────────────────────── */
#timeline-wave-wrap {
    position: relative;
    flex: 1;
    height: 100%;
    background: var(--palette-gradient, transparent);
    border-radius: var(--radius-2);
}

#timeline-wave {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    cursor: crosshair;
}

/* ── Time display (right) ────────────────────────────────────────────────────── */
#timeline-time {   /* numeric: current time / total duration counter */
    flex-shrink: 0;
    font-size: var(--font-size-base);
    font-family: var(--font-numeric);
    color: var(--text-secondary);
    white-space: nowrap;
    min-width: 88px;
    text-align: right;
    padding-right: 4px;
}

/* ── Mobile overrides ────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    #timeline-strip {
        left: var(--ui-gap);
        right: var(--ui-gap);
        transition: opacity var(--ease-panel);
    }
    body.sidebar-export-open #timeline-strip,
    body.sidebar-controls-open #timeline-strip {
        opacity: 0;
        pointer-events: none;
    }
}