UI update

app.py

@@ -93,7 +93,7 @@ Answer:"""
     def process_query_cached(self, query: str, state: str, openai_api_key: str, n_results: int = 5) -> Dict[str, any]:
         logging.info(f"Processing query (cache key: '{query}'|'{state}'|key_hidden) with n_results={n_results}")
 
-        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
             logging.warning("No valid state provided for query.")
             return {"answer": "<div class='error-message'>Error: Please select a valid state.</div>", "context_used": "N/A - Invalid Input"}
         if not query or not query.strip():
@@ -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 or state is None: # Added check for None
+            if not state or state is None: # Removed "Select a state..." from error check as it's not a choice
                 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>"
@@ -352,9 +352,9 @@ 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 have the gradient background */
+        /* All main content sections (cards) will have the primary background, not a gradient */
         .main-dashboard-container > * {
-            background: linear-gradient(145deg, var(--background-primary) 0%, var(--background-secondary) 100%) !important;
+            background-color: var(--background-primary) !important;
         }
 
         /* Header styling - centered and prominent */
@@ -432,10 +432,10 @@ Answer:"""
         }
         /* Card sections with clear boundaries and subtle dynamic effects */
         .dashboard-card-section {
-            /* Background already set by .main-dashboard-container > * */
+            /* Background already set by .main-dashboard-container > * to primary white */
             border: 2px solid var(--border-color) !important; /* Distinct border */
             border-radius: 12px !important;
-            padding: 1.75rem !important; /* Consistent padding */
+            padding: 0 !important; /* Removed padding to allow gradient bar to control it */
             box-shadow: var(--shadow-sm) !important; /* Subtle shadow */
             transition: all 0.3s ease-out !important; /* Smoother transition */
             cursor: default; /* Indicate not directly clickable (unless examples) */
@@ -454,24 +454,36 @@ Answer:"""
             flex-direction: column !important; /* Ensure content stacks vertically if needed */
         }
 
+        /* NEW: Class for the gradient title bar within each card */
+        .section-title-gradient-bar {
+            background: linear-gradient(145deg, var(--background-primary) 0%, var(--background-secondary) 100%) !important;
+            padding: 1.25rem 1.75rem !important; /* Inner padding for the title bar */
+            border-top-left-radius: 10px !important; /* Match parent's border radius */
+            border-top-right-radius: 10px !important;
+            margin-bottom: 1.5rem !important; /* Space below the title bar */
+            text-align: center !important; /* Ensure content inside this bar is centered */
+            box-sizing: border-box; /* Include padding in width */
+            width: 100%; /* Ensure it spans full width */
+        }
+
         /* Section titles (h3 inside markdown) */
         .section-title {
             font-family: 'Poppins', sans-serif !important;
             font-size: 1.7rem !important; /* Slightly larger */
             font-weight: 700 !important; /* Bolder */
             color: var(--text-primary) !important;
-            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; 
-            text-align: center !important; 
-            width: fit-content !important; 
-            margin-left: auto !important; 
-            margin-right: auto !important;
+            margin: 0 !important; /* No margin on h3 itself as parent handles spacing */
+            line-height: 1.1 !important;
             letter-spacing: -0.01em !important;
+            display: inline-block !important; /* Allow centering within text-align: center of parent */
+            text-align: center !important; /* Fallback centering */
         }
         
-        /* Specific styling for all paragraph content within dashboard sections */
+        /* General content area padding within dashboard sections (below the title bar) */
+        .dashboard-card-content-area {
+            padding: 0 1.75rem 1.75rem 1.75rem !important; /* Match overall padding, 0 top because title bar handles it */
+            background-color: var(--background-primary) !important; /* Pure white background */
+        }
         .dashboard-card-section p {
             line-height: 1.7 !important;
             color: var(--text-primary) !important;
@@ -484,14 +496,13 @@ Answer:"""
         }
 
         /* 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 */
