Style AI page like other pages

- Add dark mode support throughout
- Add consistent header with back button
- Add modal dark mode styling

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

src/app/ai/page.tsx

@@ -161,17 +161,29 @@ export default function AIChatPage() {
   };
 
   return (
-    <div className="flex h-screen bg-gradient-to-br from-rose-50 to-amber-50">
+    <div className="flex min-h-screen bg-gradient-to-br from-rose-50 to-amber-50 dark:from-gray-900 dark:to-gray-800">
       {error && (
-        <div className="p-4 bg-red-100 text-red-700">
+        <div className="p-4 bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-200">
           Error: {error}
         </div>
       )}
+
+      {/* Header - same pattern as other pages */}
+      <div className="p-4 flex items-center justify-between">
+        <div className="flex items-center gap-4">
+          <a href="/menu" className="p-2 dark:text-white">←</a>
+          <h1 className="text-xl font-bold dark:text-white">AI Chat</h1>
+        </div>
+        <button onClick={() => setSidebarOpen(!sidebarOpen)} className="p-2 bg-white dark:bg-gray-800 rounded-lg dark:text-white">
+          ☰
+        </button>
+      </div>
+
       {/* Sidebar */}
       <div className={`${sidebarOpen ? "w-64" : "w-0"} overflow-hidden transition-all`}>
-        <div className="w-64 p-4 border-r bg-white h-full overflow-y-auto">
+        <div className="w-64 p-4 border-r bg-white dark:bg-gray-800 h-full overflow-y-auto">
           <div className="flex justify-between items-center mb-4">
-            <h1 className="font-bold">AI Chat</h1>
+            <h1 className="font-bold dark:text-white">Chats</h1>
             <button onClick={createNewSession} className="text-rose-400">+</button>
           </div>
           <div className="space-y-2">
@@ -179,7 +191,7 @@ export default function AIChatPage() {
               <div
                 key={session.id}
                 onClick={() => setCurrentSessionId(session.id)}
-                className={`p-2 rounded-lg cursor-pointer flex justify-between items-center ${session.id === currentSessionId ? "bg-rose-100" : ""}`}
+                className={`p-2 rounded-lg cursor-pointer flex justify-between items-center dark:text-gray-100 ${session.id === currentSessionId ? "bg-rose-100 dark:bg-rose-900" : ""}`}
               >
                 <div className="flex-1">
                   <div className="text-sm font-medium truncate">{session.title}</div>
@@ -193,11 +205,11 @@ export default function AIChatPage() {
                 </button>
                 {deleteConfirm === session.id && (
                   <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
-                    <div className="bg-white p-4 rounded-lg">
+                    <div className="bg-white dark:bg-gray-800 p-4 rounded-lg">
-                      <p className="mb-4">Delete this conversation?</p>
+                      <p className="mb-4 dark:text-white">Delete this conversation?</p>
                       <div className="flex gap-2">
                         <button onClick={() => deleteSession(session.id)} className="bg-red-500 text-white px-3 py-1 rounded">Delete</button>
-                        <button onClick={() => setDeleteConfirm(null)} className="bg-gray-200 px-3 py-1 rounded">Cancel</button>
+                        <button onClick={() => setDeleteConfirm(null)} className="bg-gray-200 dark:bg-gray-600 px-3 py-1 rounded">Cancel</button>
                       </div>
                     </div>
                   </div>
@@ -210,28 +222,26 @@ export default function AIChatPage() {
 
       {/* Main chat */}
       <div className="flex-1 flex flex-col">
-        <div className="p-4 flex items-center border-b bg-white">
+        <div className="p-4 flex items-center border-b bg-white dark:bg-gray-800">
-          <a href="/menu" className="p-2">←</a>
+          <span className="ml-2 font-medium dark:text-white">{currentSession?.title || "AI Chat"}</span>
-          <button onClick={() => setSidebarOpen(!sidebarOpen)} className="p-2">☰</button>
-          <span className="ml-2 font-medium">{currentSession?.title || "AI Chat"}</span>
         </div>
 
         <div className="flex-1 overflow-y-auto p-4 space-y-4">
           {currentSession?.messages.map((msg, i) => (
-            <div key={i} className={`${msg.role === "user" ? "ml-auto bg-rose-100" : "mr-auto bg-gray-100"} p-3 rounded-lg max-w-[80%] whitespace-pre-wrap`}>
+            <div key={i} className={`${msg.role === "user" ? "ml-auto bg-rose-100 dark:bg-rose-900" : "mr-auto bg-gray-100 dark:bg-gray-800 dark:text-gray-100"} p-3 rounded-lg max-w-[80%] whitespace-pre-wrap`}>
               {msg.content}
             </div>
           ))}
         </div>
 
-        <div className="p-4 border-t bg-white">
+        <div className="p-4 border-t bg-white dark:bg-gray-800">
           <div className="flex gap-2">
             <input
               value={input}
               onChange={e => setInput(e.target.value)}
               onKeyDown={e => e.key === "Enter" && handleSend()}
               placeholder="Ask about your baby..."
-              className="flex-1 p-3 border rounded-lg"
+              className="flex-1 p-3 border rounded-lg dark:bg-gray-700 dark:text-white"
               disabled={loading}
             />
             <button onClick={handleSend} disabled={loading || !input.trim()} className={`px-4 py-2 text-white rounded-lg ${loading || !input.trim() ? "bg-gray-300 cursor-not-allowed" : "bg-rose-400"}`}>