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/app/(dashboard)/analysis/view.tsx

@@ -47,7 +47,9 @@ export function AnalysisView() {
           <Sparkles className="size-5 text-signal" />
           <div>
             <div className="eyebrow">Semantic search</div>
-            <h2 className="display text-2xl text-ink">Search the archive</h2>
+            <h2 className="display text-balance text-2xl text-ink">
+              Search the archive
+            </h2>
           </div>
         </div>
         <div className="relative mt-4">

services/frontend/src/app/(dashboard)/dashboard/view.tsx

@@ -74,10 +74,10 @@ export function DashboardView({
         <div className="flex flex-wrap items-end justify-between gap-4">
           <div>
             <div className="eyebrow mb-2">GMW · Operations Grid</div>
-            <h2 className="display text-[2.6rem] leading-none text-ink glow-signal">
+            <h2 className="display hero-clamp leading-none text-ink glow-signal">
               Ambient Field
             </h2>
-            <p className="mt-2 max-w-md text-sm text-ink-soft">
+            <p className="mt-2 max-w-md text-pretty text-sm text-ink-soft">
               Real-time moderation, voice & media presence across the monitored
               guild. {formatNumber(s.total_messages)} messages captured.
             </p>

services/frontend/src/app/(dashboard)/media/view.tsx

@@ -85,7 +85,7 @@ export function MediaView({ initialStatus }: { initialStatus?: MediaState }) {
 
           <div className="min-w-0 flex-1">
             <div className="eyebrow mb-1">Now playing</div>
-            <h2 className="display truncate text-2xl text-ink">
+            <h2 className="display text-balance text-2xl text-ink">
               {current?.title ?? "Nothing queued"}
             </h2>
             {current?.source && (

services/frontend/src/app/globals.css

@@ -171,6 +171,9 @@
   .text-ink-soft { color: var(--color-ink-soft); }
   .text-ink-faint { color: var(--color-ink-faint); }
 
+  /* Fluid hero title — never overflows on small screens. */
+  .hero-clamp { font-size: clamp(1.9rem, 1.2rem + 4vw, 2.6rem); }
+
   .glow-signal {
     text-shadow: 0 0 22px var(--color-signal-glow);
   }