updated UI v2

app.py

@@ -5,6 +5,8 @@ from functools import lru_cache
 import re
 
 import gradio as gr
+import gradio.themes as themes # Import gradio.themes
+
 try:
     # Assuming vector_db.py exists in the same directory or is installed
     from vector_db import VectorDatabase
@@ -239,7 +241,7 @@ Answer:"""
             logging.error(f"Failed to load or process PDF '{pdf_path}': {str(e)}", exc_info=True)
             raise RuntimeError(f"Failed to process PDF '{pdf_path}': {e}") from e
 
-    # --- GRADIO INTERFACE (Complete Overhaul for Cohesion, Legibility, and Advanced Look) ---
+    # --- GRADIO INTERFACE (Refactored to use earneleh/paris theme) ---
     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)
@@ -290,363 +292,227 @@ Answer:"""
             example_queries.append(["What basic rights do tenants have?", "California"])
 
 
-        # --- Custom CSS for "Legal Noir" Theme (Dark Mode First) ---
+        # --- 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.
         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');
-        :root {
-            /* Dark Theme Colors (Default: Legal Noir) */
-            --app-bg-dark: #0F0F1A;
-            --header-bg-dark: #1A1A2B;
-            --main-card-bg-dark: #1E1E30;
-            --card-section-bg-dark: #2A2A40;
-            --text-primary-dark: #EAEAF0;
-            --text-secondary-dark: #A0A0B0;
-            --accent-main-dark: #FFC107; /* Goldenrod/Amber */
-            --accent-hover-dark: #E0A800; /* Darker Goldenrod */
-            --border-dark: #3F3F5A;
-            --shadow-dark: 0 1.2rem 3.5rem rgba(0,0,0,0.6);
-            --focus-ring-dark: rgba(255, 193, 7, 0.4);
-            --error-bg-dark: #4D001A;
-            --error-text-dark: #FFB3C2;
-            --error-border-dark: #990026;
-            /* Light Theme Colors (Alternative: Legal Lumen) */
-            --app-bg-light: #F0F2F5;
-            --header-bg-light: #E0E4EB;
-            --main-card-bg-light: #FFFFFF;
-            --card-section-bg-light: #F8F9FA;
-            --text-primary-light: #212529;
-            --text-secondary-light: #6C757D;
-            --accent-main-light: #007bff; /* Standard Blue */
-            --accent-hover-light: #0056b3; /* Darker Blue */
-            --border-light: #DDE2E8;
-            --shadow-light: 0 0.8rem 2.5rem rgba(0,0,0,0.15);
-            --focus-ring-light: rgba(0, 123, 255, 0.3);
-            --error-bg-light: #F8D7DA;
-            --error-text-light: #721C24;
-            --error-border-light: #F5C6CB;
-            /* General Styling Variables */
-            --font-family-main: 'Inter', sans-serif;
-            --font-family-header: 'Playfair Display', serif;
-            --radius-xs: 4px;
-            --radius-sm: 8px;
-            --radius-md: 12px;
-            --radius-lg: 24px;
-            --transition-speed: 0.4s ease-in-out;
-            --padding-xl: 4.5rem;
-            --padding-lg: 3.5rem;
-            --padding-md: 2.5rem;
-            --padding-sm: 1.8rem;
-        }
-        body, .gradio-container {
-            font-family: var(--font-family-main) !important;
-            background: var(--app-bg-dark) !important;
-            color: var(--text-primary-dark) !important;
-            margin: 0; padding: 0; min-height: 100vh; font-size: 16px;
-            line-height: 1.75; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-            transition: background var(--transition-speed), color var(--transition-speed);
-        }
-        * { box-sizing: border-box; }
-        @media (prefers-color-scheme: light) {
-            body, .gradio-container { background: var(--app-bg-light) !important; color: var(--text-primary-light) !important; }
-        }
+
+        /* 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; margin: 0 auto !important; padding: 0 !important;
-            gap: 0 !important; transition: padding var(--transition-speed);
+            max-width: 1120px;
+            margin: 0 auto !important;
+            padding: 0 !important; /* Remove default Gradio padding */
+            gap: 0 !important; /* Remove default Gradio gap */
         }
