UI update

app.py

@@ -248,11 +248,11 @@ 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 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>"
+                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 yours here</a>.</div>"
+            if not state or state is None or "Error" in 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 using 'self'
             result = self.process_query(query=query, state=state, openai_api_key=api_key)
@@ -262,15 +262,13 @@ Answer:"""
             if "<div class='error-message'>" in answer:
                 return answer
             else:
-                formatted_response_content = f"<div class='response-header'><span class='response-icon'>📜</span>Response for {state}</div><hr class='divider'>{answer}"
+                formatted_response_content = f"<div class='response-header'><span class='response-icon'>📜</span>Response for {state}</div><div class='response-divider'></div><div class='response-content'>{answer}</div>"
                 return f"<div class='animated-output-content'>{formatted_response_content}</div>"
 
         try:
-            available_states_list = self.get_states() # Call self.get_states() directly
+            available_states_list = self.get_states()
             print(f"DEBUG: States loaded for selection: {available_states_list}")
-            # Ensure radio_choices is not empty if there's an error and handling the error message
             radio_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
             initial_value_radio = radio_choices[0] if radio_choices and "Error" not in radio_choices[0] else None
         except Exception as e:
             print(f"DEBUG: Error loading states for selection: {e}")
@@ -284,465 +282,637 @@ Answer:"""
             ["How much notice must a landlord give to raise rent?", "Florida"],
             ["What is an implied warranty of habitability?", "Illinois"]
         ]
+        
         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 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 (e.g., California)
+        else:
             example_queries.append(["What basic rights do tenants have?", "California"])
 
-        custom_css = f"""
-        /* Import legible fonts from Google Fonts */
+        custom_css = """
+        /* Import modern fonts */
         @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@600;700;800&display=swap');
 
