updated UI v6

app.py

@@ -241,136 +241,16 @@ 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
 
-    # --- NEW: Custom Gradio Theme Definition (Legal Aesthetic) ---
-    class LegalAestheticTheme(themes.Base):
-        def __init__(
-            self,
-            **kwargs,
-        ):
-            # Pass all accepted kwargs to the base class
-            super().__init__(
-                # Fonts are accepted directly by themes.Base
-                font=[themes.GoogleFont("Inter"), "sans-serif"],
-                font_mono=themes.GoogleFont("JetBrains Mono"),
-
-                # --- Dark Mode Colors (Legal Noir) ---
-                # Primary/Accent Colors (Goldenrod/Amber scale)
-                primary_50_dark="#FFFDE7",
-                primary_100_dark="#FFF9C4",
-                primary_200_dark="#FFF59D",
-                primary_300_dark="#FFF176",
-                primary_400_dark="#FFEE58",
-                primary_500_dark="#FFC107", # Main accent color
-                primary_600_dark="#E0A800", # Hover accent color
-                primary_700_dark="#B88A00",
-                primary_800_dark="#8D6C00",
-                primary_900_dark="#614B00",
-                primary_950_dark="#403200",
-
-                # Backgrounds
-                background_page_dark="#0F0F1A",
-                block_background_fill_dark="#1A1A2B",
-                background_fill_primary_dark="#1E1E30",
-                background_fill_secondary_dark="#2A2A40",
-                background_fill_tertiary_dark="#3F3F5A",
-
-                # Text Colors
-                text_color_body_dark="#EAEAF0",
-                text_color_subdued_dark="#A0A0B0",
-                text_color_header_dark="#EAEAF0",
-
-                # Borders
-                border_color_primary_dark="#3F3F5A",
-                border_color_secondary_dark="#505060",
-
-                # Shadows (as hex colors for theme consistency, will be applied as rgba in CSS)
-                # These are colors, not directly applied as 'shadow-lg' etc. by theme.Base
-                # They will be used via CSS variables
-                shadow_lg_dark="0F0F1A", # Represents darkest shadow color for rgba(..., 0.6)
-                shadow_md_dark="1A1A2B", # Represents medium shadow color for rgba(..., 0.4)
-                shadow_sm_dark="1E1E30", # Represents light shadow color for rgba(..., 0.35)
-
-                # Links
-                link_text_color_dark="#FFC107",
-                link_text_color_hover_dark="#E0A800",
-
-                # Buttons (theme handles primary colors, custom CSS for secondary)
-                button_primary_background_dark="#FFC107",
-                button_primary_background_hover_dark="#E0A800",
-                button_primary_text_color_dark="#1A1A2B",
-
-                # Error Colors
-                color_error_50_dark="#4D001A",
-                color_error_200_dark="#990026",
-                color_error_500_dark="#CC0033",
-                color_error_600_dark="#FFB3C2",
-
-
-                # --- Light Mode Colors (Legal Lumen) ---
-                primary_50_light="#E3F2FD",
-                primary_100_light="#BBDEFB",
-                primary_200_light="#90CAF9",
-                primary_300_light="#64B5F6",
-                primary_400_light="#42A5F5",
-                primary_500_light="#2196F3",
-                primary_600_light="#1E88E5",
-                primary_700_light="#1976D2",
-                primary_800_light="#1565C0",
-                primary_900_light="#0D47A1",
-                primary_950_light="#082F6A",
-
-                background_page_light="#F0F2F5",
-                block_background_fill_light="#E0E4EB",
-                background_fill_primary_light="#FFFFFF",
-                background_fill_secondary_light="#F8F9FA",
-                background_fill_tertiary_light="#DDE2E8",
-
-                text_color_body_light="#212529",
-                text_color_subdued_light="#6C757D",
-                text_color_header_light="#212529",
-
-                border_color_primary_light="#DDE2E8",
-                border_color_secondary_light="#CCD1D7",
-
-                shadow_lg_light="F0F2F5",
-                shadow_md_light="E0E4EB",
-                shadow_sm_light="FFFFFF",
-
-                link_text_color_light="#007bff",
-                link_text_color_hover_light="#0056b3",
-
-                button_primary_background_light="#007bff",
-                button_primary_background_hover_light="#0056b3",
-                button_primary_text_color_light="#FFFFFF",
-
-                color_error_50_light="#F8D7DA",
-                color_error_200_light="#F5C6CB",
-                color_error_500_light="#DC3545",
-                color_error_600_light="#721C24",
-
-                # Radii and Spacing (matching custom CSS, and setting theme defaults)
-                radius_xs="4px",
-                radius_sm="8px",
-                radius_md="12px",
-                radius_lg="24px",
-                spacing_md="2.5rem",
-                spacing_lg="3.5rem",
-                spacing_xl="4.5rem",
-                **kwargs,
-            )
-            # Assign heading_font directly to self after super().__init__ as it's not a direct base constructor argument
-            self.heading_font = [themes.GoogleFont("Playfair Display"), "serif"]
-
-
+    # --- 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)
             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'>Get one free from OpenAI</a>.</div>"
             if not state or state == "Select a state..." or "Error" in state:
