fix: assistant chat mobile layout — sidebar hidden, slide-out toggle

Chat sidebar was rendering side-by-side on mobile causing squished layout.
Now hidden on mobile with a "Chats" toggle button + "+ New" in a compact
header bar. Sidebar slides out as an overlay on mobile, auto-closes on
chat selection.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/pages/AssistantChatPage.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useRef, useCallback } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
-import { Sparkles, Send, Loader2, Flag } from 'lucide-react'
+import { Sparkles, Send, Loader2, Flag, MessageSquare } from 'lucide-react'
 import { PageMeta } from '@/components/common/PageMeta'
 import { assistantChatApi } from '@/api/assistantChat'
 import { analytics } from '@/lib/analytics'
@@ -24,6 +24,7 @@ export default function AssistantChatPage() {
   const [input, setInput] = useState('')
   const [loading, setLoading] = useState(false)
   const [showConclude, setShowConclude] = useState(false)
+  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false)
   const messagesEndRef = useRef<HTMLDivElement>(null)
   const inputRef = useRef<HTMLTextAreaElement>(null)
   const prefillHandledRef = useRef(false)
@@ -232,22 +233,54 @@ export default function AssistantChatPage() {
     <>
     <PageMeta title="AI Assistant" />
     <div className="flex h-[calc(100vh-3.5rem)]">
-      {/* Sidebar */}
-      <ChatSidebar
-        chats={chats}
-        activeChatId={activeChatId}
-        onSelectChat={selectChat}
-        onNewChat={handleNewChat}
-        onDeleteChat={handleDeleteChat}
-        onTogglePin={handleTogglePin}
-      />
+      {/* Sidebar — hidden on mobile, slide-out via toggle */}
+      <div className="hidden sm:block">
+        <ChatSidebar
+          chats={chats}
+          activeChatId={activeChatId}
+          onSelectChat={selectChat}
+          onNewChat={handleNewChat}
+          onDeleteChat={handleDeleteChat}
+          onTogglePin={handleTogglePin}
+        />
+      </div>
+      <div className="sm:hidden">
+        <ChatSidebar
+          chats={chats}
+          activeChatId={activeChatId}
+          onSelectChat={selectChat}
+          onNewChat={handleNewChat}
+          onDeleteChat={handleDeleteChat}
+          onTogglePin={handleTogglePin}
+          mobileOpen={mobileSidebarOpen}
+          onMobileClose={() => setMobileSidebarOpen(false)}
+        />
+      </div>
 
       {/* Main chat area */}
       <div className="flex-1 flex flex-col min-w-0">
+        {/* Mobile header with chat history toggle */}
+        <div className="sm:hidden flex items-center gap-2 px-3 py-2 border-b shrink-0" style={{ borderColor: 'var(--glass-border)' }}>
+          <button
+            onClick={() => setMobileSidebarOpen(true)}
+            className="flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-[var(--color-bg-elevated)] transition-colors"
+          >
+            <MessageSquare size={16} />
+            Chats
+          </button>
+          <div className="flex-1" />
+          <button
+            onClick={handleNewChat}
+            className="rounded-lg px-3 py-2 text-sm font-medium text-primary hover:bg-primary/10 transition-colors"
+          >
+            + New
+          </button>
+        </div>
+
         {activeChatId ? (
           <>
             {/* Messages */}
-            <div className="flex-1 overflow-y-auto px-6 py-4 space-y-4">
+            <div className="flex-1 overflow-y-auto px-4 sm:px-6 py-4 space-y-4">
               {messages.length === 0 && !loading && (
                 <div className="flex flex-col items-center justify-center h-full text-center">
                   <div className="w-16 h-16 rounded-full bg-accent-dim flex items-center justify-center mb-4">
@@ -284,7 +317,7 @@ export default function AssistantChatPage() {
             </div>
 
             {/* Input */}
-            <div className="px-6 py-4 border-t shrink-0" style={{ borderColor: 'var(--glass-border)' }}>
+            <div className="px-3 sm:px-6 py-3 sm:py-4 border-t shrink-0" style={{ borderColor: 'var(--glass-border)' }}>
               <div className="max-w-3xl mx-auto">
                 <div className="flex items-end gap-3">
                   <textarea