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/components/user-profile/UserRoomProfile.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, config, Icon, IconButton, Icons, Spinner, Text, toRem } from 'folds';
+import { Box, Button, color, config, Icon, IconButton, Icons, Spinner, Text, toRem } from 'folds';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { VerificationRequest } from 'matrix-js-sdk/lib/crypto-api';
@@ -197,7 +197,7 @@ function UserDeviceSessions({ userId }: UserDeviceSessionsProps) {
               style={{
                 paddingTop: config.space.S100,
                 paddingBottom: config.space.S100,
-                borderTop: `${toRem(1)} solid var(--border-surface-variant)`,
+                borderTop: `${toRem(1)} solid ${color.SurfaceVariant.ContainerLine}`,
               }}
             >
               <UserDeviceRow userId={userId} device={device} />