feat: full mobile responsive optimization for Android/iPhone

- Add bottom navigation bar (6 tabs) for mobile, hidden on desktop
- Compact header with smaller logo and reduced padding on mobile
- Collapsible filter bar with active filter count badge on mobile
- Bottom-sheet style dropdowns with overlay and larger touch targets
- Fullscreen AI chat on mobile, floating window on desktop
- Responsive dashboard cards with always-visible expand button
- Smaller table text and touch-friendly scroll on all data grids
- iPhone safe-area support and thinner scrollbars on mobile

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

index.html

@@ -44,6 +44,14 @@
       background: #475569;
     }
 
+    /* Thinner scrollbar on mobile */
+    @media (max-width: 767px) {
+      ::-webkit-scrollbar {
+        width: 4px;
+        height: 4px;
+      }
+    }
+
     @keyframes bounce-subtle {
 
       0%,
@@ -59,6 +67,23 @@
     .animate-bounce-subtle {
       animation: bounce-subtle 2s ease-in-out infinite;
     }
+
+    /* Bottom nav safe area for iPhones with notch */
+    .pb-safe {
+      padding-bottom: env(safe-area-inset-bottom, 0px);
+    }
+
+    /* Smooth momentum scrolling on iOS */
+    .scroll-touch {
+      -webkit-overflow-scrolling: touch;
+    }
+
+    /* Bottom nav spacing - adds padding so content isn't hidden behind fixed bottom nav */
+    @media (max-width: 767px) {
+      body {
+        padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
+      }
+    }
   </style>
 
 </head>