Anchor ambient visualizer to viewport bottom; occlude via z-index not clip

Drop the --player-height bottom inset so the fixed visualizer fills the
viewport; the inset player bar no longer leaves a page-background gap. The
spacer now occludes via opaque page-surface + z-index. Visualizer no longer
reads --player-height, so spacer.ts coalescing is removed.

DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.cs

@@ -36,10 +36,9 @@ public partial class AudioPlayerBar : ComponentBase, IAsyncDisposable
     // error banner.
     //
     // _miniDock is the minimized FAB container. We observe it in minimized state so
-    // --player-height stays non-zero (the FAB's actual height) and the WaveformVisualizer
-    // clips to the top of the FAB rather than extending to the viewport bottom (fix §1).
-    // The player-spacer's .minimized class uses a hardcoded 60px and ignores the var,
-    // so publishing the FAB height here does not regress the spacer.
+    // --player-height stays non-zero (the FAB's actual height). The player-spacer's
+    // .minimized class uses a hardcoded 60px and ignores the var, so this is belt-and-
+    // braces; the var's sole live consumer is the spacer's .expanded height.
     private ElementReference _playerRoot;
     private ElementReference _miniDock;
     private ElementReference _lastObservedElement;

DeepDrftPublic.Client/Controls/WaveformVisualizer.razor.css

@@ -1,19 +1,20 @@
 /* Full-viewport fixed backdrop. Sits behind the detail content (.mix-detail-foreground is z-index:1)
    and never intercepts pointer events — except the zoom slider, which re-enables them on itself.
 
-   Footer clip (Phase 10 W1, spec §2c): the backdrop must stop cleanly ABOVE the audio player bar so
-   no lava/waveform pixel paints over or under it. `overflow: hidden` clips the canvas to this box, and
-   `bottom` is inset by `--player-height`, which AudioPlayerBar publishes on :root via its ResizeObserver
-   (Interop/layout/spacer.ts). The observer now points at whichever element is live:
-     expanded  → the full player dock (tracks breakpoint reflow + error-banner growth)
-     minimized → the minimized-dock FAB container (~56–60 px)
-   so --player-height is always non-zero while the player is mounted and the clip line follows the bar in
-   BOTH states (fix §1 / p10-reframe-w1-fix). The 0px fallback keeps the backdrop full-height on any
-   page that does not host the player. */
+   Anchored to the viewport bottom (`inset: 0` — fills the whole screen). The chrome that must occlude
+   it paints OVER it on z-index, not by clipping the box: the app bar (z 100), the docked player bar
+   (z 1200/1300), the site footer (z 1 stacking context), and the layout spacer (z 1 stacking context,
+   `--deepdrft-page-surface` background) all sit above this z-0 layer. Where those elements are inset
+   from the screen edges or scrolled below the fold, the visualizer fills the gap continuously — no
+   page-background strip around the inset player bar. `overflow: hidden` clips the canvas to this box.
+
+   NOTE: this box is decoupled from `--player-height` (it no longer reads that var). The renderer's own
+   ResizeObserver therefore never fires on a player-bar height change, so an eased Theater-Mode collapse
+   can no longer clear the GL backing store mid-ease (the former theater-flash source). See
+   Interop/layout/spacer.ts. */
 .mix-waveform-bg {
     position: fixed;
     inset: 0;
-    bottom: var(--player-height, 0px);
     z-index: 0;
     pointer-events: none;
     overflow: hidden;

DeepDrftPublic.Client/Layout/MainLayout.razor.css

@@ -1,7 +1,13 @@
-/* Spacer to prevent content overlap */
+/* Spacer to prevent content overlap. position:relative + z-index:1 establishes a stacking context
+   that paints above the WaveformVisualizer backdrop (fixed, z-index:0), and the opaque page-surface
+   background makes the spacer read as solid page — occluding the visualizer where it sits in flow,
+   the same way the app bar covers the top. Theme-aware alias, so it inverts for free. */
 .player-spacer {
     width: 100%;
     flex-shrink: 0;
+    position: relative;
+    z-index: 1;
+    background: var(--deepdrft-page-surface);
 }
 
 .player-spacer.expanded {