-                return "<div class='error-message'>Error: Please select a valid state.</div>" # Simplified message
+                return "<div class='error-message'><span class='error-icon'>⚠️</span>Please select a valid state from the dropdown.</div>"
             if not query or not query.strip():
-                return "<div class='error-message'>Error: Please enter your question.</div>" # Simplified message
+                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)
@@ -381,8 +261,7 @@ Answer:"""
                 return answer # Return the pre-formatted error message directly
             else:
                 # Format the successful response with the new UI structure
-                # Use a div for the icon and header text for better control over alignment and spacing
-                formatted_response = f"<div class='response-header-container'><span class='response-icon'>📜</span><h4 class='response-title'>Response for {state}</h4></div><hr class='response-divider'>{answer}"
+                formatted_response = f"<div class='response-header'><span class='response-icon'>📜</span>Response for {state}</div><hr class='divider'>{answer}"
                 return formatted_response
 
         try:
@@ -413,346 +292,215 @@ Answer:"""
             example_queries.append(["What basic rights do tenants have?", "California"])
 
 
-        # --- Minimal Custom CSS for structural/behavioral overrides and specific aesthetics ---
-        # This CSS is designed to complement our custom LegalAestheticTheme.
+        # --- 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');
-
-        /* Keyframe animation for initial header load */
+        /* Animation for header */
         @keyframes fadeInSlideDown { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: translateY(0); } }
-
-        /* General Gradio container layout and centering */
-        body { margin: 0; padding: 0; } /* Reset default body margin */
-        .gradio-container {
-            font-family: var(--font-text) !important; /* Use theme's text font variable */
-            min-height: 100vh;
-            display: flex;
-            justify-content: center; /* Center content horizontally */
-            align-items: flex-start; /* Align content to top vertically */
-            padding: var(--spacing-lg) 1rem; /* Overall padding top/bottom, fixed horizontal for small screens */
-            background-color: var(--background-page); /* Use theme's page background */
-            transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out; /* Smooth theme transition */
-            -webkit-font-smoothing: antialiased;
-            -moz-osx-font-smoothing: grayscale;
-        }
+        /* General layout adjustments to Gradio's base container */
         .gradio-container > .flex.flex-col {
-            max-width: 1120px; /* Constrain max width for desktop */
-            width: 100%;
-            margin: 0 auto; /* Center the main content column */
-            gap: var(--spacing-md) !important; /* Consistent spacing between main sections */
-            padding: 0 !important; /* Remove default Gradio column padding */
+            max-width: 1120px;
+            margin: 0 auto !important;
+            padding: 0 !important; /* Remove default Gradio padding */
+            gap: 0 !important; /* Remove default Gradio gap */
         }
