UI update

app.py

@@ -249,7 +249,7 @@ Answer:"""
             if not api_key or not api_key.strip() or not api_key.startswith("sk-"):
                 return "<div class='error-message'><span class='error-icon'>⚠️</span>Please provide a valid OpenAI API key (starting with 'sk-'). <a href='https://platform.openai.com/api-keys' target='_blank'>OpenAI</a>.</div>"
             if not state or state == "Select a state..." or "Error" in state:
-                return "<div class='error-message'><span class='error-icon'>⚠️</span>Please select a valid state from the list.</div>" # Changed dropdown to list
+                return "<div class='error-message'><span class='error-icon'>⚠️</span>Please select a valid state from the list.</div>"
             if not query or not query.strip():
                 return "<div class='error-message'><span class='error-icon'>⚠️</span>Please enter your question in the text box.</div>"
 
@@ -271,7 +271,6 @@ Answer:"""
             # DEBUG: Print states to console to verify if data is loaded
             print(f"DEBUG: States loaded for selection: {available_states_list}")
             # Ensure "Select a state..." is always the first option
-            # For Radio, we might want a distinct initial "no selection" state
             radio_choices = ["Select a state..."] + (available_states_list if available_states_list and "Error" not in available_states_list[0] else ["Error: States unavailable"])
             initial_value_radio = radio_choices[0] # Set initial value to the prompt
         except Exception as e: # Catch-all for safety
@@ -306,12 +305,12 @@ Answer:"""
         /* Import legible fonts from Google Fonts */
         @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@600;700;800&display=swap');
         
-        /* Root variables for consistent theming - adjusted for an inviting orange palette */
+        /* Root variables for consistent theming - adjusted for a very warm, clean palette */
         :root {
             --primary-color: #FF8C00; /* Darker Orange for buttons/accents */
             --primary-hover: #E07B00; /* Slightly darker orange for hover */
-            --background-primary: hsl(30, 100%, 99%); /* Very bright, almost white, but distinctly warm cream */
-            --background-secondary: hsl(30, 100%, 96%); /* Slightly deeper, yet still very light, warm peach */
+            --background-primary: hsl(30, 100%, 99%); /* Very bright, almost white, distinctly warm cream */
+            --background-secondary: hsl(30, 100%, 96%); /* Slightly deeper, clear, warm peach/cream */
             --text-primary: #4A3C32; /* Dark warm brown/charcoal for main text */
             --text-secondary: #8C7B6F; /* Muted warm gray/brown for secondary text */
             --border-color: hsl(30, 70%, 85%); /* Light, warm orange-brown for borders */
@@ -353,7 +352,7 @@ Answer:"""
             background-color: var(--background-secondary) !important; /* Overall background of the container */
             box-shadow: none !important; /* Remove default gradio container shadow */
         }
-        /* Ensure all main content sections use the gradient background */
+        /* Ensure all main content sections have the gradient background */
         .main-dashboard-container > * {
             background: linear-gradient(145deg, var(--background-primary) 0%, var(--background-secondary) 100%) !important;
         }
@@ -378,8 +377,8 @@ Answer:"""
             left: 0;
             width: 100%;
             height: 100%;
-            background: radial-gradient(circle at top left, rgba(255,140,0,0.2) 0%, transparent 60%), /* More vibrant orange tint */
-                        radial-gradient(circle at bottom right, rgba(255,140,0,0.2) 0%, transparent 60%);
+            background: radial-gradient(circle at top left, rgba(255,140,0,0.25) 0%, transparent 60%), /* More vibrant orange tint */
+                        radial-gradient(circle at bottom right, rgba(255,140,0,0.25) 0%, transparent 60%);
             z-index: 0;
             opacity: 0.8;
             pointer-events: none;
@@ -446,7 +445,7 @@ Answer:"""
             transform: translateY(-3px) !important; /* More pronounced lift */
         }
 
