/* --- Root Variables for Music Player --- */
:root {
    --music-accent-light: #64748b; /* slate-500 */
    --music-accent-dark: #94a3b8;  /* slate-400 */
    --music-progress-bg-light: #e2e8f0; /* slate-200 */
    --music-progress-bg-dark: #334155; /* slate-700 */
    --music-list-hover-light: #f1f5f9; /* slate-100 */
    --music-list-hover-dark: #334155; /* slate-700 */
}

/* --- Main Container & Positioning --- */
/* Ditempatkan di atas chat bubble */
#music-player-container {
    position: fixed;
    bottom: 35px;
    left: 30px;
    z-index: 999;
    font-family: "Poppins", sans-serif;
}

/* --- Trigger Button --- */
#player-trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 15px 8px 8px;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid rgba(148, 163, 184, 0.2);
}

/* --- Spinning Disc Logo --- */
#player-logo {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}
#player-logo .disc {
    width: 100%; height: 100%;
    background-color: #2d3748; /* slate-800 */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
    animation: spin 3s linear infinite;
    animation-play-state: paused;
}
#music-player-container.playing #player-logo .disc {
    animation-play-state: running;
}
#player-logo .disc-label {
    width: 35%;
    height: 35%;
    background-color: var(--music-accent-light);
    border-radius: 50%;
    border: 2px solid #1a202c; /* slate-900 */
}
#music-player-container[data-theme="dark"] #player-logo .disc-label {
     background-color: var(--music-accent-dark);
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* --- Playlist Popup Window --- */
#playlist-popup {
    position: absolute;
    bottom: calc(100% + 15px);
    left: 0;
    width: 320px;
    border-radius: 12px;
    padding: 15px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    display: none;
    flex-direction: column;
    gap: 15px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
#playlist-popup.show {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
}
#close-popup {
    background: none; border: none; font-size: 24px; cursor: pointer; line-height: 1;
}

/* --- Now Playing & Controls --- */
#now-playing { display: flex; align-items: center; gap: 15px; }
#album-cover { width: 70px; height: 70px; object-fit: cover; }
.song-info h5, .song-info p { margin: 0; }

.progress-container {
    background-color: var(--music-progress-bg-light);
    height: 6px; border-radius: 3px; cursor: pointer; width: 100%;
}
#music-player-container[data-theme="dark"] .progress-container {
    background-color: var(--music-progress-bg-dark);
}

.progress-bar {
    background: linear-gradient(90deg, #64748b 0%, #94a3b8 100%);
    height: 100%; width: 0%; border-radius: 3px; transition: width 0.1s linear;
}
#music-player-container[data-theme="dark"] .progress-bar {
    background: linear-gradient(90deg, #94a3b8 0%, #cbd5e1 100%);
}

.time-stamps { display: flex; justify-content: space-between; margin-top: -10px; }
.controls { display: flex; justify-content: center; align-items: center; gap: 20px; }
.control-btn { background: none; border: none; font-size: 16px; cursor: pointer; transition: color 0.2s ease; }
.control-btn:hover { color: var(--music-accent-light); }
#music-player-container[data-theme="dark"] .control-btn:hover { color: var(--music-accent-dark); }
.play-pause {
    font-size: 26px;
    color: var(--music-accent-light);
}
#music-player-container[data-theme="dark"] .play-pause { color: var(--music-accent-dark); }
.play-pause:hover { transform: scale(1.1); }

/* --- Playlist --- */
#playlist { list-style: none; padding: 0; margin: 0; max-height: 180px; overflow-y: auto; }
#playlist li {
    display: flex; align-items: center; gap: 10px; padding: 8px;
    border-radius: 5px; cursor: pointer; transition: background-color 0.2s ease;
}
#playlist li:hover { background-color: var(--music-list-hover-light); }
#music-player-container[data-theme="dark"] #playlist li:hover { background-color: var(--music-list-hover-dark); }

#playlist li.playing {
    background-color: var(--music-accent-light);
    color: white;
}
#music-player-container[data-theme="dark"] #playlist li.playing {
    background-color: var(--music-accent-dark);
    color: #1e293b; /* slate-800 */
}

#playlist li.playing .list-song-artist { color: white; opacity: 0.8; }
#music-player-container[data-theme="dark"] #playlist li.playing .list-song-artist { color: #1e293b; }

.list-cover { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; }
.list-song-info h6, .list-song-info p { margin: 0; }
.list-song-title { font-size: 14px; font-weight: 500; }
.list-song-artist { font-size: 12px; color: inherit; }

/* Scrollbar styling */
#playlist::-webkit-scrollbar { width: 5px; }
#playlist::-webkit-scrollbar-track { background: transparent; }
#playlist::-webkit-scrollbar-thumb { background-color: #94a3b8; border-radius: 10px; }
#music-player-container[data-theme="dark"] #playlist::-webkit-scrollbar-thumb { background-color: #475569; }

/* --- Responsive for Mobile --- */
@media (max-width: 768px) {
    #music-player-container {
        bottom: 30px;
        left: 15px;
    }
    #playlist-popup {
        width: calc(100vw - 30px);
        max-width: 320px;
    }
}