UI v10

app.py

@@ -291,298 +291,381 @@ Answer:"""
         else: # Fallback if states list is problematic
             example_queries.append(["What basic rights do tenants have?", "California"])
 
-
-        # --- Minimal Custom CSS for structural/behavioral overrides not covered by the theme ---
-        # This CSS focuses on animations, specific layout tweaks, and hiding unwanted Gradio default elements.
+        # Improved Custom CSS for better UI design and HuggingFace compatibility
         custom_css = """
-        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@700;800;900&display=swap');
-        /* Animation for header */
-        @keyframes fadeInSlideDown { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: translateY(0); } }
-        /* General layout adjustments to Gradio's base container */
-        .gradio-container > .flex.flex-col {
-            max-width: 1120px;
+        /* Import legible fonts */
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@600;700;800&display=swap');
+        
+        /* Root variables for consistent theming */
+        :root {
+            --primary-color: #2563eb;
+            --primary-hover: #1d4ed8;
+            --background-primary: #ffffff;
+            --background-secondary: #f8fafc;
+            --text-primary: #1e293b;
+            --text-secondary: #64748b;
+            --border-color: #e2e8f0;
+            --border-focus: #2563eb;
+            --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+            --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+            --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+            --error-bg: #fef2f2;
+            --error-border: #fecaca;
+            --error-text: #dc2626;
+        }
+        
+        /* Dark mode variables */
+        @media (prefers-color-scheme: dark) {
+            :root {
+                --background-primary: #0f172a;
+                --background-secondary: #1e293b;
+                --text-primary: #f1f5f9;
+                --text-secondary: #94a3b8;
+                --border-color: #334155;
+                --error-bg: #1e1b1b;
+                --error-border: #451a1a;
+                --error-text: #f87171;
+            }
+        }
+
+        /* Base container improvements */
+        .gradio-container {
+            max-width: 1000px !important;
             margin: 0 auto !important;
-            padding: 0 !important; /* Remove default Gradio padding */
-            gap: 0 !important; /* Remove default Gradio gap */
+            padding: 1rem !important;
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
         }
-        /* Header specific styling */
+
+        /* Header styling */
         .app-header-wrapper {
-            padding: 4.5rem 3.5rem !important;
+            background: linear-gradient(135deg, var(--background-primary) 0%, var(--background-secondary) 100%) !important;
+            border: 2px solid var(--border-color) !important;
+            border-radius: 16px !important;
+            padding: 2rem !important;
+            margin-bottom: 1.5rem !important;
             text-align: center !important;
-            border-bottom-left-radius: 24px;
-            border-bottom-right-radius: 24px;
-            position: relative;
-            overflow: hidden;
-            z-index: 10;
-            margin-bottom: 1.5rem; /* Reduced margin */
-            border: 3px solid var(--border-color-primary) !important; /* Thicker border */
-            border-top: none;
-            max-width: 1120px;
-            margin-left: auto;
-            margin-right: auto;
-            width: 100%;
-            /* Enhanced background */
-            background-image: linear-gradient(135deg, var(--background-fill-primary) 0%, var(--background-fill-secondary) 100%);
-            box-shadow: 0 12px 35px rgba(0,0,0,0.5); /* More pronounced shadow */
-        }
-        .app-header { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; }
+            box-shadow: var(--shadow-md) !important;
+        }
+
         .app-header-logo {
-            font-size: 5.5rem; margin-bottom: 0.8rem; line-height: 1;
-            filter: drop-shadow(0 0 15px var(--primary-500));
-            transform: translateY(-40px); opacity: 0;
-            animation: fadeInSlideDown 1.5s ease-out forwards; animation-delay: 0.3s;
+            font-size: 3rem !important;
+            margin-bottom: 0.5rem !important;
+            display: block !important;
         }
+
         .app-header-title {
-            font-family: 'Playfair Display', serif !important;
-            font-size: 4.2rem; font-weight: 900;
-            margin: 0 0 0.8rem 0; letter-spacing: -0.07em;
-            text-shadow: 0 8px 16px rgba(0,0,0,0.5);
-            transform: translateY(-40px); opacity: 0;
-            animation: fadeInSlideDown 1.5s ease-out forwards; animation-delay: 0.6s;
+            font-family: 'Poppins', sans-serif !important;
+            font-size: 2.5rem !important;
+            font-weight: 700 !important;
+            color: var(--text-primary) !important;
+            margin: 0 0 0.5rem 0 !important;
+            line-height: 1.2 !important;
         }
