Another UI change

app.py

@@ -240,13 +240,14 @@ Answer:"""
     # --- GRADIO INTERFACE ---
     def gradio_interface(self):
         def query_interface_wrapper(api_key: str, query: str, state: str) -> str:
-            logging.info(f"Gradio interface received query: '{query[:50]}...', state: '{state}'")
+            # ... (validation logic remains the same)
             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'>Get one here</a>.</div>"
             if not state or state == "Select a state..." or "Error" in state:
                 return "<div class='error-message'><span class='error-icon'>⚠️</span>Please select a valid state from the dropdown.</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>"
+
             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>")
             if not "<div class='error-message'>" in answer:
@@ -259,7 +260,7 @@ Answer:"""
             available_states_list = self.get_states()
             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]
-        except Exception:
+        except Exception: # Catch-all for safety
             dropdown_choices = ["Error: Critical failure loading states"]
             initial_value = dropdown_choices[0]
 
@@ -269,301 +270,148 @@ Answer:"""
             ["My landlord hasn't made necessary repairs. What can I do?", "Texas"],
         ]
         example_queries = []
-        if available_states_list and "Error" not in available_states_list[0] and len(available_states_list) > 0: # Check length too
+        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)
             example_queries = [ex for ex in example_queries_base if ex[1] in loaded_states_set]
-            if not example_queries: # If base examples don't match loaded states, add a generic one
+            if not example_queries and available_states_list[0] != "Error: States unavailable": # Ensure first state is not error
                  example_queries.append(["What basic rights do tenants have?", available_states_list[0]])
-        elif not example_queries: # Fallback if states list is empty or errored
+        elif not example_queries : # Fallback if states list is problematic
             example_queries.append(["What basic rights do tenants have?", "California"])
 
 
-        # --- REFINED "Clarity & Counsel" Theme ---
+        # --- FINAL REFINED "Clarity & Counsel" Theme ---
         custom_css = """
         @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
 
         :root {
             --font-family-main: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-
-            /* Clarity & Counsel - Light Theme */
-            --app-bg-light: #F9FAFB;
-            --surface-bg-light: #FFFFFF;
-            --text-primary-light: #1A202C; /* Tailwind gray-900 - darker for more contrast */
-            --text-secondary-light: #718096; /* Tailwind gray-600 */
-            --accent-primary-light: #00796B; /* Teal 700 */
-            --accent-primary-hover-light: #00695C; /* Teal 800 */
-            --interactive-text-light: #00796B;
-            --interactive-text-hover-light: #005F52; /* Darker hover for links */
-            --border-light: #E2E8F0; /* Tailwind gray-300 */
-            --button-secondary-bg-light: #F1F5F9; /* Tailwind slate-100 */
-            --button-secondary-text-light: #334155; /* Tailwind slate-700 */
-            --button-secondary-hover-bg-light: #E2E8F0; /* Tailwind slate-200 */
-            --shadow-light: 0 4px 12px rgba(0,0,0,0.05); /* Single softer, more diffused shadow */
-            --focus-ring-light: rgba(0, 121, 107, 0.2);
+            /* Light Theme */
+            --app-bg-light: #F9FAFB; --surface-bg-light: #FFFFFF; --text-primary-light: #1A202C;
+            --text-secondary-light: #718096; --accent-primary-light: #00796B; --accent-primary-hover-light: #00695C;
+            --interactive-text-light: #00796B; --interactive-text-hover-light: #005F52; --border-light: #E2E8F0;
+            --button-secondary-bg-light: #F1F5F9; --button-secondary-text-light: #334155; --button-secondary-hover-bg-light: #E2E8F0;
+            --shadow-light: 0 5px 15px rgba(0,0,0,0.05); --focus-ring-light: rgba(0, 121, 107, 0.25);
             --error-bg-light: #FFF1F2; --error-text-light: #C81E1E; --error-border-light: #FFD0D0;
             --success-bg-light: #EFFCF6; --success-text-light: #15803D; --success-border-light: #B3EED1;
-
-            /* Clarity & Counsel - Dark Theme */
-            --app-bg-dark: #0F172A; /* Tailwind slate-900 - deeper dark */
-            --surface-bg-dark: #1E293B; /* Tailwind slate-800 */
-            --text-primary-dark: #F1F5F9; /* Tailwind slate-100 */
-            --text-secondary-dark: #94A3B8; /* Tailwind slate-400 */
-            --accent-primary-dark: #2DD4BF; /* Teal 400 */
-            --accent-primary-hover-dark: #14B8A6; /* Teal 500 */
-            --interactive-text-dark: #5EEAD4; /* Brighter teal for links */
-            --interactive-text-hover-dark: #99F6E4; /* Even brighter */
-            --border-dark: #334155; /* Tailwind slate-700 */
-            --button-secondary-bg-dark: #334155;
-            --button-secondary-text-dark: #CBD5E1; /* Tailwind slate-300 */
-            --button-secondary-hover-bg-dark: #475569; /* Tailwind slate-600 */
-            --shadow-dark: 0 4px 12px rgba(0,0,0,0.2);
-            --focus-ring-dark: rgba(45, 212, 191, 0.25);
+            /* Dark Theme */
+            --app-bg-dark: #0F172A; --surface-bg-dark: #1E293B; --text-primary-dark: #F1F5F9;
+            --text-secondary-dark: #94A3B8; --accent-primary-dark: #2DD4BF; --accent-primary-hover-dark: #14B8A6;
+            --interactive-text-dark: #5EEAD4; --interactive-text-hover-dark: #99F6E4; --border-dark: #334155;
+            --button-secondary-bg-dark: #334155; --button-secondary-text-dark: #CBD5E1; --button-secondary-hover-bg-dark: #475569;
+            --shadow-dark: 0 5px 15px rgba(0,0,0,0.2); --focus-ring-dark: rgba(45, 212, 191, 0.3);
             --error-bg-dark: #451515; --error-text-dark: #FFD0D0; --error-border-dark: #9E2D2D;
             --success-bg-dark: #073D24; --success-text-dark: #B3EED1; --success-border-dark: #16653D;
 
-            --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; /* More pronounced radius */
-            --transition: 0.15s ease-in-out;
+            --radius-md: 8px; --radius-lg: 12px; --transition: 0.2s ease-in-out;
         }
 
