From 5b79ca1e881ab2fe8289c5bd383bda8cee69b38d Mon Sep 17 00:00:00 2001
From: Broque Thomas <26755000+Nezreka@users.noreply.github.com>
Date: Mon, 9 Mar 2026 08:02:05 -0700
Subject: [PATCH] redesign the media player in sidebar

---
 webui/index.html        |  178 +++++-
 webui/static/mobile.css |   29 +
 webui/static/script.js  |  807 +++++++++++++++++++++++--
 webui/static/style.css  | 1232 +++++++++++++++++++++++++++++++--------
 4 files changed, 1911 insertions(+), 335 deletions(-)

diff --git a/webui/index.html b/webui/index.html
index 4fe15217..7dc7ac65 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -138,6 +138,20 @@
 
             <!-- Media Player Section -->
             <div class="media-player" id="media-player">
+                <!-- Progress bar at top of player -->
+                <div class="player-top-progress">
+                    <div class="progress-bar-container">
+                        <div class="progress-track">
+                            <div class="progress-fill" id="progress-fill"></div>
+                        </div>
+                        <input type="range" class="progress-bar" id="progress-bar" min="0" max="100" value="0" step="0.1">
+                    </div>
+                    <div class="time-display">
+                        <span class="current-time" id="current-time">0:00</span>
+                        <span class="total-time" id="total-time">0:00</span>
+                    </div>
+                </div>
+
                 <!-- Loading Animation -->
                 <div class="loading-animation hidden" id="loading-animation">
                     <div class="loading-bar">
@@ -146,47 +160,46 @@
                     <div class="loading-text">0%</div>
                 </div>
 
-                <!-- Header (always visible) -->
+                <!-- Track info row -->
                 <div class="media-header">
+                    <img class="sidebar-album-art" id="sidebar-album-art" src="" alt="">
                     <div class="media-info">
                         <div class="track-title" id="track-title">No track</div>
                         <div class="artist-name" id="artist-name">Unknown Artist</div>
-                    </div>
-                    <button class="play-button" id="play-button" disabled>▷</button>
-                </div>
-
-                <!-- Expanded Content (hidden initially) -->
-                <div class="media-expanded hidden" id="media-expanded">
-                    <div class="album-name" id="album-name">Unknown Album</div>
-
-                    <!-- Progress Bar and Time Display -->
-                    <div class="progress-section">
-                        <div class="time-display">
-                            <span class="current-time" id="current-time">0:00</span>
-                            <span class="time-separator">/</span>
-                            <span class="total-time" id="total-time">0:00</span>
-                        </div>
-                        <div class="progress-bar-container">
-                            <div class="progress-track">
-                                <div class="progress-fill" id="progress-fill"></div>
-                            </div>
-                            <input type="range" class="progress-bar" id="progress-bar" min="0" max="100" value="0"
-                                step="0.1">
-                        </div>
-                    </div>
-
-                    <div class="media-controls">
-                        <div class="volume-control">
-                            <span class="volume-icon">🔊</span>
-                            <input type="range" class="volume-slider" id="volume-slider" min="0" max="100" value="70">
-                        </div>
-                        <button class="stop-button" id="stop-button" disabled>⏹</button>
+                        <div class="album-name header-album" id="album-name">Unknown Album</div>
                     </div>
                 </div>
 
+                <!-- Controls row (always visible) -->
+                <div class="media-controls-row">
+                    <button class="play-button" id="play-button" disabled>
+                        <svg class="play-icon" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
+                        <svg class="pause-icon" viewBox="0 0 24 24" fill="currentColor" style="display:none"><path d="M6 4h4v16H6zm8 0h4v16h-4z"/></svg>
+                    </button>
+                    <div class="volume-control">
+                        <span class="volume-icon">
+                            <svg viewBox="0 0 24 24" fill="currentColor" width="14" height="14"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/></svg>
+                        </span>
+                        <input type="range" class="volume-slider" id="volume-slider" min="0" max="100" value="70">
+                    </div>
+                    <button class="stop-button" id="stop-button" disabled>
+                        <svg viewBox="0 0 24 24" fill="currentColor" width="12" height="12"><rect x="6" y="6" width="12" height="12" rx="1.5"/></svg>
+                    </button>
+                    <button class="expand-hint" aria-label="Expand player">
+                        <svg viewBox="0 0 16 16" fill="currentColor" width="12" height="12"><path d="M3 10l5 4 5-4" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
+                    </button>
+                </div>
+
+                <!-- Expanded Content (kept for backward compat, hidden) -->
+                <div class="media-expanded hidden" id="media-expanded"></div>
+
                 <!-- No Track Message -->
                 <div class="no-track-message" id="no-track-message">
-                    Start playing music to see controls
+                    <svg class="no-track-icon" viewBox="0 0 48 48" fill="none" width="28" height="28">
+                        <circle cx="24" cy="24" r="22" stroke="currentColor" stroke-width="1.5" opacity="0.25"/>
+                        <path d="M20 16l12 8-12 8z" fill="currentColor" opacity="0.2"/>
+                    </svg>
+                    <span>Play a track to get started</span>
                 </div>
             </div>
 
@@ -4068,6 +4081,107 @@
     <!-- Hidden HTML5 Audio Player for Streaming -->
     <audio id="audio-player" style="display: none;"></audio>
 
+    <!-- Expanded Now Playing Modal -->
+    <div class="np-modal-overlay hidden" id="np-modal-overlay">
+        <div class="np-modal">
+            <button class="np-close-btn" id="np-close-btn">&times;</button>
+            <div class="np-body">
+                <!-- Left: album art + track info -->
+                <div class="np-left">
+                    <div class="np-album-art-container">
+                        <img class="np-album-art hidden" id="np-album-art" src="" alt="Album Art">
+                        <div class="np-album-art-placeholder" id="np-album-art-placeholder">
+                            <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                                <circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="3"/><line x1="12" y1="2" x2="12" y2="5"/><line x1="12" y1="19" x2="12" y2="22"/>
+                            </svg>
+                        </div>
+                    </div>
+                    <div class="np-track-info">
+                        <div class="np-track-title" id="np-track-title">No track</div>
+                        <div class="np-artist-name" id="np-artist-name">Unknown Artist</div>
+                        <div class="np-album-name" id="np-album-name">Unknown Album</div>
+                        <div class="np-format-badges" id="np-format-badges"></div>
+                    </div>
+                </div>
+                <!-- Right: controls -->
+                <div class="np-right">
+                    <div class="np-progress-section">
+                        <div class="np-progress-bar-container">
+                            <div class="np-progress-track">
+                                <div class="np-progress-fill" id="np-progress-fill"></div>
+                            </div>
+                            <input type="range" class="np-progress-bar" id="np-progress-bar" min="0" max="100" value="0" step="0.1">
+                        </div>
+                        <div class="np-time-display">
+                            <span class="np-current-time" id="np-current-time">0:00</span>
+                            <span class="np-total-time" id="np-total-time">0:00</span>
+                        </div>
+                    </div>
+                    <div class="np-controls-row">
+                        <button class="np-btn np-btn-shuffle" id="np-shuffle-btn" title="Shuffle">
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 3 21 3 21 8"/><line x1="4" y1="20" x2="21" y2="3"/><polyline points="21 16 21 21 16 21"/><line x1="15" y1="15" x2="21" y2="21"/><line x1="4" y1="4" x2="9" y2="9"/></svg>
+                        </button>
+                        <button class="np-btn np-btn-prev" id="np-prev-btn" title="Previous" disabled>
+                            <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/></svg>
+                        </button>
+                        <button class="np-btn np-btn-play" id="np-play-btn" title="Play">
+                            <svg class="np-icon-play" width="28" height="28" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
+                            <svg class="np-icon-pause hidden" width="28" height="28" viewBox="0 0 24 24" fill="currentColor"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
+                        </button>
+                        <button class="np-btn np-btn-next" id="np-next-btn" title="Next" disabled>
+                            <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/></svg>
+                        </button>
+                        <button class="np-btn np-btn-repeat" id="np-repeat-btn" title="Repeat">
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
+                        </button>
+                    </div>
+                    <div class="np-volume-row">
+                        <button class="np-mute-btn" id="np-mute-btn" title="Mute">
+                            <svg class="np-icon-vol" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"/></svg>
+                            <svg class="np-icon-muted hidden" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><line x1="23" y1="9" x2="17" y2="15"/><line x1="17" y1="9" x2="23" y2="15"/></svg>
+                        </button>
+                        <div class="np-volume-slider-container">
+                            <div class="np-volume-track">
+                                <div class="np-volume-fill" id="np-volume-fill"></div>
+                            </div>
+                            <input type="range" class="np-volume-slider" id="np-volume-slider" min="0" max="100" value="70">
+                        </div>
+                    </div>
+                    <div class="np-stop-row">
+                        <button class="np-btn np-btn-stop" id="np-stop-btn" title="Stop playback">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><rect x="4" y="4" width="16" height="16" rx="2"/></svg>
+                            <span>Stop</span>
+                        </button>
+                    </div>
+                    <div class="np-visualizer" id="np-visualizer">
+                        <div class="np-viz-bar"></div>
+                        <div class="np-viz-bar"></div>
+                        <div class="np-viz-bar"></div>
+                        <div class="np-viz-bar"></div>
+                        <div class="np-viz-bar"></div>
+                        <div class="np-viz-bar"></div>
+                        <div class="np-viz-bar"></div>
+                    </div>
+                </div>
+            </div>
+            <!-- Queue Panel -->
+            <div class="np-queue-panel" id="np-queue-panel">
+                <div class="np-queue-header">
+                    <button class="np-queue-toggle" id="np-queue-toggle" title="Toggle queue">
+                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>
+                        <span>Queue</span>
+                        <span class="np-queue-count" id="np-queue-count"></span>
+                    </button>
+                    <button class="np-queue-clear-btn" id="np-queue-clear" title="Clear queue">Clear</button>
+                </div>
+                <div class="np-queue-body hidden" id="np-queue-body">
+                    <div class="np-queue-empty" id="np-queue-empty">Queue is empty</div>
+                    <div class="np-queue-list" id="np-queue-list"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <!-- Matched Download Modal -->
     <div class="modal-overlay hidden" id="matching-modal-overlay">
         <div class="matching-modal" id="matching-modal">
