UI v33

app.py

@@ -268,13 +268,17 @@ Answer:"""
 
         try:
             available_states_list = self.get_states()
+            # DEBUG: Print states to console to verify if data is loaded
+            print(f"DEBUG: States loaded for dropdown: {available_states_list}")
             # Ensure "Select a state..." is always the first option
             dropdown_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 = dropdown_choices[0] # Set initial value to the prompt
-        except Exception: # Catch-all for safety
+        except Exception as e: # Catch-all for safety
+            print(f"DEBUG: Error loading states for dropdown: {e}")
             dropdown_choices = ["Error: Critical failure loading states"]
             initial_value = dropdown_choices[0]
 
+
         # Define example queries, filtering based on available states
         example_queries_base = [
             ["What are the rules for security deposit returns?", "California"],
@@ -363,13 +367,8 @@ Answer:"""
             box-shadow: var(--shadow-md) !important;
             position: relative; /* For potential pseudo-element effects */
             overflow: hidden; /* For any overflow animations */
-        }
-        /* The container for the logo, title, and tagline */
-        .app-header {
-            display: flex !important;
-            flex-direction: column !important;
-            align-items: center !important; /* This centers children horizontally */
-            width: 100% !important; /* Ensure it takes full width to center effectively */
+            /* text-align: center applied here for general content within wrapper */
+            text-align: center !important; 
         }
 
         .app-header-wrapper::before { /* Subtle background pattern for dynamism */
@@ -389,7 +388,7 @@ Answer:"""
         .app-header-logo {
             font-size: 4.5rem !important; /* Larger icon */
             margin-bottom: 0.75rem !important;
-            display: block !important;
+            display: block !important; /* Make it a block to center it within text-align */
             color: var(--primary-color) !important; /* Theme color */
             position: relative;
             z-index: 1; /* Bring icon to front of pseudo-element */
@@ -413,7 +412,8 @@ Answer:"""
             letter-spacing: -0.03em !important; /* Tighter spacing */
             position: relative;
             z-index: 1;
-            text-align: center; /* Redundant due to flexbox, but good for fallback */
+            display: inline-block; /* Essential for text-align: center on parent to work for this block */
+            max-width: 100%; /* Prevent overflow on smaller screens */
         }
         .app-header-tagline {
             font-size: 1.25rem !important; /* Slightly larger tagline */
@@ -421,9 +421,9 @@ Answer:"""
             font-weight: 400 !important;
             margin: 0 !important;
             max-width: 700px; /* Constrain tagline width */
+            display: inline-block; /* Essential for text-align: center on parent to work for this block */
             position: relative;
             z-index: 1;
-            text-align: center; /* Redundant due to flexbox, but good for fallback */
         }
 
         /* Main container with consistent spacing */
@@ -447,24 +447,25 @@ Answer:"""
             transform: translateY(-3px) !important; /* More pronounced lift */
         }
 
-        /* Class to center content within Markdown blocks for titles */
-        .centered-markdown-content {
+        /* NEW: Class to center content within Markdown blocks */
+        .text-center-markdown {
             text-align: center !important;
+            width: 100% !important; /* Ensure it takes full width to center its content */
+            display: block !important; /* Make sure it's a block level container */
         }
 
-        /* Centered section titles with improved typography */
+        /* Section titles (h3 inside markdown) */
         .sub-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;
-            /* Removed text-align here, handled by parent .centered-markdown-content */
             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 border-bottom to span */
-            width: 100% !important; /* Ensure it takes full width of its parent */
+            display: inline-block !important; /* Allow it to shrink-wrap its content for proper border-bottom width */
             letter-spacing: -0.01em !important;
+            /* To center this inline-block, its parent (.text-center-markdown) must have text-align: center */
         }
         
         /* Specific styling for the welcome/disclaimer markdown content */
