feat: Improve UI layout and navigation

- Increase logo size (48x48 desktop, 56x56 mobile) for better visibility
- Add logo as favicon
- Add logo to mobile header
- Move user menu to navigation bars (sidebar on desktop, bottom bar on mobile)
- Fix desktop chat layout - container structure prevents voice controls cutoff
- Fix mobile bottom bar - use icon-only ActionIcons instead of truncated text buttons
- Hide Create Node/New Conversation buttons on mobile to save header space
- Make fixed header and voice controls work properly with containers

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

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

components/AppLayout.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+/**
+ * AppLayout Component
+ *
+ * Wraps the application with:
+ * - AppStateMachineProvider (state management)
+ * - Mantine AppShell (responsive layout)
+ * - Navigation (mobile bottom bar / desktop sidebar)
+ */
+
+import { AppShell } from '@mantine/core';
+import { useMediaQuery } from '@mantine/hooks';
+import { AppStateMachineProvider } from './AppStateMachine';
+import { MobileBottomBar } from './Navigation/MobileBottomBar';
+import { MobileHeader } from './Navigation/MobileHeader';
+import { DesktopSidebar } from './Navigation/DesktopSidebar';
+
+export function AppLayout({ children }: { children: React.ReactNode }) {
+  const isMobile = useMediaQuery('(max-width: 768px)');
+
+  return (
+    <AppStateMachineProvider>
+      {/* Mobile Header - only on mobile */}
+      {isMobile && <MobileHeader />}
+
+      <AppShell
+        navbar={{
+          width: isMobile ? 0 : 200,
+          breakpoint: 'sm',
+        }}
+        padding={isMobile ? 0 : 'md'}
+        style={{ height: '100vh' }}
+      >
+        {/* Desktop Sidebar - only on desktop */}
+        {!isMobile && (
+          <AppShell.Navbar>
+            <DesktopSidebar />
+          </AppShell.Navbar>
+        )}
+
+        {/* Main Content */}
+        <AppShell.Main
+          style={{
+            height: '100vh',
+            overflow: 'auto',
+            paddingTop: isMobile ? '64px' : '0', // Space for mobile header
+            paddingBottom: isMobile ? '80px' : '0', // Space for mobile bottom bar
+          }}
+        >
+          {children}
+        </AppShell.Main>
+
+        {/* Mobile Bottom Bar - only on mobile */}
+        {isMobile && <MobileBottomBar />}
+      </AppShell>
+    </AppStateMachineProvider>
+  );
+}