feat(humevoicechat): redesign with empathic-ai UI pattern

Completely redesigned HumeVoiceChat component to match the empathic-ai
reference implementation:

**Message Cards with Emotion Insights:**
- Each message now displays top 3 emotions as colored progress bars at the
  bottom
- Uses Hume's official emotion color palette from expressionColors
- Shows emotion name, percentage score, and animated progress bar
- Message cards include role, timestamp, content, and emotion card

**Floating Controls Bar:**
- Bottom-floating controls with gradient fade background (empathic-ai style)
- Circular mute/unmute toggle button with purple highlight
- MicFFT audio visualization (24-bar SVG) using real FFT data from Hume
- Red "End Call" button
- All controls in rounded pill container with shadow

**Improved Layout:**
- Fully scrollable messages container with auto-scroll on new messages
- Empty state with centered mic icon
- Better spacing with 6rem padding-bottom for controls
- Cleaner, more focused UI matching the empathic-ai reference

**Technical Improvements:**
- Created EmotionCard component for reusable emotion display
- Created MicFFT component for SVG-based audio visualization
- Removed old purple wave animation in favor of real FFT data
- Simplified connection flow and status handling
- Better TypeScript-like props normalization for message content

All based on the empathic-ai reference at /empathic-ai/components.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

Author: AvatarOS Developer

CHANGELOG.md

@@ -1,5 +1,7 @@
 # Changelog
 
+2025-10-05: Redesigned HumeVoiceChat to match empathic-ai UI pattern: scrollable messages with emotion cards (top 3 emotions as colored progress bars at bottom of each message), floating controls bar at bottom with gradient fade, MicFFT audio visualization (24-bar SVG using real FFT data from Hume), mute toggle button, cleaner layout with auto-scroll on new messages; emotion cards use Hume's official color palette and show emotion name + percentage + animated progress bar.
+
 2025-10-05: EmpathyLab enhancements: added AllEmotionsList component displaying all 52 Hume emotions with real-time sorting (active emotions at top), emotion-specific icons and colors from Hume's official color palette, circular color indicators, scrollable list with overflow handling; integrated sci-fi GazeOverlay (animated SVG with pulsing focus point, direction line, strength display) and EmotionFusionDisplay (multimodal analysis with conflict detection, valence/arousal metrics); added comprehensive sidebar visualization controls (9 overlay toggles including face mesh, gaze, body/hand skeletons, advanced overlays); fixed real-time overlay toggling via useRef pattern in useHumanWebcam hook; fixed loading state stuck on stop; added extensive Hume debug logging for connection troubleshooting; fixed 3-panel grid layout overflow by adding proper flex constraints to Panels (min-height: 0, overflow-y: auto on .image-content) ensuring emotion analysis column is scrollable and stats bar always visible as footer.
 
 2025-10-03: Added reusable ImageViewer (image/camera modes) and useHumanWebcam hook with requestVideoFrameCallback fallback and device picker support; integrated EmpathyLab to use the hook (clean start/stop, smoother loop, selectable camera) and replaced VideoFrame usage to centralize canvas/video rendering; added Storybook stories for ImageViewer (image, camera placeholder, canvas overlay mock).
@@ -10,6 +12,8 @@
 
 2025-10-03: Extracted reusable StatCard component and refactored StatsRow to use it. Added StatCard stories (solid, glass, grid) and short docs.
 
+2025-10-03: Updated StatCard layout to a two-row design (top: icon + value, bottom: label) and added default per-icon colors with optional override.
+
 2025-10-03: Implemented full multimodal EmpathyLab integration with Hume EVI + Human library: created HumeVoiceChat component with purple wave animations (#6e42cc), EmotionFusionDisplay combining facial + vocal emotions with conflict detection, GazeOverlay for eye tracking visualization (bearing/strength/focus point); added advanced Human library features following official demo patterns (result interpolation via human.next(), real-time FPS monitoring with 30-frame rolling average, TensorFlow tensor memory tracking, enhanced config with minConfidence/maxDetected/warmup); integrated session storage with 4 API endpoints (POST/GET/DELETE /api/empathylab/sessions) storing metadata in-memory Map (MongoDB-ready schema); added Save Session and Export JSON buttons to UI; updated orchestrator context with comprehensive EmpathyLab capabilities (7 facial emotions, 48 voice emotions, gaze tracking, multimodal fusion, use cases); fixed server.js duplicate variable declaration; updated Vite config COOP headers to 'same-origin-allow-popups'; all processing local in browser, privacy-first design.
 
 2025-10-03: Fixed Vercel build: added missing UI components (Button, FormField, Panel, ActionBar) and BoothHeader to git tracking that were previously untracked causing build failures.

src/components/EmpathyLab.jsx

@@ -520,6 +520,7 @@ export default function EmpathyLab() {
                 {results && (
                     <div style={{ flexShrink: 0 }}>
                         <StatsRow
+                            variant="glass"
                             results={results}
                             sessionDuration={Date.now() - sessionStartTime}
                             dataPointsCount={sessionData.length}