UI update

app.py

@@ -248,14 +248,14 @@ Answer:"""
         def query_interface_wrapper(api_key: str, query: str, state: str) -> str:
             # 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:
-                return "<div class='error-message'><span class='error-icon'>⚠️</span>Please select a valid state from the list.</div>"
+                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": # Added check for error state
+                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>"
+                return "<div class='error-message'><span class='error-icon'></span>Please enter your question in the text box.</div>"
 
             # Call the core processing logic
-            result = self.process_query(query=query, state=state, openai_api_key=api_key)
+            result = self.assistant.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
@@ -266,14 +266,16 @@ Answer:"""
                 return f"<div class='animated-output-content'>{formatted_response_content}</div>"
 
         try:
-            available_states_list = self.get_states()
+            available_states_list = self.assistant.get_states()
             print(f"DEBUG: States loaded for selection: {available_states_list}")
-            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
+            # Ensure radio_choices is not empty if there's an error and handling the error message
+            self.state_choices = available_states_list if available_states_list and "Error" not in available_states_list[0] else ["Error: States unavailable"]
+            # Set initial value only if there are valid choices
+            self.initial_state_value = self.state_choices[0] if self.state_choices and "Error" not in self.state_choices[0] else None
         except Exception as e:
             print(f"DEBUG: Error loading states for selection: {e}")