-
-        /* Header specific styling (outside main dashboard for distinct look) */
+        /* Header specific styling */
         .app-header-wrapper {
-            background-color: var(--block-background-fill); /* Use theme's block background */
-            padding: var(--spacing-xl) var(--spacing-lg); /* Spacious padding */
-            text-align: center;
-            border-radius: var(--radius-lg); /* Use theme radius */
-            box-shadow: 0 1.2rem 3.5rem rgba(var(--shadow-lg),0.6); /* Use theme shadow color with rgba */
+            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;
-            border: 1px solid var(--border-color-primary); /* Use theme border */
+            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; }
+        .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;
-            color: var(--primary-500); /* Use theme primary color */
-            filter: drop-shadow(0 0 15px var(--primary-500));
+            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;
         }
         .app-header-title {
-            font-family: var(--font-heading) !important; /* Use theme's heading font variable */
+            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;
-            color: var(--text-color-header); /* Use theme text color for headings */
-            text-shadow: 0 8px 16px rgba(0,0,0,0.5); /* Custom shadow for effect */
+            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;
         }
         .app-header-tagline {
-            font-family: var(--font-text) !important;
+            font-family: 'Inter', sans-serif !important; /* Explicit font family */
             font-size: 1.6rem; font-weight: 300;
-            color: var(--text-color-subdued); /* Use theme subdued text color */
             opacity: 0.9; max-width: 900px;
             transform: translateY(-40px); opacity: 0;
             animation: fadeInSlideDown 1.5s ease-out forwards; animation-delay: 0.9s;
         }
-
-        /* Main dashboard console container */
+        /* Main dashboard container */
         .main-dashboard-container {
-            display: flex;
-            flex-direction: column;
-            gap: 2rem; /* Spacing between cards */
-            background-color: var(--background-fill-primary); /* Use theme's main background */
-            border-radius: var(--radius-lg);
-            box-shadow: 0 0.8rem 2.5rem rgba(var(--shadow-lg),0.4); /* Use theme shadow color with rgba */
-            padding: var(--spacing-md); /* Inner padding for the whole dashboard content */
-            border: 1px solid var(--border-color-primary);
+            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;
+            display: flex; flex-direction: column; gap: 2.5rem; /* Use hardcoded gap */
+            max-width: 1120px;
         }
-
-        /* Individual Card Sections */
+        /* Card sections within the dashboard */
         .dashboard-card-section {
-            background-color: var(--background-fill-secondary); /* A slightly darker/lighter background for cards */
-            border-radius: var(--radius-md);
-            padding: 2rem; /* Padding inside each card */
-            box-shadow: 0 0.6rem 2rem rgba(var(--shadow-md),0.2); /* Subtle shadow for cards */
+            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);
+            display: flex; flex-direction: column; gap: 1.5rem;
         }
-
-        /* Section titles within cards */
-        .card-section-title {
-            font-family: var(--font-heading) !important; /* Use theme's heading font variable */
-            font-size: 2.2rem !important;
-            font-weight: 800 !important;
-            color: var(--text-color-body) !important; /* Use theme body text color */
-            text-align: center !important; /* Centered as requested */
-            margin-bottom: 1.5rem !important;
-            padding-bottom: 0.8rem !important;
-            border-bottom: 1px solid var(--border-color-primary) !important;
-        }
-
-        /* General text styling within cards */
-        .dashboard-card-section p {
-            font-family: var(--font-text) !important;
-            font-size: 1.1rem;
-            line-height: 1.6;
-            color: var(--text-color-body);
-            margin-bottom: 1rem;
-        }
-        .dashboard-card-section strong {
-            color: var(--text-color-body); /* Ensure strong text is legible */
-            font-weight: 600;
-        }
-        .dashboard-card-section a {
-            color: var(--link-text-color); /* Use theme link color */
-            text-decoration: underline;
-        }
-        .dashboard-card-section a:hover {
-            color: var(--link-text-color-hover); /* Use theme link hover color */
-            text-decoration: none;
-        }
-
-        /* Input field styling (mostly handled by theme, but override specific padding/radius) */
-        .gradio-textbox textarea, .gradio-dropdown select, .gradio-textbox input[type=password] {
-            padding: 1.2rem 1.4rem !important; /* Adjust padding for consistency */
-            border-radius: var(--radius-sm) !important; /* Use theme radius */
-            font-size: 1.05rem !important;
-        }
-        .gradio-textbox textarea { min-height: 160px; }
-        .gradio-input-info a {
-            color: var(--link-text-color); /* Ensure info links are themed */
-            text-decoration: underline;
-        }
-        .gradio-input-info a:hover {
-            color: var(--link-text-color-hover);
-        }
-        /* Style for the dropdown arrow, ensuring it's visible in both themes */
-        .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%22currentColor%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') !important;
-            background-repeat: no-repeat;
-            background-position: right 1rem center !important;
-            background-size: 1.2em !important;
-            padding-right: 3rem !important;
-            color: var(--text-color-body) !important; /* Ensure dropdown text is legible */
-        }
-        /* Current color for SVG icon will adapt with text_color_body, but explicitly set if needed */
-        /* For light mode, the fill for SVG should be a darker color */
+        /* Light mode specific inner shadow for card sections */
         @media (prefers-color-scheme: light) {
-            .gradio-dropdown select {
-                color: var(--text-color-body) !important; /* Ensure dropdown text is dark */
-            }
+            .dashboard-card-section { box-shadow: inset 0 0 8px rgba(0,0,0,0.05); }
         }
