Fix chat multi-turn fallback + mobile UI tweaks

- Wrap plain-text assistant history in JSON before sending to Nova Lite
  (prevents model from dropping JSON output mode after 2-3 turns)
- Reset fallbackMode flag when AI responds successfully
- Chat container fills viewport, input bar closer to bottom nav
- Bottom nav icon-label gap increased for better touch targets

Author: Partha-dev01

app/api/chat/conversation/route.ts

@@ -268,9 +268,14 @@ export async function POST(req: NextRequest) {
 
     for (const msg of messages) {
       if (msg.role === "assistant") {
+        // Wrap plain-text assistant messages in JSON so Nova stays in JSON-output mode
+        const isJson = msg.content.trimStart().startsWith("{");
+        const wrapped = isJson
+          ? msg.content
+          : JSON.stringify({ text: msg.content, turnType: "question", expectsResponse: true, responseRelevance: 0.5, shouldEnd: false, domain: "general", action: null });
         novaMessages.push({
           role: "assistant",
-          content: [{ text: msg.content }],
+          content: [{ text: wrapped }],
         });
       } else {
         novaMessages.push({

app/components/BottomNav.tsx

@@ -50,7 +50,7 @@ export default function BottomNav() {
               display: "flex",
               flexDirection: "column",
               alignItems: "center",
-              gap: 2,
+              gap: 4,
               textDecoration: "none",
               color: isActive ? "var(--sage-600)" : "var(--text-muted)",
               minWidth: 56,

app/kid-dashboard/chat/page.tsx

@@ -92,7 +92,7 @@ export default function ChatPage() {
       });
       if (!res.ok) throw new Error("API error");
       const data = await res.json();
-      if (data.fallback) setFallbackMode(true);
+      setFallbackMode(!!data.fallback);
       return { text: data.text || "That was fun! Let's talk again soon!", shouldEnd: data.metadata?.shouldEnd === true };
     } catch {
       setFallbackMode(true);
@@ -230,7 +230,7 @@ export default function ChatPage() {
         </div>
       </nav>
 
-      <div className="main fade fade-1" style={{ maxWidth: 600, padding: "32px 24px 80px" }}>
+      <div className="main fade fade-1" style={{ maxWidth: 600, padding: "32px 24px 80px", display: "flex", flexDirection: "column", flex: 1 }}>
 
         {/* ---- AVATAR SELECTION SCREEN ---- */}
         {screen === "select" && (
@@ -286,7 +286,7 @@ export default function ChatPage() {
 
         {/* ---- CHAT SCREEN ---- */}
         {screen === "chat" && animalInfo && animal && (
-          <div className="fade fade-2" style={{ display: "flex", flexDirection: "column", minHeight: "60vh" }}>
+          <div className="fade fade-2" style={{ display: "flex", flexDirection: "column", flex: 1, minHeight: 0 }}>
             {/* Avatar header */}
             <div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginBottom: 16 }}>
               <AnimalAvatar animal={animal} gender="boy"state={avatarState} size={120} />
@@ -314,7 +314,7 @@ export default function ChatPage() {
             {/* Messages container */}
             <div style={{
               flex: 1, overflowY: "auto", display: "flex", flexDirection: "column",
-              gap: 12, padding: "12px 0", marginBottom: 16, maxHeight: "40vh",
+              gap: 12, padding: "12px 0", marginBottom: 8, minHeight: 0,
             }}>
               {messages.map((msg, i) => (
                 <div key={i} style={{ display: "flex", justifyContent: msg.role === "assistant" ? "flex-start" : "flex-end" }}>