-        /* Force light theme globally */
-        :root, html, body, .gradio-app, .dark, html.dark, body.dark {{
-            color-scheme: light only !important; /* Prevent dark mode */
-            background-color: var(--custom-background-secondary) !important;
-            color: var(--custom-text-primary) !important;
-            transition: none !important; /* Prevent theme transition flickering */
-        }}
-
-        /* Define custom light theme variables */
-        :root {{
-            --custom-primary-color: #FF8C00;
-            --custom-primary-hover: #E07B00;
-            --custom-background-primary: hsl(30, 100%, 99.9%); /* Near white, slightly warm */
-            --custom-background-secondary: hsl(30, 100%, 96%); /* Slightly darker background */
-            --custom-text-primary: #4A3C32; /* Dark brown/off-black for main text */
-            --custom-text-secondary: #8C7B6F; /* Lighter brown/gray for subdued text */
-            --custom-border-color: hsl(30, 70%, 85%); /* Light brown/peach border */
-            --custom-border-focus: #FF8C00; /* Primary color for focus */
-            --custom-shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
-            --custom-shadow-md: 0 4px 10px rgba(0,0,0,0.1);
-            --custom-shadow-lg: 0 10px 20px rgba(0,0,0,0.15);
-            --custom-error-bg: #FFF0E0; /* Light peach error background */
-            --custom-error-border: #FFD2B2; /* Peach error border */
-            --custom-error-text: #E05C00; /* Orange-red error text */
-        }}
-
-        /* Override dark mode for all Gradio components */
-        :root, html.dark, body.dark, .dark, .gradio-container, .gradio-app {{
-            /* General backgrounds */
-            --background-fill-primary: var(--custom-background-primary) !important;
-            --background-fill-secondary: var(--custom-background-secondary) !important;
-            --background-fill-tertiary: var(--custom-background-secondary) !important;
-            --panel-background: var(--custom-background-primary) !important;
-            --block-background: var(--custom-background-primary) !important;
-            --color-background-primary: var(--custom-background-primary) !important;
-            --color-background-secondary: var(--custom-background-secondary) !important;
-
+        /* CSS Variables for theme consistency */
+        :root {
+            /* Light theme colors */
+            --primary-color: #FF8C00;
+            --primary-hover: #E07B00;
+            --primary-light: rgba(255, 140, 0, 0.1);
+            --primary-border: rgba(255, 140, 0, 0.3);
+            
+            /* Backgrounds */
+            --bg-primary: #ffffff;
+            --bg-secondary: #f8f9fa;
+            --bg-tertiary: #f1f3f4;
+            --bg-card: #ffffff;
+            
             /* Text colors */
-            --text-color-body: var(--custom-text-primary) !important;
-            --text-color-subdued: var(--custom-text-secondary) !important;
-            --text-color-highlight: var(--custom-primary-color) !important;
-            --text-color-placeholder: var(--custom-text-secondary) !important;
-            --text-color-link: var(--custom-primary-color) !important;
-            --color-text-primary: var(--custom-text-primary) !important;
-            --color-text-secondary: var(--custom-text-secondary) !important;
-            --color-text-placeholder: var(--custom-text-secondary) !important;
-
+            --text-primary: #1a1a1a;
+            --text-secondary: #6c757d;
+            --text-muted: #adb5bd;
+            
             /* Border colors */
-            --border-color-primary: var(--custom-border-color) !important;
-            --border-color-accent: var(--custom-border-focus) !important;
-            --border-color-secondary: var(--custom-border-color) !important;
-            --border-color-tertiary: var(--custom-border-color) !important;
-            --color-border-primary: var(--custom-border-color) !important;
-            --color-border-secondary: var(--custom-border-color) !important;
-
-            /* Button colors */
-            --button-primary-background: var(--custom-primary-color) !important;
-            --button-primary-background-hover: var(--custom-primary-hover) !important;
-            --button-primary-text-color: white !important;
-            --button-secondary-background: transparent !important;
-            --button-secondary-background-hover: var(--custom-background-secondary) !important;
-            --button-secondary-border-color: var(--custom-border-color) !important;
-            --button-secondary-border-color-hover: var(--custom-primary-color) !important;
-            --button-secondary-text-color: var(--custom-text-primary) !important;
-            --color-button-primary-background: var(--custom-primary-color) !important;
-            --color-button-primary-background-hover: var(--custom-primary-hover) !important;
-            --color-button-primary-text: white !important;
-            --color-button-secondary-text: var(--custom-text-primary) !important;
-
-            /* Input specific */
-            --input-background-fill: var(--custom-background-primary) !important;
-            --input-border-color: var(--custom-border-color) !important;
-            --input-border-color-focus: var(--custom-border-focus) !important;
-            --input-shadow: var(--custom-shadow-sm) !important;
-            --input-shadow-focus: 0 0 0 4px rgba(255, 140, 0, 0.2) !important;
-            --input-text-color: var(--custom-text-primary) !important;
-
+            --border-light: #e9ecef;
+            --border-medium: #dee2e6;
+            --border-strong: #adb5bd;
+            
+            /* Status colors */
+            --success-bg: #d1edff;
+            --success-border: #0ea5e9;
+            --success-text: #0369a1;
+            --error-bg: #fef2f2;
+            --error-border: #fca5a5;
+            --error-text: #dc2626;
+            --warning-bg: #fffbeb;
+            --warning-border: #fbbf24;
+            --warning-text: #d97706;
+            
             /* Shadows */
-            --shadow-s: var(--custom-shadow-sm) !important;
-            --shadow-m: var(--custom-shadow-md) !important;
-            --shadow-l: var(--custom-shadow-lg) !important;
-
-            /* Misc */
-            --color-accent-soft: rgba(255, 140, 0, 0.2) !important;
-            --color-error: var(--custom-error-text) !important;
-            --color-error-background: var(--custom-error-bg) !important;
-            --color-error-border: var(--custom-error-border) !important;
-
-            /* Specific overrides */
-            --block-border-color: var(--custom-border-color) !important;
-            --input-border-color: var(--custom-border-color) !important;
-            --input-label-color: var(--custom-text-primary) !important;
-            --link-text-color: var(--custom-primary-color) !important;
-            --link-text-color-hover: var(--custom-primary-hover) !important;
-
-            /* Scrollbar */
-            --scrollbar-thumb-color: var(--custom-border-color) !important;
-            --scrollbar-track-color: var(--custom-background-secondary) !important;
-        }}
-
-        /* Override dark mode media query */
-        @media (prefers-color-scheme: dark) {{
-            :root, html, body, .gradio-app, .dark, .gradio-container {{
-                color-scheme: light only !important;
-                background-color: var(--custom-background-secondary) !important;
-                color: var(--custom-text-primary) !important;
-            }}
-        }}
-
-        /* Base styles for html and body */
-        body, html {{
-            background-color: var(--custom-background-secondary) !important;
-            color: var(--custom-text-primary) !important;
-            transition: none !important;
-        }}
-
-        /* Target the main Gradio application container */
-        .gradio-app {{
-            background-color: var(--custom-background-secondary) !important;
-            color: var(--custom-text-primary) !important;
-        }}
-
-        /* Ensure all core Gradio blocks and components use our defined colors */
-        .gr-block, .gr-box, .gr-panel, .gr-form, .gr-columns, .gr-column,
-        .gradio-html, .gradio-markdown, .gradio-prose {{
-            background-color: var(--custom-background-primary) !important;
-            color: var(--custom-text-primary) !important;
-            border-color: var(--custom-border-color) !important;
-            --text-color-body: var(--custom-text-primary) !important;
-            --text-color-subdued: var(--custom-text-secondary) !important;
-        }}
-
-        /* Centering styles for title and headers */
-        .app-header-title, .section-title {{
-            text-align: center !important;
-            width: 100% !important;
+            --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+            --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+        }
+
+        /* Dark theme colors */
+        @media (prefers-color-scheme: dark) {
+            :root {
+                --bg-primary: #1a1a1a;
+                --bg-secondary: #2d2d2d;
+                --bg-tertiary: #404040;
+                --bg-card: #2d2d2d;
+                
+                --text-primary: #ffffff;
+                --text-secondary: #a1a1aa;
+                --text-muted: #71717a;
+                
+                --border-light: #404040;
+                --border-medium: #525252;
+                --border-strong: #737373;
+                
+                --success-bg: rgba(14, 165, 233, 0.1);
+                --error-bg: rgba(220, 38, 38, 0.1);
+                --warning-bg: rgba(217, 119, 6, 0.1);
+            }
+        }
+
+        /* Force dark theme when .dark class is present */
+        .dark {
+            --bg-primary: #1a1a1a !important;
+            --bg-secondary: #2d2d2d !important;
+            --bg-tertiary: #404040 !important;
+            --bg-card: #2d2d2d !important;
+            
+            --text-primary: #ffffff !important;
+            --text-secondary: #a1a1aa !important;
+            --text-muted: #71717a !important;
+            
+            --border-light: #404040 !important;
+            --border-medium: #525252 !important;
+            --border-strong: #737373 !important;
+            
+            --success-bg: rgba(14, 165, 233, 0.1) !important;
+            --error-bg: rgba(220, 38, 38, 0.1) !important;
+            --warning-bg: rgba(217, 119, 6, 0.1) !important;
+        }
+
+        /* Base styles */
+        body, html {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+            background-color: var(--bg-secondary) !important;
+            color: var(--text-primary) !important;
+            line-height: 1.6;
+        }
+
+        .gradio-container {
+            background-color: var(--bg-secondary) !important;
+            color: var(--text-primary) !important;
+            max-width: 1200px !important;
             margin: 0 auto !important;
-        }}
+            padding: 1rem !important;
+        }
+
+        /* Header styles */
+        .app-header {
+            text-align: center;
+            padding: 2rem 1rem;
+            background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-tertiary) 100%);
+            border: 1px solid var(--border-light);
+            border-radius: 16px;
+            margin-bottom: 2rem;
+            box-shadow: var(--shadow-md);
+        }
+
+        .app-header-icon {
+            font-size: 3rem;
+            margin-bottom: 1rem;
+            display: block;
+        }
+
+        .app-header-title {
+            font-family: 'Poppins', sans-serif;
+            font-size: 2.5rem;
+            font-weight: 700;
+            color: var(--text-primary);
+            margin: 0 0 0.5rem 0;
+            background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
+            -webkit-background-clip: text;
+            background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+
+        .app-header-tagline {
+            font-size: 1.1rem;
+            color: var(--text-secondary);
+            margin: 0;
+            font-weight: 400;
+        }
+
+        /* Card styles */
+        .dashboard-card {
+            background-color: var(--bg-card);
+            border: 1px solid var(--border-light);
+            border-radius: 12px;
+            margin-bottom: 1.5rem;
+            box-shadow: var(--shadow-sm);
+            overflow: hidden;
+            transition: all 0.2s ease;
+        }
+
+        .dashboard-card:hover {
+            box-shadow: var(--shadow-md);
+            transform: translateY(-1px);
+        }
+
+        .card-header {
+            background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
+            color: white;
+            padding: 1rem 1.5rem;
+            border-bottom: none;
+        }
+
+        .card-title {
+            font-family: 'Poppins', sans-serif;
+            font-size: 1.25rem;
+            font-weight: 600;
+            margin: 0;
+            text-align: center;
+        }
+
+        .card-content {
+            padding: 1.5rem;
+            background-color: var(--bg-card);
+        }
+
+        /* Input styles */
+        .input-group {
+            margin-bottom: 1.5rem;
+        }
+
+        .input-group:last-child {
+            margin-bottom: 0;
+        }
+
+        .gradio-textbox, .gradio-radio {
+            margin-bottom: 1rem;
+        }
+
+        .gradio-textbox label, .gradio-radio legend {
+            font-weight: 600;
+            color: var(--text-primary) !important;
+            margin-bottom: 0.5rem;
+            display: block;
+        }
+
+        .gradio-textbox textarea, .gradio-textbox input {
+            background-color: var(--bg-primary) !important;
+            border: 2px solid var(--border-medium) !important;
+            border-radius: 8px !important;
+            color: var(--text-primary) !important;
+            font-size: 0.95rem !important;
+            padding: 0.75rem !important;
+            transition: all 0.2s ease !important;
+            box-shadow: var(--shadow-sm) !important;
+        }
+
+        .gradio-textbox textarea:focus, .gradio-textbox input:focus {
+            border-color: var(--primary-color) !important;
+            box-shadow: 0 0 0 3px var(--primary-light) !important;
+            outline: none !important;
+        }
+
+        /* Radio button styles */
+        .gradio-radio .wrap {
+            display: grid !important;
+            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
+            gap: 0.5rem !important;
+            margin-top: 0.5rem !important;
+        }
+
+        .gradio-radio label {
+            background-color: var(--bg-primary) !important;
+            border: 2px solid var(--border-medium) !important;
+            border-radius: 8px !important;
+            padding: 0.75rem 1rem !important;
+            cursor: pointer !important;
+            transition: all 0.2s ease !important;
+            text-align: center !important;
+            font-weight: 500 !important;
+            color: var(--text-primary) !important;
+            box-shadow: var(--shadow-sm) !important;
+        }
+
+        .gradio-radio label:hover {
+            border-color: var(--primary-color) !important;
+            background-color: var(--primary-light) !important;
+            transform: translateY(-1px) !important;
+            box-shadow: var(--shadow-md) !important;
+        }
+
+        .gradio-radio input[type="radio"]:checked + label {
+            background-color: var(--primary-color) !important;
+            border-color: var(--primary-hover) !important;
+            color: white !important;
+            box-shadow: var(--shadow-md) !important;
+        }
 
-        .app-header-wrapper, .dashboard-card-section {{
+        /* Button styles */
+        .button-row {
             display: flex;
+            gap: 1rem;
+            margin-top: 1.5rem;
             justify-content: center;
-            align-items: center;
-            flex-direction: column;
-        }}
-
-        /* Specific overrides for input fields */
-        .gradio-textbox textarea,
-        .gradio-textbox input {{
-            background-color: var(--custom-background-primary) !important;
-            color: var(--custom-text-primary) !important;
-            border: 2px solid var(--custom-border-color) !important;
-            box-shadow: var(--custom-shadow-sm) !important;
-        }}
-        .gradio-textbox textarea:focus,
-        .gradio-textbox input:focus {{
-            border-color: var(--custom-border-focus) !important;
-            box-shadow: 0 0 0 4px rgba(255, 140, 0, 0.2) !important;
-            outline: none !important;
-        }}
-
-        /* Specific overrides for radio buttons */
-        .gradio-radio label {{
-            background-color: var(--custom-background-primary) !important;
-            color: var(--custom-text-primary) !important;
-            border: 2px solid var(--custom-border-color) !important;
-            box-shadow: var(--custom-shadow-sm) !important;
-        }}
-        .gradio-radio label span.text-lg {{
-            color: var(--custom-text-primary) !important;
-        }}
-        .gradio-radio label:hover {{
-            background-color: var(--custom-background-secondary) !important;
-            border-color: var(--custom-primary-color) !important;
-            box-shadow: var(--custom-shadow-md) !important;
-            transform: translateY(-2px) !important;
-        }}
-        .gradio-radio input[type="radio"]:checked + label {{
-            background-color: var(--custom-primary-color) !important;
-            color: white !important;
-            border-color: var(--custom-primary-hover) !important;
-            box-shadow: var(--custom-shadow-md) !important;
-        }}
-        .gradio-radio input[type="radio"]:checked + label span.text-lg {{
+        }
+
+        .gradio-button {
+            padding: 0.75rem 2rem !important;
+            border-radius: 8px !important;
+            font-weight: 600 !important;
+            font-size: 0.95rem !important;
+            transition: all 0.2s ease !important;
+            border: 2px solid transparent !important;
+            cursor: pointer !important;
+            min-width: 120px !important;
+        }
+
+        .gradio-button.primary {
+            background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)) !important;
             color: white !important;
-        }}
+            box-shadow: var(--shadow-md) !important;
+        }
 