-            radio_choices = ["Error: Critical failure loading states"]
-            initial_value_radio = None
+            self.state_choices = ["Error: Critical failure loading states"]
+            self.initial_state_value = None
 
         example_queries_base = [
             ["What are the rules for security deposit returns?", "California"],
@@ -283,30 +285,21 @@ Answer:"""
             ["What is an implied warranty of habitability?", "Illinois"]
         ]
         example_queries = []
-        if available_states_list and "Error" not in available_states_list[0] and len(available_states_list) > 0:
-            loaded_states_set = set(available_states_list)
+        if self.state_choices and "Error" not in self.state_choices[0] and len(self.state_choices) > 0:
+            loaded_states_set = set(self.state_choices)
             example_queries = [ex for ex in example_queries_base if ex[1] in loaded_states_set]
-            if not example_queries:
-                example_queries.append(["What basic rights do tenants have?", available_states_list[0] if available_states_list else "California"])
-        else:
+            if not example_queries: # Fallback if no matching examples found
+                example_queries.append(["What basic rights do tenants have?", self.state_choices[0]])
+        else: # If states failed to load, provide a generic example
             example_queries.append(["What basic rights do tenants have?", "California"])
 
-        custom_css = """
-        /* Browser-agnostic reset */
-        *, *::before, *::after {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-            font-family: inherit;
-            font-size: inherit;
-            color: inherit;
-            -webkit-font-smoothing: antialiased;
-            -moz-osx-font-smoothing: grayscale;
-        }
 
-        /* Explicitly set color scheme to light to prevent browser dark mode interference */
-        :root {
-            color-scheme: light;
+        custom_css = f"""
+        /* 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 {{
             --primary-color: #FF8C00;
             --primary-hover: #E07B00;
             --background-primary: hsl(30, 100%, 99.9%);
@@ -321,37 +314,62 @@ Answer:"""
             --error-bg: #FFF0E0;
             --error-border: #FFD2B2;
             --error-text: #E05C00;
-        }
-
-        /* Import legible fonts */
-        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@600;700;800&display=swap');
 
-        /* Ensure body and html have consistent styling */
-        body, html {
+            /* **IMPORTANT**: Override Gradio's internal CSS variables to force light theme values */
+            --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 */
+            --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;
+            --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;
+            --button-primary-background: var(--primary-color) !important;
+            --button-primary-background-hover: var(--primary-hover) !important;
+            --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;
+            --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-accent-soft: rgba(255, 140, 0, 0.2) !important; /* Used for focus shadows */
+        }}
+
+        body, html {{
             background-color: var(--background-secondary) !important;
             color: var(--text-primary) !important;
-            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
-            line-height: 1.5;
-            -webkit-text-size-adjust: 100%;
-            -webkit-tap-highlight-color: transparent;
-        }
-
-        /* Gradio container */
-        .gradio-container {
+            transition: none !important; /* Prevent theme change transitions */
+        }}
+        .gradio-container {{
             max-width: 900px !important;
             margin: 0 auto !important;
             padding: 1.5rem !important;
-            background-color: var(--background-secondary) !important;
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
+            background-color: var(--background-secondary) !important; /* Ensure main container background */
             box-shadow: none !important;
             color: var(--text-primary) !important;
-        }
-
-        .main-dashboard-container > * {
+        }}
+        .main-dashboard-container > * {{
             background-color: var(--background-primary) !important;
-        }
-
-        /* Header styling */
-        .app-header-wrapper {
+            border-color: var(--border-color) !important; /* Ensure card borders are consistent */
+        }}
+        .app-header-wrapper {{
             background: linear-gradient(145deg, var(--background-primary) 0%, var(--background-secondary) 100%) !important;
             border: 2px solid var(--border-color) !important;
             border-radius: 16px !important;
@@ -362,9 +380,8 @@ Answer:"""
             overflow: hidden;
             text-align: center !important;
             color: var(--text-primary) !important;
-        }
-
-        .app-header-wrapper::before {
+        }}
+        .app-header-wrapper::before {{
             content: '';
             position: absolute;
             top: 0;
@@ -375,9 +392,8 @@ Answer:"""
             z-index: 0;
             opacity: 0.8;
             pointer-events: none;
-        }
-
-        .app-header-logo {
+        }}
+        .app-header-logo {{
             font-size: 8.5rem !important;
             margin-bottom: 0.75rem !important;
             display: block !important;
@@ -385,15 +401,13 @@ Answer:"""
             position: relative;
             z-index: 1;
             animation: float-icon 3s ease-in-out infinite alternate;
-        }
-
-        @keyframes float-icon {
-            0% { transform: translateY(0px); }
-            50% { transform: translateY(-5px); }
-            100% { transform: translateY(0px); }
-        }
-
-        .app-header-title {
+        }}
+        @keyframes float-icon {{
+            0% {{ transform: translateY(0px); }}
+            50% {{ transform: translateY(-5px); }}
+            100% {{ transform: translateY(0px); }}
+        }}
+        .app-header-title {{
             font-family: 'Poppins', sans-serif !important;
             font-size: 3rem !important;
             font-weight: 800 !important;
@@ -405,9 +419,8 @@ Answer:"""
             z-index: 1;
             display: inline-block;
             max-width: 100%;
-        }
-
-        .app-header-tagline {
+        }}
+        .app-header-tagline {{
             font-size: 1.25rem !important;
             color: var(--text-secondary) !important;
             font-weight: 400 !important;
@@ -416,40 +429,35 @@ Answer:"""
             display: inline-block;
             position: relative;
             z-index: 1;
-        }
-
-        /* Dashboard layout */
-        .main-dashboard-container {
+        }}
+        .main-dashboard-container {{
             display: flex !important;
             flex-direction: column !important;
             gap: 1.25rem !important;
-        }
-
-        .dashboard-card-section {
+        }}
+        .dashboard-card-section {{
             background-color: var(--background-primary) !important;
             border: 2px solid var(--border-color) !important;
             border-radius: 12px !important;
             padding: 0 !important;
             box-shadow: var(--shadow-sm) !important;
             transition: all 0.3s ease-out !important;
+            cursor: default;
             color: var(--text-primary) !important;
-        }
-
-        .dashboard-card-section:hover {
+        }}
+        .dashboard-card-section:hover {{
             box-shadow: var(--shadow-md) !important;
             transform: translateY(-3px) !important;
-        }
-
-        .full-width-center {
+        }}
+        .full-width-center {{
             display: flex !important;
             justify-content: center !important;
             align-items: center !important;
             width: 100% !important;
             flex-direction: column !important;
             background-color: transparent !important;
-        }
-
-        .section-title-gradient-bar {
+        }}
+        .section-title-gradient-bar {{
             background-color: var(--background-secondary) !important;
             padding: 1.25rem 1.75rem !important;
             border-top-left-radius: 10px !important;
@@ -459,9 +467,8 @@ Answer:"""
             box-sizing: border-box;
             width: 100%;
             color: var(--text-primary) !important;
-        }
-
-        .section-title {
+        }}
+        .section-title {{
             font-family: 'Poppins', sans-serif !important;
             font-size: 1.7rem !important;
             font-weight: 700 !important;
@@ -473,17 +480,15 @@ Answer:"""
             display: inline-block !important;
             text-align: center !important;
             letter-spacing: -0.01em !important;
-        }
-
-        .dashboard-card-content-area {
+        }}
+        .dashboard-card-content-area {{
             padding: 0 1.75rem 1.75rem 1.75rem !important;
             background-color: var(--background-primary) !important;
             box-sizing: border-box;
             width: 100%;
             color: var(--text-primary) !important;
-        }
-
-        .dashboard-card-section p {
+        }}
+        .dashboard-card-section p {{
             line-height: 1.7 !important;
             color: var(--text-primary) !important;
             font-size: 1rem !important;
@@ -492,38 +497,32 @@ Answer:"""
             margin: 0 !important;
             padding: 0 !important;
             white-space: normal !important;
-        }
-
-        .dashboard-card-section strong, .dashboard-card-section b {
+        }}
+        .dashboard-card-section strong, .dashboard-card-section b {{
             font-weight: 700 !important;
             color: var(--primary-color) !important;
-        }
-
-        /* Gradio component overrides */
+        }}
         .gr-block, .gr-box, .gr-prose, .gr-form, .gr-panel,
         .gr-columns, .gr-column,
