UI

app.py

@@ -570,33 +570,34 @@ Answer:"""
         @media (prefers-color-scheme: light) {
             .output-card .placeholder { border-color: var(--border-light); color: var(--text-secondary-light); }
         }
-        .examples-section .gr-examples-table {
+        /* Target the table within the examples section directly */
+        .examples-section table.gr-samples-table { /* Updated selector based on common Gradio internal classes */
             border-radius: var(--radius-md) !important; border: 1px solid var(--border-dark) !important;
             overflow: hidden; background: var(--card-section-bg-dark) !important;
             box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
             transition: border-color var(--transition-speed), background var(--transition-speed), box-shadow var(--transition-speed);
         }
         @media (prefers-color-scheme: light) {
-            .examples-section .gr-examples-table { border: 1px solid var(--border-light) !important; background: var(--card-section-bg-light) !important; box-shadow: inset 0 0 8px rgba(0,0,0,0.05); }
+            .examples-section table.gr-samples-table { border: 1px solid var(--border-light) !important; background: var(--card-section-bg-light) !important; box-shadow: inset 0 0 8px rgba(0,0,0,0.05); }
         }
-        .examples-section .gr-examples-table th, .examples-section .gr-examples-table td { padding: 1rem 1.2rem !important; font-size: 1.05rem !important; border: none !important; }
-        .examples-section .gr-examples-table th {
+        .examples-section table.gr-samples-table th, .examples-section table.gr-samples-table td { padding: 1rem 1.2rem !important; font-size: 1.05rem !important; border: none !important; }
+        .examples-section table.gr-samples-table th {
             background: var(--header-bg-dark) !important; color: var(--text-primary-dark) !important;
             font-weight: 600 !important; text-align: left;
             transition: background var(--transition-speed), color var(--transition-speed);
         }
-        .examples-section .gr-examples-table td {
+        .examples-section table.gr-samples-table td {
             background: var(--card-section-bg-dark) !important; color: var(--text-primary-dark) !important;
             border-top: 1px solid var(--border-dark) !important; cursor: pointer;
             transition: background var(--transition-speed), color var(--transition-speed), border-color var(--transition-speed);
         }
-        .examples-section .gr-examples-table tr:hover td { background: rgba(255, 193, 7, 0.1) !important; }
-        .examples-section .gr-examples-table tr:first-child td { border-top: none !important; }
+        .examples-section table.gr-samples-table tr:hover td { background: rgba(255, 193, 7, 0.1) !important; }
+        .examples-section table.gr-samples-table tr:first-child td { border-top: none !important; }
         @media (prefers-color-scheme: light) {
-            .examples-section .gr-examples-table { border: 1px solid var(--border-light) !important; background: var(--card-section-bg-light) !important; }
-            .examples-section .gr-examples-table th { background: var(--header-bg-light) !important; color: var(--text-primary-light) !important; }
-            .examples-section .gr-examples-table td { background: var(--card-section-bg-light) !important; color: var(--text-primary-light) !important; border-top: 1px solid var(--border-light) !important; }
-            .examples-section .gr-examples-table tr:hover td { background: rgba(0, 123, 255, 0.08) !important; }
+            .examples-section table.gr-samples-table { border: 1px solid var(--border-light) !important; background: var(--card-section-bg-light) !important; }
+            .examples-section table.gr-samples-table th { background: var(--header-bg-light) !important; color: var(--text-primary-light) !important; }
+            .examples-section table.gr-samples-table td { background: var(--card-section-bg-light) !important; color: var(--text-primary-light) !important; border-top: 1px solid var(--border-light) !important; }
+            .examples-section table.gr-samples-table tr:hover td { background: rgba(0, 123, 255, 0.08) !important; }
         }
         .app-footer-wrapper {
             background: var(--header-bg-dark); border-top: 1px solid var(--border-dark) !important;
@@ -670,7 +671,7 @@ Answer:"""
             .section-divider { margin: 1.8rem 0; } .input-row { gap: 1.5rem; } .input-field { min-width: 280px; }
             .gradio-textbox textarea { min-height: 160px; } .output-card .response-header { font-size: 1.7rem; }
             .examples-section { padding-top: 1.2rem; }
-            .examples-section .gr-examples-table th, .examples-section .gr-examples-table td { padding: 0.9rem 1.1rem !important; }
+            .examples-section table.gr-samples-table th, .examples-section table.gr-samples-table td { padding: 0.9rem 1.1rem !important; }
             .app-footer-wrapper { margin-top: 0.6rem; border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); }
             .app-footer { padding: 0 1.5rem !important; }
         }
@@ -689,7 +690,7 @@ Answer:"""
             .output-card .response-header { font-size: 1.5rem; } .output-card .response-icon { font-size: 1.7rem; }
             .output-card .placeholder { padding: 2.5rem 1.5rem; font-size: 1.1rem; }
             .examples-section { padding-top: 1.2rem; }
-            .examples-section .gr-examples-table th, .examples-section .gr-examples-table td { padding: 0.9rem 1.1rem !important; font-size: 1.0rem !important; }
+            .examples-section table.gr-samples-table th, .examples-section table.gr-samples-table td { padding: 0.9rem 1.1rem !important; font-size: 1.0rem !important; }
             .app-footer-wrapper { margin-top: 0.6rem; border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); padding-top: 2rem; padding-bottom: 2rem; }
             .app-footer { padding: 0 1rem !important; }
         }
@@ -709,7 +710,7 @@ Answer:"""
             .output-card .response-header { font-size: 1.4rem; } .output-card .response-icon { font-size: 1.5rem; }
             .output-card .placeholder { padding: 2rem 1rem; font-size: 1.05rem; }
             .examples-section { padding-top: 0.8rem; }
-            .examples-section .gr-examples-table th, .examples-section .gr-examples-table td { padding: 0.6rem 0.8rem !important; font-size: 0.95rem !important; }
+            .examples-section table.gr-samples-table th, .examples-section table.gr-samples-table td { padding: 0.6rem 0.8rem !important; font-size: 0.95rem !important; }
             .app-footer-wrapper { margin-top: 0.4rem; border-top-left-radius: var(--radius-sm); border-top-right-radius: var(--radius-sm); padding-top: 1.5rem; padding-bottom: 1.5rem; }
             .app-footer { padding: 0 0.8rem !important; }
         }
@@ -786,8 +787,8 @@ Answer:"""
                         gr.Examples(
                             examples=example_queries, inputs=[query_input, state_input],
                             examples_per_page=5,
-                            label="", # Label hidden by CSS
-                            elem_classes=["gr-examples-table"] # Custom class for table styling
+                            label="" # Label hidden by CSS
+                            # Removed: elem_classes=["gr-examples-table"]
                         )
                     else:
                         gr.Markdown("<div class='placeholder'>Sample questions could not be loaded.</div>")