Add auto-scroll to bottom for new messages

- Automatically scroll to latest message when new messages arrive
- Uses smooth scrolling behavior for better UX
- Triggers on message array changes
- Improves chat experience by keeping conversation in view

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

raggr-frontend/src/components/ChatScreen.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
 import { conversationService } from "../api/conversationService";
 import { QuestionBubble } from "./QuestionBubble";
 import { AnswerBubble } from "./AnswerBubble";
@@ -39,8 +39,13 @@ export const ChatScreen = ({ setAuthenticated }: ChatScreenProps) => {
   const [selectedConversation, setSelectedConversation] =
     useState<Conversation | null>(null);
 
+  const messagesEndRef = useRef<HTMLDivElement>(null);
   const simbaAnswers = ["meow.", "hiss...", "purrrrrr", "yowOWROWWowowr"];
 
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  };
+
   const handleSelectConversation = (conversation: Conversation) => {
     setShowConversations(false);
     setSelectedConversation(conversation);
@@ -91,6 +96,10 @@ export const ChatScreen = ({ setAuthenticated }: ChatScreenProps) => {
     loadConversations();
   }, []);
 
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages]);
+
   useEffect(() => {
     const loadMessages = async () => {
       if (selectedConversation == null) return;
@@ -203,6 +212,7 @@ export const ChatScreen = ({ setAuthenticated }: ChatScreenProps) => {
               }
               return <QuestionBubble key={index} text={msg.text} />;
             })}
+            <div ref={messagesEndRef} />
             <footer className="flex flex-col gap-2 sticky bottom-0">
               <div className="flex flex-row justify-between gap-2 grow">
                 <textarea