UI update

app.py

@@ -248,7 +248,7 @@ Answer:"""
             # Basic client-side validation for immediate feedback (redundant but good UX)
             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:
+            if not state or state == "Select a state..." or "Error" in state or state is None: # Added check for None
                 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>"
@@ -270,13 +270,13 @@ Answer:"""
             available_states_list = self.get_states()
             # 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
-            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
+            # For Radio, remove "Select a state..." from choices, initial value will be None
+            radio_choices = available_states_list if available_states_list and "Error" not in available_states_list[0] else ["Error: States unavailable"]
+            initial_value_radio = None # Set initial value to None, forcing user to pick
         except Exception as e: # Catch-all for safety
             print(f"DEBUG: Error loading states for selection: {e}")
             radio_choices = ["Error: Critical failure loading states"]
-            initial_value_radio = radio_choices[0]
+            initial_value_radio = None
 
 
         # Define example queries, filtering based on available states
@@ -309,8 +309,8 @@ Answer:"""
         :root {
             --primary-color: #FF8C00; /* Darker Orange for buttons/accents */
             --primary-hover: #E07B00; /* Slightly darker orange for hover */
-            --background-primary: hsl(30, 100%, 99.5%); /* Very bright, almost white, distinctly warm cream */
-            --background-secondary: hsl(30, 100%, 96%); /* Slightly deeper, yet still very light, warm peach/cream */
+            --background-primary: hsl(30, 100%, 99.8%); /* Almost pure white, with a very subtle warm tint */
+            --background-secondary: hsl(30, 100%, 96%); /* Clear, light, 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 */
@@ -377,15 +377,15 @@ Answer:"""
             left: 0;
             width: 100%;
             height: 100%;
-            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%);
+            background: radial-gradient(circle at top left, rgba(255,140,0,0.3) 0%, transparent 60%), /* More vibrant orange tint */
+                        radial-gradient(circle at bottom right, rgba(255,140,0,0.3) 0%, transparent 60%);
             z-index: 0;
             opacity: 0.8;
             pointer-events: none;
         }
 
         .app-header-logo {
-            font-size: 8rem !important; /* Significantly larger icon */
+            font-size: 8.5rem !important; /* Significantly larger icon */
             margin-bottom: 0.75rem !important;
             display: block !important; 
             color: var(--primary-color) !important; /* Theme color */
@@ -471,17 +471,25 @@ Answer:"""
             letter-spacing: -0.01em !important;
         }
         
-        /* Specific styling for the welcome/disclaimer markdown content */
+        /* Specific styling for all paragraph content within dashboard sections */
         .dashboard-card-section p {
             line-height: 1.7 !important;
             color: var(--text-primary) !important;
             font-size: 1rem !important;
             text-align: left !important; /* Ensure content text is left-aligned */
+            background-color: transparent !important; /* Ensure p tags don't have unexpected backgrounds */
         }
         .dashboard-card-section strong {
             color: var(--primary-color) !important; /* Highlight strong text with primary color */
         }
 
+        /* Overrides for common Gradio internal elements that might have default backgrounds */
+        .gr-box, .gr-prose, .gr-form, .gr-panel, .gr-block {
+            background-color: transparent !important; /* Ensure these are transparent to show parent's gradient */
+            color: var(--text-primary) !important; /* Ensure text color is consistent */
+        }
+
+
         /* Improved input styling with clear boundaries and focus */
         /* Target the main textbox container to remove any default background */
         .gradio-textbox {
@@ -539,7 +547,7 @@ Answer:"""
             cursor: pointer !important;
             transition: all 0.2s ease-out !important;
             box-shadow: var(--shadow-sm) !important;
-            margin: 0.25rem 0 !important; /* Small vertical margin between options */
+            margin: 0.4rem 0 !important; /* Increased vertical margin between options */
             width: 100% !important; /* Ensure options take full width of their column */
             box-sizing: border-box !important; /* Include padding/border in width */
         }
@@ -800,6 +808,7 @@ Answer:"""
             font-size: 0.95rem !important;
             color: var(--text-secondary) !important;
             line-height: 1.6 !important;
+            background-color: transparent !important; /* Ensure paragraph in footer does not get unexpected background */
         }
         .app-footer a {
             color: var(--primary-color) !important;
@@ -864,21 +873,18 @@ Answer:"""
             # Main Dashboard Container - acts as a column to stack various sections
             with gr.Column(elem_classes="main-dashboard-container"):
 
