UI update

app.py

@@ -247,160 +247,122 @@ 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: # Removed "Select a state..." from error check as it's not a choice
-                return "<div class='error-message'><span class='error-icon'>⚠️</span>Please select a valid state from the list.</div>"
+                return "<div class='error-message'><span class='error-icon'></span>Please provide a valid OpenAI API key (starting with 'sk-'). <a href='https://platform.openai.com/api-keys' target='_blank'>OpenAI</a>.</div>"
+            if not state or state is None:
+                return "<div class='error-message'><span class='error-icon'></span>Please select a valid state from the list.</div>"
             if not query or not query.strip():
-                return "<div class='error-message'><span class='error-icon'>⚠️</span>Please enter your question in the text box.</div>"
+                return "<div class='error-message'><span class='error-icon'></span>Please enter your question in the text box.</div>"
 
             # Call the core processing logic
             result = self.process_query(query=query, state=state, openai_api_key=api_key)
             answer = result.get("answer", "<div class='error-message'><span class='error-icon'>⚠️</span>An unexpected error occurred.</div>")
 
-            # Check if the answer already contains an error message (from deeper within process_query)
+            # Check if the answer already contains an error message
             if "<div class='error-message'>" in answer:
-                # Error messages are returned directly as they contain their own styling
                 return answer
             else:
-                # Wrap successful response in a div with an animation class
                 formatted_response_content = f"<div class='response-header'><span class='response-icon'>📜</span>Response for {state}</div><hr class='divider'>{answer}"
                 return f"<div class='animated-output-content'>{formatted_response_content}</div>"
 
         try:
             available_states_list = self.get_states()
-            # DEBUG: Print states to console to verify if data is loaded
             print(f"DEBUG: States loaded for selection: {available_states_list}")
-            # For Radio, remove "Select a state..." from choices, initial value will be None
             radio_choices = available_states_list if available_states_list and "Error" not in available_states_list[0] else ["Error: States unavailable"]
-            initial_value_radio = None # Set initial value to None, forcing user to pick
-        except Exception as e: # Catch-all for safety
+            initial_value_radio = None
+        except Exception as e:
             print(f"DEBUG: Error loading states for selection: {e}")
             radio_choices = ["Error: Critical failure loading states"]
             initial_value_radio = None
-
-
-        # Define example queries, filtering based on available states
         example_queries_base = [
             ["What are the rules for security deposit returns?", "California"],
             ["Can a landlord enter my apartment without notice?", "New York"],
             ["My landlord hasn't made necessary repairs. What can I do?", "Texas"],
             ["How much notice must a landlord give to raise rent?", "Florida"],
-            ["What is an and implied warranty of habitability?", "Illinois"]
+            ["What is an implied warranty of habitability?", "Illinois"]
         ]
         example_queries = []
         if available_states_list and "Error" not in available_states_list[0] and len(available_states_list) > 0:
             loaded_states_set = set(available_states_list)
-            # Filter for examples whose state is in the loaded states
             example_queries = [ex for ex in example_queries_base if ex[1] in loaded_states_set]
-            # Add a generic example if no specific state examples match or if list is empty
             if not example_queries:
-                # Add one example using the first available state, or a common one if no states
                 example_queries.append(["What basic rights do tenants have?", available_states_list[0] if available_states_list else "California"])
-        else: # Fallback if states list is problematic (e.g., empty or error)
+        else:
             example_queries.append(["What basic rights do tenants have?", "California"])
 