-
-
-        /* Button styling overrides to match original design intent with theme */
+        /* Section titles */
+        .sub-section-title {
+            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;
+            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; }
         .gradio-button {
-            border-radius: var(--radius-sm) !important;
-            font-weight: 600 !important;
-            padding: 0.8rem 2rem !important; /* Make buttons slightly less tall */
-            min-height: 48px; /* Ensure minimum height */
-            box-shadow: 0 6px 20px rgba(var(--shadow-sm),0.35); /* Use theme shadow color with rgba */
-            transition: all 0.2s ease-in-out;
-            transform: translateY(0);
-        }
-        .gradio-button:hover:not(:disabled) {
-            transform: translateY(-3px); /* Subtle lift on hover */
-            box-shadow: 0 0.8rem 2.5rem rgba(var(--shadow-md),0.4);
-        }
-        .gradio-button:active:not(:disabled) {
-            transform: translateY(0);
+            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 {
+            box-shadow: none !important;
+            cursor: not-allowed;
         }
-        /* Primary button uses theme primary colors automatically */
-        .gr-button-secondary {
-            background-color: transparent !important;
-            border: 1px solid var(--border-color-primary) !important;
-            color: var(--text-color-body) !important; /* Use theme body text for secondary button */
+        .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-color: var(--primary-50) !important; /* Light tint of primary on hover */
-            color: var(--primary-500) !important; /* Primary color for text on hover */
-            border-color: var(--primary-500) !important; /* Primary color for border on hover */
-        }
-
-        /* Output Response Section */
-        .response-header-container {
-            display: flex;
-            align-items: center;
-            gap: 1rem;
-            margin-bottom: 1rem;
-        }
-        .response-icon {
-            font-size: 2.2rem;
-            color: var(--primary-500); /* Use theme primary color */
-        }
-        .response-title {
-            font-family: var(--font-heading) !important;
-            font-size: 1.8rem !important;
-            font-weight: 700 !important;
-            color: var(--text-color-body) !important; /* Ensure heading is legible */
-            margin: 0;
-            padding: 0;
-        }
-        .output-content-wrapper .response-divider { /* Specific class for this divider */
-            border: none;
-            border-top: 1px solid var(--border-color-secondary); /* A lighter border for divider */
-            margin: 1rem 0 1.5rem 0;
-        }
-        .output-content-wrapper {
-            font-family: var(--font-text) !important;
-            line-height: 1.7;
-            font-size: 1.05rem;
-            color: var(--text-color-body);
-        }
-        .output-content-wrapper ul, .output-content-wrapper ol {
-            margin-left: 2rem;
-            margin-bottom: 1rem;
-            padding-left: 0;
-        }
-        .output-content-wrapper li {
-            margin-bottom: 0.5rem;
-        }
-        .output-card .placeholder {
-            padding: 2rem;
-            font-size: 1.1rem;
-            border-radius: var(--radius-md);
-            border: 2px dashed var(--border-color-secondary);
-            color: var(--text-color-subdued);
-            text-align: center;
-            opacity: 0.7;
-            min-height: 150px; /* Ensure some height for placeholder */
-            display: flex;
-            align-items: center;
-            justify-content: center;
+            background: var(--button-secondary-background-hover) !important; /* Use theme variable */
+            border-color: var(--primary-500) !important; /* Use theme primary color */
         }
+        @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); } /* 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 .error-message {
-            padding: 1.5rem;
-            font-size: 1.05rem;
-            border-radius: var(--radius-sm);
-            background-color: var(--color-error-50); /* Use theme error color with low opacity */
-            color: var(--color-error-600); /* Strong error text color */
-            border: 1px solid var(--color-error-200); /* Theme error border */
-            display: flex;
-            align-items: flex-start;
-            gap: 1rem;
-        }
-        .output-card .error-message .error-icon {
-            font-size: 1.8rem;
-            line-height: 1;
-            color: var(--color-error-500); /* Use theme error color */
-        }
-        .output-card .error-details {
-            font-size: 0.9rem;
-            margin-top: 0.5rem;
-            opacity: 0.8;
-            word-break: break-word;
+            padding: 1.5rem 2rem; margin-top: 1.5rem; font-size: 1.1rem;
+            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;
+        }
+        .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; /* Hardcoded radius */
+            border: 3px dashed var(--border-color-primary);
+            text-align: center; opacity: 0.8;
         }
