Pin bottom nav to viewport and reserve scroll clearance.

Track visual viewport for keyboard offset, add bottom spacer, use solid
nav background with safe-area padding, and avoid zero nav offset fallback.

app/layout.tsx

@@ -1,4 +1,4 @@
-import type { Metadata } from "next";
+import type { Metadata, Viewport } from "next";
 import { Press_Start_2P } from "next/font/google";
 import { ThemeProvider } from "next-themes";
 
@@ -16,6 +16,13 @@ export const metadata: Metadata = {
   description: "Build habits, care for your pixel pet, and track wellness every day.",
 };
 
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+  viewportFit: "cover",
+  interactiveWidget: "resizes-content",
+};
+
 const pixelFont = Press_Start_2P({
   weight: "400",
   subsets: ["latin"],