@@ -482,11 +483,13 @@ Answer:"""
         .gradio-textbox, .gradio-dropdown {
             margin-bottom: 0.75rem !important;
         }
+        /* Directly targeting internal Gradio input elements for specific background/border */
         .gradio-textbox textarea,
         .gradio-textbox input,
-        .gradio-dropdown > div > input[type="text"], /* Target dropdown input for custom values */
-        .gradio-dropdown .primary-wrap, /* Target dropdown wrapper */
-        .gradio-dropdown .scroll-hide /* Target dropdown list container for consistency */
+        /* Specific targeting for dropdown elements */
+        .gradio-dropdown > div.primary-wrap > div > input, /* The input field within the dropdown */
+        .gradio-dropdown > div.primary-wrap, /* The main clickable wrapper of the dropdown */
+        .gradio-dropdown > div.scroll-hide /* The actual dropdown options list container */
         {
             background-color: var(--background-primary) !important; /* Explicitly set background to primary cream */
             border: 2px solid var(--border-color) !important; /* Clear border */
@@ -498,14 +501,27 @@ Answer:"""
             transition: border-color 0.2s ease, box-shadow 0.2s ease !important; /* Smooth transitions */
             box-shadow: var(--shadow-sm) !important;
         }
+        /* Focus styles */
         .gradio-textbox textarea:focus,
         .gradio-textbox input:focus,
