UI update

app.py

@@ -244,781 +244,781 @@ Answer:"""
 
     # --- GRADIO INTERFACE (NEW UI DESIGN) ---
     def gradio_interface(self):
-    def query_interface_wrapper(api_key: str, query: str, state: str) -> str:
-        # Basic client-side validation for immediate feedback (redundant but good UX)
-        if not api_key or not api_key.strip() or not api_key.startswith("sk-"):
-            return "<div class='error-message'><span class='error-icon'></span>Please provide a valid OpenAI API key (starting with 'sk-'). <a href='https://platform.openai.com/api-keys' target='_blank'>OpenAI</a>.</div>"
-        if not state or state is None:
-            return "<div class='error-message'><span class='error-icon'></span>Please select a valid state from the list.</div>"
-        if not query or not query.strip():
-            return "<div class='error-message'><span class='error-icon'></span>Please enter your question in the text box.</div>"
-
-        # Call the core processing logic
-        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>")
+        def query_interface_wrapper(api_key: str, query: str, state: str) -> str:
+            # Basic client-side validation for immediate feedback (redundant but good UX)
+            if not api_key or not api_key.strip() or not api_key.startswith("sk-"):
+                return "<div class='error-message'><span class='error-icon'></span>Please provide a valid OpenAI API key (starting with 'sk-'). <a href='https://platform.openai.com/api-keys' target='_blank'>OpenAI</a>.</div>"
+            if not state or state is None:
+                return "<div class='error-message'><span class='error-icon'></span>Please select a valid state from the list.</div>"
+            if not query or not query.strip():
+                return "<div class='error-message'><span class='error-icon'></span>Please enter your question in the text box.</div>"
+
+            # Call the core processing logic
+            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
+            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}"
+                return f"<div class='animated-output-content'>{formatted_response_content}</div>"
 
-        # Check if the answer already contains an error message
-        if "<div class='error-message'>" in answer:
-            return answer
+        try:
+            available_states_list = self.get_states()
+            print(f"DEBUG: States loaded for selection: {available_states_list}")
+            radio_choices = available_states_list if available_states_list and "Error" not in available_states_list[0] else ["Error: States unavailable"]
+            initial_value_radio = None
+        except Exception as e:
+            print(f"DEBUG: Error loading states for selection: {e}")
+            radio_choices = ["Error: Critical failure loading states"]
+            initial_value_radio = None
+        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 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)
+            example_queries = [ex for ex in example_queries_base if ex[1] in loaded_states_set]
+            if not example_queries:
+                example_queries.append(["What basic rights do tenants have?", available_states_list[0] if available_states_list else "California"])
         else:
-            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>"
+            example_queries.append(["What basic rights do tenants have?", "California"])
+
+        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 (light mode) */
+        :root {
+            --primary-color: #FF8C00;
+            --primary-hover: #E07B00;
+            --background-primary: hsl(30, 100%, 99.9%);
+            --background-secondary: hsl(30, 100%, 96%);
+            --text-primary: #4A3C32;
+            --text-secondary: #8C7B6F;
+            --border-color: hsl(30, 70%, 85%);
+            --border-focus: #FF8C00;
+            --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
+            --shadow-md: 0 4px 10px rgba(0,0,0,0.1);
+            --shadow-lg: 0 10px 20px rgba(0,0,0,0.15);
+            --error-bg: #FFF0E0;
+            --error-border: #FFD2B2;
+            --error-text: #E05C00;
+        }
+        
+        /* Dark mode variables */
+        @media (prefers-color-scheme: dark) {
+            body {
+                --primary-color: #FFA500;
+                --primary-hover: #CC8400;
+                --background-primary: #2C2C2C;
+                --background-secondary: #1F1F1F;
+                --text-primary: #F0F0F0;
+                --text-secondary: #B0B0B0;
+                --border-color: #555555;
+                --border-focus: #FFA500;
+                --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
+                --shadow-md: 0 4px 10px rgba(0,0,0,0.4);
+                --shadow-lg: 0 10px 20px rgba(0,0,0,0.5);
+                --error-bg: #400000;
+                --error-border: #800000;
+                --error-text: #FF6666;
+            }
+        }
+        
+        body, html {
+            background-color: var(--background-secondary) !important;
+            color: var(--text-primary) !important;
+            transition: background-color 0.3s, color 0.3s;
+        }
 
-    try:
-        available_states_list = self.get_states()
-        print(f"DEBUG: States loaded for selection: {available_states_list}")
-        radio_choices = available_states_list if available_states_list and "Error" not in available_states_list[0] else ["Error: States unavailable"]
-        initial_value_radio = None
-    except Exception as e:
-        print(f"DEBUG: Error loading states for selection: {e}")
-        radio_choices = ["Error: Critical failure loading states"]
-        initial_value_radio = None
-    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 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)
-        example_queries = [ex for ex in example_queries_base if ex[1] in loaded_states_set]
-        if not example_queries:
-            example_queries.append(["What basic rights do tenants have?", available_states_list[0] if available_states_list else "California"])
-    else:
-        example_queries.append(["What basic rights do tenants have?", "California"])
-
-    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 (light mode) */
-    :root {
-        --primary-color: #FF8C00;
-        --primary-hover: #E07B00;
-        --background-primary: hsl(30, 100%, 99.9%);
-        --background-secondary: hsl(30, 100%, 96%);
-        --text-primary: #4A3C32;
-        --text-secondary: #8C7B6F;
-        --border-color: hsl(30, 70%, 85%);
-        --border-focus: #FF8C00;
-        --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
-        --shadow-md: 0 4px 10px rgba(0,0,0,0.1);
-        --shadow-lg: 0 10px 20px rgba(0,0,0,0.15);
-        --error-bg: #FFF0E0;
-        --error-border: #FFD2B2;
-        --error-text: #E05C00;
-    }
-    
-    /* Dark mode variables */
-    @media (prefers-color-scheme: dark) {
-        body {
-            --primary-color: #FFA500;
-            --primary-hover: #CC8400;
-            --background-primary: #2C2C2C;
-            --background-secondary: #1F1F1F;
-            --text-primary: #F0F0F0;
-            --text-secondary: #B0B0B0;
-            --border-color: #555555;
-            --border-focus: #FFA500;
-            --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
-            --shadow-md: 0 4px 10px rgba(0,0,0,0.4);
-            --shadow-lg: 0 10px 20px rgba(0,0,0,0.5);
-            --error-bg: #400000;
-            --error-border: #800000;
-            --error-text: #FF6666;
-        }
-    }
-    
-    body, html {
-        background-color: var(--background-secondary) !important;
-        color: var(--text-primary) !important;
-        transition: background-color 0.3s, color 0.3s;
-    }
-
-    .gradio-container {
-        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;
-        box-shadow: none !important;
-        color: var(--text-primary) !important;
-    }
-
-    .main-dashboard-container > * {
-        background-color: var(--background-primary) !important;
-    }
-
-    .app-header-wrapper {
-        background: linear-gradient(145deg, var(--background-primary) 0%, var(--background-secondary) 100%) !important;
-        border: 2px solid var(--border-color) !important;
-        border-radius: 16px !important;
-        padding: 2.5rem 1.5rem !important;
-        margin-bottom: 1.5rem !important;
-        box-shadow: var(--shadow-md) !important;
-        position: relative;
-        overflow: hidden;
-        text-align: center !important;
-        color: var(--text-primary) !important;
-    }
-
-    .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%), 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;
-        margin-bottom: 0.75rem !important;
-        display: block !important;
-        color: var(--primary-color) !important;
-        position: relative;
-        z-index: 1;
-        animation: float-icon 3s ease-in-out infinite alternate;
-    }
-
-    @keyframes float-icon {
-        0% { transform: translateY(0px); }
-        50% { transform: translateY(-5px); }
-        100% { transform: translateY(0px); }
-    }
-
-    .app-header-title {
-        font-family: 'Poppins', sans-serif !important;
-        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;
-        position: relative;
-        z-index: 1;
-        display: inline-block;
-        max-width: 100%;
-    }
-
-    .app-header-tagline {
-        font-size: 1.25rem !important;
-        color: var(--text-secondary) !important;
-        font-weight: 400 !important;
-        margin: 0 !important;
-        max-width: 700px;
-        display: inline-block;
-        position: relative;
-        z-index: 1;
-    }
-
-    .main-dashboard-container {
-        display: flex !important;
-        flex-direction: column !important;
-        gap: 1.25rem !important;
-    }
-
-    .dashboard-card-section {
-        background-color: var(--background-primary) !important;
-        border: 2px solid var(--border-color) !important;
-        border-radius: 12px !important;
-        padding: 0 !important;
-        box-shadow: var(--shadow-sm) !important;
-        transition: all 0.3s ease-out !important;
-        cursor: default;
-        color: var(--text-primary) !important;
-    }
-
-    .dashboard-card-section:hover {
-        box-shadow: var(--shadow-md) !important;
-        transform: translateY(-3px) !important;
-    }
-
-    .full-width-center {
-        display: flex !important;
-        justify-content: center !important;
-        align-items: center !important;
-        width: 100% !important;
-        flex-direction: column !important;
-        background-color: transparent !important;
-    }
-
-    .section-title-gradient-bar {
-        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 !important;
-        text-align: center !important;
-        box-sizing: border-box;
-        width: 100%;
-        color: var(--text-primary) !important;
-    }
-
-    .section-title {
-        font-family: 'Poppins', sans-serif !important;
-        font-size: 1.7rem !important;
-        font-weight: 700 !important;
-        color: var(--text-primary) !important;
-        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;
-    }
-
-    .dashboard-card-content-area {
-        padding: 0 1.75rem 1.75rem 1.75rem !important;
-        background-color: var(--background-primary) !important;
-        box-sizing: border-box;
-        width: 100%;
-        color: var(--text-primary) !important;
-    }
-
-    .dashboard-card-section p {
-        line-height: 1.7 !important;
-        color: var(--text-primary) !important;
-        font-size: 1rem !important;
-        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;
-        color: var(--primary-color) !important;
-    }
-
-    .gr-block, .gr-box, .gr-prose, .gr-form, .gr-panel,
-    .gr-columns, .gr-column,
-    .gradio-html, .gradio-markdown, .gradio-textbox, .gradio-radio, .gradio-button {
-        background-color: transparent !important;
-        color: var(--text-primary) !important;
-        white-space: normal !important;
-        overflow-wrap: break-word;
-        word-break: break-word;
-    }
-
-    .gradio-textbox textarea,
-    .gradio-textbox input,
-    .gradio-radio label,
-    .placeholder {
-        background-color: var(--background-primary) !important;
-        color: var(--text-primary) !important;
-    }
-
-    .gradio-textbox {
-        margin-bottom: 0.5rem !important;
-    }
-
-    .gradio-textbox textarea,
-    .gradio-textbox input {
-        border: 2px solid var(--border-color) !important;
-        border-radius: 8px !important;
-        padding: 0.85rem 1rem !important;
-        font-size: 0.98rem !important;
-        font-family: 'Inter', sans-serif !important;
-        color: var(--text-primary) !important;
-        transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
-        box-shadow: var(--shadow-sm) !important;
-    }
-
-    .gradio-textbox .scroll-hide {
-        background-color: var(--background-primary) !important;
-    }
-
-    .gradio-textbox textarea:focus,
-    .gradio-textbox input:focus {
-        outline: none !important;
-        border-color: var(--border-focus) !important;
-        box-shadow: 0 0 0 4px rgba(255, 140, 0, 0.2) !important;
-    }
-
-    .gradio-radio {
-        padding: 0 !important;
-        margin-top: 1rem !important;
-    }
-
-    .gradio-radio input[type="radio"] {
-        display: none !important;
-    }
-
-    .gradio-radio label {
-        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;
-        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;
-        width: 100 !important;
-        box-sizing: border-box !important;
-    }
-
-    .gradio-radio label span.text-lg {
-        font-weight: 600 !important;
-        color: var(--text-primary) !important;
-        font-size: 0.98rem !important;
-    }
-
-    .gradio-radio label:hover {
-        background-color: var(--background-secondary) !important;
-        border-color: var(--primary-color) !important;
-        box-shadow: var(--shadow-md) !important;
-        transform: translateY(-2px) !important;
-    }
-
-    .gradio-radio input[type="radio"]:checked + label {
-        background-color: var(--primary-color) !important;
-        color: var(--text-primary) !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: var(--text-primary) !important;
-    }
-
-    .gradio-radio .gr-form {
-        padding: 0 !important;
-    }
-
-    .gradio-textbox label,
-    .gradio-radio > label {
-        font-weight: 600 !important;
-        color: var(--text-primary) !important;
-        font-size: 1rem !important;
-        margin-bottom: 0.6rem !important;
-        display: block !important;
-        text-align: left !important;
-    }
-
-    .gr-prose {
-        font-size: 0.9rem !important;
-        color: var(--text-secondary) !important;
-        margin-top: 0.4rem !important;
-        text-align: left !important;
-        background-color: transparent !important;
-    }
-
-    .input-column {
-        display: flex !important;
-        flex-direction: column !important;
-        gap: 1.25rem !important;
-        margin-bottom: 0.5rem !important;
-    }
-
-    .input-field {
-        flex: none !important;
-        width: 100% !important;
-    }
-
-    .button-row {
-        display: flex !important;
-        gap: 1rem !important;
-        justify-content: flex-end !important;
-        margin-top: 1.5rem !important;
-    }
-
-    .gradio-button {
-        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;
-        cursor: pointer !important;
-        border: 2px solid transparent !important;
-        text-align: center !important;
-        color: var(--text-primary) !important;
-    }
-
-    .gr-button-primary {
-        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;
-        box-shadow: var(--shadow-md) !important;
-        transform: translateY(-2px) !important;
-    }
-
-    .gr-button-primary:active {
-        transform: translateY(1px) !important;
-        box-shadow: none !important;
-    }
-
-    .gr-button-secondary {
-        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;
-        border-color: var(--primary-color) !important;
-        transform: translateY(-2px) !important;
-    }
-
-    .gr-button-secondary:active {
-        transform: translateY(1px) !important;
-        box-shadow: none !important;
-    }
-
-    .output-content-wrapper {
-        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;
-        color: var(--text-primary) !important;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-    }
-
-    .animated-output-content {
-        opacity: 0;
-        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;
-        color: var(--text-primary) !important;
-    }
-
-    @keyframes fadeInAndSlideUp {
-        from { opacity: 0; transform: translateY(15px); }
-        to { opacity: 1; transform: translateY(0); }
-    }
-
-    .response-header {
-        font-size: 1.3rem !important;
-        font-weight: 700 !important;
-        color: var(--primary-color) !important;
-        margin-bottom: 0.75rem !important;
-        display: flex !important;
-        align-items: center !important;
-        gap: 0.6rem !important;
-        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;
-        margin: 1rem 0 !important;
-    }
-
-    .error-message {
-        background-color: var(--error-bg) !important;
-        border: 2px solid var(--error-border) !important;
-        color: var(--error-text) !important;
-        padding: 1.25rem !important;
-        border-radius: 8px !important;
-        display: flex !important;
-        align-items: flex-start !important;
-        gap: 0.8rem !important;
-        font-size: 0.95rem !important;
-        font-weight: 500 !important;
-        line-height: 1.6 !important;
-        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 {
-        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;
-        color: var(--text-secondary) !important;
-        font-style: italic !important;
-        font-size: 1.1rem !important;
-        width: 100%;
-        box-sizing: border-box;
-    }
-
-    .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;
-        color: var(--text-primary) !important;
-    }
-
-    .examples-section .gr-samples-table th {
-        background-color: var(--background-secondary) !important;
-        font-weight: 700 !important;
-        color: var(--text-primary) !important;
-    }
-
-    .examples-section .gr-samples-table td {
-        background-color: var(--background-primary) !important;
-        color: var(--text-primary) !important;
-        border-top: 1px solid var(--border-color) !important;
-        cursor: pointer !important;
-        transition: background 0.2s ease, transform 0.1s ease !important;
-    }
-
-    .examples-section .gr-samples-table tr:hover td {
-        background-color: var(--background-secondary) !important;
-        transform: translateX(5px);
-    }
-
-    .gr-examples .gr-label,
-    .gr-examples .label-wrap,
-    .gr-examples .gr-accordion-header {
-        display: none !important;
-    }
-
-    .app-footer-wrapper {
-        background: linear-gradient(145deg, var(--background-primary) 0%, var(--background-secondary) 100%) !important;
-        border: 2px solid var(--border-color) !important;
-        border-radius: 12px !important;
-        padding: 1.75rem !important;
-        margin-top: 1.5rem !important;
-        margin-bottom: 1.5rem !important;
-        text-align: center !important;
-        color: var(--text-primary) !important;
-    }
-
-    .app-footer p {
-        margin: 0 !important;
-        max-width: 90% !important;
-        font-size: 0.95rem !important;
-        color: var(--text-secondary) !important;
-        line-height: 1.6 !important;
-        background-color: transparent !important;
-        text-align: center !important;
-        white-space: normal !important;
-    }
-
-    .app-footer strong, .app-footer b {
-        font-weight: 700 !important;
-        color: var(--primary-color) !important;
-    }
-
-    .app-footer a {
-        color: var(--primary-color) !important;
-        text-decoration: underline !important;
-        font-weight: 600 !important;
-    }
-
-    .app-footer a:hover {
-        text-decoration: none !important;
-    }
-
-    @media (max-width: 768px) {
         .gradio-container {
-            padding: 1rem !important;
+            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;
+            box-shadow: none !important;
+            color: var(--text-primary) !important;
+        }
+
+        .main-dashboard-container > * {
+            background-color: var(--background-primary) !important;
+        }
+
+        .app-header-wrapper {
+            background: linear-gradient(145deg, var(--background-primary) 0%, var(--background-secondary) 100%) !important;
+            border: 2px solid var(--border-color) !important;
+            border-radius: 16px !important;
+            padding: 2.5rem 1.5rem !important;
+            margin-bottom: 1.5rem !important;
+            box-shadow: var(--shadow-md) !important;
+            position: relative;
+            overflow: hidden;
+            text-align: center !important;
+            color: var(--text-primary) !important;
+        }
+
+        .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%), 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;
+            margin-bottom: 0.75rem !important;
+            display: block !important;
+            color: var(--primary-color) !important;
+            position: relative;
+            z-index: 1;
+            animation: float-icon 3s ease-in-out infinite alternate;
+        }
+
+        @keyframes float-icon {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-5px); }
+            100% { transform: translateY(0px); }
         }
+
         .app-header-title {
-            font-size: 2.2rem !important;
+            font-family: 'Poppins', sans-serif !important;
+            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;
+            position: relative;
+            z-index: 1;
+            display: inline-block;
+            max-width: 100%;
         }
+
         .app-header-tagline {
-            font-size: 1rem !important;
+            font-size: 1.25rem !important;
+            color: var(--text-secondary) !important;
+            font-weight: 400 !important;
+            margin: 0 !important;
+            max-width: 700px;
+            display: inline-block;
+            position: relative;
+            z-index: 1;
+        }
+
+        .main-dashboard-container {
+            display: flex !important;
+            flex-direction: column !important;
+            gap: 1.25rem !important;
+        }
+
+        .dashboard-card-section {
+            background-color: var(--background-primary) !important;
+            border: 2px solid var(--border-color) !important;
+            border-radius: 12px !important;
+            padding: 0 !important;
+            box-shadow: var(--shadow-sm) !important;
+            transition: all 0.3s ease-out !important;
+            cursor: default;
+            color: var(--text-primary) !important;
+        }
+
+        .dashboard-card-section:hover {
+            box-shadow: var(--shadow-md) !important;
+            transform: translateY(-3px) !important;
+        }
+
+        .full-width-center {
+            display: flex !important;
+            justify-content: center !important;
+            align-items: center !important;
+            width: 100% !important;
+            flex-direction: column !important;
+            background-color: transparent !important;
+        }
+
+        .section-title-gradient-bar {
+            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 !important;
+            text-align: center !important;
+            box-sizing: border-box;
+            width: 100%;
+            color: var(--text-primary) !important;
         }
+
         .section-title {
-            font-size: 1.4rem !important;
+            font-family: 'Poppins', sans-serif !important;
+            font-size: 1.7rem !important;
+            font-weight: 700 !important;
+            color: var(--text-primary) !important;
+            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;
+        }
+
+        .dashboard-card-content-area {
+            padding: 0 1.75rem 1.75rem 1.75rem !important;
+            background-color: var(--background-primary) !important;
+            box-sizing: border-box;
+            width: 100%;
+            color: var(--text-primary) !important;
+        }
+
+        .dashboard-card-section p {
+            line-height: 1.7 !important;
+            color: var(--text-primary) !important;
+            font-size: 1rem !important;
+            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;
+            color: var(--primary-color) !important;
+        }
+
+        .gr-block, .gr-box, .gr-prose, .gr-form, .gr-panel,
+        .gr-columns, .gr-column,
+        .gradio-html, .gradio-markdown, .gradio-textbox, .gradio-radio, .gradio-button {
+            background-color: transparent !important;
+            color: var(--text-primary) !important;
+            white-space: normal !important;
+            overflow-wrap: break-word;
+            word-break: break-word;
+        }
+
+        .gradio-textbox textarea,
+        .gradio-textbox input,
+        .gradio-radio label,
+        .placeholder {
+            background-color: var(--background-primary) !important;
+            color: var(--text-primary) !important;
+        }
+
+        .gradio-textbox {
+            margin-bottom: 0.5rem !important;
+        }
+
+        .gradio-textbox textarea,
+        .gradio-textbox input {
+            border: 2px solid var(--border-color) !important;
+            border-radius: 8px !important;
+            padding: 0.85rem 1rem !important;
+            font-size: 0.98rem !important;
+            font-family: 'Inter', sans-serif !important;
+            color: var(--text-primary) !important;
+            transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
+            box-shadow: var(--shadow-sm) !important;
+        }
+
+        .gradio-textbox .scroll-hide {
+            background-color: var(--background-primary) !important;
+        }
+
+        .gradio-textbox textarea:focus,
+        .gradio-textbox input:focus {
+            outline: none !important;
+            border-color: var(--border-focus) !important;
+            box-shadow: 0 0 0 4px rgba(255, 140, 0, 0.2) !important;
+        }
+
+        .gradio-radio {
+            padding: 0 !important;
+            margin-top: 1rem !important;
+        }
+
+        .gradio-radio input[type="radio"] {
+            display: none !important;
+        }
+
+        .gradio-radio label {
+            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;
+            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;
+            width: 100 !important;
+            box-sizing: border-box !important;
+        }
+
+        .gradio-radio label span.text-lg {
+            font-weight: 600 !important;
+            color: var(--text-primary) !important;
+            font-size: 0.98rem !important;
+        }
+
+        .gradio-radio label:hover {
+            background-color: var(--background-secondary) !important;
+            border-color: var(--primary-color) !important;
+            box-shadow: var(--shadow-md) !important;
+            transform: translateY(-2px) !important;
+        }
+
+        .gradio-radio input[type="radio"]:checked + label {
+            background-color: var(--primary-color) !important;
+            color: var(--text-primary) !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: var(--text-primary) !important;
+        }
+
+        .gradio-radio .gr-form {
+            padding: 0 !important;
+        }
+
+        .gradio-textbox label,
+        .gradio-radio > label {
+            font-weight: 600 !important;
+            color: var(--text-primary) !important;
+            font-size: 1rem !important;
+            margin-bottom: 0.6rem !important;
+            display: block !important;
+            text-align: left !important;
         }
+
+        .gr-prose {
+            font-size: 0.9rem !important;
+            color: var(--text-secondary) !important;
+            margin-top: 0.4rem !important;
+            text-align: left !important;
+            background-color: transparent !important;
+        }
+
         .input-column {
+            display: flex !important;
             flex-direction: column !important;
+            gap: 1.25rem !important;
+            margin-bottom: 0.5rem !important;
+        }
+
+        .input-field {
+            flex: none !important;
+            width: 100% !important;
         }
+
         .button-row {
-            flex-direction: column !important;
+            display: flex !important;
+            gap: 1rem !important;
+            justify-content: flex-end !important;
+            margin-top: 1.5rem !important;
         }
+
         .gradio-button {
-            width: 100% !important;
+            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;
+            cursor: pointer !important;
+            border: 2px solid transparent !important;
+            text-align: center !important;
+            color: var(--text-primary) !important;
         }
-        .dashboard-card-section {
+
+        .gr-button-primary {
+            background-color: var(--primary-color) !important;
+            color: white !important;
+            box-shadow: var(--shadow-sm) !important;
         }
-        .section-title-gradient-bar {
-            padding: 0.1rem 1rem !important;
+
+        .gr-button-primary:hover {
+            background-color: var(--primary-hover) !important;
+            box-shadow: var(--shadow-md) !important;
+            transform: translateY(-2px) !important;
         }
-        .dashboard-card-content-area {
-            padding: 0 1rem 1rem 1rem !important;
+
+        .gr-button-primary:active {
+            transform: translateY(1px) !important;
+            box-shadow: none !important;
+        }
+
+        .gr-button-secondary {
+            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;
+            border-color: var(--primary-color) !important;
+            transform: translateY(-2px) !important;
         }
+
+        .gr-button-secondary:active {
+            transform: translateY(1px) !important;
+            box-shadow: none !important;
+        }
+
         .output-content-wrapper {
-            min-height: 120px !important;
+            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;
+            color: var(--text-primary) !important;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .animated-output-content {
+            opacity: 0;
+            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;
+            color: var(--text-primary) !important;
+        }
+
+        @keyframes fadeInAndSlideUp {
+            from { opacity: 0; transform: translateY(15px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+
+        .response-header {
+            font-size: 1.3rem !important;
+            font-weight: 700 !important;
+            color: var(--primary-color) !important;
+            margin-bottom: 0.75rem !important;
+            display: flex !important;
+            align-items: center !important;
+            gap: 0.6rem !important;
+            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;
+            margin: 1rem 0 !important;
+        }
+
+        .error-message {
+            background-color: var(--error-bg) !important;
+            border: 2px solid var(--error-border) !important;
+            color: var(--error-text) !important;
+            padding: 1.25rem !important;
+            border-radius: 8px !important;
+            display: flex !important;
+            align-items: flex-start !important;
+            gap: 0.8rem !important;
+            font-size: 0.95rem !important;
+            font-weight: 500 !important;
+            line-height: 1.6 !important;
+            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 {
-            padding: 1.5rem 1rem !important;
-            font-size: 1rem !important;
+            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;
+            color: var(--text-secondary) !important;
+            font-style: italic !important;
+            font-size: 1.1rem !important;
+            width: 100%;
+            box-sizing: border-box;
         }
-    }
-    """
-
-    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=""
+        .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;
+            color: var(--text-primary) !important;
+        }
+
+        .examples-section .gr-samples-table th {
+            background-color: var(--background-secondary) !important;
+            font-weight: 700 !important;
+            color: var(--text-primary) !important;
+        }
+
+        .examples-section .gr-samples-table td {
+            background-color: var(--background-primary) !important;
+            color: var(--text-primary) !important;
+            border-top: 1px solid var(--border-color) !important;
+            cursor: pointer !important;
+            transition: background 0.2s ease, transform 0.1s ease !important;
+        }
+
+        .examples-section .gr-samples-table tr:hover td {
+            background-color: var(--background-secondary) !important;
+            transform: translateX(5px);
+        }
+
+        .gr-examples .gr-label,
+        .gr-examples .label-wrap,
+        .gr-examples .gr-accordion-header {
+            display: none !important;
+        }
+
+        .app-footer-wrapper {
+            background: linear-gradient(145deg, var(--background-primary) 0%, var(--background-secondary) 100%) !important;
+            border: 2px solid var(--border-color) !important;
+            border-radius: 12px !important;
+            padding: 1.75rem !important;
+            margin-top: 1.5rem !important;
+            margin-bottom: 1.5rem !important;
+            text-align: center !important;
+            color: var(--text-primary) !important;
+        }
+
+        .app-footer p {
+            margin: 0 !important;
+            max-width: 90% !important;
+            font-size: 0.95rem !important;
+            color: var(--text-secondary) !important;
+            line-height: 1.6 !important;
+            background-color: transparent !important;
+            text-align: center !important;
+            white-space: normal !important;
+        }
+
+        .app-footer strong, .app-footer b {
+            font-weight: 700 !important;
+            color: var(--primary-color) !important;
+        }
+
+        .app-footer a {
+            color: var(--primary-color) !important;
+            text-decoration: underline !important;
+            font-weight: 600 !important;
+        }
+
+        .app-footer a:hover {
+            text-decoration: none !important;
+        }
+
+        @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 {
+                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;
+            }
+        }
+        """
+
+        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.
+                            """
                         )