-        .gradio-html, .gradio-markdown, .gradio-textbox, .gradio-radio, .gradio-button {
+        .gradio-html, .gradio-markdown, .gradio-textbox, .gradio-radio, .gradio-button {{
             background-color: transparent !important;
             color: var(--text-primary) !important;
             white-space: normal !important;
             overflow-wrap: break-word;
             word-break: break-word;
-        }
-
+        }}
         .gradio-textbox textarea,
         .gradio-textbox input,
         .gradio-radio label,
-        .placeholder {
+        .placeholder {{
             background-color: var(--background-primary) !important;
             color: var(--text-primary) !important;
-        }
-
-        .gradio-textbox {
+        }}
+        .gradio-textbox {{
             margin-bottom: 0.5rem !important;
-        }
-
+        }}
         .gradio-textbox textarea,
-        .gradio-textbox input {
+        .gradio-textbox input {{
             border: 2px solid var(--border-color) !important;
             border-radius: 8px !important;
             padding: 0.85rem 1rem !important;
@@ -532,32 +531,24 @@ Answer:"""
             color: var(--text-primary) !important;
             transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
             box-shadow: var(--shadow-sm) !important;
-            -webkit-appearance: none !important;
-            -moz-appearance: none !important;
-            appearance: none !important;
-        }
-
-        .gradio-textbox .scroll-hide {
+        }}
+        .gradio-textbox .scroll-hide {{
             background-color: var(--background-primary) !important;
-        }
-
+        }}
         .gradio-textbox textarea:focus,
-        .gradio-textbox input:focus {
+        .gradio-textbox input:focus {{
             outline: none !important;
             border-color: var(--border-focus) !important;
             box-shadow: 0 0 0 4px rgba(255, 140, 0, 0.2) !important;
-        }
-
-        .gradio-radio {
+        }}
+        .gradio-radio {{
             padding: 0 !important;
             margin-top: 1rem !important;
-        }
-
-        .gradio-radio input[type="radio"] {
+        }}
+        .gradio-radio input[type="radio"] {{
             display: none !important;
-        }
-
-        .gradio-radio label {
+        }}
+        .gradio-radio label {{
             display: flex !important;
             justify-content: center !important;
             align-items: center !important;
@@ -570,77 +561,66 @@ Answer:"""
             transition: all 0.2s ease-out !important;
             box-shadow: var(--shadow-sm) !important;
             margin: 0.2rem 0 !important;
-            width: 100% !important;
+            width: 100 !important;
             box-sizing: border-box !important;
-        }
-
-        .gradio-radio label span.text-lg {
+        }}
+        .gradio-radio label span.text-lg {{
             font-weight: 600 !important;
             color: var(--text-primary) !important;
             font-size: 0.98rem !important;
-        }
-
-        .gradio-radio label:hover {
+        }}
+        .gradio-radio label:hover {{
             background-color: var(--background-secondary) !important;
             border-color: var(--primary-color) !important;
             box-shadow: var(--shadow-md) !important;
             transform: translateY(-2px) !important;
-        }
-
-        .gradio-radio input[type="radio"]:checked + label {
+        }}
+        .gradio-radio input[type="radio"]:checked + label {{
             background-color: var(--primary-color) !important;
-            color: white !important;
+            color: white !important; /* Ensure text is white when selected */
             border-color: var(--primary-hover) !important;
             box-shadow: var(--shadow-md) !important;
             transform: translateY(-1px) !important;
-        }
-
-        .gradio-radio input[type="radio"]:checked + label span.text-lg {
-            color: white !important;
-        }
-
-        .gradio-radio .gr-form {
+        }}
+        .gradio-radio input[type="radio"]:checked + label span.text-lg {{
+            color: white !important; /* Ensure text is white when selected */
+        }}
+        .gradio-radio .gr-form {{
             padding: 0 !important;
-        }
-
+        }}
         .gradio-textbox label,