-
-        /* Examples Table (from gr.Examples) */
+        /* Examples table styling */
         .examples-section table.gr-samples-table {
-            border-radius: var(--radius-sm) !important;
+            border-radius: 12px !important; /* Hardcoded radius */
             border: 1px solid var(--border-color-primary) !important;
             overflow: hidden;
-            background-color: var(--background-fill-secondary); /* Match card background */
+            box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
         }
-        .examples-section table.gr-samples-table th, .examples-section table.gr-samples-table td {
-            padding: 0.8rem 1rem !important;
-            font-size: 0.95rem !important;
-            border: none !important;
-            color: var(--text-color-body) !important;
+        @media (prefers-color-scheme: light) {
+            .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-color: var(--background-fill-tertiary) !important; /* Slightly different background for header */
-            font-weight: 600 !important;
-            text-align: left;
-            color: var(--text-color-header) !important;
+            background: var(--block-background-fill) !important; /* Using theme background fill for table headers */
+            font-weight: 600 !important; text-align: left;
         }
         .examples-section table.gr-samples-table td {
-            border-top: 1px solid var(--border-color-secondary) !important; /* Lighter border for rows */
+            border-top: 1px solid var(--border-color-primary) !important;
             cursor: pointer;
         }
-        .examples-section table.gr-samples-table tr:hover td {
-            background-color: var(--primary-50) !important; /* Light tint on hover */
-        }
+        .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; }
-
-        /* Footer styling (at the very bottom of the page) */
+        /* Footer styling */
         .app-footer-wrapper {
-            background-color: var(--block-background-fill); /* Use theme's block background */
             border-top: 1px solid var(--border-color-primary) !important;
-            padding: 1.5rem 2.5rem; /* Consistent padding */
-            border-radius: var(--radius-lg);
-            box-shadow: 0 1.2rem 3.5rem rgba(var(--shadow-lg),0.6); /* Use theme shadow color with rgba */
-            width: 100%;
+            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);
             max-width: 1120px;
-            margin: var(--spacing-md) auto 0 auto; /* Spacing from main dashboard */
-            display: flex;
-            flex-direction: column;
-            align-items: flex-start; /* Left aligns the content */
+            margin-left: auto;
+            margin-right: auto;
+            width: 100%;
+            display: flex !important;
+            flex-direction: column !important;
+            align-items: flex-start !important; /* Left aligns the content */
         }
         .app-footer {
-            width: 100%; /* Ensure content takes full width */
+            padding: 0 3.5rem !important; /* Hardcoded padding */
+            display: flex;
+            flex-direction: column;
+            align-items: stretch;
+            width: 100%;
         }
         .app-footer p {
-            font-family: var(--font-text) !important;
-            font-size: 0.95rem !important;
-            color: var(--text-color-subdued) !important;
-            margin-bottom: 0.5rem;
+            font-size: 1.05rem !important;
             text-align: left !important;
+            margin-bottom: 1rem;
         }
