updated UI

app.py

@@ -57,7 +57,7 @@ Statutes from context:
 Context information:
 --- START CONTEXT ---
 {context}
---- END CONTEXT ---
+--- END CONCONTEXT ---
 Answer:"""
         self.prompt_template = PromptTemplate(
             input_variables=["query", "context", "state", "statutes"],
@@ -237,7 +237,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 (Completely Redesigned UI) ---
+    # --- GRADIO INTERFACE (Complete Overhaul for Cohesion, Legibility, and Advanced Look) ---
     def gradio_interface(self):
         def query_interface_wrapper(api_key: str, query: str, state: str) -> str:
             # Basic client-side validation for immediate feedback
@@ -277,6 +277,7 @@ Answer:"""
         example_queries = []
         if available_states_list and "Error" not in available_states_list[0] and len(available_states_list) > 0:
             loaded_states_set = set(available_states_list)
+            # Filter for examples whose state is in the loaded states
             example_queries = [ex for ex in example_queries_base if ex[1] in loaded_states_set]
             # Add a generic example if no specific state examples match or if list is empty
             if not example_queries:
@@ -285,665 +286,741 @@ Answer:"""
             example_queries.append(["What basic rights do tenants have?", "California"])
 
 
-        # --- Custom CSS for "Legal Lumen" Theme ---
+        # --- Custom CSS for "Legal Noir" Theme (Dark Mode First) ---
         custom_css = """
-        /* New Theme: Legal Lumen */
-        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Montserrat:wght@600;700;800&display=swap');
+        @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 {
-            /* Light Theme Colors */
-            --app-bg-light: #F8F9FA; /* Very light gray */
-            --surface-bg-light: #FFFFFF; /* Pure white for cards */
+            /* Dark Theme Colors (Default: Legal Noir) */
+            --app-bg-dark: #12121A; /* Deep, muted black/purple */
+            --header-bg-dark: #0A0A10; /* Even darker header background */
+            --main-content-bg-dark: #1E1E2A; /* Slightly lighter surface for main content */
+            --text-primary-dark: #EAEAF0; /* Crisp off-white for main text */
+            --text-secondary-dark: #A0A0B0; /* Muted light gray for secondary text */
+            --accent-main-dark: #FFC107; /* Vibrant Gold/Amber for primary accents */
+            --accent-hover-dark: #E0A800; /* Darker gold on hover */
+            --border-dark: #333345; /* Subtle dark border */
+            --shadow-dark: 0 1rem 3rem rgba(0,0,0,0.6); /* Deep, soft shadow for rich contrast */
+            --focus-ring-dark: rgba(255, 193, 7, 0.4); /* Gold focus ring */
+            --error-bg-dark: #4D001A; /* Deep red for errors */
+            --error-text-dark: #FFB3C2; /* Light pink for error text */
+            --error-border-dark: #990026;
+
+            /* Light Theme Colors (Alternative: Legal Lumen) */
+            --app-bg-light: #F8F9FA; /* Soft light gray background */
+            --header-bg-light: #E9ECEF; /* Lighter header background */
+            --main-content-bg-light: #FFFFFF; /* Pure white for main content */
             --text-primary-light: #212529; /* Dark charcoal */
             --text-secondary-light: #6C757D; /* Muted gray */
-            --accent-main-light: #007bff; /* Vibrant professional blue */
+            --accent-main-light: #007bff; /* Professional blue */
             --accent-hover-light: #0056b3; /* Darker blue on hover */
-            --accent-secondary-light: #6C757D; /* For secondary buttons, similar to text secondary */
-            --accent-secondary-hover-light: #5A6268; /* Darker secondary hover */
             --border-light: #DEE2E6; /* Light border */
-            --shadow-light: 0 0.5rem 1rem rgba(0,0,0,0.08); /* Subtle shadow */
-            --focus-ring-light: rgba(0, 123, 255, 0.25); /* Blue focus ring */
-            --error-bg-light: #F8D7DA; /* Light red for error backgrounds */
-            --error-text-light: #721C24; /* Dark red for error text */
-            --error-border-light: #F5C6CB; /* Red border for errors */
-
-            /* Dark Theme Colors */
-            --app-bg-dark: #212529; /* Deep dark gray */
-            --surface-bg-dark: #343A40; /* Slightly lighter dark gray for cards */
-            --text-primary-dark: #F8F9FA; /* Off-white */
-            --text-secondary-dark: #ADB5BD; /* Muted light gray */
-            --accent-main-dark: #8AB4F8; /* Lighter blue for dark mode */
-            --accent-hover-dark: #669DF6; /* Darker blue on hover for dark mode */
-            --accent-secondary-dark: #ADB5BD; /* For secondary buttons in dark mode */
-            --accent-secondary-hover-dark: #97A0A8; /* Darker secondary hover in dark mode */
-            --border-dark: #495057; /* Dark border */
-            --shadow-dark: 0 0.5rem 1rem rgba(0,0,0,0.3); /* Darker shadow */
-            --focus-ring-dark: rgba(138, 180, 248, 0.35); /* Muted blue focus ring for dark mode */
-            --error-bg-dark: #721C24; /* Dark red for error backgrounds */
-            --error-text-dark: #F8D7DA; /* Light red for error text */
-            --error-border-dark: #F5C6CB; /* Red border for errors */
+            --shadow-light: 0 0.8rem 2.5rem rgba(0,0,0,0.15); /* Soft shadow */
+            --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: 'Montserrat', sans-serif;
-            --radius-sm: 4px; /* Small border radius */
-            --radius-md: 8px; /* Medium border radius */
-            --radius-lg: 12px; /* Large border radius */
-            --transition-speed: 0.25s; /* Standard transition duration */
-        }
-
-        /* Base styles for the entire app */
+            --font-family-header: 'Playfair Display', serif; /* Elegant serif for titles */
+            --radius-sm: 8px;
+            --radius-md: 12px;
+            --radius-lg: 24px; /* Larger radius for a premium, soft feel */
+            --transition-speed: 0.5s ease-in-out; /* Slower, smoother transitions */
+            --padding-xl: 4.5rem; /* Extra large padding for spaciousness */
+            --padding-lg: 3.5rem;
+            --padding-md: 2.5rem;
+            --padding-sm: 1.8rem;
+        }
+
+        /* Apply theme based on system preference */
         body, .gradio-container {
             font-family: var(--font-family-main) !important;
-            background: var(--app-bg-light) !important;
-            color: var(--text-primary-light) !important;
+            background: var(--app-bg-dark) !important; /* Default to dark theme */
+            color: var(--text-primary-dark) !important;
             margin: 0;
             padding: 0;
             min-height: 100vh;
             font-size: 16px;
-            line-height: 1.6; /* Improved readability */
-            -webkit-font-smoothing: antialiased; /* Smoother fonts */
+            line-height: 1.75; /* Enhanced line spacing for legibility */
+            -webkit-font-smoothing: antialiased;
             -moz-osx-font-smoothing: grayscale;
+            transition: background var(--transition-speed), color var(--transition-speed);
         }
-        * { box-sizing: border-box; } /* Ensure consistent box model */
+        * { box-sizing: border-box; }
 
