feat(P5-4): animated chat backgrounds + pause toggle

5 new CSS-only animated backgrounds in the chat background picker:
- Digital Rain: two-layer vertical stripe scroll with parallax (wide
  stripes at 8s, narrow at 4s via single keyframe with split positions)
- Star Drift: three-layer radial-gradient star field drifting diagonally
- Grid Pulse: neon grid lines that expand/contract (backgroundSize keyframe)
- Aurora Flow: large radial gradient bands sweeping across 200% canvas
- Fireflies: three layers of glowing dots drifting across the viewport

All use vanilla-extract keyframes (GPU-composited transforms/positions,
no canvas, no JS timers). prefers-reduced-motion is respected in
getChatBg() by stripping the animation property at call time. A "Pause
Background Animations" toggle in Settings → Appearance provides an
in-app override for the same purpose.

BG labels de-duplicated ("Digital Rain", "Star Drift", "Aurora Flow")
to avoid the duplicate "Stars" and "Aurora" entries that had appeared.
LIGHT anim-fireflies background corrected from near-black #0a0a10 to
warm white #fffdf0. Four unused keyframe exports removed from
Animations.css.ts.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/app/styles/Animations.css.ts

@@ -69,3 +69,39 @@ export const MsgAppearClass = style({
     },
   },
 });
+
+// Animated chat background keyframes
+
+// Animated chat background keyframes
+
+/** Matrix rain — two stripe layers scroll at different speeds for parallax depth */
+export const animRainKeyframe = keyframes({
+  from: { backgroundPosition: '0 0, 0 0' },
+  to: { backgroundPosition: '0 200px, 0 100px' },
+});
+
+/** Drifting stars — three layers drift diagonally */
+export const animStarsDriftKeyframe = keyframes({
+  from: { backgroundPosition: '0 0, 65px 32px, 32px 97px' },
+  to: { backgroundPosition: '130px 130px, 195px 162px, 162px 227px' },
+});
+
+/** Grid pulse — expands/contracts backgroundSize slightly */
+export const animGridPulseKeyframe = keyframes({
+  '0%': { backgroundSize: '60px 60px, 60px 60px, 12px 12px, 12px 12px' },
+  '50%': { backgroundSize: '66px 66px, 66px 66px, 13px 13px, 13px 13px' },
+  '100%': { backgroundSize: '60px 60px, 60px 60px, 12px 12px, 12px 12px' },
+});
+
+/** Aurora — sweeps backgroundPosition in large cycle */
+export const animAuroraKeyframe = keyframes({
+  '0%': { backgroundPosition: '0% 0%' },
+  '50%': { backgroundPosition: '-50% -25%' },
+  '100%': { backgroundPosition: '0% 0%' },
+});
+
+/** Fireflies — three layers of glowing dots drift diagonally */
+export const animFirefliesKeyframe = keyframes({
+  from: { backgroundPosition: '0 0, 120px 80px, 60px 140px' },
+  to: { backgroundPosition: '200px 150px, 320px 230px, 260px 290px' },
+});