-        .app-footer a {
-            color: var(--link-text-color) !important;
-            font-weight: 500;
-            text-decoration: underline;
-        }
-        .app-footer a:hover {
-            color: var(--link-text-color-hover) !important;
-            text-decoration: none;
-        }
-
-        /* Hide unwanted Gradio default elements for a clean look */
-        .gr-messages-row, .gr-share-btn, .gr-api-btn, .gr-view-api, /* Common boilerplate elements */
-        .gradio-container > footer, /* Default Gradio footer text that appears below blocks */
-        .gradio-app .version-info, /* Gradio version info */
-        .gradio-app .dark\:text-gray-400, /* Target other default footer text classes */
-        .gradio-app .absolute.bottom-0.right-0.px-2.py-1.text-gray-400.text-xs /* another common footer class */ {
-            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;
-        }
-        /* More specific example label/button hiding */
+        .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"],
         .gr-examples div[class*="label"], .gr-examples .gr-example-label,
@@ -767,54 +515,61 @@ Answer:"""
             font-size: 0 !important; line-height: 0 !important; position: absolute !important;
             pointer-events: none !important;
         }
-        /* Further clean up any potential residual margin/padding Gradio adds to its components */
-        .gradio-container .gr-box { margin: 0 !important; padding: 0 !important; }
-        .gradio-container .gr-form { gap: 0 !important; } /* Remove gaps in forms where not desired */
-
-
-        /* Responsive Adjustments (using hardcoded values for precision, but mapping to theme variables where applicable for color/font) */
+        /* Responsive Adjustments (remaining hardcoded overrides) */
         @media (max-width: 1024px) {
-            .gradio-container { padding: 2rem 0.8rem; }
-            .gradio-container > .flex.flex-col { gap: 2rem !important; }
-            .app-header-wrapper { padding: 2.5rem 1.8rem; margin-bottom: 2rem; border-radius: 12px; }
-            .app-header-title { font-size: 3.5rem; } .app-header-tagline { font-size: 1.4rem; }
-            .main-dashboard-container { padding: 2rem; gap: 1.8rem; border-radius: 12px; }
-            .dashboard-card-section { padding: 1.5rem; border-radius: 8px; }
-            .card-section-title { font-size: 1.8rem !important; margin-bottom: 1.2rem !important; }
-            .input-row { flex-direction: column; gap: 1rem; }
-            .gradio-textbox textarea { min-height: 140px; }
-            .button-row { justify-content: center; gap: 1rem; flex-direction: column; }
-            .gradio-button { width: 100%; max-width: 300px; margin: 0 auto; } /* Center buttons on smaller screens */
-            .response-header-container { gap: 0.8rem; } .response-icon { font-size: 2rem; } .response-title { font-size: 1.6rem !important; }
-            .output-card .placeholder { padding: 1.5rem; font-size: 1rem; min-height: 120px;}
-            .examples-section table.gr-samples-table th, .examples-section table.gr-samples-table td { padding: 0.7rem 0.9rem !important; font-size: 0.9rem !important; }
-            .app-footer-wrapper { padding: 1.2rem 1.8rem; margin-top: 1.5rem; border-radius: 12px; }
-            .app-footer p { font-size: 0.85rem !important; }
+            .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: 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: 12px; border-top-right-radius: 12px; }
+            .app-footer { padding: 0 1.5rem !important; }
         }
         @media (max-width: 768px) {
-            .gradio-container { padding: 1.5rem 0.5rem; }
-            .gradio-container > .flex.flex-col { gap: 1.8rem !important; }
-            .app-header-wrapper { padding: 2rem 1rem; margin-bottom: 1.5rem; border-radius: 12px; }
-            .app-header-logo { font-size: 4.5rem; } .app-header-title { font-size: 2.8rem; } .app-header-tagline { font-size: 1.2rem; }
-            .main-dashboard-container { padding: 1.5rem; gap: 1.5rem; border-radius: 12px; }
-            .dashboard-card-section { padding: 1.2rem; border-radius: 8px; }
-            .card-section-title { font-size: 1.6rem !important; margin-bottom: 1rem !important; }
-            .gradio-textbox textarea { min-height: 120px; }
-            .output-content-wrapper { font-size: 1rem; }
-            .output-card .error-message { padding: 1rem; }
-            .app-footer-wrapper { padding: 1rem 1rem; margin-top: 1rem; border-radius: 12px; }
+            .gradio-container > .flex.flex-col { padding: 0 1rem !important; }
+            .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: 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: 12px; border-top-right-radius: 12px; padding-top: 2rem; padding-bottom: 2rem; }
+            .app-footer { padding: 0 1rem !important; }
         }
         @media (max-width: 480px) {
-            .app-header-logo { font-size: 3.5rem; } .app-header-title { font-size: 2.2rem; } .app-header-tagline { font-size: 1rem; }
-            .gradio-textbox textarea { min-height: 100px; }
-            .gradio-button { padding: 0.6rem 1.5rem !important; min-height: 40px; font-size: 0.95rem !important; }
-            .response-icon { font-size: 1.8rem; } .response-title { font-size: 1.4rem !important; }
-            .examples-section table.gr-samples-table th, .examples-section table.gr-samples-table td { padding: 0.5rem 0.7rem !important; font-size: 0.85rem !important; }
+            .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: 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: 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; }
+            .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; }
         }
         """
 
