diff --git a/src/App.svelte b/src/App.svelte
index 08b4b2b..9df72e4 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -64,6 +64,7 @@
     class:np-open={ui.nowPlaying}
     class:sidebar-collapsed={ui.sidebarCollapsed}
     class:preview-open={previewUi.open}
+    style="--np-open-width: {ui.nowPlayingWidth}px"
 >
     <TitleBar />
     <!-- While the preview modal is open the page is inert and the flanking
@@ -118,6 +119,11 @@
         background: var(--bg-sidebar);
         overflow: hidden;
         transition: grid-template-columns 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+        /* Indirection so the dragged width can be an INLINE style without
+           outranking the collapse rule below: an inline --nowplaying-width
+           would beat `.app:not(.np-open)` and the panel could never collapse.
+           Both rules here are class-level, so the more specific one wins. */
+        --nowplaying-width: var(--np-open-width, 340px);
     }
 
     /* Collapsed left nav: narrow the sidebar column to an icon rail. The
@@ -126,10 +132,12 @@
         --sidebar-width: 64px;
     }
 
-    /* Now Playing panel slides away: the column collapses to zero (the panel
-       itself keeps its width and slides off-screen — see NowPlaying.svelte). */
+    /* Now Playing collapses to its RAIL, not to nothing — the same gesture the
+       left nav makes. The column animates between the user's dragged width and
+       the rail on the shared 0.28s curve above; the panel keeps a presence at
+       every point, so there is no off-screen slide any more. */
     .app:not(.np-open) {
-        --nowplaying-width: 0px;
+        --nowplaying-width: var(--nowplaying-rail);
     }
 
     .content {
diff --git a/src/components/NowPlaying.svelte b/src/components/NowPlaying.svelte
index ee8c6e7..852dee7 100644
--- a/src/components/NowPlaying.svelte
+++ b/src/components/NowPlaying.svelte
@@ -18,9 +18,14 @@
         artBroken,
         markArtBroken,
         playerArtSource,
+        setNowPlayingWidth,
+        NP_WIDTH_DEFAULT,
+        NP_WIDTH_MIN,
+        NP_WIDTH_MAX,
     } from "../lib/state.svelte.js";
     import Icon from "./Icon.svelte";
     import SaveMenu from "./SaveMenu.svelte";
+    import * as api from "../lib/api.js";
     import { floatScroll } from "../lib/scrollbar.js";
 
     const currentItem = $derived(player.queue[player.queueIndex] ?? null);
@@ -101,18 +106,12 @@
         bioExpanded = false;
     });
 
-    // Keep the panel body mounted just long enough to finish the close slide,
-    // then release its reactive waveform work and filtered layers entirely.
-    // Reopening cancels the pending teardown and restores content immediately.
-    let panelContentVisible = $state(ui.nowPlaying);
-    $effect(() => {
-        if (ui.nowPlaying) {
-            panelContentVisible = true;
-            return;
-        }
-        const timer = setTimeout(() => (panelContentVisible = false), 300);
-        return () => clearTimeout(timer);
-    });
+    // The panel used to slide off-screen when closed, so its body was torn down
+    // after the slide to release the waveform work and the large art data URL.
+    // It no longer leaves — closing collapses it to the rail, which shows the
+    // artwork and the progress line — so the art must stay loaded either way.
+    // Only the expanded body is conditional now.
+    const panelContentVisible = $derived(ui.nowPlaying);
 
     const norm = (s) => (s || "").toLowerCase().replace(/[^a-z0-9]/g, "");
 
