/* ====================================================================
 * [feature/timeline-header-preline] Современный preline.co-стиль
 * свернутой шапки панели воспроизведения маршрута (.timeline-header).
 *
 * Цель — переработать «карточку» шапки (progress chip + dot + время +
 * мини-полоса прогресса + кнопка-шеврон) в единый Preline-style
 * soft-блок, вдохновлённый timeline-карточками Linear, Notion, Slack
 * и шаблонами preline.co «Card with progress».
 *
 * Ключевые UX-решения:
 *   • 24-часовой формат времени (HH:MM) устанавливается в app.js
 *     явно: `hour12: false` (см. _formatTimestampShort).
 *   • Точка состояния (playing/paused/stopped) переехала в иконку
 *     слева — теперь это не голая точка, а цветной chip-маркер
 *     с soft-glow, как индикатор статуса в Linear.
 *   • Прогресс-полоса остаётся визуально тонкой (3px), но с
 *     мягким градиентом и subtle box-shadow для ощущения глубины.
 *   • Кнопка-шеврон — круглая pill-кнопка в стиле других icon-btn
 *     проекта; поворачивается вниз при развёрнутом состоянии через
 *     CSS transform.
 *   • Тёмная тема: одинаковые токены и preline-soft-glow эффекты,
 *     как в preline-header.css и preline-notification-panel.css.
 *
 * Совместимость:
 *   • Все id и data-* атрибуты, к которым обращается app.js /
 *     trip.html, сохранены (#progressDisplay, #headerCurrentTime,
 *     #headerMiniFill, #collapseButton,
 *     .timeline-header__dot, data-tooltip-collapse/expand,
 *     aria-expanded/controls, role="button").
 *   • Сохранены классы .timeline-header, .timeline-header__left,
 *     .timeline-header__center, .timeline-header__time,
 *     .timeline-header__dot, .timeline-header__mini-track,
 *     .timeline-header__mini-fill, .collapse-button.
 *   • Сохранён порядок вложенности — JS использует querySelector
 *     по .timeline-header, поэтому DOM-структура остаётся совместимой.
 * ==================================================================== */

/* ---------- Семантические токены ----------
   ЕДИНЫЙ dark-стиль для светлой и тёмной темы приложения.
   Свёрнутая шапка плеера — self-contained dark UI, который
   выглядит идентично при любой теме оформления (как в
   Spotify/Apple Music/YouTube Music). Значения полностью
   совпадают с .dark-theme ниже. */
:root {
    /* Поверхности шапки */
    --tlh-surface-bg: linear-gradient(135deg,
        rgba(15, 23, 42, 0.78) 0%,
        rgba(15, 23, 42, 0.62) 100%);
    --tlh-surface-border: rgba(148, 163, 184, 0.18);
    --tlh-surface-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 1px 2px rgba(0, 0, 0, 0.35),
        0 10px 28px -12px rgba(0, 0, 0, 0.6);

    /* Time-chip: «таблетка» с текущим временем (24ч HH:MM) */
    --tlh-chip-bg: linear-gradient(135deg,
        rgba(56, 189, 248, 0.16) 0%,
        rgba(56, 189, 248, 0.06) 100%);
    --tlh-chip-border: rgba(56, 189, 248, 0.30);
    --tlh-chip-fg: #bae6fd;
    --tlh-chip-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);

    /* Progress-fill (градиентная мини-полоса) */
    --tlh-progress-track: rgba(148, 163, 184, 0.16);
    --tlh-progress-fill: linear-gradient(90deg,
        #38bdf8 0%,
        #4ade80 100%);
    --tlh-progress-shadow: 0 0 10px rgba(56, 189, 248, 0.45);

    /* Точка состояния (playing/paused/stopped) — soft chip в начале
       time-chip. Используется как в Linear: яркий цвет + soft-glow. */
    --tlh-dot-stopped: #94a3b8;
    --tlh-dot-stopped-bg: rgba(148, 163, 184, 0.22);
    --tlh-dot-playing: #4ade80;
    --tlh-dot-playing-bg: rgba(74, 222, 128, 0.22);
    --tlh-dot-paused: #fbbf24;
    --tlh-dot-paused-bg: rgba(251, 191, 36, 0.24);

    /* Текст/метки */
    --tlh-label-color: #cbd5e1;
    --tlh-value-color: #f1f5f9;
    --tlh-meta-color: #94a3b8;

    /* Кнопка сворачивания (chevron) — пилюля в preline-стиле */
    --tlh-collapse-bg: linear-gradient(135deg,
        rgba(56, 189, 248, 0.16) 0%,
        rgba(56, 189, 248, 0.05) 100%);
    --tlh-collapse-border: rgba(56, 189, 248, 0.32);
    --tlh-collapse-fg: #bae6fd;
    --tlh-collapse-shadow:
        0 1px 2px rgba(0, 0, 0, 0.4),
        0 6px 18px -8px rgba(56, 189, 248, 0.35);
    --tlh-collapse-shadow-hover:
        0 1px 2px rgba(0, 0, 0, 0.5),
        0 10px 28px -10px rgba(56, 189, 248, 0.5);
}

