fix(frontend): mobile navbar reachable to all pages + responsive form controls

- Root cause of 'navbar mobile tak bisa pindah halaman': the chatbot FAB
  (fixed right-4 bottom-5 z-50) overlapped the rightmost mobile bottom-nav
  items (z-40) and intercepted taps. Raise the FAB above the nav on mobile
  (bottom above nav, md:bottom-5 on desktop) so it never blocks nav taps.
- Mobile bottom nav now mirrors the FULL desktop sidebar (all 7 items:
  dashboard, messages, voice, media, recordings, moderation, analysis);
  horizontally scrollable + snap-to-active on narrow screens.
- Select dropdown: clamp portal position within viewport + min-width so it
  never overflows off-screen on mobile triggers near the right edge; larger
  tap targets on touch.
- Input/Textarea: text-base (16px) on touch to prevent iOS auto-zoom on
  focus, text-sm on >=sm; comfortable mobile min-height for chat input.
- Add .hermes/plans/mobile-nav-form-responsive.md spec.

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

@@ -2,51 +2,73 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { useEffect, useRef } from "react";
 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.
+ * Mirrors the FULL desktop sidebar nav (all primary items, same as NavRail) so
+ * every page is reachable on mobile. On narrow screens the bar scrolls
+ * horizontally (snap) — the active item snaps into view on navigation. Safe-area
+ * aware for notched devices.
  */
 export function MobileNav() {
   const path = usePathname() ?? "/";
+  const stripRef = useRef<HTMLDivElement>(null);
+
+  // Keep the active item visible: snap it into view whenever the route changes.
+  useEffect(() => {
+    const strip = stripRef.current;
+    if (!strip) return;
+    const item = mobileNavItems.find((n) => isActivePath(path, n.matchPrefix));
+    const el = item
+      ? strip.querySelector<HTMLElement>(`a[href="${item.href}"]`)
+      : null;
+    if (el) {
+      el.scrollIntoView({ block: "nearest", inline: "nearest" });
+    }
+  }, [path]);
 
   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(
-              "game-nav-item relative flex min-h-[44px] flex-1 flex-col items-center justify-center rounded-t-[20px] px-2 pt-2 pb-[calc(0.4rem+env(safe-area-inset-bottom))] md:hidden",
-              active
-                ? "is-active text-signal"
-                : "text-ink-faint hover:text-ink-soft",
-            )}
-          >
-            {active && (
-              <span
-                aria-hidden="true"
-                className="absolute inset-x-4 top-0 h-[2px] bg-signal shadow-[0_0_8px_var(--color-signal-glow)]"
+    <nav className="glass fixed inset-x-0 bottom-0 z-40 md:hidden">
+      <div
+        ref={stripRef}
+        className="flex w-full items-stretch overflow-x-auto overscroll-x-contain px-2 pb-[calc(0.4rem+env(safe-area-inset-bottom))] pt-2 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden sm:justify-around"
+      >
+        {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(
+                "game-nav-item relative flex min-h-[44px] min-w-[60px] flex-1 snap-center flex-col items-center justify-center rounded-t-[20px] px-2 pt-2 pb-[calc(0.4rem+env(safe-area-inset-bottom))] sm:flex-none",
+                active
+                  ? "is-active text-signal"
+                  : "text-ink-faint hover:text-ink-soft",
+              )}
+            >
+              {active && (
+                <span
+                  aria-hidden="true"
+                  className="absolute inset-x-4 top-0 h-[2px] bg-signal shadow-[0_0_8px_var(--color-signal-glow)]"
+                />
+              )}
+              <span className="game-sweep" aria-hidden="true">
+                <i />
+              </span>
+              <item.icon
+                className="relative z-10 size-[20px]"
+                strokeWidth={active ? 2.4 : 2}
               />
-            )}
-            <span className="game-sweep" aria-hidden="true">
-              <i />
-            </span>
-            <item.icon
-              className="relative z-10 size-[20px]"
-              strokeWidth={active ? 2.4 : 2}
-            />
-            {item.label}
-          </Link>
-        );
-      })}
+              {item.label}
+            </Link>
+          );
+        })}
+      </div>
     </nav>
   );
 }