/* ── нижняя панель: сейчас играет, кнопки, поиск ─────────────── */

.dock {
    position: relative;
    z-index: 15;

    width: 100%;
    max-width: 720px;
    margin-inline: auto;

    display: flex;
    align-items: center;
    gap: 10px;
    /* снизу запас: сюда заходит зона захвата прогресса */
    padding: 6px 12px 18px;
}

/* Мини-обложка играющего трека. Уезжает «квадратиком в угол», когда
   сам конверт ушёл из кадра или скрыт поиском; тап — вернуться к нему.
   Отрицательный отступ схлопывает её место, пока она спрятана. */
.dock__cover {
    width: var(--tap);
    height: var(--tap);
    flex: none;
    margin-right: calc(-1 * var(--tap) - 10px);
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
    background: var(--surface-raised);

    opacity: 0;
    visibility: hidden;
    transform: translate(-12px, 8px) scale(.6);
    transition: margin-right var(--dur-base) var(--ease-out),
                opacity var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out),
                visibility 0s linear var(--dur-base);
}
.dock__cover img { width: 100%; height: 100%; object-fit: cover; }

.dock--cover .dock__cover {
    margin-right: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}

.dock__now {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 2px;
    padding: 4px 0;

    border: 0;
    background: none;
    text-align: left;
}
.dock__title,
.dock__meta {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.dock__title { font-size: 15px; font-weight: 500; }
.dock__meta { font-size: 13px; color: var(--muted); min-height: 1.2em; }
.dock--idle .dock__title { color: var(--muted); font-weight: 400; }

.dock__actions {
    display: flex;
    gap: 8px;
}

/* ── поиск: встаёт на место подписи ───────────────────────────── */
.search {
    flex: 1;
    min-width: 0;
    height: var(--tap);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 2px 0 14px;

    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
}
.search:focus-within { border-color: var(--line-strong); }
.search__icon { width: 18px; height: 18px; color: var(--muted); }

.search__input {
    flex: 1;
    width: 0;          /* у input есть «родная» ширина — она ломала раскладку */
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    outline: none;
    /* 16px, не меньше: иначе iOS приближает страницу при фокусе */
    font-size: 16px;
}
.search__input::placeholder { color: var(--faint); }
.search__input::-webkit-search-cancel-button { display: none; }

.dock--search .dock__now,
.dock--search [data-action="search"],
.dock--search [data-action="discover"],
.dock--search [data-action="add"] { display: none; }
.dock__actions [hidden] { display: none; }

/* ── «Скачать из сети»: над панелью, пока открыт поиск ──────────
   Абсолютом, чтобы не двигать панель и полку: список появляется
   и исчезает поверх. Высота ограничена — найденное на полке
   остаётся видно выше. */
.suggest {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: calc(100% - 6px);

    max-height: min(46svh, 380px);
    overflow-y: auto;
    overscroll-behavior: contain;

    display: grid;
    gap: 2px;
    padding: 6px 12px;

    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 -8px 24px var(--backdrop);
}
.suggest[hidden] { display: none; }

.suggest__more {
    min-height: var(--tap);
    padding: 0 4px;
    border: 0;
    background: none;
    text-align: left;
    font-size: 15px;
    text-decoration: underline;
    text-decoration-color: var(--line);
    text-underline-offset: 4px;
}
.suggest__more[hidden] { display: none; }

.suggest__note { font-size: 13px; line-height: 1.45; color: var(--muted); padding: 4px; }
.suggest__note:empty { display: none; }

.suggest__list { display: grid; padding: 0; list-style: none; }
.suggest__list:empty { display: none; }

.suggest__item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 60px;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 50%, transparent);
}
.suggest__item:last-child { border-bottom: 0; }

.suggest__cover {
    width: 44px;
    height: 44px;
    flex: none;
    object-fit: cover;
    border-radius: 3px;
    background: var(--surface-raised);
}
.suggest__text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.suggest__meta { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* названия роликов длинные — две строки, чтобы было из чего выбрать */
.suggest__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-size: 15px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.suggest__meta { font-size: 13px; color: var(--muted); }

/* вкладки «Spotify | YouTube» — наверху списка */
.suggest__tabs { padding: 4px 0 6px; }
.suggest__tabs[hidden] { display: none; }
.suggest__tabs label { min-height: 36px; padding: 0 14px; }

/* превью ролика — 16:9 и ссылкой на YouTube */
.suggest__video { flex: none; display: block; border-radius: 3px; }
.suggest__video .suggest__cover { width: 72px; height: auto; aspect-ratio: 16 / 9; }

/* ▶ послушать: пока сервер ищет звук — мягко мигает */
.suggest__listen[aria-pressed="true"] { color: var(--fg); }
.suggest__listen--loading svg { animation: suggest-pulse 900ms ease-in-out infinite alternate; }
@keyframes suggest-pulse { from { opacity: 1; } to { opacity: .3; } }
:root[data-motion="reduce"] .suggest__listen--loading svg { animation: none; opacity: .5; }