updated UI v4

app.py

@@ -5,7 +5,7 @@ from functools import lru_cache
 import re
 
 import gradio as gr
-# No longer importing gradio.themes as a separate object, as we'll use a string theme directly.
+import gradio.themes as themes # Import gradio.themes
 
 try:
     # Assuming vector_db.py exists in the same directory or is installed
@@ -241,7 +241,112 @@ 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 Legibility, Layout, and Hugging Face Compatibility) ---
+    # --- NEW: Custom Gradio Theme Definition (Legal Aesthetic) ---
+    class LegalAestheticTheme(themes.Base):
+        def __init__(
+            self,
+            **kwargs,
+        ):
+            super().__init__(
+                # Custom fonts
+                font=[themes.GoogleFont("Inter"), "sans-serif"],
+                font_mono=themes.GoogleFont("JetBrains Mono"),
+                heading_font=[themes.GoogleFont("Playfair Display"), "serif"],
+
+                # --- Dark Mode Colors (Legal Noir) ---
+                # Backgrounds
+                background_page_dark="#0F0F1A", # Overall app background
+                block_background_fill_dark="#1A1A2B", # Header and main footer background
+                background_fill_primary_dark="#1E1E30", # Main dashboard container background (slightly lighter than page)
+                background_fill_secondary_dark="#2A2A40", # Inner card sections background (lighter than primary)
+                background_fill_tertiary_dark="#3F3F5A", # For things like table headers, slightly more prominent
+
+                # Text Colors
+                text_color_body_dark="#EAEAF0", # Main text
+                text_color_subdued_dark="#A0A0B0", # Secondary text, placeholders
+                text_color_header_dark="#EAEAF0", # Heading text (matches body for consistency)
+
+                # Accent/Primary Colors (Goldenrod/Amber)
+                primary_hue_dark=themes.Color("#FFC107", "#E0A800"), # Main accent color
+                primary_50_dark="#403200", # Lightest primary tint (for subtle hovers)
+
+                # Borders
+                border_color_primary_dark="#3F3F5A", # Main borders for blocks/cards
+                border_color_secondary_dark="#505060", # Lighter borders for internal elements (e.g., table rows)
+
+                # Shadows
+                shadow_lg_dark="0 1.2rem 3.5rem rgba(0,0,0,0.6)", # Large shadow for main containers
+                shadow_md_dark="0 0.8rem 2.5rem rgba(0,0,0,0.4)", # Medium shadow for cards
+                shadow_sm_dark="0 6px 20px rgba(0,0,0,0.35)", # Small shadow for buttons
+
+                # Links
+                link_text_color_dark="#FFC107",
+                link_text_color_hover_dark="#E0A800",
+
+                # Buttons (custom variant backgrounds will be handled by CSS, but theme sets default)
+                button_primary_background_dark="#FFC107",
+                button_primary_background_hover_dark="#E0A800",
+                button_primary_text_color_dark="#1A1A2B", # Dark text on primary button
+                button_secondary_background_dark="transparent", # Custom in CSS
+                button_secondary_background_hover_dark="#403200", # Custom in CSS
+                button_secondary_text_color_dark="#A0A0B0", # Custom in CSS
+                button_secondary_border_color_dark="#3F3F5A", # Custom in CSS
+
+                # Error Colors
+                color_error_50_dark="#4D001A", # Lightest error tint (for background)
+                color_error_200_dark="#990026", # Medium error (for border)
+                color_error_500_dark="#CC0033", # Main error (for icon)
+                color_error_600_dark="#FFB3C2", # Darker error (for text)
+
+
+                # --- Light Mode Colors (Legal Lumen) ---
+                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",
+
+                primary_hue_light=themes.Color("blue", "#007bff", "#0056b3"),
+                primary_50_light="#E0F0FF",
+
+                border_color_primary_light="#DDE2E8",
+                border_color_secondary_light="#CCD1D7",
+
+                shadow_lg_light="0 0.8rem 2.5rem rgba(0,0,0,0.15)",
+                shadow_md_light="0 0.6rem 2rem rgba(0,0,0,0.1)",
+                shadow_sm_light="0 3px 10px rgba(0,0,0,0.08)",
+
+                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",
+                button_secondary_background_light="transparent",
+                button_secondary_background_hover_light="#E0F0FF",
+                button_secondary_text_color_light="#6C757D",
+                button_secondary_border_color_light="#DDE2E8",
+
+                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)
+                radius_xs="4px",
+                radius_sm="8px",
+                radius_md="12px",
+                radius_lg="24px",
+                spacing_md="2.5rem", # Matches gaps between major sections
+                spacing_lg="3.5rem", # Matches padding for header/main dashboard
+                spacing_xl="4.5rem", # Matches header padding top/bottom
+                **kwargs,
+            )
+
     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)
