Update app.py

app.py

@@ -65,10 +65,23 @@ st.markdown("""
     .stChatMessage { max-width: 85%; border-radius: 12px; padding: 8px; margin-bottom: 10px; }
     .stChatMessage[data-testid="stChatMessage-user"] { background: #f0f0f0; color: #000000; }
     .stChatMessage[data-testid="stChatMessage-assistant"] { background: #e3f2fd; color: #000000; }
+    .chat-body {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+        height: 75vh;
+        margin-bottom: 6em;
+    }
     .chat-history-wrapper {
-        display: flex; flex-direction: column; justify-content: flex-end;
-        height: 65vh; overflow-y: auto;
-        margin-bottom: 6em; padding: 0 0.5em;
+        flex-grow: 1;
+        overflow-y: auto;
+        padding: 0 0.5em;
+    }
+    .lorain-thinking {
+        text-align: center;
+        color: #ddd;
+        font-size: 14px;
+        margin: 0.5em 0;
     }
     .chat-input-bar {
         position: fixed; bottom: 0; width: 100%; z-index: 100;
@@ -175,18 +188,14 @@ def synthesize_voice(text, voice_key, user_id):
         st.session_state["last_voice"] = voice
     return out_path
 
-# --- Show chat history ---
+# --- Chat BODY ---
+st.markdown('<div class="chat-body">', unsafe_allow_html=True)
 display_chat_history()
 
-# --- LORAIN is thinking indicator ---
 if st.session_state.get("is_thinking", False):
-    st.markdown("""
-    <div style="
-        text-align:center; color:#ddd; font-size: 14px;
-        margin-top: 0.5em; margin-bottom: 0.5em;">
-        🤖 <em>LORAIN is thinking...</em>
-    </div>
-    """, unsafe_allow_html=True)
+    st.markdown('<div class="lorain-thinking">🤖 <em>LORAIN is thinking...</em></div>', unsafe_allow_html=True)
+
+st.markdown('</div>', unsafe_allow_html=True)
 
 # --- Input bar (floating at bottom) ---
 st.markdown('<div class="chat-input-bar">', unsafe_allow_html=True)