-        .gradio-dropdown > div > input[type="text"]:focus,
-        .gradio-dropdown .primary-wrap.focused { /* Apply focus style to dropdown wrap */
+        .gradio-dropdown > div.primary-wrap > div > input:focus, /* Focus for dropdown input */
+        .gradio-dropdown > div.primary-wrap.focused { /* Focus for dropdown wrapper */
             outline: none !important;
             border-color: var(--border-focus) !important; /* Distinct border on focus */
             box-shadow: 0 0 0 4px rgba(255, 140, 0, 0.2) !important; /* Broader, softer glow on focus */
         }
+        /* Ensure dropdown arrow is styled correctly */
+        .gradio-dropdown .primary-wrap .text-lg { /* Targeting the arrow icon itself */
+            color: var(--text-secondary) !important; /* Use a neutral color for the arrow */
+        }
+        /* Handle active/selected state for dropdown options */
+        .gradio-dropdown .secondary-wrap > div:hover,
+        .gradio-dropdown .secondary-wrap > div.focused,
+        .gradio-dropdown .secondary-wrap > div[aria-selected="true"] {
+            background-color: var(--background-secondary) !important; /* Highlight on hover/focus/selection */
+            color: var(--primary-color) !important; /* Primary color for selected text */
+        }
+
 
         /* Label styling for better readability */
         .gradio-textbox label,
@@ -516,12 +532,12 @@ Answer:"""
             margin-bottom: 0.6rem !important;
             display: block !important;
         }
-        /* Info text styling below inputs */
-        .gradio-textbox .gr-form,
-        .gradio-dropdown .gr-form {
+        /* Info text styling below inputs (typically .gr-prose or .gr-form in Gradio) */
+        .gr-prose { 
             font-size: 0.9rem !important;
             color: var(--text-secondary) !important;
             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 {
@@ -557,7 +573,7 @@ Answer:"""
         }
         .gr-button-primary:hover {
             background-color: var(--primary-hover) !important; /* Explicitly set background */
-            box_shadow: var(--shadow-md) !important;
+            box-shadow: var(--shadow-md) !important;
             transform: translateY(-2px) !important; /* Subtle lift effect on hover */
         }
         .gr-button-primary:active { /* Press down effect on click */
@@ -778,24 +794,19 @@ 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"):
-                # Markdown used for flexible styling and robust centering via flexbox
-                gr.Markdown(
-                    """
-                    <div class="app-header">
-                        <span class="app-header-logo">⚖️</span>
-                        <h1 class="app-header-title">Landlord-Tenant Rights Assistant</h1>
-                        <p class="app-header-tagline">Empowering You with State-Specific Legal Insights</p>
-                    </div>
-                    """
-                )
+                # Using separate Markdown components for each part of the header
+                # with the new 'text-center-markdown' class for robust centering.
+                gr.Markdown("<span class='app-header-logo'>⚖️</span>", elem_classes="text-center-markdown")
+                gr.Markdown("<h1 class='app-header-title'>Landlord-Tenant Rights Assistant</h1>", elem_classes="text-center-markdown")
+                gr.Markdown("<p class='app-header-tagline'>Empowering You with State-Specific Legal Insights</p>", elem_classes="text-center-markdown")
 
             # Main Dashboard Container - acts as a column to stack various sections
             with gr.Column(elem_classes="main-dashboard-container"):
 
                 # Introduction and Disclaimer Card
                 with gr.Group(elem_classes="dashboard-card-section"):
-                    # Added elem_classes="centered-markdown-content" for robust centering
-                    gr.Markdown("<h3 class='sub-section-title'>Welcome & Disclaimer</h3>", elem_classes="centered-markdown-content")
+                    # Apply 'text-center-markdown' for section titles
+                    gr.Markdown("<h3 class='sub-section-title'>Welcome & Disclaimer</h3>", elem_classes="text-center-markdown")
                     gr.Markdown(
                         """
                         Navigate landlord-tenant laws with ease. This assistant provides detailed, state-specific answers grounded in legal authority.
@@ -806,8 +817,8 @@ Answer:"""
 
                 # OpenAI API Key Input Card
                 with gr.Group(elem_classes="dashboard-card-section"):
-                    # Added elem_classes="centered-markdown-content" for robust centering
-                    gr.Markdown("<h3 class='sub-section-title'>OpenAI API Key</h3>", elem_classes="centered-markdown-content")
+                    # Apply 'text-center-markdown' for section titles
+                    gr.Markdown("<h3 class='sub-section-title'>OpenAI API Key</h3>", elem_classes="text-center-markdown")
                     api_key_input = gr.Textbox(
                         label="API Key",
                         type="password", # Hides the input for security
@@ -819,8 +830,8 @@ Answer:"""
 
                 # Query Input and State Selection Card
                 with gr.Group(elem_classes="dashboard-card-section"):
-                    # Added elem_classes="centered-markdown-content" for robust centering
-                    gr.Markdown("<h3 class='sub-section-title'>Ask Your Question</h3>", elem_classes="centered-markdown-content")
+                    # Apply 'text-center-markdown' for section titles
+                    gr.Markdown("<h3 class='sub-section-title'>Ask Your Question</h3>", elem_classes="text-center-markdown")
                     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
                             query_input = gr.Textbox(
@@ -836,7 +847,7 @@ Answer:"""
                                 choices=dropdown_choices,
                                 value=initial_value,
                                 allow_custom_value=False,
-                                elem_classes=["input-field-group"]
+                                elem_classes=["input-field-group"] 
                             )
                     with gr.Row(elem_classes="button-row"): # Row for action buttons
                         clear_button = gr.Button("Clear", variant="secondary", elem_classes=["gr-button-secondary"])
@@ -844,8 +855,8 @@ Answer:"""
 
                 # Output Display Card - Using gr.HTML for better animation control
                 with gr.Group(elem_classes="dashboard-card-section"):
-                    # Added elem_classes="centered-markdown-content" for robust centering
-                    gr.Markdown("<h3 class='sub-section-title'>Legal Assistant's Response</h3>", elem_classes="centered-markdown-content")
+                    # Apply 'text-center-markdown' for section titles
+                    gr.Markdown("<h3 class='sub-section-title'>Legal Assistant's Response</h3>", elem_classes="text-center-markdown")
                     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
@@ -853,8 +864,8 @@ Answer:"""
 
                 # Example Questions Section
                 with gr.Group(elem_classes="dashboard-card-section examples-section"):
-                    # Added elem_classes="centered-markdown-content" for robust centering
-                    gr.Markdown("<h3 class='sub-section-title'>Example Questions</h3>", elem_classes="centered-markdown-content")
+                    # Apply 'text-center-markdown' for section titles
+                    gr.Markdown("<h3 class='sub-section-title'>Example Questions</h3>", elem_classes="text-center-markdown")
                     if example_queries:
                         gr.Examples(
                             examples=example_queries,