/* === ПЛЕЕР ШЁПОТ ЛЕСА (V2) === */

.fox-player {
    position: fixed;
    /* Позиция самого плеера на экране */
    top: 120px;
    left: 30px;
    z-index: 1500;
    transition: opacity 0.5s, transform 0.5s;
    font-family: 'Montserrat', sans-serif;
    
    /* Отключаем выделение текста при кликах */
    user-select: none; 
}

/* Скрываем при модалках */
body.modal-open .fox-player {
    opacity: 0; pointer-events: none;
}

/* ОСНОВА (ФОН) */
.player-base {
    /* РАЗМЕР ФОНА */
    width: 320px;
    height: 320px;
    
    position: relative;
    background-image: url('../img/ui/player_base.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    
    /* СТАТИЧНОЕ СВЕЧЕНИЕ (Без мигания) */
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.4));
}

/* ОБЩИЙ СТИЛЬ ДЛЯ ВСЕХ КНОПОК-КАРТИНОК */
.p-btn {
    position: absolute;
    background-color: transparent;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    cursor: pointer;
    transition: transform 0.2s, filter 0.2s;
    z-index: 10;
}
.p-btn:hover { transform: scale(1.1); filter: drop-shadow(0 0 5px #ffd700); }
.p-btn:active { transform: scale(0.95); }

/* --- 1. ЛИСТИК (ЦЕНТР / MUTE) --- */
.btn-center {
    background-image: url('../img/ui/player/btn_mute.png');
    
    /* РАЗМЕР И ПОЗИЦИЯ ЛИСТИКА */
    width: 80px;  height: 80px;
    top: 50%;     left: 50%;
    margin-top: -35px; margin-left: -40px; /* Центровка */
}
/* Если звук выключен - делаем листик серым или полупрозрачным */
.btn-center.muted {
    filter: grayscale(100%) opacity(0.7);
}

/* --- ЛЕВАЯ И ПРАВАЯ КНОПКИ (СБРОС И НАСТРОЙКА) --- */

/* Общие настройки для боковых кнопок, чтобы они были близнецами */
#fox-radio .btn-side {
    width: 40px !important;
    height: 40px !important;
    top: 50%;
    margin-top: -20px;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-color: transparent !important; /* Убираем оранжевый фон */
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    opacity: 1 !important;
}

/* Кнопка НАЗАД */
#fox-radio .btn-prev {
    background-image: url('../img/ui/player/btn_prev.png');
    left: 20%;
}

/* Кнопка ВПЕРЕД (Настраиваем точно так же) */
#fox-radio .btn-next {
    background-image: url('../img/ui/player/btn_next.png');
    right: 20%;
}

/* Эффект наведения для обеих кнопок */
#fox-radio .btn-side:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 0 5px #ffd700);
    background-color: transparent !important; /* Страховка от оранжевого */
}

#fox-radio .btn-side:active {
    transform: scale(0.95);
}

/* --- 3. ИНФО О ТРЕКЕ (СВЕРХУ) --- */
.track-info-display {
    position: absolute;
    width: 60%;
    left: 20%; 
    text-align: center;
    
    /* Позиция сверху */
    top: 27%; /* (РЕГУЛИРОВАТЬ ЗДЕСЬ) */
    
    text-shadow: 0 0 5px #000, 0 0 10px #000; /* Тень чтобы читалось на ветках */
}
.t-title { color: #ffd700; font-size: 13px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-author { color: #ccc; font-size: 11px; }

/* --- 4. ГРОМКОСТЬ (СНИЗУ) --- */
.volume-area {
    position: absolute;
    width: 50%;
    left: 25%;
    
    /* Позиция снизу под листиком */
    top: 63%; /* (РЕГУЛИРОВАТЬ ЗДЕСЬ) */
    
    display: flex; align-items: center; gap: 5px;
}
.vol-icon {
    width: 20px; height: 20px; /* Размер иконки динамика */
}
/* Ползунок */
#volume-slider {
    flex: 1; height: 4px; border-radius: 2px;
    background: rgba(255, 255, 255, 0.3);
    accent-color: #ffd700; cursor: pointer;
}

/* --- 5. НИЖНИЕ КНОПКИ (ТЕПЕРЬ ПО ОТДЕЛЬНОСТИ) --- */

/* Общий размер для нижних кнопок */
.btn-small {
    width: 35px; height: 35px; /* Чуть увеличил размер */
    position: absolute; /* Важно для ручной расстановки */
}

/* Кнопка ШАФЛ (Перемешивание) - Слева снизу */
#shuffle-btn {
    background-image: url('../img/ui/player/btn_shuffle.png');
    
    /* КООРДИНАТЫ */
    top: 70%;  /* Высота */
    left: 38%; /* Отступ слева */
}

/* Кнопка ПЛЕЙЛИСТ (Список) - Справа снизу */
#playlist-toggle {
    background-image: url('../img/ui/player/btn_list.png');
    
    /* КООРДИНАТЫ */
    top: 70%;   /* Высота */
    left: auto; /* Сбрасываем лево */
    right: 38%; /* Отступ справа */
}

/* Активный шафл (светится зеленым) */
#shuffle-btn.active { filter: drop-shadow(0 0 5px #4caf50); }


