fix: Make ChatInterface theme-aware for light mode support

Updated ChatInterface to use dynamic colors based on color scheme:
- Added useComputedColorScheme hook
- Chat message bubbles now use gray.1/gray.0 in light mode
- Chat message bubbles use dark.6/dark.7 in dark mode
- User messages vs AI messages have different shades in both modes

This fixes the issue where chat messages had hardcoded dark backgrounds
even when the app was in light mode.

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

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

components/ChatInterface.tsx

@@ -1,13 +1,15 @@
 'use client';
 
 import { useChat } from '@ai-sdk/react';
-import { Container, ScrollArea, Paper, Group, TextInput, Button, Stack, Text, Box } from '@mantine/core';
+import { Container, ScrollArea, Paper, Group, TextInput, Button, Stack, Text, Box, useComputedColorScheme } from '@mantine/core';
 import { useEffect, useRef, useState } from 'react';
 import { MicrophoneRecorder } from './MicrophoneRecorder';
 
 export function ChatInterface() {
   const viewport = useRef<HTMLDivElement>(null);
   const [input, setInput] = useState('');
+  const colorScheme = useComputedColorScheme('light');
+  const isDark = colorScheme === 'dark';
 
   const {
     messages,
@@ -51,7 +53,10 @@ export function ChatInterface() {
                 <Paper
                   p="sm"
                   radius="md"
-                  bg={message.role === 'user' ? 'dark.6' : 'dark.7'}
+                  bg={message.role === 'user'
+                    ? (isDark ? 'dark.6' : 'gray.1')
+                    : (isDark ? 'dark.7' : 'gray.0')
+                  }
                 >
                   <Text size="sm">
                     {/* Extract text from parts */}