@@ -262,7 +367,7 @@ Answer:"""
             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='divider'>{answer}"
+                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}"
                 return formatted_response
 
         try:
@@ -294,7 +399,7 @@ Answer:"""
 
 
         # --- Minimal Custom CSS for structural/behavioral overrides and specific aesthetics ---
-        # This CSS is designed to complement 'earneleh/paris' and fix layout issues on Hugging Face.
+        # This CSS is designed to complement our custom LegalAestheticTheme.
         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');
 
@@ -302,26 +407,31 @@ Answer:"""
         @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: 'Inter', sans-serif !important; /* Ensure Inter is main font */
             min-height: 100vh;
             display: flex;
-            justify-content: center;
-            align-items: flex-start; /* Align content to top */
-            padding: 2.5rem 1rem; /* Overall padding */
+            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;
         }
         .gradio-container > .flex.flex-col {
             max-width: 1120px; /* Constrain max width for desktop */
             width: 100%;
-            margin: 0 auto;
-            gap: 2.5rem !important; /* Consistent spacing between main sections */
+            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 */
         }
 
         /* Header specific styling (outside main dashboard for distinct look) */
         .app-header-wrapper {
             background-color: var(--block-background-fill); /* Use theme's block background */
-            padding: 3.5rem 2.5rem; /* Spacious padding */
+            padding: var(--spacing-xl) var(--spacing-lg); /* Spacious padding */
             text-align: center;
             border-radius: var(--radius-lg); /* Use theme radius */
             box-shadow: var(--shadow-lg); /* Use theme shadow */
@@ -364,7 +474,7 @@ Answer:"""
             background-color: var(--background-fill-primary); /* Use theme's main background */
             border-radius: var(--radius-lg);
             box-shadow: var(--shadow-lg);
-            padding: 2.5rem; /* Inner padding for the whole dashboard content */
+            padding: var(--spacing-md); /* Inner padding for the whole dashboard content */
             border: 1px solid var(--border-color-primary);
         }
 
@@ -383,7 +493,7 @@ Answer:"""
             font-size: 2.2rem !important;
             font-weight: 800 !important;
             color: var(--text-color-body) !important; /* Use theme body text color */
-            text-align: center !important;
+            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;
@@ -391,6 +501,7 @@ Answer:"""
 
         /* General text styling within cards */
         .dashboard-card-section p {
+            font-family: 'Inter', sans-serif !important;
             font-size: 1.1rem;
             line-height: 1.6;
             color: var(--text-color-body);
@@ -423,17 +534,20 @@ Answer:"""
         .gradio-input-info a:hover {
             color: var(--link-text-color-hover);
         }
-        /* Style for the dropdown arrow */
+        /* 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%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') !important;
+            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 */
         }
-        @media (prefers-color-scheme: dark) {
-             .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%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') !important;
+        /* 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 */
+        @media (prefers-color-scheme: light) {
+            .gradio-dropdown select {
+                color: var(--text-color-body) !important; /* Ensure dropdown text is dark */
             }
         }
 
@@ -455,25 +569,17 @@ Answer:"""
         .gradio-button:active:not(:disabled) {
             transform: translateY(0);
         }
-        .gr-button-primary {
-            background-color: var(--primary-500) !important; /* Use theme primary color */
-            color: var(--text-color-body) !important; /* Match text to body color for contrast */
-            border-color: var(--primary-500) !important;
-        }
-        .gr-button-primary:hover:not(:disabled) {
-            background-color: var(--primary-600) !important; /* Darker primary on hover */
-            border-color: var(--primary-600) !important;
-        }
+        /* 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;
+            color: var(--text-color-body) !important; /* Use theme body text for secondary button */
             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;
-            border-color: var(--primary-500) !important;
+            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 */
@@ -495,12 +601,13 @@ Answer:"""
             margin: 0;
             padding: 0;
         }
-        .output-content-wrapper .divider {
+        .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: 'Inter', sans-serif !important;
             line-height: 1.7;
             font-size: 1.05rem;
             color: var(--text-color-body);
@@ -577,24 +684,25 @@ Answer:"""
         }
         .examples-section table.gr-samples-table tr:first-child td { border-top: none !important; }
 