+
+        /* Header specific styling */
         .app-header-wrapper {
-            background: var(--header-bg-dark); color: var(--text-primary-dark) !important;
-            padding: var(--padding-xl) var(--padding-lg) !important; text-align: center !important;
-            border-bottom-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg);
-            box-shadow: var(--shadow-dark); position: relative; overflow: hidden; z-index: 10;
-            transition: background var(--transition-speed), box-shadow var(--transition-speed);
-            margin-bottom: 2.5rem; border: 1px solid var(--border-dark); border-top: none;
-            max-width: 1120px; margin-left: auto; margin-right: auto; width: 100%;
-        }
-        @media (prefers-color-scheme: light) {
-            .app-header-wrapper { background: var(--header-bg-light); color: var(--text-primary-light) !important; box-shadow: var(--shadow-light); border: 1px solid var(--border-light); border-top: none; }
+            padding: 4.5rem 3.5rem !important; /* Use hardcoded padding to override theme potentially */
+            text-align: center !important;
+            border-bottom-left-radius: 24px; /* Use hardcoded radius */
+            border-bottom-right-radius: 24px;
+            position: relative;
+            overflow: hidden;
+            z-index: 10;
+            margin-bottom: 2.5rem; /* Use hardcoded margin */
+            border: 1px solid var(--border-color-primary) !important;
+            border-top: none;
+            max-width: 1120px;
+            margin-left: auto;
+            margin-right: auto;
+            width: 100%;
         }
         .app-header { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; }
         .app-header-logo {
             font-size: 5.5rem; margin-bottom: 0.8rem; line-height: 1;
-            filter: drop-shadow(0 0 15px var(--accent-main-dark));
+            filter: drop-shadow(0 0 15px var(--primary-500)); /* Using primary color from theme */
             transform: translateY(-40px); opacity: 0;
             animation: fadeInSlideDown 1.5s ease-out forwards; animation-delay: 0.3s;
-            transition: filter var(--transition-speed);
         }
-        @media (prefers-color-scheme: light) { .app-header-logo { filter: drop-shadow(0 0 10px var(--accent-main-light)); } }
         .app-header-title {
-            font-family: var(--font-family-header) !important; font-size: 4.2rem; font-weight: 900;
+            font-family: 'Playfair Display', serif !important; /* Explicit font family */
+            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;
-            transition: text-shadow var(--transition-speed), color var(--transition-speed);
         }
-        @media (prefers-color-scheme: light) { .app-header-title { text-shadow: 0 6px 12px rgba(0,0,0,0.25); } }
         .app-header-tagline {
-            font-family: var(--font-family-main) !important; font-size: 1.6rem; font-weight: 300;
+            font-family: 'Inter', sans-serif !important; /* Explicit font family */
+            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;
-            transition: opacity var(--transition-speed);
         }
-        @keyframes fadeInSlideDown { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: translateY(0); } }
+
+        /* Main dashboard container */
         .main-dashboard-container {
-            background: var(--main-card-bg-dark) !important; border-radius: var(--radius-lg);
-            box-shadow: var(--shadow-dark); border: 1px solid var(--border-dark) !important;
-            padding: var(--padding-lg) !important; margin: 0 auto 0.8rem auto;
+            border-radius: 24px; /* Use hardcoded radius */
+            border: 1px solid var(--border-color-primary) !important;
+            padding: 3.5rem !important; /* Use hardcoded padding */
+            margin: 0 auto 0.8rem auto;
             z-index: 1; position: relative;
-            transition: background var(--transition-speed), border-color var(--transition-speed), box-shadow var(--transition-speed);
-            display: flex; flex-direction: column; gap: 2.5rem; max-width: 1120px;
-        }
-        @media (prefers-color-scheme: light) {
-            .main-dashboard-container { background: var(--main-card-bg-light) !important; box-shadow: var(--shadow-light); border: 1px solid var(--border-light) !important; }
+            display: flex; flex-direction: column; gap: 2.5rem; /* Use hardcoded gap */
+            max-width: 1120px;
         }
+
+        /* Card sections within the dashboard */
         .dashboard-card-section {
-            background: var(--card-section-bg-dark) !important; border-radius: var(--radius-md);
-            border: 1px solid var(--border-dark); padding: var(--padding-md);
+            border-radius: 12px; /* Use hardcoded radius */
+            border: 1px solid var(--border-color-primary);
+            padding: 2.5rem; /* Use hardcoded padding */
             box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
-            transition: background var(--transition-speed), border-color var(--transition-speed), box-shadow var(--transition-speed);
             display: flex; flex-direction: column; gap: 1.5rem;
         }
