refactor(overlay): single overlay-root convention via Overlay helper

Add components/Overlay.tsx (portals to <body>) and route the in-tree full-screen/
floating holdouts through it — ChatDock, OnboardingWizard, GlassTuner — so they
escape any ancestor stacking context (mask/transform/backdrop-filter) instead of
relying on a bare high z-index. Toaster stays in-tree (it's content-column-scoped
by design, outside the masked scroller); Welcome is a page, not an overlay.

frontend/src/components/Overlay.tsx

@@ -0,0 +1,14 @@
+import { type ReactNode } from "react";
+import { createPortal } from "react-dom";
+
+// The app's overlay-root convention. Any full-screen or floating overlay renders THROUGH this so it
+// escapes whatever ancestor stacking context it was declared in — a `mask-image`/`transform`/`filter`
+// on the page scroller (or a rail's `backdrop-filter`) would otherwise trap a `fixed` child and let
+// the chrome paint over it. That is the exact class of bug that buried the players in E3; the
+// modal/player family already dodges it by portaling to <body>, and this makes that the one blessed
+// way. Stacking among overlays is then decided by DOM order + the z-index token scale (tailwind
+// `zIndex`), never by an ad-hoc magic number. Portals to <body> (the existing de-facto target).
+export default function Overlay({ children }: { children: ReactNode }) {
+  if (typeof document === "undefined") return null;
+  return createPortal(children, document.body);
+}