-        with gr.Blocks(theme=self.LegalAestheticTheme(), css=custom_css, title="Landlord-Tenant Rights Assistant") as demo:
-            # --- Header Section (distinct, top-level block) ---
+        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(
                     """
@@ -826,59 +581,60 @@ Answer:"""
                     """
                 )
 
-            # --- Main Dashboard Console Container (centralized, card-based) ---
+            # --- Main Dashboard Console Container ---
             with gr.Column(elem_classes="main-dashboard-container"):
 
-                # --- Section 1: Welcome & Disclaimer Card ---
+                # --- Section 1: Introduction and Disclaimer Card ---
                 with gr.Group(elem_classes="dashboard-card-section"):
-                    gr.Markdown("<h3 class='card-section-title'>Welcome & Disclaimer</h3>")
+                    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>
-                        """,
-                        elem_classes="dashboard-card-content" # Apply general text styling
+                        """
                     )
 
                 # --- Section 2: OpenAI API Key Input Card ---
                 with gr.Group(elem_classes="dashboard-card-section"):
-                    gr.Markdown("<h3 class='card-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="OpenAI API Key", # Keep label for theme compatibility and accessibility
+                        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"]
                     )
 
-                # --- Section 3: Ask Your Question Card ---
+                # --- Section 3: Query Input and State Selection Card ---
                 with gr.Group(elem_classes="dashboard-card-section"):
-                    gr.Markdown("<h3 class='card-section-title'>Ask Your Question</h3>") # Centered by CSS
-                    with gr.Row():
-                        with gr.Column(scale=3):
+                    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
+                                lines=5, max_lines=10,
+                                elem_classes=["input-field-group"]
                             )
-                        with gr.Column(scale=1, min_width=200):
+                        with gr.Column(elem_classes="input-field", scale=1):
                             state_input = gr.Dropdown(
                                 label="Select State", choices=dropdown_choices, value=initial_value,
-                                allow_custom_value=False
+                                allow_custom_value=False,
+                                elem_classes=["input-field-group"]
                             )
                     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"])
 
-                # --- Section 4: Legal Assistant's Response Card ---
+                # --- Section 4: Output Display Card ---
                 with gr.Group(elem_classes="dashboard-card-section"):
-                    gr.Markdown("<h3 class='card-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 Card ---
+                # --- Section 5: Example Questions Section ---
                 with gr.Group(elem_classes="dashboard-card-section examples-section"):
-                    gr.Markdown("<h3 class='card-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],
@@ -888,7 +644,7 @@ Answer:"""
                     else:
                         gr.Markdown("<div class='placeholder'>Sample questions could not be loaded.</div>")
 
-            # --- Footer Section (distinct, bottom-level block) ---
+            # --- Footer Section ---
             with gr.Group(elem_classes="app-footer-wrapper"):
                 gr.Markdown(
                     """
@@ -898,8 +654,7 @@ Answer:"""
                         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>
-                    """,
-                    elem_classes="footer-content" # Apply general text styling to footer markdown
+                    """
                 )
 
             # --- Event Listeners (Logic remains identical) ---
@@ -915,7 +670,7 @@ Answer:"""
                 ),
                 inputs=[], outputs=[api_key_input, query_input, state_input, output]
             )
-            logging.info("Gradio interface created with custom LegalAestheticTheme and refined CSS for optimal layout, legibility, and Hugging Face compatibility.")
+            logging.info("Gradio interface created with earneleh/paris theme and refined custom CSS.")
             return demo
 
 # --- Main Execution Block (remains untouched from original logic) ---