-        .gradio-radio > label {
+        .gradio-radio > label {{
             font-weight: 600 !important;
             color: var(--text-primary) !important;
             font-size: 1rem !important;
             margin-bottom: 0.6rem !important;
             display: block !important;
             text-align: left !important;
-        }
-
-        .gr-prose {
+        }}
+        .gr-prose {{
             font-size: 0.9rem !important;
             color: var(--text-secondary) !important;
             margin-top: 0.4rem !important;
             text-align: left !important;
             background-color: transparent !important;
-        }
-
-        .input-column {
+        }}
+        .input-column {{
             display: flex !important;
             flex-direction: column !important;
             gap: 1.25rem !important;
             margin-bottom: 0.5rem !important;
-        }
-
-        .input-field {
+        }}
+        .input-field {{
             flex: none !important;
             width: 100% !important;
-        }
-
-        .button-row {
+        }}
+        .button-row {{
             display: flex !important;
             gap: 1rem !important;
             justify-content: flex-end !important;
             margin-top: 1.5rem !important;
-        }
-
-        .gradio-button {
+        }}
+        .gradio-button {{
             padding: 0.85rem 1.8rem !important;
             border-radius: 9px !important;
             font-weight: 600 !important;
@@ -650,46 +630,36 @@ Answer:"""
             border: 2px solid transparent !important;
             text-align: center !important;
             color: var(--text-primary) !important;
-            -webkit-appearance: none !important;
-            -moz-appearance: none !important;
-            appearance: none !important;
-        }
-
-        .gr-button-primary {
+        }}
+        .gr-button-primary {{
             background-color: var(--primary-color) !important;
-            color: white !important;
+            color: white !important; /* Ensure text is white for primary buttons */
             box-shadow: var(--shadow-sm) !important;
-        }
-
-        .gr-button-primary:hover {
+        }}
+        .gr-button-primary:hover {{
             background-color: var(--primary-hover) !important;
             box-shadow: var(--shadow-md) !important;
             transform: translateY(-2px) !important;
-        }
-
-        .gr-button-primary:active {
+        }}
+        .gr-button-primary:active {{
             transform: translateY(1px) !important;
             box-shadow: none !important;
-        }
-
-        .gr-button-secondary {
+        }}
+        .gr-button-secondary {{
             background-color: transparent !important;
             color: var(--text-primary) !important;
             border-color: var(--border-color) !important;
-        }
-
-        .gr-button-secondary:hover {
+        }}
+        .gr-button-secondary:hover {{
             background-color: var(--background-secondary) !important;
             border-color: var(--primary-color) !important;
             transform: translateY(-2px) !important;
-        }
-
-        .gr-button-secondary:active {
+        }}
+        .gr-button-secondary:active {{
             transform: translateY(1px) !important;
             box-shadow: none !important;
-        }
-
-        .output-content-wrapper {
+        }}
+        .output-content-wrapper {{
             background-color: var(--background-primary) !important;
             border: 2px solid var(--border-color) !important;
             border-radius: 8px !important;
@@ -700,9 +670,8 @@ Answer:"""
             flex-direction: column;
             justify-content: center;
             align-items: center;
-        }
-
-        .animated-output-content {
+        }}
+        .animated-output-content {{
             opacity: 0;
             animation: fadeInAndSlideUp 0.7s ease-out forwards;
             width: 100%;
@@ -711,14 +680,12 @@ Answer:"""
             word-break: break-word;
             text-align: left !important;
             color: var(--text-primary) !important;
-        }
-
-        @keyframes fadeInAndSlideUp {
-            from { opacity: 0; transform: translateY(15px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-
-        .response-header {
+        }}
+        @keyframes fadeInAndSlideUp {{
+            from {{ opacity: 0; transform: translateY(15px); }}
+            to {{ opacity: 1; transform: translateY(0); }}
+        }}
+        .response-header {{
             font-size: 1.3rem !important;
             font-weight: 700 !important;
             color: var(--primary-color) !important;
@@ -729,20 +696,17 @@ Answer:"""
             text-align: left !important;
             width: 100%;
             justify-content: flex-start;
-        }
-
-        .response-icon {
+        }}
+        .response-icon {{
             font-size: 1.5rem !important;
             color: var(--primary-color) !important;
-        }
-
-        .divider {
+        }}
+        .divider {{
             border: none !important;
             border-top: 1px dashed var(--border-color) !important;
             margin: 1rem 0 !important;
-        }
-
-        .error-message {
+        }}
+        .error-message {{
             background-color: var(--error-bg) !important;
             border: 2px solid var(--error-border) !important;
             color: var(--error-text) !important;
@@ -757,27 +721,23 @@ Answer:"""
             text-align: left !important;
             width: 100%;
             box-sizing: border-box;
-        }
-
-        .error-message a {
+        }}
+        .error-message a {{
             color: var(--error-text) !important;
             text-decoration: underline !important;
-        }
-
-        .error-icon {
+        }}
+        .error-icon {{
             font-size: 1.4rem !important;
             line-height: 1 !important;
             margin-top: 0.1rem !important;
-        }
-
-        .error-details {
+        }}
+        .error-details {{
             font-size: 0.85rem !important;
             color: var(--error-text) !important;
             margin-top: 0.5rem !important;
             opacity: 0.8;
-        }
-
-        .placeholder {
+        }}
+        .placeholder {{
             background-color: var(--background-primary) !important;
             border: 2px dashed var(--border-color) !important;
             border-radius: 8px !important;
@@ -788,50 +748,43 @@ Answer:"""
             font-size: 1.1rem !important;
             width: 100%;
             box-sizing: border-box;
-        }
-
-        .examples-section .gr-samples-table {
+        }}
+        .examples-section .gr-samples-table {{
             border: 2px solid var(--border-color) !important;
             border-radius: 8px !important;
             overflow: hidden !important;
             margin-top: 1rem !important;
-        }
-
+        }}
         .examples-section .gr-samples-table th,