/* --- ВЫПАДАЮЩИЙ СПИСОК (Исправление бага с открытием) --- */
.playlist-dropdown {
    position: absolute;
    /* Сдвигаем список вниз, под плеер */
    top: 320px; 
    left: 20px; 
    
    width: 250px;
    background: rgba(15, 10, 5, 0.95);
    border: 1px solid #d48c28;
    border-radius: 10px;
    padding: 15px;
    
    /* Скрыт по умолчанию */
    display: none; 
    
    color: #e0d8c3;
    z-index: 2000; /* ОЧЕНЬ ВАЖНО: Делаем выше, чем сам плеер */
    box-shadow: 0 10px 40px rgba(0,0,0,0.9);
}

/* Класс, который добавляет JS при клике */
.playlist-dropdown.show {
    display: block !important; /* Принудительно показываем */
}

.playlist-dropdown h3 { margin: 0 0 10px 0; color: #d48c28; font-size: 14px; }
#playlist-ul { list-style: none; padding: 0; margin: 0; max-height: 250px; overflow-y: auto; }

.track-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px; border-bottom: 1px solid rgba(255,255,255,0.05);
    cursor: pointer; font-size: 12px;
}
.track-item:hover { background: rgba(212, 140, 40, 0.2); }
.track-item.active { color: #ffd700; font-weight: bold; }

/* СПИСОК ТРЕКОВ */
#playlist-ul {
    list-style: none;
    padding: 0;
    margin: 0;
    
    /* --- НАСТРОЙКА ВЫСОТЫ --- */
    /* Один трек занимает примерно 35px. 
       15 треков * 35px = 525px. 
       Ставим ограничение: */
    max-height: 350px; 
    
    /* Если треков больше — появляется скролл */
    overflow-y: auto; 
}

/* СТИЛИЗАЦИЯ ПОЛОСЫ ПРОКРУТКИ (ЧТОБЫ БЫЛА КРАСИВОЙ) */
/* Ширина полосы */
#playlist-ul::-webkit-scrollbar {
    width: 6px;
}

/* Фон дорожки (темный) */
#playlist-ul::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    margin: 5px 0; /* Отступы сверху и снизу */
}

/* Сам ползунок (оранжевый) */
#playlist-ul::-webkit-scrollbar-thumb {
    background: #d48c28;
    border-radius: 3px;
}

/* Ползунок при наведении */
#playlist-ul::-webkit-scrollbar-thumb:hover {
    background: #ffd700;
}

/* --- КНОПКИ УПРАВЛЕНИЯ ВИДИМОСТЬЮ --- */

/* 1. Кнопка "Свернуть" на самом плеере */
.btn-minimize {
    top: 10px;
    right: 30px; /* Положение внутри круга */
    width: 30px; height: 30px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 18px;
    font-weight: bold;
    z-index: 100;
}
.btn-minimize:hover {
    color: #ffd700;
    transform: scale(1.2);
}

/* 2. Кнопка "Лисья Морда" в шапке */
.header-radio-btn {
    background: transparent;
    border: 2px solid #d48c28;
    border-radius: 50%;
    width: 45px; height: 45px;
    cursor: pointer;
    overflow: hidden;
    margin-left: 20px; /* Отступ от логотипа */
    
    /* По умолчанию скрыта (пока плеер виден) */
    display: none; 
    transition: transform 0.3s, box-shadow 0.3s;
}
.header-radio-btn img {
    width: 100%; height: 100%; object-fit: cover;
}
.header-radio-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 10px #ffd700;
}

/* --- СОСТОЯНИЕ "СВЕРНУТ" (Добавляет JS) --- */
/* Когда плеер свернут: */
body.player-minimized .fox-player {
    transform: translateX(-200%); /* Уезжает влево за экран */
    opacity: 0;
    pointer-events: none; /* Чтобы нельзя было кликнуть по невидимке */
}

/* Когда плеер свернут -> Показываем кнопку в шапке */
body.player-minimized .header-radio-btn {
    display: block; /* Или inline-flex */
    animation: fadeIn 0.5s;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }


/* --- МОБИЛЬНАЯ ВЕРСИЯ (Адаптив) --- */
@media (max-width: 768px) {
    
    /* 1. Уменьшаем размер плеера */
    .player-base {
        width: 320px; height: 320px; /* Было 320px */
    }
    
    /* Корректируем отступы для уменьшенного размера */
    .fox-player { top: -10px; left: -10px; }
    
    /* Сдвигаем элементы внутри */
    .track-info-display { top: 24%; font-size: 0.8em; width: 55%; left: 22%; }
    .bottom-controls { top: 70%; width: 55%; left: 22%; }
    .volume-area { top: 62%; width: 30%; left: 27%; }
    
    .btn-center { width: 50px; height: 50px; margin-top: -25px; margin-left: -25px; }
    #fox-radio .btn-side { width: 35px !important; height: 35px !important; }

    /* 2. СКРЫТИЕ ПО УМОЛЧАНИЮ (CSS-First) */
    /* Плеер скрыт, пока JS явно не скажет "показать" */
    .fox-player {
        transform: translateX(-200%);
        opacity: 0;
        pointer-events: none;
    }

    /* Когда мы нажимаем кнопку в меню, JS добавит класс .mobile-show */
    body.player-active .fox-player {
        transform: translateX(0);
        opacity: 1;
        pointer-events: auto;
    }

    /* 3. КНОПКА В ШАПКЕ */
    /* Видна всегда, если плеер скрыт */
    .header-radio-btn {
        display: flex !important;
        width: 40px !important; height: 40px !important;
        border: 2px solid #d48c28;
    }
    
    /* Если плеер открыт — кнопку в шапке можно скрыть или оставить */
    body.player-active .header-radio-btn {
        opacity: 0.5; /* Например, делаем полупрозрачной */
    }
}