+        /* Light mode specific inner shadow for card sections */
         @media (prefers-color-scheme: light) {
-            .dashboard-card-section { background: var(--card-section-bg-light) !important; border: 1px solid var(--border-light); box-shadow: inset 0 0 8px rgba(0,0,0,0.05); }
-        }
-        .section-title {
-            font-family: var(--font-family-header) !important; font-size: 2.8rem !important; font-weight: 800 !important;
-            color: var(--text-primary-dark) !important; text-align: center !important;
-            margin: 0 auto 1.8rem auto !important; padding-bottom: 0.8rem !important;
-            border-bottom: 2px solid var(--border-dark) !important; width: 100%;
-            transition: color var(--transition-speed), border-color var(--transition-speed);
+            .dashboard-card-section { box-shadow: inset 0 0 8px rgba(0,0,0,0.05); }
         }
+
+        /* Section titles */
         .sub-section-title {
-            font-family: var(--font-family-header) !important;
-            font-size: 2.7rem !important; /* Slightly increased for more prominence */
-            font-weight: 800 !important; /* Increased font weight for more visual emphasis */
-            color: var(--text-primary-dark) !important;
+            font-family: 'Playfair Display', serif !important;
+            font-size: 2.7rem !important;
+            font-weight: 800 !important;
             text-align: center !important;
             margin-top: 1.5rem !important;
             margin-bottom: 0.8rem !important;
-            transition: color var(--transition-speed);
-            display: block !important; /* Ensure it's a block element */
-            width: 100% !important;   /* Ensure it takes full width for centering */
-        }
-        @media (prefers-color-scheme: light) {
-            .section-title, .sub-section-title { color: var(--text-primary-light) !important; border-bottom-color: var(--border-light) !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; color: var(--text-secondary-dark);
-            margin-bottom: 1.2rem; transition: color var(--transition-speed);
+            font-size: 1.15rem; line-height: 1.8;
+            margin-bottom: 1.2rem;
         }
         .dashboard-card-section a, .output-content-wrapper a {
-            color: var(--accent-main-dark); text-decoration: none; font-weight: 500;
-            transition: color var(--transition-speed), text-decoration var(--transition-speed);
+            text-decoration: none; font-weight: 500;
         }
-        .dashboard-card-section a:hover, .output-content-wrapper a:hover { color: var(--accent-hover-dark); text-decoration: underline; }
-        .dashboard-card-section strong, .output-content-wrapper strong { font-weight: 700; color: var(--text-primary-dark); transition: color var(--transition-speed); }
-        @media (prefers-color-scheme: light) {
-            .dashboard-card-section p, .output-content-wrapper p { color: var(--text-secondary-light); }
-            .dashboard-card-section a, .output-content-wrapper a { color: var(--accent-main-light); }
-            .dashboard-card-section a:hover, .output-content-wrapper a:hover { color: var(--accent-hover-light); }
-            .dashboard-card-section strong, .output-content-wrapper strong { color: var(--text-primary-light); }
-        }
-        .section-divider { border: none; border-top: 1px solid var(--border-dark); margin: 2rem 0 !important; transition: border-color var(--transition-speed); }
-        @media (prefers-color-scheme: light) { .section-divider { border-top: 1px solid var(--border-light); } }
+        .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; }
-        .gradio-input-label {
-            font-size: 1.2rem !important; font-weight: 500 !important; color: var(--text-primary-dark) !important;
-            margin-bottom: 0.8rem !important; display: block !important; transition: color var(--transition-speed);
-        }
-        .gradio-input-info { font-size: 1.0rem !important; color: var(--text-secondary-dark) !important; margin-top: 0.6rem; transition: color var(--transition-speed); }
-        @media (prefers-color-scheme: light) {
-            .gradio-input-label { color: var(--text-primary-light) !important; }
-            .gradio-input-info { color: var(--text-secondary-light) !important; }
-        }
-        .gradio-textbox textarea, .gradio-dropdown select, .gradio-textbox input[type=password] {
-            border: 2px solid var(--border-dark) !important; border-radius: var(--radius-md) !important;
-            padding: 1.3rem 1.6rem !important; font-size: 1.15rem !important;
-            background: var(--main-card-bg-dark) !important; color: var(--text-primary-dark) !important;
-            width: 100% !important; box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
-            transition: border-color var(--transition-speed), box-shadow var(--transition-speed), background var(--transition-speed), color var(--transition-speed);
-        }
-        .gradio-textbox textarea { min-height: 180px; }
-        .gradio-textbox textarea::placeholder, .gradio-textbox input[type=password]::placeholder { color: #808090 !important; }
-        .gradio-textbox textarea:focus, .gradio-dropdown select:focus, .gradio-textbox input[type=password]:focus {
-            border-color: var(--accent-main-dark) !important;
-            box-shadow: 0 0 0 6px var(--focus-ring-dark) !important, inset 0 1px 3px rgba(0,0,0,0.4);
-            outline: none !important;
-        }
-        @media (prefers-color-scheme: light) {
-            .gradio-textbox textarea, .gradio-dropdown select, .gradio-textbox input[type=password] {
-                border: 2px solid var(--border-light) !important; background: var(--main-card-bg-light) !important;
-                color: var(--text-primary-light) !important; box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
-            }
-            .gradio-textbox textarea:focus, .gradio-dropdown select:focus, .gradio-textbox input[type=password]:focus {
-                border-color: var(--accent-main-light) !important;
-                box-shadow: 0 0 0 6px var(--focus-ring-light) !important, inset 0 1px 3px rgba(0,0,0,0.2);
-            }
-        }
-        .gradio-dropdown select {
-            appearance: none; -webkit-appearance: none; -moz-appearance: none;
-            background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22%23A0A0B0%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M5.293%207.293a1%201%200%20011.414%200L10%2010.586l3.293-3.293a1%201%200%20111.414%201.414l-4%204a1%201%200%2001-1.414%200l-4-4a1%201%200%20010-1.414z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E');
-            background-repeat: no-repeat; background-position: right 1.8rem center; background-size: 1.4em;
-            padding-right: 5rem !important;
-        }
-        @media (prefers-color-scheme: light) {
-            .gradio-dropdown select {
-                background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22%236C757D%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M5.293%207.293a1%201%200%20011.414%200L10%2010.586l3.293-3.293a1%201%200%20111.414%201.414l-4%204a1%201%200%2001-1.414%200l-4-4a1%201%200%20010-1.414z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E');
-            }
-        }
+
+        /* Button layout */
         .button-row { display: flex; gap: 2rem; margin-top: 2rem; flex-wrap: wrap; justify-content: flex-end; }
         .gradio-button {
-            border-radius: var(--radius-md) !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 var(--transition-speed) cubic-bezier(0.0, 0.0, 0.2, 1);
+            border-radius: 12px !important; /* Hardcode radius */
+            padding: 1.2rem 2.8rem !important; /* Hardcode padding */
+            font-size: 1.15rem !important; /* Hardcode font size */
+            font-weight: 600 !important; /* Hardcode font weight */
+            border: 1px solid transparent !important;
+            box-shadow: 0 6px 20px rgba(0,0,0,0.35); /* Custom shadow */
+            transition: all 0.4s cubic-bezier(0.0, 0.0, 0.2, 1);
         }
         .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 {
-            background: #3A3A50 !important; color: #6A6A80 !important;
-            box-shadow: none !important; border-color: #4A4A60 !important; cursor: not-allowed;
+            box-shadow: none !important;
+            cursor: not-allowed;
+        }
+        .gr-button-secondary { /* Override for secondary button specific look */
+            background: transparent !important;
+            border: 2px solid var(--border-color-primary) !important;
+            box-shadow: none !important;
+        }
+        .gr-button-secondary:hover:not(:disabled) {
+            background: var(--button-secondary-background-hover) !important; /* Use theme variable */
+            border-color: var(--primary-500) !important; /* Use theme primary color */
         }
-        .gr-button-primary { background: var(--accent-main-dark) !important; color: var(--header-bg-dark) !important; border-color: var(--accent-main-dark) !important; }
-        .gr-button-primary:hover:not(:disabled) { background: var(--accent-hover-dark) !important; border-color: var(--accent-hover-dark) !important; }
-        .gr-button-secondary { background: transparent !important; color: var(--text-secondary-dark) !important; border: 2px solid var(--border-dark) !important; box-shadow: none !important; }
-        .gr-button-secondary:hover:not(:disabled) { background: rgba(255, 193, 7, 0.15) !important; color: var(--accent-main-dark) !important; border-color: var(--accent-main-dark) !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; }
-            .gradio-button:disabled { background: #E9ECEF !important; color: #ADB5BD !important; border-color: #DEE2E6 !important; }
-            .gr-button-primary { background: var(--accent-main-light) !important; color: #FFFFFF !important; border-color: var(--accent-main-light) !important; }
-            .gr-button-primary:hover:not(:disabled) { background: var(--accent-hover-light) !important; border-color: var(--accent-hover-light) !important; }
-            .gr-button-secondary { background: transparent !important; color: var(--text-secondary-light) !important; border: 2px solid var(--border-light) !important; }
-            .gr-button-secondary:hover:not(:disabled) { background: rgba(0, 123, 255, 0.1) !important; color: var(--accent-main-light) !important; border-color: var(--accent-main-light) !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; color: var(--text-primary-dark);
+            font-size: 1.8rem; font-weight: 700;
             margin: 0 0 1rem 0; display: flex; align-items: center; gap: 1.2rem;
-            transition: color var(--transition-speed);
         }
-        .output-card .response-icon { font-size: 2rem; color: var(--accent-main-dark); transition: color var(--transition-speed); }
-        .output-card .divider { border: none; border-top: 1px solid var(--border-dark); margin: 1.5rem 0 1.8rem 0; transition: border-color var(--transition-speed); }
-        .output-card .output-content-wrapper { font-size: 1.15rem; line-height: 1.8; color: var(--text-primary-dark); transition: color var(--transition-speed); }
+        .output-card .response-icon { font-size: 2rem; color: var(--primary-500); } /* Use theme primary color */
+        .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 .output-content-wrapper strong { font-weight: 700; }
-        .output-card .output-content-wrapper a { color: var(--accent-main-dark); text-decoration: underline; }
-        .output-card .output-content-wrapper a:hover { color: var(--accent-hover-dark); }
-        @media (prefers-color-scheme: light) {
-            .output-card .response-header { color: var(--text-primary-light); }
-            .output-card .response-icon { color: var(--accent-main-light); }
-            .output-card .divider { border-top: 1px solid var(--border-light); }
-            .output-card .output-content-wrapper { color: var(--text-primary-light); }
-            .output-card .output-content-wrapper a { color: var(--accent-main-light); }
-            .output-card .output-content-wrapper a:hover { color: var(--accent-hover-light); }
-        }
         .output-card .error-message {
             padding: 1.5rem 2rem; margin-top: 1.5rem; font-size: 1.1rem;
-            border-radius: var(--radius-md); background: var(--error-bg-dark);
-            color: var(--error-text-dark); border: 2px solid var(--error-border-dark);
+            border-radius: 12px; /* Hardcoded radius */
+            background: var(--error-background-fill) !important; /* Use theme error background */
+            color: var(--error-text-color) !important; /* Use theme error text */
+            border: 2px solid var(--error-border-color) !important; /* Use theme error border */
             display: flex; align-items: flex-start; gap: 1.5em;
-            transition: background var(--transition-speed), color var(--transition-speed), border-color var(--transition-speed);
         }
         .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; }
-        @media (prefers-color-scheme: light) {
-            .output-card .error-message { background: var(--error-bg-light); color: var(--error-text-light); border: 2px solid var(--error-border-light); }
-        }
         .output-card .placeholder {
-            padding: 2.5rem 2rem; font-size: 1.2rem; border-radius: var(--radius-md);
-            border: 3px dashed var(--border-dark); color: var(--text-secondary-dark);
+            padding: 2.5rem 2rem; font-size: 1.2rem; border-radius: 12px; /* Hardcoded radius */
+            border: 3px dashed var(--border-color-primary);
             text-align: center; opacity: 0.8;
-            transition: border-color var(--transition-speed), color var(--transition-speed);
-        }
-        @media (prefers-color-scheme: light) {
-            .output-card .placeholder { border-color: var(--border-light); color: var(--text-secondary-light); }
         }
-        /* Target the table within the examples section directly */
-        .examples-section table.gr-samples-table { /* Updated selector based on common Gradio internal classes */
-            border-radius: var(--radius-md) !important; border: 1px solid var(--border-dark) !important;
-            overflow: hidden; background: var(--card-section-bg-dark) !important;
+
+        /* Examples table styling */
+        .examples-section table.gr-samples-table {
+            border-radius: 12px !important; /* Hardcoded radius */
+            border: 1px solid var(--border-color-primary) !important;
+            overflow: hidden;
             box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
-            transition: border-color var(--transition-speed), background var(--transition-speed), box-shadow var(--transition-speed);
         }
         @media (prefers-color-scheme: light) {
-            .examples-section table.gr-samples-table { border: 1px solid var(--border-light) !important; background: var(--card-section-bg-light) !important; box-shadow: inset 0 0 8px rgba(0,0,0,0.05); }
+            .examples-section table.gr-samples-table { box-shadow: inset 0 0 8px rgba(0,0,0,0.05); }
         }
         .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(--header-bg-dark) !important; color: var(--text-primary-dark) !important;
+            background: var(--block-background-fill) !important; /* Using theme background fill for table headers */
             font-weight: 600 !important; text-align: left;
-            transition: background var(--transition-speed), color var(--transition-speed);
         }
         .examples-section table.gr-samples-table td {
-            background: var(--card-section-bg-dark) !important; color: var(--text-primary-dark) !important;
-            border-top: 1px solid var(--border-dark) !important; cursor: pointer;
-            transition: background var(--transition-speed), color var(--transition-speed), border-color var(--transition-speed);
+            border-top: 1px solid var(--border-color-primary) !important;
+            cursor: pointer;
         }
-        .examples-section table.gr-samples-table tr:hover td { background: rgba(255, 193, 7, 0.1) !important; }
+        .examples-section table.gr-samples-table tr:hover td { background: var(--hover-color) !important; } /* Use theme hover color */
         .examples-section table.gr-samples-table tr:first-child td { border-top: none !important; }
-        @media (prefers-color-scheme: light) {
-            .examples-section table.gr-samples-table { border: 1px solid var(--border-light) !important; background: var(--card-section-bg-light) !important; }
-            .examples-section table.gr-samples-table th { background: var(--header-bg-light) !important; color: var(--text-primary-light) !important; }
-            .examples-section table.gr-samples-table td { background: var(--card-section-bg-light) !important; color: var(--text-primary-light) !important; border-top: 1px solid var(--border-light) !important; }
-            .examples-section table.gr-samples-table tr:hover td { background: rgba(0, 123, 255, 0.08) !important; }
-        }
+
+        /* Footer styling */
         .app-footer-wrapper {
-            background: var(--header-bg-dark); border-top: 1px solid var(--border-dark) !important;
-            margin-top: 0.5rem; padding-top: 2.5rem; padding-bottom: 2.5rem;
-            border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg);
+            border-top: 1px solid var(--border-color-primary) !important;
+            margin-top: 0.5rem; /* Hardcoded margin */
+            padding-top: 2.5rem; /* Hardcoded padding */
+            padding-bottom: 2.5rem; /* Hardcoded padding */
+            border-top-left-radius: 24px; /* Hardcoded radius */
+            border-top-right-radius: 24px;
             box-shadow: inset 0 8px 15px rgba(0,0,0,0.2);
-            transition: background var(--transition-speed), border-color var(--transition-speed), box-shadow var(--transition-speed);
-            max-width: 1120px; margin-left: auto; margin-right: auto; width: 100%;
-            /* MODIFIED: Align Markdown content to the left */
+            max-width: 1120px;
+            margin-left: auto;
+            margin-right: auto;
+            width: 100%;
             display: flex !important;
             flex-direction: column !important;
-            align-items: flex-start !important; /* Pushes the Markdown component to the left */
-        }
-        @media (prefers-color-scheme: light) {
-            .app-footer-wrapper { background: var(--header-bg-light); border-top: 1px solid var(--border-light) !important; box-shadow: inset 0 6px 12px rgba(0,0,0,0.1); }
+            align-items: flex-start !important; /* Left aligns the content */
         }
         .app-footer {
-            padding: 0 var(--padding-lg) !important;
+            padding: 0 3.5rem !important; /* Hardcoded padding */
             display: flex;
             flex-direction: column;
-            align-items: stretch; /* Keep children (<p> tags) stretched to full width of this div */
-            width: 100%; /* Ensure this div takes full width inside its markdown container */
+            align-items: stretch;
+            width: 100%;
         }
         .app-footer p {
             font-size: 1.05rem !important;
-            color: var(--text-secondary-dark) !important;
-            margin-bottom: 1rem;
-            /* MODIFIED: Align text to the left */
             text-align: left !important;
-            transition: color var(--transition-speed);
-            width: 100%; /* Ensure <p> takes full width of stretched item */
-        }
-        .app-footer a { color: var(--accent-main-dark) !important; font-weight: 500; transition: color var(--transition-speed), text-decoration var(--transition-speed); }
-        .app-footer a:hover { color: var(--accent-hover-dark) !important; text-decoration: underline; }
-        @media (prefers-color-scheme: light) {
-            .app-footer-wrapper { border-top-color: var(--border-light) !important; }
-            .app-footer p { color: var(--text-secondary-light) !important; }
-            .app-footer a { color: var(--accent-main-light) !important; }
-            .app-footer a:hover { color: var(--accent-hover-light) !important; }
-        }
-        :focus-visible {
-            outline: 5px solid var(--accent-main-dark) !important; outline-offset: 5px;
-            box-shadow: 0 0 0 8px var(--focus-ring-dark) !important;
-            border-radius: var(--radius-md) !important;
-        }
-        @media (prefers-color-scheme: light) {
-            :focus-visible { outline-color: var(--accent-main-light) !important; box_shadow: 0 0 0 8px var(--focus-ring-light) !important; }
+            margin-bottom: 1rem;
         }
-        .gradio-button span:focus { outline: none !important; }
+        .app-footer a { font-weight: 500; }
+
         /* 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"],
@@ -662,51 +528,47 @@ Answer:"""
             font-size: 0 !important; line-height: 0 !important; position: absolute !important;
             pointer-events: none !important;
         }
-        /* Responsive Adjustments (meticulously refined) */
+        /* Responsive Adjustments (remaining hardcoded overrides) */
         @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: var(--padding-md) var(--padding-lg) !important; margin-bottom: 2rem; border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); }