+
         .app-header-tagline {
-            font-family: 'Inter', sans-serif !important;
-            font-size: 1.6rem; font-weight: 300;
-            opacity: 0.9; max-width: 900px;
-            transform: translateY(-40px); opacity: 0;
-            animation: fadeInSlideDown 1.5s ease-out forwards; animation-delay: 0.9s;
+            font-size: 1.1rem !important;
+            color: var(--text-secondary) !important;
+            font-weight: 400 !important;
+            margin: 0 !important;
         }
-        /* Main dashboard container */
+
+        /* Main container with compact spacing */
         .main-dashboard-container {
-            border-radius: 24px;
-            border: 3px solid var(--border-color-primary) !important; /* Thicker border */
-            padding: 3.5rem !important;
-            margin: 0 auto 0.4rem auto; /* Further reduced margin-bottom */
-            z-index: 1; position: relative;
-            display: flex; flex-direction: column; gap: 1.5rem; /* Further reduced gap between boxes */
-            max-width: 1120px;
-        }
-        /* Card sections within the dashboard */
+            display: flex !important;
+            flex-direction: column !important;
+            gap: 1rem !important; /* Reduced gap for more compact look */
+        }
+
+        /* Card sections with better boundaries */
         .dashboard-card-section {
-            border-radius: 12px;
-            border: 2px solid var(--border-color-primary); /* Keeping at 2px for inner cards, fits better */
-            padding: 2.5rem;
-            box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
-            display: flex; flex-direction: column; gap: 1.5rem;
+            background: var(--background-primary) !important;
+            border: 2px solid var(--border-color) !important;
+            border-radius: 12px !important;
+            padding: 1.5rem !important; /* Reduced padding for compactness */
+            box-shadow: var(--shadow-sm) !important;
+            transition: all 0.2s ease !important;
         }
