UI update

app.py

@@ -249,16 +249,16 @@ 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 is None or state == "Error: Critical failure loading states" or state == "Error: States unavailable": # Added check for error state
+            if not state or state is None or "Error" in state: # Check for error states
                 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>"
 
-            # Call the core processing logic (using self.process_query)
+            # Call the core processing logic using 'self'
             result = self.process_query(query=query, state=state, openai_api_key=api_key)
             answer = result.get("answer", "<div class='error-message'><span class='error-icon'>⚠️</span>An unexpected error occurred.</div>")
 
-            # Check if the answer already contains an error message
+            # Check if the answer already contains an error message from process_query
             if "<div class='error-message'>" in answer:
                 return answer
             else:
@@ -287,10 +287,12 @@ Answer:"""
         example_queries = []
         if radio_choices and "Error" not in radio_choices[0] and len(radio_choices) > 0:
             loaded_states_set = set(radio_choices)
+            # Filter examples to only include states that were successfully loaded
             example_queries = [ex for ex in example_queries_base if ex[1] in loaded_states_set]
-            if not example_queries: # Fallback if no matching examples found
+            if not example_queries and radio_choices[0] != "Error: States unavailable":
+                # Fallback if no matching examples found, use the first available state
                 example_queries.append(["What basic rights do tenants have?", radio_choices[0]])
-        else: # If states failed to load, provide a generic example
+        else: # If states failed to load, provide a generic example (e.g., California)
             example_queries.append(["What basic rights do tenants have?", "California"])
 
 
@@ -298,64 +300,99 @@ 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 light theme, apply to html.dark as well to override */
-        :root, html.dark {{
+        /* Define light theme variables */
+        :root {{
             --primary-color: #FF8C00;
             --primary-hover: #E07B00;
-            --background-primary: hsl(30, 100%, 99.9%);
-            --background-secondary: hsl(30, 100%, 96%);
-            --text-primary: #4A3C32;
-            --text-secondary: #8C7B6F;
-            --border-color: hsl(30, 70%, 85%);
-            --border-focus: #FF8C00;
+            --background-primary: hsl(30, 100%, 99.9%); /* Near white, slightly warm */
+            --background-secondary: hsl(30, 100%, 96%); /* Slightly darker background */
+            --text-primary: #4A3C32; /* Dark brown/off-black for main text */
+            --text-secondary: #8C7B6F; /* Lighter brown/gray for subdued text */
+            --border-color: hsl(30, 70%, 85%); /* Light brown/peach border */
+            --border-focus: #FF8C00; /* Primary color for focus */
             --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
             --shadow-md: 0 4px 10px rgba(0,0,0,0.1);
             --shadow-lg: 0 10px 20px rgba(0,0,0,0.15);
-            --error-bg: #FFF0E0;
-            --error-border: #FFD2B2;
-            --error-text: #E05C00;
+            --error-bg: #FFF0E0; /* Light peach error background */
+            --error-border: #FFD2B2; /* Peach error border */
+            --error-text: #E05C00; /* Orange-red error text */
+        }}
 
-            /* **IMPORTANT**: Override Gradio's internal CSS variables to force light theme values */
+        /* IMPORTANT: Force Gradio's internal variables to use our light theme values for both light and dark modes */
+        /* This is the key to override system theme preference without using theme_mode */
+        /* Targeting :root, html.dark, body.dark, and .dark ensures maximum override */
+        :root, html.dark, body.dark, .dark {{
+            /* General backgrounds */
             --background-fill-primary: var(--background-primary) !important;
             --background-fill-secondary: var(--background-secondary) !important;
             --background-fill-tertiary: var(--background-secondary) !important; /* For less prominent backgrounds */
+            --panel-background: var(--background-primary) !important;
+            --block-background: var(--background-primary) !important;
+            --color-background-primary: var(--background-primary) !important;
+            --color-background-secondary: var(--background-secondary) !important;
+
+            /* Text colors */
+            --text-color-body: var(--text-primary) !important;
             --text-color-subdued: var(--text-secondary) !important;
             --text-color-highlight: var(--primary-color) !important;
-            --text-color-body: var(--text-primary) !important;
             --text-color-placeholder: var(--text-secondary) !important;
+            --text-color-link: var(--primary-color) !important; /* For links */
+            --color-text-primary: var(--text-primary) !important;
+            --color-text-secondary: var(--text-secondary) !important;
+            --color-text-placeholder: var(--text-secondary) !important;
+
+            /* Border colors */
             --border-color-primary: var(--border-color) !important;
             --border-color-accent: var(--border-focus) !important;
-            --shadow-s: var(--shadow-sm) !important;
-            --shadow-m: var(--shadow-md) !important;
-            --shadow-l: var(--shadow-lg) !important;
+            --border-color-secondary: var(--border-color) !important;
+            --border-color-tertiary: var(--border-color) !important;
+            --color-border-primary: var(--border-color) !important;
+            --color-border-secondary: var(--border-color) !important;
+
+            /* Button colors */
             --button-primary-background: var(--primary-color) !important;
             --button-primary-background-hover: var(--primary-hover) !important;
+            --button-primary-text-color: white !important; /* Ensure text is white on primary buttons */
             --button-secondary-background: transparent !important;
             --button-secondary-background-hover: var(--background-secondary) !important;
             --button-secondary-border-color: var(--border-color) !important;
             --button-secondary-border-color-hover: var(--primary-color) !important;
-            --input-background-fill: var(--background-primary) !important;
-            --input-border-color: var(--border-color) !important;
-            --input-border-color-focus: var(--border-focus) !important;
-            --block-background: var(--background-primary) !important;
-            --block-border-color: var(--border-color) !important;
-            --panel-background: var(--background-primary) !important;
-            --color-text-primary: var(--text-primary) !important;
-            --color-text-secondary: var(--text-secondary) !important;
-            --color-border-primary: var(--border-color) !important;
-            --color-border-secondary: var(--border-color) !important;
+            --button-secondary-text-color: var(--text-primary) !important; /* Ensure text color for secondary */
             --color-button-primary-background: var(--primary-color) !important;
             --color-button-primary-background-hover: var(--primary-hover) !important;
             --color-button-secondary-background: transparent !important;
             --color-button-secondary-background-hover: var(--background-secondary) !important;
+            --color-button-primary-text: white !important;
+            --color-button-secondary-text: var(--text-primary) !important;
+
+            /* Input specific */
+            --input-background-fill: var(--background-primary) !important;
+            --input-border-color: var(--border-color) !important;
+            --input-border-color-focus: var(--border-focus) !important;
+            --input-shadow: var(--shadow-sm) !important; /* For textboxes */
+            --input-shadow-focus: 0 0 0 4px rgba(255, 140, 0, 0.2) !important;
+            --input-text-color: var(--text-primary) !important;
+
+            /* Shadows */
+            --shadow-s: var(--shadow-sm) !important;
+            --shadow-m: var(--shadow-md) !important;
+            --shadow-l: var(--shadow-lg) !important;
+
+            /* Misc */
             --color-accent-soft: rgba(255, 140, 0, 0.2) !important; /* Used for focus shadows */
+            --color-error: var(--error-text) !important; /* For error messages */
+            --color-error-background: var(--error-bg) !important;
+            --color-error-border: var(--error-border) !important;
         }}
 
+        /* Base styles for html and body */
         body, html {{
             background-color: var(--background-secondary) !important;
             color: var(--text-primary) !important;
-            transition: none !important; /* Prevent theme change transitions */
+            transition: none !important; /* Prevent any Gradio theme change transitions */
         }}
+
+        /* General Gradio container and element overrides */
         .gradio-container {{
             max-width: 900px !important;
             margin: 0 auto !important;
@@ -368,6 +405,7 @@ Answer:"""
         .main-dashboard-container > * {{
             background-color: var(--background-primary) !important;
             border-color: var(--border-color) !important; /* Ensure card borders are consistent */
+            color: var(--text-primary) !important;
         }}
         .app-header-wrapper {{
             background: linear-gradient(145deg, var(--background-primary) 0%, var(--background-secondary) 100%) !important;
@@ -502,10 +540,18 @@ Answer:"""
             font-weight: 700 !important;
             color: var(--primary-color) !important;
         }}
+        /* More specific overrides for Gradio components */
         .gr-block, .gr-box, .gr-prose, .gr-form, .gr-panel,
-        .gr-columns, .gr-column,
+        .gr-columns, .gr-column {{
+            background-color: var(--background-primary) !important;
+            color: var(--text-primary) !important;
+            border-color: var(--border-color) !important; /* Ensure consistent borders */
+            white-space: normal !important;
+            overflow-wrap: break-word;
+            word-break: break-word;
+        }}
         .gradio-html, .gradio-markdown, .gradio-textbox, .gradio-radio, .gradio-button {{
-            background-color: transparent !important;
+            background-color: transparent !important; /* Let parent background control this */
             color: var(--text-primary) !important;
             white-space: normal !important;
             overflow-wrap: break-word;
@@ -528,7 +574,7 @@ Answer:"""
             padding: 0.85rem 1rem !important;
             font-size: 0.98rem !important;
             font-family: 'Inter', sans-serif !important;
-            color: var(--text-primary) !important;
+            color: var(--text-primary) !important; /* Ensure text color in inputs */
             transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
             box-shadow: var(--shadow-sm) !important;
         }}
@@ -856,9 +902,8 @@ Answer:"""
         }}
         """
 
-        # MODIFIED LINE: Added theme_mode="light"
-        # This will work after upgrading Gradio
-        with gr.Blocks(css=custom_css, title="Landlord-Tenant Rights Assistant", theme_mode="light") as demo:
+        # Removed theme_mode="light" to avoid TypeError
+        with gr.Blocks(css=custom_css, title="Landlord-Tenant Rights Assistant") as demo:
             with gr.Group(elem_classes="app-header-wrapper"):
                 gr.Markdown(
                     """