-            .main-dashboard-container { padding: var(--padding-md) !important; margin-bottom: 0.6rem; border-radius: var(--radius-md); gap: 2rem; }
-            .dashboard-card-section { padding: var(--padding-sm); border-radius: var(--radius-sm); }
-            .section-title { font-size: 2.2rem !important; margin-bottom: 1.5rem !important; }
-            .sub-section-title { font-size: 2.0rem !important; margin-bottom: 0.7rem !important; } /* Adjusted for responsiveness */
-            .section-divider { margin: 1.8rem 0; } .input-row { gap: 1.5rem; } .input-field { min-width: 280px; }
+            .app-header-wrapper { padding: 2.5rem 3.5rem !important; margin-bottom: 2rem; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }
+            .main-dashboard-container { padding: 2.5rem !important; margin-bottom: 0.6rem; border-radius: 12px; gap: 2rem; }
+            .dashboard-card-section { padding: 1.8rem; border-radius: 8px; }
+            .sub-section-title { font-size: 2.0rem !important; margin-bottom: 0.7rem !important; }
+            .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: var(--radius-md); border-top-right-radius: var(--radius-md); }
+            .app-footer-wrapper { margin-top: 0.6rem; border-top-left-radius: 12px; border-top-right-radius: 12px; }
             .app-footer { padding: 0 1.5rem !important; }
         }
         @media (max-width: 768px) {
             .gradio-container > .flex.flex-col { padding: 0 1rem !important; }
-            .app-header-wrapper { padding: var(--padding-sm) var(--padding-md) !important; margin-bottom: 1.8rem; border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); }
+            .app-header-wrapper { padding: 1.8rem 2.5rem !important; margin-bottom: 1.8rem; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }
             .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: var(--padding-sm) !important; margin-bottom: 0.5rem; border-radius: var(--radius-md); gap: 1.8rem; }
