feat(ui): add responsive mobile layout with hamburger menu

Add three responsive breakpoints (1024px, 768px, 480px) to make the
dashboard fully usable on tablets and phones. The sidebar now slides
in as an overlay on mobile with a hamburger toggle in a fixed header bar.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

assets/main.css

@@ -57,6 +57,16 @@ h6 {
     min-height: 100vh;
 }
 
+/* ===== Mobile Header ===== */
+.mobile-header {
+    display: none;
+}
+
+/* ===== Sidebar Backdrop ===== */
+.sidebar-backdrop {
+    display: none;
+}
+
 /* ===== Sidebar ===== */
 .sidebar {
     width: 260px;
@@ -2940,7 +2950,7 @@ h6 {
     color: var(--text-primary);
 }
 
-/* ===== Responsive: Dashboard Pages ===== */
+/* ===== Responsive: Tablet (max-width: 1024px) ===== */
 @media (max-width: 1024px) {
 
     .news-grid,
@@ -2988,10 +2998,97 @@ h6 {
     .news-grid--compact {
         grid-template-columns: repeat(2, 1fr);
     }
+
+    .main-content {
+        padding: 32px 24px;
+    }
+
+    .chat-page {
+        margin: -32px -24px;
+        height: calc(100vh - 64px);
+    }
 }
 
+/* ===== Responsive: Mobile (max-width: 768px) ===== */
 @media (max-width: 768px) {
 
+    /* -- Mobile header bar with hamburger -- */
+    .mobile-header {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        z-index: 90;
+        height: 56px;
+        padding: 0 16px;
+        background-color: var(--bg-sidebar);
+        border-bottom: 1px solid var(--border-primary);
+    }
+
+    .mobile-menu-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 40px;
+        height: 40px;
+        border: none;
+        border-radius: 8px;
+        background: transparent;
+        color: var(--text-primary);
+        cursor: pointer;
+        transition: background-color 0.15s ease;
+    }
+
+    .mobile-menu-btn:hover {
+        background-color: var(--bg-surface);
+    }
+
+    .mobile-header-title {
+        font-family: 'Space Grotesk', sans-serif;
+        font-size: 18px;
+        font-weight: 700;
+        color: var(--text-heading);
+    }
+
+    /* -- Sidebar: hidden off-screen, slides in as overlay -- */
+    .app-shell {
+        flex-direction: column;
+    }
+
+    .sidebar {
+        position: fixed;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        z-index: 200;
+        transform: translateX(-100%);
+        transition: transform 0.25s ease;
+        width: 280px;
+        min-width: 280px;
+    }
+
+    .sidebar--open {
+        transform: translateX(0);
+    }
+
+    .sidebar-backdrop {
+        display: block;
+        position: fixed;
+        inset: 0;
+        z-index: 199;
+        background-color: rgba(0, 0, 0, 0.5);
+    }
+
+    /* -- Main content: add top padding for mobile header -- */
+    .main-content {
+        padding: 72px 16px 24px;
+        min-height: calc(100vh - 56px);
+    }
+
+    /* -- Dashboard grids -- */
     .news-grid,
     .tools-grid,
     .pricing-grid {
@@ -3002,9 +3099,16 @@ h6 {
         grid-template-columns: 1fr;
     }
 
+    .dashboard-grid {
+        grid-template-columns: 1fr;
+    }
+
+    /* -- Chat page -- */
     .chat-page {
         flex-direction: column;
         height: auto;
+        min-height: calc(100vh - 56px);
+        margin: -72px -16px -24px;
     }
 
     .chat-sidebar-panel {
@@ -3015,11 +3119,34 @@ h6 {
         border-bottom: 1px solid var(--border-primary);
     }
 
+    .chat-messages,
+    .chat-message-list {
+        padding: 16px;
+    }
+
+    .chat-input-bar {
+        padding: 12px 16px;
+    }
+
+    .chat-model-bar {
+        padding: 8px 16px;
+    }
+
+    .chat-bubble {
+        max-width: 90%;
+    }
+
+    /* -- Page header -- */
     .page-header {
         flex-direction: column;
         gap: 12px;
     }
 
+    .page-title {
+        font-size: 22px;
+    }
+
+    /* -- Stats bars -- */
     .analytics-stats-bar {
         flex-direction: column;
     }
@@ -3028,8 +3155,171 @@ h6 {
         flex-direction: column;
     }
 
+    /* -- Sub navigation (Developer/Org tabs) -- */
+    .sub-nav {
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+        white-space: nowrap;
+        padding-bottom: 12px;
+    }
+
+    .sub-nav-item {
+        flex-shrink: 0;
+    }
+
+    /* -- Modal -- */
     .modal-content {
         min-width: unset;
         margin: 16px;
+        max-width: calc(100vw - 32px);
+    }
+
+    /* -- Dashboard filters -- */
+    .dashboard-filters {
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+        flex-wrap: nowrap;
+        padding-bottom: 4px;
+    }
+
+    .filter-tab {
+        flex-shrink: 0;
+    }
+
+    /* -- Providers page -- */
+    .providers-layout {
+        grid-template-columns: 1fr;
+    }
+
+    /* -- Tables: horizontal scroll -- */
+    .knowledge-table-wrapper,
+    .org-table-wrapper {
+        margin: 0 -16px;
+        padding: 0 16px;
+    }
+
+    /* -- Settings -- */
+    .settings-input {
+        max-width: 100%;
+    }
+
+    /* -- Placeholder pages -- */
+    .placeholder-card {
+        padding: 32px 20px;
+    }
+
+    /* -- Article detail -- */
+    .article-detail-title {
+        font-size: 18px;
+    }
+
+    .article-detail-content {
+        padding-right: 32px;
+    }
+
+    /* -- CTA banner -- */
+    .cta-banner {
+        padding: 32px 20px;
+    }
+
+    .cta-title {
+        font-size: 22px;
+    }
+
+    .cta-actions {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    /* -- Pricing cards -- */
+    .pricing-card {
+        padding: 24px 20px;
+    }
+}
+
+/* ===== Responsive: Small Phones (max-width: 480px) ===== */
+@media (max-width: 480px) {
+
+    .main-content {
+        padding: 64px 12px 16px;
+    }
+
+    .chat-page {
+        margin: -64px -12px -16px;
+    }
+
+    .hero-title {
+        font-size: 28px;
+    }
+
+    .hero-subtitle {
+        font-size: 15px;
+    }
+
+    .section-title {
+        font-size: 24px;
+    }
+
+    .page-title {
+        font-size: 20px;
+    }
+
+    .overview-heading {
+        font-size: 22px;
+    }
+
+    .dashboard-card {
+        padding: 16px;
+    }
+
+    .tool-card {
+        padding: 16px;
+    }
+
+    .news-card-body {
+        padding: 14px;
+    }
+
+    .social-proof-stats {
+        gap: 16px;
+    }
+
+    .proof-divider {
+        display: none;
+    }
+
+    .proof-stat-value {
+        font-size: 20px;
+    }
+
+    .sidebar {
+        width: 260px;
+        min-width: 260px;
+    }
+
+    .chat-bubble {
+        max-width: 95%;
+        padding: 10px 14px;
+    }
+
+    .modal-content {
+        padding: 20px;
+    }
+
+    .landing-nav-inner {
+        padding: 12px 16px;
+    }
+
+    .features-section,
+    .how-it-works-section {
+        padding: 48px 16px;
+    }
+
+    .step-card {
+        padding: 24px 16px;
+    }
+
+    .feature-card {
+        padding: 20px 16px;
     }
 }