feat(ui): motion that answers the finger, and honours reduced-motion; release v6.2.0

The mobile menu becomes a surface you drag rather than one that appears and
vanishes: it tracks the finger, carries its velocity when flicked, can be caught
mid-flight, and resists past the edge instead of stopping dead. Buttons react on
press rather than on release, and the browser's tap delay is gone — nothing here
zooms, so the wait bought nothing.

prefers-reduced-motion, prefers-reduced-transparency and prefers-contrast are
now respected instead of ignored: looping decoration stops, transitions fade
rather than slide, the chat jumps to the newest message, frosted panels turn
solid and edges get drawn. What stops is the movement, never the information —
recording indicators and other status stay.

Also bumps the desktop download buttons to 0.5.0. The version lives in one
constant per source file and tests/desktop-download-links.test.mjs fetches every
generated URL, so the links are proven to serve a real asset rather than merely
looking well-formed.

Claude-Session: https://claude.ai/code/session_01ARFZ9G6P1e1B4w75kFaeNw

src/components/ui/DownloadApps.jsx

@@ -5,7 +5,7 @@
 // The tag is pinned rather than using /releases/latest/download/: the filenames
 // carry the version, so a `latest` link 404s the moment a newer release exists,
 // whereas a pinned tag keeps serving a working (if older) installer.
-const DESKTOP_VERSION = '0.3.0';
+const DESKTOP_VERSION = '0.5.0';
 const DESKTOP_RELEASE = `https://github.com/SecureBitChat/securebit-desktop/releases/download/v${DESKTOP_VERSION}`;
 
 const DownloadApps = () => {

src/components/ui/Header.jsx

@@ -538,12 +538,18 @@ const EnhancedMinimalHeader = ({
     // On the landing the header floats *over* the full-height hero (position
     // fixed), transparent at the top and blurred once scrolled. When connected it
     // falls back to the in-flow sticky bar.
+    // The bar is a material, not a coloured strip: a big surface reads as a thick
+    // one, so it gets a heavy blur, and the saturation bump is what stops a
+    // blurred dark background from going flat grey. Blur and background are
+    // animated together so the bar *materialises* on scroll rather than fading in.
+    const GLASS = 'blur(20px) saturate(180%)';
+    const MATERIALISE = 'background .25s ease, backdrop-filter .25s ease, -webkit-backdrop-filter .25s ease, border-color .25s ease';
     const overlay = { position: 'fixed', top: 0, left: 0, right: 0 };
     const headerStyle = onLanding
         ? (scrolled
-            ? { ...overlay, background: 'rgba(15,15,17,0.72)', backdropFilter: 'blur(14px)', WebkitBackdropFilter: 'blur(14px)', borderBottom: '1px solid rgba(255,255,255,0.06)', transition: 'background .25s ease, backdrop-filter .25s ease, border-color .25s ease' }
-            : { ...overlay, background: 'transparent', backdropFilter: 'none', WebkitBackdropFilter: 'none', borderBottom: '1px solid transparent', transition: 'background .25s ease, backdrop-filter .25s ease, border-color .25s ease' })
-        : { background: 'rgba(18,18,20,0.72)', backdropFilter: 'blur(14px)', WebkitBackdropFilter: 'blur(14px)', borderBottom: '1px solid rgba(255,255,255,0.06)' };
+            ? { ...overlay, background: 'rgba(15,15,17,0.72)', backdropFilter: GLASS, WebkitBackdropFilter: GLASS, borderBottom: '1px solid rgba(255,255,255,0.06)', transition: MATERIALISE }
+            : { ...overlay, background: 'transparent', backdropFilter: 'blur(0px) saturate(100%)', WebkitBackdropFilter: 'blur(0px) saturate(100%)', borderBottom: '1px solid transparent', transition: MATERIALISE })
+        : { background: 'rgba(18,18,20,0.72)', backdropFilter: GLASS, WebkitBackdropFilter: GLASS, borderBottom: '1px solid rgba(255,255,255,0.06)' };
 
     return React.createElement('header', {
         className: onLanding ? 'header-minimal z-50' : 'header-minimal sticky top-0 z-50',