/* ---------- Тёмная тема ---------- */
.dark-theme {
    --tlh-surface-bg: linear-gradient(135deg,
        rgba(15, 23, 42, 0.78) 0%,
        rgba(15, 23, 42, 0.62) 100%);
    --tlh-surface-border: rgba(148, 163, 184, 0.18);
    --tlh-surface-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 1px 2px rgba(0, 0, 0, 0.35),
        0 10px 28px -12px rgba(0, 0, 0, 0.6);

    --tlh-chip-bg: linear-gradient(135deg,
        rgba(56, 189, 248, 0.16) 0%,
        rgba(56, 189, 248, 0.06) 100%);
    --tlh-chip-border: rgba(56, 189, 248, 0.30);
    --tlh-chip-fg: #bae6fd;
    --tlh-chip-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);

    --tlh-progress-track: rgba(148, 163, 184, 0.16);
    --tlh-progress-fill: linear-gradient(90deg,
        #38bdf8 0%,
        #4ade80 100%);
    --tlh-progress-shadow: 0 0 10px rgba(56, 189, 248, 0.45);

    --tlh-dot-stopped: #94a3b8;
    --tlh-dot-stopped-bg: rgba(148, 163, 184, 0.22);
    --tlh-dot-playing: #4ade80;
    --tlh-dot-playing-bg: rgba(74, 222, 128, 0.22);
    --tlh-dot-paused: #fbbf24;
    --tlh-dot-paused-bg: rgba(251, 191, 36, 0.24);

    --tlh-label-color: #cbd5e1;
    --tlh-value-color: #f1f5f9;
    --tlh-meta-color: #94a3b8;

    --tlh-collapse-bg: linear-gradient(135deg,
        rgba(56, 189, 248, 0.16) 0%,
        rgba(56, 189, 248, 0.05) 100%);
    --tlh-collapse-border: rgba(56, 189, 248, 0.32);
    --tlh-collapse-fg: #bae6fd;
    --tlh-collapse-shadow:
        0 1px 2px rgba(0, 0, 0, 0.4),
        0 6px 18px -8px rgba(56, 189, 248, 0.35);
    --tlh-collapse-shadow-hover:
        0 1px 2px rgba(0, 0, 0, 0.5),
        0 10px 28px -10px rgba(56, 189, 248, 0.5);
}

/* ====================================================================
 *  Сам блок шапки.
 *  В развёрнутом состоянии панели шапка скрывается через
 *  .timeline-container:not(.collapsed) > .timeline-header
 *  (правило в public/style.css).
 * ==================================================================== */
.timeline-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    box-sizing: border-box;
    cursor: pointer;
    user-select: none;
    border-radius: 12px;
    transition: background-color 200ms ease, box-shadow 200ms ease,
                transform 200ms ease;
    outline: none;
    /* Soft-карточка Preline: лёгкий gradient, тонкий border, glow. */
    background: var(--tlh-surface-bg);
    border: 1px solid var(--tlh-surface-border);
    box-shadow: var(--tlh-surface-shadow);
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
}