-        .examples-section .gr-samples-table td {
+        .examples-section .gr-samples-table td {{
             padding: 0.9rem !important;
             border: none !important;
             font-size: 0.95rem !important;
             text-align: left !important;
             color: var(--text-primary) !important;
-        }
-
-        .examples-section .gr-samples-table th {
+        }}
+        .examples-section .gr-samples-table th {{
             background-color: var(--background-secondary) !important;
             font-weight: 700 !important;
             color: var(--text-primary) !important;
-        }
-
-        .examples-section .gr-samples-table td {
+        }}
+        .examples-section .gr-samples-table td {{
             background-color: var(--background-primary) !important;
             color: var(--text-primary) !important;
             border-top: 1px solid var(--border-color) !important;
             cursor: pointer !important;
             transition: background 0.2s ease, transform 0.1s ease !important;
-        }
-
-        .examples-section .gr-samples-table tr:hover td {
+        }}
+        .examples-section .gr-samples-table tr:hover td {{
             background-color: var(--background-secondary) !important;
             transform: translateX(5px);
-        }
-
+        }}
         .gr-examples .gr-label,
         .gr-examples .label-wrap,
-        .gr-examples .gr-accordion-header {
+        .gr-examples .gr-accordion-header {{
             display: none !important;
-        }
-
-        .app-footer-wrapper {
+        }}
+        .app-footer-wrapper {{
             background: linear-gradient(145deg, var(--background-primary) 0%, var(--background-secondary) 100%) !important;
             border: 2px solid var(--border-color) !important;
             border-radius: 12px !important;
@@ -840,9 +793,8 @@ Answer:"""
             margin-bottom: 1.5rem !important;
             text-align: center !important;
             color: var(--text-primary) !important;
-        }
-
-        .app-footer p {
+        }}
+        .app-footer p {{
             margin: 0 !important;
             max-width: 90% !important;
             font-size: 0.95rem !important;
@@ -851,80 +803,60 @@ Answer:"""
             background-color: transparent !important;
             text-align: center !important;
             white-space: normal !important;
-        }
-
-        .app-footer strong, .app-footer b {
+        }}
+        .app-footer strong, .app-footer b {{
             font-weight: 700 !important;
             color: var(--primary-color) !important;
-        }
-
-        .app-footer a {
+        }}
+        .app-footer a {{
             color: var(--primary-color) !important;
             text-decoration: underline !important;
             font-weight: 600 !important;
-        }
-
-        .app-footer a:hover {
+        }}
+        .app-footer a:hover {{
             text-decoration: none !important;
-        }
-
-        /* Responsive design */
-        @media (max-width: 768px) {
-            .gradio-container {
+        }}
+        @media (max-width: 768px) {{
+            .gradio-container {{
                 padding: 1rem !important;
-            }
-            .app-header-title {
+            }}
+            .app-header-title {{
                 font-size: 2.2rem !important;
-            }
-            .app-header-tagline {
+            }}
+            .app-header-tagline {{
                 font-size: 1rem !important;
-            }
-            .section-title {
+            }}
+            .section-title {{
                 font-size: 1.4rem !important;
-            }
-            .input-column {
+            }}
+            .input-column {{
                 flex-direction: column !important;
-            }
-            .button-row {
+            }}
+            .button-row {{
                 flex-direction: column !important;
-            }
-            .gradio-button {
+            }}
+            .gradio-button {{
                 width: 100% !important;
-            }
-            .dashboard-card-section {
-                transform: none !important;
-            }
-            .section-title-gradient-bar {
+            }}
+            .dashboard-card-section {{
+            }}
+            .section-title-gradient-bar {{
                 padding: 0.1rem 1rem !important;
-            }
-            .dashboard-card-content-area {
+            }}
+            .dashboard-card-content-area {{
                 padding: 0 1rem 1rem 1rem !important;
-            }
-            .output-content-wrapper {
+            }}
+            .output-content-wrapper {{
                 min-height: 120px !important;
-            }
-            .placeholder {
+            }}
+            .placeholder {{
                 padding: 1.5rem 1rem !important;
                 font-size: 1rem !important;
-            }
-        }
-
-        /* Ensure no browser-specific dark mode interference */
-        @media (prefers-color-scheme: dark) {
-            :root {
-                color-scheme: light !important;
-            }
-            body, html, .gradio-container, .main-dashboard-container > *,
-            .dashboard-card-section, .section-title-gradient-bar,
-            .dashboard-card-content-area, .gradio-textbox textarea,
-            .gradio-textbox input, .gradio-radio label,
-            .placeholder, .output-content-wrapper {
-                background-color: inherit !important;
-                color: inherit !important;
-            }
-        }
+            }}
+        }}
         """
 
+        # Ensure theme_mode="light" is explicitly set
         with gr.Blocks(css=custom_css, title="Landlord-Tenant Rights Assistant", theme_mode="light") as demo:
             with gr.Group(elem_classes="app-header-wrapper"):
                 gr.Markdown(
@@ -979,8 +911,8 @@ Answer:"""
                             with gr.Column(elem_classes="input-field", scale=1):
                                 state_input = gr.Radio(
                                     label="Select State",
-                                    choices=radio_choices,
-                                    value=initial_value_radio,
+                                    choices=self.state_choices, # Use self.state_choices
+                                    value=self.initial_state_value, # Use self.initial_state_value
                                     elem_classes=["input-field-group", "gradio-radio-custom"],
                                     interactive=True
                                 )
@@ -1033,10 +965,10 @@ Answer:"""
                 outputs=output,
                 api_name="submit_query"
             )
-
+            
             clear_button.click(
                 fn=lambda: (
-                    "", "", initial_value_radio, "<div class='placeholder'>Inputs cleared. Ready for your next question.</div>"
+                    "", "", self.initial_state_value, "<div class='placeholder'>Inputs cleared. Ready for your next question.</div>"
                 ),
                 inputs=[],
                 outputs=[api_key_input, query_input, state_input, output]
@@ -1044,6 +976,7 @@ Answer:"""
 
             return demo
 
+
 # --- Main Execution Block (UNCHANGED from original logic) ---
 if __name__ == "__main__":
     logging.info("Starting Landlord-Tenant Rights Bot application...")