-        /* Dark mode preference (applies styles when user's system is in dark mode) */
-        @media (prefers-color-scheme: dark) {
+        @media (prefers-color-scheme: light) {
             body, .gradio-container {
-                background: var(--app-bg-dark) !important;
-                color: var(--text-primary-dark) !important;
+                background: var(--app-bg-light) !important;
+                color: var(--text-primary-light) !important;
             }
         }
 
-        /* Global container styling: max-width for content, centering, and padding */
+        /* Global container for content alignment and padding */
         .gradio-container > .flex.flex-col {
-            max-width: 900px; /* Slightly wider for better content flow */
-            margin: 0 auto !important; /* Center the container */
-            padding: 2rem 1.5rem 4rem 1.5rem !important; /* Generous top, side, and bottom padding */
-            gap: 0 !important; /* Remove Gradio's default gap, manage spacing with element margins */
+            max-width: 1080px; /* Even wider for a more expansive dashboard feel */
+            margin: 0 auto !important;
+            padding: 0 !important; /* Managed by custom classes */
+            gap: 0 !important;
+            transition: padding var(--transition-speed);
         }
 
-        /* Header section styling: prominent, rounded banner */
+        /* Header styling: dynamic, centralized, and visually connecting */
         .app-header-wrapper {
-            background: linear-gradient(135deg, var(--accent-main-light) 0%, var(--accent-hover-light) 100%); /* Gradient background for depth */
-            color: #FFFFFF !important; /* White text for light theme header */
-            padding: 3rem 2rem 4rem 2rem !important; /* More vertical padding for impact */
+            background: var(--header-bg-dark); /* Solid color for header, based on theme */
+            color: var(--text-primary-dark) !important;
+            padding: var(--padding-xl) var(--padding-lg) !important;
             text-align: center !important;
-            border-radius: var(--radius-lg); /* Rounded corners for the header card */
-            box-shadow: var(--shadow-light);
-            margin-bottom: 3.5rem; /* Spacing between header and first content card */
-            position: relative; /* For animation context */
-            overflow: hidden; /* Ensure content stays within rounded corners */
+            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);
+            /* NEW: Blend with main content by overlapping its own radius */
+            margin-bottom: calc(-1 * var(--radius-lg)); 
         }
+        @media (prefers-color-scheme: light) {
+            .app-header-wrapper {
+                background: var(--header-bg-light);
+                color: var(--text-primary-light) !important;
+                box-shadow: var(--shadow-light);
+            }
+        }
+
         .app-header {
             display: flex;
             flex-direction: column;
             align-items: center;
             position: relative;
-            z-index: 1; /* Keep content above any potential background effects */
+            z-index: 1;
         }
         .app-header-logo {
-            font-size: 4rem; /* Larger icon */
-            margin-bottom: 1rem;
-            display: block;
-            line-height: 1; /* Prevent extra space below emoji */
-            animation: bounceIn 0.8s ease-out; /* Simple entry animation for logo */
+            font-size: 5.5rem; /* Even larger icon for maximum impact */
+            margin-bottom: 1.5rem;
+            line-height: 1;
+            filter: drop-shadow(0 0 15px var(--accent-main-dark)); /* Stronger glow effect for icon */
+            transform: translateY(-40px); opacity: 0; /* Initial state for animation */
+            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: 2.8rem; /* Much larger and bolder */
-            font-weight: 800; /* Extra bold */
-            margin: 0 0 0.75rem 0;
-            letter-spacing: -0.04em; /* Tighter letter spacing for a modern look */
-            text-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Subtle text shadow for depth */
-            animation: fadeInDown 1s ease-out; /* Entry animation for title */
+            font-size: 4.2rem; /* The main title: massive, bold, and dynamic */
+            font-weight: 900; /* Extra, extra bold */
+            margin: 0 0 1.2rem 0;
+            letter-spacing: -0.07em; /* Tighter for a strong presence */
+            text-shadow: 0 8px 16px rgba(0,0,0,0.5); /* Deepest shadow for depth */
+            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.25rem; /* Slightly larger tagline */
+            font-size: 1.6rem; /* Larger, more inviting tagline */
             font-weight: 300;
             opacity: 0.9;
-            max-width: 600px;
-            animation: fadeInUp 1s ease-out; /* Entry animation for tagline */
-        }
-
-        /* Dark mode header adjustments */
-        @media (prefers-color-scheme: dark) {
-            .app-header-wrapper {
-                background: linear-gradient(135deg, var(--accent-main-dark) 0%, var(--accent-hover-dark) 100%);
-                box-shadow: var(--shadow-dark);
-            }
-            .app-header-title { color: var(--text-primary-dark) !important; } /* Ensure title color adjusts for dark theme */
+            max-width: 900px;
+            transform: translateY(-40px); opacity: 0;
+            animation: fadeInSlideDown 1.5s ease-out forwards; animation-delay: 0.9s;
+            transition: opacity var(--transition-speed);
         }
 
         /* Keyframe animations for header elements */