+        .gr-block, .gr-box, .gr-prose, .gr-form, .gr-panel, .gr-columns, .gr-column {
+            background-color: transparent !important; /* Ensure these are transparent to show parent's color */
             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 {
             background-color: transparent !important; /* Ensure parent container is transparent */
             margin-bottom: 0.75rem !important;
@@ -522,7 +533,6 @@ Answer:"""
         }
 
         /* Styling for the radio button group (state selection) */
-        /* Target the main radio container to remove any default background */
         .gradio-radio {
             background-color: transparent !important; /* Ensure parent container is transparent */
             padding: 0 !important; /* Remove any default padding */
@@ -804,11 +814,14 @@ Answer:"""
             text-align: center !important; /* Centered footer text */
         }
         .app-footer p {
-            margin: 0.6rem 0 !important;
+            margin: 0.6rem auto !important; /* Auto margins to center block */
+            max-width: 90% !important; /* Constrain width for wrapping */
             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 */
+            text-align: center !important; /* Ensure footer text is centered */
+            white-space: normal !important; /* Allow text to wrap */
         }
         .app-footer a {
             color: var(--primary-color) !important;
@@ -843,7 +856,13 @@ Answer:"""
                 width: 100% !important; /* Full width buttons */
             }
             .dashboard-card-section {
-                padding: 1.25rem !important;
+                /* padding handled by section-title-gradient-bar and dashboard-card-content-area */
+            }
+            .section-title-gradient-bar {
+                padding: 0.8rem 1rem !important;
+            }
+            .dashboard-card-content-area {
+                padding: 0 1rem 1rem 1rem !important;
             }
             .output-content-wrapper {
                 min-height: 120px !important;
@@ -859,8 +878,6 @@ Answer:"""
         with gr.Blocks(css=custom_css, title="Landlord-Tenant Rights Assistant") as demo:
             # Header Section - uses gr.Group for distinct card-like styling
             with gr.Group(elem_classes="app-header-wrapper"):
-                # Using a single Markdown component for header for easier robust centering
-                # The 'full-width-center' class applies flexbox centering to the Markdown content
                 gr.Markdown(
                     """
                     <span class='app-header-logo'>⚖️</span>
@@ -873,75 +890,87 @@ Answer:"""
             # Main Dashboard Container - acts as a column to stack various sections
             with gr.Column(elem_classes="main-dashboard-container"):
 
-                # How It Works Box (formerly Welcome & Disclaimer)
+                # How This Assistant Works Box (formerly Welcome & Disclaimer)
                 with gr.Group(elem_classes="dashboard-card-section"):
-                    gr.Markdown("<h3 class='section-title'>How This Assistant Works</h3>", elem_classes="full-width-center")
-                    gr.Markdown(
-                        """
-                        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.
-                    )
+                    # Title bar with gradient
+                    gr.Markdown("<h3 class='section-title'>How This Assistant Works</h3>", elem_classes="full-width-center section-title-gradient-bar")
+                    # Content area with pure primary background
+                    with gr.Column(elem_classes="dashboard-card-content-area"): # New wrapper for content area
+                        gr.Markdown(
+                            """
+                            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.
+                            """
+                        )
 
                 # OpenAI API Key Input Card
                 with gr.Group(elem_classes="dashboard-card-section"):
-                    gr.Markdown("<h3 class='section-title'>OpenAI API Key</h3>", elem_classes="full-width-center")
-                    api_key_input = gr.Textbox(
-                        label="API Key",
-                        type="password", # Hides the input for security
-                        placeholder="Enter your OpenAI API key (e.g., sk-...)",
-                        info="Required to process your query. Get one from OpenAI: platform.openai.com/api-keys",
-                        lines=1,
-                        elem_classes=["input-field-group"] # Custom class for input styling
-                    )
+                    # Title bar with gradient
+                    gr.Markdown("<h3 class='section-title'>OpenAI API Key</h3>", elem_classes="full-width-center section-title-gradient-bar")
+                    # Content area with pure primary background
+                    with gr.Column(elem_classes="dashboard-card-content-area"): # New wrapper for content area
+                        api_key_input = gr.Textbox(
+                            label="API Key",
+                            type="password", # Hides the input for security
+                            placeholder="Enter your OpenAI API key (e.g., sk-...)",
+                            info="Required to process your query. Get one from OpenAI: [platform.openai.com/api-keys](https://platform.openai.com/api-keys)", # Made link clickable
+                            lines=1,
+                            elem_classes=["input-field-group"] # Custom class for input styling
+                        )
 
                 # Query Input and State Selection Card
                 with gr.Group(elem_classes="dashboard-card-section"):
-                    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
-                    with gr.Column(elem_classes="input-column"): # New column to stack inputs
-                        with gr.Column(elem_classes="input-field", scale=1): # Query box takes full width, scale=1 for numerical value
-                            query_input = gr.Textbox(
-                                label="Your Question",
-                                placeholder="E.g., What are the rules for security deposit returns in my state?",
-                                lines=8, # Increased default height
-                                max_lines=15, # Increased max height
-                                elem_classes=["input-field-group"]
-                            )
-                        with gr.Column(elem_classes="input-field", scale=1): # State radio buttons take full width below, scale=1 for numerical value
-                            state_input = gr.Radio(
-                                label="Select State",
-                                choices=radio_choices,
-                                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
-                        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"])
+                    # Title bar with gradient
+                    gr.Markdown("<h3 class='section-title'>Ask Your Question</h3>", elem_classes="full-width-center section-title-gradient-bar")
+                    # Content area with pure primary background
+                    with gr.Column(elem_classes="dashboard-card-content-area"): # New wrapper for content area
+                        with gr.Column(elem_classes="input-column"): # Column to stack inputs
+                            with gr.Column(elem_classes="input-field", scale=1): # 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?",
+                                    lines=8, # Increased default height
+                                    max_lines=15, # Increased max height
+                                    elem_classes=["input-field-group"]
+                                )
+                            with gr.Column(elem_classes="input-field", scale=1): # State radio buttons take full width below
+                                state_input = gr.Radio(
+                                    label="Select State",
+                                    choices=radio_choices,
+                                    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
+                            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"])
 
                 # Output Display Card - Using gr.HTML for better animation control
                 with gr.Group(elem_classes="dashboard-card-section"):
-                    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>",
-                        elem_classes="output-content-wrapper" # Custom class for output styling
-                    )
+                    # Title bar with gradient
+                    gr.Markdown("<h3 class='section-title'>Legal Assistant's Response</h3>", elem_classes="full-width-center section-title-gradient-bar")
+                    # Content area with pure primary background
+                    with gr.Column(elem_classes="dashboard-card-content-area"): # New wrapper for content area
+                        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>",
+                            elem_classes="output-content-wrapper" # Custom class for output styling
+                        )
 
                 # Example Questions Section
                 with gr.Group(elem_classes="dashboard-card-section examples-section"):
-                    gr.Markdown("<h3 class='section-title'>Example Questions</h3>", elem_classes="full-width-center")
-                    if example_queries:
-                        gr.Examples(
-                            examples=example_queries,
-                            inputs=[query_input, state_input],
-                            examples_per_page=5,
-                            label="" # Hide default Gradio label for examples to use our custom title
-                        )
-                    else:
-                        gr.Markdown("<div class='placeholder'>Sample questions could not be loaded. Please ensure the vector database is populated.</div>")
+                    # Title bar with gradient
+                    gr.Markdown("<h3 class='section-title'>Example Questions</h3>", elem_classes="full-width-center section-title-gradient-bar")
+                    # Content area with pure primary background
+                    with gr.Column(elem_classes="dashboard-card-content-area"): # New wrapper for content area
+                        if example_queries:
+                            gr.Examples(
+                                examples=example_queries,
+                                inputs=[query_input, state_input],
+                                examples_per_page=5,
+                                label="" # Hide default Gradio label for examples to use our custom title
+                            )
+                        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 (now including the full disclaimer)
             with gr.Group(elem_classes="app-footer-wrapper"):