-
-        # Custom CSS for better UI design, clear boundaries, and text alignment for HuggingFace
         custom_css = """
         /* Import legible fonts from Google Fonts */
         @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@600;700;800&display=swap');
         
-        /* Root variables for consistent theming - adjusted for a very warm, clean palette */
+        /* Root variables for consistent theming */
         :root {
-            --primary-color: #FF8C00; /* Darker Orange for buttons/accents */
-            --primary-hover: #E07B00; /* Slightly darker orange for hover */
-            --background-primary: hsl(30, 100%, 99.9%); /* Almost pure white, with a very subtle warm tint */
-            --background-secondary: hsl(30, 100%, 96%); /* Clear, light, warm peach/cream */
-            --text-primary: #4A3C32; /* Dark warm brown/charcoal for main text */
-            --text-secondary: #8C7B6F; /* Muted warm gray/brown for secondary text */
-            --border-color: hsl(30, 70%, 85%); /* Light, warm orange-brown for borders */
-            --border-focus: #FF8C00; /* Focus color matches primary */
+            --primary-color: #FF8C00;
+            --primary-hover: #E07B00;
+            --background-primary: hsl(30, 100%, 99.9%);
+            --background-secondary: hsl(30, 100%, 96%);
+            --text-primary: #4A3C32;
+            --text-secondary: #8C7B6F;
+            --border-color: hsl(30, 70%, 85%);
+            --border-focus: #FF8C00;
             --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
             --shadow-md: 0 4px 10px rgba(0,0,0,0.1);
             --shadow-lg: 0 10px 20px rgba(0,0,0,0.15);
-            --error-bg: #FFF0E0; /* Light orange-pink for errors */
-            --error-border: #FFD2B2; /* Medium orange-pink for error borders */
-            --error-text: #E05C00; /* Darker, strong orange-red for error text */
+            --error-bg: #FFF0E0;
+            --error-border: #FFD2B2;
+            --error-text: #E05C00;
         }
         
-        /* Dark mode variables - for consistency if a dark mode toggle were present */
-        body.dark {
-            --primary-color: #FFA500; /* Bright orange for dark mode */
-            --primary-hover: #CC8400;
-            --background-primary: #2C2C2C; /* Dark charcoal */
-            --background-secondary: #1F1F1F; /* Even darker charcoal */
-            --text-primary: #F0F0F0;
-            --text-secondary: #B0B0B0;
-            --border-color: #555555;
-            --border-focus: #FFA500;
-            --error-bg: #400000;
-            --error-border: #800000;
-            --error-text: #FF6666;
-        }
-
-        /* Universal reset for backgrounds to ensure no default grey */
-        *, *::before, *::after {
-            /* This is a soft reset. Specific overrides below will take precedence. */
-            /* background-color: initial; /* Resets to default, which for many is transparent */
-            /* box-sizing: border-box; */
-        }
-
-        /* Ensure the very outer body background is also set, overriding any Gradio defaults */
         body, html {
             background-color: var(--background-secondary) !important;
         }
 
-        /* Base container improvements */
         .gradio-container {
-            max-width: 900px !important; /* Slightly smaller for focused content */
-            margin: 0 auto !important; /* Center the whole app */
+            max-width: 900px !important;
+            margin: 0 auto !important;
             padding: 1.5rem !important;
             font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
-            background-color: var(--background-secondary) !important; /* Overall background of the container */
-            box-shadow: none !important; /* Remove default gradio container shadow */
+            background-color: var(--background-secondary) !important;
+            box-shadow: none !important;
         }
-        /* All main content sections (cards) will have the primary background, not a gradient */
+
         .main-dashboard-container > * {
             background-color: var(--background-primary) !important;
         }
 
-        /* Header styling - centered and prominent */
         .app-header-wrapper {
-            background: linear-gradient(145deg, var(--background-primary) 0%, var(--background-secondary) 100%) !important; /* Gradient background */
+            background: linear-gradient(145deg, var(--background-primary) 0%, var(--background-secondary) 100%) !important;
             border: 2px solid var(--border-color) !important;
             border-radius: 16px !important;
-            padding: 2.5rem 1.5rem !important; /* More vertical padding */
+            padding: 2.5rem 1.5rem !important;
             margin-bottom: 1.5rem !important;
             box-shadow: var(--shadow-md) !important;
-            position: relative; /* For potential pseudo-element effects */
-            overflow: hidden; /* For any overflow animations */
-            text-align: center !important; /* Centers block content within the wrapper */
+            position: relative;
+            overflow: hidden;
+            text-align: center !important;
         }
 
-        .app-header-wrapper::before { /* Subtle background pattern for dynamism */
+        .app-header-wrapper::before {
             content: '';
             position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
-            background: radial-gradient(circle at top left, rgba(255,140,0,0.3) 0%, transparent 60%), /* More vibrant orange tint */
-                        radial-gradient(circle at bottom right, rgba(255,140,0,0.3) 0%, transparent 60%);
+            background: radial-gradient(circle at top left, rgba(255,140,0,0.3) 0%, transparent 60%), radial-gradient(circle at bottom right, rgba(255,140,0,0.3) 0%, transparent 60%);
             z-index: 0;
             opacity: 0.8;
             pointer-events: none;
         }
 
         .app-header-logo {
-            font-size: 8.5rem !important; /* Significantly larger icon */
+            font-size: 8.5rem !important;
             margin-bottom: 0.75rem !important;
-            display: block !important; 
-            color: var(--primary-color) !important; /* Theme color */
+            display: block !important;
+            color: var(--primary-color) !important;
             position: relative;
-            z-index: 1; /* Bring icon to front of pseudo-element */
+            z-index: 1;
             animation: float-icon 3s ease-in-out infinite alternate;
         }
-        /* Keyframes for floating icon */
+
         @keyframes float-icon {
             0% { transform: translateY(0px); }
             50% { transform: translateY(-5px); }
@@ -409,319 +371,311 @@ Answer:"""
 
         .app-header-title {
             font-family: 'Poppins', sans-serif !important;
-            font-size: 3rem !important; /* Even larger title */
-            font-weight: 800 !important; /* Bolder */
+            font-size: 3rem !important;
+            font-weight: 800 !important;
             color: var(--text-primary) !important;
             margin: 0 0 0.75rem 0 !important;
             line-height: 1.1 !important;
-            letter-spacing: -0.03em !important; /* Tighter spacing */
+            letter-spacing: -0.03em !important;
             position: relative;
             z-index: 1;
-            display: inline-block; /* Essential for text-align: center on parent to work for this block */
-            max-width: 100%; /* Prevent overflow on smaller screens */
+            display: inline-block;
+            max-width: 100%;
         }