-        /* Light mode specific inner shadow for card sections */
-        @media (prefers-color-scheme: light) {
-            .dashboard-card-section { box-shadow: inset 0 0 8px rgba(0,0,0,0.05); }
+
+        .dashboard-card-section:hover {
+            box-shadow: var(--shadow-md) !important;
         }
-        /* Section titles */
+
+        /* Centered section titles with better typography */
         .sub-section-title {
-            font-family: 'Playfair Display', serif !important;
-            font-size: 3.2rem !important; /* Increased font size */
-            font-weight: 800 !important;
+            font-family: 'Poppins', sans-serif !important;
+            font-size: 1.5rem !important;
+            font-weight: 600 !important;
+            color: var(--text-primary) !important;
             text-align: center !important;
-            margin-top: 1.5rem !important;
-            margin-bottom: 0.8rem !important;
+            margin: 0 0 1rem 0 !important;
+            padding-bottom: 0.5rem !important;
+            border-bottom: 2px solid var(--border-color) !important;
+            display: block !important;
+        }
+
+        /* Improved input styling with clear boundaries */
+        .gradio-textbox, .gradio-dropdown {
+            margin-bottom: 0.75rem !important; /* Reduced margin for compactness */
+        }
+
+        .gradio-textbox textarea,
+        .gradio-textbox input,
+        .gradio-dropdown select {
+            background: var(--background-primary) !important;
+            border: 2px solid var(--border-color) !important;
+            border-radius: 8px !important;
+            padding: 0.75rem !important;
+            font-size: 0.95rem !important;
+            font-family: 'Inter', sans-serif !important;
+            color: var(--text-primary) !important;
+            transition: all 0.2s ease !important;
+            box-shadow: var(--shadow-sm) !important;
+        }
+
+        .gradio-textbox textarea:focus,
+        .gradio-textbox input:focus,
+        .gradio-dropdown select:focus {
+            outline: none !important;
+            border-color: var(--border-focus) !important;
+            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
+        }
+
+        /* Placeholder text styling */
+        .gradio-textbox textarea::placeholder,
+        .gradio-textbox input::placeholder {
+            color: var(--text-secondary) !important;
+            opacity: 0.7 !important;
+        }
+
+        /* Label styling for better readability */
+        .gradio-textbox label,
+        .gradio-dropdown label {
+            font-weight: 500 !important;
+            color: var(--text-primary) !important;
+            font-size: 0.9rem !important;
+            margin-bottom: 0.5rem !important;
             display: block !important;
-            width: 100% !important;
-        }
-        /* Text styling for custom markdown within cards */
-        .dashboard-card-section p, .output-content-wrapper p {
-            font-size: 1.15rem; line-height: 1.8;
-            margin-bottom: 1.2rem;
-        }
-        .dashboard-card-section a, .output-content-wrapper a {
-            text-decoration: none; font-weight: 500;
-        }
-        .dashboard-card-section a:hover, .output-content-wrapper a:hover { text-decoration: underline; }
-        .dashboard-card-section strong, .output-content-wrapper strong { font-weight: 700; }
-        /* Input layout */
-        .input-field-group { margin-bottom: 1rem; }
-        .input-row { display: flex; gap: 1.8rem; flex-wrap: wrap; margin-bottom: 1rem; }
-        .input-field { flex: 1; }
-        /* Button layout */
-        .button-row { display: flex; gap: 2rem; margin-top: 2rem; flex-wrap: wrap; justify-content: flex-end; }
+        }
+
+        /* Info text styling */
+        .gradio-textbox .gr-form,
+        .gradio-dropdown .gr-form {
+            font-size: 0.85rem !important;
+            color: var(--text-secondary) !important;
+            margin-top: 0.25rem !important;
+        }
+
+        /* Input row layout improvements */
+        .input-row {
+            display: flex !important;
+            gap: 1rem !important;
+            margin-bottom: 0.5rem !important; /* Reduced margin */
+        }
+
+        .input-field {
+            flex: 1 !important;
+        }
+
+        /* Button styling improvements */
+        .button-row {
+            display: flex !important;
+            gap: 1rem !important;
+            justify-content: flex-end !important;
+            margin-top: 1rem !important;
+        }
+
         .gradio-button {
-            border-radius: 12px !important;
-            padding: 1.2rem 2.8rem !important;
-            font-size: 1.15rem !important;
-            font-weight: 600 !important;
-            border: 1px solid transparent !important;
-            box-shadow: 0 6px 20px rgba(0,0,0,0.35);
-            transition: all 0.4s cubic-bezier(0.0, 0.0, 0.2, 1);
+            padding: 0.75rem 1.5rem !important;
+            border-radius: 8px !important;
+            font-weight: 500 !important;
+            font-size: 0.9rem !important;
+            transition: all 0.2s ease !important;
+            cursor: pointer !important;
+            border: 2px solid transparent !important;
+        }
+
+        .gr-button-primary {
+            background: var(--primary-color) !important;
+            color: white !important;
+            box-shadow: var(--shadow-sm) !important;
         }