-                # Introduction and Disclaimer Card
+                # How It Works Box (formerly Welcome & Disclaimer)
                 with gr.Group(elem_classes="dashboard-card-section"):
-                    # Apply 'full-width-center' for section titles
-                    gr.Markdown("<h3 class='section-title'>Welcome & Disclaimer</h3>", elem_classes="full-width-center")
+                    gr.Markdown("<h3 class='section-title'>How This Assistant Works</h3>", elem_classes="full-width-center")
                     gr.Markdown(
                         """
-                        Navigate landlord-tenant laws with ease. This assistant provides detailed, state-specific answers grounded in legal authority.
-                        
-                        **Disclaimer:** This tool is for informational purposes only and does not constitute legal advice. For specific legal guidance, always consult a licensed attorney in your jurisdiction.
+                        This AI-powered assistant helps navigate complex landlord-tenant laws. Simply ask a question about your state's regulations, and it will provide detailed, legally-grounded insights.
                         """
+                        # Disclaimer text removed from here.
                     )
 
                 # OpenAI API Key Input Card
                 with gr.Group(elem_classes="dashboard-card-section"):
-                    # Apply 'full-width-center' for section titles
                     gr.Markdown("<h3 class='section-title'>OpenAI API Key</h3>", elem_classes="full-width-center")
                     api_key_input = gr.Textbox(
                         label="API Key",
@@ -891,7 +897,6 @@ Answer:"""
 
                 # Query Input and State Selection Card
                 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")
                     
                     # Changed from gr.Row to gr.Column for vertical stacking
@@ -908,8 +913,9 @@ Answer:"""
                             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
+                                value=initial_value_radio, # Set initial value to None
+                                elem_classes=["input-field-group", "gradio-radio-custom"], # Added custom class for specific styling
+                                interactive=True # Ensure it's interactive
                             )
                     
                     with gr.Row(elem_classes="button-row"): # Row for action buttons
@@ -918,7 +924,6 @@ Answer:"""
 
                 # Output Display Card - Using gr.HTML for better animation control
                 with gr.Group(elem_classes="dashboard-card-section"):
-                    # Apply 'full-width-center' for section titles
                     gr.Markdown("<h3 class='section-title'>Legal Assistant's Response</h3>", elem_classes="full-width-center")
                     output = gr.HTML( # Changed to gr.HTML to wrap content with animation class
                         value="<div class='placeholder'>The answer will appear here after submitting your query.</div>",
@@ -927,7 +932,6 @@ Answer:"""
 
                 # Example Questions Section
                 with gr.Group(elem_classes="dashboard-card-section examples-section"):
-                    # Apply 'full-width-center' for section titles
                     gr.Markdown("<h3 class='section-title'>Example Questions</h3>", elem_classes="full-width-center")
                     if example_queries:
                         gr.Examples(
@@ -939,12 +943,12 @@ Answer:"""
                     else:
                         gr.Markdown("<div class='placeholder'>Sample questions could not be loaded. Please ensure the vector database is populated.</div>")
 
-            # Footer Section - contains disclaimer and developer info
+            # Footer Section - contains disclaimer and developer info (now including the full disclaimer)
             with gr.Group(elem_classes="app-footer-wrapper"):
                 gr.Markdown(
                     """
-                    This tool is for informational purposes only and does not constitute legal advice. For legal guidance, always consult with a licensed attorney in your jurisdiction.
-                    Developed by **Nischal Subedi**. Connect on [LinkedIn](https://www.linkedin.com/in/nischal1/) or explore insights at [Substack](https://datascientistinsights.substack.com/).
+                    **Disclaimer:** This tool is for informational purposes only and does not constitute legal advice. For specific legal guidance, always consult with a licensed attorney in your jurisdiction.
+                    \nDeveloped by **Nischal Subedi**. Connect on [LinkedIn](https://www.linkedin.com/in/nischal1/) or explore insights at [Substack](https://datascientistinsights.substack.com/).
                     """
                 )
 
@@ -960,7 +964,7 @@ Answer:"""
                 fn=lambda: (
                     "", # Clear API key input
                     "", # Clear query input
-                    initial_value_radio, # Reset state radio to default prompt
+                    initial_value_radio, # Reset state radio to default (None)
                     "<div class='placeholder'>Inputs cleared. Ready for your next question.</div>" # Reset output message
                 ),
                 inputs=[],