fix: settings dropdowns, background animations, ringing, avatar decorations

Settings dropdowns (Bug #3):
- Add reusable SettingsSelect component using Menu+PopOut+FocusTrap — exact
  same pattern as Message Layout, so all dropdowns look consistent
- Replace raw <select> for Seasonal Theme, UI Font, AFK Timeout, and
  Join & Leave Sounds with SettingsSelect

Animated chat backgrounds bleeding onto content (Bug #6 / #7):
- Remove filter:brightness() and opacity animations from chatBackground.ts
  (animRainGlowKeyframe, animGridBrightnessKeyframe, animFirefliesGlowKeyframe,
  animFirefliesBlinkKeyframe). These were applied to the Page element which
  caused ALL descendants (messages, composer) to flash in sync.
  Also created a CSS stacking context on Page that pushed SeasonalEffect
  (position:fixed; z-index:9997) behind the animated background layer.
- Only backgroundPosition / backgroundSize animations remain — safe, do not
  affect descendants, and do not create stacking contexts.
- Remove now-unused animation keyframe imports from chatBackground.ts.

Voice ringing in persistent rooms (Bug #5):
- Narrow the ringing condition from (Invite|Knock|Restricted) to only Invite,
  matching exactly the rooms where the call button is visible.
- Add room.isCallRoom() early-exit so m.join_rule:call rooms never ring.

Avatar decoration images not loading (Bug #8):
- Change loading="lazy" → loading="eager" in DecorationPreviewCell.
  Lazy loading does not reliably trigger for images inside nested overflow
  scroll containers (the settings panel scroll area), so images never loaded.

Docs: LOTUS_BUGS.md updated with root cause and resolution for all 5 new bugs.
Docs: LOTUS_TODO.md adds P5-35/P5-36 (deferred desktop notification/jump list).

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

src/app/features/lotus/chatBackground.ts

@@ -2,14 +2,10 @@ import { CSSProperties } from 'react';
 import { ChatBackground } from '../../state/settings';
 import {
   animRainKeyframe,
-  animRainGlowKeyframe,
   animStarsDriftKeyframe,
   animGridPulseKeyframe,
-  animGridBrightnessKeyframe,
   animAuroraKeyframe,
   animFirefliesKeyframe,
-  animFirefliesGlowKeyframe,
-  animFirefliesBlinkKeyframe,
 } from '../../styles/Animations.css';
 
 export const BG_OPTIONS: { value: ChatBackground; label: string }[] = [
@@ -210,7 +206,7 @@ const DARK: Record<ChatBackground, CSSProperties> = {
     ].join(','),
     backgroundSize: '40px 200px, 12px 200px',
     backgroundPosition: '0 0, 0 0',
-    animation: `${animRainKeyframe} 8s linear infinite, ${animRainGlowKeyframe} 2.1s ease-in-out infinite`,
+    animation: `${animRainKeyframe} 8s linear infinite`,
   },
 
   // Animated: drifting star field — three seamlessly-tiling layers at different speeds
@@ -236,7 +232,7 @@ const DARK: Record<ChatBackground, CSSProperties> = {
       'linear-gradient(90deg, rgba(0,212,255,0.06) 1px, transparent 1px)',
     ].join(','),
     backgroundSize: '60px 60px, 60px 60px, 12px 12px, 12px 12px',
-    animation: `${animGridPulseKeyframe} 4s ease-in-out infinite, ${animGridBrightnessKeyframe} 3.3s ease-in-out infinite`,
+    animation: `${animGridPulseKeyframe} 4s ease-in-out infinite`,
   },
 
   // Animated: aurora borealis — four bands each travel an independent path
@@ -263,7 +259,7 @@ const DARK: Record<ChatBackground, CSSProperties> = {
     ].join(','),
     backgroundSize: '200px 200px, 280px 280px, 160px 160px',
     backgroundPosition: '0 0, 120px 80px, 60px 140px',
-    animation: `${animFirefliesKeyframe} 30s linear infinite, ${animFirefliesGlowKeyframe} 2.3s ease-in-out infinite, ${animFirefliesBlinkKeyframe} 1.7s ease-in-out infinite`,
+    animation: `${animFirefliesKeyframe} 30s linear infinite`,
   },
 };
 
@@ -481,7 +477,7 @@ const LIGHT: Record<ChatBackground, CSSProperties> = {
     ].join(','),
     backgroundSize: '200px 200px, 280px 280px, 160px 160px',
     backgroundPosition: '0 0, 120px 80px, 60px 140px',
-    animation: `${animFirefliesKeyframe} 30s linear infinite, ${animFirefliesGlowKeyframe} 2.3s ease-in-out infinite, ${animFirefliesBlinkKeyframe} 1.7s ease-in-out infinite`,
+    animation: `${animFirefliesKeyframe} 30s linear infinite`,
   },
 };