fix(ui): softer chrome-gradient falloff + segmented media toggle (#1478)

Two operator-flagged polish items from the Vuetify-4 review:

Gradient: reshape the nav + sub-header fade from a near-linear ramp to a
hold-then-soft-drop profile — hold high opacity (0.92 → seam 0.68) through the
bulk of the chrome, then ease to transparent over a small section at the bottom
with an intermediate stop, so it tails off softly instead of running a straight
line into a hard edge. Raising the shared --fc-chrome-seam also makes the tab
strips more legible over scrolling content.

Media toggle: FC's global VBtn { rounded: 'pill' } default made Vuetify 4
pill-round each SEGMENT of the All/Images/Videos v-btn-toggle individually, so
the rounded ends collided at the joins. Square the inner segments and clip the
group to one 8px outline — a proper segmented control.

Both are colour/border-radius only — no control height changes, so the filter
bar height and the nav offset (--fc-nav-h) are untouched.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/src/styles/app.css

@@ -77,7 +77,13 @@
    legible tabs/controls over scrolling content), lower it for a lighter fade. */
 :root {
   --fc-chrome-rgb: 20, 23, 26;   /* obsidian #14171A — matches the TopNav */
-  --fc-chrome-seam: 0.46;        /* alpha where the nav hands off to the sub-header */
+  /* Alpha where the nav hands off to the sub-header — also the "hold" level of
+     the fade. The chrome stays fairly opaque (0.92 → this) through the bulk of
+     its height, then drops to transparent in a small eased section at the very
+     bottom (see the multi-stop gradients), so it reads as a slow falloff that
+     tails off softly rather than a straight line to a hard edge (operator
+     2026-07-13). Raise for heavier/​more-legible chrome, lower for a lighter fade. */
+  --fc-chrome-seam: 0.68;
   /* Actual TopNav height, measured live (ResizeObserver in TopNav.vue) and used
      by full-height workspaces (Explore/Subscriptions: calc(100vh - var)) and by
      every sticky sub-header pinned beneath the nav (top: var). This was a
@@ -92,9 +98,16 @@
    controls legible as the fill thins toward transparent — the solid-surface
    bars it replaces had none, so it must live here. */
 .fc-chrome-continues {
+  /* Continues the nav's fade: HOLDS near the seam alpha through the first ~55%
+     (subtle), then eases down to transparent over the last ~45% with an
+     intermediate stop so the tail is soft — no hard line at the bottom edge
+     (operator 2026-07-13). Percentage stops keep the shape spanning the
+     element's height (survives the filter bar's expanding refine panel). */
   background: linear-gradient(
     to bottom,
     rgba(var(--fc-chrome-rgb), var(--fc-chrome-seam)) 0%,
+    rgba(var(--fc-chrome-rgb), 0.60) 55%,
+    rgba(var(--fc-chrome-rgb), 0.28) 82%,
     rgba(var(--fc-chrome-rgb), 0) 100%
   );
   backdrop-filter: blur(2px);