Update app.py

app.py

@@ -54,6 +54,7 @@ def inject_custom_css():
             border: 1px solid #e2e8f0;
             position: relative;
             transition: transform 0.2s ease;
+            color: #1E293B; /* Add this line to ensure black text */
         }
 
         .question-box:hover {
@@ -119,12 +120,77 @@ def inject_custom_css():
         }
 
         .help-chat {
-            background: rgba(255,255,255,0.9);
-            backdrop-filter: blur(10px);
-            border-radius: 15px;
-            padding: 1rem;
+            background: rgba(255,255,255,0.98);
+            backdrop-filter: blur(12px);
+            border-radius: 16px;
+            padding: 1.5rem;
+            margin: 2rem 0;
+            box-shadow: 0 12px 40px rgba(0,0,0,0.15);
+            border: 1px solid #e2e8f0;
+            max-height: 400px;
+            overflow-y: auto;
+        }
+        .chat-header {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            margin-bottom: 1.5rem;
+            padding-bottom: 1rem;
+            border-bottom: 2px solid #f1f5f9;
+        }
+
+        .chat-header-icon {
+            background: #6C63FF;
+            width: 40px;
+            height: 40px;
+            border-radius: 12px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-size: 1.2rem;
+        }
+
+        .chat-message {
             margin: 1rem 0;
-            box-shadow: 0 8px 30px rgba(0,0,0,0.12);
+            padding: 1rem;
+            border-radius: 12px;
+            max-width: 80%;
+            animation: fadeInSlide 0.3s ease;
+        }
+
+        .user-message {
+            background: #6C63FF;
+            color: white;
+            margin-left: auto;
+            border-bottom-right-radius: 4px;
+        }
+
+        .assistant-message {
+            background: #f8f9fa;
+            color: #1e293b;
+            margin-right: auto;
+            border-bottom-left-radius: 4px;
+        }
+
+        .message-content {
+            font-size: 0.95rem;
+            line-height: 1.5;
+        }
+
+        .message-timestamp {
+            font-size: 0.75rem;
+            color: #64748b;
+            margin-top: 0.5rem;
+            text-align: right;
+        }
+
+        .chat-input {
+            position: sticky;
+            bottom: 0;
+            background: white;
+            padding-top: 1rem;
+            margin-top: 1rem;
         }
 
         @keyframes fadeInSlide {
@@ -401,19 +467,50 @@ def main():
                     st.experimental_rerun()
 
         # Side Help Option: independent chat with an AI help assistant using Hugging Face model
-        with st.expander("Need Help? Chat with AI Assistant"):
-            help_query = st.text_input("Enter your help query:", key="help_query")
-            if st.button("Send", key="send_help"):
-                if help_query:
-                    help_response = ask_help_agent(help_query)
-                    st.session_state.help_conversation.append({"query": help_query, "response": help_response})
-                else:
-                    st.error("Please enter a query!")
-            if st.session_state.help_conversation:
-                for msg in st.session_state.help_conversation:
-                    st.markdown(f"**You:** {msg['query']}")
-                    st.markdown(f"**Help Assistant:** {msg['response']}")
-
+        with st.expander("🧠 AI Assistant Help Center", expanded=False):
+            st.markdown("""
+            <div class="chat-header">
+                <div class="chat-header-icon">
+                    <i class="fas fa-robot"></i>
+                </div>
+                <h3 style="margin:0;color:#1e293b;">Gameplay Assistant</h3>
+            </div>
+            """, unsafe_allow_html=True)
+            
+            # Chat messages container
+            chat_container = st.container()
+            
+            # Input at bottom
+            with st.form("help_chat_form"):
+                cols = st.columns([4, 1])
+                help_query = cols[0].text_input("Type your question here:", key="help_query", 
+                                              placeholder="How to play? What are the rules?")
+                submitted = cols[1].form_submit_button("Send →")
+                
+            if submitted and help_query:
+                help_response = ask_help_agent(help_query)
+                st.session_state.help_conversation.append({"query": help_query, "response": help_response})
+                st.experimental_rerun()
+
+            # Display chat messages
+            with chat_container:
+                if st.session_state.help_conversation:
+                    for msg in st.session_state.help_conversation:
+                        # User message
+                        st.markdown(f"""
+                        <div class="chat-message user-message">
+                            <div class="message-content">{msg['query']}</div>
+                            <div class="message-timestamp">You</div>
+                        </div>
+                        """, unsafe_allow_html=True)
+                        
+                        # Assistant message
+                        st.markdown(f"""
+                        <div class="chat-message assistant-message">
+                            <div class="message-content" style="color:#1e293b;">{msg['response']}</div>
+                            <div class="message-timestamp">Assistant</div>
+                        </div>
+                        """, unsafe_allow_html=True)
     # Guess confirmation screen using text input response
     elif st.session_state.game_state == "confirm_guess":
         st.markdown(f'''