refactor: Use Mantine CSS variables and modules for theme styling

Replaced all hardcoded colors and JS template literal styling with Mantine's
canonical approach using CSS modules and CSS variables. This ensures colors
transition programmatically without JS interpolation.

- Updated globals.css to use data-mantine-color-scheme selectors
- Created CSS modules for all navigation components and chat page
- Removed useComputedColorScheme/useMantineTheme hooks where not needed
- Fixed body background to properly adapt to light/dark mode
- All borders, backgrounds, and colors now use CSS variables
- Maintained full theme support across all components

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

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

components/Navigation/DesktopSidebar.module.css

@@ -0,0 +1,27 @@
+.sidebar {
+  width: 100%;
+  height: 100%;
+  padding: 1rem;
+}
+
+[data-mantine-color-scheme="light"] .sidebar {
+  border-right: 1px solid var(--mantine-color-gray-3);
+}
+
+[data-mantine-color-scheme="dark"] .sidebar {
+  border-right: 1px solid var(--mantine-color-dark-5);
+}
+
+.devPanel {
+  margin-top: var(--mantine-spacing-xl);
+  padding: var(--mantine-spacing-sm);
+  border-radius: 4px;
+}
+
+[data-mantine-color-scheme="light"] .devPanel {
+  border: 1px solid var(--mantine-color-gray-4);
+}
+
+[data-mantine-color-scheme="dark"] .devPanel {
+  border: 1px solid var(--mantine-color-dark-4);
+}

components/Navigation/DesktopSidebar.tsx

@@ -14,6 +14,7 @@ import { useSelector } from '@xstate/react';
 import { useAppMachine } from '@/hooks/useAppMachine';
 import { UserMenu } from '@/components/UserMenu';
 import { ThemeToggle } from '@/components/ThemeToggle';
+import styles from './DesktopSidebar.module.css';
 
 export function DesktopSidebar() {
   const actor = useAppMachine();
@@ -43,14 +44,7 @@ export function DesktopSidebar() {
   });
 
   return (
-    <Box
-      style={{
-        width: '100%',
-        height: '100%',
-        borderRight: '1px solid #373A40',
-        padding: '1rem',
-      }}
-    >
+    <Box className={styles.sidebar}>
       <Stack gap="xs">
         <Group gap="md" mb="lg" align="center" wrap="nowrap">
           <img
@@ -110,7 +104,7 @@ export function DesktopSidebar() {
           }}
         />
 
-        <Divider my="md" color="#373A40" />
+        <Divider my="md" />
 
         {/* Theme Toggle */}
         <ThemeToggle />
@@ -120,7 +114,7 @@ export function DesktopSidebar() {
 
         {/* Development state panel */}
         {process.env.NODE_ENV === 'development' && (
-          <Box mt="xl" p="sm" style={{ border: '1px solid #495057', borderRadius: '4px' }}>
+          <Box className={styles.devPanel}>
             <Text size="xs" fw={700} c="dimmed" mb="xs">
               DEV: App State
             </Text>

components/Navigation/MobileBottomBar.module.css

@@ -0,0 +1,15 @@
+.bottomBar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+}
+
+[data-mantine-color-scheme="light"] .bottomBar {
+  border-top: 1px solid var(--mantine-color-gray-3);
+}
+
+[data-mantine-color-scheme="dark"] .bottomBar {
+  border-top: 1px solid var(--mantine-color-dark-5);
+}

components/Navigation/MobileBottomBar.tsx

@@ -14,6 +14,7 @@ import { useSelector } from '@xstate/react';
 import { useAppMachine } from '@/hooks/useAppMachine';
 import { UserMenu } from '@/components/UserMenu';
 import { useState, useEffect } from 'react';
+import styles from './MobileBottomBar.module.css';
 
 interface UserProfile {
   did: string;
@@ -68,14 +69,7 @@ export function MobileBottomBar() {
       withBorder
       p="md"
       radius={0}
-      style={{
-        position: 'fixed',
-        bottom: 0,
-        left: 0,
-        right: 0,
-        zIndex: 100,
-        borderTop: '1px solid #373A40',
-      }}
+      className={styles.bottomBar}
     >
       <Group justify="space-around" grow>
         <Stack gap={4} align="center" onClick={() => handleNavigation('convo')} style={{ cursor: 'pointer' }}>

components/Navigation/MobileHeader.module.css

@@ -0,0 +1,15 @@
+.header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+}
+
+[data-mantine-color-scheme="light"] .header {
+  border-bottom: 1px solid var(--mantine-color-gray-3);
+}
+
+[data-mantine-color-scheme="dark"] .header {
+  border-bottom: 1px solid var(--mantine-color-dark-5);
+}

components/Navigation/MobileHeader.tsx

@@ -7,6 +7,7 @@
  */
 
 import { Group, Title, Paper } from '@mantine/core';
+import styles from './MobileHeader.module.css';
 
 export function MobileHeader() {
   return (
@@ -14,14 +15,7 @@ export function MobileHeader() {
       withBorder
       p="sm"
       radius={0}
-      style={{
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        right: 0,
-        zIndex: 100,
-        borderBottom: '1px solid #373A40',
-      }}
+      className={styles.header}
     >
       <Group gap="md" align="center" wrap="nowrap">
         <img