Scroll now follows the text

src/routes/(app)/game/[game_id]/+page.svelte

@@ -15,6 +15,17 @@
 
     let inputText = $state("");
     let sidebarOpen = $state(false);
+    let messagesEl;
+
+    const scrollToBottom = () => {
+        if (messagesEl) messagesEl.scrollTop = messagesEl.scrollHeight;
+    };
+
+    $effect(() => {
+        turns.length;
+        if (turns.length > 0) turns[turns.length - 1].llm_text;
+        scrollToBottom();
+    });
 
     const autogrow = (node) => {
         const update = () => {
@@ -107,7 +118,7 @@
         <span class="mobile-title">{game.title}</span>
     </div>
 
-    <main class="messages">
+    <main class="messages" bind:this={messagesEl}>
         <div class="messages-inner">
             {#each turns as turn, i}
                 {#if i !== 0}