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/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