Add comprehensive mobile responsive design for all IDE views

- Add mobile navigation menu with hamburger toggle
- Add slide-out chat sidebar for mobile (chat.z.ai style)
- Optimize chat view for mobile with:
  - Collapsible sidebar with overlay
  - Touch-friendly input controls (44px min)
  - Responsive message bubbles
  - Hidden scrollbars for cleaner UI
  - Proper font sizing and spacing
- Add mobile responsive styles for:
  - Sessions view (stacked layout)
  - Projects view (single column grid)
  - Dashboard view (single column)
  - Files view (vertical sidebar)
  - Terminal view (compact tabs)
- Add extra small device support (480px breakpoint)
- Add touch-friendly target sizing for touch devices

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

public/claude-ide/index.html

@@ -17,9 +17,10 @@
         <!-- Navigation -->
         <nav class="navbar">
             <div class="nav-brand">
+                <button class="mobile-menu-toggle" id="mobile-menu-toggle" aria-label="Toggle menu">☰</button>
                 <h1>Claude Code IDE</h1>
             </div>
-            <div class="nav-menu">
+            <div class="nav-menu" id="nav-menu">
                 <button class="nav-item active" data-view="dashboard">Dashboard</button>
                 <button class="nav-item" data-view="chat">💬 Chat</button>
                 <button class="nav-item" data-view="sessions">Sessions</button>
@@ -117,7 +118,8 @@
         <!-- Chat View -->
         <div id="chat-view" class="view">
             <div class="chat-layout">
-                <div class="chat-sidebar">
+                <div class="chat-sidebar-overlay" id="chat-sidebar-overlay"></div>
+                <div class="chat-sidebar" id="chat-sidebar">
                     <div class="sidebar-header">
                         <h2>Chat</h2>
                         <button class="btn-primary" onclick="startNewChat()">+ New</button>
@@ -128,6 +130,7 @@
                 </div>
                 <div class="chat-main">
                     <div class="chat-header" id="chat-header">
+                        <button class="chat-sidebar-toggle" id="chat-sidebar-toggle" aria-label="Toggle chat history">☰</button>
                         <div class="chat-session-info">
                             <h2 id="chat-title">New Chat</h2>
                             <span class="chat-session-id" id="current-session-id"></span>
@@ -370,5 +373,66 @@
         // Initialize on page load
         document.addEventListener('DOMContentLoaded', initDebugPanel);
     </script>
+
+    <!-- Mobile Menu and Sidebar Toggle Script -->
+    <script>
+        // Mobile Navigation Menu Toggle
+        const mobileMenuToggle = document.getElementById('mobile-menu-toggle');
+        const navMenu = document.getElementById('nav-menu');
+
+        if (mobileMenuToggle) {
+            mobileMenuToggle.addEventListener('click', () => {
+                navMenu.classList.toggle('active');
+            });
+        }
+
+        // Close menu when clicking outside
+        document.addEventListener('click', (e) => {
+            if (!e.target.closest('.navbar')) {
+                navMenu?.classList.remove('active');
+            }
+        });
+
+        // Close menu when clicking a nav item
+        document.querySelectorAll('.nav-item').forEach(item => {
+            item.addEventListener('click', () => {
+                navMenu?.classList.remove('active');
+            });
+        });
+
+        // Chat Sidebar Toggle
+        const chatSidebarToggle = document.getElementById('chat-sidebar-toggle');
+        const chatSidebar = document.getElementById('chat-sidebar');
+        const chatSidebarOverlay = document.getElementById('chat-sidebar-overlay');
+
+        function toggleChatSidebar() {
+            if (!chatSidebar || !chatSidebarOverlay) return;
+            chatSidebar.classList.toggle('active');
+            chatSidebarOverlay.classList.toggle('active');
+        }
+
+        function closeChatSidebar() {
+            if (!chatSidebar || !chatSidebarOverlay) return;
+            chatSidebar.classList.remove('active');
+            chatSidebarOverlay.classList.remove('active');
+        }
+
+        if (chatSidebarToggle) {
+            chatSidebarToggle.addEventListener('click', toggleChatSidebar);
+        }
+
+        if (chatSidebarOverlay) {
+            chatSidebarOverlay.addEventListener('click', closeChatSidebar);
+        }
+
+        // Close sidebar when switching to a different view
+        const originalSwitchView = window.switchView;
+        if (typeof originalSwitchView === 'function') {
+            window.switchView = function(viewName) {
+                closeChatSidebar();
+                return originalSwitchView.call(this, viewName);
+            };
+        }
+    </script>
 </body>
 </html>