Improve mobile layout for chat view

[cheapestinference]

Description

The chat view currently has no responsive/mobile-specific styling. On small screens, the layout breaks or becomes difficult to use: the sidebar takes too much space, the chat input area may overflow, and the multi-column layout (chat + tasks panels) does not adapt to narrow viewports.

This issue is about making the chat experience usable on mobile devices and tablets by adding responsive breakpoints and layout adjustments.

Where to look

• src/components/views/ChatView.tsx — The main chat component. Uses a two-column flex layout (flex flex-1 min-h-0 for chat + task panels). On mobile, the task/agent panels should be hidden or collapsed behind a toggle. The message area padding (p-6) and the input area need adjustment for small screens.
• src/components/layout/AppSidebar.tsx — The sidebar component. On mobile, this should either collapse to an overlay/drawer or be hidden behind a hamburger menu. Currently renders as a fixed column.
• src/components/layout/Layout.tsx — The root layout that composes the sidebar and main content. Responsive behavior should coordinate between Layout and AppSidebar.
• src/components/views/SessionDetailView.tsx — Wraps ChatView with a session selector and model picker. These controls may need to stack vertically on mobile instead of being side-by-side.
• Tailwind CSS utilities — The project uses Tailwind. Use responsive prefixes (sm:, md:, lg:) for breakpoint-specific styles. No new CSS files should be needed.

Acceptance criteria

• The chat view is usable on a 375px-wide viewport (standard mobile): messages are readable, the input area is accessible, and content does not overflow horizontally
• Side panels (tasks, agent tools, brain, etc.) are hidden by default on mobile and accessible via a toggle/button rather than always visible
• The sidebar collapses or becomes an overlay on screens narrower than md (768px), with a way to open and close it