-        /* Footer styling (at the very bottom of the page, outside main dashboard) */
+        /* Footer styling (at the very bottom of the page) */
         .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; /* Reduced padding */
+            padding: 1.5rem 2.5rem; /* Consistent padding */
             border-radius: var(--radius-lg);
             box-shadow: var(--shadow-lg);
             width: 100%;
             max-width: 1120px;
-            margin: 2.5rem auto 0 auto; /* Spacing from main dashboard */
+            margin: var(--spacing-md) auto 0 auto; /* Spacing from main dashboard */
             display: flex;
             flex-direction: column;
             align-items: flex-start; /* Left aligns the content */
         }
         .app-footer {
-            width: 100%;
+            width: 100%; /* Ensure content takes full width */
         }
         .app-footer p {
+            font-family: 'Inter', sans-serif !important;
             font-size: 0.95rem !important;
             color: var(--text-color-subdued) !important;
             margin-bottom: 0.5rem;
@@ -610,10 +718,11 @@ Answer:"""
             text-decoration: none;
         }
 
-        /* Hide unwanted Gradio default elements */
+        /* 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 */
-        #component-4 /* example element */ {
+        .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 */ {
             display: none !important;
             visibility: hidden !important;
             width: 0 !important;
@@ -627,7 +736,7 @@ Answer:"""
             position: absolute !important;
             pointer-events: none !important;
         }
-        /* More specific example label hiding */
+        /* More specific example label/button hiding */
         .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,
@@ -647,14 +756,14 @@ Answer:"""
         .gradio-container .gr-form { gap: 0 !important; } /* Remove gaps in forms where not desired */
 
 
-        /* Responsive Adjustments */
+        /* Responsive Adjustments (using hardcoded values for precision, but mapping to theme variables where applicable for color/font) */
         @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; }
+            .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; }
-            .dashboard-card-section { padding: 1.5rem; }
+            .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; }
@@ -663,21 +772,21 @@ Answer:"""
             .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; }
+            .app-footer-wrapper { padding: 1.2rem 1.8rem; margin-top: 1.5rem; border-radius: 12px; }
             .app-footer p { font-size: 0.85rem !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; }