@@ -153,9 +152,10 @@
     // Album art (local path or catalog CDN) → data URL, reused for the glow.
     let artUrl = $state(null);
     $effect(() => {
-        // A closed panel should not duplicate PlayerBar's cold cover-art IPC or
-        // retain a large data URL that has no visible consumer.
-        const item = panelContentVisible ? currentItem : null;
+        // Loaded whenever something is playing, collapsed or not: the rail
+        // shows this same artwork as its cover and as the bleed behind its
+        // glass bar, so gating it on the panel being open blanked both.
+        const item = currentItem;
         artUrl = null;
         if (!item) return;
         let active = true;
@@ -227,18 +227,460 @@
         const khz = (q.sampleRate / 1000).toFixed(1).replace(/\.0$/, "");
         return q.bitDepth ? `${khz} kHz · ${q.bitDepth}-bit` : `${khz} kHz`;
     }
+
+    // ---- transfer status ---------------------------------------------------
+    // One line for the glass header, in both the expanded panel and the rail's
+    // bar. Deliberately absent for a library track: a local file has no peer
+    // and no transfer, and showing zeroes for it would read as a stalled one.
+    //
+    // There is no "queued at peer" state here. The download path reports a
+    // queue place; the streaming path does not, so the panel cannot honestly
+    // claim to know one.
+    const transferring = $derived(
+        isStream && player.streamTotal > 0 && player.streamReceived < player.streamTotal,
+    );
+    const cached = $derived(
+        isStream && player.streamTotal > 0 && player.streamReceived >= player.streamTotal,
+    );
+    /** Bytes/sec, only once measured — see player.streamSpeed. */
+    const rateText = $derived(
+        player.streamSpeed > 0 ? `${(player.streamSpeed / 1048576).toFixed(1)} MB/s` : null,
+    );
+    const etaText = $derived.by(() => {
+        if (!transferring || player.streamSpeed <= 0) return null;
+        const secs = (player.streamTotal - player.streamReceived) / player.streamSpeed;
+        if (!isFinite(secs) || secs < 1) return null;
+        return secs >= 60
+            ? `${Math.floor(secs / 60)}m ${Math.round(secs % 60)}s left`
+            : `${Math.round(secs)}s left`;
+    });
+    const peerName = $derived(currentItem?.stream?.username ?? null);
+    const statusLine = $derived.by(() => {
+        if (!isStream) return null;
+        if (cached) return `Cached · ${fmtSize(player.streamTotal) ?? ""}`.trim();
+        if (transferring) {
+            return [peerName, `${Math.round(bufferPct)}%`, rateText, etaText]
+                .filter(Boolean)
+                .join(" · ");
+        }
+        return peerName ? `Streaming from ${peerName}` : null;
+    });
+    /** The hairline has no percentage to show until bytes start arriving. */
+    const hairlineSeeking = $derived(isStream && player.streamTotal === 0);
+
+    // ---- drag to resize ----------------------------------------------------
+    // Pointer capture, like the player bar's scrubber: the pointer keeps
+    // delivering moves after it leaves the 9px grip, which a mousemove
+    // listener on the element alone would not.
+    let gripEl = $state(null);
+    let dragging = $state(false);
+    let dragRaf = 0;
+    let dragStartX = 0;
+    let dragStartW = 0;
+    let pendingWidth = 0;
+    /** Shown while dragging so the number being chosen is visible. */
+    const atDefault = $derived(ui.nowPlayingWidth === NP_WIDTH_DEFAULT);
+
+    function onGripDown(e) {
+        dragging = true;
+        dragStartX = e.clientX;
+        dragStartW = ui.nowPlayingWidth;
+        gripEl?.setPointerCapture?.(e.pointerId);
+        e.preventDefault();
+    }
+    function onGripMove(e) {
+        if (!dragging) return;
+        // The panel's left edge moves left to widen, so the delta is inverted.
+        let w = dragStartW - (e.clientX - dragStartX);
+        w = Math.max(NP_WIDTH_MIN, Math.min(NP_WIDTH_MAX, w));
+        // A 10px magnet at the default, so getting back to stock is easy
+        // without the drag feeling sticky anywhere else.
+        if (Math.abs(w - NP_WIDTH_DEFAULT) < 10) w = NP_WIDTH_DEFAULT;
+        pendingWidth = w;
+        if (dragRaf) return;
+        dragRaf = requestAnimationFrame(() => {
+            dragRaf = 0;
+            setNowPlayingWidth(pendingWidth);
+        });
+    }
+    function onGripUp(e) {
+        if (!dragging) return;
+        dragging = false;
+        if (dragRaf) {
+            cancelAnimationFrame(dragRaf);
+            dragRaf = 0;
+            setNowPlayingWidth(pendingWidth);
+        }
+        gripEl?.releasePointerCapture?.(e.pointerId);
+    }
+    function resetWidth() {
+        setNowPlayingWidth(NP_WIDTH_DEFAULT);
+    }
+
+    // ---- rail ---------------------------------------------------------------
+    const queueLeft = $derived(Math.max(0, player.queue.length - player.queueIndex - 1));
+
+    // ---- the record this queue belongs to -----------------------------------
+    const albumTitle = $derived(metaParts[1] || currentItem?.album || "");
+
+    // Editorial description / label / genre for the About pane — the same
+    // `catalog_album_info` the album page credits, so the two never disagree
+    // about a record. Keyed on artist+album, and only fetched while expanded:
+    // the rail has nowhere to show it.
+    let albumInfo = $state(null);
+    let albumInfoKey = null;
+    $effect(() => {
+        const artist = artistName;
+        const title = albumTitle;
+        const id = discovery.artistId;
+        const key = artist && title ? `${artist}::${title}` : null;
+        if (!ui.nowPlaying || !key) return;
+        if (key === albumInfoKey) return;
+        albumInfoKey = key;
+        albumInfo = null;
+        let stale = false;
+        api.catalogAlbumInfo(id ?? null, artist, title)
+            .then((info) => {
+                if (!stale && albumInfoKey === key) albumInfo = info ?? null;
+            })
+            .catch(() => {});
+        return () => {
+            stale = true;
+        };
+    });
+
+    /** This record's row in the local library, when it is owned. */
+    const localAlbum = $derived.by(() => {
+        const a = norm(artistName);
+        const t = norm(albumTitle);
+        if (!a || !t) return null;
+        return libraryStore.albums.find((x) => norm(x.artist) === a && norm(x.title) === t) ?? null;
+    });
+
+    // Which of this record's songs are already saved locally, ticked in the
+    // queue. The library keeps albums rather than songs, so the owned tracklist
+    // has to be read from the matching local album — the album page does the
+    // same thing for the same reason.
+    let libraryTicks = $state(new Set());
+    let ticksFor = null;
+    $effect(() => {
+        const id = localAlbum?.id ?? null;
+        if (id === ticksFor) return;
+        ticksFor = id;
+        libraryTicks = new Set();
+        if (id == null) return;
+        let stale = false;
+        api.albumTracks(id)
+            .then((rows) => {
+                if (!stale && ticksFor === id) {
+                    libraryTicks = new Set(rows.map((r) => norm(r.title || "")));
+                }
+            })
+            .catch(() => {});
+        return () => {
+            stale = true;
+        };
+    });
+
+    // The record's catalog payload, when the queue came from one. It supplies
+    // two things nothing else here has: per-track Last.fm listeners (queue
+    // items carry only a provider `trackId`) and the release date / track count
+    // / runtime the About pane's credits block needs. A local album has no
+    // catalog id, so both simply do not appear.
+    let catalogPage = $state(null);
+    let catalogFor = null;
+    $effect(() => {
+        const albumId = player.catalogRef.albumId ?? null;
+        if (albumId === catalogFor) return;
+        catalogFor = albumId;
+        catalogPage = null;
+        if (albumId == null || !ui.nowPlaying) return;
+        let stale = false;
+        api.catalogAlbum(albumId)
+            .then((page) => {
+                if (!stale && catalogFor === albumId) catalogPage = page ?? null;
+            })
+            .catch(() => {});
+        return () => {
+            stale = true;
+        };
+    });
+    const listenersById = $derived.by(() => {
+        const map = new Map();
+        for (const t of catalogPage?.tracks ?? []) {
+            if (t.listeners != null) map.set(String(t.id), t.listeners);
+        }
+        return map;
+    });
+    const showListeners = $derived(listenersById.size > 0 && ui.nowPlayingWidth >= 396);
+    const listenersOf = (item) =>
+        item?.trackId != null ? (listenersById.get(String(item.trackId)) ?? null) : null;
+
+    /** "7 October 2014 · 13 tracks · 42 min", from whichever parts are known. */
+    const creditsLine = $derived.by(() => {
+        const parts = [];
+        const date = catalogPage?.album?.release_date ?? null;
+        if (date) {
+            const d = new Date(date);
+            parts.push(
+                isNaN(d)
+                    ? date
+                    : d.toLocaleDateString(undefined, { year: "numeric", month: "long", day: "numeric" }),
+            );
+        }
+        const n = catalogPage?.tracks?.length ?? player.queue.length;
+        if (n) parts.push(`${n} track${n === 1 ? "" : "s"}`);
+        const secs = (catalogPage?.tracks ?? player.queue).reduce(
+            (sum, t) => sum + (t.duration_secs ?? t.duration ?? 0),
+            0,
+        );
+        if (secs) {
+            const mins = Math.round(secs / 60);
+            parts.push(mins >= 60 ? `${Math.floor(mins / 60)} hr ${mins % 60} min` : `${mins} min`);
+        }
+        return parts.join(" · ");
+    });
+
+    // Width-responsive: the pill's stats spread rather than bunch, and the
+    // release grid gains a column, once there is room for them.
+    const statsSpread = $derived(ui.nowPlayingWidth >= 372);
+    const releaseCols = $derived(ui.nowPlayingWidth >= 430 ? 3 : 2);
+
+    /** The artist page's own social tints, so the chips match it exactly. */
+    const SOCIAL_META = {
+        website: { icon: "globe", label: "Official site", rgb: "160,168,177" },
+        instagram: { icon: "brand-instagram", label: "Instagram", rgb: "213,154,171" },
+        x: { icon: "brand-x", label: "X", rgb: "213,217,221", solid: true },
+        facebook: { icon: "brand-facebook", label: "Facebook", rgb: "143,168,205" },
+        tiktok: { icon: "brand-tiktok", label: "TikTok", rgb: "159,196,204" },
+        youtube: { icon: "brand-youtube", label: "YouTube", rgb: "201,143,143" },
+        bandcamp: { icon: "brand-bandcamp", label: "Bandcamp", rgb: "127,173,189", solid: true },
+        soundcloud: { icon: "brand-soundcloud", label: "SoundCloud", rgb: "208,162,132" },
+    };
+
+    let showAllReleases = $state(false);
+    let descExpanded = $state(false);
+    $effect(() => {
+        // A new record collapses both long texts and the release grid again.
+        void albumInfoKey;
+        showAllReleases = false;
+        descExpanded = false;
+    });
+    const releaseList = $derived(showAllReleases ? discovery.albums : moreAlbums);
+
+    const upNext = $derived(player.queue[player.queueIndex + 1] ?? null);
+
+    const fmtListeners = (n) => (n == null ? null : n.toLocaleString());
+
+    // ---- the waveform, as a scrubber ---------------------------------------
+    // It was decorative — a picture of the song with no way to move through it,
+    // while the player bar carried the only scrubber. Same seek semantics as
+    // that one (75ms throttle while dragging, exact seek on release) so the two
+    // cannot disagree about where a click lands.
+    let waveEl = $state(null);
+    let waveDragging = false;
+    let lastWaveSeekAt = 0;
+    function waveTarget(e) {
+        if (!player.duration || !waveEl) return null;
+        const rect = waveEl.getBoundingClientRect();
+        const f = Math.min(1, Math.max(0, (e.clientX - rect.left) / rect.width));
+        return f * player.duration;
+    }
+    function waveDown(e) {
+        const target = waveTarget(e);
+        if (target == null) return;
+        waveDragging = true;
+        player.scrubbing = true;
+        waveEl.setPointerCapture(e.pointerId);
+        player.position = target;
+        e.preventDefault();
+    }
+    function waveMove(e) {
+        if (!waveDragging) return;
+        const target = waveTarget(e);
+        if (target == null) return;
+        player.position = target; // instant feedback; the seek is throttled
+        const now = performance.now();
+        if (now - lastWaveSeekAt >= 75) {
+            lastWaveSeekAt = now;
+            api.playerControl("seek", target);
+        }
+    }
+    function waveUp(e) {
+        if (!waveDragging) return;
+        waveDragging = false;
+        player.scrubbing = false;
+        const target = waveTarget(e);
+        if (target != null) api.playerControl("seek", target);
+        try {
+            waveEl.releasePointerCapture(e.pointerId);
+        } catch {
+            // The pointer may already be gone; the seek above still stands.
+        }
+    }
+
+    // ---- panes --------------------------------------------------------------
+    // The context below the record is three shallow panes rather than one long
+    // scroll. Lyrics sits between Queue and Artist when enabled — it has no
+    // source yet and shows a placeholder.
+    const PANE_LABEL = { queue: "Queue", lyrics: "Lyrics", artist: "Artist", about: "About" };
+    const panes = ["queue", "lyrics", "artist", "about"];
+    let pane = $state("queue");
+    /** Which way the incoming pane slides in from, so a switch reads as travel
+     *  rather than a flicker — forward comes from the right, back from the
+     *  left, the same rule the glass bar's breadcrumb uses. */
+    let paneDir = $state(10);
+    function selectPane(next) {
+        if (next === pane) return;
+        paneDir = panes.indexOf(next) >= panes.indexOf(pane) ? 10 : -10;
+        pane = next;
+        // The scroll position is deliberately NOT reset: `.np-scroll` survives
+        // the pane swap, so the browser keeps its offset and only clamps it if
+        // the arriving pane is shorter. The sticky control above means you can
+        // always switch back from wherever that leaves you.
+    }
+    /** A rail dot both expands the panel and lands on the pane it names. */
+    function openPane(name) {
+        selectPane(name);
+        if (!ui.nowPlaying) toggleNowPlaying();
+    }
 </script>
 
-<aside class="nowplaying" class:closed={!ui.nowPlaying}>
+<!-- The artist as one pill: portrait, name, and the three figures the album
+     hero already states this way. It is a block-level button so it tracks the
+     panel's width, and the stats spread across it once there is room rather
+     than bunching at the left. Shown in both the Artist and About panes. -->
+{#snippet artistChip()}
+    <button class="achip" onclick={openDiscoveryArtist} title="Open {artistName}">
+        {#if discovery.picture}
+            <img src={discovery.picture} alt="" loading="lazy" draggable="false" />
+        {:else}
+            <span class="achip-ph"><Icon name="music" size={24} /></span>
+        {/if}
+        <span class="achip-body">
+            <span class="achip-name">{artistName || "Unknown artist"}</span>
+            <span class="achip-stats" class:spread={statsSpread}>
+                <span class="st"><b>{discovery.albumCount ?? "—"}</b><i>releases</i></span>
+                <span class="st"><b>{fmtFans(discovery.fans)}</b><i>fans</i></span>
+                <span class="st"><b>{inLibraryCount}</b><i>in library</i></span>
+            </span>
+        </span>
+    </button>
+{/snippet}
+
+<aside class="nowplaying" class:collapsed={!ui.nowPlaying} class:dragging>
+    <!-- The record washes the whole panel, expanded or collapsed, and the glass
+         bars below sit on it exactly as the app's glass bar sits on a page hero.
+         Blurred hard, because it is a backdrop for text and icons — not a
+         second showing of the artwork. -->
+    {#if artUrl}
+        <div class="bleed" aria-hidden="true">
+            <img src={artUrl} alt="" draggable="false" />
+            <span class="bleed-fade"></span>
+        </div>
+    {/if}
+
+    <!-- ================================ COLLAPSED: the rail ============ -->
+    <div class="rail-view" inert={ui.nowPlaying || undefined}>
+        <header class="glass rail-bar">
+            <button class="np-icon" title="Expand panel" aria-label="Expand Now Playing" onclick={toggleNowPlaying}>
+                <Icon name="chevron-left" size={16} />
+            </button>
+            {#if isStream}
+                <span class="hairline" class:seek={hairlineSeeking} class:done={cached} style="--buf:{bufferPct}%"><i></i></span>
+            {/if}
+        </header>
+
+        <!-- Playback down the rail's own edge: the one value worth a whole
+             dimension, and it costs no content width. -->
+        <span class="rail-edge" style="--p:{playedPct}%" aria-hidden="true"><i></i></span>
+
+        <div class="rail-body">
+            {#if artUrl}
+                <button class="rail-cover" title="View artwork" aria-label="View album artwork" onclick={() => openArtwork()}>
+                    <img src={artUrl} alt="" draggable="false" />
+                </button>
+            {/if}
+            {#if player.status === "playing" && ui.windowActive}
+                <span class="eq active" aria-hidden="true"><b></b><b></b><b></b></span>
+            {/if}
+            <div class="rail-dots">
+                <button class="rail-dot" title="Queue" onclick={() => openPane("queue")}>
+                    <Icon name="layers" size={15} />
+                    {#if queueLeft > 0}<span class="rail-badge">{queueLeft}</span>{/if}
+                </button>
+                <button class="rail-dot" title="More from {artistName}" onclick={() => openPane("artist")}>
+                    <Icon name="disc" size={15} />
+                    {#if discovery.albumCount}<span class="rail-badge">{discovery.albumCount}</span>{/if}
+                </button>
+                <button class="rail-dot" title="About" onclick={() => openPane("about")}>
+                    <Icon name="users" size={15} />
+                </button>
+            </div>
+            <span class="rail-spacer"></span>
+            {#if player.track?.title}
+                <div class="rail-title" title={player.track.title}>
+                    <b>{player.track.title}</b>{metaParts[0] ? ` — ${metaParts[0]}` : ""}
+                </div>
+            {/if}
+        </div>
+    </div>
+
+    <!-- ================================ EXPANDED ======================= -->
+    <div class="full-view" inert={!ui.nowPlaying || undefined}>
     <!-- Frosted-glass header: it overlays the scrolling content and blurs
          whatever sits beneath it, so the album art's colors seep through and
-         shift as you scroll the art up under the glass. -->
-    <header class="np-head" data-scrollhead>
-        <span class="np-title">Now playing</span>
-        <button class="np-icon" title="Hide panel" onclick={toggleNowPlaying}>
-            <Icon name="chevron-left" size={16} />
-        </button>
-    </header>
+         shift as you scroll the art up under the glass. It names what you are
+         playing FROM and carries the transfer as a hairline along its bottom
+         edge — the panel is self-evidently "now playing", so saying so was a
+         waste of the only permanently visible line it has. -->
+    <div class="headzone">
+        <header class="np-head glass" data-scrollhead>
+            <button class="np-icon" title="Collapse panel" aria-label="Collapse Now Playing" onclick={toggleNowPlaying}>
+                <Icon name="chevron-right" size={16} />
+            </button>
+            <div class="np-headmid">
+                {#if statusLine}
+                    {#key statusLine}
+                        <span class="np-status">{statusLine}</span>
+                    {/key}
+                {/if}
+                <span class="np-from" title={metaParts[1] || player.track?.title}>
+                    {metaParts[1] || player.track?.title || "Nothing playing"}
+                </span>
+            </div>
+            {#if isStream}
+                <span class="hairline" class:seek={hairlineSeeking} class:done={cached} style="--buf:{bufferPct}%"><i></i></span>
+            {/if}
+        </header>
+
+        <!-- The whole transfer, one hover away: everything the old source card
+             showed permanently, without spending a permanent line on it. This
+             is also where saving what you are streaming lives now. -->
+        {#if isStream && currentItem?.stream}
+            <div class="xpop">
+                <div class="xrow">
+                    <div class="xav">{currentItem.stream.username.slice(0, 1).toUpperCase()}</div>
+                    <div class="xwho">
+                        <span title={currentItem.stream.username}>{currentItem.stream.username}</span>
+                        <small>
+                            {#if cached}
+                                complete · {fmtSize(player.streamTotal)}
+                            {:else if player.streamTotal > 0}
+                                {fmtSize(player.streamReceived)} / {fmtSize(player.streamTotal)}{rateText ? ` · ${rateText}` : ""}
+                            {:else}
+                                connecting…
+                            {/if}
+                        </small>
+                    </div>
+                    <SaveMenu align="down" />
+                </div>
+                {#if player.streamTotal > 0}
+                    <div class="xbar"><i style="width:{bufferPct}%"></i></div>
+                {/if}
+            </div>
+        {/if}
+    </div>
 
     <div class="np-scroll" use:floatScroll>
         {#if panelContentVisible}
@@ -282,7 +724,21 @@
 
             <!-- mini waveform + times -->
             {#if bars.length}
-                <div class="wave" aria-hidden="true">
+                <div
+                    class="wave"
+                    class:scrubbing={waveDragging}
+                    role="slider"
+                    tabindex="0"
+                    aria-label="Seek"
+                    aria-valuemin="0"
+                    aria-valuemax={Math.round(player.duration ?? 0)}
+                    aria-valuenow={Math.round(player.position ?? 0)}
+                    bind:this={waveEl}
+                    onpointerdown={waveDown}
+                    onpointermove={waveMove}
+                    onpointerup={waveUp}
+                    onpointercancel={waveUp}
+                >
                     {#each bars as v, i}
                         <i
                             style="height:{barHeight(v, i)}%; --fill:{barFill(i)}"
@@ -292,7 +748,10 @@
             {/if}
             <div class="times">
                 <span>{fmtTime(player.position)}</span>
-                <span>{fmtTime(player.duration)}</span>
+                <!-- Remaining, not total: the total is already implied by the
+                     bar's own length, and what a listener wants from a second
+                     number is how much is left. -->
+                <span>-{fmtTime(Math.max(0, (player.duration ?? 0) - (player.position ?? 0)))}</span>
             </div>
 
             <!-- quality chips -->
@@ -314,120 +773,176 @@
                 </div>
             {/if}
 
-            <!-- source card (streaming only) -->
-            {#if isStream && currentItem.stream}
-                <div class="src">
-                    <div class="src-lab">Streaming from</div>
-                    <div class="peer">
-                        <div class="av">{currentItem.stream.username.slice(0, 1).toUpperCase()}</div>
-                        <div class="who" title={currentItem.stream.username}>{currentItem.stream.username}</div>
-                    </div>
-                    {#if player.streamTotal > 0}
-                        <div class="buf">
-                            <div class="bar"><i style="width:{bufferPct}%"></i></div>
-                            <div class="meta">
-                                <span>Buffered {(player.streamReceived / 1048576).toFixed(1)} / {(player.streamTotal / 1048576).toFixed(1)} MB</span>
-                                <span>{Math.round(bufferPct)}%</span>
+            <!-- Context below the record: shallow panes instead of one long
+                 scroll, so the queue is never four sections away. The control
+                 is sticky under the glass, because keeping your scroll position
+                 across a switch is worthless if the switch itself scrolls out
+                 of reach. -->
+            <div class="segwrap">
+                <div class="seg" role="tablist">
+                    <span
+                        class="seg-thumb"
+                        style="width: calc((100% - 6px) / {panes.length}); transform: translateX({panes.indexOf(pane) * 100}%)"
+                        aria-hidden="true"
+                    ></span>
+                    {#each panes as p (p)}
+                        <button
+                            class="seg-btn"
+                            class:on={pane === p}
+                            role="tab"
+                            aria-selected={pane === p}
+                            onclick={() => selectPane(p)}
+                        >{PANE_LABEL[p]}</button>
+                    {/each}
+                </div>
+            </div>
+
+            {#key pane}
+                <div class="pane" style="--dir: {paneDir}px">
+                    {#if pane === "queue"}
+                        {#if upNext}
+                            <button class="upnext" onclick={() => jumpToQueueIndex(player.queueIndex + 1)}>
+                                {#if artUrl}<img src={artUrl} alt="" draggable="false" />{/if}
+                                <span class="un-body">
+                                    <span class="un-lab">Up next</span>
+                                    <span class="un-title" title={upNext.title}>{upNext.title}</span>
+                                </span>
+                                <span class="un-dur">{fmtTime(upNext.duration)}</span>
+                            </button>
+                        {/if}
+                        {#if player.queue.length > 1}
+                            <div class="lab">
+                                <span>{albumMode ? "From the album" : "Queue"}</span>
+                                <span class="cnt">{player.queue.length} tracks</span>
                             </div>
-                        </div>
+                            <div class="list">
+                                {#each player.queue as item, i}
+                                    {@const lis = listenersOf(item)}
+                                    <button
+                                        class="row"
+                                        class:now={i === player.queueIndex}
+                                        class:wide={showListeners}
+                                        onclick={() => jumpToQueueIndex(i)}
+                                    >
+                                        <span class="n">
+                                            {#if i === player.queueIndex}
+                                                <span
+                                                    class="eq"
+                                                    class:active={player.status === "playing" && ui.windowActive}
+                                                ><b></b><b></b><b></b></span>
+                                            {:else}{i + 1}{/if}
+                                        </span>
+                                        <span class="nm" title={item.title}>
+                                            {item.title}
+                                            {#if libraryTicks.has(norm(item.title))}
+                                                <span class="own" title="Saved in your library"><Icon name="check" size={11} /></span>
+                                            {/if}
+                                        </span>
+                                        {#if showListeners}
+                                            <span class="lis">{fmtListeners(lis) ?? "—"}</span>
+                                        {/if}
+                                        <span class="du">{fmtTime(item.duration)}</span>
+                                    </button>
+                                {/each}
+                            </div>
+                        {:else}
+                            <p class="pane-empty">Nothing queued after this one.</p>
+                        {/if}
+
+                    {:else if pane === "lyrics"}
+                        <p class="pane-empty">
+                            Lyrics aren't wired up yet — this pane is a placeholder.
+                        </p>
+
+                    {:else if pane === "artist"}
+                        {@render artistChip()}
+                        {#if discovery.socials.length}
+                            <div class="socials">
+                                {#each discovery.socials as link (link.kind)}
+                                    {@const meta = SOCIAL_META[link.kind] ?? SOCIAL_META.website}
+                                    <a
+                                        class="soc"
+                                        href={link.url}
+                                        target="_blank"
+                                        rel="noreferrer"
+                                        title={meta.label}
+                                        style="--soc: {meta.rgb}"
+                                        onclick={(e) => { e.preventDefault(); api.openExternal(link.url); }}
+                                    ><Icon name={meta.icon} size={15} fill={meta.solid ?? false} /></a>
+                                {/each}
+                            </div>
+                        {/if}
+                        {#if releaseList.length}
+                            <div class="lab">
+                                <span>Releases</span>
+                                {#if discovery.albumCount}<span class="cnt">{discovery.albumCount} total</span>{/if}
+                            </div>
+                            <div class="grid2" style="--cols: {releaseCols}">
+                                {#each releaseList as al (al.id)}
+                                    <button class="mini" title="Play {al.title}" onclick={() => streamCatalogAlbum(al)}>
+                                        <div class="art">
+                                            {#if al.cover && !artBroken[al.cover]}
+                                                <img src={al.cover} alt="" loading="lazy" draggable="false" onerror={() => markArtBroken(al.cover)} />
+                                            {/if}
+                                        </div>
+                                        <div class="mt">{al.title}</div>
+                                        <div class="my">{albumYear(al)}{al.record_type && al.record_type !== "album" ? " · " + al.record_type : ""}</div>
+                                    </button>
+                                {/each}
+                            </div>
+                            {#if discovery.albums.length > moreAlbums.length}
+                                <button class="showall" onclick={() => (showAllReleases = !showAllReleases)}>
+                                    {showAllReleases ? "Show fewer" : "Show all " + discovery.albums.length + " releases"}
+                                </button>
+                            {/if}
+                        {/if}
+                        {#if relatedArtists.length}
+                            <div class="lab"><span>Fans also like</span></div>
+                            <div class="fans">
+                                {#each relatedArtists as ar}
+                                    <button class="fan" title={ar.name} onclick={() => openCatalogArtist(ar.id, ar)}>
+                                        <div class="av2">
+                                            {#if ar.picture}<img src={ar.picture} alt="" loading="lazy" draggable="false" />{/if}
+                                        </div>
+                                        <div class="fn">{ar.name}</div>
+                                    </button>
+                                {/each}
+                            </div>
+                        {/if}
+
+                    {:else}
+                        {#if albumInfo?.description}
+                            <div class="lab"><span>About this record</span></div>
+                            <p class="bio" class:clamped={!descExpanded}>{albumInfo.description}</p>
+                            <button class="more" class:open={descExpanded} onclick={() => (descExpanded = !descExpanded)}>
+                                {descExpanded ? "Show less" : "Show more"}
+                                <Icon name="chevron-down" size={13} />
+                            </button>
+                        {/if}
+                        {#if creditsLine || albumInfo?.label || albumInfo?.genre}
+                            <div class="credits">
+                                <span class="clab">Released</span>
+                                {creditsLine}
+                                {#if albumInfo?.label || albumInfo?.genre}
+                                    <br />{albumInfo.label ?? ""}{albumInfo.label && albumInfo.genre ? " · " : ""}{albumInfo.genre ?? ""}
+                                {/if}
+                            </div>
+                        {/if}
+                        <div class="lab"><span>About the artist</span></div>
+                        {@render artistChip()}
+                        {#if discovery.bio}
+                            <p class="bio" class:clamped={!bioExpanded}>{discovery.bio}</p>
+                            <button class="more" class:open={bioExpanded} onclick={() => (bioExpanded = !bioExpanded)}>
+                                {bioExpanded ? "Show less" : "Read more"}
+                                <Icon name="chevron-down" size={13} />
+                            </button>
+                        {/if}
+                        {#if !albumInfo?.description && !discovery.bio}
+                            <p class="pane-empty">Nothing written about this record yet.</p>
+                        {/if}
                     {/if}
                 </div>
-
-                <!-- save the file(s) you're already streaming (no re-search) -->
-                <div class="actions-row">
-                    <SaveMenu align="down" />
-                </div>
-            {/if}
-
-            <!-- queue / album tracklist -->
-            {#if player.queue.length > 1}
-                <div class="section">
-                    <div class="lab">{albumMode ? "From the album" : "Queue"}</div>
-                    <div class="list">
-                        {#each player.queue as item, i}
-                            <button class="row" class:now={i === player.queueIndex} onclick={() => jumpToQueueIndex(i)}>
-                                <span class="n">
-                                    {#if i === player.queueIndex}
-                                        <span
-                                            class="eq"
-                                            class:active={ui.nowPlaying && player.status === "playing" && ui.windowActive}
-                                        ><b></b><b></b><b></b></span>
-                                    {:else}{i + 1}{/if}
-                                </span>
-                                <span class="nm" title={item.title}>{item.title}</span>
-                                <span class="du">{fmtTime(item.duration)}</span>
-                            </button>
-                        {/each}
-                    </div>
-                </div>
-            {/if}
-
-            <!-- Discovery: more from the artist -->
-            {#if moreAlbums.length}
-                <div class="section">
-                    <div class="lab divlab">More from {artistName}</div>
-                    <div class="grid2">
-                        {#each moreAlbums as al}
-                            <button class="mini" title="Play {al.title}" onclick={() => streamCatalogAlbum(al)}>
-                                <div class="art">
-                                    {#if al.cover && !artBroken[al.cover]}<img src={al.cover} alt="" loading="lazy" draggable="false" onerror={() => markArtBroken(al.cover)} />{/if}
-                                </div>
-                                <div class="mt">{al.title}</div>
-                                <div class="my">{albumYear(al)}{al.record_type && al.record_type !== "album" ? ` · ${al.record_type}` : ""}</div>
-                            </button>
-                        {/each}
-                    </div>
-                </div>
-            {/if}
-
-            <!-- Discovery: fans also like -->
-            {#if relatedArtists.length}
-                <div class="section">
-                    <div class="lab divlab">Fans also like</div>
-                    <div class="fans">
-                        {#each relatedArtists as ar}
-                            <button class="fan" title={ar.name} onclick={() => openCatalogArtist(ar.id, ar)}>
-                                <div class="av">
-                                    {#if ar.picture}<img src={ar.picture} alt="" loading="lazy" draggable="false" />{/if}
-                                </div>
-                                <div class="fn">{ar.name}</div>
-                            </button>
-                        {/each}
-                    </div>
-                </div>
-            {/if}
-
-            <!-- Discovery: about the artist -->
-            {#if discovery.artistId && (discovery.picture || discovery.albumCount)}
-                <div class="section">
-                    <div class="lab divlab">About the artist</div>
-                    <div class="aboutcard">
-                        <button class="bandphoto" title="Open {artistName}" onclick={openDiscoveryArtist}>
-                            {#if discovery.picture}
-                                <img src={discovery.picture} alt="" loading="lazy" draggable="false" />
-                            {:else}
-                                <span class="ph"><Icon name="music" size={28} /></span>
-                            {/if}
-                        </button>
-                        <div class="about-text">
-                            <button class="nm" onclick={openDiscoveryArtist}>{artistName}</button>
-                            {#if discovery.bio}
-                                <div class="bio">
-                                    <p class:clamped={!bioExpanded}>{discovery.bio}</p>
-                                    <button class="more" onclick={() => (bioExpanded = !bioExpanded)}>
-                                        {bioExpanded ? "Show less" : "Read more"}
-                                    </button>
-                                </div>
-                            {/if}
-                        </div>
-                        <div class="about-body">
-                            <div class="st"><b>{discovery.albumCount ?? "—"}</b>releases</div>
-                            <div class="st"><b>{fmtFans(discovery.fans)}</b>fans</div>
-                            <div class="st"><b>{inLibraryCount}</b>in library</div>
-                        </div>
-                    </div>
-                </div>
-            {/if}
+            {/key}
         {:else}
             <div class="empty">
                 <Icon name="music" size={30} />
@@ -436,6 +951,31 @@
         {/if}
         {/if}
     </div>
+    </div>
+
+    <!-- Drag the panel's left edge to widen it. Only while expanded: the rail
+         is a fixed size, and a resize handle on it would promise otherwise. -->
+    {#if ui.nowPlaying}
+        <div
+            class="grip"
+            class:on={dragging}
+            role="separator"
+            aria-orientation="vertical"
+            aria-label="Resize Now Playing panel"
+            title="Drag to resize · double-click to reset"
+            bind:this={gripEl}
+            onpointerdown={onGripDown}
+            onpointermove={onGripMove}
+            onpointerup={onGripUp}
+            onpointercancel={onGripUp}
+            ondblclick={resetWidth}
+        ></div>
+        {#if dragging}
+            <span class="wtag" class:snap={atDefault}>
+                {ui.nowPlayingWidth}{atDefault ? " · default" : ""}
+            </span>
+        {/if}
+    {/if}
 </aside>
 
 <style>
@@ -448,26 +988,278 @@
         overflow: hidden;
         min-height: 0;
         position: relative;
-        /* Fixed width so the panel keeps its shape and slides off-screen when
-           the grid column collapses to 0, rather than squishing its content.
-           (The grid column uses --nowplaying-width, which animates 340→0.) */
-        width: 340px;
+        /* The panel now COLLAPSES to a rail rather than sliding off-screen, so
+           its width tracks the grid column at every point instead of staying
+           fixed while the column animates to zero underneath it. The column and
+           this share one clock (App.svelte, 0.28s) so nothing lags. */
+        width: var(--nowplaying-width);
         justify-self: start;
-        visibility: visible;
-        transition:
-            transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
-            opacity 0.24s ease,
-            visibility 0s linear;
+        transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
     }
-    .nowplaying.closed {
-        transform: translateX(calc(100% + 8px));
-        opacity: 0;
-        visibility: hidden;
+    /* A drag must track the pointer exactly, not trail an easing curve. */
+    .nowplaying.dragging {
+        transition: none;
+    }
+
+    /* The record, washing the whole panel behind the glass. Blurred hard: this
+       is a backdrop for text, not a second showing of the artwork. */
+    .bleed {
+        position: absolute;
+        inset: 0;
+        z-index: 0;
+        overflow: hidden;
         pointer-events: none;
-        transition:
-            transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
-            opacity 0.24s ease,
-            visibility 0s linear 0.28s;
+    }
+    .bleed img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        filter: blur(17px) saturate(1.25);
+        opacity: 0.85;
+        transform: scale(1.08);
+    }
+    .bleed-fade {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(
+            rgba(24, 24, 24, 0.15) 0,
+            rgba(24, 24, 24, 0.75) 38%,
+            var(--bg-player) 78%
+        );
+    }
+
+    /* Both views stack in the same box and cross-fade, on the left sidebar's
+       own label clock — the collapse itself is the width animation above. */
+    .rail-view,
+    .full-view {
+        position: absolute;
+        inset: 0;
+        z-index: 1;
+        display: flex;
+        flex-direction: column;
+        min-height: 0;
+        transition: opacity 0.15s ease;
+    }
+    .rail-view {
+        opacity: 0;
+        pointer-events: none;
+    }
+    .nowplaying.collapsed .full-view {
+        opacity: 0;
+        pointer-events: none;
+    }
+    .nowplaying.collapsed .rail-view {
+        opacity: 1;
+        pointer-events: auto;
+    }
+
+    /* ---- the shared glass recipe, same numbers as GlassBar.svelte ---- */
+    .glass {
+        background: rgba(20, 20, 24, 0.28);
+        backdrop-filter: blur(12px) saturate(1.7);
+        -webkit-backdrop-filter: blur(12px) saturate(1.7);
+        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
+    }
+
+    /* The transfer, as a hairline along the glass bar's bottom edge — the same
+       object in the rail and in the expanded header, so a download reads the
+       same whichever state the panel is in. */
+    .hairline {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: 2px;
+        background: rgba(255, 255, 255, 0.07);
+        overflow: hidden;
+    }
+    .hairline i {
+        display: block;
+        height: 100%;
+        width: var(--buf, 0%);
+        background: linear-gradient(90deg, var(--accent), var(--accent-hover));
+        /* linear, not eased: it tracks real progress rather than overshooting
+           it and easing back. */
+        transition: width 240ms linear, opacity 400ms ease;
+    }
+    /* No byte count yet, so there is no percentage to be honest about. */
+    .hairline.seek i {
+        width: 38%;
+        animation: hairsweep 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+    }
+    @keyframes hairsweep {
+        0% { transform: translateX(-100%); }
+        100% { transform: translateX(365%); }
+    }
+    /* Done is not "full forever" — it leaves. */
+    .hairline.done i {
+        opacity: 0;
+    }
+    @media (prefers-reduced-motion: reduce) {
+        .hairline.seek i {
+            animation: none;
+        }
+    }
+
+    /* ---- the rail ---- */
+    .rail-bar {
+        position: relative;
+        height: 46px;
+        flex: none;
+        display: grid;
+        place-items: center;
+        z-index: 5;
+    }
+    .rail-edge {
+        position: absolute;
+        left: 3px;
+        top: 52px;
+        bottom: 10px;
+        width: 3px;
+        border-radius: 2px;
+        background: rgba(255, 255, 255, 0.09);
+        overflow: hidden;
+        z-index: 4;
+    }
+    .rail-edge i {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: var(--p, 0%);
+        border-radius: 2px;
+        background: var(--accent-hover);
+        transition: height 240ms linear;
+    }
+    .rail-body {
+        flex: 1;
+        min-height: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 10px;
+        padding: 10px 0 13px;
+        position: relative;
+        z-index: 2;
+    }
+    .rail-cover {
+        width: calc(var(--nowplaying-rail) - 20px);
+        aspect-ratio: 1;
+        border-radius: 6px;
+        overflow: hidden;
+        flex: none;
+        padding: 0;
+        transition: transform var(--art-motion);
+    }
+    .rail-cover:hover,
+    .rail-cover:focus-visible {
+        transform: scale(var(--art-grow));
+    }
+    .rail-cover img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+    .rail-dots {
+        display: flex;
+        flex-direction: column;
+        gap: 7px;
+        align-items: center;
+    }
+    .rail-dot {
+        position: relative;
+        width: 30px;
+        height: 30px;
+        border-radius: 8px;
+        display: grid;
+        place-items: center;
+        color: rgba(255, 255, 255, 0.55);
+        transition: background 120ms ease, color 120ms ease;
+    }
+    .rail-dot:hover {
+        background: rgba(255, 255, 255, 0.1);
+        color: #fff;
+    }
+    .rail-badge {
+        position: absolute;
+        top: -3px;
+        right: -3px;
+        min-width: 14px;
+        height: 14px;
+        padding: 0 3px;
+        border-radius: 999px;
+        background: var(--accent);
+        color: #fff;
+        font-size: 8.5px;
+        font-weight: 700;
+        display: grid;
+        place-items: center;
+        /* Reads as a badge ON the icon rather than a dot beside it. */
+        box-shadow: 0 0 0 2px var(--bg-player);
+    }
+    .rail-spacer {
+        flex: 1;
+    }
+    .rail-title {
+        writing-mode: vertical-rl;
+        transform: rotate(180deg);
+        font-size: 10.5px;
+        font-weight: 600;
+        color: var(--text-secondary);
+        max-height: 190px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
+    }
+    .rail-title b {
+        color: #fff;
+        font-weight: 700;
+    }
+
+    /* ---- drag handle ---- */
+    .grip {
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        width: 9px;
+        z-index: 30;
+        cursor: col-resize;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        touch-action: none;
+    }
+    .grip::before {
+        content: "";
+        width: 3px;
+        height: 34px;
+        border-radius: 2px;
+        background: transparent;
+        transition: background 150ms ease, height 150ms cubic-bezier(0.22, 1, 0.36, 1);
+    }
+    .grip:hover::before,
+    .grip.on::before {
+        background: color-mix(in srgb, var(--accent-hover) 75%, transparent);
+        height: 62px;
+    }
+    .wtag {
+        position: absolute;
+        left: 14px;
+        top: 56px;
+        z-index: 31;
+        padding: 3px 8px;
+        border-radius: 999px;
+        background: rgba(0, 0, 0, 0.72);
+        backdrop-filter: blur(8px);
+        font-size: 10.5px;
+        font-weight: 700;
+        font-variant-numeric: tabular-nums;
+        pointer-events: none;
+    }
+    .wtag.snap {
+        color: var(--accent-hover);
     }
 
     /* Frosted-glass header floating over the scrolling content: backdrop-filter
@@ -481,17 +1273,45 @@
         height: 46px;
         display: flex;
         align-items: center;
-        justify-content: space-between;
-        padding: 0 14px;
+        gap: 9px;
+        padding: 0 11px;
         z-index: 5;
-        background: rgba(20, 20, 24, 0.28);
-        backdrop-filter: blur(20px) saturate(1.7);
-        -webkit-backdrop-filter: blur(20px) saturate(1.7);
-        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
     }
-    .np-title {
+    .np-headmid {
+        min-width: 0;
+        flex: 1;
+        overflow: hidden;
+    }
+    /* The status swaps with the glass bar's own breadcrumb motion, so a change
+       of peer or state reads as an arrival rather than a flicker. Keyed on the
+       text, so it only replays when the line actually changes. */
+    .np-status {
+        display: block;
+        font-size: 10.5px;
+        font-weight: 600;
+        color: rgba(255, 255, 255, 0.55);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        font-variant-numeric: tabular-nums;
+        animation: statusin 300ms cubic-bezier(0.22, 1, 0.36, 1) both;
+    }
+    @keyframes statusin {
+        from { opacity: 0; transform: translateX(11px); }
+        to { opacity: 1; transform: none; }
+    }
+    @media (prefers-reduced-motion: reduce) {
+        .np-status {
+            animation: none;
+        }
+    }
+    .np-from {
+        display: block;
         font-size: 13px;
         font-weight: 600;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
         text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
     }
     .np-icon {
@@ -505,6 +1325,11 @@
     .np-icon:hover { background: var(--bg-highlight); color: var(--text-primary); }
 
     .np-scroll {
+        /* Fills the absolutely-positioned .full-view rather than sizing to its
+           content, so the pane scrolls inside the panel and the glass header
+           keeps overlaying it. */
+        flex: 1;
+        min-height: 0;
         overflow-y: auto;
         overflow-anchor: none;
         overscroll-behavior: none;
@@ -665,6 +1490,17 @@
         align-items: end;
         gap: 2px;
         height: 38px;
+        /* It is a control now, not a picture of one. */
+        cursor: pointer;
+        touch-action: none;
+    }
+    .wave:focus-visible {
+        outline: 2px solid var(--accent-hover);
+        outline-offset: 3px;
+        border-radius: 2px;
+    }
+    .wave.scrubbing {
+        cursor: grabbing;
     }
     .wave i {
         flex: 0 0 2px;
@@ -699,72 +1535,416 @@
     .chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
 
     /* source card */
-    .src {
-        background: var(--bg-elevated);
-        border-radius: 10px;
-        padding: 12px;
-        display: flex;
-        flex-direction: column;
-        gap: 10px;
-    }
-    .src-lab {
-        font-size: 11px;
-        letter-spacing: 0.1em;
-        text-transform: uppercase;
-        color: var(--text-muted);
-        font-weight: 600;
-    }
-    .peer { display: flex; align-items: center; gap: 10px; min-width: 0; }
-    .av {
-        width: 32px;
-        height: 32px;
-        border-radius: 9px;
-        flex: 0 0 auto;
-        background: linear-gradient(135deg, var(--accent), var(--accent-hover));
-        display: grid;
-        place-items: center;
-        font-weight: 700;
-        font-size: 13px;
-        color: #04222f;
-    }
-    .who {
-        font-size: 13px;
-        font-weight: 600;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-    .buf { display: flex; flex-direction: column; gap: 5px; }
-    .buf .bar { height: 6px; border-radius: 3px; background: var(--bg-highlight); overflow: hidden; }
-    .buf .bar i {
-        display: block;
-        height: 100%;
-        border-radius: 3px;
-        background: linear-gradient(90deg, var(--accent), var(--accent-hover));
-    }
-    .buf .meta {
-        display: flex;
-        justify-content: space-between;
-        font-size: 11px;
-        color: var(--text-muted);
-        font-variant-numeric: tabular-nums;
-    }
-
     /* save action row */
-    .actions-row {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-    }
-
     /* tracklist */
-    .section { display: flex; flex-direction: column; gap: 10px; }
     .lab {
         font-size: 11px;
         letter-spacing: 0.1em;
         text-transform: uppercase;
         color: var(--text-muted);
         font-weight: 600;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 7px;
+    }
+    .lab .cnt {
+        letter-spacing: 0;
+        color: #5c5c5c;
+    }
+    /* Section spacing belongs to the label, not to whatever happens to sit
+       above it — an artist with no social links used to leave the releases
+       heading jammed against the pill, because the gap was living on the
+       chip row that was not rendered. */
+    .pane .lab {
+        margin-top: 18px;
+    }
+    .pane > .lab:first-child {
+        margin-top: 0;
+    }
+
+    /* ---- segmented control ---- */
+    .segwrap {
+        /* Sticky under the 46px glass header: keeping the scroll offset across
+           a pane switch is worthless if the control you just used has scrolled
+           out of reach. The gradient hides rows sliding under it. */
+        position: sticky;
+        top: 46px;
+        z-index: 4;
+        margin: 0 -14px;
+        padding: 7px 14px 8px;
+        /* Glass, not a solid fill: an opaque strip here painted straight over
+           the album bleed and read as a grey band across the artwork. This
+           tints with whatever is behind it exactly as the header does, while
+           still hiding the rows that scroll under it. */
+        background: rgba(20, 20, 24, 0.55);
+        backdrop-filter: blur(12px) saturate(1.7);
+        -webkit-backdrop-filter: blur(12px) saturate(1.7);
+        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
+    }
+    .seg {
+        position: relative;
+        display: flex;
+        background: rgba(0, 0, 0, 0.28);
+        border: 1px solid var(--border);
+        border-radius: 8px;
+        padding: 3px;
+    }
+    .seg-thumb {
+        position: absolute;
+        top: 3px;
+        bottom: 3px;
+        left: 3px;
+        border-radius: 6px;
+        background: color-mix(in srgb, var(--accent) 28%, var(--bg-highlight));
+        transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
+            width 300ms cubic-bezier(0.22, 1, 0.36, 1);
+    }
+    .seg-btn {
+        position: relative;
+        z-index: 1;
+        flex: 1;
+        text-align: center;
+        font-size: 11.5px;
+        font-weight: 700;
+        padding: 6px 4px;
+        border-radius: 6px;
+        color: var(--text-muted);
+        transition: color 160ms ease;
+    }
+    .seg-btn:hover { color: var(--text-secondary); }
+    .seg-btn.on { color: #fff; }
+
+    .pane {
+        display: flex;
+        flex-direction: column;
+        animation: panein 300ms cubic-bezier(0.22, 1, 0.36, 1) both;
+    }
+    @keyframes panein {
+        from { opacity: 0; transform: translateX(var(--dir, 10px)); }
+        to { opacity: 1; transform: none; }
+    }
+    @media (prefers-reduced-motion: reduce) {
+        .pane { animation: none; }
+        .seg-thumb { transition-duration: 1ms; }
+    }
+    .pane-empty {
+        color: var(--text-muted);
+        font-size: 12px;
+        padding: 10px 2px;
+    }
+
+    /* ---- up next ---- */
+    .upnext {
+        display: flex;
+        align-items: center;
+        gap: 9px;
+        width: 100%;
+        padding: 8px;
+        margin-bottom: 12px;
+        border-radius: 7px;
+        background: rgba(0, 0, 0, 0.24);
+        border: 1px solid var(--border);
+        transition: border-color 160ms ease, background 160ms ease;
+    }
+    .upnext:hover {
+        background: rgba(0, 0, 0, 0.34);
+        border-color: color-mix(in srgb, var(--accent-hover) 45%, var(--border));
+    }
+    .upnext img { width: 34px; height: 34px; border-radius: 4px; flex: none; object-fit: cover; }
+    .un-body { min-width: 0; flex: 1; display: block; }
+    .un-lab {
+        display: block;
+        font-size: 9.5px;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        color: var(--text-muted);
+        font-weight: 700;
+    }
+    .un-title {
+        display: block;
+        font-size: 12px;
+        font-weight: 600;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    .un-dur {
+        font-size: 11px;
+        color: var(--text-muted);
+        font-variant-numeric: tabular-nums;
+        flex: none;
+    }
+
+    /* ---- queue extras ---- */
+    .row .own {
+        color: var(--accent-hover);
+        margin-left: 5px;
+        display: inline-flex;
+        vertical-align: -1px;
+    }
+    .row .lis {
+        font-size: 10.5px;
+        color: var(--text-secondary);
+        font-variant-numeric: tabular-nums;
+        padding: 1px 6px;
+        border-radius: 3px;
+        background: color-mix(in srgb, var(--accent) 16%, transparent);
+        flex: none;
+    }
+
+    /* ---- artist pill ---- */
+    .achip {
+        display: flex;
+        /* Block-level, so it tracks the panel width instead of shrinking to
+           its own content at every size. */
+        width: 100%;
+        gap: 11px;
+        align-items: center;
+        padding: 10px;
+        border-radius: var(--radius);
+        background: rgba(0, 0, 0, 0.24);
+        border: 1px solid var(--border);
+        transition: border-color 160ms ease, background 160ms ease;
+    }
+    .achip:hover {
+        background: rgba(0, 0, 0, 0.34);
+        border-color: color-mix(in srgb, var(--accent-hover) 45%, var(--border));
+    }
+    .achip img,
+    .achip-ph {
+        width: 54px;
+        height: 54px;
+        border-radius: 50%;
+        object-fit: cover;
+        flex: none;
+        transition: transform var(--art-motion);
+    }
+    .achip-ph {
+        display: grid;
+        place-items: center;
+        background: var(--bg-highlight);
+        color: var(--text-muted);
+    }
+    .achip:hover img { transform: scale(var(--art-grow)); }
+    .achip-body { min-width: 0; flex: 1; display: block; }
+    .achip-name {
+        display: block;
+        font-weight: 700;
+        font-size: 13.5px;
+        color: var(--text-primary);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    .achip-stats {
+        display: flex;
+        gap: 13px;
+        margin-top: 3px;
+    }
+    /* Once the panel is wide enough the figures use the room instead of
+       huddling against the portrait. */
+    .achip-stats.spread {
+        justify-content: space-between;
+        gap: 8px;
+        padding-right: 4px;
+    }
+    .achip-stats .st { display: flex; flex-direction: column; }
+    .achip-stats .st b {
+        font-size: 13px;
+        font-weight: 700;
+        font-variant-numeric: tabular-nums;
+        line-height: 1.1;
+        color: var(--text-primary);
+    }
+    .achip-stats .st i {
+        font-size: 9.5px;
+        font-style: normal;
+        color: var(--text-muted);
+        text-transform: uppercase;
+        letter-spacing: 0.07em;
+    }
+
+    /* ---- social links: the artist page's own --soc tint model ---- */
+    .socials {
+        display: flex;
+        gap: 4px;
+        flex-wrap: wrap;
+        margin-top: 10px;
+    }
+    .soc {
+        display: grid;
+        place-items: center;
+        width: 29px;
+        height: 29px;
+        border-radius: 50%;
+        color: rgb(var(--soc, 160, 168, 177));
+        transition: background 160ms ease, transform 160ms ease;
+    }
+    .soc:hover {
+        background: rgba(var(--soc, 160, 168, 177), 0.13);
+        transform: translateY(-1px);
+    }
+    @media (prefers-reduced-motion: reduce) {
+        .soc { transition-duration: 1ms; }
+    }
+
+    .showall {
+        width: 100%;
+        text-align: center;
+        font-size: 11.5px;
+        font-weight: 700;
+        padding: 8px;
+        border-radius: 7px;
+        margin-top: 10px;
+        border: 1px solid var(--border);
+        color: var(--text-secondary);
+        transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
+    }
+    .showall:hover {
+        color: #fff;
+        border-color: color-mix(in srgb, var(--accent-hover) 50%, var(--border));
+        background: rgba(0, 0, 0, 0.3);
+    }
+
+    /* Fans-also-like avatars, sized for the panel rather than the artist page. */
+    .av2 {
+        width: 64px;
+        height: 64px;
+        border-radius: 50%;
+        overflow: hidden;
+        background: var(--bg-highlight);
+        transition: transform var(--art-motion);
+    }
+    .fan:hover .av2 { transform: scale(var(--art-grow)); }
+    .av2 img { width: 100%; height: 100%; object-fit: cover; }
+    .fn {
+        font-size: 10.5px;
+        margin-top: 5px;
+        text-align: center;
+        color: var(--text-secondary);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    /* The album page's credits block, verbatim, so a record reads the same in
+       both places. */
+    .credits {
+        margin-top: 18px;
+        color: var(--text-muted);
+        font-size: 11.5px;
+        line-height: 1.7;
+    }
+    .credits .clab {
+        display: block;
+        font-size: 10px;
+        font-weight: 800;
+        letter-spacing: 0.1em;
+        text-transform: uppercase;
+        color: #5e5e5e;
+        margin-bottom: 4px;
+    }
+
+    p.bio {
+        margin: 8px 0 0;
+        font-size: 12.5px;
+        line-height: 1.55;
+        color: var(--text-secondary);
+    }
+    p.bio.clamped {
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        line-clamp: 3;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+    }
+    .pane .more {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        margin-top: 5px;
+        font-size: 11.5px;
+        font-weight: 700;
+        color: var(--accent-hover);
+    }
+    .pane .more :global(svg) {
+        transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
+    }
+    .pane .more.open :global(svg) {
+        transform: rotate(180deg);
+    }
+
+    /* ---- transfer detail, on hovering the header ---- */
+    .headzone {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        z-index: 6;
+    }
+    .xpop {
+        position: absolute;
+        top: 46px;
+        left: 0;
+        right: 0;
+        z-index: -1;
+        padding: 10px 12px 12px;
+        background: rgba(22, 22, 26, 0.94);
+        backdrop-filter: blur(16px) saturate(1.5);
+        -webkit-backdrop-filter: blur(16px) saturate(1.5);
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.05);
+        opacity: 0;
+        transform: translateY(-8px);
+        pointer-events: none;
+        transition: opacity 150ms ease, transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
+    }
+    .headzone:hover .xpop,
+    .headzone:focus-within .xpop {
+        opacity: 1;
+        transform: none;
+        pointer-events: auto;
+    }
+    .xrow { display: flex; align-items: center; gap: 9px; }
+    .xav {
+        width: 26px;
+        height: 26px;
+        border-radius: 50%;
+        flex: none;
+        display: grid;
+        place-items: center;
+        font-size: 11px;
+        font-weight: 700;
+        background: color-mix(in srgb, var(--accent) 42%, #333);
+        color: #fff;
+    }
+    .xwho { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; }
+    .xwho span {
+        display: block;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    .xwho small {
+        display: block;
+        font-weight: 600;
+        font-size: 10.5px;
+        color: var(--text-muted);
+        font-variant-numeric: tabular-nums;
+    }
+    .xbar {
+        height: 4px;
+        border-radius: 2px;
+        background: #2b2b2b;
+        overflow: hidden;
+        margin-top: 9px;
+    }
+    .xbar i {
+        display: block;
+        height: 100%;
+        border-radius: 2px;
+        background: var(--accent-hover);
+        transition: width 240ms linear;
     }
     .list { display: flex; flex-direction: column; }
     .row {
@@ -804,7 +1984,13 @@
     @media (prefers-reduced-motion: reduce) { .eq.active b { animation: none; } }
 
     /* discovery: more-from-artist grid */
-    .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+    /* Gains a third column once the panel is dragged wide enough to carry one
+       (--cols is set per render from the panel width). */
+    .grid2 {
+        display: grid;
+        grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
+        gap: 12px;
+    }
     /* min-width:0 lets both columns stay an equal 1fr; without it a long
        (nowrap) title forces its column wider and shrinks the other. */
     .mini { text-align: left; min-width: 0; }
@@ -835,15 +2021,6 @@
        space-between fits all five within the panel with no cutoff. */
     .fans { display: flex; justify-content: space-evenly; padding: 4px 0; }
     .fan { width: 52px; text-align: center; }
-    .fan .av {
-        width: 52px;
-        height: 52px;
-        border-radius: 50%;
-        overflow: hidden;
-        background: var(--bg-highlight);
-    }
-    .fan .av img { width: 100%; height: 100%; object-fit: cover; display: block; }
-    .fan:hover .av { outline: 2px solid var(--accent); outline-offset: 2px; }
     .fan .fn {
         font-size: 11px;
         margin-top: 7px;
@@ -854,94 +2031,11 @@
     }
 
     /* discovery: about the artist */
-    .aboutcard {
-        display: block;
-        width: 100%;
-        border-radius: 12px;
-        overflow: hidden;
-        background: var(--bg-elevated);
-    }
     /* Full square Deezer image, uncropped (square img in a square box), with a
        tall bottom fade to the card colour so the photo melts into the text. */
-    .bandphoto {
-        display: block;
-        position: relative;
-        width: 100%;
-        aspect-ratio: 1;
-        text-align: left;
-    }
-    .bandphoto img { width: 100%; height: 100%; object-fit: cover; display: block; }
-    .bandphoto .ph {
-        width: 100%;
-        aspect-ratio: 1;
-        display: grid;
-        place-items: center;
-        color: var(--text-muted);
-    }
-    .bandphoto::after {
-        content: "";
-        position: absolute;
-        inset: 0;
-        pointer-events: none;
-        background: linear-gradient(
-            to top,
-            var(--bg-elevated) 6%,
-            color-mix(in srgb, var(--bg-elevated) 55%, transparent) 22%,
-            transparent 48%
-        );
-    }
-
     /* Name + bio ride up into the faded bottom of the photo, so the text
        reads as emerging from the image. */
-    .about-text {
-        position: relative;
-        z-index: 2;
-        margin-top: -52px;
-        padding: 0 13px;
-    }
-    .about-text .nm {
-        display: block;
-        text-align: left;
-        font-size: 19px;
-        font-weight: 700;
-        color: #fff;
-        text-shadow: 0 1px 8px rgba(0, 0, 0, 0.75);
-        margin-bottom: 8px;
-    }
-    .about-text .nm:hover { text-decoration: underline; }
-
     .bio { padding: 0 0 2px; }
-    .bio p {
-        margin: 0;
-        font-size: 12.5px;
-        line-height: 1.5;
-        color: var(--text-secondary);
-    }
-    .bio p.clamped {
-        display: -webkit-box;
-        -webkit-line-clamp: 3;
-        line-clamp: 3;
-        -webkit-box-orient: vertical;
-        overflow: hidden;
-    }
-    .bio .more {
-        margin-top: 4px;
-        font-size: 12px;
-        font-weight: 600;
-        color: var(--accent-hover);
-    }
-    .bio .more:hover { text-decoration: underline; }
-
-    .about-body { display: flex; gap: 18px; padding: 12px 13px 13px; }
-    .about-body .st { font-size: 11px; color: var(--text-muted); }
-    .about-body .st b {
-        display: block;
-        color: var(--text-primary);
-        font-size: 14px;
-        font-weight: 700;
-        font-variant-numeric: tabular-nums;
-    }
-
     .empty {
         display: flex;
         flex-direction: column;
diff --git a/src/lib/state.svelte.js b/src/lib/state.svelte.js
index 8127dea..fa4fe15 100644
--- a/src/lib/state.svelte.js
+++ b/src/lib/state.svelte.js
@@ -24,12 +24,37 @@ export const app = $state({
     showLogin: false,
 });
 
+/** Now Playing panel width: the default the magnet snaps back to, and the
+ *  bounds the drag handle clamps between. Exported so the panel and the grid
+ *  can never disagree about them. */
+export const NP_WIDTH_DEFAULT = 340;
+export const NP_WIDTH_MIN = 272;
+export const NP_WIDTH_MAX = 560;
+const NP_WIDTH_KEY = "soulstream.nowPlayingWidth";
+
+function readPanelWidth() {
+    try {
+        const raw = Number(localStorage.getItem(NP_WIDTH_KEY));
+        if (!Number.isFinite(raw) || raw <= 0) return NP_WIDTH_DEFAULT;
+        return Math.max(NP_WIDTH_MIN, Math.min(NP_WIDTH_MAX, raw));
+    } catch {
+        return NP_WIDTH_DEFAULT;
+    }
+}
+
 export const ui = $state({
     view: "home",
     albumId: null, // selected album in Library view
     playlistId: null, // selected playlist in Playlist view
-    nowPlaying: true, // right-side Now Playing panel open
+    // The Now Playing panel is EXPANDED vs COLLAPSED, never gone: collapsing it
+    // leaves the rail (see NowPlaying.svelte), the same way the left nav
+    // collapses to an icon rail rather than disappearing.
+    nowPlaying: true,
     sidebarCollapsed: false, // left nav collapsed to an icon rail
+    // User-dragged width of the expanded panel. Persisted, unlike the other ui
+    // flags: a width you set by hand and lost on every launch would be worse
+    // than not being able to set it at all.
+    nowPlayingWidth: readPanelWidth(),
     // Full-window artwork lightbox. `null` when closed; otherwise a descriptor
     // of whatever cover to show — { src, local, title, subtitle } — so any
     // surface can open it, not only the playing track.
@@ -44,6 +69,17 @@ export function toggleNowPlaying() {
     ui.nowPlaying = !ui.nowPlaying;
 }
 
+/** Set the expanded panel's width, clamped and remembered. */
+export function setNowPlayingWidth(px) {
+    const w = Math.max(NP_WIDTH_MIN, Math.min(NP_WIDTH_MAX, Math.round(px)));
+    ui.nowPlayingWidth = w;
+    try {
+        localStorage.setItem(NP_WIDTH_KEY, String(w));
+    } catch {
+        // A blocked storage quota must not break resizing for the session.
+    }
+}
+
 export function toggleSidebar() {
     ui.sidebarCollapsed = !ui.sidebarCollapsed;
 }
@@ -525,23 +561,26 @@ export function coverLoadError(
     }
 }
 
-/** Cover URL to display for a currently-playing catalog item. Kicks off an
- * idempotent high-res upgrade for its album and returns the best URL to show
- * now — the verified upgrade once resolved, else the instant Deezer cover. The
- * player surfaces proxy the returned URL through getCatalogArt; because this
- * reads the reactive coverUpgrades map, their effect re-runs and re-proxies at
- * full resolution the moment the upgrade lands. */
+/**
+ * Cover URL to display for a currently-playing catalog item — the record's OWN
+ * asset, at the largest size that asset comes in.
+ *
+ * It used to also kick off a cover "upgrade", which resolves a better image by
+ * ARTIST + TITLE. That is the identity trap: an artist can have several records
+ * under one title — every self-titled Weezer album is "Weezer" — and the
+ * resolver hands back whichever one the provider answers with, so all seven
+ * played back showing the Green Album's art. The upgrade map is keyed by the
+ * original cover URL and was innocent; the value put in it was wrong.
+ *
+ * A name cannot identify a record, so the substitution is gone. `hqCover`
+ * rewrites the same Deezer asset to its 1000x1000 variant, which is a genuine
+ * quality win with no identity risk, and is more than the panel needs even
+ * dragged to its widest.
+ */
 export function playerArtSource(item) {
     const url = item?.artUrl;
     if (!url) return null;
-    if (item.album) {
-        resolveCovers(
-            [{ cover: url, title: item.album }],
-            item.artist ?? "",
-            { sticky: true },
-        );
-    }
-    return coverUpgrades[url] ?? url;
+    return hqCover(url);
 }
 
 // Artist heroes have their own proxy because provider fallbacks may be finished
@@ -2388,6 +2427,10 @@ export const discovery = $state({
     albums: [], // discography → "More from"
     related: [], // "Fans also like"
     bio: null, // Wikipedia summary → "About the artist"
+    // Declared links for the artist ({ kind, url }), already fetched as part of
+    // the artist page below — kept rather than discarded so the Now Playing
+    // panel can show the same chips the artist page does.
+    socials: [],
 });
 
 const bioCache = new Map(); // normalized name → bio text (or null)
@@ -2512,6 +2555,7 @@ export async function loadDiscovery(artistName) {
         discovery.albumCount = null;
         discovery.albums = [];
         discovery.related = [];
+        discovery.socials = [];
         discovery.bio = bioCache.has(norm) ? touchCache(bioCache, norm) : null;
     }
 
@@ -2599,6 +2643,7 @@ export async function loadDiscovery(artistName) {
             discovery.fans = page.artist.fans ?? null;
             discovery.albumCount = page.artist.album_count ?? page.albums.length;
             discovery.albums = page.albums ?? [];
+            discovery.socials = page.socials ?? [];
             discovery.pageLoaded = true;
             discovery.pageWanted = false;
         }
@@ -3772,6 +3817,41 @@ function trimTransferHistory(store, maxTerminal, waitUntilIdle = false) {
     for (const transfer of terminal.slice(maxTerminal)) delete store[transfer.id];
 }
 
+// ---- streaming rate ------------------------------------------------------
+// `player.streamSpeed` is measured here because nothing upstream reports it.
+// Samples are [timestamp, bytesReceived] over a rolling window, so a transfer
+// that stalls decays toward zero instead of reporting its last burst forever,
+// and a bursty peer reads as one speed rather than a flickering number.
+const RATE_WINDOW_MS = 1500;
+let rateSamples = [];
+
+function resetStreamRate() {
+    rateSamples = [];
+    player.streamSpeed = 0;
+}
+
+function noteStreamRate(received) {
+    const now = performance.now();
+    // A new file restarts the measurement: without this, the first sample of
+    // the next track is compared against the last of the previous one.
+    if (rateSamples.length && received < rateSamples[rateSamples.length - 1][1]) {
+        rateSamples = [];
+    }
+    rateSamples.push([now, received]);
+    while (rateSamples.length > 2 && now - rateSamples[0][0] > RATE_WINDOW_MS) {
+        rateSamples.shift();
+    }
+}
+
+function streamRate() {
+    if (rateSamples.length < 2) return 0;
+    const [t0, b0] = rateSamples[0];
+    const [t1, b1] = rateSamples[rateSamples.length - 1];
+    const secs = (t1 - t0) / 1000;
+    if (secs <= 0) return 0;
+    return Math.max(0, (b1 - b0) / secs);
+}
+
 export const player = $state({
     status: "idle", // idle | buffering | playing | paused
     track: null, // { title, sub, source: 'stream'|'local' }
@@ -3785,6 +3865,11 @@ export const player = $state({
     // streaming buffer info
     streamReceived: 0,
     streamTotal: 0,
+    // Bytes/sec, DERIVED here rather than reported: the `soulseek:stream` event
+    // carries only {received, total, done}, and unlike the download path there
+    // is no `speed_bps` to read. 0 means "not measured yet" — the panel shows
+    // no rate rather than a zero, because a fresh stream is not a stalled one.
+    streamSpeed: 0,
     error: "",
     // album play queue (local tracks)
     queue: [],
@@ -4133,11 +4218,17 @@ export function initEvents() {
     });
 
     api.onEvent("soulseek:stream", (s) => {
+        // Rate is measured here because nothing upstream reports it. A rolling
+        // average over ~1.5s of samples, not the instantaneous delta: Soulseek
+        // transfers arrive in bursts, and a per-event figure reads as a number
+        // flickering between 0 and several MB/s rather than a speed.
+        noteStreamRate(s.received);
         latestStreamReceived = s.received;
         latestStreamTotal = s.total;
         if (ui.windowActive) {
             player.streamReceived = s.received;
             player.streamTotal = s.total;
+            player.streamSpeed = streamRate();
         }
         const cur = player.queue[player.queueIndex];
         if (s.done) {
@@ -4311,6 +4402,7 @@ export async function playLocalFile(path, title, subLabel, artPath = null) {
     player.status = "buffering";
     player.duration = null;
     player.streamTotal = 0;
+    resetStreamRate();
     loadWaveform(path);
     setAccentFromArt(artPath);
     await api.playLocal(path, null);
@@ -4356,6 +4448,7 @@ function playQueueIndex(i) {
         // Remote track streamed from a peer while it downloads to cache.
         player.streamReceived = 0;
         player.streamTotal = item.stream.size;
+        resetStreamRate();
         if ("trackId" in item) player.catalogRef.trackId = item.trackId;
         appendedNextPath = null;
         setAccentFromArtUrl(item.artUrl ?? null);
@@ -4462,6 +4555,7 @@ function advanceGaplessly() {
         player.track = { title: item.title, sub: item.sub, source: "stream", path: item.path };
         player.streamReceived = 0;
         player.streamTotal = 0;
+        resetStreamRate();
         if ("trackId" in item) player.catalogRef.trackId = item.trackId;
         setAccentFromArtUrl(item.artUrl ?? null);
         loadStreamWaveform(item);
diff --git a/src/styles/global.css b/src/styles/global.css
index 1803178..c7576cb 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -86,6 +86,9 @@
     --sidebar-width: 232px;
     --player-height: 88px;
     --nowplaying-width: 340px;
+    /* What the Now Playing panel collapses TO. It never collapses to zero —
+       see the note in App.svelte and the rail in NowPlaying.svelte. */
+    --nowplaying-rail: 64px;
 }
 
 /* Floating overlay scrollbar (see src/lib/scrollbar.js). The native bar is