-        body, .gradio-container {
-            font-family: var(--font-family-main) !important; background: var(--app-bg-light) !important;
-            color: var(--text-primary-light) !important; margin: 0; padding: 0; min-height: 100vh;
-            font-size: 16px; line-height: 1.7;
-        }
+        body, .gradio-container { font-family: var(--font-family-main) !important; background: var(--app-bg-light) !important; color: var(--text-primary-light) !important; margin: 0; padding: 0; min-height: 100vh; font-size: 16px; line-height: 1.7; }
         * { box-sizing: border-box; }
-        @media (prefers-color-scheme: dark) {
-            body, .gradio-container { background: var(--app-bg-dark) !important; color: var(--text-primary-dark) !important; }
-        }
+        @media (prefers-color-scheme: dark) { body, .gradio-container { background: var(--app-bg-dark) !important; color: var(--text-primary-dark) !important; } }
 
-        .gradio-container > .flex.flex-col {
-            max-width: 800px; margin: 0 auto !important; padding: 3rem 1.5rem !important; gap: 3rem !important; /* Increased gap */
-        }
+        .gradio-container > .flex.flex-col { max-width: 820px; margin: 0 auto !important; padding: 0 1.5rem 3rem 1.5rem !important; gap: 0 !important; /* Remove gap, manage spacing with element margins */ }
 
-        .content-surface {
-            background: var(--surface-bg-light) !important; border-radius: var(--radius-lg) !important;
-            padding: 2.75rem !important; /* More padding */
-            box-shadow: var(--shadow-light) !important; border: 1px solid var(--border-light) !important;
-        }
-        @media (prefers-color-scheme: dark) {
-            .content-surface {
-                background: var(--surface-bg-dark) !important; box-shadow: var(--shadow-dark) !important;
-                border: 1px solid var(--border-dark) !important;
-            }
-        }
+        .content-surface { background: var(--surface-bg-light) !important; border-radius: var(--radius-lg) !important; padding: 3rem !important; box-shadow: var(--shadow-light) !important; border: 1px solid var(--border-light) !important; margin-bottom: 3rem; }
+        .content-surface:last-child { margin-bottom: 0; } /* No bottom margin for the last surface */
+        @media (prefers-color-scheme: dark) { .content-surface { background: var(--surface-bg-dark) !important; box-shadow: var(--shadow-dark) !important; border: 1px solid var(--border-dark) !important; } }
 