-            .dashboard-card-section { padding: 1.5rem; border-radius: var(--radius-sm); }
-            .section-title { font-size: 2rem !important; margin-bottom: 1.2rem !important; }
-            .sub-section-title { font-size: 1.8rem !important; margin-top: 1rem !important; margin-bottom: 0.6rem !important; } /* Adjusted for responsiveness */
-            .section-divider { margin: 1.5rem 0; } .input-row { flex-direction: column; gap: 1rem; } .input-field { min-width: 100%; }
+            .main-dashboard-container { padding: 1.8rem !important; margin-bottom: 0.5rem; border-radius: 12px; gap: 1.8rem; }
+            .dashboard-card-section { padding: 1.5rem; border-radius: 8px; }
+            .sub-section-title { font-size: 1.8rem !important; margin-top: 1rem !important; margin-bottom: 0.6rem !important; }
+            .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: var(--radius-md); border-top-right-radius: var(--radius-md); padding-top: 2rem; padding-bottom: 2rem; }
+            .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: 1.5rem; border-bottom-left-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); }
+            .app-header-wrapper { padding: 1.2rem 1rem !important; margin-bottom: 1.5rem; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
             .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.4rem; border-radius: var(--radius-sm); gap: 1.5rem; }
-            .dashboard-card-section { padding: 1rem; border-radius: var(--radius-xs); }
-            .section-title { font-size: 1.8rem !important; margin-bottom: 1rem !important; }
-            .sub-section-title { font-size: 1.5rem !important; margin-top: 0.8rem !important; margin-bottom: 0.5rem !important; } /* Adjusted for responsiveness */
-            .section-divider { margin: 1rem 0; }
+            .main-dashboard-container { padding: 1.2rem !important; margin-bottom: 0.4rem; border-radius: 8px; gap: 1.5rem; }
+            .dashboard-card-section { padding: 1rem; border-radius: 4px; }
+            .sub-section-title { font-size: 1.5rem !important; margin-top: 0.8rem !important; margin-bottom: 0.5rem !important; }
             .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: 1rem !important; }
