fix(web): improve mobile responsiveness — collapsible map, panel sizing, font bump (#688)

* fix(web): improve mobile responsiveness — collapsible map, panel sizing, font bump (#354)

- Add Show/Hide Map toggle on mobile (collapsed by default, persisted in localStorage)
- Increase panel max-height from 400px to 70vh and add iOS smooth scrolling
- Bump mobile font sizes to 13-14px for readability
- All changes scoped to ≤768px media query or isMobile guard

Closes #354

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* fix(mobile): i18n map toggle, cap panel height, reduce !important

- Replace hardcoded "Show Map"/"Hide Map" with t() i18n calls
  and ▶/▼ chevron prefix for universal clarity
- Add components.map.showMap/hideMap keys to all 18 locales
  (ar, de, el, en, es, fr, it, ja, ko, nl, pl, pt, ru, sv, th, tr, vi, zh)
- Clarify localStorage default: explicit null check instead of
  double-negative !== 'false'
- Cap panel max-height at min(70vh, 500px) to prevent single
  panel from consuming full viewport on tall phones
- Reduce !important in collapsed map styles by raising specificity
  via .main-content ancestor selector

---------

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-authored-by: Elie Habib <elie.habib@gmail.com>

src/styles/main.css

@@ -837,6 +837,11 @@ canvas,
   background: var(--green-dim);
 }
 
+/* Hidden by default — shown only inside 768px media query */
+.map-collapse-btn {
+  display: none;
+}
+
 .panels-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
@@ -9044,10 +9049,23 @@ a.prediction-link:hover {
     padding: 8px;
   }
 
+  body {
+    font-size: 14px;
+  }
+
+  .panel-title {
+    font-size: 13px;
+  }
+
   .panel {
     width: 100% !important;
-    min-height: 300px;
-    max-height: 400px;
+    min-height: 250px;
+    max-height: min(70vh, 500px);
+  }
+
+  .panel-content {
+    font-size: 13px;
+    -webkit-overflow-scrolling: touch;
   }
 
   /* Make map section smaller on mobile to show panels */
@@ -9057,6 +9075,41 @@ a.prediction-link:hover {
     max-height: 50vh !important;
   }
 
+  /* Collapsed map on mobile — higher specificity overrides .map-section above */
+  .main-content .map-section.collapsed {
+    height: auto !important;
+    min-height: 0 !important;
+    max-height: none !important;
+  }
+
+  .main-content .map-section.collapsed .map-container,
+  .main-content .map-section.collapsed .map-resize-handle,
+  .main-content .map-section.collapsed .map-controls,
+  .main-content .map-section.collapsed .time-slider,
+  .main-content .map-section.collapsed .tv-exit-btn {
+    display: none;
+  }
+
+  /* Map collapse toggle button — mobile only */
+  .map-collapse-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    margin-left: auto;
+    padding: 4px 10px;
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    background: var(--bg-secondary);
+    color: var(--text-secondary);
+    font-size: 12px;
+    cursor: pointer;
+    white-space: nowrap;
+  }
+
+  .map-collapse-btn:active {
+    background: var(--bg-tertiary, var(--border));
+  }
+
   /* Hide pin button and resize handles on mobile */
   .map-pin-btn,
   .map-resize-handle,