-        @keyframes bounceIn {
-            0%, 20%, 40%, 60%, 80%, 100% {
-                -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-                transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-            }
-            0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); }
-            20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); }
-            40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); }
-            60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); }
-            80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); }
-            100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
-        }
-
-        @keyframes fadeInDown {
-            from { opacity: 0; transform: translate3d(0, -20px, 0); }
-            to { opacity: 1; transform: translate3d(0, 0, 0); }
+        @keyframes fadeInSlideDown {
+            from { opacity: 0; transform: translateY(-40px); }
+            to { opacity: 1; transform: translateY(0); }
         }
 
-        @keyframes fadeInUp {
-            from { opacity: 0; transform: translate3d(0, 20px, 0); }
-            to { opacity: 1; transform: translate3d(0, 0, 0); }
-        }
-
-
-        /* Styling for general content cards (surface elements) */
-        .content-surface {
-            background: var(--surface-bg-light) !important;
-            border-radius: var(--radius-lg) !important;
-            padding: 3rem !important; /* Consistent padding */
-            box-shadow: var(--shadow-light) !important;
-            border: 1px solid var(--border-light) !important;
-            margin-bottom: 3rem; /* Spacing between cards */
+        /* Main content area: The single, unified block containing all core functionality */
+        .main-content-area {
+            background: var(--main-content-bg-dark) !important;
+            border-radius: var(--radius-lg);
+            box-shadow: var(--shadow-dark);
+            border: 1px solid var(--border-dark) !important;
+            /* Match header's bottom radius on its top */
+            border-top-left-radius: var(--radius-lg); 
+            border-top-right-radius: var(--radius-lg);
+            margin: 0 auto 5rem auto; /* General spacing to the footer */
+            /* New: compensate for header's margin-bottom overlap */
+            padding-top: calc(var(--padding-xl) + var(--radius-lg)); /* Add back the space lost by header's overlap */
+            padding-left: var(--padding-xl) !important;
+            padding-right: var(--padding-xl) !important;
+            padding-bottom: var(--padding-lg) !important; /* Bottom padding for the whole area */
+            z-index: 1; /* Ensure it's behind header, but visually seamless */
+            position: relative;
             transition: background var(--transition-speed), border-color var(--transition-speed), box-shadow var(--transition-speed);
         }
-        .content-surface:last-child { margin-bottom: 0; } /* No bottom margin for the last surface */
-        @media (prefers-color-scheme: dark) {
-            .content-surface {
-                background: var(--surface-bg-dark) !important;
-                box-shadow: var(--shadow-dark) !important;
-                border: 1px solid var(--border-dark) !important;
+        @media (prefers-color-scheme: light) {
+            .main-content-area {
+                background: var(--main-content-bg-light) !important;
+                box-shadow: var(--shadow-light);
+                border: 1px solid var(--border-light) !important;
             }
         }
 
-        /* Section titles within content cards: centered, bold, with a clear separator */
-        .section-title, .input-form-card h3, .examples-card .gr-examples-header {
+        /* Section titles within the unified main content area */
+        .section-title { /* For 'Know Your Rights' */
             font-family: var(--font-family-header) !important;
-            font-size: 1.65rem !important; /* Slightly larger than before */
-            font-weight: 600 !important;
-            color: var(--text-primary-light) !important;
-            margin: 0 auto 2.2rem auto !important; /* Centered, with more space below title */
-            padding-bottom: 1rem !important;
-            border-bottom: 2px solid var(--border-light) !important; /* Thicker separator for emphasis */
+            font-size: 2.5rem !important; /* Larger section titles */
+            font-weight: 800 !important; /* Extra bold */
+            color: var(--text-primary-dark) !important;
             text-align: center !important;
+            margin: 0 auto 3.5rem auto !important; /* More space below */
+            padding-bottom: 1.5rem !important;
+            border-bottom: 2px solid var(--border-dark) !important;
             width: 100%;
+            transition: color var(--transition-speed), border-color var(--transition-speed);
         }
-        @media (prefers-color-scheme: dark) {
-            .section-title, .input-form-card h3, .examples-card .gr-examples-header {
-                color: var(--text-primary-dark) !important;
-                border-bottom-color: var(--border-dark) !important;
+        .sub-section-title { /* For 'Ask Your Question', 'Answer', 'Explore Sample Questions' */
+            font-family: var(--font-family-header) !important;
+            font-size: 2rem !important; /* Slightly smaller for sub-sections */
+            font-weight: 700 !important;
+            color: var(--text-primary-dark) !important;
+            text-align: center !important;
+            margin-top: 3rem !important; /* Tighter vertical spacing for more cohesive display */
+            margin-bottom: 1.5rem !important; /* Tighter coupling to content */
+            transition: color var(--transition-speed);
+        }
+        @media (prefers-color-scheme: light) {
+            .section-title, .sub-section-title {
+                color: var(--text-primary-light) !important;
+                border-bottom-color: var(--border-light) !important;
             }
         }
 
-        /* General text styling within content surfaces */
-        .content-surface p {
-            font-size: 1.05rem; /* Slightly larger body text for readability */
-            line-height: 1.7; /* Generous line height */
-            color: var(--text-secondary-light);
-            margin-bottom: 1rem;
+        /* General text styling within main content: highly legible */
+        .main-content-area p {
+            font-size: 1.15rem; /* Larger, more readable body text */
+            line-height: 1.8; /* Generous line height for comfort */
+            color: var(--text-secondary-dark);
+            margin-bottom: 1.5rem;
+            transition: color var(--transition-speed);
         }
-        .content-surface a {
-            color: var(--accent-main-light);
+        .main-content-area a {
+            color: var(--accent-main-dark);
             text-decoration: none;
             font-weight: 500;
             transition: color var(--transition-speed), text-decoration var(--transition-speed);
         }
-        .content-surface a:hover {
-            color: var(--accent-hover-light);
+        .main-content-area a:hover {
+            color: var(--accent-hover-dark);
             text-decoration: underline;
         }
-        .content-surface strong {
-            font-weight: 600;
-            color: var(--text-primary-light);
+        .main-content-area strong {
+            font-weight: 700;
+            color: var(--text-primary-dark);
+            transition: color var(--transition-speed);
         }
-        @media (prefers-color-scheme: dark) {
-            .content-surface p { color: var(--text-secondary-dark); }
-            .content-surface a { color: var(--accent-main-dark); }
-            .content-surface a:hover { color: var(--accent-hover-dark); }
-            .content-surface strong { color: var(--text-primary-dark); }
+        @media (prefers-color-scheme: light) {
+            .main-content-area p { color: var(--text-secondary-light); }
+            .main-content-area a { color: var(--accent-main-light); }
+            .main-content-area a:hover { color: var(--accent-hover-light); }
+            .main-content-area strong { color: var(--text-primary-light); }
         }
 
-        /* Input field group and layout: organized and symmetric */
-        .input-field-group { margin-bottom: 2rem; }
+        /* Horizontal rule for visual separation within the main block */
+        .section-divider {
+            border: none;
+            border-top: 1px solid var(--border-dark); /* Subtle, but present for structure */
+            margin: 4rem 0; /* Adjusted for better overall flow */
+            transition: border-color var(--transition-speed);
+        }
+        @media (prefers-color-scheme: light) { .section-divider { border-top: 1px solid var(--border-light); } }
+
+        /* Input field groups and layout: spacious and clear */
+        .input-field-group { margin-bottom: 2rem; } /* Adjusted for tighter coupling */
         .input-row {
             display: flex;
-            gap: 2rem; /* Increased gap for better spacing */
-            flex-wrap: wrap; /* Allow wrapping on smaller screens */
-            margin-bottom: 2.5rem; /* More space before buttons */
+            gap: 3rem; /* Still generous space between inputs */
+            flex-wrap: wrap;
+            margin-bottom: 3rem; /* Adjusted for tighter coupling to buttons */
         }
         .input-field {
-            flex: 1; /* Distribute space evenly */
-            min-width: 280px; /* Adjusted minimum width before wrapping */
+            flex: 1;
+            min-width: 350px; /* Wider min-width for larger inputs */
         }
 
-        /* Input labels and info text */
+        /* Input labels and info text: prominent and clear */
         .gradio-input-label {
-            font-size: 1rem !important; /* Slightly larger label */
+            font-size: 1.2rem !important; /* Larger, more prominent labels */
             font-weight: 500 !important;
-            color: var(--text-primary-light) !important;
-            margin-bottom: 0.6rem !important;
+            color: var(--text-primary-dark) !important;
+            margin-bottom: 1rem !important;
             display: block !important;
+            transition: color var(--transition-speed);
         }
         .gradio-input-info {
-            font-size: 0.85rem !important;
-            color: var(--text-secondary-light) !important;
-            margin-top: 0.4rem;
+            font-size: 1rem !important;
+            color: var(--text-secondary-dark) !important;
+            margin-top: 0.6rem;
+            transition: color var(--transition-speed);
         }
-        @media (prefers-color-scheme: dark) {
-            .gradio-input-label { color: var(--text-primary-dark) !important; }
-            .gradio-input-info { color: var(--text-secondary-dark) !important; }
+        @media (prefers-color-scheme: light) {
+            .gradio-input-label { color: var(--text-primary-light) !important; }
+            .gradio-input-info { color: var(--text-secondary-light) !important; }
         }
 
-        /* Textbox, Dropdown, Password input styling: larger and more padded */
+        /* Textbox, Dropdown, Password input styling: larger, more refined */
         .gradio-textbox textarea,
         .gradio-dropdown select,
         .gradio-textbox input[type=password] {
-            border: 1px solid var(--border-light) !important;
+            border: 2px solid var(--border-dark) !important; /* Thicker border for visibility */
             border-radius: var(--radius-md) !important;
-            padding: 1rem 1.2rem !important; /* More padding */
-            font-size: 1.05rem !important; /* Larger font size */
-            background: var(--surface-bg-light) !important;
-            color: var(--text-primary-light) !important;
+            padding: 1.3rem 1.6rem !important; /* Even more padding */
+            font-size: 1.15rem !important; /* Larger font size */
+            background: var(--main-content-bg-dark) !important;
+            color: var(--text-primary-dark) !important;
             width: 100% !important;
-            box-shadow: none !important;
-            transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
+            box-shadow: inset 0 1px 3px rgba(0,0,0,0.3); /* Inner shadow for depth */
+            transition: border-color var(--transition-speed), box-shadow var(--transition-speed), background var(--transition-speed), color var(--transition-speed);
         }
-        .gradio-textbox textarea { min-height: 140px; } /* Taller textarea for more input visibility */
+        .gradio-textbox textarea { min-height: 180px; } /* Taller textarea */
         .gradio-textbox textarea::placeholder,
-        .gradio-textbox input[type=password]::placeholder {
-            color: #A0AEC0 !important; /* Consistent placeholder color */
-        }
+        .gradio-textbox input[type=password]::placeholder { color: #808090 !important; } /* Improved placeholder color */
         .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 3px var(--focus-ring-light) !important; /* Accent color focus ring */
+            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); /* Stronger focus ring and inner shadow */
             outline: none !important;
         }
-        @media (prefers-color-scheme: dark) {
+        @media (prefers-color-scheme: light) {
             .gradio-textbox textarea,
             .gradio-dropdown select,
             .gradio-textbox input[type=password] {
-                border: 1px solid var(--border-dark) !important;
-                background: var(--surface-bg-dark) !important;
-                color: var(--text-primary-dark) !important;
+                border: 2px solid var(--border-light) !important;
+                background: var(--main-content-bg-light) !important;
+                color: var(--text-primary-light) !important;
+                box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
             }
             .gradio-textbox textarea::placeholder,
-            .gradio-textbox input[type=password]::placeholder {
-                color: #718096 !important;
-            }
+            .gradio-textbox input[type=password]::placeholder { color: #A0AEC0 !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 3px var(--focus-ring-dark) !important;
+                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);
             }
         }
 
-        /* Custom dropdown arrow for consistent look (re-applied for new colors) */
+        /* Custom dropdown arrow */
         .gradio-dropdown select {
-            appearance: none; /* Remove native arrow */
-            -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%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');
+            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.2rem center; /* Adjusted position */
-            background-size: 1.1em; /* Slightly larger arrow */
-            padding-right: 3.5rem !important; /* Make space for arrow */
+            background-position: right 1.8rem center;
+            background-size: 1.4em; /* Larger arrow */
+            padding-right: 5rem !important;
         }
-        @media (prefers-color-scheme: dark) {
+        @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%23ADB5BD%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-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 group and styling: dynamic and clear actions */
         .button-row {
             display: flex;
-            gap: 1.5rem; /* More space between buttons */
-            margin-top: 2rem;
+            gap: 2.5rem;
+            margin-top: 2.5rem;
             flex-wrap: wrap;
-            justify-content: flex-end; /* Align buttons to the right */
+            justify-content: flex-end;
         }
         .gradio-button {
             border-radius: var(--radius-md) !important;
-            padding: 0.9rem 2rem !important; /* More padding */
-            font-size: 1.05rem !important; /* Larger font */
-            font-weight: 500 !important;
+            padding: 1.2rem 2.8rem !important; /* More padding */
+            font-size: 1.15rem !important; /* Larger font */
+            font-weight: 600 !important; /* Bolder text */
             border: 1px solid transparent !important;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Subtle shadow for primary */
-            transition: all var(--transition-speed) ease; /* Smooth transition for hover/active states */
+            box-shadow: 0 6px 20px rgba(0,0,0,0.35); /* Deeper shadow */
+            transition: all var(--transition-speed) cubic-bezier(0.0, 0.0, 0.2, 1); /* Enhanced cubic-bezier for springy feel */
         }
         .gradio-button:hover:not(:disabled) {
-            transform: translateY(-3px); /* More pronounced lift on hover */
-            box-shadow: 0 6px 12px rgba(0,0,0,0.15) !important;
+            transform: translateY(-6px); /* More pronounced lift */
+            box-shadow: 0 12px 28px rgba(0,0,0,0.45) !important;
         }
-        .gradio-button:active:not(:disabled) { transform: translateY(-1px); } /* Slight press effect */
+        .gradio-button:active:not(:disabled) { transform: translateY(-3px); }
         .gradio-button:disabled {
-            background: #E9ECEF !important;
-            color: #ADB5BD !important;
+            background: #3A3A50 !important;
+            color: #6A6A80 !important;
             box-shadow: none !important;
-            border-color: #DEE2E6 !important;
+            border-color: #4A4A60 !important;
             cursor: not-allowed;
         }
 
-        /* Primary button (Submit Query) */
+        /* Primary button */
         .gr-button-primary {
-            background: var(--accent-main-light) !important;
-            color: #FFFFFF !important;
-            border-color: var(--accent-main-light) !important;
+            background: var(--accent-main-dark) !important;
+            color: #12121A !important; /* Dark text on gold */
+            border-color: var(--accent-main-dark) !important;
         }
         .gr-button-primary:hover:not(:disabled) {
-            background: var(--accent-hover-light) !important;
-            border-color: var(--accent-hover-light) !important;
+            background: var(--accent-hover-dark) !important;
+            border-color: var(--accent-hover-dark) !important;
         }
 
-        /* Secondary button (Clear) */
+        /* Secondary button */
         .gr-button-secondary {
-            background: transparent !important; /* Transparent background */
-            color: var(--accent-secondary-light) !important;
-            border-color: var(--accent-secondary-light) !important; /* Border in accent color */
-            box-shadow: none !important; /* No shadow for secondary button */
+            background: transparent !important;
+            color: var(--text-secondary-dark) !important;
+            border: 2px solid var(--border-dark) !important; /* More prominent border */
+            box-shadow: none !important;
         }
         .gr-button-secondary:hover:not(:disabled) {
-            background: rgba(0, 123, 255, 0.05) !important; /* Very light hover background */
-            color: var(--accent-hover-light) !important;
-            border-color: var(--accent-hover-light) !important;
-            box-shadow: none !important;
+            background: rgba(255, 193, 7, 0.15) !important; /* Gold tint on hover */
+            color: var(--accent-main-dark) !important;
+            border-color: var(--accent-main-dark) !important;
         }
 
-        @media (prefers-color-scheme: dark) {
-            .gradio-button { box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important; }
-            .gradio-button:hover:not(:disabled) { box-shadow: 0 6px 12px rgba(0,0,0,0.3) !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: #495057 !important;
-                color: #6C757D !important;
-                border-color: #6C757D !important;
+                background: #E9ECEF !important;
+                color: #ADB5BD !important;
+                border-color: #DEE2E6 !important;
             }
             .gr-button-primary {
-                background: var(--accent-main-dark) !important;
-                color: var(--text-primary-dark) !important; /* Text color contrasts with dark accent */
-                border-color: var(--accent-main-dark) !important;
+                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-dark) !important;
-                border-color: var(--accent-hover-dark) !important;
+                background: var(--accent-hover-light) !important;
+                border-color: var(--accent-hover-light) !important;
             }
             .gr-button-secondary {
                 background: transparent !important;
-                color: var(--accent-secondary-dark) !important;
-                border-color: var(--accent-secondary-dark) !important;
+                color: var(--text-secondary-light) !important;
+                border: 2px solid var(--border-light) !important;
             }
             .gr-button-secondary:hover:not(:disabled) {
-                background: rgba(138, 180, 248, 0.1) !important; /* Light blue hover for dark secondary */
-                color: var(--accent-hover-dark) !important;
-                border-color: var(--accent-hover-dark) !important;
+                background: rgba(0, 123, 255, 0.1) !important;
+                color: var(--accent-main-light) !important;
+                border-color: var(--accent-main-light) !important;
             }
         }
 
-        /* Output Card Styling: clear structure for answers */
+        /* Output Styling within the main content area */
         .output-card .response-header {
-            font-size: 1.4rem; /* Larger header */
-            font-weight: 600;
-            color: var(--text-primary-light);
-            margin: 0 0 1.2rem 0;
+            font-size: 1.8rem; /* Larger and clearer */
+            font-weight: 700;
+            color: var(--text-primary-dark);
+            margin: 0 0 1.5rem 0;
             display: flex;
             align-items: center;
-            gap: 0.8rem; /* Space between icon and text */
+            gap: 1.2rem;
+            transition: color var(--transition-speed);
         }
         .output-card .response-icon {
-            font-size: 1.6rem;
-            color: var(--accent-main-light); /* Accent color for icon */
+            font-size: 2rem; /* Larger icon */
+            color: var(--accent-main-dark);
+            transition: color var(--transition-speed);
         }
         .output-card .divider {
             border: none;
-            border-top: 1px solid var(--border-light);
-            margin: 1.5rem 0 2rem 0; /* More spacing around divider */
+            border-top: 1px solid var(--border-dark);
+            margin: 2rem 0 2.5rem 0;
+            transition: border-color var(--transition-speed);
         }
         .output-card .output-content-wrapper {
-            font-size: 1.05rem;
-            line-height: 1.7;
-            color: var(--text-primary-light);
+            font-size: 1.15rem; /* Highly legible output text */
+            line-height: 1.8;
+            color: var(--text-primary-dark);
+            transition: color var(--transition-speed);
         }
         .output-card .output-content-wrapper p { margin-bottom: 1rem; }
         .output-card .output-content-wrapper ul,
         .output-card .output-content-wrapper ol {
-            margin-left: 1.8rem; /* More indentation for lists */
-            margin-bottom: 1rem;
+            margin-left: 2.2rem; /* More indentation */
+            margin-bottom: 1.2rem;
             padding-left: 0;
-            list-style-type: disc; /* Ensure consistent bullet style */
+            list-style-type: disc;
         }
-        .output-card .output-content-wrapper ol { list-style-type: decimal; } /* Numbered lists */
-        .output-card .output-content-wrapper li { margin-bottom: 0.6rem; }
-        .output-card .output-content-wrapper strong { font-weight: 700; } /* Bolder strong text within output */
+        .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-light);
-            text-decoration: underline; /* Links in output should be underlined for clarity */
+            color: var(--accent-main-dark);
+            text-decoration: underline;
         }
         .output-card .output-content-wrapper a:hover {
-            color: var(--accent-hover-light);
+            color: var(--accent-hover-dark);
         }
 
-        @media (prefers-color-scheme: dark) {
-            .output-card .response-header { color: var(--text-primary-dark); }
-            .output-card .response-icon { color: var(--accent-main-dark); }
-            .output-card .divider { border-top: 1px solid var(--border-dark); }
-            .output-card .output-content-wrapper { color: var(--text-primary-dark); }
-            .output-card .output-content-wrapper a { color: var(--accent-main-dark); }
-            .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); }
         }
 
-        /* Error and Success Messages: visually distinct and informative */
+        /* Error messages: clear, prominent, and legible */
         .output-card .error-message {
-            padding: 1rem 1.5rem;
-            margin-top: 1.5rem;
-            font-size: 1rem;
+            padding: 1.8rem 2.5rem;
+            margin-top: 2.5rem;
+            font-size: 1.1rem;
             border-radius: var(--radius-md);
-            background: var(--error-bg-light);
-            color: var(--error-text-light);
-            border: 1px solid var(--error-border-light);
-            display: flex; /* Use flexbox for icon and text alignment */
-            align-items: flex-start; /* Align text to top if icon is taller */
-            gap: 0.8em;
+            background: var(--error-bg-dark);
+            color: var(--error-text-dark);
+            border: 2px solid var(--error-border-dark);
+            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.4rem;
-            line-height: 1; /* Ensure icon is vertically centered */
-            padding-top: 0.1em; /* Fine tune vertical alignment */
+            font-size: 1.8rem;
+            line-height: 1;
+            padding-top: 0.1em;
         }
         .output-card .error-details {
-            font-size: 0.9rem;
-            margin-top: 0.6rem;
+            font-size: 0.95rem;
+            margin-top: 0.8rem;
             opacity: 0.9;
-            word-break: break-word; /* Prevent long URLs/messages from overflowing */
+            word-break: break-word;
         }
-        @media (prefers-color-scheme: dark) {
+        @media (prefers-color-scheme: light) {
             .output-card .error-message {
-                background: var(--error-bg-dark);
-                color: var(--error-text-dark);
-                border: 1px solid var(--error-border-dark);
+                background: var(--error-bg-light);
+                color: var(--error-text-light);
+                border: 2px solid var(--error-border-light);
             }
         }
 
-        /* Placeholder styling for empty output area */
+        /* Output placeholder styling: inviting and distinct */
         .output-card .placeholder {
-            padding: 3.5rem 1.5rem; /* More vertical padding */
-            font-size: 1.15rem; /* Larger placeholder text */
-            border-radius: var(--radius-lg);
-            border: 2px dashed var(--border-light);
-            color: var(--text-secondary-light);
+            padding: 5rem 2rem;
+            font-size: 1.3rem; /* Larger, more inviting placeholder */
+            border-radius: var(--radius-md);
+            border: 3px dashed var(--border-dark); /* Thicker dashed border */
+            color: var(--text-secondary-dark);
             text-align: center;
             opacity: 0.8;
+            transition: border-color var(--transition-speed), color var(--transition-speed);
         }
-        @media (prefers-color-scheme: dark) {
+        @media (prefers-color-scheme: light) {
             .output-card .placeholder {
-                border-color: var(--border-dark);
-                color: var(--text-secondary-dark);
+                border-color: var(--border-light);
+                color: var(--text-secondary-light);
             }
         }
 
-        /* Examples table styling: clean and interactive */
-        .examples-card .gr-examples-table {
-            border-radius: var(--radius-lg) !important;
-            border: 1px solid var(--border-light) !important;
-            overflow: hidden; /* Ensures border-radius is applied to table */
+        /* Examples table styling: integrated within the main content block, but with clear visual identity */
+        /* Applied to the gr.Column that wraps the examples */
+        .examples-section {
+            padding-top: 4.5rem; /* Generous top padding to separate from Answer section */
+            /* No background/border/shadow here, as it's part of the main-content-area */
         }
-        .examples-card .gr-examples-table th,
-        .examples-card .gr-examples-table td {
-            padding: 1rem 1.2rem !important; /* More padding */
-            font-size: 0.98rem !important;
-            border: none !important; /* Remove individual cell borders */
+        .examples-section .gr-examples-table {
+            border-radius: var(--radius-md) !important;
+            border: 1px solid var(--border-dark) !important;
+            overflow: hidden;
+            background: var(--main-content-bg-dark) !important; /* Ensure table matches main content background */
+            box-shadow: inset 0 0 10px rgba(0,0,0,0.2); /* Subtle inner shadow */
+            transition: border-color var(--transition-speed), background var(--transition-speed), box-shadow var(--transition-speed);
+        }
+        @media (prefers-color-scheme: light) {
+            .examples-section .gr-examples-table {
+                border: 1px solid var(--border-light) !important;
+                background: var(--main-content-bg-light) !important;
+                box-shadow: inset 0 0 8px rgba(0,0,0,0.05);
+            }
         }
-        .examples-card .gr-examples-table th {
-            background: var(--app-bg-light) !important; /* Match app background for table header for seamless look */
-            color: var(--text-primary-light) !important;
+
+        .examples-section .gr-examples-table th,
+        .examples-section .gr-examples-table td {
+            padding: 1.1rem 1.4rem !important; /* Slightly reduced padding for tighter coupling */
+            font-size: 1.05rem !important;
+            border: none !important;
+        }
+        .examples-section .gr-examples-table th {
+            background: var(--app-bg-dark) !important; /* Match app background for table header */
+            color: var(--text-primary-dark) !important;
             font-weight: 600 !important;
             text-align: left;
+            transition: background var(--transition-speed), color var(--transition-speed);
         }
-        .examples-card .gr-examples-table td {
-            background: var(--surface-bg-light) !important;
-            color: var(--text-primary-light) !important;
-            border-top: 1px solid var(--border-light) !important; /* Add horizontal rule between rows */
-            cursor: pointer; /* Indicate clickable rows */
-            transition: background var(--transition-speed);
+        .examples-section .gr-examples-table td {
+            background: var(--main-content-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);
         }
-        .examples-card .gr-examples-table tr:hover td {
-            background: rgba(0, 123, 255, 0.03) !important; /* Very light hover effect */
+        .examples-section .gr-examples-table tr:hover td {
+            background: rgba(255, 193, 7, 0.1) !important; /* Gold tint on hover */
         }
-        .examples-card .gr-examples-table tr:first-child td { border-top: none !important; } /* No top border for first row's cells */
+        .examples-section .gr-examples-table tr:first-child td { border-top: none !important; }
 
-        @media (prefers-color-scheme: dark) {
-            .examples-card .gr-examples-table { border: 1px solid var(--border-dark) !important;}
-            .examples-card .gr-examples-table th {
-                background: var(--app-bg-dark) !important;
-                color: var(--text-primary-dark) !important;
-            }
-            .examples-card .gr-examples-table td {
-                background: var(--surface-bg-dark) !important;
-                color: var(--text-primary-dark) !important;
-                border-top: 1px solid var(--border-dark) !important;
-            }
-            .examples-card .gr-examples-table tr:hover td {
-                background: rgba(138, 180, 248, 0.1) !important; /* Light blue hover for dark table */
-            }
+        @media (prefers-color-scheme: light) {
+            .examples-section .gr-examples-table { border: 1px solid var(--border-light) !important; background: var(--main-content-bg-light) !important; }
+            .examples-section .gr-examples-table th { background: var(--app-bg-light) !important; color: var(--text-primary-light) !important; }
+            .examples-section .gr-examples-table td { background: var(--main-content-bg-light) !important; color: var(--text-primary-light) !important; border-top: 1px solid var(--border-light) !important; }
+            .examples-section .gr-examples-table tr:hover td { background: rgba(0, 123, 255, 0.08) !important; }
         }
 
-        /* Footer styling: clean and informative */
+
+        /* Footer styling: clean and informative, integrated at the very bottom */
         .app-footer-wrapper {
-            border-top: 1px solid var(--border-light) !important;
-            margin-top: 3.5rem; /* Spacing from last content card */
-            padding-top: 3rem; /* Padding above footer content */
+            background: var(--header-bg-dark); /* Match header/app background for consistency */
+            border-top: 1px solid var(--border-dark) !important;
+            margin-top: 5rem; /* Reduced space from last content for cohesion */
+            padding-top: 4rem;
+            padding-bottom: 4rem;
+            border-top-left-radius: var(--radius-lg);
+            border-top-right-radius: var(--radius-lg);
+            box-shadow: inset 0 8px 15px rgba(0,0,0,0.2); /* Inset shadow for depth */
+            transition: background var(--transition-speed), border-color var(--transition-speed), box-shadow var(--transition-speed);
         }
+        @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);
+            }
+        }
+
         .app-footer {
-            padding: 0 1.5rem !important;
+            padding: 0 var(--padding-lg) !important;
             text-align: center !important;
             display: flex;
             flex-direction: column;
             align-items: center;
         }
         .app-footer p {
-            font-size: 0.95rem !important;
-            color: var(--text-secondary-light) !important;
-            margin-bottom: 0.8rem;
-            max-width: 650px; /* Constrain text width for readability */
+            font-size: 1.05rem !important;
+            color: var(--text-secondary-dark) !important;
+            margin-bottom: 1rem;
+            max-width: 900px;
+            transition: color var(--transition-speed);
         }
         .app-footer a {
-            color: var(--accent-main-light) !important;
+            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-light) !important;
+            color: var(--accent-hover-dark) !important;
             text-decoration: underline;
         }
-        @media (prefers-color-scheme: dark) {
-            .app-footer-wrapper { border-top-color: var(--border-dark) !important; }
-            .app-footer p { color: var(--text-secondary-dark) !important; }
-            .app-footer a { color: var(--accent-main-dark) !important; }
-            .app-footer a:hover { color: var(--accent-hover-dark) !important; }
+        @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; }
         }
 
-        /* Accessibility: Focus styles for keyboard navigation */
+        /* Accessibility: Focus styles */
         :focus-visible {
-            outline: 2px solid var(--accent-main-light) !important;
-            outline-offset: 2px;
-            box-shadow: 0 0 0 4px var(--focus-ring-light) !important; /* Thicker, more visible focus ring */
+            outline: 5px solid var(--accent-main-dark) !important; /* Even thicker for accessibility */
+            outline-offset: 5px;
+            box-shadow: 0 0 0 8px var(--focus-ring-dark) !important;
+            border-radius: var(--radius-md) !important; /* Ensure border-radius for focus */
         }
-        @media (prefers-color-scheme: dark) {
+        @media (prefers-color-scheme: light) {
             :focus-visible {
-                outline-color: var(--accent-main-dark) !important;
-                box-shadow: 0 0 0 4px var(--focus-ring-dark) !important;
+                outline-color: var(--accent-main-light) !important;
+                box_shadow: 0 0 0 8px var(--focus-ring-light) !important;
             }
         }
-        /* Prevent double focus outline on Gradio buttons' internal span */
         .gradio-button span:focus { outline: none !important; }
 
-
-        /* Essential overrides to ensure custom styles take precedence over Gradio defaults */
-        .gradio-container > .flex { gap: 0 !important; } /* Remove main container gap */
-        .gradio-markdown > *:first-child { margin-top: 0; } /* Remove top margin from first element in Markdown */
-        .gradio-markdown > *:last-child { margin-bottom: 0; } /* Remove bottom margin from last element in Markdown */
-        /* Remove default Gradio component borders/padding that interfere with custom styling */
+        /* Gradio Overrides for full control - PERMANENTLY HIDE UNWANTED LABELS */
+        .gradio-container > .flex { gap: 0 !important; }
+        .gradio-markdown > *:first-child { margin-top: 0; }
+        .gradio-markdown > *:last-child { margin-bottom: 0; }
         .gradio-dropdown, .gradio-textbox { border: none !important; padding: 0 !important; background: transparent !important; }
-
-        /* Responsive adjustments for various screen sizes */
-        @media (max-width: 992px) {
-            .gradio-container > .flex.flex-col { max-width: 760px; padding: 1.5rem 1.25rem 3.5rem 1.25rem !important; }
-            .content-surface { padding: 2.5rem !important; margin-bottom: 2.5rem; }
-            .app-header-wrapper { padding: 2.5rem 1.5rem 3.5rem 1.5rem !important; margin-bottom: 3rem; }
-            .app-header-title { font-size: 2.5rem; }
-            .app-header-tagline { font-size: 1.15rem; }
-            .section-title, .input-form-card h3, .examples-card .gr-examples-header { font-size: 1.5rem !important; margin-bottom: 2rem !important; }
-            .input-row { gap: 1.5rem; }
-            .gradio-textbox textarea { min-height: 120px; }
+        
+        /* MOST AGGRESSIVE "FALSE" REMOVAL - GRADIO'S INTERNAL LABELS ARE PURE EVIL */
+        /* These cover various Gradio versions and nesting patterns */
+        .gr-box.gr-component.gradio-example { position: relative !important; } /* Needed for absolute positioning if child is default label */
+        .gr-examples .gradio-html div[dir="auto"].primary span { display: none !important; } /* Hides "false" directly */
+        .gr-examples-header { display: none !important; } /* Hides default Gradio example header */
+        .gr-examples .label-wrap { display: none !important; } /* Targets another common label wrapper */
+        .gr-label { display: none !important; } /* General label suppression for Gradio 4.0+ if it's generic */
+
+
+        /* Responsive Adjustments (meticulously refined) */
+        @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 { margin-bottom: calc(-1 * var(--radius-md)); /* Smaller radius for smaller screens */ }
+            .main-content-area { padding: var(--padding-lg) var(--padding-lg) !important; border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); }
+            .main-content-area { padding-top: calc(var(--padding-lg) + var(--radius-md)); }
+            .section-title { font-size: 2.2rem !important; margin-bottom: 3rem !important; }
+            .sub-section-title { font-size: 1.8rem !important; margin-top: 3rem !important; margin-bottom: 1.5rem !important; }
+            .section-divider { margin: 3.5rem 0; }
+            .input-row { gap: 2.5rem; }
+            .input-field { min-width: 300px; }
+            .gradio-textbox textarea { min-height: 160px; }
+            .output-card .response-header { font-size: 1.7rem; }
+            .examples-section { padding-top: 4rem; }
+            .examples-section .gr-examples-table th, .examples-section .gr-examples-table td { padding: 1.1rem 1.4rem !important; }
+            .app-footer-wrapper { margin-top: 4rem; border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); }
         }
 
         @media (max-width: 768px) {
-            .gradio-container > .flex.flex-col { padding: 1rem 1rem 3rem 1rem !important; }
-            .content-surface { padding: 2rem !important; margin-bottom: 2rem; }
-            .app-header-wrapper { padding: 2rem 1.25rem 3rem 1.25rem !important; margin-bottom: 2.5rem; }
-            .app-header-logo { font-size: 3.5rem; }
-            .app-header-title { font-size: 2.2rem; letter-spacing: -0.03em; }
-            .app-header-tagline { font-size: 1.05rem; }
-            .section-title, .input-form-card h3, .examples-card .gr-examples-header { font-size: 1.4rem !important; margin-bottom: 1.8rem !important; }
-            .input-row { flex-direction: column; gap: 1.25rem; } /* Stack inputs vertically */
+            .gradio-container > .flex.flex-col { padding: 0 1rem !important; }
+            .app-header-wrapper { padding: var(--padding-md) var(--padding-md) !important; border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); }
+            .app-header-logo { font-size: 4.5rem; margin-bottom: 1rem; }
+            .app-header-title { font-size: 3.2rem; letter-spacing: -0.06em; }
+            .app-header-tagline { font-size: 1.3rem; }
+            .app-header-wrapper { margin-bottom: calc(-1 * var(--radius-md)); }
+            .main-content-area { padding: var(--padding-md) var(--padding-md) !important; border-radius: var(--radius-md); border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); }
+            .main-content-area { padding-top: calc(var(--padding-md) + var(--radius-md)); }
+            .section-title { font-size: 2rem !important; margin-bottom: 2.5rem !important; padding-bottom: 1.2rem !important; }
+            .sub-section-title { font-size: 1.6rem !important; margin-top: 3rem !important; margin-bottom: 1.5rem !important; }
+            .section-divider { margin: 3rem 0; }
+            .input-row { flex-direction: column; gap: 2rem; }
             .input-field { min-width: 100%; }
-            .button-row { justify-content: stretch; } /* Stretch buttons to full width */
-            .gradio-button { width: 100%; }
-            .output-card .response-header { font-size: 1.25rem; }
-            .output-card .response-icon { font-size: 1.4rem; }
-            .output-card .placeholder { padding: 3rem 1rem; font-size: 1.1rem; }
-            .examples-card .gr-examples-table th, .examples-card .gr-examples-table td { padding: 0.8rem 1rem !important; font-size: 0.95rem !important; }
-            .app-footer-wrapper { margin-top: 3rem; padding-top: 2.5rem; }
-            .app-footer p { font-size: 0.9rem !important; }
+            .gradio-textbox textarea { min-height: 140px; }
+            .button-row { justify-content: stretch; gap: 1.5rem; }
+            .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: 4rem 1.5rem; font-size: 1.2rem; }
+            .examples-section { padding-top: 3rem; }
+            .examples-section .gr-examples-table th, .examples-section .gr-examples-table td { padding: 1rem 1.2rem !important; font-size: 1.0rem !important; }
+            .app-footer-wrapper { margin-top: 3.5rem; padding-top: 2.5rem; padding-bottom: 2.5rem; border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); }
         }
 
         @media (max-width: 480px) {
-            .gradio-container > .flex.flex-col { padding: 0.75rem 0.75rem 2.5rem 0.75rem !important; }
-            .content-surface { padding: 1.5rem !important; margin-bottom: 1.5rem; border-radius: var(--radius-md) !important; }
-            .app-header-wrapper { padding: 1.5rem 1rem 2rem 1rem !important; margin-bottom: 2rem; border-radius: var(--radius-md); }
-            .app-header-logo { font-size: 3rem; margin-bottom: 0.75rem; }
-            .app-header-title { font-size: 2rem; letter-spacing: -0.02em; }
-            .app-header-tagline { font-size: 0.95rem; }
-            .section-title, .input-form-card h3, .examples-card .gr-examples-header { font-size: 1.25rem !important; margin-bottom: 1.5rem !important; padding-bottom: 0.75rem !important; }
-            .gradio-textbox textarea, .gradio-dropdown select, .gradio-textbox input[type=password] { font-size: 0.95rem !important; padding: 0.8rem 1rem !important; }
-            .gradio-textbox textarea { min-height: 100px; }
-            .gradio-button { padding: 0.8rem 1.2rem !important; font-size: 0.95rem !important; }
-            .output-card .response-header { font-size: 1.15rem; }
-            .output-card .response-icon { font-size: 1.3rem; }
-            .output-card .placeholder { padding: 2.5rem 0.8rem; font-size: 1rem; }
-            .examples-card .gr-examples-table th, .examples-card .gr-examples-table td { padding: 0.6rem 0.8rem !important; font-size: 0.85rem !important; }
-            .app-footer-wrapper { margin-top: 2.5rem; padding-top: 2rem; }
-            .app-footer p { font-size: 0.85rem !important; }
+            .gradio-container > .flex.flex-col { padding: 0 0.8rem !important; }
+            .app-header-wrapper { padding: var(--padding-sm) 1rem !important; border-bottom-left-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); }
+            .app-header-logo { font-size: 3.8rem; margin-bottom: 0.8rem; }
+            .app-header-title { font-size: 2.8rem; }
+            .app-header-tagline { font-size: 1.1rem; }
+            .app-header-wrapper { margin-bottom: calc(-1 * var(--radius-sm)); }
+            .main-content-area { padding: var(--padding-sm) 1rem !important; border-radius: var(--radius-sm); border-top-left-radius: var(--radius-sm); border-top-right-radius: var(--radius-sm); }
+            .main-content-area { padding-top: calc(var(--padding-sm) + var(--radius-sm)); }
+            .section-title { font-size: 1.8rem !important; margin-bottom: 2rem !important; padding-bottom: 1rem !important; }
+            .sub-section-title { font-size: 1.4rem !important; margin-top: 2.5rem !important; margin-bottom: 1.2rem !important; }
+            .section-divider { margin: 2.5rem 0; }
+            .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: 3.5rem 1rem; font-size: 1.1rem; }
+            .examples-section { padding-top: 2.5rem; }
+            .examples-section .gr-examples-table th, .examples-section .gr-examples-table td { padding: 0.8rem 1rem !important; font-size: 0.95rem !important; }
+            .app-footer-wrapper { margin-top: 3rem; padding-top: 2rem; padding-bottom: 2rem; border-top-left-radius: var(--radius-sm); border-top-right-radius: var(--radius-sm); }
         }
         """
 
         with gr.Blocks(theme=None, css=custom_css, title="Landlord-Tenant Rights Assistant") as demo:
-            # --- Header Section: Prominent, dynamic banner ---
+            # --- Header Section: Truly dynamic and bold, with animations ---
             with gr.Group(elem_classes="app-header-wrapper"):
                 gr.Markdown(
                     """
@@ -955,8 +1032,11 @@ Answer:"""
                     """
                 )
 
-            # --- "Know Your Rights" Section: Informational card ---
-            with gr.Group(elem_classes="content-surface"):
+            # --- Main Content Area: A single, unified block containing all core functionality ---
+            # This is the key change for cohesion. All inner sections are now part of this one group.
+            with gr.Group(elem_classes="main-content-area"):
+
+                # "Know Your Rights" Section
                 gr.Markdown("<h3 class='section-title'>Know Your Rights</h3>")
                 gr.Markdown(
                     """
@@ -966,21 +1046,22 @@ Answer:"""
                     """
                 )
 
-            # --- "Ask Your Question" Section (Input Form): Structured and clear inputs ---
-            with gr.Group(elem_classes="content-surface input-form-card"):
-                gr.Markdown("<h3>Ask Your Question</h3>")
+                gr.HTML("<hr class='section-divider'>") # Aesthetic divider for internal separation
+
+                # "Ask Your Question" Section (Input Form)
+                gr.Markdown("<h3>Ask Your Question</h3>", elem_classes="sub-section-title")
                 with gr.Column(elem_classes="input-field-group"):
                     api_key_input = gr.Textbox(
                         label="OpenAI API Key", type="password", placeholder="Enter your API key (e.g., sk-...)",
                         info="Required to process your query. Securely used per request, not stored.", lines=1
                     )
                 with gr.Row(elem_classes="input-row"):
-                    with gr.Column(elem_classes="input-field", min_width="58%"): # Allocate more width for the question
+                    with gr.Column(elem_classes="input-field", min_width="58%"):
                         query_input = gr.Textbox(
                             label="Your Question", placeholder="E.g., What are the rules for security deposit returns in my state?",
                             lines=5, max_lines=10
                         )
-                    with gr.Column(elem_classes="input-field", min_width="38%"): # Allocate less width for the dropdown
+                    with gr.Column(elem_classes="input-field", min_width="38%"):
                         state_input = gr.Dropdown(
                             label="Select State", choices=dropdown_choices, value=initial_value,
                             allow_custom_value=False
@@ -989,25 +1070,30 @@ 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"])
 
-            # --- Output Section: Clearly formatted answers or messages ---
-            with gr.Group(elem_classes="content-surface output-card"):
+                gr.HTML("<hr class='section-divider'>") # Another divider for separation
+
+                # Output Section
+                gr.Markdown("<h3>Answer</h3>", elem_classes="sub-section-title")
                 output = gr.Markdown(
-                    value="<div class='placeholder'>Your answer will appear here after submitting your query.</div>",
-                    elem_classes="output-content-wrapper" # This div will be replaced by the answer HTML
+                    value="<div class='placeholder output-card'>Your answer will appear here after submitting your query.</div>",
+                    elem_classes="output-content-wrapper output-card" # Apply these classes for styling
                 )
 
-            # --- "Explore Sample Questions" Section: Interactive examples ---
-            if example_queries:
-                with gr.Group(elem_classes="content-surface examples-card"):
-                    gr.Examples(
-                        examples=example_queries, inputs=[query_input, state_input],
-                        label="Explore Sample Questions", examples_per_page=5
-                    )
-            else:
-                with gr.Group(elem_classes="content-surface"):
-                    gr.Markdown("<div class='placeholder'>Sample questions could not be loaded.</div>")
+                # --- "Explore Sample Questions" Section: Integrated within the main unified block ---
+                # Fixed: Wrap gr.Examples in a gr.Column to apply elem_classes correctly.
+                with gr.Column(elem_classes="examples-section"): # Apply 'examples-section' class to this wrapper
+                    gr.Markdown("<h3>Explore Sample Questions</h3>", elem_classes="sub-section-title")
+                    if example_queries:
+                        gr.Examples(
+                            examples=example_queries, inputs=[query_input, state_input],
+                            examples_per_page=5,
+                            label=False, # This is crucial to hide the default "false" label
+                        )
+                    else:
+                        gr.Markdown("<div class='placeholder'>Sample questions could not be loaded.</div>")
 
-            # --- Footer Section: Disclaimer and author info ---
+            # --- Footer Section: Designed to blend harmoniously with header's aesthetic ---
+            # It matches the header's background, creating a top-bottom "frame" around the main content.
             with gr.Group(elem_classes="app-footer-wrapper"):
                 gr.Markdown(
                     """
@@ -1020,7 +1106,7 @@ Answer:"""
                     """
                 )
 
-            # --- Event Listeners ---
+            # --- Event Listeners (Logic remains identical) ---
             submit_button.click(
                 fn=query_interface_wrapper, inputs=[api_key_input, query_input, state_input], outputs=output, api_name="submit_query"
             )
@@ -1029,11 +1115,11 @@ Answer:"""
                     "", # Clear API key input
                     "", # Clear query input
                     initial_value, # Reset state dropdown to initial value
-                    "<div class='placeholder'>Inputs cleared. Ready for your next question.</div>" # Reset output to placeholder
+                    "<div class='placeholder output-card'>Inputs cleared. Ready for your next question.</div>" # Reset output to placeholder
                 ),
                 inputs=[], outputs=[api_key_input, query_input, state_input, output]
             )
-        logging.info("Advanced UI (Legal Lumen theme) Gradio interface created.")
+        logging.info("Fully cohesive, dynamic, and legible Gradio interface created with Legal Noir theme.")
         return demo
 
 # --- Main Execution Block (remains untouched from original logic) ---
@@ -1041,8 +1127,8 @@ if __name__ == "__main__":
     logging.info("Starting Landlord-Tenant Rights Bot application...")
     try:
         SCRIPT_DIR = os.path.dirname(os.path.abspath(__file__))
-        DEFAULT_PDF_PATH = os.path.join(SCRIPT_DIR, "tenant-landlord.pdf")
-        DEFAULT_DB_PATH = os.path.join(SCRIPT_DIR, "chroma_db")
+        DEFAULT_PDF_PATH = os.path.join(SCRIPT_DIR, "data/tenant-landlord.pdf")
+        DEFAULT_DB_PATH = os.path.join(SCRIPT_DIR, "data/chroma_db")
 
         # Use environment variables if set, otherwise default paths
         PDF_PATH = os.getenv("PDF_PATH", DEFAULT_PDF_PATH)
@@ -1050,17 +1136,21 @@ if __name__ == "__main__":
 
         # Ensure directories exist
         os.makedirs(os.path.dirname(VECTOR_DB_PATH), exist_ok=True)
-        # If PDF_PATH could point to a file in a non-existent subdirectory, uncomment:
-        # if os.path.dirname(PDF_PATH):
-        #     os.makedirs(os.path.dirname(PDF_PATH), exist_ok=True)
 
-
-        # Validate PDF file existence before proceeding
+        # Validate PDF file existence and readability before proceeding
+        logging.info(f"Attempting to load PDF from: {PDF_PATH}")
         if not os.path.exists(PDF_PATH):
             logging.error(f"FATAL: PDF file not found at the specified path: {PDF_PATH}")
-            print(f"\n--- CONFIGURATION ERROR ---\nPDF file ('{os.path.basename(PDF_PATH)}') not found at: {PDF_PATH}\nPlease ensure it exists or set 'PDF_PATH' environment variable.\n---------------------------\n")
+            print(f"\n--- CONFIGURATION ERROR ---\nPDF file ('{os.path.basename(PDF_PATH)}') not found at: {PDF_PATH}.\nPlease ensure it exists or set 'PDF_PATH' environment variable.\n---------------------------\n")
+            exit(1)
+
+        if not os.access(PDF_PATH, os.R_OK):
+            logging.error(f"FATAL: PDF file at '{PDF_PATH}' exists but is not readable. Check file permissions.")
+            print(f"\n--- PERMISSION ERROR ---\nPDF file ('{os.path.basename(PDF_PATH)}') found but not readable at: {PDF_PATH}\nPlease check file permissions (e.g., using 'chmod +r' in terminal).\n---------------------------\n")
             exit(1)
 
+        logging.info(f"PDF file '{os.path.basename(PDF_PATH)}' found and is readable.")
+
         # Initialize Vector Database and RAG System
         vector_db_instance = VectorDatabase(persist_directory=VECTOR_DB_PATH)
         rag = RAGSystem(vector_db=vector_db_instance)