@@ -714,12 +576,12 @@ Answer:"""
             .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: var(--radius-sm); border-top-right-radius: var(--radius-sm); padding-top: 1.5rem; padding-bottom: 1.5rem; }
+            .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; }
         }
         """
 
-        with gr.Blocks(theme=None, css=custom_css, title="Landlord-Tenant Rights Assistant") as demo:
+        with gr.Blocks(theme="earneleh/paris", css=custom_css, title="Landlord-Tenant Rights Assistant") as demo:
             # --- Header Section ---
             with gr.Group(elem_classes="app-header-wrapper"):
                 gr.Markdown(
@@ -732,12 +594,12 @@ Answer:"""
                     """
                 )
 
-            # --- NEW: Main Dashboard Console Container (This holds everything central) ---
+            # --- Main Dashboard Console Container ---
             with gr.Column(elem_classes="main-dashboard-container"):
 
                 # --- Section 1: Introduction and Disclaimer Card ---
                 with gr.Group(elem_classes="dashboard-card-section"):
-                    gr.Markdown("<h3 class='sub-section-title'>Welcome & Disclaimer</h3>") # Centered by CSS
+                    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>
@@ -747,9 +609,9 @@ Answer:"""
 
                 # --- Section 2: OpenAI API Key Input Card ---
                 with gr.Group(elem_classes="dashboard-card-section"):
-                    gr.Markdown("<h3 class='sub-section-title'>OpenAI API Key</h3>") # Centered by CSS
+                    gr.Markdown("<h3 class='sub-section-title'>OpenAI API Key</h3>")
                     api_key_input = gr.Textbox(
-                        label="", # Label hidden by CSS, custom label below
+                        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,
                         elem_classes=["input-field-group"]
@@ -757,7 +619,7 @@ Answer:"""
 
                 # --- Section 3: 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>") # Centered by CSS