-        .gradio-button:hover:not(:disabled) { transform: translateY(-6px); box-shadow: 0 12px 28px rgba(0,0,0,0.45) !important; }
-        .gradio-button:active:not(:disabled) { transform: translateY(-3px); }
-        .gradio-button:disabled {
-            box-shadow: none !important;
-            cursor: not-allowed;
+
+        .gr-button-primary:hover {
+            background: var(--primary-hover) !important;
+            box-shadow: var(--shadow-md) !important;
+            transform: translateY(-1px) !important;
         }
-        .gr-button-secondary { /* Override for secondary button specific look */
+
+        .gr-button-secondary {
             background: transparent !important;
-            border: 2px solid var(--neutral-700) !important; /* Made border darker for contrast */
-            box-shadow: none !important;
-        }
-        .gr-button-secondary:hover:not(:disabled) {
-            background: var(--button-secondary-background-hover) !important;
-            border-color: var(--primary-500) !important;
-        }
-        @media (prefers-color-scheme: light) {
-            .gradio-button { box-shadow: 0 6px 20px rgba(0,0,0,0.1); }
-            .gradio-button:hover:not(:disabled) { box-shadow: 0 12px 28px rgba(0,0,0,0.2) !important; }
-        }
-        /* Output card and placeholders */
-        .output-card { padding: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; }
-        .output-card .response-header {
-            font-size: 1.8rem; font-weight: 700;
-            margin: 0 0 1rem 0; display: flex; align-items: center; gap: 1.2rem;
-        }
-        .output-card .response-icon { font-size: 2rem; color: var(--primary-500); }
-        .output-card .divider { border: none; border-top: 1px solid var(--border-color-primary); margin: 1.5rem 0 1.8rem 0; }
-        .output-card .output-content-wrapper { font-size: 1.15rem; line-height: 1.8; }
-        .output-card .output-content-wrapper p { margin-bottom: 1rem; }
-        .output-card .output-content-wrapper ul, .output-card .output-content-wrapper ol { margin-left: 2.2rem; margin-bottom: 1.2rem; padding-left: 0; list-style-type: disc; }
-        .output-card .output-content-wrapper ol { list-style-type: decimal; }
-        .output-card .output-content-wrapper li { margin-bottom: 0.8rem; }
-        .output-card .error-message {
-            padding: 1.5rem 2rem; margin-top: 1.5rem; font-size: 1.1rem;
-            border-radius: 12px;
-            background: var(--error-background-fill) !important;
-            color: var(--error-text-color) !important;
-            border: 2px solid var(--error-border-color) !important;
-            display: flex; align-items: flex-start; gap: 1.5em;
-        }
-        .output-card .error-message .error-icon { font-size: 1.8rem; line-height: 1; padding-top: 0.1em; }
-        .output-card .error-details { font-size: 0.95rem; margin-top: 0.8rem; opacity: 0.9; word-break: break-word; }
-        .output-card .placeholder {
-            padding: 2.5rem 2rem; font-size: 1.2rem; border-radius: 12px;
-            border: 3px dashed var(--border-color-primary);
-            text-align: center; opacity: 0.8;
+            color: var(--text-primary) !important;
+            border-color: var(--border-color) !important;
         }
-        /* Examples table styling */
-        .examples-section table.gr-samples-table {
-            border-radius: 12px !important;
-            border: 2px solid var(--border-color-primary) !important; /* Keeps border at 2px for consistency with other cards */
-            overflow: hidden;
-            box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
+
+        .gr-button-secondary:hover {
+            background: var(--background-secondary) !important;
+            border-color: var(--primary-color) !important;
         }
-        @media (prefers-color-scheme: light) {
-            .examples-section table.gr-samples-table { box-shadow: inset 0 0 8px rgba(0,0,0,0.05); }
+
+        /* Output styling with clear boundaries */
+        .output-content-wrapper {
+            background: var(--background-primary) !important;
+            border: 2px solid var(--border-color) !important;
+            border-radius: 8px !important;
+            padding: 1rem !important;
+            min-height: 100px !important;
+            font-size: 0.95rem !important;
+            line-height: 1.6 !important;
+            color: var(--text-primary) !important;
+        }
+
+        .response-header {
+            font-size: 1.2rem !important;
+            font-weight: 600 !important;
+            color: var(--text-primary) !important;
+            margin-bottom: 0.75rem !important;
+            display: flex !important;
+            align-items: center !important;
+            gap: 0.5rem !important;
         }
-        .examples-section table.gr-samples-table th, .examples-section table.gr-samples-table td { padding: 1rem 1.2rem !important; font-size: 1.05rem !important; border: none !important; }
-        .examples-section table.gr-samples-table th {
-            background: var(--block-background-fill) !important;
-            font-weight: 600 !important; text-align: left;
+
+        .response-icon {
+            font-size: 1.3rem !important;
+            color: var(--primary-color) !important;
         }
-        .examples-section table.gr-samples-table td {
-            border-top: 1px solid var(--border-color-primary) !important;
-            cursor: pointer;
+
+        .divider {
+            border: none !important;
+            border-top: 1px solid var(--border-color) !important;
+            margin: 0.75rem 0 !important;
         }
-        .examples-section table.gr-samples-table tr:hover td { background: var(--hover-color) !important; }
-        .examples-section table.gr-samples-table tr:first-child td { border-top: none !important; }
-        /* Footer styling */
-        .app-footer-wrapper {
-            border-top: 3px solid var(--border-color-primary) !important; /* Thicker border */
-            margin-top: 0.5rem;
-            padding-top: 2.5rem;
-            padding-bottom: 2.5rem;
-            border-top-left-radius: 24px;
-            border-top-right-radius: 24px;
-            box-shadow: inset 0 8px 15px rgba(0,0,0,0.2);
-            max-width: 1120px;
-            margin-left: auto;
-            margin-right: auto;
-            width: 100%;
+
+        /* Error message styling */
+        .error-message {
+            background: var(--error-bg) !important;
+            border: 2px solid var(--error-border) !important;
+            color: var(--error-text) !important;
+            padding: 1rem !important;
+            border-radius: 8px !important;
             display: flex !important;
-            flex-direction: column !important;
             align-items: flex-start !important;
+            gap: 0.75rem !important;
+            font-size: 0.9rem !important;
         }
-        .app-footer {
-            padding: 0 3.5rem !important;
-            display: flex;
-            flex-direction: column;
-            align-items: stretch;
-            width: 100%;
+
+        .error-icon {
+            font-size: 1.2rem !important;
+            line-height: 1 !important;
+            margin-top: 0.1rem !important;
         }
-        .app-footer p {
-            font-size: 1.05rem !important;
-            text-align: left !important; /* Explicitly left-aligned */
-            margin-bottom: 1rem;
+
+        /* Placeholder styling */
+        .placeholder {
+            background: var(--background-secondary) !important;
+            border: 2px dashed var(--border-color) !important;
+            border-radius: 8px !important;
+            padding: 2rem 1rem !important;
+            text-align: center !important;
+            color: var(--text-secondary) !important;
+            font-style: italic !important;
         }
-        .app-footer strong {
-            color: var(--text-color-body) !important; /* Ensure bold text is clearly visible */
+
+        /* Examples table styling */
+        .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.75rem !important;
+            border: none !important;
+            font-size: 0.9rem !important;
         }
+
+        .examples-section .gr-samples-table th {
+            background: var(--background-secondary) !important;
+            font-weight: 600 !important;
+            color: var(--text-primary) !important;
+        }
+
+        .examples-section .gr-samples-table td {
+            background: var(--background-primary) !important;
+            color: var(--text-primary) !important;
+            border-top: 1px solid var(--border-color) !important;
+            cursor: pointer !important;
+        }
+
+        .examples-section .gr-samples-table tr:hover td {
+            background: var(--background-secondary) !important;
+        }
+
+        /* Footer styling */
+        .app-footer-wrapper {
+            background: var(--background-secondary) !important;
+            border: 2px solid var(--border-color) !important;
+            border-radius: 12px !important;
+            padding: 1.5rem !important;
+            margin-top: 1.5rem !important;
+            text-align: center !important;
+        }
+
+        .app-footer p {
+            margin: 0.5rem 0 !important;
+            font-size: 0.9rem !important;
+            color: var(--text-secondary) !important;
+            line-height: 1.5 !important;
+        }
+
         .app-footer a {
-            font-weight: 500;
-            color: var(--primary-500) !important; /* Ensure links are themed and clear */
-            text-decoration: underline; /* Added underline for clarity */
+            color: var(--primary-color) !important;
+            text-decoration: none !important;
+            font-weight: 500 !important;
         }
+
         .app-footer a:hover {
-            text-decoration: none; /* Remove underline on hover */
-        }
-        /* Hide default Gradio example labels and related elements for cleaner presentation */
-        .gr-examples .gr-label, .gr-examples button.gr-button-filter, .gr-examples .label-wrap,
-        .gr-examples div[data-testid*="label-text"], .gr-examples span[data-testid*="label-text"],
-        .gr-examples div[class*="label"], .gr-examples .gr-example-label,
-        .gr-examples .gr-box.gr-component.gradio-example > div:first-child:has(> span[data-testid]),
-        .gr-examples .gr-box.gr-component.gradio-example > div:first-child > span,
-        .gr-examples .gr-accordion-header, .gr-examples .gr-accordion-title, .gr-examples .gr-accordion-toggle-icon,
-        .gr-examples .gr-accordion-header button, .gr-examples .gr-button.gr-button-filter,
-        .gr-examples .gr-button.gr-button-primary.gr-button-filter,
-        .gr-examples .gr-examples-header, .gr-examples .gr-examples-header > * {
-            display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important;
-            overflow: hidden !important; margin: 0 !important; padding: 0 !important; border: 0 !important;
-            font-size: 0 !important; line-height: 0 !important; position: absolute !important;
-            pointer-events: none !important;
-        }
-        /* Responsive Adjustments */
-        @media (max-width: 1024px) {
-            .gradio-container > .flex.flex-col { max-width: 960px; padding: 0 1.5rem !important; }
-            .app-header-title { font-size: 3.8rem; } .app-header-tagline { font-size: 1.5rem; }
-            .app-header-wrapper { padding: 2.5rem 3.5rem !important; margin-bottom: 1.2rem; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; } /* Adjusted margin */
-            .main-dashboard-container { padding: 2.5rem !important; margin-bottom: 0.3rem; border-radius: 12px; gap: 1.2rem; } /* Adjusted gap */
-            .dashboard-card-section { padding: 1.8rem; border-radius: 8px; }
-            .sub-section-title { font-size: 2.8rem !important; margin-bottom: 0.7rem !important; } /* Adjusted font size */
-            .input-row { gap: 1.5rem; } .input-field { min-width: 280px; }
-            .gradio-textbox textarea { min-height: 160px; } .output-card .response-header { font-size: 1.7rem; }
-            .examples-section { padding-top: 1.2rem; }
-            .examples-section table.gr-samples-table th, .examples-section table.gr-samples-table td { padding: 0.9rem 1.1rem !important; }
-            .app-footer-wrapper { margin-top: 0.6rem; border-top-left-radius: 12px; border-top-right-radius: 12px; }
-            .app-footer { padding: 0 1.5rem !important; }
+            text-decoration: underline !important;
         }
+
+        /* Hide Gradio default elements */
+        .gr-examples .gr-label,
+        .gr-examples .label-wrap,
+        .gr-examples .gr-accordion-header {
+            display: none !important;
+        }
+
+        /* Responsive design */
         @media (max-width: 768px) {
-            .gradio-container > .flex.flex-col { padding: 0 1rem !important; }
-            .app-header-wrapper { padding: 1.8rem 2.5rem !important; margin-bottom: 1rem; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; } /* Adjusted margin */
-            .app-header-logo { font-size: 4.5rem; margin-bottom: 0.6rem; } .app-header-title { font-size: 3.2rem; letter-spacing: -0.06em; }
-            .app-header-tagline { font-size: 1.3rem; }
-            .main-dashboard-container { padding: 1.8rem !important; margin-bottom: 0.2rem; border-radius: 12px; gap: 1rem; } /* Adjusted gap */
-            .dashboard-card-section { padding: 1.5rem; border-radius: 8px; }
-            .sub-section-title { font-size: 2.3rem !important; margin-top: 1rem !important; margin-bottom: 0.6rem !important; } /* Adjusted font size */
-            .input-row { flex-direction: column; gap: 1rem; } .input-field { min-width: 100%; }
-            .gradio-textbox textarea { min-height: 140px; } .button-row { justify-content: stretch; gap: 1rem; }
-            .gradio-button { width: 100%; padding: 1.1rem 2rem !important; font-size: 1.1rem !important; }
-            .output-card .response-header { font-size: 1.5rem; } .output-card .response-icon { font-size: 1.7rem; }
-            .output-card .placeholder { padding: 2.5rem 1.5rem; font-size: 1.1rem; }
-            .examples-section { padding-top: 1.2rem; }
-            .examples-section table.gr-samples-table th, .examples-section table.gr-samples-table td { padding: 0.9rem 1.1rem !important; font-size: 1.0rem !important; }
-            .app-footer-wrapper { margin-top: 0.6rem; border-top-left-radius: 12px; border-top-right-radius: 12px; padding-top: 2rem; padding-bottom: 2rem; }
-            .app-footer { padding: 0 1rem !important; }
-        }
-        @media (max-width: 480px) {
-            .gradio-container > .flex.flex-col { padding: 0 0.8rem !important; }
-            .app-header-wrapper { padding: 1.2rem 1rem !important; margin-bottom: 0.8rem; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } /* Adjusted margin */
-            .app-header-logo { font-size: 3.8rem; margin-bottom: 0.5rem; } .app-header-title { font-size: 2.8rem; }
-            .app-header-tagline { font-size: 1.1rem; }
-            .main-dashboard-container { padding: 1.2rem !important; margin-bottom: 0.2rem; border-radius: 8px; gap: 0.8rem; } /* Adjusted gap */
-            .dashboard-card-section { padding: 1rem; border-radius: 4px; }
-            .sub-section-title { font-size: 2.0rem !important; margin-top: 0.8rem !important; margin-bottom: 0.5rem !important; } /* Adjusted font size */
-            .gradio-textbox textarea, .gradio-dropdown select, .gradio-textbox input[type=password] { font-size: 1.05rem !important; padding: 1rem 1.2rem !important; }
-            .gradio-textbox textarea { min-height: 120px; }
-            .gradio-button { padding: 1rem 1.5rem !important; font-size: 1.0rem !important; }
-            .output-card .response-header { font-size: 1.4rem; } .output-card .response-icon { font-size: 1.5rem; }
-            .output-card .placeholder { padding: 2rem 1rem; font-size: 1.05rem; }
-            .examples-section { padding-top: 0.8rem; }
-            .examples-section table.gr-samples-table th, .examples-section table.gr-samples-table td { padding: 0.6rem 0.8rem !important; font-size: 0.95rem !important; }
-            .app-footer-wrapper { margin-top: 0.4rem; border-top-left-radius: 8px; border-top-right-radius: 8px; padding-top: 1.5rem; padding-bottom: 1.5rem; }
-            .app-footer { padding: 0 0.8rem !important; }
+            .gradio-container {
+                padding: 0.5rem !important;
+            }
+            
+            .app-header-title {
+                font-size: 2rem !important;
+            }
+            
+            .app-header-tagline {
+                font-size: 1rem !important;
+            }
+            
+            .input-row {
+                flex-direction: column !important;
+            }
+            
+            .button-row {
+                flex-direction: column !important;
+            }
+            
+            .gradio-button {
+                width: 100% !important;
+            }
         }
         """
 
-        with gr.Blocks(theme="earneleh/paris", css=custom_css, title="Landlord-Tenant Rights Assistant") as demo:
-            # --- Header Section ---
+        with gr.Blocks(theme="soft", css=custom_css, title="Landlord-Tenant Rights Assistant") as demo:
+            # Header Section
             with gr.Group(elem_classes="app-header-wrapper"):
                 gr.Markdown(
                     """
@@ -594,42 +677,49 @@ Answer:"""
                     """
                 )
 
-            # --- Main Dashboard Console Container ---
+            # Main Dashboard Container
             with gr.Column(elem_classes="main-dashboard-container"):
 
-                # --- Section 1: Introduction and Disclaimer Card ---
+                # Introduction and Disclaimer Card
                 with gr.Group(elem_classes="dashboard-card-section"):
                     gr.Markdown("<h3 class='sub-section-title'>Welcome & Disclaimer</h3>")
                     gr.Markdown(
                         """
-                        <p>Navigate landlord-tenant laws with ease. This assistant provides detailed, state-specific answers grounded in legal authority.</p>
-                        <p><strong>Disclaimer:</strong> This tool is for informational purposes only and does not constitute legal advice. For specific legal guidance, always consult a licensed attorney in your jurisdiction.</p>
+                        Navigate landlord-tenant laws with ease. This assistant provides detailed, state-specific answers grounded in legal authority.
+                        
+                        **Disclaimer:** This tool is for informational purposes only and does not constitute legal advice. For specific legal guidance, always consult a licensed attorney in your jurisdiction.
                         """
                     )
 
-                # --- Section 2: OpenAI API Key Input Card ---
+                # OpenAI API Key Input Card
                 with gr.Group(elem_classes="dashboard-card-section"):
                     gr.Markdown("<h3 class='sub-section-title'>OpenAI API Key</h3>")
                     api_key_input = gr.Textbox(
-                        label="OpenAI API Key", # Keep label for theme compatibility
-                        type="password", placeholder="Enter your API key (e.g., sk-...)",
-                        info="Required to process your query. Securely used per request, not stored. <a href='https://platform.openai.com/api-keys' target='_blank'>Get one free from OpenAI</a>.", lines=1,
+                        label="API Key",
+                        type="password", 
+                        placeholder="Enter your API key (e.g., sk-...)",
+                        info="Required to process your query. Get one free from OpenAI.",
+                        lines=1,
                         elem_classes=["input-field-group"]
                     )
 
-                # --- Section 3: Query Input and State Selection Card ---
+                # Query Input and State Selection Card
                 with gr.Group(elem_classes="dashboard-card-section"):
                     gr.Markdown("<h3 class='sub-section-title'>Ask Your Question</h3>")
                     with gr.Row(elem_classes="input-row"):
                         with gr.Column(elem_classes="input-field", scale=3):
                             query_input = gr.Textbox(
-                                label="Question", placeholder="E.g., What are the rules for security deposit returns in my state?",
-                                lines=5, max_lines=10,
+                                label="Your Question",
+                                placeholder="E.g., What are the rules for security deposit returns in my state?",
+                                lines=4,
+                                max_lines=8,
                                 elem_classes=["input-field-group"]
                             )
                         with gr.Column(elem_classes="input-field", scale=1):
                             state_input = gr.Dropdown(
-                                label="Select State", choices=dropdown_choices, value=initial_value,
+                                label="Select State",
+                                choices=dropdown_choices,
+                                value=initial_value,
                                 allow_custom_value=False,
                                 elem_classes=["input-field-group"]
                             )
@@ -637,53 +727,56 @@ Answer:"""
                         clear_button = gr.Button("Clear", variant="secondary", elem_classes=["gr-button-secondary"])
                         submit_button = gr.Button("Submit Query", variant="primary", elem_classes=["gr-button-primary"])
 
-                # --- Section 4: Output Display Card ---
+                # Output Display Card
                 with gr.Group(elem_classes="dashboard-card-section"):
                     gr.Markdown("<h3 class='sub-section-title'>Legal Assistant's Response</h3>")
                     output = gr.Markdown(
-                        value="<div class='placeholder output-card'>The answer will appear here after submitting your query.</div>",
-                        elem_classes="output-content-wrapper output-card"
+                        value="<div class='placeholder'>The answer will appear here after submitting your query.</div>",
+                        elem_classes="output-content-wrapper"
                     )
 
-                # --- Section 5: Example Questions Section ---
+                # Example Questions Section
                 with gr.Group(elem_classes="dashboard-card-section examples-section"):
-                    gr.Markdown("<h3 class='sub-section-title'>Example Questions to Ask</h3>")
+                    gr.Markdown("<h3 class='sub-section-title'>Example Questions</h3>")
                     if example_queries:
                         gr.Examples(
-                            examples=example_queries, inputs=[query_input, state_input],
+                            examples=example_queries,
+                            inputs=[query_input, state_input],
                             examples_per_page=5,
-                            label="" # Hide default Examples label
+                            label=""
                         )
                     else:
                         gr.Markdown("<div class='placeholder'>Sample questions could not be loaded.</div>")
 
-            # --- Footer Section ---
+            # Footer Section
             with gr.Group(elem_classes="app-footer-wrapper"):
                 gr.Markdown(
                     """
-                    <div class="app-footer">
-                        <p>This tool is for informational purposes only and does not constitute legal advice. For legal guidance, always consult with a licensed attorney in your jurisdiction.</p>
-                        <p>Developed by <strong>Nischal Subedi</strong>.
-                        Connect on <a href="https://www.linkedin.com/in/nischal1/" target='_blank'>LinkedIn</a>
-                        or explore insights at <a href="https://datascientistinsights.substack.com/" target='_blank'>Substack</a>.</p>
-                    </div>
+                    This tool is for informational purposes only and does not constitute legal advice. For legal guidance, always consult with a licensed attorney in your jurisdiction.
+
+                    Developed by **Nischal Subedi**. Connect on [LinkedIn](https://www.linkedin.com/in/nischal1/) or explore insights at [Substack](https://datascientistinsights.substack.com/).
                     """
                 )
 
-            # --- Event Listeners (Logic remains identical) ---
+            # Event Listeners
             submit_button.click(
-                fn=query_interface_wrapper, inputs=[api_key_input, query_input, state_input], outputs=output, api_name="submit_query"
+                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,
-                    "<div class='placeholder output-card'>Inputs cleared. Ready for your next question.</div>"
+                    "<div class='placeholder'>Inputs cleared. Ready for your next question.</div>"
                 ),
-                inputs=[], outputs=[api_key_input, query_input, state_input, output]
+                inputs=[],
+                outputs=[api_key_input, query_input, state_input, output]
             )
-            logging.info("Gradio interface created with earneleh/paris theme and refined custom CSS.")
+
             return demo
 
 # --- Main Execution Block (remains untouched from original logic, just fixed the exit) ---