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>

components/DataGrid.tsx

@@ -738,7 +738,7 @@ const DataGrid: React.FC<DataGridProps> = ({ data, filters, hasCustomerFilter, a
     }, [rowFilters, data, effectiveDimensions, searchTerm]);
 
     return (
-        <div className="space-y-6 max-w-[95vw] mx-auto animate-fade-in pb-24">
+        <div className="space-y-4 md:space-y-6 max-w-[98vw] md:max-w-[95vw] mx-auto animate-fade-in px-1 md:px-0 pb-24">
 
             {/* 1. Time Series Chart Section */}
             {showChart && chartData.length > 0 && (
@@ -1173,8 +1173,8 @@ const DataGrid: React.FC<DataGridProps> = ({ data, filters, hasCustomerFilter, a
             )}
 
             {/* Data Table */}
-            <div className="overflow-x-auto min-h-[400px]">
-                <table className="w-full text-left text-sm border-collapse">
+            <div className="overflow-x-auto min-h-[400px] scroll-touch">
+                <table className="w-full text-left text-xs md:text-sm border-collapse">
                     <thead className="bg-slate-950 text-slate-400 uppercase text-xs font-semibold tracking-wider sticky top-0 z-20 shadow-sm border-b border-white/10">
                         {/* NEW: Filtered Totals Header Row */}
                         <tr className="bg-indigo-950/20 border-b border-indigo-500/30">