-        .app-header {
-            background: var(--accent-primary-light) !important; color: #FFFFFF !important;
-            padding: 3.5rem 2rem !important; /* More padding */
-            text-align: center; margin-bottom: 3rem; /* Increased space */
-            border-bottom-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg);
-            box-shadow: 0 6px 15px rgba(0, 121, 107, 0.15); /* Shadow using accent color */
-            border-bottom: 4px solid var(--accent-primary-hover-light);
-        }
-        .app-header-logo { font-size: 3.25rem; margin-bottom: 0.85rem; display: block; }
-        .app-header-title { font-size: 2.4rem; font-weight: 600; margin: 0 0 0.6rem 0; }
-        .app-header-tagline { font-size: 1.15rem; font-weight: 300; opacity: 0.95; }
+        .app-header-wrapper { background: var(--accent-primary-light) !important; margin-bottom: 3rem; border-bottom-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); box-shadow: var(--shadow-light); }
+        .app-header { color: #FFFFFF !important; padding: 3.5rem 2rem !important; text-align: center !important; display: flex; flex-direction: column; align-items: center; }
+        .app-header-logo { font-size: 3rem; margin-bottom: 0.75rem; display: block; text-align: center !important; }
+        .app-header-title { font-size: 2.25rem; font-weight: 600; margin: 0 0 0.5rem 0; text-align: center !important; }
+        .app-header-tagline { font-size: 1.1rem; font-weight: 300; opacity: 0.95; text-align: center !important; }
         @media (prefers-color-scheme: dark) {
-            .app-header {
-                background: var(--accent-primary-dark) !important; color: var(--app-bg-dark) !important; /* Dark text on bright teal */
-                box-shadow: 0 6px 15px rgba(45, 212, 191, 0.2);
-                border-bottom: 4px solid var(--accent-primary-hover-dark);
-            }
+            .app-header-wrapper { background: var(--accent-primary-dark) !important; box-shadow: var(--shadow-dark); }
+            .app-header { color: var(--app-bg-dark) !important; }
         }
 
-        .section-title, .input-form-card h3, .examples-card .gr-examples-header {
-            font-size: 1.6rem !important; font-weight: 600 !important; color: var(--text-primary-light) !important;
-            margin: 0 auto 2.25rem auto !important; padding-bottom: 1rem !important;
-            border-bottom: 1px solid var(--border-light) !important; text-align: center !important; max-width: 100%;
-        }
-        @media (prefers-color-scheme: dark) {
-            .section-title, .input-form-card h3, .examples-card .gr-examples-header {
-                color: var(--text-primary-dark) !important; border-bottom-color: var(--border-dark) !important;
-            }
-        }
+        .section-title, .input-form-card h3, .examples-card .gr-examples-header { font-size: 1.5rem !important; font-weight: 600 !important; color: var(--text-primary-light) !important; margin: 0 auto 2rem auto !important; padding-bottom: 1rem !important; border-bottom: 1px solid var(--border-light) !important; text-align: center !important; width: 100%; }
+        @media (prefers-color-scheme: dark) { .section-title, .input-form-card h3, .examples-card .gr-examples-header { color: var(--text-primary-dark) !important; border-bottom-color: var(--border-dark) !important; } }
 
-        .content-surface p { font-size: 1.05rem; line-height: 1.75; color: var(--text-secondary-light); margin-bottom: 1.1rem; }
+        .content-surface p { font-size: 1rem; line-height: 1.75; color: var(--text-secondary-light); margin-bottom: 1rem; }
         .content-surface a { color: var(--interactive-text-light); text-decoration: none; font-weight: 500; }
         .content-surface a:hover { color: var(--interactive-text-hover-light); text-decoration: underline; }
         .content-surface strong { font-weight: 600; color: var(--text-primary-light); }
-        @media (prefers-color-scheme: dark) {
-            .content-surface p { color: var(--text-secondary-dark); }
-            .content-surface a { color: var(--interactive-text-dark); }
-            .content-surface a:hover { color: var(--interactive-text-hover-dark); }
-            .content-surface strong { color: var(--text-primary-dark); }
-        }
+        @media (prefers-color-scheme: dark) { .content-surface p { color: var(--text-secondary-dark); } .content-surface a { color: var(--interactive-text-dark); } .content-surface a:hover { color: var(--interactive-text-hover-dark); } .content-surface strong { color: var(--text-primary-dark); } }
 
         .input-field-group { margin-bottom: 2rem; }
-        .input-row { display: flex; gap: 2rem; flex-wrap: wrap; margin-bottom: 2rem; }
-        .input-field { flex: 1; min-width: 240px; }
+        .input-row { display: flex; gap: 1.75rem; flex-wrap: wrap; margin-bottom: 2rem; }
+        .input-field { flex: 1; min-width: 250px; }
 
-        .gradio-input-label {
-            font-size: 0.95rem !important; font-weight: 500 !important; color: var(--text-primary-light) !important;
-            margin-bottom: 0.6rem !important; display: block !important;
-        }
-        .gradio-input-info { font-size: 0.85rem !important; color: var(--text-secondary-light) !important; margin-top: 0.4rem; }
-        @media (prefers-color-scheme: dark) {
-            .gradio-input-label { color: var(--text-primary-dark) !important; }
-            .gradio-input-info { color: var(--text-secondary-dark) !important; }
-        }
+        .gradio-input-label { font-size: 0.9rem !important; font-weight: 500 !important; color: var(--text-primary-light) !important; margin-bottom: 0.5rem !important; display: block !important; }
+        .gradio-input-info { font-size: 0.8rem !important; color: var(--text-secondary-light) !important; margin-top: 0.35rem; }
+        @media (prefers-color-scheme: dark) { .gradio-input-label { color: var(--text-primary-dark) !important; } .gradio-input-info { color: var(--text-secondary-dark) !important; } }
 
-        .gradio-textbox textarea, .gradio-dropdown select, .gradio-textbox input[type=password] {
-            border: 1px solid var(--border-light) !important; border-radius: var(--radius-md) !important;
-            padding: 0.9rem 1.1rem !important; font-size: 1rem !important;
-            background: var(--surface-bg-light) !important; color: var(--text-primary-light) !important;
-            width: 100% !important; box-shadow: none !important;
-        }
-        .gradio-textbox textarea { min-height: 125px; }
-        .gradio-textbox textarea::placeholder, .gradio-textbox input[type=password]::placeholder { color: #A0AEC0 !important; } /* Tailwind gray-400 for placeholder */
-        .gradio-textbox textarea:focus, .gradio-dropdown select:focus, .gradio-textbox input[type=password]:focus {
-            border-color: var(--accent-primary-light) !important;
-            box-shadow: 0 0 0 3px var(--focus-ring-light) !important; outline: none !important;
-        }
-        @media (prefers-color-scheme: dark) {
-            .gradio-textbox textarea, .gradio-dropdown select, .gradio-textbox input[type=password] {
-                border: 1px solid var(--border-dark) !important; background: var(--surface-bg-dark) !important;
-                color: var(--text-primary-dark) !important;
-            }
-            .gradio-textbox textarea::placeholder, .gradio-textbox input[type=password]::placeholder { color: #718096 !important; } /* Tailwind gray-600 dark placeholder */
-            .gradio-textbox textarea:focus, .gradio-dropdown select:focus, .gradio-textbox input[type=password]:focus {
-                border-color: var(--accent-primary-dark) !important; box-shadow: 0 0 0 3px var(--focus-ring-dark) !important;
-            }
-        }
-        .gradio-dropdown select {
-            appearance: none; -webkit-appearance: none; -moz-appearance: none;
-            background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22%236B7280%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M5.293%207.293a1%201%200%20011.414%200L10%2010.586l3.293-3.293a1%201%200%20111.414%201.414l-4%204a1%201%200%2001-1.414%200l-4-4a1%201%200%20010-1.414z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E');
-            background-repeat: no-repeat; background-position: right 1.1rem center; background-size: 1em; padding-right: 3.2rem !important;
-        }
-        @media (prefers-color-scheme: dark) {
-            .gradio-dropdown select {
-                 background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22%239CA3AF%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M5.293%207.293a1%201%200%20011.414%200L10%2010.586l3.293-3.293a1%201%200%20111.414%201.414l-4%204a1%201%200%2001-1.414%200l-4-4a1%201%200%20010-1.414z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E');
-            }
-        }
+        .gradio-textbox textarea, .gradio-dropdown select, .gradio-textbox input[type=password] { border: 1px solid var(--border-light) !important; border-radius: var(--radius-md) !important; padding: 0.9rem 1.05rem !important; font-size: 1rem !important; background: var(--surface-bg-light) !important; color: var(--text-primary-light) !important; width: 100% !important; box-shadow: none !important; transition: border-color var(--transition), box-shadow var(--transition); }
+        .gradio-textbox textarea { min-height: 120px; }
+        .gradio-textbox textarea::placeholder, .gradio-textbox input[type=password]::placeholder { color: #A0AEC0 !important; }
+        .gradio-textbox textarea:focus, .gradio-dropdown select:focus, .gradio-textbox input[type=password]:focus { border-color: var(--accent-primary-light) !important; box-shadow: 0 0 0 3px var(--focus-ring-light) !important; outline: none !important; }
+        @media (prefers-color-scheme: dark) { .gradio-textbox textarea, .gradio-dropdown select, .gradio-textbox input[type=password] { border: 1px solid var(--border-dark) !important; background: var(--surface-bg-dark) !important; color: var(--text-primary-dark) !important; } .gradio-textbox textarea::placeholder, .gradio-textbox input[type=password]::placeholder { color: #718096 !important; } .gradio-textbox textarea:focus, .gradio-dropdown select:focus, .gradio-textbox input[type=password]:focus { border-color: var(--accent-primary-dark) !important; box-shadow: 0 0 0 3px var(--focus-ring-dark) !important; } }
+        .gradio-dropdown select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22%236B7280%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M5.293%207.293a1%201%200%20011.414%200L10%2010.586l3.293-3.293a1%201%200%20111.414%201.414l-4%204a1%201%200%2001-1.414%200l-4-4a1%201%200%20010-1.414z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E'); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1em; padding-right: 3rem !important; }
+        @media (prefers-color-scheme: dark) { .gradio-dropdown select { background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22%239CA3AF%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M5.293%207.293a1%201%200%20011.414%200L10%2010.586l3.293-3.293a1%201%200%20111.414%201.414l-4%204a1%201%200%2001-1.414%200l-4-4a1%201%200%20010-1.414z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E'); } }
 
         .button-row { display: flex; gap: 1.25rem; margin-top: 2.25rem; flex-wrap: wrap; justify-content: flex-end; }
-        .gradio-button {
-            border-radius: var(--radius-md) !important; padding: 0.85rem 2rem !important; /* Generous padding */
-            font-size: 1rem !important; font-weight: 500 !important; border: 1px solid transparent !important;
-            box-shadow: var(--shadow-light) !important;
-        }
-        .gradio-button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 5px 10px rgba(0,0,0,0.07) !important; }
+        .gradio-button { border-radius: var(--radius-md) !important; padding: 0.8rem 1.85rem !important; font-size: 1rem !important; font-weight: 500 !important; border: 1px solid transparent !important; box-shadow: var(--shadow-light) !important; }
+        .gradio-button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0,0,0,0.07) !important; }
         .gradio-button:active:not(:disabled) { transform: translateY(-1px); }
-        .gradio-button:disabled {
-            background: #E5E7EB !important; color: #9CA3AF !important; box-shadow: none !important; border-color: #D1D5DB !important;
-        }
-        .gr-button-primary {
-            background: var(--accent-primary-light) !important; color: #FFFFFF !important; border-color: var(--accent-primary-light) !important;
-        }
+        .gradio-button:disabled { background: #E5E7EB !important; color: #9CA3AF !important; box-shadow: none !important; border-color: #D1D5DB !important; }
+        .gr-button-primary { background: var(--accent-primary-light) !important; color: #FFFFFF !important; border-color: var(--accent-primary-light) !important; }
         .gr-button-primary:hover:not(:disabled) { background: var(--accent-primary-hover-light) !important; border-color: var(--accent-primary-hover-light) !important;}
-        .gr-button-secondary {
-            background: var(--button-secondary-bg-light) !important; color: var(--button-secondary-text-light) !important;
-            border-color: var(--border-light) !important;
-        }
+        .gr-button-secondary { background: var(--button-secondary-bg-light) !important; color: var(--button-secondary-text-light) !important; border-color: var(--border-light) !important; }
         .gr-button-secondary:hover:not(:disabled) { background: var(--button-secondary-hover-bg-light) !important; border-color: #CBD5E0 !important; }
-        @media (prefers-color-scheme: dark) {
-            .gradio-button { box-shadow: var(--shadow-dark) !important; }
-            .gradio-button:hover:not(:disabled) { box-shadow: 0 5px 10px rgba(0,0,0,0.25) !important; }
-            .gradio-button:disabled { background: #334155 !important; color: #6B7280 !important; border-color: #475569 !important;}
-            .gr-button-primary {
-                background: var(--accent-primary-dark) !important; color: var(--app-bg-dark) !important; /* Dark text on bright teal */
-                border-color: var(--accent-primary-dark) !important;
-            }
-            .gr-button-primary:hover:not(:disabled) { background: var(--accent-primary-hover-dark) !important; border-color: var(--accent-primary-hover-dark) !important; }
-            .gr-button-secondary {
-                background: var(--button-secondary-bg-dark) !important; color: var(--button-secondary-text-dark) !important;
-                border-color: var(--border-dark) !important;
-            }
-            .gr-button-secondary:hover:not(:disabled) { background: var(--button-secondary-hover-bg-dark) !important; border-color: #475569 !important; }
-        }
+        @media (prefers-color-scheme: dark) { .gradio-button { box-shadow: var(--shadow-dark) !important; } .gradio-button:hover:not(:disabled) { box-shadow: 0 6px 12px rgba(0,0,0,0.25) !important; } .gradio-button:disabled { background: #334155 !important; color: #6B7280 !important; border-color: #475569 !important;} .gr-button-primary { background: var(--accent-primary-dark) !important; color: var(--app-bg-dark) !important; border-color: var(--accent-primary-dark) !important; } .gr-button-primary:hover:not(:disabled) { background: var(--accent-primary-hover-dark) !important; border-color: var(--accent-primary-hover-dark) !important; } .gr-button-secondary { background: var(--button-secondary-bg-dark) !important; color: var(--button-secondary-text-dark) !important; border-color: var(--border-dark) !important; } .gr-button-secondary:hover:not(:disabled) { background: var(--button-secondary-hover-bg-dark) !important; border-color: #475569 !important; } }
 
-        .output-card .response-header { font-size: 1.35rem; font-weight: 600; color: var(--text-primary-light); margin: 0 0 1rem 0; display: flex; align-items: center; gap: 0.65rem; }
-        .output-card .response-icon { font-size: 1.5rem; color: var(--text-secondary-light); }
+        .output-card .response-header { font-size: 1.3rem; font-weight: 600; color: var(--text-primary-light); margin: 0 0 1rem 0; display: flex; align-items: center; gap: 0.6rem; }
+        .output-card .response-icon { font-size: 1.4rem; color: var(--text-secondary-light); }
         .output-card .divider { border: none; border-top: 1px solid var(--border-light); margin: 1.5rem 0; }
-        .output-card .output-content-wrapper { font-size: 1.05rem; line-height: 1.8; color: var(--text-primary-light); }
-        @media (prefers-color-scheme: dark) {
-            .output-card .response-header { color: var(--text-primary-dark); }
-            .output-card .response-icon { color: var(--text-secondary-dark); }
-            .output-card .divider { border-top: 1px solid var(--border-dark); }
-            .output-card .output-content-wrapper { color: var(--text-primary-dark); }
-        }
-
-        .output-card .error-message, .output-card .success-message {
-            padding: 1.1rem 1.35rem; margin-top: 1.25rem; font-size: 1rem;
-        }
-        .output-card .error-message .error-icon { font-size: 1.25rem; }
-        .output-card .error-details { font-size: 0.9rem; }
-        .output-card .placeholder { padding: 3.5rem 1.75rem; font-size: 1.15rem; }
-
-        .examples-card .gr-examples-table {
-            border-radius: var(--radius-lg) !important; border: 1px solid var(--border-light) !important;
-        }
-        .examples-card .gr-examples-table th, .examples-card .gr-examples-table td {
-            padding: 1rem 1.2rem !important; font-size: 1rem !important;
-        }
-        .examples-card .gr-examples-table th { background: #F9FAFB !important; } /* Slightly off-white header */
-        @media (prefers-color-scheme: dark) {
-            .examples-card .gr-examples-table { border: 1px solid var(--border-dark) !important;}
-            .examples-card .gr-examples-table th { background: #111827 !important; }
-        }
-
-        .app-footer {
-            border-top: 1px solid var(--border-light) !important; padding: 3rem 1.5rem !important;
-            margin-top: 3rem !important; text-align: center !important;
-            font-size: 0.95rem !important; color: var(--text-secondary-light);
-        }
-        .app-footer p { color: var(--text-secondary-light) !important; margin-bottom: 0.6rem; } /* Explicit color for p */
-        .app-footer a { color: var(--interactive-text-light) !important; } /* Explicit color for a */
-        .app-footer a:hover { color: var(--interactive-text-hover-light) !important; }
-        @media (prefers-color-scheme: dark) {
-            .app-footer { border-top: 1px solid var(--border-dark) !important; color: var(--text-secondary-dark); }
-            .app-footer p { color: var(--text-secondary-dark) !important; }
-            .app-footer a { color: var(--interactive-text-dark) !important; }
-            .app-footer a:hover { color: var(--interactive-text-hover-dark) !important; }
-        }
+        .output-card .output-content-wrapper { font-size: 1rem; line-height: 1.75; color: var(--text-primary-light); }
+        .output-card .output-content-wrapper p { margin-bottom: 1rem; } .output-card .output-content-wrapper ul, .output-card .output-content-wrapper ol { margin-left: 1.5rem; margin-bottom: 1rem; padding-left: 1rem; } .output-card .output-content-wrapper li { margin-bottom: 0.5rem; }
+        @media (prefers-color-scheme: dark) { .output-card .response-header { color: var(--text-primary-dark); } .output-card .response-icon { color: var(--text-secondary-dark); } .output-card .divider { border-top: 1px solid var(--border-dark); } .output-card .output-content-wrapper { color: var(--text-primary-dark); } }
+
+        .output-card .error-message, .output-card .success-message { padding: 1rem 1.25rem; margin-top: 1.25rem; font-size: 0.95rem; border-radius: var(--radius-md);}
+        .output-card .error-message .error-icon { font-size: 1.2rem; } .output-card .error-details { font-size: 0.85rem; }
+        .output-card .placeholder { padding: 3rem 1.5rem; font-size: 1.1rem; border-radius: var(--radius-lg); border: 2px dashed var(--border-light); }
+        @media (prefers-color-scheme: dark) { .output-card .placeholder { border-color: var(--border-dark); } }
+
+        .examples-card .gr-examples-table { border-radius: var(--radius-lg) !important; border: 1px solid var(--border-light) !important; }
+        .examples-card .gr-examples-table th, .examples-card .gr-examples-table td { padding: 0.9rem 1.1rem !important; font-size: 0.95rem !important; }
+        .examples-card .gr-examples-table th { background: #F9FAFB !important; }
+        @media (prefers-color-scheme: dark) { .examples-card .gr-examples-table { border: 1px solid var(--border-dark) !important;} .examples-card .gr-examples-table th { background: #0F172A !important; } }
+
+        .app-footer-wrapper { border-top: 1px solid var(--border-light) !important; margin-top: 3rem; }
+        .app-footer { padding: 3rem 1.5rem !important; text-align: center !important; display: flex; flex-direction: column; align-items: center; }
+        .app-footer p { font-size: 0.9rem !important; color: var(--text-secondary-light) !important; margin-bottom: 0.75rem; text-align: center !important; max-width: 600px; /* Constrain footer text width */ }
+        .app-footer a { color: var(--interactive-text-light) !important; font-weight: 500; }
+        .app-footer a:hover { color: var(--interactive-text-hover-light) !important; text-decoration: underline; }
+        @media (prefers-color-scheme: dark) { .app-footer-wrapper { border-top-color: var(--border-dark) !important; } .app-footer p { color: var(--text-secondary-dark) !important; } .app-footer a { color: var(--interactive-text-dark) !important; } .app-footer a:hover { color: var(--interactive-text-hover-dark) !important; } }
 
         :focus-visible { outline: 2px solid var(--accent-primary-light) !important; outline-offset: 2px; box-shadow: 0 0 0 3px var(--focus-ring-light) !important; }
-        @media (prefers-color-scheme: dark) {
-            :focus-visible { outline-color: var(--accent-primary-dark) !important; box-shadow: 0 0 0 3px var(--focus-ring-dark) !important; }
-        }
+        @media (prefers-color-scheme: dark) { :focus-visible { outline-color: var(--accent-primary-dark) !important; box-shadow: 0 0 0 3px var(--focus-ring-dark) !important; } }
         .gradio-button span:focus { outline: none !important; }
 
-        @media (max-width: 768px) {
-            body { font-size: 15px; }
-            .gradio-container > .flex.flex-col { padding: 2rem 1rem !important; gap: 2.5rem !important; }
-            .content-surface { padding: 2.25rem !important; }
-            .app-header { padding: 3rem 1.25rem !important; }
-            .app-header-logo { font-size: 2.8rem; } .app-header-title { font-size: 2rem; } .app-header-tagline { font-size: 1.05rem; }
-            .input-row { flex-direction: column; gap: 1.75rem; } .input-field { min-width: 100%; }
-            .button-row { justify-content: stretch; } .gradio-button { width: 100%; }
-            .section-title, .input-form-card h3, .examples-card .gr-examples-header { font-size: 1.4rem !important; }
-        }
-        @media (max-width: 480px) {
-            .gradio-container > .flex.flex-col { padding: 1.75rem 0.75rem !important; gap: 2rem !important; }
-            .content-surface { padding: 1.75rem !important; border-radius: var(--radius-md) !important; }
-            .app-header { padding: 2.5rem 1rem !important; border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); }
-            .app-header-logo { font-size: 2.4rem; } .app-header-title { font-size: 1.8rem; } .app-header-tagline { font-size: 1rem; }
-            .section-title, .input-form-card h3, .examples-card .gr-examples-header { font-size: 1.3rem !important; margin-bottom: 1.75rem !important; padding-bottom: 0.85rem !important; }
-            .gradio-textbox textarea, .gradio-dropdown select, .gradio-textbox input[type=password] { font-size: 0.95rem !important; padding: 0.85rem 1rem !important; }
-            .gradio-button { padding: 0.85rem 1.5rem !important; font-size: 1rem !important; }
-        }
+        @media (max-width: 768px) { body { font-size: 15px; } .gradio-container > .flex.flex-col { padding: 0 1rem 2.5rem 1rem !important; } .content-surface { padding: 2.25rem !important; margin-bottom: 2.5rem; } .app-header-wrapper { margin-bottom: 2.5rem; } .app-header { padding: 2.75rem 1.25rem !important; } .app-header-logo { font-size: 2.6rem; } .app-header-title { font-size: 2rem; } .app-header-tagline { font-size: 1.05rem; } .input-row { flex-direction: column; gap: 1.5rem; } .input-field { min-width: 100%; } .button-row { justify-content: stretch; } .gradio-button { width: 100%; } .section-title, .input-form-card h3, .examples-card .gr-examples-header { font-size: 1.35rem !important; } .app-footer-wrapper { margin-top: 2.5rem; } .app-footer { padding: 2.5rem 1rem !important; } }
+        @media (max-width: 480px) { .gradio-container > .flex.flex-col { padding: 0 0.75rem 2rem 0.75rem !important; } .content-surface { padding: 1.75rem !important; margin-bottom: 2rem; border-radius: var(--radius-md) !important; } .app-header-wrapper { margin-bottom: 2rem; border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); } .app-header { padding: 2.25rem 1rem !important; } .app-header-logo { font-size: 2.2rem; } .app-header-title { font-size: 1.7rem; } .app-header-tagline { font-size: 0.95rem; } .section-title, .input-form-card h3, .examples-card .gr-examples-header { font-size: 1.25rem !important; margin-bottom: 1.75rem !important; padding-bottom: 0.85rem !important; } .gradio-textbox textarea, .gradio-dropdown select, .gradio-textbox input[type=password] { font-size: 0.95rem !important; padding: 0.85rem 1rem !important; } .gradio-button { padding: 0.85rem 1.5rem !important; font-size: 0.95rem !important; } .examples-card .gr-examples-table th, .examples-card .gr-examples-table td { padding: 0.75rem 0.9rem !important; font-size: 0.9rem !important; } .app-footer-wrapper { margin-top: 2rem; } .app-footer { padding: 2rem 0.75rem !important; } }
 
-        .gradio-container > .flex { gap: 3rem !important; }
+        .gradio-container > .flex { gap: 0 !important; } /* Main gap removed, managed by surface margins */
         .gradio-markdown > *:first-child { margin-top: 0; } .gradio-markdown > *:last-child { margin-bottom: 0; }
         .gradio-dropdown, .gradio-textbox { border: none !important; padding: 0 !important; background: transparent !important; }
         """
 
         with gr.Blocks(theme=None, css=custom_css, title="Landlord-Tenant Rights Assistant") as demo:
-            with gr.Row():
-                with gr.Column(scale=12):
-                    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>
-                        """
-                    )
+            # --- Header Section ---
+            # We'll wrap the Markdown in a gr.Group to apply wrapper styles if needed
+            with gr.Group(elem_classes="app-header-wrapper"):
+                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>
+                    """
+                )
 
+            # --- Main Content Sections ---
             with gr.Group(elem_classes="content-surface"):
                 gr.Markdown("<h3 class='section-title'>Know Your Rights</h3>")
                 gr.Markdown(
@@ -582,12 +430,12 @@ Answer:"""
                         info="Required to process your query. Securely used per request, not stored.", lines=1
                     )
                 with gr.Row(elem_classes="input-row"):
-                    with gr.Column(elem_classes="input-field", min_width="58%"): # Adjusted min-width
+                    with gr.Column(elem_classes="input-field", min_width="58%"):
                         query_input = gr.Textbox(
                             label="Your Question", placeholder="E.g., What are the rules for security deposit returns in my state?",
-                            lines=5, max_lines=10 # Slightly taller
+                            lines=5, max_lines=10
                         )
-                    with gr.Column(elem_classes="input-field", min_width="38%"): # Adjusted min-width
+                    with gr.Column(elem_classes="input-field", min_width="38%"):
                         state_input = gr.Dropdown(
                             label="Select State", choices=dropdown_choices, value=initial_value,
                             allow_custom_value=False
@@ -596,7 +444,7 @@ Answer:"""
                     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"])
 
-            with gr.Group(elem_classes="content-surface output-card"): # Added output-card for specific styling if needed
+            with gr.Group(elem_classes="content-surface output-card"):
                 output = gr.Markdown(
                     value="<div class='placeholder'>Your answer will appear here after submitting your query.</div>",
                     elem_classes="output-content-wrapper"
@@ -612,19 +460,18 @@ Answer:"""
                 with gr.Group(elem_classes="content-surface"):
                     gr.Markdown("<div class='placeholder'>Sample questions could not be loaded.</div>")
 
-            with gr.Row():
-                 with gr.Column(scale=12):
-                   gr.Markdown(
-    """
-    <div class="app-footer">
-        <p>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.</p>
-        <p>Developed by <span style="color:#2AE7D6; font-weight:bold;">Nischal Subedi</span>.
-        Connect on <a href="https://www.linkedin.com/in/nischal1/" target='_blank' style="color:#2AE7D6; text-decoration:underline;">LinkedIn</a>
-        or explore insights at <a href="https://datascientistinsights.substack.com/" target='_blank' style="color:#2AE7D6; text-decoration:underline;">Substack</a>.</p>
-    </div>
-    """
-)
-
+            # --- Footer Section ---
+            with gr.Group(elem_classes="app-footer-wrapper"):
+                gr.Markdown(
+                    """
+                    <div class="app-footer">
+                        <p>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.</p>
+                        <p>Developed by <strong>Nischal Subedi</strong>.
+                        Connect on <a href="https://www.linkedin.com/in/nischal1/" target='_blank'>LinkedIn</a>
+                        or explore insights at <a href="https://datascientistinsights.substack.com/" target='_blank'>Substack</a>.</p>
+                    </div>
+                    """
+                )
 
             submit_button.click(
                 fn=query_interface_wrapper, inputs=[api_key_input, query_input, state_input], outputs=output, api_name="submit_query"
@@ -633,7 +480,7 @@ Answer:"""
                 fn=lambda: ("", "", initial_value, "<div class='placeholder'>Inputs cleared. Ready for your next question.</div>"),
                 inputs=[], outputs=[api_key_input, query_input, state_input, output]
             )
-        logging.info("Refined Clarity & Counsel theme Gradio interface created.")
+        logging.info("Final refined Clarity & Counsel theme Gradio interface created.")
         return demo
 
 # --- Main Execution Block (remains the same) ---