Update app.py

app.py

@@ -54,7 +54,6 @@ 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 {
@@ -120,77 +119,12 @@ def inject_custom_css():
         }
 
         .help-chat {
-            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;
+            background: rgba(255,255,255,0.9);
+            backdrop-filter: blur(10px);
+            border-radius: 15px;
             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;
+            margin: 1rem 0;
+            box-shadow: 0 8px 30px rgba(0,0,0,0.12);
         }
 
         @keyframes fadeInSlide {
@@ -467,51 +401,19 @@ def main():
                     st.experimental_rerun()
 
         # Side Help Option: independent chat with an AI help assistant using Hugging Face model
-        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)
-            
-            # Display chat messages first
+        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:
-                    # 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)
-
-            # Chat input form at bottom (separate form to ensure it works)
-            with st.form("help_chat_form", clear_on_submit=True):
-                help_query = st.text_input("Type your question here:", 
-                                        key="help_query", 
-                                        placeholder="How to play? What are the rules?",
-                                        label_visibility="collapsed")
-                submitted = st.form_submit_button("Send →")
-                
-                if submitted and help_query:
-                    with st.spinner("Assistant is thinking..."):
-                        help_response = ask_help_agent(help_query)
-                        st.session_state.help_conversation.append({
-                            "query": help_query, 
-                            "response": help_response
-                        })
-                    st.experimental_rerun()
+                    st.markdown(f"**You:** {msg['query']}")
+                    st.markdown(f"**Help Assistant:** {msg['response']}")
+
     # Guess confirmation screen using text input response
     elif st.session_state.game_state == "confirm_guess":
         st.markdown(f'''