+                    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(
@@ -777,21 +639,20 @@ Answer:"""
 
                 # --- Section 4: Output Display Card ---
                 with gr.Group(elem_classes="dashboard-card-section"):
-                    gr.Markdown("<h3 class='sub-section-title'>Legal Assistant's Response</h3>") # Centered by CSS
+                    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"
                     )
 
-                # --- Section 5: Example Questions Section (NO ACCORDION, direct display) ---
+                # --- Section 5: 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>") # Centered by CSS
+                    gr.Markdown("<h3 class='sub-section-title'>Example Questions to Ask</h3>")
                     if example_queries:
                         gr.Examples(
                             examples=example_queries, inputs=[query_input, state_input],
                             examples_per_page=5,
-                            label="" # Label hidden by CSS
-                            # Removed: elem_classes=["gr-examples-table"]
+                            label="" # Hide default Examples label
                         )
                     else:
                         gr.Markdown("<div class='placeholder'>Sample questions could not be loaded.</div>")
@@ -822,7 +683,7 @@ Answer:"""
                 ),
                 inputs=[], outputs=[api_key_input, query_input, state_input, output]
             )
-            logging.info("Completely new, cohesive, dynamic, and legible Gradio interface created with Legal Console theme and UI fixes.")
+            logging.info("Gradio interface created with earneleh/paris theme and refined custom CSS.")
             return demo
 
 # --- Main Execution Block (remains untouched from original logic) ---
@@ -865,7 +726,7 @@ if __name__ == "__main__":
 
         logging.info(f"Launching Gradio app on http://0.0.0.0:{SERVER_PORT}")
         print(f"\n--- Gradio App Running ---\nAccess at: http://localhost:{SERVER_PORT} or your public Spaces URL\n--------------------------\n")
-        app_interface.launch(server_name="0.0.0.0", server_port=SERVER_PORT, share=True) # share=False is typical for Spaces
+        app_interface.launch(server_name="0.0.0.0", server_port=SERVER_PORT, share=False) # share=False is typical for Spaces
 
     except ModuleNotFoundError as e:
         if "vector_db" in str(e):