+            .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; }
-            .dashboard-card-section { padding: 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; }
+            .app-footer-wrapper { padding: 1rem 1rem; margin-top: 1rem; border-radius: 12px; }
         }
         @media (max-width: 480px) {
             .app-header-logo { font-size: 3.5rem; } .app-header-title { font-size: 2.2rem; } .app-header-tagline { font-size: 1rem; }
@@ -688,8 +797,8 @@ Answer:"""
         }
         """
 
-        with gr.Blocks(theme="earneleh/paris", css=custom_css, title="Landlord-Tenant Rights Assistant") as demo:
-            # --- Header Section (outside main dashboard for distinct look) ---
+        with gr.Blocks(theme=self.LegalAestheticTheme(), css=custom_css, title="Landlord-Tenant Rights Assistant") as demo:
+            # --- Header Section (distinct, top-level block) ---
             with gr.Group(elem_classes="app-header-wrapper"):
                 gr.Markdown(
                     """
@@ -701,22 +810,23 @@ Answer:"""
                     """
                 )
 
-            # --- Main Dashboard Console Container (Centralized and well-structured) ---
+            # --- Main Dashboard Console Container (centralized, card-based) ---
             with gr.Column(elem_classes="main-dashboard-container"):
 
-                # --- Section 1: Introduction and Disclaimer Card ---
+                # --- Section 1: Welcome & Disclaimer Card ---
                 with gr.Group(elem_classes="dashboard-card-section"):
                     gr.Markdown("<h3 class='card-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>")
+                    gr.Markdown("<h3 class='card-section-title'>OpenAI API Key</h3>") # Centered by CSS
                     api_key_input = gr.Textbox(
                         label="OpenAI API Key", # Keep label for theme compatibility and accessibility
                         type="password", placeholder="Enter your API key (e.g., sk-...)",
@@ -724,16 +834,16 @@ Answer:"""
                         elem_classes=["input-field-group"]
                     )
 
-                # --- Section 3: Query Input and State Selection Card ---
+                # --- Section 3: Ask Your Question Card ---
                 with gr.Group(elem_classes="dashboard-card-section"):
-                    gr.Markdown("<h3 class='card-section-title'>Ask Your Question</h3>")
-                    with gr.Row(): # Removed custom elem_classes as row itself should be simple
+                    gr.Markdown("<h3 class='card-section-title'>Ask Your Question</h3>") # Centered by CSS
+                    with gr.Row():
                         with gr.Column(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
                             )
-                        with gr.Column(scale=1, min_width=200): # Give state dropdown a min-width
+                        with gr.Column(scale=1, min_width=200):
                             state_input = gr.Dropdown(
                                 label="Select State", choices=dropdown_choices, value=initial_value,
                                 allow_custom_value=False
@@ -742,17 +852,17 @@ Answer:"""
                         clear_button = gr.Button("Clear", variant="secondary", elem_classes=["gr-button-secondary"])
                         submit_button = gr.Button("Submit Query", variant="primary", elem_classes=["gr-button-primary"])
 
-                # --- Section 4: Output Display Card ---
+                # --- Section 4: Legal Assistant's Response Card ---
                 with gr.Group(elem_classes="dashboard-card-section"):
-                    gr.Markdown("<h3 class='card-section-title'>Legal Assistant's Response</h3>")
+                    gr.Markdown("<h3 class='card-section-title'>Legal Assistant's Response</h3>") # Centered by CSS
                     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 ---
+                # --- Section 5: Example Questions Card ---
                 with gr.Group(elem_classes="dashboard-card-section examples-section"):
-                    gr.Markdown("<h3 class='card-section-title'>Example Questions to Ask</h3>")
+                    gr.Markdown("<h3 class='card-section-title'>Example Questions to Ask</h3>") # Centered by CSS
                     if example_queries:
                         gr.Examples(
                             examples=example_queries, inputs=[query_input, state_input],
@@ -762,7 +872,7 @@ Answer:"""
                     else:
                         gr.Markdown("<div class='placeholder'>Sample questions could not be loaded.</div>")
 
-            # --- Footer Section (at the very bottom of the page) ---
+            # --- Footer Section (distinct, bottom-level block) ---
             with gr.Group(elem_classes="app-footer-wrapper"):
                 gr.Markdown(
                     """
@@ -772,7 +882,8 @@ 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) ---
@@ -788,7 +899,7 @@ Answer:"""
                 ),
                 inputs=[], outputs=[api_key_input, query_input, state_input, output]
             )
-            logging.info("Gradio interface created with earneleh/paris theme and refined custom CSS for optimal layout and legibility.")
+            logging.info("Gradio interface created with custom LegalAestheticTheme and refined CSS for optimal layout, legibility, and Hugging Face compatibility.")
             return demo
 
 # --- Main Execution Block (remains untouched from original logic) ---