optimized for hf

app.py

@@ -385,6 +385,11 @@ Answer:"""
             margin-bottom: 2.5rem; /* Space between header and main console */
             border: 1px solid var(--border-dark); /* Subtle frame */
             border-top: none; /* No top border for flush with screen top */
+            /* ADDED FOR ROBUST CENTERING */
+            max-width: 1120px; /* Match the main content width */
+            margin-left: auto;
+            margin-right: auto;
+            width: 100%; /* Ensure it fills parent width up to max-width */
         }
         @media (prefers-color-scheme: light) {
             .app-header-wrapper {
@@ -458,6 +463,8 @@ Answer:"""
             display: flex;
             flex-direction: column;
             gap: 2.5rem; /* Space between the main "cards" inside the console */
+            /* ADDED FOR ROBUST WIDTH CONSTRAINT */
+            max-width: 1120px; /* Ensure it matches the header and footer width */
         }
         @media (prefers-color-scheme: light) {
             .main-dashboard-container {
@@ -903,6 +910,11 @@ Answer:"""
             border-top-right-radius: var(--radius-lg);
             box-shadow: inset 0 8px 15px rgba(0,0,0,0.2); /* Inset shadow for depth */
             transition: background var(--transition-speed), border-color var(--transition-speed), box-shadow var(--transition-speed);
+            /* ADDED FOR ROBUST CENTERING */
+            max-width: 1120px; /* Ensure it matches the main content width */
+            margin-left: auto;
+            margin-right: auto;
+            width: 100%; /* Ensure it fills parent width up to max-width */
         }
         @media (prefers-color-scheme: light) {
             .app-footer-wrapper {
@@ -1033,8 +1045,8 @@ 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: 1rem; }
-            .examples-section .gr-examples-table th, .examples-section .gr-examples-table td { padding: 0.8rem 1rem !important; font-size: 1.0rem !important; }
+            .examples-section { padding-top: 1.2rem; } /* Restore to 1.2rem from 1rem */
+            .examples-section .gr-examples-table th, .examples-section .gr-examples-table td { padding: 0.9rem 1.1rem !important; font-size: 1.0rem !important; } /* Restore to 0.9rem/1.1rem */
             .app-footer-wrapper { margin-top: 0.5rem; padding-top: 2rem; padding-bottom: 2rem; border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); }
         }
 
@@ -1055,7 +1067,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; } /* Slightly reduce padding on tiny screens for example section */
+            .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; }
             .app-footer-wrapper { margin-top: 0.4rem; padding-top: 1.5rem; padding-bottom: 1.5rem; border-top-left-radius: var(--radius-sm); border-top-right-radius: var(--radius-sm); }
         }
@@ -1101,7 +1113,7 @@ Answer:"""
                     with gr.Row(elem_classes="input-row"): # Query and State in one row
                         with gr.Column(elem_classes="input-field", scale=3): # Query box takes more space
                             query_input = gr.Textbox(
-                                label="Your Question", placeholder="E.g., What are the rules for security deposit returns in my state?",
+                                label="Question", placeholder="E.g., What are the rules for security deposit returns in my state?",
                                 lines=5, max_lines=10
                             )
                         with gr.Column(elem_classes="input-field", scale=1): # State dropdown takes less space