+
         .app-header-tagline {
-            font-size: 1.25rem !important; /* Slightly larger tagline */
+            font-size: 1.25rem !important;
             color: var(--text-secondary) !important;
             font-weight: 400 !important;
             margin: 0 !important;
-            max-width: 700px; /* Constrain tagline width */
-            display: inline-block; /* Essential for text-align: center on parent to work for this block */
+            max-width: 700px;
+            display: inline-block;
             position: relative;
             z-index: 1;
         }
 
-        /* Main container with consistent spacing */
         .main-dashboard-container {
             display: flex !important;
             flex-direction: column !important;
-            gap: 1.25rem !important; /* Consistent spacing between cards */
+            gap: 1.25rem !important;
         }
-        /* Card sections with clear boundaries and subtle dynamic effects */
+
         .dashboard-card-section {
-            background-color: var(--background-primary) !important; /* Solid primary background for card body */
-            border: 2px solid var(--border-color) !important; /* Distinct border */
+            background-color: var(--background-primary) !important;
+            border: 2px solid var(--border-color) !important;
             border-radius: 12px !important;
-            padding: 0 !important; /* Removed padding to allow gradient bar and content area to control it */
-            box-shadow: var(--shadow-sm) !important; /* Subtle shadow */
-            transition: all 0.3s ease-out !important; /* Smoother transition */
-            cursor: default; /* Indicate not directly clickable (unless examples) */
+            padding: 0 !important;
+            box-shadow: var(--shadow-sm) !important;
+            transition: all 0.3s ease-out !important;
+            cursor: default;
         }
+
         .dashboard-card-section:hover {
             box-shadow: var(--shadow-md) !important;
-            transform: translateY(-3px) !important; /* More pronounced lift */
+            transform: translateY(-3px) !important;
         }
 
-        /* Class for Markdown blocks to center their content */
         .full-width-center {
             display: flex !important;
             justify-content: center !important;
             align-items: center !important;
             width: 100% !important;
-            flex-direction: column !important; /* Ensure content stacks vertically if needed */
-            background-color: transparent !important; /* Ensure this wrapper is transparent */
+            flex-direction: column !important;
+            background-color: transparent !important;
         }
 
