Fix ThinkingBubble position: render above streaming answer not below

The ThinkingBubble was rendering after the messages list, so it appeared
below the partial answer while streaming. Inject it inside the messages
map just before the last streaming simba message so it sits above the
answer text. Keep the post-list fallback for when thinking is active
but no content has arrived yet.

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

raggr-frontend/src/components/ChatScreen.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState, useRef } from "react";
+import React, { useCallback, useState, useRef } from "react";
 import { useNavigate } from "react-router-dom";
 import { PanelLeftOpen, Menu, X } from "lucide-react";
 import { QuestionBubble } from "./QuestionBubble";
@@ -248,14 +248,42 @@ export const ChatScreen = ({ setAuthenticated, isAdmin }: ChatScreenProps) => {
             <div className="flex-1 overflow-y-auto px-4 py-6">
               <div className="max-w-3xl mx-auto flex flex-col gap-6">
                 {messages.map((msg, index) => {
-                  if (msg.speaker === "tool")
-                    return <ToolBubble key={index} text={msg.text} />;
-                  if (msg.speaker === "simba")
-                    return <AnswerBubble key={index} text={msg.text} />;
-                  return <QuestionBubble key={index} text={msg.text} image_key={msg.image_key} />;
+                  // When the model has been thinking and content is now streaming,
+                  // render ThinkingBubble just before the streaming simba message
+                  // so it appears above the answer rather than below it.
+                  const showThinkingHere =
+                    streaming &&
+                    isLoading &&
+                    (thinking || thinkingText || thinkingDurationMs !== null) &&
+                    index === messages.length - 1 &&
+                    msg.speaker === "simba";
+
+                  const bubble =
+                    msg.speaker === "tool" ? (
+                      <ToolBubble key={index} text={msg.text} />
+                    ) : msg.speaker === "simba" ? (
+                      <AnswerBubble key={index} text={msg.text} />
+                    ) : (
+                      <QuestionBubble key={index} text={msg.text} image_key={msg.image_key} />
+                    );
+
+                  if (showThinkingHere) {
+                    return (
+                      <React.Fragment key={index}>
+                        <ThinkingBubble
+                          text={thinkingText}
+                          durationMs={thinkingDurationMs}
+                          active={thinking}
+                        />
+                        {bubble}
+                      </React.Fragment>
+                    );
+                  }
+                  return bubble;
                 })}
 
-                {isLoading && (thinking || thinkingText || thinkingDurationMs !== null) && (
+                {/* ThinkingBubble before content arrives (no streaming message yet) */}
+                {isLoading && !streaming && (thinking || thinkingText || thinkingDurationMs !== null) && (
                   <ThinkingBubble
                     text={thinkingText}
                     durationMs={thinkingDurationMs}