diff --git a/webui/static/mobile.css b/webui/static/mobile.css
index 5dc75e67..3612725c 100644
--- a/webui/static/mobile.css
+++ b/webui/static/mobile.css
@@ -2214,4 +2214,33 @@
     .enhanced-bulk-modal {
         width: calc(100vw - 32px);
     }
+    /* Now Playing Modal */
+    .np-modal {
+        width: 100vw;
+        max-width: none;
+        max-height: none;
+        height: 100vh;
+        border-radius: 0;
+    }
+    .np-body {
+        flex-direction: column;
+        padding: 48px 24px 24px;
+        gap: 24px;
+        overflow-y: auto;
+        max-height: 100vh;
+    }
+    .np-album-art-container {
+        width: 220px;
+        height: 220px;
+        margin: 0 auto;
+    }
+    .np-track-info {
+        width: 100%;
+    }
+    .np-track-title {
+        font-size: 18px;
+    }
+    .np-volume-slider-container {
+        width: 120px;
+    }
 }
\ No newline at end of file
diff --git a/webui/static/script.js b/webui/static/script.js
index 674de1b7..5d80db55 100644
--- a/webui/static/script.js
+++ b/webui/static/script.js
@@ -1270,6 +1270,7 @@ function initApp() {
     initializeNavigation();
     initializeMobileNavigation();
     initializeMediaPlayer();
+    initExpandedPlayer();
     initializeSyncPage();
     initializeWatchlist();
     initializeDownloadManagerToggle();
@@ -1621,8 +1622,7 @@ function initializeMediaPlayer() {
         volumeSlider.value = 70;
     }
 
-    // Track title click - toggle expansion
-    trackTitle.addEventListener('click', toggleMediaPlayerExpansion);
+    // Track title click handled by initExpandedPlayer's media-player click handler
 
     // Media controls
     playButton.addEventListener('click', handlePlayPause);
@@ -1647,22 +1647,8 @@ function initializeMediaPlayer() {
 }
 
 function toggleMediaPlayerExpansion() {
-    if (!currentTrack) return;
-
-    const mediaPlayer = document.getElementById('media-player');
-    const expandedContent = document.getElementById('media-expanded');
-    const noTrackMessage = document.getElementById('no-track-message');
-
-    mediaPlayerExpanded = !mediaPlayerExpanded;
-
-    if (mediaPlayerExpanded) {
-        mediaPlayer.style.minHeight = '145px';
-        expandedContent.classList.remove('hidden');
-        noTrackMessage.classList.add('hidden');
-    } else {
-        mediaPlayer.style.minHeight = '85px';
-        expandedContent.classList.add('hidden');
-    }
+    // No-op: controls are always visible in the new layout.
+    // Kept for backward compatibility with any callers.
 }
 
 function extractTrackTitle(filename) {
@@ -1710,10 +1696,10 @@ function setTrackInfo(track) {
     // Hide no track message
     document.getElementById('no-track-message').classList.add('hidden');
 
-    // Auto-expand if collapsed
-    if (!mediaPlayerExpanded) {
-        toggleMediaPlayerExpansion();
-    }
+    // Sync expanded player and media session
+    updateNpTrackInfo();
+    updateMediaSessionMetadata();
+    updateMediaSessionPlaybackState();
 }
 
 function checkAndEnableScrolling(element, text) {
@@ -1744,18 +1730,7 @@ function checkAndEnableScrolling(element, text) {
 
 
 function clearTrack() {
-    // Force collapse the media player BEFORE clearing currentTrack
-    if (mediaPlayerExpanded) {
-        // Manually collapse since toggleMediaPlayerExpansion() needs currentTrack
-        mediaPlayerExpanded = false;
-        const mediaPlayer = document.getElementById('media-player');
-        const expandedContent = document.getElementById('media-expanded');
-
-        if (mediaPlayer) mediaPlayer.style.minHeight = '85px';
-        if (expandedContent) expandedContent.classList.add('hidden');
-    }
-
-    // Now clear track state
+    // Clear track state
     currentTrack = null;
     isPlaying = false;
 
@@ -1766,8 +1741,13 @@ function clearTrack() {
 
     document.getElementById('artist-name').textContent = 'Unknown Artist';
     document.getElementById('album-name').textContent = 'Unknown Album';
-    document.getElementById('play-button').textContent = '▷';
-    document.getElementById('play-button').disabled = true;
+    // Reset play button SVGs (don't use textContent — it destroys SVG children)
+    const clearPlayBtn = document.getElementById('play-button');
+    const clearPlayIcon = clearPlayBtn.querySelector('.play-icon');
+    const clearPauseIcon = clearPlayBtn.querySelector('.pause-icon');
+    if (clearPlayIcon) clearPlayIcon.style.display = '';
+    if (clearPauseIcon) clearPauseIcon.style.display = 'none';
+    clearPlayBtn.disabled = true;
     document.getElementById('stop-button').disabled = true;
 
     // Reset progress bar and time displays
@@ -1792,13 +1772,32 @@ function clearTrack() {
     // Show no track message
     document.getElementById('no-track-message').classList.remove('hidden');
 
+    // Reset queue state
+    npQueue = [];
+    npQueueIndex = -1;
+
+    // Sync expanded player and media session
+    updateNpTrackInfo();
+    updateNpPlayButton();
+    updateNpProgress();
+    renderNpQueue();
+    updateNpPrevNextButtons();
+    updateMediaSessionPlaybackState();
+    if (npModalOpen) closeNowPlayingModal();
+
     console.log('🧹 Track cleared and media player reset');
 }
 
 function setPlayingState(playing) {
     isPlaying = playing;
     const playButton = document.getElementById('play-button');
-    playButton.textContent = playing ? '⏸︎' : '▷';
+    // Toggle SVG icons (don't use textContent — it destroys SVG children)
+    const playIcon = playButton.querySelector('.play-icon');
+    const pauseIcon = playButton.querySelector('.pause-icon');
+    if (playIcon) playIcon.style.display = playing ? 'none' : '';
+    if (pauseIcon) pauseIcon.style.display = playing ? '' : 'none';
+    updateNpPlayButton();
+    updateMediaSessionPlaybackState();
 }
 
 async function handlePlayPause() {
@@ -1820,6 +1819,13 @@ function handleVolumeChange(event) {
     if (audioPlayer) {
         audioPlayer.volume = volume / 100;
     }
+
+    // Sync modal volume and clear mute state
+    npMuted = false;
+    const npVol = document.getElementById('np-volume-slider');
+    const npFill = document.getElementById('np-volume-fill');
+    if (npVol) npVol.value = volume;
+    if (npFill) npFill.style.width = volume + '%';
 }
 
 function handleProgressBarChange(event) {
@@ -1845,6 +1851,14 @@ function handleProgressBarChange(event) {
         if (currentTimeElement) {
             currentTimeElement.textContent = formatTime(newTime);
         }
+
+        // Sync modal progress
+        const npBar = document.getElementById('np-progress-bar');
+        const npFill = document.getElementById('np-progress-fill');
+        const npTime = document.getElementById('np-current-time');
+        if (npBar) npBar.value = progress;
+        if (npFill) npFill.style.width = progress + '%';
+        if (npTime) npTime.textContent = formatTime(newTime);
     } catch (error) {
         console.warn('⚠️ Seek failed:', error.message);
         // Reset progress bar to current position
@@ -1917,7 +1931,8 @@ async function startStream(searchResult) {
             artist: searchResult.artist || searchResult.username || 'Unknown Artist',
             album: searchResult.album || 'Unknown Album',
             username: searchResult.username,
-            filename: searchResult.filename
+            filename: searchResult.filename,
+            image_url: searchResult.image_url || searchResult.album_cover_url || null
         });
 
         showLoadingAnimation();
@@ -2262,11 +2277,6 @@ async function startAudioPlayback() {
                     noTrackMessage.classList.add('hidden');
                 }
 
-                // Ensure media player is expanded when playback starts
-                if (!mediaPlayerExpanded) {
-                    toggleMediaPlayerExpansion();
-                }
-
                 // Update volume to current slider value
                 const volumeSlider = document.getElementById('volume-slider');
                 if (volumeSlider) {
@@ -2410,6 +2420,9 @@ function updateAudioProgress() {
     if (totalTimeElement) {
         totalTimeElement.textContent = formatTime(audioPlayer.duration);
     }
+
+    // Sync expanded player modal
+    if (npModalOpen) updateNpProgress();
 }
 
 function onAudioEnded() {
@@ -2432,7 +2445,9 @@ function onAudioEnded() {
         currentTimeElement.textContent = '0:00';
     }
 
-    // TODO: Auto-advance to next track if queue exists
+    // Repeat-one is handled by audioPlayer.loop (set in handleNpRepeat)
+    // Auto-advance to next track if queue exists (guard against race conditions)
+    if (npQueue.length > 0 && !npLoadingQueueItem) { playNextInQueue(); return; }
 }
 
 function onAudioError(event) {
@@ -2593,6 +2608,664 @@ function canPlayAudioFormat(extension) {
     return isSupported;
 }
 
+// ===============================
+// EXPANDED NOW PLAYING MODAL
+// ===============================
+
+let npModalOpen = false;
+let npRepeatMode = 'off';     // 'off' | 'one'
+let npShuffleOn = false;
+let npQueue = [];
+let npQueueIndex = -1;
+let npMuted = false;
+let npPreMuteVolume = 70;
+let npMediaSessionThrottle = 0;
+let npLoadingQueueItem = false;
+
+function initExpandedPlayer() {
+    const closeBtn = document.getElementById('np-close-btn');
+    const overlay = document.getElementById('np-modal-overlay');
+    const playBtn = document.getElementById('np-play-btn');
+    const stopBtn = document.getElementById('np-stop-btn');
+    const shuffleBtn = document.getElementById('np-shuffle-btn');
+    const repeatBtn = document.getElementById('np-repeat-btn');
+    const muteBtn = document.getElementById('np-mute-btn');
+    const npProgressBar = document.getElementById('np-progress-bar');
+    const npVolumeSlider = document.getElementById('np-volume-slider');
+
+    if (!overlay) return;
+
+    // Close handlers
+    closeBtn.addEventListener('click', closeNowPlayingModal);
+    overlay.addEventListener('click', (e) => { if (e.target === overlay) closeNowPlayingModal(); });
+
+    // Control handlers
+    playBtn.addEventListener('click', () => { togglePlayback(); });
+    stopBtn.addEventListener('click', async () => { await handleStop(); closeNowPlayingModal(); });
+    shuffleBtn.addEventListener('click', handleNpShuffle);
+    repeatBtn.addEventListener('click', handleNpRepeat);
+    muteBtn.addEventListener('click', handleNpMuteToggle);
+
+    // Progress bar
+    npProgressBar.addEventListener('input', handleNpProgressBarChange);
+    npProgressBar.addEventListener('mousedown', () => { npProgressBar.dataset.seeking = 'true'; });
+    npProgressBar.addEventListener('mouseup', () => { delete npProgressBar.dataset.seeking; });
+
+    // Volume slider
+    npVolumeSlider.addEventListener('input', handleNpVolumeChange);
+
+    // Keyboard shortcuts (global)
+    document.addEventListener('keydown', handlePlayerKeyboardShortcuts);
+
+    // Make sidebar media player clickable to open modal
+    const mediaPlayer = document.getElementById('media-player');
+    if (mediaPlayer) {
+        mediaPlayer.style.cursor = 'pointer';
+        mediaPlayer.addEventListener('click', (e) => {
+            // Don't open modal when clicking controls (let expand-hint through)
+            if (e.target.closest('.play-button, .stop-button, .volume-slider, .volume-control, .progress-bar, .volume-icon') && !e.target.closest('.expand-hint')) return;
+            if (currentTrack) openNowPlayingModal();
+        });
+    }
+
+    // Prev / Next buttons
+    const prevBtn = document.getElementById('np-prev-btn');
+    const nextBtn = document.getElementById('np-next-btn');
+    if (prevBtn) prevBtn.addEventListener('click', () => { playPreviousInQueue(); });
+    if (nextBtn) nextBtn.addEventListener('click', () => { playNextInQueue(); });
+
+    // Queue panel toggle + clear
+    const queueToggle = document.getElementById('np-queue-toggle');
+    if (queueToggle) {
+        queueToggle.addEventListener('click', () => {
+            const body = document.getElementById('np-queue-body');
+            if (body) body.classList.toggle('hidden');
+            queueToggle.classList.toggle('active');
+        });
+    }
+    const queueClearBtn = document.getElementById('np-queue-clear');
+    if (queueClearBtn) queueClearBtn.addEventListener('click', () => { clearQueue(); });
+
+    // Init Media Session API
+    initMediaSession();
+}
+
+function openNowPlayingModal() {
+    const overlay = document.getElementById('np-modal-overlay');
+    if (!overlay) return;
+    npModalOpen = true;
+    overlay.classList.remove('hidden');
+    document.body.style.overflow = 'hidden';
+    syncExpandedPlayerUI();
+}
+
+function closeNowPlayingModal() {
+    const overlay = document.getElementById('np-modal-overlay');
+    if (!overlay) return;
+    npModalOpen = false;
+    overlay.classList.add('hidden');
+    document.body.style.overflow = '';
+}
+
+function syncExpandedPlayerUI() {
+    if (!npModalOpen) return;
+
+    // Track info
+    updateNpTrackInfo();
+
+    // Play state
+    updateNpPlayButton();
+
+    // Progress
+    updateNpProgress();
+
+    // Volume
+    const sidebarVol = document.getElementById('volume-slider');
+    const npVol = document.getElementById('np-volume-slider');
+    const npVolFill = document.getElementById('np-volume-fill');
+    if (sidebarVol && npVol) {
+        npVol.value = sidebarVol.value;
+        if (npVolFill) npVolFill.style.width = sidebarVol.value + '%';
+    }
+
+    // Visualizer
+    const viz = document.getElementById('np-visualizer');
+    if (viz) viz.classList.toggle('playing', isPlaying);
+
+    // Queue
+    renderNpQueue();
+    updateNpPrevNextButtons();
+}
+
+function updateNpTrackInfo() {
+    const titleEl = document.getElementById('np-track-title');
+    const artistEl = document.getElementById('np-artist-name');
+    const albumEl = document.getElementById('np-album-name');
+    const artImg = document.getElementById('np-album-art');
+    const artPlaceholder = document.getElementById('np-album-art-placeholder');
+    const badgesEl = document.getElementById('np-format-badges');
+
+    if (!titleEl) return;
+
+    // Sidebar album art
+    const sidebarArt = document.getElementById('sidebar-album-art');
+
+    if (currentTrack) {
+        titleEl.textContent = currentTrack.title || 'Unknown Track';
+        artistEl.textContent = currentTrack.artist || 'Unknown Artist';
+        albumEl.textContent = currentTrack.album || 'Unknown Album';
+
+        // Album art (modal + sidebar)
+        const artUrl = getNpAlbumArtUrl();
+        if (artUrl && artImg) {
+            artImg.src = artUrl;
+            artImg.classList.remove('hidden');
+            artImg.onerror = () => { artImg.classList.add('hidden'); };
+        } else if (artImg) {
+            artImg.classList.add('hidden');
+        }
+        if (sidebarArt) {
+            if (artUrl) {
+                sidebarArt.src = artUrl;
+                sidebarArt.style.display = '';
+                sidebarArt.onerror = () => { sidebarArt.src = ''; };
+            } else {
+                sidebarArt.src = '';
+            }
+        }
+
+        // Format badges
+        if (badgesEl) {
+            badgesEl.innerHTML = '';
+            const filename = currentTrack.filename || '';
+            if (filename) {
+                const ext = getFileExtension(filename);
+                if (ext) {
+                    const badge = document.createElement('span');
+                    badge.className = 'np-format-badge' + (ext === 'flac' ? ' flac' : '');
+                    badge.textContent = ext.toUpperCase();
+                    badgesEl.appendChild(badge);
+                }
+            }
+        }
+    } else {
+        titleEl.textContent = 'No track';
+        artistEl.textContent = 'Unknown Artist';
+        albumEl.textContent = 'Unknown Album';
+        if (artImg) artImg.classList.add('hidden');
+        if (sidebarArt) sidebarArt.src = '';
+        if (badgesEl) badgesEl.innerHTML = '';
+    }
+}
+
+function updateNpPlayButton() {
+    const playIcon = document.querySelector('.np-icon-play');
+    const pauseIcon = document.querySelector('.np-icon-pause');
+    if (playIcon && pauseIcon) {
+        playIcon.classList.toggle('hidden', isPlaying);
+        pauseIcon.classList.toggle('hidden', !isPlaying);
+    }
+
+    const viz = document.getElementById('np-visualizer');
+    if (viz) viz.classList.toggle('playing', isPlaying);
+}
+
+function updateNpProgress() {
+    if (!npModalOpen || !audioPlayer) return;
+
+    const npProgressBar = document.getElementById('np-progress-bar');
+    const npProgressFill = document.getElementById('np-progress-fill');
+    const npCurrentTime = document.getElementById('np-current-time');
+    const npTotalTime = document.getElementById('np-total-time');
+
+    if (audioPlayer.duration) {
+        const progress = (audioPlayer.currentTime / audioPlayer.duration) * 100;
+        if (npProgressBar && !npProgressBar.dataset.seeking) {
+            npProgressBar.value = progress;
+        }
+        if (npProgressFill) npProgressFill.style.width = progress + '%';
+        if (npCurrentTime) npCurrentTime.textContent = formatTime(audioPlayer.currentTime);
+        if (npTotalTime) npTotalTime.textContent = formatTime(audioPlayer.duration);
+    } else {
+        if (npProgressBar) npProgressBar.value = 0;
+        if (npProgressFill) npProgressFill.style.width = '0%';
+        if (npCurrentTime) npCurrentTime.textContent = '0:00';
+        if (npTotalTime) npTotalTime.textContent = '0:00';
+    }
+}
+
+function handleNpProgressBarChange(event) {
+    if (!audioPlayer || !audioPlayer.duration) return;
+    const progress = parseFloat(event.target.value);
+    const newTime = (progress / 100) * audioPlayer.duration;
+
+    try {
+        audioPlayer.currentTime = newTime;
+
+        // Sync sidebar progress
+        const sidebarBar = document.getElementById('progress-bar');
+        const sidebarFill = document.getElementById('progress-fill');
+        if (sidebarBar) sidebarBar.value = progress;
+        if (sidebarFill) sidebarFill.style.width = progress + '%';
+
+        // Sync modal progress fill
+        const npFill = document.getElementById('np-progress-fill');
+        if (npFill) npFill.style.width = progress + '%';
+
+        // Update time displays
+        const sidebarTime = document.getElementById('current-time');
+        const npTime = document.getElementById('np-current-time');
+        if (sidebarTime) sidebarTime.textContent = formatTime(newTime);
+        if (npTime) npTime.textContent = formatTime(newTime);
+    } catch (error) {
+        console.warn('Seek failed:', error.message);
+    }
+}
+
+function handleNpVolumeChange(event) {
+    const volume = parseInt(event.target.value);
+    if (audioPlayer) audioPlayer.volume = volume / 100;
+
+    // Sync sidebar volume slider
+    const sidebarVol = document.getElementById('volume-slider');
+    if (sidebarVol) {
+        sidebarVol.value = volume;
+        sidebarVol.style.setProperty('--volume-percent', volume + '%');
+    }
+
+    // Update modal volume fill
+    const npFill = document.getElementById('np-volume-fill');
+    if (npFill) npFill.style.width = volume + '%';
+
+    // Update mute state
+    npMuted = volume === 0;
+    updateNpMuteIcon();
+}
+
+function handleNpMuteToggle() {
+    const npVol = document.getElementById('np-volume-slider');
+    if (!npVol) return;
+
+    if (npMuted) {
+        // Unmute — restore previous volume
+        npVol.value = npPreMuteVolume;
+        npVol.dispatchEvent(new Event('input'));
+        npMuted = false;
+    } else {
+        // Mute — save current volume, set to 0
+        npPreMuteVolume = parseInt(npVol.value) || 70;
+        npVol.value = 0;
+        npVol.dispatchEvent(new Event('input'));
+        npMuted = true;
+    }
+    updateNpMuteIcon();
+}
+
+function updateNpMuteIcon() {
+    const muteBtn = document.getElementById('np-mute-btn');
+    const volIcon = muteBtn ? muteBtn.querySelector('.np-icon-vol') : null;
+    const mutedIcon = muteBtn ? muteBtn.querySelector('.np-icon-muted') : null;
+    if (volIcon && mutedIcon) {
+        volIcon.classList.toggle('hidden', npMuted);
+        mutedIcon.classList.toggle('hidden', !npMuted);
+    }
+    if (muteBtn) muteBtn.classList.toggle('muted', npMuted);
+}
+
+function handleNpShuffle() {
+    npShuffleOn = !npShuffleOn;
+    const btn = document.getElementById('np-shuffle-btn');
+    if (btn) btn.classList.toggle('active', npShuffleOn);
+}
+
+function handleNpRepeat() {
+    if (npRepeatMode === 'off') {
+        npRepeatMode = 'one';
+        if (audioPlayer) audioPlayer.loop = true;
+    } else {
+        npRepeatMode = 'off';
+        if (audioPlayer) audioPlayer.loop = false;
+    }
+    const btn = document.getElementById('np-repeat-btn');
+    if (btn) btn.classList.toggle('active', npRepeatMode !== 'off');
+}
+
+// ===============================
+// QUEUE MANAGEMENT
+// ===============================
+
+function addToQueue(track) {
+    npQueue.push(track);
+    showToast('Added to queue', 'success');
+    renderNpQueue();
+    updateNpPrevNextButtons();
+    // If nothing is currently playing, auto-play the first queued track
+    if (!currentTrack || (!isPlaying && audioPlayer && audioPlayer.paused && audioPlayer.currentTime === 0)) {
+        playQueueItem(npQueue.length - 1);
+    }
+}
+
+function removeFromQueue(index) {
+    if (index < 0 || index >= npQueue.length) return;
+    const wasCurrentTrack = (index === npQueueIndex);
+    npQueue.splice(index, 1);
+    // Adjust current index
+    if (npQueue.length === 0) {
+        npQueueIndex = -1;
+    } else if (index < npQueueIndex) {
+        npQueueIndex--;
+    } else if (wasCurrentTrack) {
+        // Removed the currently playing item
+        if (npQueueIndex >= npQueue.length) {
+            npQueueIndex = npQueue.length - 1;
+        }
+        // Play the next track at the adjusted index
+        playQueueItem(npQueueIndex);
+    }
+    renderNpQueue();
+    updateNpPrevNextButtons();
+}
+
+function clearQueue() {
+    npQueue = [];
+    npQueueIndex = -1;
+    renderNpQueue();
+    updateNpPrevNextButtons();
+}
+
+function playNextInQueue() {
+    if (npQueue.length === 0) return;
+    if (npShuffleOn) {
+        // Pick a random index that is not the current one
+        const candidates = [];
+        for (let i = 0; i < npQueue.length; i++) {
+            if (i !== npQueueIndex) candidates.push(i);
+        }
+        if (candidates.length === 0) return;
+        const next = candidates[Math.floor(Math.random() * candidates.length)];
+        playQueueItem(next);
+    } else {
+        const next = npQueueIndex + 1;
+        if (next >= npQueue.length) return; // End of queue
+        playQueueItem(next);
+    }
+}
+
+function playPreviousInQueue() {
+    // If more than 3 seconds in, restart current track
+    if (audioPlayer && audioPlayer.currentTime > 3) {
+        audioPlayer.currentTime = 0;
+        if (audioPlayer.paused) audioPlayer.play();
+        return;
+    }
+    if (npQueue.length === 0) return;
+    const prev = npQueueIndex - 1;
+    if (prev < 0) {
+        // At start — restart current track
+        if (audioPlayer) {
+            audioPlayer.currentTime = 0;
+            if (audioPlayer.paused) audioPlayer.play();
+        }
+        return;
+    }
+    playQueueItem(prev);
+}
+
+async function playQueueItem(index) {
+    if (index < 0 || index >= npQueue.length) return;
+    if (npLoadingQueueItem) return; // Prevent race condition from double-advance
+    npLoadingQueueItem = true;
+    npQueueIndex = index;
+    const track = npQueue[index];
+
+    try {
+        if (track.is_library) {
+            // Library track playback flow
+            await stopStream();
+            setTrackInfo({
+                title: track.title,
+                artist: track.artist,
+                album: track.album,
+                filename: track.file_path,
+                is_library: true,
+                image_url: track.image_url
+            });
+            showLoadingAnimation();
+
+            const response = await fetch('/api/library/play', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    file_path: track.file_path,
+                    title: track.title || '',
+                    artist: track.artist || '',
+                    album: track.album || ''
+                })
+            });
+            const result = await response.json();
+            if (!result.success) throw new Error(result.error || 'Failed to start playback');
+            // Re-apply repeat-one loop property
+            if (audioPlayer) audioPlayer.loop = (npRepeatMode === 'one');
+            await startAudioPlayback();
+        } else {
+            // Non-library (stream) tracks cannot be queued for auto-advance
+            // Just show track info — the stream flow handles its own playback
+            setTrackInfo({
+                title: track.title,
+                artist: track.artist,
+                album: track.album,
+                filename: track.filename || track.file_path,
+                is_library: false,
+                image_url: track.image_url
+            });
+        }
+    } catch (error) {
+        console.error('Queue playback error:', error);
+        showToast(`Playback error: ${error.message}`, 'error');
+        hideLoadingAnimation();
+    } finally {
+        npLoadingQueueItem = false;
+    }
+
+    renderNpQueue();
+    updateNpPrevNextButtons();
+}
+
+function renderNpQueue() {
+    const listEl = document.getElementById('np-queue-list');
+    const emptyEl = document.getElementById('np-queue-empty');
+    const countEl = document.getElementById('np-queue-count');
+    if (!listEl) return;
+
+    if (countEl) countEl.textContent = npQueue.length > 0 ? `(${npQueue.length})` : '';
+
+    if (npQueue.length === 0) {
+        listEl.innerHTML = '';
+        if (emptyEl) emptyEl.classList.remove('hidden');
+        return;
+    }
+
+    if (emptyEl) emptyEl.classList.add('hidden');
+    listEl.innerHTML = '';
+
+    npQueue.forEach((track, i) => {
+        const item = document.createElement('div');
+        item.className = 'np-queue-item' + (i === npQueueIndex ? ' active' : '');
+        item.onclick = () => playQueueItem(i);
+
+        const info = document.createElement('div');
+        info.className = 'np-queue-item-info';
+
+        const title = document.createElement('div');
+        title.className = 'np-queue-item-title';
+        title.textContent = track.title || 'Unknown Track';
+
+        const artist = document.createElement('div');
+        artist.className = 'np-queue-item-artist';
+        artist.textContent = track.artist || 'Unknown Artist';
+
+        info.appendChild(title);
+        info.appendChild(artist);
+        item.appendChild(info);
+
+        const removeBtn = document.createElement('button');
+        removeBtn.className = 'np-queue-item-remove';
+        removeBtn.innerHTML = '&#10005;';
+        removeBtn.title = 'Remove from queue';
+        removeBtn.onclick = (e) => {
+            e.stopPropagation();
+            removeFromQueue(i);
+        };
+        item.appendChild(removeBtn);
+
+        listEl.appendChild(item);
+    });
+}
+
+function updateNpPrevNextButtons() {
+    const prevBtn = document.getElementById('np-prev-btn');
+    const nextBtn = document.getElementById('np-next-btn');
+    if (prevBtn) {
+        const canPrev = npQueueIndex > 0 || (audioPlayer && audioPlayer.currentTime > 3);
+        prevBtn.disabled = !canPrev;
+    }
+    if (nextBtn) {
+        const canNext = npQueue.length > 0 && (npShuffleOn ? npQueue.length > 1 : npQueueIndex < npQueue.length - 1);
+        nextBtn.disabled = !canNext;
+    }
+}
+
+function handlePlayerKeyboardShortcuts(event) {
+    // Don't intercept when typing in inputs or when non-player modals are open
+    const tag = document.activeElement.tagName.toLowerCase();
+    if (tag === 'input' || tag === 'textarea' || tag === 'select' || document.activeElement.isContentEditable) return;
+
+    // Only handle when player modal is open OR when no other modal is visible
+    const otherModals = document.querySelectorAll('.modal-overlay:not(.hidden):not(#np-modal-overlay)');
+    if (otherModals.length > 0 && !npModalOpen) return;
+
+    switch (event.key) {
+        case ' ':
+            if (!currentTrack) return;
+            event.preventDefault();
+            togglePlayback();
+            break;
+        case 'ArrowLeft':
+            if (!audioPlayer || !audioPlayer.duration) return;
+            event.preventDefault();
+            audioPlayer.currentTime = Math.max(0, audioPlayer.currentTime - 5);
+            break;
+        case 'ArrowRight':
+            if (!audioPlayer || !audioPlayer.duration) return;
+            event.preventDefault();
+            audioPlayer.currentTime = Math.min(audioPlayer.duration, audioPlayer.currentTime + 5);
+            break;
+        case 'ArrowUp':
+            event.preventDefault();
+            if (audioPlayer) {
+                const newVol = Math.min(1, audioPlayer.volume + 0.05);
+                audioPlayer.volume = newVol;
+                syncVolumeUI(Math.round(newVol * 100));
+            }
+            break;
+        case 'ArrowDown':
+            event.preventDefault();
+            if (audioPlayer) {
+                const newVol = Math.max(0, audioPlayer.volume - 0.05);
+                audioPlayer.volume = newVol;
+                syncVolumeUI(Math.round(newVol * 100));
+            }
+            break;
+        case 'm':
+        case 'M':
+            if (npModalOpen) handleNpMuteToggle();
+            break;
+        case 'Escape':
+            if (npModalOpen) closeNowPlayingModal();
+            break;
+        default:
+            return; // Don't prevent default for unhandled keys
+    }
+}
+
+function syncVolumeUI(volumePercent) {
+    // Sync both sidebar and modal volume UIs
+    const sidebarVol = document.getElementById('volume-slider');
+    const npVol = document.getElementById('np-volume-slider');
+    const npFill = document.getElementById('np-volume-fill');
+
+    if (sidebarVol) {
+        sidebarVol.value = volumePercent;
+        sidebarVol.style.setProperty('--volume-percent', volumePercent + '%');
+    }
+    if (npVol) npVol.value = volumePercent;
+    if (npFill) npFill.style.width = volumePercent + '%';
+}
+
+function getNpAlbumArtUrl() {
+    if (!currentTrack) return null;
+    return currentTrack.image_url || currentTrack.album_cover_url || currentTrack.thumb_url || null;
+}
+
+// Media Session API
+function initMediaSession() {
+    if (!('mediaSession' in navigator)) return;
+
+    navigator.mediaSession.setActionHandler('play', () => {
+        if (audioPlayer && currentTrack) {
+            audioPlayer.play().then(() => setPlayingState(true));
+        }
+    });
+    navigator.mediaSession.setActionHandler('pause', () => {
+        if (audioPlayer) {
+            audioPlayer.pause();
+            setPlayingState(false);
+        }
+    });
+    navigator.mediaSession.setActionHandler('stop', () => {
+        handleStop();
+    });
+    navigator.mediaSession.setActionHandler('seekbackward', () => {
+        if (audioPlayer && audioPlayer.duration) {
+            audioPlayer.currentTime = Math.max(0, audioPlayer.currentTime - 10);
+        }
+    });
+    navigator.mediaSession.setActionHandler('seekforward', () => {
+        if (audioPlayer && audioPlayer.duration) {
+            audioPlayer.currentTime = Math.min(audioPlayer.duration, audioPlayer.currentTime + 10);
+        }
+    });
+    navigator.mediaSession.setActionHandler('previoustrack', () => {
+        if (npQueue.length > 0) playPreviousInQueue();
+    });
+    navigator.mediaSession.setActionHandler('nexttrack', () => {
+        if (npQueue.length > 0) playNextInQueue();
+    });
+}
+
+function updateMediaSessionMetadata() {
+    if (!('mediaSession' in navigator) || !currentTrack) return;
+    const artwork = [];
+    const artUrl = getNpAlbumArtUrl();
+    if (artUrl) artwork.push({ src: artUrl, sizes: '512x512', type: 'image/jpeg' });
+
+    navigator.mediaSession.metadata = new MediaMetadata({
+        title: currentTrack.title || 'Unknown Track',
+        artist: currentTrack.artist || 'Unknown Artist',
+        album: currentTrack.album || 'Unknown Album',
+        artwork: artwork
+    });
+}
+
+function updateMediaSessionPlaybackState() {
+    if (!('mediaSession' in navigator)) return;
+    if (!currentTrack) {
+        navigator.mediaSession.playbackState = 'none';
+    } else {
+        navigator.mediaSession.playbackState = isPlaying ? 'playing' : 'paused';
+    }
+}
+
 // ===============================
 // SUPPORT MODAL
 // ===============================
@@ -32814,6 +33487,7 @@ function renderTrackTable(album) {
         { label: 'BPM', cls: 'col-bpm', sortField: 'bpm' },
         { label: 'File', cls: 'col-path' },
         { label: 'Match', cls: 'col-match' },
+        { label: '', cls: 'col-queue' },
         { label: '', cls: 'col-delete' },
     ];
     columns.forEach(col => {
@@ -32980,6 +33654,35 @@ function renderTrackTable(album) {
         matchTd.appendChild(matchCell);
         tr.appendChild(matchTd);
 
+        // Add to Queue button
+        const queueTd = document.createElement('td');
+        queueTd.className = 'col-queue';
+        if (track.file_path) {
+            const queueBtn = document.createElement('button');
+            queueBtn.className = 'enhanced-queue-btn';
+            queueBtn.innerHTML = '&#43;';
+            queueBtn.title = 'Add to queue';
+            queueBtn.onclick = (e) => {
+                e.stopPropagation();
+                const artistName = artistDetailPageState.enhancedData ? artistDetailPageState.enhancedData.artist.name : '';
+                let albumArt = album.thumb_url || null;
+                if (!albumArt && artistDetailPageState.enhancedData) {
+                    albumArt = artistDetailPageState.enhancedData.artist?.thumb_url;
+                }
+                addToQueue({
+                    title: track.title || 'Unknown Track',
+                    artist: artistName || 'Unknown Artist',
+                    album: album.title || 'Unknown Album',
+                    file_path: track.file_path,
+                    filename: track.file_path,
+                    is_library: true,
+                    image_url: albumArt
+                });
+            };
+            queueTd.appendChild(queueBtn);
+        }
+        tr.appendChild(queueTd);
+
         // Delete button
         const delTd = document.createElement('td');
         delTd.className = 'col-delete';
@@ -33807,13 +34510,27 @@ async function playLibraryTrack(track, albumTitle, artistName) {
             audioPlayer.pause();
         }
 
+        // Get album art from enhanced data if available
+        let albumArt = null;
+        if (artistDetailPageState.enhancedData) {
+            const albums = artistDetailPageState.enhancedData.albums || [];
+            for (const a of albums) {
+                if ((a.tracks || []).some(t => t.id === track.id)) {
+                    albumArt = a.thumb_url;
+                    break;
+                }
+            }
+            if (!albumArt) albumArt = artistDetailPageState.enhancedData.artist?.thumb_url;
+        }
+
         // Set track info in the media player UI
         setTrackInfo({
             title: track.title || 'Unknown Track',
             artist: artistName || 'Unknown Artist',
             album: albumTitle || 'Unknown Album',
             filename: track.file_path,
-            is_library: true
+            is_library: true,
+            image_url: albumArt
         });
 
         // Show loading state
diff --git a/webui/static/style.css b/webui/static/style.css
index 87d3c673..fbbce482 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -333,50 +333,182 @@ body {
     );
 }
 
-/* Media Player Section - Premium Glassmorphic Design */
+/* Media Player Section - Premium Compact Design */
 .media-player {
     background: linear-gradient(180deg,
-            rgba(28, 28, 28, 0.95) 0%,
-            rgba(20, 20, 20, 0.98) 50%,
-            rgba(14, 14, 14, 1.0) 100%);
-    backdrop-filter: blur(12px) saturate(1.1);
+            rgba(24, 24, 24, 0.97) 0%,
+            rgba(16, 16, 16, 0.99) 50%,
+            rgba(10, 10, 10, 1.0) 100%);
+    backdrop-filter: blur(16px) saturate(1.2);
     border: 1px solid rgba(255, 255, 255, 0.06);
     border-top: 1px solid rgba(255, 255, 255, 0.1);
-    border-radius: 16px;
+    border-radius: 14px;
     margin: 8px 14px;
-    padding: 18px;
-    min-height: 150px;
-    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    padding: 0;
+    overflow: hidden;
+    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
     box-shadow:
-        0 8px 24px rgba(0, 0, 0, 0.4),
-        0 4px 12px rgba(0, 0, 0, 0.3),
-        inset 0 1px 0 rgba(255, 255, 255, 0.08);
+        0 8px 24px rgba(0, 0, 0, 0.45),
+        0 2px 8px rgba(0, 0, 0, 0.3),
+        inset 0 1px 0 rgba(255, 255, 255, 0.07);
+    position: relative;
 }
 
 .media-player:hover {
-    border: 1px solid rgba(var(--accent-rgb), 0.2);
-    border-top: 1px solid rgba(var(--accent-rgb), 0.25);
-    background: linear-gradient(180deg,
-            rgba(var(--accent-rgb), 0.08) 0%,
-            rgba(28, 28, 28, 0.95) 40%,
-            rgba(20, 20, 20, 0.98) 70%,
-            rgba(14, 14, 14, 1.0) 100%);
+    border-color: rgba(var(--accent-rgb), 0.18);
+    border-top-color: rgba(var(--accent-rgb), 0.22);
     box-shadow:
-        0 12px 32px rgba(0, 0, 0, 0.5),
-        0 6px 16px rgba(var(--accent-rgb), 0.15),
-        0 4px 12px rgba(0, 0, 0, 0.3),
-        inset 0 1px 0 rgba(255, 255, 255, 0.12);
+        0 10px 28px rgba(0, 0, 0, 0.5),
+        0 4px 14px rgba(var(--accent-rgb), 0.1),
+        inset 0 1px 0 rgba(255, 255, 255, 0.1);
 }
 
+/* Top progress bar - thin line across full width */
+.player-top-progress {
+    padding: 0 14px;
+    padding-top: 10px;
+}
+
+.player-top-progress .progress-bar-container {
+    position: relative;
+    width: 100%;
+    height: 14px;
+}
+
+.player-top-progress .progress-track {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: rgba(255, 255, 255, 0.08);
+    border-radius: 2px;
+    transform: translateY(-50%);
+    z-index: 1;
+    transition: height 0.15s ease;
+}
+
+.player-top-progress:hover .progress-track {
+    height: 4px;
+}
+
+.progress-fill {
+    height: 100%;
+    background: linear-gradient(90deg, rgb(var(--accent-rgb)), rgb(var(--accent-light-rgb)));
+    border-radius: 2px;
+    width: 0%;
+    transition: width 0.1s linear;
+}
+
+.progress-bar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 14px;
+    background: transparent;
+    outline: none;
+    cursor: pointer;
+    -webkit-appearance: none;
+    appearance: none;
+    z-index: 2;
+    margin: 0;
+}
+
+.progress-bar::-webkit-slider-track {
+    width: 100%;
+    height: 3px;
+    background: transparent;
+    border-radius: 2px;
+}
+
+.progress-bar::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 10px;
+    height: 10px;
+    background: #fff;
+    border-radius: 50%;
+    cursor: pointer;
+    border: none;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+    transition: all 0.15s ease;
+    opacity: 0;
+}
+
+.player-top-progress:hover .progress-bar::-webkit-slider-thumb {
+    opacity: 1;
+}
+
+.progress-bar::-webkit-slider-thumb:hover {
+    transform: scale(1.2);
+    box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.2);
+}
+
+.progress-bar::-webkit-slider-thumb:active {
+    transform: scale(1.3);
+    box-shadow: 0 0 0 6px rgba(var(--accent-rgb), 0.25);
+}
+
+/* Firefox progress bar styling */
+.progress-bar::-moz-range-track {
+    width: 100%;
+    height: 3px;
+    background: transparent;
+    border-radius: 2px;
+    border: none;
+}
+
+.progress-bar::-moz-range-thumb {
+    width: 10px;
+    height: 10px;
+    background: #fff;
+    border-radius: 50%;
+    cursor: pointer;
+    border: none;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+    opacity: 0;
+    transition: opacity 0.15s ease;
+}
+
+.player-top-progress:hover .progress-bar::-moz-range-thumb {
+    opacity: 1;
+}
+
+/* Time display - left/right under progress */
+.player-top-progress .time-display {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
+    font-size: 9px;
+    font-weight: 500;
+    color: rgba(255, 255, 255, 0.35);
+    letter-spacing: 0.3px;
+    padding: 0 1px;
+    margin-top: -1px;
+}
+
+.current-time {
+    min-width: 28px;
+    text-align: left;
+}
+
+.total-time {
+    min-width: 28px;
+    text-align: right;
+}
+
+/* Loading Animation */
 .loading-animation {
     height: 12px;
-    margin-bottom: 12px;
+    margin: 8px 14px 4px;
     position: relative;
 }
 
 .loading-bar {
-    height: 4px;
-    background: #2a2a2a;
+    height: 3px;
+    background: rgba(255, 255, 255, 0.06);
     border-radius: 2px;
     overflow: hidden;
     position: relative;
@@ -395,18 +527,35 @@ body {
     top: 0;
     left: 50%;
     transform: translateX(-50%);
-    font-family: 'Segoe UI', sans-serif;
+    font-family: 'SF Mono', 'Consolas', monospace;
     font-size: 7px;
     font-weight: 500;
-    color: #b4b4b4;
+    color: rgba(255, 255, 255, 0.4);
     line-height: 8px;
 }
 
+/* Track info row — album art + text only, no controls competing for space */
 .media-header {
     display: flex;
-    align-items: flex-start;
-    gap: 16px;
-    margin-bottom: 10px;
+    align-items: center;
+    gap: 10px;
+    padding: 6px 14px 4px;
+    cursor: pointer;
+}
+
+.sidebar-album-art {
+    width: 38px;
+    height: 38px;
+    min-width: 38px;
+    border-radius: 6px;
+    object-fit: cover;
+    background: rgba(255, 255, 255, 0.05);
+    display: block;
+}
+
+.sidebar-album-art[src=""],
+.sidebar-album-art:not([src]) {
+    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.15) 0%, rgba(255, 255, 255, 0.03) 100%);
 }
 
 .media-info {
@@ -414,20 +563,20 @@ body {
     min-width: 0;
     display: flex;
     flex-direction: column;
-    gap: 4px;
-    padding-top: 2px;
+    gap: 1px;
 }
 
 .track-title {
-    font-family: 'Spotify Circular', 'SF Pro Display', -apple-system, sans-serif;
-    font-size: 15px;
-    font-weight: 700;
+    font-family: -apple-system, 'Segoe UI', sans-serif;
+    font-size: 12.5px;
+    font-weight: 600;
     color: #ffffff;
-    letter-spacing: -0.2px;
+    letter-spacing: -0.1px;
     line-height: 1.3;
     cursor: pointer;
     white-space: nowrap;
     overflow: hidden;
+    text-overflow: ellipsis;
     margin: 0;
     transition: color 0.2s ease;
     position: relative;
@@ -449,21 +598,10 @@ body {
 }
 
 @keyframes marquee-scroll {
-    0% {
-        transform: translateX(0px);
-    }
-
-    20% {
-        transform: translateX(0px);
-    }
-
-    80% {
-        transform: translateX(var(--scroll-distance));
-    }
-
-    100% {
-        transform: translateX(var(--scroll-distance));
-    }
+    0%  { transform: translateX(0px); }
+    20% { transform: translateX(0px); }
+    80% { transform: translateX(var(--scroll-distance)); }
+    100%{ transform: translateX(var(--scroll-distance)); }
 }
 
 .track-title:hover {
@@ -471,281 +609,243 @@ body {
 }
 
 .artist-name {
-    font-family: 'Spotify Circular', -apple-system, sans-serif;
-    font-size: 12px;
-    font-weight: 500;
-    color: #a7a7a7;
+    font-family: -apple-system, 'Segoe UI', sans-serif;
+    font-size: 11px;
+    font-weight: 400;
+    color: rgba(255, 255, 255, 0.55);
     letter-spacing: 0.1px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     margin: 0;
-    opacity: 0.9;
 }
 
+.album-name.header-album {
+    font-family: -apple-system, 'Segoe UI', sans-serif;
+    font-size: 10px;
+    font-weight: 400;
+    color: rgba(255, 255, 255, 0.3);
+    letter-spacing: 0.1px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin: 0;
+    font-style: normal;
+}
+
+/* Controls row — always visible below track info */
+.media-controls-row {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 2px 14px 10px;
+}
+
+/* Play Button */
 .play-button {
-    width: 40px;
-    height: 40px;
-    border-radius: 20px;
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
     background: rgb(var(--accent-light-rgb));
     border: none;
     color: #000000;
-    font-size: 16px;
-    font-weight: 900;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
-    transition: all 0.2s ease;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    padding: 0;
+    flex-shrink: 0;
+}
+
+.play-button svg {
+    width: 14px;
+    height: 14px;
 }
 
 .play-button:hover:not(:disabled) {
     background: #1fdf64;
-    transform: scale(1.05);
+    transform: scale(1.08);
+    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.35);
 }
 
 .play-button:active:not(:disabled) {
-    background: #1ca851;
     transform: scale(0.95);
 }
 
 .play-button:disabled {
-    background: #535353;
-    color: #b3b3b3;
+    background: rgba(255, 255, 255, 0.08);
+    color: rgba(255, 255, 255, 0.25);
     cursor: not-allowed;
+    box-shadow: none;
 }
 
-.media-expanded {
-    margin-top: 8px;
-    padding-top: 8px;
-    border-top: 1px solid rgba(255, 255, 255, 0.08);
-}
-
-.album-name {
-    font-family: 'Spotify Circular', -apple-system, sans-serif;
-    font-size: 11px;
-    font-weight: 500;
-    color: #999999;
-    letter-spacing: 0.1px;
-    margin-bottom: 12px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-style: italic;
-    opacity: 0.8;
-}
-
-/* Progress Section Styling */
-.progress-section {
-    margin-bottom: 12px;
-}
-
-.time-display {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 6px;
-    font-family: 'Spotify Circular', -apple-system, monospace;
-    font-size: 10px;
-    color: #b3b3b3;
-    font-weight: 400;
-}
-
-.current-time,
-.total-time {
-    min-width: 32px;
-    text-align: center;
-}
-
-.time-separator {
-    color: #666666;
-}
-
-.progress-bar-container {
-    position: relative;
-    width: 100%;
-    height: 20px;
-}
-
-.progress-track {
-    position: absolute;
-    top: 50%;
-    left: 0;
-    right: 0;
-    height: 3px;
-    background: #4f4f4f;
-    border-radius: 2px;
-    transform: translateY(-50%);
-    z-index: 1;
-}
-
-.progress-fill {
-    height: 100%;
-    background: rgb(var(--accent-rgb));
-    /* Green accent color */
-    border-radius: 2px;
-    width: 0%;
-    transition: width 0.1s ease;
-}
-
-.progress-bar {
-
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 20px;
-    background: transparent;
-    outline: none;
-    cursor: pointer;
-    -webkit-appearance: none;
-    appearance: none;
-    z-index: 2;
-}
-
-.progress-bar::-webkit-slider-track {
-    width: 100%;
-    height: 3px;
-    background: transparent;
-    border-radius: 2px;
-}
-
-.progress-bar::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    appearance: none;
-    width: 12px;
-    height: 12px;
-    background: rgb(var(--accent-rgb));
-    border-radius: 50%;
-    cursor: pointer;
-    border: none;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-    transition: all 0.15s ease;
-}
-
-.progress-bar::-webkit-slider-thumb:hover {
-    background: rgb(var(--accent-light-rgb));
-    transform: scale(1.1);
-}
-
-.progress-bar::-webkit-slider-thumb:active {
-    transform: scale(1.15);
-    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.3);
-}
-
-/* Firefox progress bar styling */
-.progress-bar::-moz-range-track {
-    width: 100%;
-    height: 3px;
-    background: transparent;
-    border-radius: 2px;
-    border: none;
-}
-
-.progress-bar::-moz-range-thumb {
-    width: 12px;
-    height: 12px;
-    background: rgb(var(--accent-rgb));
-    border-radius: 50%;
-    cursor: pointer;
-    border: none;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-}
-
-.progress-bar::-moz-range-thumb:hover {
-    background: rgb(var(--accent-light-rgb));
-}
-
-.media-controls {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-top: 0px;
-}
-
+/* Volume control in controls row */
 .volume-control {
     display: flex;
     align-items: center;
-    gap: 10px;
+    gap: 5px;
+    flex: 1;
+    min-width: 0;
 }
 
 .volume-icon {
-    color: #b3b3b3;
-    font-size: 13px;
+    color: rgba(255, 255, 255, 0.4);
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+}
+
+.volume-icon svg {
+    width: 13px;
+    height: 13px;
 }
 
 .volume-slider {
-    width: 80px;
-    height: 20px;
+    width: 100%;
+    height: 16px;
     background: transparent;
     outline: none;
     cursor: pointer;
-}
-
-.volume-slider::-webkit-slider-track {
-    width: 100%;
-    height: 3px;
-    background: #4f4f4f;
-    border-radius: 1px;
-}
-
-.volume-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
     appearance: none;
-    width: 12px;
-    height: 12px;
-    background: #ffffff;
-    border-radius: 50%;
-    cursor: pointer;
-    margin-top: -4px;
-}
-
-.volume-slider::-webkit-slider-thumb:hover {
-    background: rgb(var(--accent-light-rgb));
 }
 
 .volume-slider::-webkit-slider-runnable-track {
-    background: linear-gradient(to right, rgb(var(--accent-light-rgb)) 0%, rgb(var(--accent-light-rgb)) var(--volume-percent, 70%), #4f4f4f var(--volume-percent, 70%), #4f4f4f 100%);
+    width: 100%;
+    height: 3px;
+    border-radius: 2px;
+    background: linear-gradient(to right,
+        rgba(255, 255, 255, 0.6) 0%,
+        rgba(255, 255, 255, 0.6) var(--volume-percent, 70%),
+        rgba(255, 255, 255, 0.08) var(--volume-percent, 70%),
+        rgba(255, 255, 255, 0.08) 100%);
 }
 
-.stop-button {
-    width: 32px;
-    height: 32px;
-    border-radius: 16px;
+.volume-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 10px;
+    height: 10px;
+    background: #ffffff;
+    border-radius: 50%;
+    cursor: pointer;
+    margin-top: -3.5px;
+    border: none;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+    transition: all 0.15s ease;
+    opacity: 0;
+}
+
+.volume-control:hover .volume-slider::-webkit-slider-thumb {
+    opacity: 1;
+}
+
+.volume-slider::-webkit-slider-thumb:hover {
+    transform: scale(1.15);
+}
+
+/* Firefox volume slider */
+.volume-slider::-moz-range-track {
+    width: 100%;
+    height: 3px;
+    border-radius: 2px;
     background: rgba(255, 255, 255, 0.08);
-    border: 1px solid #b3b3b3;
-    color: #ffffff;
-    font-size: 12px;
+    border: none;
+}
+
+.volume-slider::-moz-range-thumb {
+    width: 10px;
+    height: 10px;
+    background: #ffffff;
+    border-radius: 50%;
+    cursor: pointer;
+    border: none;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+
+/* Stop button */
+.stop-button {
+    width: 24px;
+    height: 24px;
+    border-radius: 5px;
+    background: rgba(255, 255, 255, 0.06);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    color: rgba(255, 255, 255, 0.5);
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.2s ease;
+    padding: 0;
+    flex-shrink: 0;
+}
+
+.stop-button svg {
+    width: 10px;
+    height: 10px;
 }
 
 .stop-button:hover:not(:disabled) {
-    background: rgba(255, 255, 255, 0.15);
-    border: 1px solid #ffffff;
+    background: rgba(255, 255, 255, 0.12);
+    border-color: rgba(255, 255, 255, 0.15);
+    color: #ffffff;
 }
 
 .stop-button:active:not(:disabled) {
-    background: rgba(255, 255, 255, 0.25);
+    background: rgba(255, 255, 255, 0.18);
 }
 
 .stop-button:disabled {
     background: transparent;
-    border: 1px solid #2a2a2a;
-    color: #535353;
+    border-color: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.12);
     cursor: not-allowed;
 }
 
+/* Expand hint chevron — subtle indicator to open NP modal */
+.expand-hint {
+    background: none;
+    border: none;
+    color: rgba(255, 255, 255, 0.15);
+    cursor: pointer;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: color 0.2s ease;
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+}
+
+.expand-hint:hover {
+    color: rgba(255, 255, 255, 0.45);
+}
+
+/* Expanded section (kept for backward compat) */
+.media-expanded {
+    display: none;
+}
+
+/* No track empty state */
 .no-track-message {
-    color: rgba(255, 255, 255, 0.25);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    color: rgba(255, 255, 255, 0.18);
     font-size: 11px;
-    font-weight: 500;
+    font-weight: 400;
     text-align: center;
-    padding: 24px 20px;
-    letter-spacing: 0.3px;
-    font-family: 'SF Pro Text', -apple-system, sans-serif;
-    line-height: 1.5;
+    padding: 20px 16px;
+    letter-spacing: 0.2px;
+    font-family: -apple-system, 'Segoe UI', sans-serif;
+    line-height: 1.4;
+}
+
+.no-track-icon {
+    opacity: 0.6;
 }
 
 /* Crypto Donation Section */
@@ -30963,4 +31063,620 @@ textarea.enhanced-meta-field-input {
 /* Sortable column headers */
 .enhanced-track-table th[style*="cursor: pointer"]:hover {
     color: rgb(var(--accent-rgb));
+}
+
+/* ========== Expanded Now Playing Modal ========== */
+.np-modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(4, 4, 4, 0.92);
+    backdrop-filter: blur(32px);
+    -webkit-backdrop-filter: blur(32px);
+    z-index: 10001;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 1;
+    transition: opacity 0.3s ease;
+}
+.np-modal-overlay.hidden {
+    opacity: 0;
+    pointer-events: none;
+}
+.np-modal {
+    width: 90vw;
+    max-width: 880px;
+    max-height: 85vh;
+    background: linear-gradient(180deg, rgba(24, 24, 24, 0.97) 0%, rgba(10, 10, 10, 1) 100%);
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    border-radius: 20px;
+    box-shadow: 0 32px 100px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.03);
+    position: relative;
+    overflow: hidden;
+    transform: scale(1);
+    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.np-modal-overlay.hidden .np-modal {
+    transform: scale(0.92);
+}
+.np-close-btn {
+    position: absolute;
+    top: 16px;
+    right: 20px;
+    background: none;
+    border: none;
+    color: rgba(255, 255, 255, 0.3);
+    font-size: 28px;
+    cursor: pointer;
+    z-index: 2;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    transition: all 0.15s ease;
+}
+.np-close-btn:hover {
+    color: rgba(255, 255, 255, 0.7);
+    background: rgba(255, 255, 255, 0.06);
+}
+
+/* Layout */
+.np-body {
+    display: flex;
+    flex-direction: row;
+    padding: 48px 40px 36px;
+    gap: 48px;
+    align-items: flex-start;
+}
+.np-left {
+    flex: 0 0 auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 24px;
+}
+.np-right {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    min-width: 0;
+    justify-content: center;
+}
+
+/* Album Art */
+.np-album-art-container {
+    width: 300px;
+    height: 300px;
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5), 0 2px 12px rgba(0, 0, 0, 0.3);
+    position: relative;
+    background: rgba(255, 255, 255, 0.03);
+    flex-shrink: 0;
+}
+.np-album-art {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+}
+.np-album-art.hidden {
+    display: none;
+}
+.np-album-art-placeholder {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(135deg, rgba(30, 30, 30, 1) 0%, rgba(18, 18, 18, 1) 100%);
+    color: rgba(255, 255, 255, 0.12);
+}
+.np-album-art:not(.hidden) + .np-album-art-placeholder {
+    display: none;
+}
+
+/* Track Info */
+.np-track-info {
+    text-align: center;
+    width: 300px;
+}
+.np-track-title {
+    font-size: 22px;
+    font-weight: 700;
+    color: #fff;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    letter-spacing: -0.3px;
+}
+.np-artist-name {
+    font-size: 15px;
+    font-weight: 500;
+    color: rgba(255, 255, 255, 0.55);
+    margin-top: 4px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.np-album-name {
+    font-size: 13px;
+    color: rgba(255, 255, 255, 0.35);
+    font-style: italic;
+    margin-top: 3px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.np-format-badges {
+    display: flex;
+    gap: 6px;
+    justify-content: center;
+    margin-top: 10px;
+    flex-wrap: wrap;
+}
+.np-format-badge {
+    padding: 2px 8px;
+    border-radius: 4px;
+    font-size: 10px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    background: rgba(255, 255, 255, 0.06);
+    color: rgba(255, 255, 255, 0.45);
+    border: 1px solid rgba(255, 255, 255, 0.06);
+}
+.np-format-badge.flac {
+    color: rgba(var(--accent-rgb), 0.9);
+    background: rgba(var(--accent-rgb), 0.08);
+    border-color: rgba(var(--accent-rgb), 0.15);
+}
+
+/* Progress Section */
+.np-progress-section {
+    width: 100%;
+}
+.np-progress-bar-container {
+    position: relative;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+}
+.np-progress-track {
+    position: absolute;
+    width: 100%;
+    height: 4px;
+    background: rgba(255, 255, 255, 0.08);
+    border-radius: 2px;
+    overflow: hidden;
+}
+.np-progress-bar-container:hover .np-progress-track {
+    height: 6px;
+}
+.np-progress-fill {
+    height: 100%;
+    background: rgb(var(--accent-rgb));
+    border-radius: 2px;
+    width: 0%;
+    transition: width 0.1s linear;
+}
+.np-progress-bar {
+    position: absolute;
+    width: 100%;
+    height: 20px;
+    -webkit-appearance: none;
+    appearance: none;
+    background: transparent;
+    cursor: pointer;
+    margin: 0;
+    z-index: 1;
+}
+.np-progress-bar::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background: #fff;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
+    cursor: pointer;
+    opacity: 0;
+    transition: opacity 0.15s;
+}
+.np-progress-bar-container:hover .np-progress-bar::-webkit-slider-thumb {
+    opacity: 1;
+}
+.np-progress-bar::-moz-range-thumb {
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background: #fff;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
+    cursor: pointer;
+    border: none;
+}
+.np-progress-bar::-moz-range-track {
+    background: transparent;
+    border: none;
+    height: 4px;
+}
+.np-time-display {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 6px;
+}
+.np-current-time,
+.np-total-time {
+    font-size: 12px;
+    color: rgba(255, 255, 255, 0.4);
+    font-variant-numeric: tabular-nums;
+    min-width: 36px;
+}
+.np-total-time {
+    text-align: right;
+}
+
+/* Controls Row */
+.np-controls-row {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 20px;
+}
+.np-btn {
+    background: none;
+    border: none;
+    color: rgba(255, 255, 255, 0.6);
+    cursor: pointer;
+    padding: 8px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.15s ease;
+}
+.np-btn:hover {
+    color: #fff;
+    transform: scale(1.08);
+}
+.np-btn:active {
+    transform: scale(0.95);
+}
+.np-btn:disabled {
+    color: rgba(255, 255, 255, 0.15);
+    cursor: default;
+    transform: none;
+}
+.np-btn-play {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    background: rgb(var(--accent-rgb));
+    color: #000;
+    box-shadow: 0 4px 20px rgba(var(--accent-rgb), 0.3);
+}
+.np-btn-play:hover {
+    background: rgb(calc(var(--accent-rgb) + 20));
+    filter: brightness(1.15);
+    transform: scale(1.05);
+    box-shadow: 0 6px 28px rgba(var(--accent-rgb), 0.4);
+}
+.np-btn-play:active {
+    filter: brightness(0.9);
+    transform: scale(0.97);
+}
+.np-btn-shuffle.active,
+.np-btn-repeat.active {
+    color: rgb(var(--accent-rgb));
+}
+.np-btn-shuffle.active::after,
+.np-btn-repeat.active::after {
+    content: '';
+    position: absolute;
+    bottom: 2px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    background: rgb(var(--accent-rgb));
+}
+.np-btn-shuffle,
+.np-btn-repeat {
+    position: relative;
+}
+
+/* Volume Row */
+.np-volume-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    justify-content: center;
+}
+.np-mute-btn {
+    background: none;
+    border: none;
+    color: rgba(255, 255, 255, 0.5);
+    cursor: pointer;
+    padding: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: color 0.15s;
+}
+.np-mute-btn:hover {
+    color: #fff;
+}
+.np-mute-btn.muted {
+    color: rgba(255, 80, 80, 0.7);
+}
+.np-volume-slider-container {
+    position: relative;
+    width: 160px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+}
+.np-volume-track {
+    position: absolute;
+    width: 100%;
+    height: 4px;
+    background: rgba(255, 255, 255, 0.08);
+    border-radius: 2px;
+    overflow: hidden;
+}
+.np-volume-fill {
+    height: 100%;
+    background: rgb(var(--accent-rgb));
+    border-radius: 2px;
+    width: 70%;
+    transition: width 0.05s linear;
+}
+.np-volume-slider {
+    position: absolute;
+    width: 100%;
+    height: 20px;
+    -webkit-appearance: none;
+    appearance: none;
+    background: transparent;
+    cursor: pointer;
+    margin: 0;
+    z-index: 1;
+}
+.np-volume-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background: #fff;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+    cursor: pointer;
+}
+.np-volume-slider::-moz-range-thumb {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background: #fff;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+    cursor: pointer;
+    border: none;
+}
+.np-volume-slider::-moz-range-track {
+    background: transparent;
+    border: none;
+    height: 4px;
+}
+
+/* Stop Row */
+.np-stop-row {
+    display: flex;
+    justify-content: center;
+}
+.np-btn-stop {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 20px;
+    border-radius: 8px;
+    background: rgba(255, 255, 255, 0.04);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    color: rgba(255, 255, 255, 0.4);
+    font-size: 12px;
+    cursor: pointer;
+    transition: all 0.15s ease;
+}
+.np-btn-stop:hover {
+    background: rgba(255, 60, 60, 0.08);
+    border-color: rgba(255, 60, 60, 0.2);
+    color: rgba(255, 80, 80, 0.8);
+}
+
+/* Visualizer */
+.np-visualizer {
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    gap: 3px;
+    height: 24px;
+    margin-top: 8px;
+    opacity: 0.4;
+}
+.np-viz-bar {
+    width: 3px;
+    background: rgb(var(--accent-rgb));
+    border-radius: 1.5px;
+    height: 3px;
+    transition: height 0.1s ease;
+}
+.np-visualizer.playing .np-viz-bar {
+    animation: npVizPulse 0.8s ease-in-out infinite alternate;
+}
+.np-visualizer.playing .np-viz-bar:nth-child(1) { animation-delay: 0s; }
+.np-visualizer.playing .np-viz-bar:nth-child(2) { animation-delay: 0.1s; }
+.np-visualizer.playing .np-viz-bar:nth-child(3) { animation-delay: 0.2s; }
+.np-visualizer.playing .np-viz-bar:nth-child(4) { animation-delay: 0.15s; }
+.np-visualizer.playing .np-viz-bar:nth-child(5) { animation-delay: 0.25s; }
+.np-visualizer.playing .np-viz-bar:nth-child(6) { animation-delay: 0.05s; }
+.np-visualizer.playing .np-viz-bar:nth-child(7) { animation-delay: 0.18s; }
+@keyframes npVizPulse {
+    0% { height: 3px; }
+    100% { height: 20px; }
+}
+
+/* Queue Panel */
+.np-queue-panel {
+    border-top: 1px solid rgba(255, 255, 255, 0.06);
+    padding: 0 40px 20px;
+}
+.np-queue-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 0 8px;
+}
+.np-queue-toggle {
+    background: none;
+    border: none;
+    color: rgba(255, 255, 255, 0.5);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 13px;
+    font-weight: 500;
+    padding: 4px 0;
+    transition: color 0.15s ease;
+}
+.np-queue-toggle:hover,
+.np-queue-toggle.active {
+    color: rgba(255, 255, 255, 0.85);
+}
+.np-queue-count {
+    color: rgba(255, 255, 255, 0.3);
+    font-size: 12px;
+}
+.np-queue-clear-btn {
+    background: none;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: rgba(255, 255, 255, 0.35);
+    font-size: 11px;
+    padding: 3px 10px;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.15s ease;
+}
+.np-queue-clear-btn:hover {
+    color: rgba(255, 255, 255, 0.7);
+    border-color: rgba(255, 255, 255, 0.2);
+}
+.np-queue-body {
+    max-height: 200px;
+    overflow-y: auto;
+}
+.np-queue-body.hidden {
+    display: none;
+}
+.np-queue-empty {
+    color: rgba(255, 255, 255, 0.25);
+    font-size: 13px;
+    text-align: center;
+    padding: 16px 0;
+}
+.np-queue-list {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+.np-queue-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 12px;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: background 0.15s ease;
+}
+.np-queue-item:hover {
+    background: rgba(255, 255, 255, 0.05);
+}
+.np-queue-item.active {
+    background: rgba(29, 185, 84, 0.12);
+    border-left: 3px solid #1db954;
+}
+.np-queue-item-info {
+    min-width: 0;
+    flex: 1;
+}
+.np-queue-item-title {
+    font-size: 13px;
+    color: rgba(255, 255, 255, 0.85);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.np-queue-item.active .np-queue-item-title {
+    color: #1db954;
+}
+.np-queue-item-artist {
+    font-size: 11px;
+    color: rgba(255, 255, 255, 0.35);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.np-queue-item-remove {
+    background: none;
+    border: none;
+    color: rgba(255, 255, 255, 0.2);
+    cursor: pointer;
+    font-size: 12px;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    flex-shrink: 0;
+    transition: all 0.15s ease;
+}
+.np-queue-item-remove:hover {
+    color: rgba(255, 80, 80, 0.8);
+    background: rgba(255, 80, 80, 0.1);
+}
+
+/* Queue button in enhanced track table */
+.col-queue {
+    width: 32px;
+    text-align: center;
+}
+.enhanced-queue-btn {
+    background: none;
+    border: 1px solid rgba(29, 185, 84, 0.2);
+    color: rgba(29, 185, 84, 0.5);
+    border-radius: 50%;
+    width: 24px;
+    height: 24px;
+    font-size: 14px;
+    font-weight: bold;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.15s ease;
+    padding: 0;
+}
+.enhanced-queue-btn:hover {
+    background: rgba(29, 185, 84, 0.12);
+    color: rgba(29, 185, 84, 0.9);
+    border-color: rgba(29, 185, 84, 0.4);
+    transform: scale(1.1);
 }
\ No newline at end of file