fix(ui): CSS autofill override and text centering

- Add -webkit-autofill selectors to prevent white background on focus
- Add :focus-visible for better accessibility
- Split description into two centered divs with styled HR
- HR element was breaking text-align inheritance

Fixes issue where API key input turned white when browser autofilled
and text after HR was left-aligned instead of centered.

src/app.py

@@ -26,16 +26,28 @@ OrchestratorMode = Literal["simple", "magentic", "advanced", "hierarchical"]
 
 
 # CSS to force dark mode on API key input
+# NOTE: Browser autofill requires -webkit-autofill selectors to override
 CUSTOM_CSS = """
 .api-key-input input {
     background-color: #1f2937 !important;
     color: white !important;
     border-color: #374151 !important;
 }
-.api-key-input input:focus {
+.api-key-input input:focus,
+.api-key-input input:focus-visible {
     background-color: #1f2937 !important;
     color: white !important;
     border-color: #e879f9 !important;
+    outline: none !important;
+}
+/* Override aggressive browser autofill styling */
+.api-key-input input:-webkit-autofill,
+.api-key-input input:-webkit-autofill:hover,
+.api-key-input input:-webkit-autofill:focus {
+    -webkit-box-shadow: 0 0 0px 1000px #1f2937 inset !important;
+    -webkit-text-fill-color: white !important;
+    caret-color: white !important;
+    transition: background-color 5000s ease-in-out 0s;
 }
 """
 
@@ -262,13 +274,17 @@ def create_demo() -> tuple[gr.ChatInterface, gr.Accordion]:
     api_key_state = gr.State("")
 
     # 1. Unwrapped ChatInterface (Fixes Accordion Bug)
+    # NOTE: Using inline styles on each element because HR breaks text-align inheritance
     description = (
-        "<div style='text-align: center'>"
+        "<div style='text-align: center;'>"
         "<em>AI-Powered Research Agent — searches PubMed, "
         "ClinicalTrials.gov, Europe PMC & OpenAlex</em><br><br>"
         "Deep research for sexual wellness, ED treatments, hormone therapy, "
-        "libido, and reproductive health - for all genders.<br><br>"
-        "---<br>"
+        "libido, and reproductive health - for all genders."
+        "</div>"
+        "<hr style='margin: 1em auto; width: 80%; border: none; "
+        "border-top: 1px solid #374151;'>"
+        "<div style='text-align: center;'>"
         "<em>Research tool only — not for medical advice.</em><br>"
         "<strong>MCP Server Active</strong>: Connect Claude Desktop to "
         "<code>/gradio_api/mcp/</code>"