fix: resilience, speaker animation, CSS variable fixes

- Wrap RoomTimeline in ErrorBoundary — a single bad event no longer
  crashes the entire timeline; shows a graceful "Timeline unavailable"
  message instead
- Wrap RoomInput in ErrorBoundary — composer crashes show a fallback
  placeholder rather than a blank white section
- Animate SpeakerAvatarOutline with a 1.2s pulse keyframe so it's
  visually distinct from a static ring; respects prefers-reduced-motion
- Fix var(--border-surface-variant) undefined variable in UserRoomProfile
  device session rows; replaced with color.SurfaceVariant.ContainerLine

UNTESTED — verify at chat.lotusguild.org post-deploy.

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

src/app/features/call-status/styles.css.ts

@@ -1,4 +1,4 @@
-import { style } from '@vanilla-extract/css';
+import { keyframes, style } from '@vanilla-extract/css';
 import { color, config, toRem } from 'folds';
 
 export const LiveChipText = style({
@@ -16,6 +16,19 @@ export const ControlDivider = style({
   height: toRem(16),
 });
 
-export const SpeakerAvatarOutline = style({
-  boxShadow: `0 0 0 ${config.borderWidth.B600} ${color.Success.Main}`,
+const speakerPulse = keyframes({
+  '0%': { boxShadow: `0 0 0 ${config.borderWidth.B600} ${color.Success.Main}` },
+  '50%': { boxShadow: `0 0 0 ${toRem(4)} ${color.Success.ContainerActive}` },
+  '100%': { boxShadow: `0 0 0 ${config.borderWidth.B600} ${color.Success.Main}` },
+});
+
+export const SpeakerAvatarOutline = style({
+  '@media': {
+    '(prefers-reduced-motion: no-preference)': {
+      animation: `${speakerPulse} 1200ms ease-in-out infinite`,
+    },
+    '(prefers-reduced-motion: reduce)': {
+      boxShadow: `0 0 0 ${config.borderWidth.B600} ${color.Success.Main}`,
+    },
+  },
 });