-                    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: orange !important;
-                        text-decoration: underline;
-                    }}
-                </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>
-                """
-            )
 
-        submit_button.click(
-            fn=query_interface_wrapper,
-            inputs=[api_key_input, query_input, state_input],
-            outputs=output,
-            api_name="submit_query"
-        )
-        
-        clear_button.click(
-            fn=lambda: (
-                "", "", initial_value_radio, "<div class='placeholder'>Inputs cleared. Ready for your next question.</div>"
-            ),
-            inputs=[],
-            outputs=[api_key_input, query_input, state_input, output]
-        )
+                # 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=""
+                            )
+                        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: orange !important;
+                            text-decoration: underline;
+                        }}
+                    </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>
+                    """
+                )
+
+            submit_button.click(
+                fn=query_interface_wrapper,
+                inputs=[api_key_input, query_input, state_input],
+                outputs=output,
+                api_name="submit_query"
+            )
+            
+            clear_button.click(
+                fn=lambda: (
+                    "", "", initial_value_radio, "<div class='placeholder'>Inputs cleared. Ready for your next question.</div>"
+                ),
+                inputs=[],
+                outputs=[api_key_input, query_input, state_input, output]
+            )
 
-        return demo
+            return demo
 
 # --- Main Execution Block (UNCHANGED from original logic) ---
 if __name__ == "__main__":