.timeline-header:hover,
.timeline-header:focus-visible {
    border-color: color-mix(in srgb, var(--button-bg, #0d7bff) 35%, var(--tlh-surface-border));
    box-shadow: var(--tlh-surface-shadow),
                0 0 0 3px color-mix(in srgb, var(--button-bg, #0d7bff) 12%, transparent);
}

.timeline-header:focus-visible {
    box-shadow: var(--tlh-surface-shadow),
                0 0 0 3px color-mix(in srgb, var(--button-bg, #0d7bff) 30%, transparent);
}

.timeline-header:active {
    transform: scale(0.997);
}

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

/* ====================================================================
 *  Левая группа: иконка + time-chip (24ч HH:MM) + label.
 *  Именно здесь пользователь видит «который час» у текущей точки.
 * ==================================================================== */
.timeline-header__left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 0 0 auto;
}

/* Чип с иконкой часов и временем 24ч — единый «time-block»,
   стилизованный в духе Linear/Slack. Заменяет старую
   «dot+time» пару на более выразительный блок. */
.timeline-header__time-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* min-width = auto (по умолчанию) + white-space: nowrap ниже — чтобы
       24-часовой таймштамп HH:MM не сжимался в ноль, когда родительский
       .timeline-header становится тесным (например, в свернутом состоянии
       на узких экранах). */
    padding: 5px 10px 5px 8px;
    border-radius: 999px;
    background: var(--tlh-chip-bg);
    border: 1px solid var(--tlh-chip-border);
    color: var(--tlh-chip-fg);
    box-shadow: var(--tlh-chip-shadow);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "ss01" 1;
    line-height: 1;
    flex: 0 0 auto;
    transition: background 200ms ease, border-color 200ms ease,
                color 200ms ease, box-shadow 200ms ease;
}

.timeline-header__time-chip-icon {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    line-height: 1;
    color: inherit;
    opacity: 0.85;
}

/* Старая точка-индикатор (is-playing/is-paused/is-stopped) — сохраняем
   для совместимости с updateHeaderPlaybackState. Внутри чипа она
   становится «пульсаром» — мини-кругом, синхронизированным с
   состоянием playback. */
.timeline-header__dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tlh-dot-stopped);
    box-shadow: 0 0 0 3px var(--tlh-dot-stopped-bg);
    transition: background-color 220ms ease, box-shadow 220ms ease;
    order: -1;
}

.timeline-header__dot.is-playing {
    background: var(--tlh-dot-playing);
    box-shadow: 0 0 0 3px var(--tlh-dot-playing-bg);
    animation: tlh-dot-pulse 1.8s ease-in-out infinite;
}

.timeline-header__dot.is-paused {
    background: var(--tlh-dot-paused);
    box-shadow: 0 0 0 3px var(--tlh-dot-paused-bg);
}

.timeline-header__dot.is-stopped {
    background: var(--tlh-dot-stopped);
    box-shadow: 0 0 0 3px var(--tlh-dot-stopped-bg);
}

@keyframes tlh-dot-pulse {
    0%, 100% {
        box-shadow: 0 0 0 3px var(--tlh-dot-playing-bg),
                    0 0 0 0 color-mix(in srgb, var(--tlh-dot-playing) 35%, transparent);
    }
    50% {
        box-shadow: 0 0 0 3px var(--tlh-dot-playing-bg),
                    0 0 0 6px color-mix(in srgb, var(--tlh-dot-playing) 0%, transparent);
    }
}

@media (prefers-reduced-motion: reduce) {
    .timeline-header__dot.is-playing { animation: none; }
}

/* Старое поле времени — теперь внутри chip-а. Класс
   .timeline-header__time оставлен для JS-обратной совместимости
   (см. updateTimeDisplay → document.getElementById('headerCurrentTime')
   в app.js). */
.timeline-header__time {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: inherit;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    white-space: nowrap;
    flex: 0 0 auto;
}

/* Метка «время точки» справа от chip-а (опционально). Скрыта в
   свернутом состоянии, чтобы не ломать компактный ритм шапки. */
.timeline-header__label {
    font-size: 11px;
    font-weight: 600;
    color: var(--tlh-label-color);
    letter-spacing: 0.01em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Старое «progress-display» поле — теперь справа в шапке, рядом с
   центральной полосой. Превращаем в аккуратный mini-badge. */
.timeline-header__progress {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--tlh-progress-track);
    color: var(--tlh-meta-color);
    font-size: 11.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    transition: background 200ms ease, color 200ms ease;
}

.timeline-header__progress .progress-display {
    color: var(--tlh-value-color);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.timeline-header:hover .timeline-header__progress,
.timeline-header:focus-visible .timeline-header__progress {
    color: var(--tlh-value-color);
}

/* ====================================================================
 *  Центральная группа: мини-полоса прогресса.
 *  Сохранена старая разметка (.timeline-header__center > mini-track >
 *  mini-fill) для совместимости с JS, который пишет
 *  --header-mini-progress на #headerMiniFill.
 * ==================================================================== */
.timeline-header__center {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.timeline-header__mini-track {
    position: relative;
    width: 100%;
    max-width: 280px;
    height: 4px;
    border-radius: 999px;
    background: var(--tlh-progress-track);
    overflow: hidden;
    /* Soft inner highlight как у Preline progress */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.timeline-header__mini-fill {
    position: absolute;
    inset: 0;
    width: var(--header-mini-progress, 0%);
    background: var(--tlh-progress-fill);
    border-radius: inherit;
    box-shadow: var(--tlh-progress-shadow);
    transition: width 320ms cubic-bezier(0.22, 61, 36, 1);
}

/* ====================================================================
 *  Кнопка-шеврон сворачивания/разворачивания.
 *  Сохранены .collapse-button и .collapse-button__icon — JS использует
 *  .collapse-button__icon (transform: rotate(180deg) при collapsed).
 *  Внешний вид полностью переработан в preline pill-стиле.
 * ==================================================================== */
.collapse-button {
    position: relative;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: var(--tlh-collapse-bg);
    border: 1px solid var(--tlh-collapse-border);
    color: var(--tlh-collapse-fg);
    box-shadow: var(--tlh-collapse-shadow);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex: 0 0 auto;
    transition: background 200ms ease, color 200ms ease,
                border-color 200ms ease, transform 200ms ease,
                box-shadow 200ms ease;
}

.collapse-button:hover,
.collapse-button:focus-visible {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--button-bg, #0d7bff) 16%, #ffffff) 0%,
        color-mix(in srgb, var(--button-bg, #0d7bff) 6%, #ffffff) 100%);
    border-color: color-mix(in srgb, var(--button-bg, #0d7bff) 45%, transparent);
    box-shadow: var(--tlh-collapse-shadow-hover);
    color: color-mix(in srgb, var(--button-bg, #0d7bff) 95%, #0f172a 5%);
    transform: translateY(-1px);
    outline: none;
}

.collapse-button:focus-visible {
    box-shadow: var(--tlh-collapse-shadow-hover),
                0 0 0 3px color-mix(in srgb, var(--button-bg, #0d7bff) 30%, transparent);
}

.collapse-button:active {
    transform: translateY(0) scale(0.94);
}

.collapse-button__icon {
    font-size: 12px;
    line-height: 1;
    transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.timeline-container.collapsed .collapse-button__icon {
    transform: rotate(180deg);
}

.timeline-container.collapsed .collapse-button {
    animation: tlh-collapse-pulse 2.4s ease-in-out infinite;
}

@keyframes tlh-collapse-pulse {
    0%, 100% {
        box-shadow: var(--tlh-collapse-shadow),
                    0 0 0 0 color-mix(in srgb, var(--button-bg, #0d7bff) 30%, transparent);
    }
    50% {
        box-shadow: var(--tlh-collapse-shadow),
                    0 0 0 6px color-mix(in srgb, var(--button-bg, #0d7bff) 0%, transparent);
    }
}

@media (prefers-reduced-motion: reduce) {
    .collapse-button { transition: none; }
    .timeline-container.collapsed .collapse-button { animation: none; }
}

/* Тёмная тема: лёгкая перекраска hover-кнопки */
.dark-theme .collapse-button:hover,
.dark-theme .collapse-button:focus-visible {
    background: linear-gradient(135deg,
        rgba(56, 189, 248, 0.24) 0%,
        rgba(56, 189, 248, 0.08) 100%);
    border-color: rgba(56, 189, 248, 0.5);
    color: #e0f2fe;
}

/* ====================================================================
 *  Мобильная адаптация (≤720px).
 *  Скрываем метки и крупные украшения, оставляем только критичные
 *  элементы: time-chip, мини-полосу и кнопку-шеврон.
 *  Это совпадает с уже существующим адаптивом в style.css, но
 *  выровнено под новую структуру.
 * ==================================================================== */
@media (max-width: 720px) {
    .timeline-header {
        padding: 6px 8px;
        gap: 8px;
        border-radius: 11px;
    }

    .timeline-header__label {
        display: none;
    }

    .timeline-header__progress {
        padding: 2px 6px;
        font-size: 10.5px;
    }

    .timeline-header__progress .progress-display {
        font-size: 11px;
    }

    .timeline-header__center {
        padding: 0 2px;
    }

    .timeline-header__mini-track {
        max-width: none;
    }

    .timeline-header__time-chip {
        padding: 4px 8px 4px 6px;
    }

    .timeline-header__time {
        font-size: 12px;
    }

    .collapse-button {
        width: 28px;
        height: 28px;
        border-radius: 9px;
    }
}

@media (max-width: 380px) {
    .timeline-header__progress {
        display: none;
    }
}