-        /* NEW: Class for Markdown blocks to center their content */
+        /* Class for Markdown blocks to center their content */
         .full-width-center {
             display: flex !important;
             justify-content: center !important;
@@ -456,7 +455,7 @@ Answer:"""
         }
 
         /* Section titles (h3 inside markdown) */
-        .section-title { /* Renamed from sub-section-title for clarity */
+        .section-title {
             font-family: 'Poppins', sans-serif !important;
             font-size: 1.7rem !important; /* Slightly larger */
             font-weight: 700 !important; /* Bolder */
@@ -464,10 +463,10 @@ Answer:"""
             margin: 0 0 1.25rem 0 !important; /* More space below title */
             padding-bottom: 0.75rem !important;
             border-bottom: 2px solid var(--border-color) !important; /* Underline effect */
-            display: block !important; /* Ensure it's a block-level element for proper width/border */
-            text-align: center !important; /* Ensure the text within the h3 is centered */
-            width: fit-content !important; /* Make it shrink-wrap its content */
-            margin-left: auto !important; /* Auto margins to center block-level element */
+            display: block !important; 
+            text-align: center !important; 
+            width: fit-content !important; 
+            margin-left: auto !important; 
             margin-right: auto !important;
             letter-spacing: -0.01em !important;
         }
@@ -510,7 +509,7 @@ Answer:"""
         /* Styling for the radio button group (state selection) */
         .gradio-radio {
             padding: 0 !important; /* Remove any default padding */
-            margin-top: 0.5rem !important; /* Add a little space above */
+            margin-top: 1rem !important; /* More space above radio buttons when below query */
         }
         /* Hide default radio circle/dot */
         .gradio-radio input[type="radio"] {
@@ -585,14 +584,16 @@ Answer:"""
             margin-top: 0.4rem !important; /* More space for info text */
             text-align: left !important; /* Ensure info text is left aligned */
         }
-        /* Input row layout improvements */
-        .input-row {
+        /* Input column layout improvements */
+        .input-column { /* Renamed from .input-row */
             display: flex !important;
-            gap: 1.25rem !important; /* Consistent gap between query and state */
+            flex-direction: column !important; /* Stack items vertically */
+            gap: 1.25rem !important; /* Consistent gap between query and state input */
             margin-bottom: 0.5rem !important;
         }
         .input-field {
-            flex: 1 !important;
+            flex: none !important; /* Remove flex sizing as items are stacked */
+            width: 100% !important; /* Ensure each field takes full width */
         }
 
         /* Button styling improvements with active state for dynamism */
@@ -814,8 +815,8 @@ Answer:"""
             .section-title {
                 font-size: 1.4rem !important;
             }
-            .input-row {
-                flex-direction: column !important; /* Stack inputs vertically */
+            .input-column { /* Apply vertical stacking for columns */
+                flex-direction: column !important; 
             }
             .button-row {
                 flex-direction: column !important; /* Stack buttons vertically */
@@ -883,8 +884,10 @@ Answer:"""
                 with gr.Group(elem_classes="dashboard-card-section"):
                     # Apply 'full-width-center' for section titles
                     gr.Markdown("<h3 class='section-title'>Ask Your Question</h3>", elem_classes="full-width-center")
-                    with gr.Row(elem_classes="input-row"): # Row for side-by-side query and state
-                        with gr.Column(elem_classes="input-field", scale=3): # Query text area takes more space
+                    
+                    # Changed from gr.Row to gr.Column for vertical stacking
+                    with gr.Column(elem_classes="input-column"): # New column to stack inputs
+                        with gr.Column(elem_classes="input-field", scale=None): # Query box takes full width
                             query_input = gr.Textbox(
                                 label="Your Question",
                                 placeholder="E.g., What are the rules for security deposit returns in my state?",
@@ -892,13 +895,14 @@ Answer:"""
                                 max_lines=15, # Increased max height
                                 elem_classes=["input-field-group"]
                             )
-                        with gr.Column(elem_classes="input-field", scale=1): # State radio buttons take less space
+                        with gr.Column(elem_classes="input-field", scale=None): # State radio buttons take full width below
                             state_input = gr.Radio(
                                 label="Select State",
                                 choices=radio_choices,
                                 value=initial_value_radio,
                                 elem_classes=["input-field-group", "gradio-radio-custom"] # Added custom class for specific styling
                             )
+                    
                     with gr.Row(elem_classes="button-row"): # Row for action buttons
                         clear_button = gr.Button("Clear", variant="secondary", elem_classes=["gr-button-secondary"])
                         submit_button = gr.Button("Submit Query", variant="primary", elem_classes=["gr-button-primary"])