-        /* Overrides for buttons */
-        .gr-button-primary {{
-            background-color: var(--custom-primary-color) !important;
-            color: white !important;
-        }}
-        .gr-button-primary:hover {{
-            background-color: var(--custom-primary-hover) !important;
-        }}
-        .gr-button-secondary {{
+        .gradio-button.primary:hover {
+            transform: translateY(-2px) !important;
+            box-shadow: var(--shadow-lg) !important;
+        }
+
+        .gradio-button.secondary {
             background-color: transparent !important;
-            color: var(--custom-text-primary) !important;
-            border-color: var(--custom-border-color) !important;
-        }}
-        .gr-button-secondary:hover {{
-            background-color: var(--custom-background-secondary) !important;
-            border-color: var(--custom-primary-color) !important;
-        }}
-
-        /* Placeholders */
-        .placeholder {{
-            background-color: var(--custom-background-primary) !important;
-            border: 2px dashed var(--custom-border-color) !important;
-            color: var(--custom-text-secondary) !important;
-        }}
-
-        /* Example table */
-        .examples-section .gr-samples-table {{
-            border: 2px solid var(--custom-border-color) !important;
-            background-color: var(--custom-background-primary) !important;
-            color: var(--custom-text-primary) !important;
-        }}
-        .examples-section .gr-samples-table th {{
-            background-color: var(--custom-background-secondary) !important;
-            color: var(--custom-text-primary) !important;
-            text-align: center !important;
-        }}
-        .examples-section .gr-samples-table td {{
-            background-color: var(--custom-background-primary) !important;
-            color: var(--custom-text-primary) !important;
-            border-top: 1px solid var(--custom-border-color) !important;
-        }}
-        .examples-section .gr-samples-table tr:hover td {{
-            background-color: var(--custom-background-secondary) !important;
-            transform: translateX(5px);
-        }}
-        .examples-section .gr-samples-table th, .examples-section .gr-samples-table td {{
-            border-color: var(--custom-border-color) !important;
-        }}
-
-        /* Error messages */
-        .error-message {{
-            background-color: var(--custom-error-bg) !important;
-            border: 2px solid var(--custom-error-border) !important;
-            color: var(--custom-error-text) !important;
-        }}
-        .error-message a {{
-            color: var(--custom-error-text) !important;
-        }}
-
-        /* Footer */
-        .app-footer-wrapper {{
-            background: linear-gradient(145deg, var(--custom-background-primary) 0%, var(--custom-background-secondary) 100%) !important;
-            border: 2px solid var(--custom-border-color) !important;
-            color: var(--custom-text-primary) !important;
-        }}
-        .app-footer p {{
-            color: var(--custom-text-secondary) !important;
-        }}
-        .app-footer strong, .app-footer b {{
-            color: var(--custom-primary-color) !important;
-        }}
-        .app-footer a {{
-            color: var(--custom-primary-color) !important;
-        }}
-
-        /* General element classes */
-        .gr-text, .gr-label, .gr-checkbox-group, .gr-radio-group,
-        .gr-slider, .gr-number, .gr-dropdown {{
-            color: var(--custom-text-primary) !important;
-        }}
-
-        /* Ensure all text within any Gradio element defaults to primary text color */
-        .gradio-container * {{
-            color: var(--custom-text-primary) !important;
-        }}
-        /* Re-override for specific cases that need secondary text color */
-        .gradio-container .gr-prose,
-        .gradio-container .app-header-tagline,
-        .gradio-container .placeholder,
-        .gradio-container .app-footer p {{
-            color: var(--custom-text-secondary) !important;
-        }}
-        /* Re-override for primary color elements */
-        .gradio-container .app-header-logo,
-        .gradio-container .response-header,
-        .gradio-container .response-icon,
-        .gradio-container .custom-link {{
-            color: var(--custom-primary-color) !important;
-        }}
-        .gradio-container .gr-button-primary {{
-            color: white !important;
-        }}
-        /* Ensure inputs specifically use primary text color */
-        .gradio-textbox textarea, .gradio-textbox input,
-        .gradio-radio label span.text-lg {{
-            color: var(--custom-text-primary) !important;
-        }}
-
-        /* Media Queries */
-        @media (max-width: 768px) {{
-            .gradio-container {{
-                padding: 1rem !important;
-            }}
-            .app-header-title {{
-                font-size: 2.2rem !important;
-            }}
-            .app-header-tagline {{
-                font-size: 1rem !important;
-            }}
-            .section-title {{
-                font-size: 1.4rem !important;
-            }}
-            .input-column {{
-                flex-direction: column !important;
-            }}
-            .button-row {{
-                flex-direction: column !important;
-            }}
-            .gradio-button {{
+            color: var(--text-primary) !important;
+            border-color: var(--border-medium) !important;
+        }
+
+        .gradio-button.secondary:hover {
+            background-color: var(--bg-tertiary) !important;
+            border-color: var(--primary-color) !important;
+            transform: translateY(-1px) !important;
+        }
+
+        /* Output styles */
+        .output-container {
+            min-height: 200px;
+            background-color: var(--bg-primary);
+            border: 2px solid var(--border-light);
+            border-radius: 8px;
+            padding: 1.5rem;
+            box-shadow: var(--shadow-sm);
+        }
+
+        .placeholder {
+            text-align: center;
+            color: var(--text-muted);
+            font-style: italic;
+            padding: 2rem;
+            border: 2px dashed var(--border-medium);
+            border-radius: 8px;
+            background-color: var(--bg-tertiary);
+        }
+
+        .animated-output-content {
+            animation: fadeInUp 0.3s ease-out;
+        }
+
+        @keyframes fadeInUp {
+            from {
+                opacity: 0;
+                transform: translateY(10px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .response-header {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            font-weight: 600;
+            color: var(--primary-color);
+            margin-bottom: 1rem;
+            font-size: 1.1rem;
+        }
+
+        .response-divider {
+            height: 2px;
+            background: linear-gradient(90deg, var(--primary-color), transparent);
+            margin: 1rem 0;
+            border-radius: 1px;
+        }
+
+        .response-content {
+            color: var(--text-primary);
+            line-height: 1.7;
+        }
+
+        /* Error message styles */
+        .error-message {
+            background-color: var(--error-bg);
+            border: 2px solid var(--error-border);
+            border-radius: 8px;
+            padding: 1rem;
+            color: var(--error-text);
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            font-weight: 500;
+        }
+
+        .error-icon {
+            font-size: 1.2rem;
+        }
+
+        .error-message a {
+            color: var(--error-text);
+            text-decoration: underline;
+            font-weight: 600;
+        }
+
+        /* Examples section */
+        .examples-section {
+            margin-top: 1rem;
+        }
+
+        .examples-section .gradio-examples {
+            border: 1px solid var(--border-light);
+            border-radius: 8px;
+            overflow: hidden;
+            box-shadow: var(--shadow-sm);
+        }
+
+        .examples-section table {
+            width: 100%;
+            border-collapse: collapse;
+            background-color: var(--bg-card);
+        }
+
+        .examples-section th {
+            background-color: var(--bg-tertiary);
+            color: var(--text-primary);
+            font-weight: 600;
+            padding: 1rem;
+            text-align: left;
+            border-bottom: 2px solid var(--border-medium);
+        }
+
+        .examples-section td {
+            padding: 1rem;
+            border-bottom: 1px solid var(--border-light);
+            color: var(--text-primary);
+            cursor: pointer;
+            transition: all 0.2s ease;
+        }
+
+        .examples-section tr:hover td {
+            background-color: var(--primary-light);
+            transform: translateX(4px);
+        }
+
+        /* Footer styles */
+        .app-footer {
+            margin-top: 3rem;
+            padding: 2rem;
+            background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-tertiary) 100%);
+            border: 1px solid var(--border-light);
+            border-radius: 12px;
+            text-align: center;
+            box-shadow: var(--shadow-sm);
+        }
+
+        .app-footer p {
+            margin: 0.5rem 0;
+            color: var(--text-secondary);
+            line-height: 1.6;
+        }
+
+        .app-footer strong {
+            color: var(--primary-color);
+        }
+
+        .app-footer a {
+            color: var(--primary-color);
+            text-decoration: none;
+            font-weight: 600;
+            transition: all 0.2s ease;
+        }
+
+        .app-footer a:hover {
+            text-decoration: underline;
+            color: var(--primary-hover);
+        }
+
+        /* Responsive design */
+        @media (max-width: 768px) {
+            .gradio-container {
+                padding: 0.5rem !important;
+            }
+            
+            .app-header {
+                padding: 1.5rem 1rem;
+            }
+            
+            .app-header-title {
+                font-size: 2rem;
+            }
+            
+            .card-content {
+                padding: 1rem;
+            }
+            
+            .button-row {
+                flex-direction: column;
+            }
+            
+            .gradio-button {
                 width: 100% !important;
-            }}
-            .dashboard-card-section {{
-            }}
-            .section-title-gradient-bar {{
-                padding: 0.1rem 1rem !important;
-            }}
-            .dashboard-card-content-area {{
-                padding: 0 1rem 1rem 1rem !important;
-            }}
-            .output-content-wrapper {{
-                min-height: 120px !important;
-            }}
-            .placeholder {{
-                padding: 1.5rem 1rem !important;
-                font-size: 1rem !important;
-            }}
-        }}
+            }
+            
+            .gradio-radio .wrap {
+                grid-template-columns: 1fr !important;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .app-header-title {
+                font-size: 1.8rem;
+            }
+            
+            .app-header-tagline {
+                font-size: 1rem;
+            }
+            
+            .card-header {
+                padding: 0.75rem 1rem;
+            }
+            
+            .card-title {
+                font-size: 1.1rem;
+            }
+        }
+
+        /* Accessibility improvements */
+        .gradio-button:focus,
+        .gradio-textbox input:focus,
+        .gradio-textbox textarea:focus,
+        .gradio-radio label:focus {
+            outline: 2px solid var(--primary-color);
+            outline-offset: 2px;
+        }
+
+        /* Animation for loading states */
+        .loading {
+            opacity: 0.7;
+            pointer-events: none;
+        }
+
+        .loading::after {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 20px;
+            height: 20px;
+            margin: -10px 0 0 -10px;
+            border: 2px solid var(--primary-color);
+            border-radius: 50%;
+            border-top-color: transparent;
+            animation: spin 1s linear infinite;
+        }
+
+        @keyframes spin {
+            to {
+                transform: rotate(360deg);
+            }
+        }
         """
 
-        with gr.Blocks(css=custom_css, title="Landlord-Tenant Rights Assistant") as demo:
-            with gr.Group(elem_classes="app-header-wrapper"):
-                gr.Markdown(
-                    """
-                    <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>
-                    """,
-                    elem_classes="full-width-center"
-                )
-
-            with gr.Column(elem_classes="main-dashboard-container"):
-                # How This Assistant Works Box
-                with gr.Group(elem_classes="dashboard-card-section"):
-                    gr.Markdown("<h3 class='section-title'>How This Assistant Works</h3>", elem_classes="full-width-center section-title-gradient-bar")
-                    with gr.Column(elem_classes="dashboard-card-content-area"):
-                        gr.Markdown(
-                            """
-                            This AI-powered assistant helps navigate complex landlord-tenant laws. Simply ask a question about your state's regulations, and it will provide detailed, legally-grounded insights.
-                            """
-                        )
-
-                # OpenAI API Key Input Card
-                with gr.Group(elem_classes="dashboard-card-section"):
-                    gr.Markdown("<h3 class='section-title'>OpenAI API Key</h3>", elem_classes="full-width-center section-title-gradient-bar")
-                    with gr.Column(elem_classes="dashboard-card-content-area"):
-                        api_key_input = gr.Textbox(
-                            label="API Key",
-                            type="password",
-                            placeholder="Enter your OpenAI API key (e.g., sk-...)",
-                            lines=1,
-                            elem_classes=["input-field-group"]
-                        )
-                        gr.Markdown(
-                            "Required to process your query. Get one from OpenAI: [platform.openai.com/api-keys](https://platform.openai.com/api-keys)",
-                            elem_classes="gr-prose"
-                        )
-
-                # Query Input and State Selection Card
-                with gr.Group(elem_classes="dashboard-card-section"):
-                    gr.Markdown("<h3 class='section-title'>Ask Your Question</h3>", elem_classes="full-width-center section-title-gradient-bar")
-                    with gr.Column(elem_classes="dashboard-card-content-area"):
-                        with gr.Column(elem_classes="input-column"):
-                            with gr.Column(elem_classes="input-field", scale=1):
-                                query_input = gr.Textbox(
-                                    label="Your Question",
-                                    placeholder="E.g., What are the rules for security deposit returns in my state?",
-                                    lines=8,
-                                    max_lines=15,
-                                    elem_classes=["input-field-group"]
-                                )
-                            with gr.Column(elem_classes="input-field", scale=1):
-                                state_input = gr.Radio(
-                                    label="Select State",
-                                    choices=radio_choices,
-                                    value=initial_value_radio,
-                                    elem_classes=["input-field-group", "gradio-radio-custom"],
-                                    interactive=True
-                                )
-                        with gr.Row(elem_classes="button-row"):
-                            clear_button = gr.Button("Clear", variant="secondary", elem_classes=["gr-button-secondary"])
-                            submit_button = gr.Button("Submit Query", variant="primary", elem_classes=["gr-button-primary"])
-
-                # Output Display Card
-                with gr.Group(elem_classes="dashboard-card-section"):
-                    gr.Markdown("<h3 class='section-title'>Legal Assistant's Response</h3>", elem_classes="full-width-center section-title-gradient-bar")
-                    with gr.Column(elem_classes="dashboard-card-content-area"):
-                        output = gr.HTML(
-                            value="<div class='placeholder'>The answer will appear here after submitting your query.</div>",
-                            elem_classes="output-content-wrapper"
-                        )
-
-                # Example Questions Section
-                with gr.Group(elem_classes="dashboard-card-section examples-section"):
-                    gr.Markdown("<h3 class='section-title'>Example Questions</h3>", elem_classes="full-width-center section-title-gradient-bar")
-                    with gr.Column(elem_classes="dashboard-card-content-area"):
-                        if example_queries:
-                            gr.Examples(
-                                examples=example_queries,
-                                inputs=[query_input, state_input],
-                                examples_per_page=5,
-                                label=""
+        with gr.Blocks(css=custom_css, title="Landlord-Tenant Rights Assistant", theme="default") as demo:
+            # Header Section
+            with gr.Group(elem_classes="app-header"):
+                gr.HTML("""
+                    <div class="app-header-icon">⚖️</div>
+                    <h1 class="app-header-title">Landlord-Tenant Rights Assistant</h1>
+                    <p class="app-header-tagline">Empowering You with State-Specific Legal Insights</p>
+                """)
+
+            # How It Works Card
+            with gr.Group(elem_classes="dashboard-card"):
+                gr.HTML('<div class="card-header"><h3 class="card-title">How This Assistant Works</h3></div>')
+                with gr.Column(elem_classes="card-content"):
+                    gr.Markdown("""
+                    This AI-powered assistant helps navigate complex landlord-tenant laws. Simply ask a question about your state's regulations, and it will provide detailed, legally-grounded insights based on current legal statutes and precedents.
+                    """)
+
+            # API Key Input Card
+            with gr.Group(elem_classes="dashboard-card"):
+                gr.HTML('<div class="card-header"><h3 class="card-title">🔑 OpenAI API Key</h3></div>')
+                with gr.Column(elem_classes="card-content"):
+                    api_key_input = gr.Textbox(
+                        label="API Key",
+                        type="password",
+                        placeholder="Enter your OpenAI API key (e.g., sk-...)",
+                        lines=1,
+                        elem_classes=["input-group"]
+                    )
+                    gr.Markdown("""
+                    **Required to process your query.** Get your API key from [OpenAI Platform](https://platform.openai.com/api-keys).
+                    Your key is processed securely and not stored.
+                    """)
+
+            # Query Input Card
+            with gr.Group(elem_classes="dashboard-card"):
+                gr.HTML('<div class="card-header"><h3 class="card-title">💬 Ask Your Question</h3></div>')
+                with gr.Column(elem_classes="card-content"):
+                    with gr.Row():
+                        with gr.Column(scale=2):
+                            query_input = gr.Textbox(
+                                label="Your Question",
+                                placeholder="E.g., What are the rules for security deposit returns in my state?",
+                                lines=6,
+                                max_lines=10,
+                                elem_classes=["input-group"]
                             )
-                        else:
-                            gr.Markdown("<div class='placeholder'>Sample questions could not be loaded. Please ensure the vector database is populated.</div>")
-
-            # Footer Section
-            with gr.Group(elem_classes="app-footer-wrapper"):
-                gr.Markdown(
-                    f"""
-                    <style>
-                        .custom-link {{
-                            font-weight: bold !important;
-                            color: var(--custom-primary-color) ! includes;
-                            text-decoration: underline;
-                        }}
-                        .app-footer p {{
-                            color: var(--custom-text-secondary) !important;
-                        }}
-                        .app-footer strong, .app-footer b {{
-                            color: var(--custom-primary-color) !important;
-                        }}
-                    </style>
-                    <p><strong>Disclaimer:</strong> This tool is for informational purposes only and does not constitute legal advice. For specific 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" class="custom-link">LinkedIn</a> or explore insights at <a href="https://datascientistinsights.substack.com/" target="_blank" class="custom-link">Substack</a>.</p>
-                    """
-                )
-
+                        with gr.Column(scale=1):
+                            state_input = gr.Radio(
+                                label="Select State",
+                                choices=radio_choices,
+                                value=initial_value_radio,
+                                elem_classes=["input-group"],
+                                interactive=True
+                            )
+                    
+                    with gr.Row(elem_classes="button-row"):
+                        clear_button = gr.Button("Clear", variant="secondary", elem_classes=["secondary"])
+                        submit_button = gr.Button("Submit Query", variant="primary", elem_classes=["primary"])
+
+            # Output Card
+            with gr.Group(elem_classes="dashboard-card"):
+                gr.HTML('<div class="card-header"><h3 class="card-title">📋 Legal Assistant\'s Response</h3></div>')
+                with gr.Column(elem_classes="card-content"):
+                    output = gr.HTML(
+                        value='<div class="placeholder">💡 The answer will appear here after submitting your query.</div>',
+                        elem_classes=["output-container"]
+                    )
+
+            # Examples Card
+            with gr.Group(elem_classes="dashboard-card examples-section"):
+                gr.HTML('<div class="card-header"><h3 class="card-title">💡 Example Questions</h3></div>')
+                with gr.Column(elem_classes="card-content"):
+                    if example_queries:
+                        gr.Examples(
+                            examples=example_queries,
+                            inputs=[query_input, state_input],
+                            examples_per_page=5,
+                            label=""
+                        )
+                    else:
+                        gr.HTML('<div class="placeholder">⚠️ Sample questions could not be loaded. Please ensure the vector database is populated.</div>')
+
+            # Footer
+            with gr.Group(elem_classes="app-footer"):
+                gr.HTML("""
+                    <p><strong>⚠️ Disclaimer:</strong> This tool is for informational purposes only and does not constitute legal advice. 
+                    For specific 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>
+                """)
+
+            # Event handlers
             submit_button.click(
                 fn=query_interface_wrapper,
                 inputs=[api_key_input, query_input, state_input],
@@ -752,7 +922,10 @@ Answer:"""
             
             clear_button.click(
                 fn=lambda: (
-                    "", "", initial_value_radio, "<div class='placeholder'>Inputs cleared. Ready for your next question.</div>"
+                    "", 
+                    "", 
+                    initial_value_radio, 
+                    '<div class="placeholder">✨ Inputs cleared. Ready for your next question.</div>'
                 ),
                 inputs=[],
                 outputs=[api_key_input, query_input, state_input, output]