Fix AI chat: input blocked by bottom nav + first-chat crash

- Add pb-16 to /ai root so the input clears the fixed BottomNav
  (only page using h-screen instead of min-h-screen+pb-24).
- Normalize new sessions with messages:[] in createNewSession so
  render no longer hits undefined.length and crashes on first chat.
- Make render defensive (messages?.length ?? 0).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/app/(app)/ai/page.tsx

@@ -51,8 +51,12 @@ export default function AIChatPage() {
       });
       const data = await res.json();
       if (data.session) {
-        setSessions([data.session, ...sessions]);
-        setCurrentSessionId(data.session.id);
+        // POST /api/chat returns a session without a `messages` field — normalize it
+        // to an empty array so the render path (currentSession.messages.length) never
+        // hits `undefined.length`, which crashed the page on the first new chat.
+        const newSession = { ...data.session, messages: [] };
+        setSessions([newSession, ...sessions]);
+        setCurrentSessionId(newSession.id);
         setSidebarOpen(false);
       }
     } catch (err) {
@@ -150,7 +154,7 @@ export default function AIChatPage() {
   };
 
   return (
-    <div className="flex h-screen bg-gradient-to-br from-rose-50 to-amber-50 dark:from-gray-900 dark:to-gray-800 overflow-hidden">
+    <div className="flex h-screen pb-16 bg-gradient-to-br from-rose-50 to-amber-50 dark:from-gray-900 dark:to-gray-800 overflow-hidden">
 
       {/* Sidebar overlay on mobile */}
       {sidebarOpen && (
@@ -227,12 +231,12 @@ export default function AIChatPage() {
               <p className="text-sm text-gray-400 dark:text-gray-500">Tap ☰ to see past chats, or just type below to start</p>
               <Button onClick={createNewSession} className="mt-2 rounded-full">New Chat</Button>
             </div>
-          ) : currentSession.messages.length === 0 ? (
+          ) : (currentSession.messages?.length ?? 0) === 0 ? (
             <div className="h-full flex flex-col items-center justify-center text-center gap-2">
               <p className="text-gray-400 dark:text-gray-500 text-sm">Type a question below to get started</p>
             </div>
           ) : (
-            currentSession.messages.map((msg, i) => (
+            (currentSession.messages ?? []).map((msg, i) => (
               <div
                 key={i}
                 className={`flex ${msg.role === "user" ? "justify-end" : "justify-start"}`}