/* ============================================================
   ADR-042 — Audio Library: свёрнутая плашка вместо развёрнутой карточки
   ------------------------------------------------------------
   Скрытие через max-height/opacity, НЕ через display:none:
   #audioBrowserContent и #audioMiniPlayer инициализируются в ui-panels.js
   при старте и меряют свои размеры — при display:none они получили бы нули.
   theme.css задаёт .audio-library с !important, поэтому перебиваем здесь.
   Подключается ПОСЛЕ theme.css.
   ============================================================ */

/* ---------- Свёрнутое состояние: плашка под форму btn-extra ---------- */
#audioLibrary.collapsed {
    min-height: 0 !important;
    max-height: 64px !important;
    padding: 0 !important;
    border-radius: var(--radius-xl) !important;
    overflow: hidden !important;
}

#audioLibrary.collapsed .audio-collapse-body {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    margin: 0;
}

/* ---------- Шапка-триггер ---------- */
.audio-toggle {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    padding: 0;
    transition: opacity 0.25s ease;
}

#audioLibrary.collapsed .audio-toggle {
    height: 64px;
    padding: 0 20px;
    margin-bottom: 0 !important;
}

.audio-toggle:hover {
    opacity: 0.75;
}

.audio-toggle-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.audio-toggle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.55);
    color: #8B5CF6;
}

.audio-toggle .section-title {
    margin: 0 !important;
}

.audio-toggle-right {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* Имя выбранного трека — видно только в свёрнутом виде */
.audio-now {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: 'Outfit', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.04);
    padding: 4px 11px;
    border-radius: var(--radius-full);
    display: none;
}

#audioLibrary.collapsed .audio-now {
    display: inline-block;
}

.audio-now.has-track {
    background: rgba(139, 92, 246, 0.12);
    border-color: rgba(139, 92, 246, 0.25);
    color: #8B5CF6;
}

/* Шеврон */
.audio-toggle-chevron {
    flex: 0 0 auto;
    color: var(--text-tertiary);
    transform: rotate(180deg);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

#audioLibrary.collapsed .audio-toggle-chevron {
    transform: rotate(0deg);
}

/* ---------- Тело карточки ---------- */
.audio-collapse-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    max-height: 2000px;
    opacity: 1;
    overflow: hidden;
    transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease;
}

/* ============================================================
   ADR-075 — Mix: тонкая полоса прокрутки
   ------------------------------------------------------------
   Контейнер Mix — #audioMixModal .modal-body (index.html, строка 1296:
   .modal-body с инлайновым overflow-y:auto, flex:1 1 auto, min-height:0).
   Именно этот инлайновый стиль и создаёт внутренний скролл, а сам
   index.html — файл только для чтения: высота и логика overflow
   не меняются, здесь только оформление полосы.
   Значения — по образцу theme.css: .retouch-scroll-area (scrollbar-width:
   thin, прозрачный трек) + .audio-browser-content (4px, thumb
   rgba(167,139,250,0.2), radius 10px).
   Подключается после theme.css (index.html, строка 27).
   ============================================================ */

/* ADR-075: Firefox — тонкая полоса */
#audioMixModal .modal-body {
    scrollbar-width: thin;
}

/* ADR-075: WebKit/Blink — полоса 4px, трек прозрачный */
#audioMixModal .modal-body::-webkit-scrollbar {
    width: 4px;
}

#audioMixModal .modal-body::-webkit-scrollbar-track {
    background: transparent;
}

#audioMixModal .modal-body::-webkit-scrollbar-thumb {
    background: rgba(167, 139, 250, 0.2);
    border-radius: 10px;
}

/* ADR-075b: в Chromium 121+ заданный scrollbar-width отменяет ВСЕ правила
   ::-webkit-scrollbar. Поэтому цвет задаётся стандартным scrollbar-color —
   он же работает в Firefox. Webkit-блок выше остаётся для старых движков. */
#audioMixModal .modal-body {
    scrollbar-width: thin;
    scrollbar-color: rgba(167, 139, 250, 0.35) transparent;
}