Upload app.py

app.py

@@ -20,141 +20,91 @@ def chatbot_response(message):
     response = query_engine.query(message)
     return str(response)
 
-# Custom CSS for purple button styling
+# Custom CSS for purple button styling - Only target main action buttons
 custom_css = """
-/* Target all possible Gradio button selectors */
-button,
-.btn,
-.gr-button,
-.gradio-button,
-input[type="submit"],
-.submit-btn {
+/* Target only main action buttons (Submit/Clear) - not example buttons */
+button.primary,
+.gradio-button.primary,
+button.lg.primary,
+button.svelte-cmf5ev.primary {
     background: linear-gradient(45deg, #8B5CF6, #A855F7) !important;
     border: none !important;
     color: white !important;
     border-radius: 8px !important;
 }
 
-button:hover,
-.btn:hover,
-.gr-button:hover,
-.gradio-button:hover,
-input[type="submit"]:hover,
-.submit-btn:hover {
+button.primary:hover,
+.gradio-button.primary:hover,
+button.lg.primary:hover,
+button.svelte-cmf5ev.primary:hover {
     background: linear-gradient(45deg, #7C3AED, #9333EA) !important;
     transform: translateY(-2px) !important;
     box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3) !important;
     transition: all 0.2s ease !important;
 }
 
-/* Specific targeting for different Gradio versions */
-.gradio-container button,
-.gradio-container .btn {
-    background: linear-gradient(45deg, #8B5CF6, #A855F7) !important;
-    border: none !important;
-    color: white !important;
-}
-
-.gradio-container button:hover,
-.gradio-container .btn:hover {
-    background: linear-gradient(45deg, #7C3AED, #9333EA) !important;
-}
-
-/* Target by CSS classes that might be used */
-.primary,
-.btn-primary,
-.gr-button-primary {
-    background: linear-gradient(45deg, #8B5CF6, #A855F7) !important;
-    border: none !important;
-    color: white !important;
-}
-
-.primary:hover,
-.btn-primary:hover,
-.gr-button-primary:hover {
-    background: linear-gradient(45deg, #7C3AED, #9333EA) !important;
-}
-
-/* Very specific targeting for submit-like buttons */
-button[aria-label*="Submit"],
-button[title*="Submit"],
-.submit,
-.gr-form button {
-    background: linear-gradient(45deg, #8B5CF6, #A855F7) !important;
-    border: none !important;
-    color: white !important;
+/* Secondary buttons (like Clear) - keep them distinguishable */
+button.secondary,
+.gradio-button.secondary,
+button.lg.secondary,
+button.svelte-cmf5ev.secondary {
+    background: #E5E7EB !important;
+    color: #374151 !important;
+    border: 1px solid #D1D5DB !important;
+    border-radius: 8px !important;
 }
 
-/* Override any orange/default styling */
-.gradio-button.primary,
-.btn.primary,
-button.primary {
-    background: linear-gradient(45deg, #8B5CF6, #A855F7) !important;
-    border: none !important;
-    color: white !important;
+button.secondary:hover,
+.gradio-button.secondary:hover,
+button.lg.secondary:hover,
+button.svelte-cmf5ev.secondary:hover {
+    background: #F3F4F6 !important;
+    color: #374151 !important;
+    transform: translateY(-1px) !important;
 }
 
-/* Example buttons */
+/* Example buttons - ensure they have proper contrast */
+.gallery-item,
+button.gallery-item,
 .examples button,
-.examples .btn,
-.examples .gr-button {
+.examples .gallery-item {
     background: white !important;
-    color: black !important;
+    color: #374151 !important;
     border: 1px solid #D1D5DB !important;
     border-radius: 8px !important;
 }
 
+.gallery-item:hover,
+button.gallery-item:hover,
 .examples button:hover,
-.examples .btn:hover,
-.examples .gr-button:hover {
-    background: #F3F4F6 !important;
-    color: black !important;
+.examples .gallery-item:hover {
+    background: #F9FAFB !important;
+    color: #374151 !important;
     border-color: #9CA3AF !important;
     transform: translateY(-1px) !important;
 }
 
-/* More specific targeting for example button text */
-.examples button *,
-.examples .btn *,
-.examples .gr-button * {
-    color: black !important;
-}
-
-/* Target any nested elements that might contain the text */
-.examples button span,
-.examples .btn span,
-.examples .gr-button span,
-.examples button div,
-.examples .btn div,
-.examples .gr-button div {
-    color: black !important;
-}
-
-/* Nuclear option - force ALL text in examples to be black */
-.examples,
-.examples * {
-    color: black !important;
-}
-
-/* Alternative approach - target by data attributes or specific classes */
-[data-testid*="example"] button,
-[data-testid*="example"] * {
-    color: black !important;
+/* Force text color in example buttons to be dark */
+.gallery-item,
+.gallery-item *,
+button.gallery-item,
+button.gallery-item *,
+.examples button,
+.examples button * {
+    color: #374151 !important;
 }
 
-/* Clear/secondary buttons */
-.secondary,
-.btn-secondary,
-.gr-button-secondary {
-    background: #E5E7EB !important;
-    color: #374151 !important;
-    border: 1px solid #D1D5DB !important;
+/* Specific targeting for HF Spaces compatibility */
+.gradio-container button.primary,
+.gradio-container .primary {
+    background: linear-gradient(45deg, #8B5CF6, #A855F7) !important;
+    border: none !important;
+    color: white !important;
 }
 
-.secondary:hover,
-.btn-secondary:hover,
-.gr-button-secondary:hover {
-    background: #F3F4F6 !important;
+.gradio-container button.primary:hover,
+.gradio-container .primary:hover {
+    background: linear-gradient(45deg, #7C3AED, #9333EA) !important;
 }
 """