Fix text visibility in chat messages with stronger CSS

app.py

@@ -151,7 +151,13 @@ CUSTOM_CSS = """
     --background-fill-primary: #0a0f1a !important;
     --background-fill-secondary: #0a0f1a !important;
     --block-background-fill: #0a0f1a !important;
+    --neutral-50: #ffffff !important;
+    --neutral-100: #f1f5f9 !important;
+    --neutral-200: #e2e8f0 !important;
+    --body-text-color: #ffffff !important;
+    --body-text-color-subdued: #cbd5e1 !important;
     background-color: #0a0f1a !important;
+    color: #ffffff !important;
 }
 
 /* OUTER MESSAGE CONTAINER - NO BORDER */
@@ -170,18 +176,47 @@ CUSTOM_CSS = """
     padding: 12px 16px !important;
 }
 
-/* TEXT - WHITE */
-.message p, .message span, .message div, .prose p, .markdown, .prose {
+/* TEXT - WHITE - COMPREHENSIVE COVERAGE */
+.message p, .message span, .message div, 
+.prose p, .prose span, .prose div,
+.markdown, .markdown p, .markdown span, .markdown div,
+.chatbot p, .chatbot span, .chatbot div,
+[class*="message"] p, [class*="message"] span, [class*="message"] div,
+[class*="bot"] p, [class*="bot"] span, [class*="bot"] div,
+[class*="user"] p, [class*="user"] span, [class*="user"] div,
+.message-bubble-border p, .message-bubble-border span, .message-bubble-border div,
+[class*="bubble"] p, [class*="bubble"] span, [class*="bubble"] div {
     color: #ffffff !important;
     font-size: 15px !important;
     line-height: 1.5 !important;
     background: transparent !important;
+    -webkit-text-fill-color: #ffffff !important;
+}
+
+/* FORCE ALL TEXT WHITE IN CHAT */
+.chatbot, .chatbot *, [class*="chatbot"], [class*="chatbot"] *,
+.prose, .prose *, .markdown, .markdown * {
+    color: #ffffff !important;
+    -webkit-text-fill-color: #ffffff !important;
+}
+
+/* BOT MESSAGE SPECIFIC */
+[data-testid="bot"] *, .bot *, .message.bot * {
+    color: #ffffff !important;
+    -webkit-text-fill-color: #ffffff !important;
+}
+
+/* USER MESSAGE SPECIFIC */
+[data-testid="user"] *, .user *, .message.user * {
+    color: #ffffff !important;
+    -webkit-text-fill-color: #ffffff !important;
 }
 
 /* INPUT */
 textarea, input, [class*="textbox"] {
     background: #1e293b !important;
     color: #f1f5f9 !important;
+    -webkit-text-fill-color: #f1f5f9 !important;
     border: 1px solid #334155 !important;
     border-radius: 12px !important;
 }
@@ -214,6 +249,12 @@ footer, .built-with, .label-wrap, label span, .avatar-container, .avatar {
 .chatbot, [class*="chatbot"] {
     background: #0a0f1a !important;
 }
+
+/* LINKS */
+a, .prose a, .markdown a {
+    color: #38bdf8 !important;
+    -webkit-text-fill-color: #38bdf8 !important;
+}
 """
 
 demo = gr.ChatInterface(