feat: redesign + avatars + theme + call presence fixes (v0.6.0)

Visual:
- Light/dark theme via ThemeContext + CSS vars
- New design tokens (surface/fg/accent/line/etc.) across all pages
- Reusable Avatar component (img + letter fallback) wired into UserBar,
  ConversationHeader, ChatsPage, FriendsPage, GroupInfoPanel, IncomingCallPanel

Calls:
- Split call UI: IncomingCallPanel, InCallPanel, CallControls,
  CallParticipantTile, ScreenShareViewer
- Active speaker hook (useActiveSpeakers)
- Fix: ActiveCallBanner stayed hidden after hangup while peers in room.
  - useCallPresence: bind presence callbacks only when we own subscribe
    (Supabase forbids .on() after .subscribe() on shared dedup'd channels)
  - useCallPresence: never removeChannel — channel is shared with CallContext
    so tearing it down on ConversationHeader unmount killed live tracking
  - ActiveCallBanner: lastCallConversationId fallback so banner shows
    instantly after hangup, auto-dismiss when room confirmed empty
- Drop unused useAnyActiveCall

Bump tauri version 0.5.0 -> 0.6.0

apps/desktop/tailwind.config.js

@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 export default {
+  darkMode: 'class',
   content: [
     './index.html',
     './src/**/*.{ts,tsx}',
@@ -51,12 +52,28 @@ export default {
           800: '#312E81',
           900: '#1E1B4B',
         },
+        // Clean-Rail design tokens. RGB-tuple form so alpha modifiers
+        // (e.g. bg-surface/50) work under both themes.
+        surface: 'rgb(var(--bg-rgb) / <alpha-value>)',
+        'surface-2': 'rgb(var(--bg-2-rgb) / <alpha-value>)',
+        'surface-3': 'rgb(var(--bg-3-rgb) / <alpha-value>)',
+        fg: 'rgb(var(--fg-rgb) / <alpha-value>)',
+        'fg-muted': 'rgb(var(--fg-muted-rgb) / <alpha-value>)',
+        accent: 'rgb(var(--accent-rgb) / <alpha-value>)',
+        'accent-fg': 'rgb(var(--accent-fg-rgb) / <alpha-value>)',
+        // Line has baked-in theme-specific alpha — direct var, no modifier.
+        line: 'var(--line)',
       },
       animation: {
         'blob-a': 'blob 22s ease-in-out infinite',
         'blob-b': 'blob 28s ease-in-out infinite reverse',
         'fade-in': 'fadeIn 400ms ease-out',
         'slide-up': 'slideUp 350ms ease-out',
+        'pulse-ring': 'pulseRing 2s ease-out infinite',
+        'audio-pulse': 'audioPulse 1.3s ease-out infinite',
+        'live-dot': 'liveDotPulse 1.5s ease-in-out infinite',
+        'slide-in-call': 'slideInCall 0.4s cubic-bezier(0.22,1,0.36,1)',
+        'fs-hint': 'fsHintFade 3.5s ease-out forwards',
       },
       keyframes: {
         blob: {
@@ -72,9 +89,34 @@ export default {
           from: { opacity: '0', transform: 'translateY(8px)' },
           to: { opacity: '1', transform: 'translateY(0)' },
         },
+        pulseRing: {
+          '0%': { transform: 'scale(0.85)', opacity: '0.6' },
+          '100%': { transform: 'scale(1.25)', opacity: '0' },
+        },
+        audioPulse: {
+          '0%': { transform: 'scale(1)', opacity: '0.8' },
+          '100%': { transform: 'scale(1.3)', opacity: '0' },
+        },
+        liveDotPulse: {
+          '0%, 100%': { opacity: '1' },
+          '50%': { opacity: '0.4' },
+        },
+        slideInCall: {
+          from: { opacity: '0', transform: 'translateY(20px)' },
+          to: { opacity: '1', transform: 'translateY(0)' },
+        },
+        fsHintFade: {
+          '0%': { opacity: '0', transform: 'translate(-50%, -6px)' },
+          '15%, 75%': { opacity: '1', transform: 'translate(-50%, 0)' },
+          '100%': { opacity: '0', transform: 'translate(-50%, -6px)' },
+        },
       },
       boxShadow: {
         glow: '0 0 40px -8px rgba(99, 102, 241, 0.35)',
+        'call-card': '0 20px 60px rgba(0,0,0,0.1)',
+        'call-card-dark': '0 20px 60px rgba(0,0,0,0.5)',
+        'pip-call': '0 12px 40px rgba(0,0,0,0.2), 0 0 0 3px rgba(79,70,229,0.15)',
+        'accept-btn': '0 4px 14px rgba(22,163,74,0.3)',
       },
     },
   },