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>
   );
 }

services/frontend/src/components/shell/index.ts

@@ -1,4 +1,5 @@
 export { AppFrame } from "./ambient-app";
+export { MobileNav } from "./mobile-nav";
 export { NavRail } from "./nav-rail";
 export { ConnectionStatus } from "./status-dot";
 export { TopBar } from "./topbar";

services/frontend/src/components/shell/mobile-nav.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { isActivePath, mobileNavItems } from "@/lib/navigation";
+import { cn } from "@/lib/utils";
+
+/**
+ * Mobile bottom tab bar. Shown only < md (the side NavRail is hidden there).
+ * Mirrors the desktop nav items but as a thumb-friendly dock with labels and a
+ * top active indicator. Safe-area aware for notched devices.
+ */
+export function MobileNav() {
+  const path = usePathname() ?? "/";
+
+  return (
+    <nav className="glass fixed inset-x-0 bottom-0 z-40 flex items-stretch justify-around rounded-t-[20px] px-2 pb-[calc(0.4rem+env(safe-area-inset-bottom))] pt-2 md:hidden">
+      {mobileNavItems.map((item) => {
+        const active = isActivePath(path, item.matchPrefix);
+        return (
+          <Link
+            key={item.href}
+            href={item.href}
+            aria-label={item.label}
+            aria-current={active ? "page" : undefined}
+            className={cn(
+              "relative flex flex-1 flex-col items-center justify-center rounded-[12px] rounded-t-[20px] px-2 pb-[calc(0.4rem+env(safe-area-inset-bottom))] pt-2 md:hidden",
+              active
+                ? "bg-signal/15 text-signal"
+                : "text-ink-faint hover:bg-white/5 hover:text-ink-soft",
+            )}
+          >
+            {active && (
+              <span className="absolute -top-2 h-8 w-8 rounded-full bg-signal shadow-[0_0_12px_var(--color-signal-glow)]" />
+            )}
+            <item.icon className="size-[20px]" strokeWidth={active ? 2.4 : 2} />
+            {item.label}
+          </Link>
+        );
+      })}
+    </nav>
+  );
+}

services/frontend/src/components/shell/nav-rail.tsx

@@ -31,6 +31,10 @@ function NavItem({
         <span className="absolute -left-3 h-6 w-1 rounded-full bg-signal shadow-[0_0_12px_var(--color-signal-glow)]" />
       )}
       <Icon className="size-[18px]" strokeWidth={active ? 2.4 : 2} />
+      {/* hover tooltip — labels are hidden in the rail, so surface on hover */}
+      <span className="pointer-events-none absolute left-full z-50 ml-3 hidden whitespace-nowrap rounded-[9px] border border-hairline bg-canvas-2 px-2.5 py-1.5 text-xs font-medium text-ink-soft opacity-0 shadow-lg transition-opacity group-hover:opacity-100 md:block">
+        {label}
+      </span>
     </a>
   );
 }
@@ -40,7 +44,7 @@ export function NavRail() {
   const path = pathname ?? "/";
 
   return (
-    <nav className="glass mb-[calc(0.75rem+env(safe-area-inset-bottom))] ml-[calc(0.75rem+env(safe-area-inset-left))] mt-[calc(0.75rem+env(safe-area-inset-top))] flex w-[68px] flex-col items-center gap-1 rounded-[18px] py-4">
+    <nav className="glass mb-[calc(0.75rem+env(safe-area-inset-bottom))] ml-[calc(0.75rem+env(safe-area-inset-left))] mt-[calc(0.75rem+env(safe-area-inset-top))] hidden w-[68px] flex-col items-center gap-1 rounded-[18px] py-4 md:flex">
       <div className="flex flex-1 flex-col gap-1">
         {navItems.map((item) => (
           <NavItem

services/frontend/src/components/shell/topbar.tsx

@@ -35,7 +35,9 @@ export function TopBar() {
     <header className="sticky top-0 z-40 flex items-center gap-3 px-4 py-3 pt-[calc(0.75rem+env(safe-area-inset-top))] sm:gap-4 sm:px-5 sm:py-3.5">
       <div className="flex min-w-0 items-baseline gap-2 sm:gap-3">
         <span className="eyebrow hidden sm:inline">GMW</span>
-        <h1 className="display truncate text-[1.25rem] text-ink sm:text-[1.5rem]">{label}</h1>
+        <h1 className="display truncate text-[1.25rem] text-ink sm:text-[1.5rem]">
+          {label}
+        </h1>
       </div>
 
       <div className="ml-auto flex items-center gap-2 sm:gap-3">