Fix AI chat input width — stretch to fill the row

The Input component renders its own wrapper div, so flex-1 passed to
<Input> only hit the inner <input> (already w-full) while the wrapper
stayed content-width, leaving the box narrow with empty space beside it.
Wrap Input in a flex-1 div so the flex child actually stretches.

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

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

@@ -267,15 +267,19 @@ export default function AIChatPage() {
 
         {/* Input */}
         <div className="p-4 border-t bg-white dark:bg-gray-800 flex-shrink-0">
-          <div className="flex gap-2">
+          <div className="flex items-center gap-2">
-            <Input
+            {/* Input renders its own wrapper div, so flex-1 must go on a wrapper
-              value={input}
+                here — putting it on <Input> only hits the inner <input> (already
-              onChange={e => setInput(e.target.value)}
+                w-full) and the wrapper stays content-width, leaving it narrow. */}
-              onKeyDown={e => e.key === "Enter" && !e.shiftKey && handleSend()}
+            <div className="flex-1">
-              placeholder="Ask about your baby..."
+              <Input
-              disabled={loading}
+                value={input}
-              className="flex-1"
+                onChange={e => setInput(e.target.value)}
-            />
+                onKeyDown={e => e.key === "Enter" && !e.shiftKey && handleSend()}
+                placeholder="Ask about your baby..."
+                disabled={loading}
+              />
+            </div>
             <Button onClick={handleSend} disabled={loading || !input.trim()} loading={loading}>
               Send
             </Button>