feat(frontend): mobile bottom nav, chatbot overhaul, responsive polish

- MobileNav: safe-area-aware bottom tab bar (< md), mirrors desktop nav
- Chatbot: timestamps, per-message copy, retry-on-fail, auto-grow composer,
  MarkdownLite (XSS-safe React nodes, no dangerouslySetInnerHTML)
- AppFrame: NavRail (md+) + MobileNav (< md) + bottom content padding
- Design system: SignalTone ambient (signal/amber/vermilion) driving WebGL
  haze + topbar status pill; SectionHeader/MetricTile; globals.css tokens
- Views: dashboard hero + AmbientField, analysis/media responsive grids

services/frontend/src/components/shell/ambient-app.tsx

@@ -1,3 +1,4 @@
+import { MobileNav } from "./mobile-nav";
 import { NavRail } from "./nav-rail";
 import { TopBar } from "./topbar";
 
@@ -5,6 +6,10 @@ import { TopBar } from "./topbar";
  * App chrome: slim nav rail + sticky top bar + scrollable content region.
  * Sits above the fixed AmbientCanvas. Providers (Ambient + WS) are mounted in
  * the route layout so every page shares one live link and signal context.
+ *
+ * < md the side rail collapses (hidden) and a bottom tab bar (MobileNav)
+ * takes over navigation; the content region gains bottom padding so the last
+ * panel never hides behind the dock.
  */
 export function AppFrame({ children }: { children: React.ReactNode }) {
   return (
@@ -12,10 +17,11 @@ export function AppFrame({ children }: { children: React.ReactNode }) {
       <NavRail />
       <div className="flex min-w-0 flex-1 flex-col">
         <TopBar />
-        <main className="min-h-0 flex-1 overflow-y-auto px-4 pb-[calc(2rem+env(safe-area-inset-bottom))] sm:px-5">
+        <main className="min-h-0 flex-1 overflow-y-auto px-4 pb-[calc(2rem+env(safe-area-inset-bottom))] pt-4 sm:px-5 sm:pb-[calc(2.5rem+env(safe-area-inset-bottom))]">
           {children}
         </main>
       </div>
+      <MobileNav />
     </div>
   );
 }