-        /* NEW: Class for the solid color title bar within each card */
-        .section-title-gradient-bar { 
-            background-color: var(--background-secondary) !important; /* Solid warm peach/cream */
-            padding: 1.25rem 1.75rem !important; /* Inner padding for the title bar */
-            border-top-left-radius: 10px !important; /* Match parent's border radius */
+        .section-title-gradient-bar {
+            background-color: var(--background-secondary) !important;
+            padding: 1.25rem 1.75rem !important;
+            border-top-left-radius: 10px !important;
             border-top-right-radius: 10px !important;
-            margin-bottom: 0.3rem !important; /* Adjusted from 1rem to reduce space below title bar */
-            text-align: center !important; /* Ensure content inside this bar is centered */
-            box-sizing: border-box; /* Include padding in width */
-            width: 100%; /* Ensure it spans full width */
+            margin-bottom: 0 !important;
+            text-align: center !important;
+            box-sizing: border-box;
+            width: 100%;
         }
 
-        /* Section titles (h3 inside markdown) */
         .section-title {
             font-family: 'Poppins', sans-serif !important;
-            font-size: 1.7rem !important; /* Slightly larger */
-            font-weight: 700 !important; /* Bolder */
+            font-size: 1.7rem !important;
+            font-weight: 700 !important;
             color: var(--text-primary) !important;
-            margin: 0 !important; /* No margin on h3 itself as parent handles spacing */
-            padding-bottom: 0.1rem !important; /* REDUCED further to bring text closer to border */
-            border-bottom: 2px solid var(--border-color) !important; /* Underline effect */
-            line-height: 1.1 !important; /* Ensure line height does not add extra space */
-            display: inline-block !important; /* Allow centering within text-align: center of parent */
-            text-align: center !important; /* Fallback centering */
+            margin: 0 !important;
+            padding-bottom: 0 !important;
+            border-bottom: 2px solid var(--border-color) !important;
+            line-height: 1.1 !important;
+            display: inline-block !important;
+            text-align: center !important;
             letter-spacing: -0.01em !important;
         }
-        
-        /* General content area padding within dashboard sections (below the title bar) */
+
         .dashboard-card-content-area {
-            padding: 0 1.75rem 1.75rem 1.75rem !important; /* Match overall padding, 0 top because title bar handles it */
-            background-color: var(--background-primary) !important; /* Pure white background */
-            box-sizing: border-box; /* Include padding in width */
-            width: 100%; /* Ensure it spans full width */
+            padding: 0 1.75rem 1.75rem 1.75rem !important;
+            background-color: var(--background-primary) !important;
+            box-sizing: border-box;
+            width: 100%;
         }
+
         .dashboard-card-section p {
             line-height: 1.7 !important;
             color: var(--text-primary) !important;
             font-size: 1rem !important;
-            text-align: left !important; /* Ensure content text is left-aligned */
-            background-color: transparent !important; /* Ensure p tags don't have unexpected backgrounds */
-            margin: 0 !important; /* Remove default paragraph margins */
-            padding: 0 !important; /* Remove default paragraph padding */
-            white-space: normal !important; /* Ensure text wraps */
+            text-align: left !important;
+            background-color: transparent !important;
+            margin: 0 !important;
+            padding: 0 !important;
+            white-space: normal !important;
         }
+
         .dashboard-card-section strong, .dashboard-card-section b {
-            font-weight: 700 !important; /* Ensure bold is actually bold */
-            color: var(--primary-color) !important; /* Highlight strong text with primary color */
+            font-weight: 700 !important;
+            color: var(--primary-color) !important;
         }
 
-        /* Aggressive Overrides for all Gradio internal containers and text blocks */
-        /* These ensure transparency or explicit primary background for common Gradio elements */
         .gr-block, .gr-box, .gr-prose, .gr-form, .gr-panel,
-        .gr-columns, .gr-column, /* Ensure columns themselves are transparent */
+        .gr-columns, .gr-column,
         .gradio-html, .gradio-markdown, .gradio-textbox, .gradio-radio, .gradio-button {
-            background-color: transparent !important; /* Force transparent or specific primary background */
-            color: var(--text-primary) !important; /* Ensure text color is consistent */
-            white-space: normal !important; /* Allow text to wrap */
+            background-color: transparent !important;
+            color: var(--text-primary) !important;
+            white-space: normal !important;
             overflow-wrap: break-word;
             word-break: break-word;
         }
-        /* Specific elements that MUST have background-primary to look white/clean */
+
         .gradio-textbox textarea,
         .gradio-textbox input,
         .gradio-radio label,
         .placeholder {
-            background-color: var(--background-primary) !important; /* These are input/output content areas */
+            background-color: var(--background-primary) !important;
         }
 
-
-        /* Improved input styling with clear boundaries and focus */
         .gradio-textbox {
             margin-bottom: 0.5rem !important;
         }
-        /* Target the actual input elements for background color */
+
         .gradio-textbox textarea,
         .gradio-textbox input {
-            border: 2px solid var(--border-color) !important; /* Clear border */
+            border: 2px solid var(--border-color) !important;
             border-radius: 8px !important;
-            padding: 0.85rem 1rem !important; /* Slightly more padding */
+            padding: 0.85rem 1rem !important;
             font-size: 0.98rem !important;
             font-family: 'Inter', sans-serif !important;
-            color: var(--text-primary) !important; /* Text color inside inputs */
-            transition: border-color 0.2s ease, box-shadow 0.2s ease !important; /* Smooth transitions */
+            color: var(--text-primary) !important;
+            transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
             box-shadow: var(--shadow-sm) !important;
         }
-        /* Target the internal scrollable div within gradio-textbox */
+
         .gradio-textbox .scroll-hide {
-            background-color: var(--background-primary) !important; /* Ensure scrollable area is white */
+            background-color: var(--background-primary) !important;
         }
-        /* Focus styles for textboxes */
+
         .gradio-textbox textarea:focus,
         .gradio-textbox input:focus {
             outline: none !important;
-            border-color: var(--border-focus) !important; /* Distinct border on focus */
-            box-shadow: 0 0 0 4px rgba(255, 140, 0, 0.2) !important; /* Broader, softer glow on focus */
+            border-color: var(--border-focus) !important;
+            box-shadow: 0 0 0 4px rgba(255, 140, 0, 0.2) !important;
         }
 
-        /* Styling for the radio button group (state selection) */
         .gradio-radio {
-            padding: 0 !important; /* Remove any default padding */
-            margin-top: 1rem !important; /* Add a little space above */
+            padding: 0 !important;
+            margin-top: 1rem !important;
         }
-        /* Hide default radio circle/dot */
+
         .gradio-radio input[type="radio"] {
             display: none !important;
         }
 
         .gradio-radio label {
-            /* Style the clickable area for each radio option */
-            display: flex !important; /* Use flexbox for internal alignment */
-            justify-content: center !important; /* Center content horizontally */
+            display: flex !important;
+            justify-content: center !important;
             align-items: center !important;
             padding: 0.75rem 1rem !important;
             border: 2px solid var(--border-color) !important;
             border-radius: 8px !important;
-            /* background-color: var(--background-primary) !important; Set in general rule for input types */
             color: var(--text-primary) !important;
             font-weight: 500 !important;
             cursor: pointer !important;
             transition: all 0.2s ease-out !important;
             box-shadow: var(--shadow-sm) !important;
-            margin: 0.2rem 0 !important; /* Increased vertical margin between options */
-            width: 100% !important; /* Ensure options take full width of their column */
-            box-sizing: border-box !important; /* Include padding/border in width */
+            margin: 0.2rem 0 !important;
+            width: 100 !important;
+            box-sizing: border-box !important;
         }
 
-        /* Style the text/content within the radio label */
-        .gradio-radio label span.text-lg { /* Gradio uses text-lg for the label text by default */
-            font-weight: 600 !important; /* Make text bold */
+        .gradio-radio label span.text-lg {
+            font-weight: 600 !important;
             color: var(--text-primary) !important;
-            font-size: 0.98rem !important; /* Match input text size */
+            font-size: 0.98rem !important;
         }
 
-        /* Hover effect for radio options */
         .gradio-radio label:hover {
-            background-color: var(--background-secondary) !important; /* Slightly darker cream on hover */
-            border-color: var(--primary-color) !important; /* Highlight border with primary color */
+            background-color: var(--background-secondary) !important;
+            border-color: var(--primary-color) !important;
             box-shadow: var(--shadow-md) !important;
             transform: translateY(-2px) !important;
         }
 
-        /* Selected state for radio options */
-        .gradio-radio input[type="radio"]:checked + label { /* Target label when its radio input is checked */
-            background-color: var(--primary-color) !important; /* Primary color for selected item */
-            color: white !important; /* White text on selected */
+        .gradio-radio input[type="radio"]:checked + label {
+            background-color: var(--primary-color) !important;
+            color: white !important;
             border-color: var(--primary-hover) !important;
             box-shadow: var(--shadow-md) !important;
             transform: translateY(-1px) !important;
         }
+
         .gradio-radio input[type="radio"]:checked + label span.text-lg {
-            color: white !important; /* Ensure text is white when selected */
+            color: white !important;
         }
-        /* Gradio's internal wrapper for radio buttons, ensure it doesn't add unwanted padding */
+
         .gradio-radio .gr-form {
             padding: 0 !important;
         }
 
-
-        /* Label styling for better readability (for Query, State labels) */
         .gradio-textbox label,
-        .gradio-radio > label { /* Target the main label for the radio group */
-            font-weight: 600 !important; /* Bolder labels */
+        .gradio-radio > label {
+            font-weight: 600 !important;
             color: var(--text-primary) !important;
             font-size: 1rem !important;
             margin-bottom: 0.6rem !important;
             display: block !important;
-            text-align: left !important; /* Ensure these labels are left-aligned */
+            text-align: left !important;
         }
-        /* Info text styling below inputs (e.g., for API Key) */
-        /* Specifically target gr-prose if it is the direct child of a gr.Block or gr.Group */
-        .gr-prose { 
+
+        .gr-prose {
             font-size: 0.9rem !important;
             color: var(--text-secondary) !important;
-            margin-top: 0.4rem !important; /* More space for info text */
-            text-align: left !important; /* Ensure info text is left aligned */
-            background-color: transparent !important; /* Ensure no unwanted background */
+            margin-top: 0.4rem !important;
+            text-align: left !important;
+            background-color: transparent !important;
         }
-        /* Input column layout improvements */
-        .input-column { /* Renamed from .input-row */
+
+        .input-column {
             display: flex !important;
-            flex-direction: column !important; /* Stack items vertically */
-            gap: 1.25rem !important; /* Consistent gap between query and state input */
+            flex-direction: column !important;
+            gap: 1.25rem !important;
             margin-bottom: 0.5rem !important;
         }
+
         .input-field {
-            flex: none !important; /* Remove flex sizing as items are stacked */
-            width: 100% !important; /* Ensure each field takes full width */
+            flex: none !important;
+            width: 100% !important;
         }
 
-        /* Button styling improvements with active state for dynamism */
         .button-row {
             display: flex !important;
             gap: 1rem !important;
-            justify-content: flex-end !important; /* Align buttons to the right */
-            margin-top: 1.5rem !important; /* More space above buttons */
+            justify-content: flex-end !important;
+            margin-top: 1.5rem !important;
         }
+
         .gradio-button {
-            padding: 0.85rem 1.8rem !important; /* More padding for bigger buttons */
-            border-radius: 9px !important; /* Slightly more rounded */
-            font-weight: 600 !important; /* Bolder text */
+            padding: 0.85rem 1.8rem !important;
+            border-radius: 9px !important;
+            font-weight: 600 !important;
             font-size: 1rem !important;
-            transition: all 0.2s ease-out !important; /* Smooth transition for hover/active */
+            transition: all 0.2s ease-out !important;
             cursor: pointer !important;
             border: 2px solid transparent !important;
-            text-align: center !important; /* Ensure button text is centered */
+            text-align: center !important;
         }
+
         .gr-button-primary {
-            background-color: var(--primary-color) !important; /* Explicitly set background */
+            background-color: var(--primary-color) !important;
             color: white !important;
             box-shadow: var(--shadow-sm) !important;
         }
+
         .gr-button-primary:hover {
-            background-color: var(--primary-hover) !important; /* Explicitly set background */
+            background-color: var(--primary-hover) !important;
             box-shadow: var(--shadow-md) !important;
-            transform: translateY(-2px) !important; /* Subtle lift effect on hover */
+            transform: translateY(-2px) !important;
         }
-        .gr-button-primary:active { /* Press down effect on click */
+
+        .gr-button-primary:active {
             transform: translateY(1px) !important;
             box-shadow: none !important;
         }
+
         .gr-button-secondary {
-            background-color: transparent !important; /* Explicitly set background */
+            background-color: transparent !important;
             color: var(--text-primary) !important;
             border-color: var(--border-color) !important;
         }
+
         .gr-button-secondary:hover {
-            background-color: var(--background-secondary) !important; /* Explicitly set background */
+            background-color: var(--background-secondary) !important;
             border-color: var(--primary-color) !important;
             transform: translateY(-2px) !important;
         }
-        .gr-button-secondary:active { /* Press down effect on click */
+
+        .gr-button-secondary:active {
             transform: translateY(1px) !important;
             box-shadow: none !important;
         }
 
-        /* Output styling with clear boundaries and dynamic fade-in */
         .output-content-wrapper {
-            background-color: var(--background-primary) !important; /* Explicitly set background */
-            border: 2px solid var(--border-color) !important; /* Clear border */
+            background-color: var(--background-primary) !important;
+            border: 2px solid var(--border-color) !important;
             border-radius: 8px !important;
             padding: 1.5rem !important;
-            min-height: 150px !important; /* More space for output */
+            min-height: 150px !important;
             color: var(--text-primary) !important;
-            /* Ensure the inner animated content fits well */
             display: flex;
             flex-direction: column;
-            justify-content: center; /* Center content vertically if small */
-            align-items: center; /* Center content horizontally if small */
+            justify-content: center;
+            align-items: center;
         }
-        /* The div holding the actual response content, enabling fade-in animation */
+
         .animated-output-content {
             opacity: 0;
-            animation: fadeInAndSlideUp 0.7s ease-out forwards; /* More pronounced animation */
-            width: 100%; /* Take full width of parent */
-            /* Preserve formatting within the animated content */
+            animation: fadeInAndSlideUp 0.7s ease-out forwards;
+            width: 100%;
             white-space: pre-wrap;
             overflow-wrap: break-word;
             word-break: break-word;
-            text-align: left !important; /* Ensure text is left-aligned within this div */
+            text-align: left !important;
         }
+
         @keyframes fadeInAndSlideUp {
             from { opacity: 0; transform: translateY(15px); }
             to { opacity: 1; transform: translateY(0); }
@@ -730,27 +684,29 @@ Answer:"""
         .response-header {
             font-size: 1.3rem !important;
             font-weight: 700 !important;
-            color: var(--primary-color) !important; /* Matches primary color */
+            color: var(--primary-color) !important;
             margin-bottom: 0.75rem !important;
             display: flex !important;
             align-items: center !important;
             gap: 0.6rem !important;
-            text-align: left !important; /* Ensure header itself is not affected by parent centering */
-            width: 100%; /* Take full width */
-            justify-content: flex-start; /* Align content to the start */
+            text-align: left !important;
+            width: 100%;
+            justify-content: flex-start;
         }
+
         .response-icon {
             font-size: 1.5rem !important;
             color: var(--primary-color) !important;
         }
+
         .divider {
             border: none !important;
-            border-top: 1px dashed var(--border-color) !important; /* Dashed divider for visual separation */
+            border-top: 1px dashed var(--border-color) !important;
             margin: 1rem 0 !important;
         }
-        /* Error message styling */
+
         .error-message {
-            background-color: var(--error-bg) !important; /* Explicitly set background */
+            background-color: var(--error-bg) !important;
             border: 2px solid var(--error-border) !important;
             color: var(--error-text) !important;
             padding: 1.25rem !important;
@@ -761,110 +717,118 @@ Answer:"""
             font-size: 0.95rem !important;
             font-weight: 500 !important;
             line-height: 1.6 !important;
-            text-align: left !important; /* Ensure error message text is left aligned */
-            width: 100%; /* Take full width of parent */
-            box-sizing: border-box; /* Include padding/border in width */
+            text-align: left !important;
+            width: 100%;
+            box-sizing: border-box;
         }
+
         .error-message a {
             color: var(--error-text) !important;
             text-decoration: underline !important;
         }
+
         .error-icon {
             font-size: 1.4rem !important;
             line-height: 1 !important;
             margin-top: 0.1rem !important;
         }
+
         .error-details {
             font-size: 0.85rem !important;
             color: var(--error-text) !important;
             margin-top: 0.5rem !important;
             opacity: 0.8;
         }
-        /* Placeholder styling for empty output */
+
         .placeholder {
-            background-color: var(--background-primary) !important; /* Explicitly set background to primary white */
+            background-color: var(--background-primary) !important;
             border: 2px dashed var(--border-color) !important;
             border-radius: 8px !important;
             padding: 2.5rem 1.5rem !important;
-            text-align: center !important; /* Ensure placeholder text is centered */
+            text-align: center !important;
             color: var(--text-secondary) !important;
             font-style: italic !important;
             font-size: 1.1rem !important;
-            width: 100%; /* Ensure it takes full width of parent */
-            box-sizing: border-box; /* Include padding/border in width */
+            width: 100%;
+            box-sizing: border-box;
         }
 
-        /* Examples table styling with dynamic hover */
         .examples-section .gr-samples-table {
             border: 2px solid var(--border-color) !important;
             border-radius: 8px !important;
             overflow: hidden !important;
             margin-top: 1rem !important;
         }
+
         .examples-section .gr-samples-table th,
         .examples-section .gr-samples-table td {
             padding: 0.9rem !important;
             border: none !important;
             font-size: 0.95rem !important;
-            text-align: left !important; /* Ensure example text is left-aligned */
+            text-align: left !important;
         }
+
         .examples-section .gr-samples-table th {
-            background-color: var(--background-secondary) !important; /* Explicitly set background */
+            background-color: var(--background-secondary) !important;
             font-weight: 700 !important;
             color: var(--text-primary) !important;
         }
+
         .examples-section .gr-samples-table td {
-            background-color: var(--background-primary) !important; /* Explicitly set background */
+            background-color: var(--background-primary) !important;
             color: var(--text-primary) !important;
             border-top: 1px solid var(--border-color) !important;
             cursor: pointer !important;
-            transition: background 0.2s ease, transform 0.1s ease !important; /* Smooth transitions */
+            transition: background 0.2s ease, transform 0.1s ease !important;
         }
+
         .examples-section .gr-samples-table tr:hover td {
-            background-color: var(--background-secondary) !important; /* Explicitly set background */
-            transform: translateX(5px); /* Subtle slide on hover */
+            background-color: var(--background-secondary) !important;
+            transform: translateX(5px);
         }
-        /* Hide Gradio default elements for examples for cleaner look */
+
         .gr-examples .gr-label,
         .gr-examples .label-wrap,
         .gr-examples .gr-accordion-header {
             display: none !important;
         }
-        
-        /* Footer styling - centered text */
+
         .app-footer-wrapper {
-            background: linear-gradient(145deg, var(--background-primary) 0%, var(--background-secondary) 100%) !important; /* Gradient background */
+            background: linear-gradient(145deg, var(--background-primary) 0%, var(--background-secondary) 100%) !important;
             border: 2px solid var(--border-color) !important;
             border-radius: 12px !important;
             padding: 1.75rem !important;
             margin-top: 1.5rem !important;
-            margin-bottom: 1.5rem !important; /* Ensures space at the very bottom before the container padding */
-            text-align: center !important; /* Centered footer text */
+            margin-bottom: 1.5rem !important;
+            text-align: center !important;
         }
+
         .app-footer p {
-            margin: 0.6rem auto !important; /* Auto margins to center block */
-            max-width: 90% !important; /* Constrain width for wrapping */
+            margin: 0 !important; /* Removed margin to eliminate gap between paragraphs */
+            max-width: 90% !important;
             font-size: 0.95rem !important;
             color: var(--text-secondary) !important;
             line-height: 1.6 !important;
-            background-color: transparent !important; /* Ensure paragraph in footer does not get unexpected background */
-            text-align: center !important; /* Ensure footer text is centered */
-            white-space: normal !important; /* Allow text to wrap */
+            background-color: transparent !important;
+            text-align: center !important;
+            white-space: normal !important;
         }
+
         .app-footer strong, .app-footer b {
-            font-weight: 700 !important; /* Ensure bold is actually bold */
-            color: var(--primary-color) !important; /* Highlight strong text with primary color */
+            font-weight: 700 !important;
+            color: var(--primary-color) !important;
         }
+
         .app-footer a {
             color: var(--primary-color) !important;
-            text-decoration: underline !important; /* Ensure links are underlined */
+            text-decoration: underline !important;
             font-weight: 600 !important;
         }
+
         .app-footer a:hover {
-            text-decoration: none !important; /* Remove underline on hover for subtle effect */
+            text-decoration: none !important;
         }
 
-        /* Responsive design for smaller screens */
         @media (max-width: 768px) {
             .gradio-container {
                 padding: 1rem !important;
@@ -878,17 +842,16 @@ Answer:"""
             .section-title {
                 font-size: 1.4rem !important;
             }
-            .input-column { /* Apply vertical stacking for columns */
-                flex-direction: column !important; 
+            .input-column {
+                flex-direction: column !important;
             }
             .button-row {
-                flex-direction: column !important; /* Stack buttons vertically */
+                flex-direction: column !important;
             }
             .gradio-button {
-                width: 100% !important; /* Full width buttons */
+                width: 100% !important;
             }
             .dashboard-card-section {
-                /* padding handled by section-title-gradient-bar and dashboard-card-content-area */
             }
             .section-title-gradient-bar {
                 padding: 0.1rem 1rem !important;
@@ -906,9 +869,7 @@ Answer:"""
         }
         """
 
-        # Using gr.Blocks with custom CSS only to ensure no undesired colors are inherited from a theme.
         with gr.Blocks(css=custom_css, title="Landlord-Tenant Rights Assistant") as demo:
-            # Header Section - uses gr.Group for distinct card-like styling
             with gr.Group(elem_classes="app-header-wrapper"):
                 gr.Markdown(
                     """
@@ -919,15 +880,11 @@ Answer:"""
                     elem_classes="full-width-center"
                 )
 
-            # Main Dashboard Container - acts as a column to stack various sections
             with gr.Column(elem_classes="main-dashboard-container"):
-
-                # How This Assistant Works Box (formerly Welcome & Disclaimer)
+                # How This Assistant Works Box
                 with gr.Group(elem_classes="dashboard-card-section"):
-                    # Title bar with solid warm peach/cream background
                     gr.Markdown("<h3 class='section-title'>How This Assistant Works</h3>", elem_classes="full-width-center section-title-gradient-bar")
-                    # Content area with pure primary background
-                    with gr.Column(elem_classes="dashboard-card-content-area"): # New wrapper for content area
+                    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.
@@ -936,79 +893,69 @@ Answer:"""
 
                 # OpenAI API Key Input Card
                 with gr.Group(elem_classes="dashboard-card-section"):
-                    # Title bar with solid warm peach/cream background
                     gr.Markdown("<h3 class='section-title'>OpenAI API Key</h3>", elem_classes="full-width-center section-title-gradient-bar")
-                    # Content area with pure primary background
-                    with gr.Column(elem_classes="dashboard-card-content-area"): # New wrapper for content area
+                    with gr.Column(elem_classes="dashboard-card-content-area"):
                         api_key_input = gr.Textbox(
                             label="API Key",
-                            type="password", # Hides the input for security
+                            type="password",
                             placeholder="Enter your OpenAI API key (e.g., sk-...)",
                             lines=1,
-                            elem_classes=["input-field-group"] # Custom class for input styling
+                            elem_classes=["input-field-group"]
                         )
-                        # Separate Markdown for the clickable info link, using standard Markdown link syntax
                         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" # Reuse Gradio's info text class for styling
+                            elem_classes="gr-prose"
                         )
 
                 # Query Input and State Selection Card
                 with gr.Group(elem_classes="dashboard-card-section"):
-                    # Title bar with solid warm peach/cream background
                     gr.Markdown("<h3 class='section-title'>Ask Your Question</h3>", elem_classes="full-width-center section-title-gradient-bar")
-                    # Content area with pure primary background
-                    with gr.Column(elem_classes="dashboard-card-content-area"): # New wrapper for content area
-                        with gr.Column(elem_classes="input-column"): # Column to stack inputs
-                            with gr.Column(elem_classes="input-field", scale=1): # Query box takes full width
+                    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, # Increased default height
-                                    max_lines=15, # Increased max height
+                                    lines=8,
+                                    max_lines=15,
                                     elem_classes=["input-field-group"]
                                 )
-                            with gr.Column(elem_classes="input-field", scale=1): # State radio buttons take full width below
+                            with gr.Column(elem_classes="input-field", scale=1):
                                 state_input = gr.Radio(
                                     label="Select State",
                                     choices=radio_choices,
-                                    value=initial_value_radio, # Set initial value to None
-                                    elem_classes=["input-field-group", "gradio-radio-custom"], # Added custom class for specific styling
-                                    interactive=True # Ensure it's interactive
+                                    value=initial_value_radio,
+                                    elem_classes=["input-field-group", "gradio-radio-custom"],
+                                    interactive=True
                                 )
-                        
-                        with gr.Row(elem_classes="button-row"): # Row for action buttons
+                        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 - Using gr.HTML for better animation control
+                # Output Display Card
                 with gr.Group(elem_classes="dashboard-card-section"):
-                    # Title bar with solid warm peach/cream background
                     gr.Markdown("<h3 class='section-title'>Legal Assistant's Response</h3>", elem_classes="full-width-center section-title-gradient-bar")
-                    # Content area with pure primary background
-                    with gr.Column(elem_classes="dashboard-card-content-area"): # New wrapper for content area
-                        output = gr.HTML( # Changed to gr.HTML to wrap content with animation class
+                    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" # Custom class for output styling
+                            elem_classes="output-content-wrapper"
                         )
 
                 # Example Questions Section
                 with gr.Group(elem_classes="dashboard-card-section examples-section"):
-                    # Title bar with solid warm peach/cream background
                     gr.Markdown("<h3 class='section-title'>Example Questions</h3>", elem_classes="full-width-center section-title-gradient-bar")
-                    # Content area with pure primary background
-                    with gr.Column(elem_classes="dashboard-card-content-area"): # New wrapper for content area
+                    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="" # Hide default Gradio label for examples to use our custom title
+                                label=""
                             )
                         else:
                             gr.Markdown("<div class='placeholder'>Sample questions could not be loaded. Please ensure the vector database is populated.</div>")
 
-            # Footer Section - contains disclaimer and developer info (now including the full disclaimer)
+            # Footer Section
             with gr.Group(elem_classes="app-footer-wrapper"):
                 gr.Markdown(
                     f"""
@@ -1019,26 +966,21 @@ Answer:"""
                             text-decoration: underline;
                         }}
                     </style>
-                    <p>**Disclaimer:** 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 **Nischal Subedi**. Connect on <a href="https://www.linkedin.com/in/nischal1/" target="_blank" class="custom-link" style="font-weight: bold !important; color: orange !important;">LinkedIn</a> or explore insights at <a href="https://datascientistinsights.substack.com/" target="_blank" class="custom-link" style="font-weight: bold !important; color: orange !important;">Substack</a>.</p>
+                    <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>
                     """
                 )
 
-
-            # Event Listeners for buttons
             submit_button.click(
                 fn=query_interface_wrapper,
                 inputs=[api_key_input, query_input, state_input],
                 outputs=output,
-                api_name="submit_query" # Useful for debugging / external calls
+                api_name="submit_query"
             )
             
             clear_button.click(
                 fn=lambda: (
-                    "", # Clear API key input
-                    "", # Clear query input
-                    initial_value_radio, # Reset state radio to default (None)
-                    "<div class='placeholder'>Inputs cleared. Ready for your next question.</div>" # Reset output message
+                    "", "", initial_value_radio, "<div class='placeholder'>Inputs cleared. Ready for your next question.</div>"
                 ),
                 inputs=[],
                 outputs=[api_key_input, query_input, state_input, output]