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/components/assistant/ChatSidebar.tsx

@@ -9,6 +9,8 @@ interface ChatSidebarProps {
   onNewChat: () => void
   onDeleteChat: (id: string) => void
   onTogglePin: (id: string, pinned: boolean) => void
+  mobileOpen?: boolean
+  onMobileClose?: () => void
 }
 
 export function ChatSidebar({
@@ -18,19 +20,41 @@ export function ChatSidebar({
   onNewChat,
   onDeleteChat,
   onTogglePin,
+  mobileOpen = false,
+  onMobileClose,
 }: ChatSidebarProps) {
   const pinnedChats = chats.filter(c => c.pinned)
   const unpinnedChats = chats.filter(c => !c.pinned)
 
+  const handleSelectChat = (id: string) => {
+    onSelectChat(id)
+    onMobileClose?.()
+  }
+
+  const handleNewChat = () => {
+    onNewChat()
+    onMobileClose?.()
+  }
+
   return (
-    <div
-      className="w-72 shrink-0 flex flex-col border-r h-full"
-      style={{ borderColor: 'var(--glass-border)' }}
-    >
+    <>
+      {/* Mobile overlay */}
+      {mobileOpen && (
+        <div className="fixed inset-0 z-40 bg-black/50 sm:hidden" onClick={onMobileClose} />
+      )}
+      <div
+        className={cn(
+          'w-72 shrink-0 flex flex-col border-r h-full',
+          'fixed inset-y-0 left-0 z-50 sm:static sm:z-auto',
+          'transition-transform duration-200',
+          mobileOpen ? 'translate-x-0' : '-translate-x-full sm:translate-x-0',
+        )}
+        style={{ borderColor: 'var(--glass-border)', background: 'var(--color-bg-sidebar)' }}
+      >
       {/* Header */}
       <div className="px-4 py-3 border-b shrink-0" style={{ borderColor: 'var(--glass-border)' }}>
         <button
-          onClick={onNewChat}
+          onClick={handleNewChat}
           className="w-full flex items-center justify-center gap-2 bg-primary text-white font-semibold text-sm rounded-lg px-4 py-2.5 hover:brightness-110 active:scale-[0.98] transition-all"
         >
           <Plus size={16} />
@@ -52,7 +76,7 @@ export function ChatSidebar({
             key={chat.id}
             chat={chat}
             isActive={chat.id === activeChatId}
-            onSelect={() => onSelectChat(chat.id)}
+            onSelect={() => handleSelectChat(chat.id)}
             onDelete={() => onDeleteChat(chat.id)}
             onTogglePin={() => onTogglePin(chat.id, !chat.pinned)}
           />
@@ -67,7 +91,7 @@ export function ChatSidebar({
             key={chat.id}
             chat={chat}
             isActive={chat.id === activeChatId}
-            onSelect={() => onSelectChat(chat.id)}
+            onSelect={() => handleSelectChat(chat.id)}
             onDelete={() => onDeleteChat(chat.id)}
             onTogglePin={() => onTogglePin(chat.id, !chat.pinned)}
           />
@@ -80,6 +104,7 @@ export function ChatSidebar({
         )}
       </div>
     </div>
+    </>
   )
 }