diff --git a/public/claude-ide/ide.css b/public/claude-ide/ide.css
index dedcd684..3d2a9ae1 100644
--- a/public/claude-ide/ide.css
+++ b/public/claude-ide/ide.css
@@ -1096,352 +1096,969 @@ body {
   font-size: 14px;
   line-height: 1.4;
 }
-
-/* ============================================
-   SESSIONS VIEW - History Browser Styles
-   ============================================ */
-
-/* Sessions List Container */
-.sessions-list {
-    overflow-y: auto;
-    max-height: calc(100vh - 200px);
-    padding: 12px;
-}
-
-/* Session List Items */
-.session-item {
-    background: #1a1a1a;
-    border: 1px solid #333;
-    border-radius: 8px;
-    padding: 12px 16px;
-    margin-bottom: 8px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-}
-
-.session-item:hover {
-    background: #252525;
-    border-color: #4a9eff;
-    transform: translateX(4px);
-}
-
-.session-item.historical {
-    border-left: 3px solid #888;
-}
-
-.session-item.historical:hover {
-    border-left-color: #4a9eff;
-}
-
-/* Session Header */
-.session-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 8px;
-}
-
-.session-info {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-}
-
-.session-id {
-    font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
-    font-size: 13px;
-    font-weight: 600;
-    color: #e0e0e0;
-}
-
-/* Session Status Badges */
-.session-status {
-    display: inline-block;
-    padding: 4px 8px;
-    border-radius: 4px;
-    font-size: 11px;
-    font-weight: 600;
-    text-transform: uppercase;
-}
-
-.session-status.running {
-    background: rgba(81, 207, 102, 0.2);
-    color: #51cf66;
-    border: 1px solid rgba(81, 207, 102, 0.3);
-}
-
-.session-status.stopped {
-    background: rgba(136, 136, 136, 0.2);
-    color: #888;
-    border: 1px solid rgba(136, 136, 136, 0.3);
-}
-
-.session-time {
-    font-size: 12px;
-    color: #888;
-}
-
-/* Session Meta */
-.session-meta {
-    font-size: 12px;
-    color: #aaa;
-}
-
-.session-path {
-    margin-bottom: 4px;
-    word-break: break-all;
-}
-
-.session-stats {
-    display: flex;
-    gap: 12px;
-    font-size: 11px;
-    color: #888;
-}
-
-/* Empty/Error States */
-.empty-state, .error-state {
-    text-align: center;
-    padding: 40px 20px;
-    color: #888;
-}
-
-.empty-icon, .error-icon {
-    font-size: 48px;
-    margin-bottom: 16px;
-}
-
-.error-message {
-    font-size: 13px;
-    color: #ff6b6b;
-    margin: 8px 0 16px 0;
-}
-
-/* ============================================
-   SESSION DETAIL CARD
-   ============================================ */
-
-.session-detail-card {
-    background: #1a1a1a;
-    border-radius: 12px;
-    padding: 24px;
-    max-width: 1200px;
-    margin: 0 auto;
-}
-
-.session-detail-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    margin-bottom: 24px;
-    padding-bottom: 20px;
-    border-bottom: 1px solid #333;
-}
-
-.session-title h2 {
-    margin: 0 0 8px 0;
-    font-size: 24px;
-    color: #e0e0e0;
-}
-
-.session-status-badge {
-    display: inline-block;
-    padding: 6px 12px;
-    border-radius: 6px;
-    font-size: 12px;
-    font-weight: 600;
-}
-
-.session-status-badge.running {
-    background: rgba(81, 207, 102, 0.2);
-    color: #51cf66;
-}
-
-.session-status-badge.stopped {
-    background: rgba(136, 136, 136, 0.2);
-    color: #888;
-}
-
-.session-detail-actions {
-    display: flex;
-    gap: 8px;
-    align-items: center;
-}
-
-.session-detail-actions .btn-primary {
-    background: linear-gradient(135deg, #4a9eff 0%, #a78bfa 100%);
-    border: none;
-    padding: 10px 20px;
-    font-weight: 600;
-}
-
-.session-detail-actions .btn-secondary {
-    background: #2a2a2a;
-    border: 1px solid #444;
-    padding: 10px 16px;
-}
-
-.session-detail-actions .btn-danger {
-    background: rgba(255, 107, 107, 0.2);
-    border: 1px solid rgba(255, 107, 107, 0.3);
-    color: #ff6b6b;
-    padding: 10px 16px;
-}
-
-.session-detail-actions .btn-danger:hover {
-    background: rgba(255, 107, 107, 0.3);
-}
-
-.session-detail-meta {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 12px;
-    margin-bottom: 24px;
-    padding: 16px;
-    background: #0d0d0d;
-    border-radius: 8px;
-}
-
-.meta-row {
-    display: flex;
-    gap: 8px;
-    font-size: 13px;
-}
-
-.meta-label {
-    color: #888;
-    font-weight: 600;
-    min-width: 120px;
-}
-
-.meta-value {
-    color: #e0e0e0;
-    word-break: break-all;
-}
-
-.session-context {
-    margin-bottom: 24px;
-    padding: 16px;
-    background: #0d0d0d;
-    border-radius: 8px;
-}
-
-.session-context h3 {
-    margin: 0 0 12px 0;
-    font-size: 14px;
-    color: #e0e0e0;
-}
-
-.context-bar {
-    width: 100%;
-    height: 8px;
-    background: #333;
-    border-radius: 4px;
-    overflow: hidden;
-    margin-bottom: 8px;
-}
-
-.context-fill {
-    height: 100%;
-    background: linear-gradient(90deg, #4a9eff 0%, #a78bfa 100%);
-    transition: width 0.3s ease;
-}
-
-.context-stats {
-    display: flex;
-    justify-content: space-between;
-    font-size: 12px;
-    color: #888;
-}
-
-.session-output-preview h3 {
-    margin: 0 0 16px 0;
-    font-size: 16px;
-    color: #e0e0e0;
-}
-
-.output-scroll-area {
-    max-height: 400px;
-    overflow-y: auto;
-    background: #0d0d0d;
-    border: 1px solid #333;
-    border-radius: 8px;
-    padding: 12px;
-}
-
-.output-entry {
-    margin-bottom: 12px;
-    padding-bottom: 12px;
-    border-bottom: 1px solid #252525;
-}
-
-.output-entry:last-child {
-    border-bottom: none;
-}
-
-.output-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 6px;
-}
-
-.output-type {
-    display: inline-block;
-    padding: 2px 8px;
-    background: #252525;
-    color: #888;
-    font-size: 10px;
-    font-weight: 600;
-    text-transform: uppercase;
-    border-radius: 3px;
-}
-
-.output-time {
-    font-size: 11px;
-    color: #666;
-}
-
-.output-content {
-    font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
-    font-size: 12px;
-    color: #aaa;
-    white-space: pre-wrap;
-    word-break: break-all;
-    line-height: 1.5;
-}
-
-.no-output {
-    text-align: center;
-    padding: 40px;
-    color: #666;
-    font-style: italic;
-}
-
-.output-truncated {
-    text-align: center;
-    padding: 12px;
-    color: #4a9eff;
-    font-size: 13px;
-}
-
-/* Responsive */
-@media (max-width: 768px) {
-    .session-detail-header {
-        flex-direction: column;
-        gap: 16px;
-    }
-
-    .session-detail-actions {
-        width: 100%;
-        flex-direction: column;
-    }
-
-    .session-detail-actions button {
-        width: 100%;
-    }
-
-    .session-detail-meta {
-        grid-template-columns: 1fr;
-    }
-}
+
+/* ============================================
+   SESSIONS VIEW - History Browser Styles
+   ============================================ */
+
+/* Sessions List Container */
+.sessions-list {
+    overflow-y: auto;
+    max-height: calc(100vh - 200px);
+    padding: 12px;
+}
+
+/* Session List Items */
+.session-item {
+    background: #1a1a1a;
+    border: 1px solid #333;
+    border-radius: 8px;
+    padding: 12px 16px;
+    margin-bottom: 8px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.session-item:hover {
+    background: #252525;
+    border-color: #4a9eff;
+    transform: translateX(4px);
+}
+
+.session-item.historical {
+    border-left: 3px solid #888;
+}
+
+.session-item.historical:hover {
+    border-left-color: #4a9eff;
+}
+
+/* Session Header */
+.session-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+}
+
+.session-info {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.session-id {
+    font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
+    font-size: 13px;
+    font-weight: 600;
+    color: #e0e0e0;
+}
+
+/* Session Status Badges */
+.session-status {
+    display: inline-block;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+}
+
+.session-status.running {
+    background: rgba(81, 207, 102, 0.2);
+    color: #51cf66;
+    border: 1px solid rgba(81, 207, 102, 0.3);
+}
+
+.session-status.stopped {
+    background: rgba(136, 136, 136, 0.2);
+    color: #888;
+    border: 1px solid rgba(136, 136, 136, 0.3);
+}
+
+.session-time {
+    font-size: 12px;
+    color: #888;
+}
+
+/* Session Meta */
+.session-meta {
+    font-size: 12px;
+    color: #aaa;
+}
+
+.session-path {
+    margin-bottom: 4px;
+    word-break: break-all;
+}
+
+.session-stats {
+    display: flex;
+    gap: 12px;
+    font-size: 11px;
+    color: #888;
+}
+
+/* Empty/Error States */
+.empty-state, .error-state {
+    text-align: center;
+    padding: 40px 20px;
+    color: #888;
+}
+
+.empty-icon, .error-icon {
+    font-size: 48px;
+    margin-bottom: 16px;
+}
+
+.error-message {
+    font-size: 13px;
+    color: #ff6b6b;
+    margin: 8px 0 16px 0;
+}
+
+/* ============================================
+   SESSION DETAIL CARD
+   ============================================ */
+
+.session-detail-card {
+    background: #1a1a1a;
+    border-radius: 12px;
+    padding: 24px;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.session-detail-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 24px;
+    padding-bottom: 20px;
+    border-bottom: 1px solid #333;
+}
+
+.session-title h2 {
+    margin: 0 0 8px 0;
+    font-size: 24px;
+    color: #e0e0e0;
+}
+
+.session-status-badge {
+    display: inline-block;
+    padding: 6px 12px;
+    border-radius: 6px;
+    font-size: 12px;
+    font-weight: 600;
+}
+
+.session-status-badge.running {
+    background: rgba(81, 207, 102, 0.2);
+    color: #51cf66;
+}
+
+.session-status-badge.stopped {
+    background: rgba(136, 136, 136, 0.2);
+    color: #888;
+}
+
+.session-detail-actions {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+}
+
+.session-detail-actions .btn-primary {
+    background: linear-gradient(135deg, #4a9eff 0%, #a78bfa 100%);
+    border: none;
+    padding: 10px 20px;
+    font-weight: 600;
+}
+
+.session-detail-actions .btn-secondary {
+    background: #2a2a2a;
+    border: 1px solid #444;
+    padding: 10px 16px;
+}
+
+.session-detail-actions .btn-danger {
+    background: rgba(255, 107, 107, 0.2);
+    border: 1px solid rgba(255, 107, 107, 0.3);
+    color: #ff6b6b;
+    padding: 10px 16px;
+}
+
+.session-detail-actions .btn-danger:hover {
+    background: rgba(255, 107, 107, 0.3);
+}
+
+.session-detail-meta {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 12px;
+    margin-bottom: 24px;
+    padding: 16px;
+    background: #0d0d0d;
+    border-radius: 8px;
+}
+
+.meta-row {
+    display: flex;
+    gap: 8px;
+    font-size: 13px;
+}
+
+.meta-label {
+    color: #888;
+    font-weight: 600;
+    min-width: 120px;
+}
+
+.meta-value {
+    color: #e0e0e0;
+    word-break: break-all;
+}
+
+.session-context {
+    margin-bottom: 24px;
+    padding: 16px;
+    background: #0d0d0d;
+    border-radius: 8px;
+}
+
+.session-context h3 {
+    margin: 0 0 12px 0;
+    font-size: 14px;
+    color: #e0e0e0;
+}
+
+.context-bar {
+    width: 100%;
+    height: 8px;
+    background: #333;
+    border-radius: 4px;
+    overflow: hidden;
+    margin-bottom: 8px;
+}
+
+.context-fill {
+    height: 100%;
+    background: linear-gradient(90deg, #4a9eff 0%, #a78bfa 100%);
+    transition: width 0.3s ease;
+}
+
+.context-stats {
+    display: flex;
+    justify-content: space-between;
+    font-size: 12px;
+    color: #888;
+}
+
+.session-output-preview h3 {
+    margin: 0 0 16px 0;
+    font-size: 16px;
+    color: #e0e0e0;
+}
+
+.output-scroll-area {
+    max-height: 400px;
+    overflow-y: auto;
+    background: #0d0d0d;
+    border: 1px solid #333;
+    border-radius: 8px;
+    padding: 12px;
+}
+
+.output-entry {
+    margin-bottom: 12px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid #252525;
+}
+
+.output-entry:last-child {
+    border-bottom: none;
+}
+
+.output-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 6px;
+}
+
+.output-type {
+    display: inline-block;
+    padding: 2px 8px;
+    background: #252525;
+    color: #888;
+    font-size: 10px;
+    font-weight: 600;
+    text-transform: uppercase;
+    border-radius: 3px;
+}
+
+.output-time {
+    font-size: 11px;
+    color: #666;
+}
+
+.output-content {
+    font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
+    font-size: 12px;
+    color: #aaa;
+    white-space: pre-wrap;
+    word-break: break-all;
+    line-height: 1.5;
+}
+
+.no-output {
+    text-align: center;
+    padding: 40px;
+    color: #666;
+    font-style: italic;
+}
+
+.output-truncated {
+    text-align: center;
+    padding: 12px;
+    color: #4a9eff;
+    font-size: 13px;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .session-detail-header {
+        flex-direction: column;
+        gap: 16px;
+    }
+
+    .session-detail-actions {
+        width: 100%;
+        flex-direction: column;
+    }
+
+    .session-detail-actions button {
+        width: 100%;
+    }
+
+    .session-detail-meta {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* ============================================
+   Mobile Responsive Design (chat.z.ai style)
+   ============================================ */
+
+/* Navigation Mobile */
+@media (max-width: 768px) {
+    .navbar {
+        padding: 0.75rem 1rem;
+        flex-wrap: wrap;
+    }
+
+    .nav-brand h1 {
+        font-size: 1rem;
+    }
+
+    .nav-menu {
+        display: none;
+        position: absolute;
+        top: 60px;
+        left: 0;
+        right: 0;
+        background: var(--bg-secondary);
+        border-bottom: 1px solid var(--border);
+        flex-direction: column;
+        padding: 1rem;
+        gap: 0.25rem;
+        z-index: 100;
+    }
+
+    .nav-menu.active {
+        display: flex;
+    }
+
+    .nav-item {
+        width: 100%;
+        text-align: left;
+        padding: 0.75rem 1rem;
+    }
+
+    .nav-user {
+        display: none;
+    }
+
+    /* Mobile Menu Toggle */
+    .mobile-menu-toggle {
+        display: block;
+        background: none;
+        border: none;
+        color: var(--text-primary);
+        font-size: 1.5rem;
+        cursor: pointer;
+        padding: 0.5rem;
+    }
+}
+
+@media (min-width: 769px) {
+    .mobile-menu-toggle {
+        display: none;
+    }
+}
+
+/* Chat Mobile - Similar to chat.z.ai */
+@media (max-width: 768px) {
+    /* Chat Layout */
+    .chat-layout {
+        position: relative;
+    }
+
+    .chat-sidebar {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: var(--bg-secondary);
+        z-index: 1000;
+        transform: translateX(-100%);
+        transition: transform 0.3s ease;
+    }
+
+    .chat-sidebar.active {
+        transform: translateX(0);
+    }
+
+    .chat-sidebar-overlay {
+        display: none;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(0, 0, 0, 0.5);
+        z-index: 999;
+    }
+
+    .chat-sidebar-overlay.active {
+        display: block;
+    }
+
+    /* Chat Header - Add menu toggle */
+    .chat-header {
+        padding: 0.75rem 1rem;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+    }
+
+    .chat-sidebar-toggle {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 36px;
+        height: 36px;
+        background: var(--bg-tertiary);
+        border: 1px solid var(--border);
+        border-radius: 6px;
+        color: var(--text-primary);
+        cursor: pointer;
+        font-size: 1.2rem;
+    }
+
+    .chat-session-info h2 {
+        font-size: 1rem;
+    }
+
+    .chat-actions {
+        flex-wrap: wrap;
+    }
+
+    .chat-actions .btn-sm {
+        padding: 0.5rem 0.75rem;
+        font-size: 0.8rem;
+    }
+
+    /* Chat Messages */
+    .chat-messages {
+        padding: 1rem;
+    }
+
+    .chat-message {
+        margin-bottom: 1rem;
+        gap: 0.75rem;
+    }
+
+    .chat-message-avatar {
+        width: 32px;
+        height: 32px;
+        font-size: 1rem;
+    }
+
+    .chat-message-content {
+        max-width: 85%;
+    }
+
+    .chat-message-bubble {
+        padding: 0.75rem;
+        font-size: 0.9rem;
+    }
+
+    /* Chat Input */
+    .chat-input-container {
+        padding: 0.75rem 1rem;
+    }
+
+    .chat-input-wrapper {
+        gap: 0.5rem;
+    }
+
+    .chat-input {
+        padding: 0.6rem;
+        font-size: 0.9rem;
+        max-height: 120px;
+    }
+
+    .btn-icon {
+        width: 36px;
+        height: 36px;
+        font-size: 1rem;
+    }
+
+    .chat-input-info {
+        font-size: 0.75rem;
+    }
+
+    /* Welcome Section */
+    .chat-welcome {
+        padding: 1rem;
+    }
+
+    .chat-welcome h2 {
+        font-size: 1.25rem;
+    }
+
+    .chat-welcome p {
+        font-size: 0.9rem;
+    }
+
+    .chat-tips, .chat-connection-info {
+        padding: 1rem;
+        font-size: 0.85rem;
+    }
+
+    .chat-tips code, .chat-connection-info code {
+        font-size: 0.8rem;
+    }
+
+    /* Quick Actions */
+    .quick-actions {
+        padding: 1rem;
+        margin: 1rem 0;
+    }
+
+    .quick-actions-grid {
+        grid-template-columns: 1fr;
+        gap: 0.5rem;
+    }
+
+    .quick-action-btn {
+        padding: 0.75rem 1rem;
+        font-size: 0.9rem;
+    }
+
+    .action-icon {
+        font-size: 1.25rem;
+    }
+
+    /* Code blocks in messages */
+    .chat-message-bubble pre {
+        padding: 0.75rem;
+        font-size: 0.85rem;
+        overflow-x: auto;
+    }
+
+    .chat-message-bubble code {
+        font-size: 0.85rem;
+    }
+}
+
+/* Extra small devices */
+@media (max-width: 480px) {
+    .navbar {
+        padding: 0.5rem 0.75rem;
+    }
+
+    .nav-brand h1 {
+        font-size: 0.9rem;
+    }
+
+    .chat-header {
+        padding: 0.5rem 0.75rem;
+    }
+
+    .chat-session-info h2 {
+        font-size: 0.9rem;
+    }
+
+    .chat-messages {
+        padding: 0.75rem;
+    }
+
+    .chat-message-avatar {
+        width: 28px;
+        height: 28px;
+        font-size: 0.9rem;
+    }
+
+    .chat-message-content {
+        max-width: 80%;
+    }
+
+    .chat-message-bubble {
+        padding: 0.6rem;
+        font-size: 0.85rem;
+    }
+
+    .chat-input-container {
+        padding: 0.5rem 0.75rem;
+    }
+
+    .chat-input {
+        padding: 0.5rem;
+        font-size: 0.85rem;
+    }
+
+    .btn-icon {
+        width: 32px;
+        height: 32px;
+        font-size: 0.9rem;
+    }
+
+    .sidebar-header {
+        padding: 1rem;
+    }
+
+    .sidebar-header h2 {
+        font-size: 1rem;
+    }
+}
+
+/* Touch-friendly targets for mobile */
+@media (hover: none) and (pointer: coarse) {
+    .nav-item,
+    .btn-primary,
+    .btn-secondary,
+    .btn-icon,
+    .chat-sidebar-toggle,
+    .chat-session-item,
+    .quick-action-btn {
+        min-height: 44px;
+        min-width: 44px;
+    }
+
+    .chat-input {
+        min-height: 44px;
+    }
+}
+
+/* Hide scrollbar but keep functionality */
+@media (max-width: 768px) {
+    .chat-messages::-webkit-scrollbar,
+    .chat-history-list::-webkit-scrollbar,
+    .sessions-list::-webkit-scrollbar {
+        width: 0px;
+        background: transparent;
+    }
+}
+
+/* ============================================
+   Sessions View Mobile Responsive
+   ============================================ */
+
+@media (max-width: 768px) {
+    .sessions-layout {
+        flex-direction: column;
+    }
+
+    .sessions-sidebar {
+        width: 100%;
+        max-height: 40vh;
+        border-right: none;
+        border-bottom: 1px solid var(--border);
+    }
+
+    .sidebar-header {
+        padding: 1rem;
+    }
+
+    .sidebar-header h2 {
+        font-size: 1rem;
+    }
+
+    .sessions-list {
+        padding: 0.75rem;
+    }
+
+    .session-item {
+        padding: 0.75rem;
+        margin-bottom: 0.5rem;
+    }
+
+    .session-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.5rem;
+    }
+
+    .session-info {
+        width: 100%;
+    }
+
+    .session-time {
+        font-size: 0.75rem;
+    }
+
+    .session-meta {
+        font-size: 0.75rem;
+        gap: 0.5rem;
+    }
+
+    .session-path {
+        word-break: break-all;
+    }
+
+    .sessions-main {
+        flex: 1;
+    }
+
+    .session-detail {
+        padding: 1rem;
+    }
+
+    .session-detail-card {
+        border-radius: 8px;
+    }
+
+    .session-detail-header {
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    .session-title {
+        width: 100%;
+    }
+
+    .session-title h2 {
+        font-size: 1rem;
+    }
+
+    .session-detail-actions {
+        width: 100%;
+        flex-direction: column;
+    }
+
+    .session-detail-actions button {
+        width: 100%;
+        margin-bottom: 0.5rem;
+    }
+
+    .session-detail-meta {
+        grid-template-columns: 1fr;
+        gap: 0.5rem;
+    }
+
+    .meta-row {
+        font-size: 0.85rem;
+    }
+
+    .output-scroll-area {
+        max-height: 200px;
+    }
+
+    .output-entry {
+        padding: 0.5rem;
+    }
+
+    .output-header {
+        flex-wrap: wrap;
+        gap: 0.25rem;
+    }
+}
+
+/* ============================================
+   Projects View Mobile Responsive
+   ============================================ */
+
+@media (max-width: 768px) {
+    .projects-header {
+        padding: 1rem;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+    }
+
+    .projects-header h2 {
+        font-size: 1.1rem;
+    }
+
+    .projects-grid {
+        grid-template-columns: 1fr;
+        padding: 0 1rem 1rem 1rem;
+        gap: 1rem;
+    }
+
+    .project-card {
+        padding: 1rem;
+    }
+
+    .project-card h3 {
+        font-size: 1rem;
+    }
+
+    .project-meta {
+        font-size: 0.8rem;
+    }
+
+    .project-description {
+        font-size: 0.85rem;
+    }
+}
+
+/* ============================================
+   Dashboard View Mobile Responsive
+   ============================================ */
+
+@media (max-width: 768px) {
+    .dashboard-grid {
+        grid-template-columns: 1fr;
+        padding: 1rem;
+        gap: 1rem;
+    }
+
+    .stat-card {
+        padding: 1rem;
+    }
+
+    .stat-card h3 {
+        font-size: 0.85rem;
+    }
+
+    .stat-value {
+        font-size: 2rem;
+    }
+
+    .panel-header {
+        padding: 0.75rem 1rem;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+    }
+
+    .panel-header h2 {
+        font-size: 1rem;
+    }
+
+    .panel-content {
+        padding: 1rem;
+    }
+}
+
+/* ============================================
+   Files View Mobile Responsive
+   ============================================ */
+
+@media (max-width: 768px) {
+    .files-layout {
+        flex-direction: column;
+    }
+
+    .files-sidebar {
+        width: 100%;
+        max-height: 40vh;
+        border-right: none;
+        border-bottom: 1px solid var(--border);
+    }
+
+    .search-box {
+        padding: 0.75rem;
+    }
+
+    .file-tree {
+        padding: 0.75rem;
+    }
+
+    .tree-item {
+        padding: 0.5rem 0.75rem;
+        font-size: 0.9rem;
+    }
+
+    .file-editor {
+        padding: 1rem;
+    }
+
+    .file-header {
+        flex-wrap: wrap;
+        gap: 0.5rem;
+    }
+
+    .file-header h2 {
+        font-size: 1rem;
+    }
+
+    .file-actions .btn-sm {
+        padding: 0.5rem 0.75rem;
+        font-size: 0.8rem;
+    }
+
+    .code-view {
+        padding: 0.75rem;
+    }
+
+    .code-view pre {
+        padding: 0.75rem;
+        font-size: 0.8rem;
+    }
+
+    .view-toggle {
+        padding: 0.5rem;
+        gap: 0.25rem;
+    }
+
+    .toggle-btn {
+        padding: 0.5rem 0.75rem;
+        font-size: 0.8rem;
+    }
+}
+
+/* ============================================
+   Terminal View Mobile Responsive
+   ============================================ */
+
+@media (max-width: 768px) {
+    .terminal-container {
+        padding: 1rem;
+    }
+
+    .terminal-header {
+        padding: 0.75rem;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+    }
+
+    .terminal-header h2 {
+        font-size: 1rem;
+    }
+
+    .terminal-tabs {
+        flex-wrap: wrap;
+        gap: 0.25rem;
+    }
+
+    .terminal-tab {
+        padding: 0.5rem 0.75rem;
+        font-size: 0.8rem;
+    }
+
+    .terminal-wrapper {
+        height: 400px;
+    }
+}
diff --git a/public/claude-ide/index.html b/public/claude-ide/index.html
index 87e28206..68eb5c8d 100644
--- a/public/claude-ide/index.html
+++ b/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>