enhanced UI

app.py

@@ -169,7 +169,7 @@ Answer:"""
 
             if not answer_text:
                 logging.warning("LLM returned an empty answer.")
-                answer_text = "<div class='error-message'>The AI model returned an empty response. This might be due to the query, context limitations, or temporary issues. Please try rephrasing your question or try again later.</div>"
+                answer_text = "<div class='error-message'><span class='error-icon'>⚠️</span>The AI model returned an empty response. This might be due to the query, context limitations, or temporary issues. Please try rephrasing your question or try again later.</div>"
             else:
                 logging.info("LLM generated answer successfully.")
 
@@ -192,7 +192,7 @@ Answer:"""
                  error_message = "Error: The request to the AI model timed out. The service might be busy."
                  details = "Please try again in a few moments."
 
-            formatted_error = f"<div class='error-message'>{error_message}</div>"
+            formatted_error = f"<div class='error-message'><span class='error-icon'>❌</span>{error_message}</div>"
             if details:
                 formatted_error += f"<div class='error-details'>{details}</div>"
 
@@ -292,29 +292,31 @@ Answer:"""
 
         :root {
             /* 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 */
+            --app-bg-dark: #0F0F1A; /* Very dark blue-purple for the absolute background */
+            --header-bg-dark: #1A1A2B; /* Darker, slightly more saturated for header/footer elements */
+            --main-card-bg-dark: #1E1E30; /* Main content "console" background */
+            --card-section-bg-dark: #2A2A40; /* Background for individual cards within the console */
             --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 */
+            --border-dark: #3F3F5A; /* Subtle dark border */
+            --shadow-dark: 0 1.2rem 3.5rem 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 */
+            --app-bg-light: #F0F2F5; /* Soft light gray background */
+            --header-bg-light: #E0E4EB; /* Lighter header/footer elements */
+            --main-card-bg-light: #FFFFFF; /* Pure white for main content "console" */
+            --card-section-bg-light: #F8F9FA; /* Background for individual cards within the console */
             --text-primary-light: #212529; /* Dark charcoal */
             --text-secondary-light: #6C757D; /* Muted gray */
             --accent-main-light: #007bff; /* Professional blue */
             --accent-hover-light: #0056b3; /* Darker blue on hover */
-            --border-light: #DEE2E6; /* Light border */
+            --border-light: #DDE2E8; /* Light border */
             --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;
@@ -324,10 +326,11 @@ Answer:"""
             /* General Styling Variables */
             --font-family-main: 'Inter', sans-serif;
             --font-family-header: 'Playfair Display', serif; /* Elegant serif for titles */
+            --radius-xs: 4px;
             --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 */
+            --transition-speed: 0.4s ease-in-out; /* Slightly faster, smoother transitions */
             --padding-xl: 4.5rem; /* Extra large padding for spaciousness */
             --padding-lg: 3.5rem;
             --padding-md: 2.5rem;
@@ -359,7 +362,7 @@ Answer:"""
 
         /* Global container for content alignment and padding */
         .gradio-container > .flex.flex-col {
-            max-width: 1080px; /* Even wider for a more expansive dashboard feel */
+            max-width: 1120px; /* Even wider for a more expansive dashboard feel */
             margin: 0 auto !important;
             padding: 0 !important; /* Managed by custom classes */
             gap: 0 !important;
@@ -368,7 +371,7 @@ Answer:"""
 
         /* Header styling: dynamic, centralized, and visually connecting */
         .app-header-wrapper {
-            background: var(--header-bg-dark); /* Solid color for header, based on theme */
+            background: var(--header-bg-dark); 
             color: var(--text-primary-dark) !important;
             padding: var(--padding-xl) var(--padding-lg) !important;
             text-align: center !important;
@@ -379,14 +382,17 @@ Answer:"""
             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)); 
+            margin-bottom: 2.5rem; /* Space between header and main console */
+            border: 1px solid var(--border-dark); /* Subtle frame */
+            border-top: none; /* No top border for flush with screen top */
         }
         @media (prefers-color-scheme: light) {
             .app-header-wrapper {
                 background: var(--header-bg-light);
                 color: var(--text-primary-light) !important;
                 box-shadow: var(--shadow-light);
+                border: 1px solid var(--border-light);
+                border-top: none;
             }
         }
 
@@ -399,7 +405,7 @@ Answer:"""
         }
         .app-header-logo {
             font-size: 5.5rem; /* Even larger icon for maximum impact */
-            margin-bottom: 1.5rem;
+            margin-bottom: 0.8rem; /* Further reduced margin */
             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 */
@@ -412,7 +418,7 @@ Answer:"""
             font-family: var(--font-family-header) !important;
             font-size: 4.2rem; /* The main title: massive, bold, and dynamic */
             font-weight: 900; /* Extra, extra bold */
-            margin: 0 0 1.2rem 0;
+            margin: 0 0 0.8rem 0; /* Further reduced margin */
             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;
@@ -438,33 +444,49 @@ Answer:"""
             to { opacity: 1; transform: translateY(0); }
         }
 
-        /* Main content area: The single, unified block containing all core functionality */
-        .main-content-area {
-            background: var(--main-content-bg-dark) !important;
+        /* --- NEW: Main Dashboard Console Container --- */
+        .main-dashboard-container {
+            background: var(--main-card-bg-dark) !important;
             border-radius: var(--radius-lg);
             box-shadow: var(--shadow-dark);
             border: 1px solid var(--border-dark) !important;
-            /* 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 */
+            padding: var(--padding-lg) !important; /* Overall padding for the console */
+            margin: 0 auto 0.8rem auto; /* Adjusted for tighter gap */
             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);
+            display: flex;
+            flex-direction: column;
+            gap: 2.5rem; /* Space between the main "cards" inside the console */
         }
         @media (prefers-color-scheme: light) {
-            .main-content-area {
-                background: var(--main-content-bg-light) !important;
+            .main-dashboard-container {
+                background: var(--main-card-bg-light) !important;
                 box-shadow: var(--shadow-light);
                 border: 1px solid var(--border-light) !important;
             }
         }
 
+        /* --- NEW: Card Sections within the Main Console --- */
+        .dashboard-card-section {
+            background: var(--card-section-bg-dark) !important;
+            border-radius: var(--radius-md);
+            border: 1px solid var(--border-dark);
+            padding: var(--padding-md); /* Padding inside each card section */
+            box-shadow: inset 0 0 10px rgba(0,0,0,0.2); /* Subtle inner shadow for depth */
+            transition: background var(--transition-speed), border-color var(--transition-speed), box-shadow var(--transition-speed);
+            display: flex;
+            flex-direction: column;
+            gap: 1.5rem; /* Space between elements within a card section */
+        }
+        @media (prefers-color-scheme: light) {
+            .dashboard-card-section {
+                background: var(--card-section-bg-light) !important;
+                border: 1px solid var(--border-light);
+                box-shadow: inset 0 0 8px rgba(0,0,0,0.05);
+            }
+        }
+
         /* Section titles within the unified main content area */
         .section-title { /* For 'Know Your Rights' */
             font-family: var(--font-family-header) !important;
@@ -472,20 +494,20 @@ Answer:"""
             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;
+            margin: 0 auto 1.8rem auto !important; /* Reduced margin from 2.5rem */
+            padding-bottom: 0.8rem !important; /* Reduced padding from 1rem */
             border-bottom: 2px solid var(--border-dark) !important;
             width: 100%;
             transition: color var(--transition-speed), border-color var(--transition-speed);
         }
-        .sub-section-title { /* For 'Ask Your Question', 'Answer', 'Explore Sample Questions' */
+        .sub-section-title { /* For 'Ask Your Question', 'Example Questions to Ask' */
             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 */
+            text-align: center !important; /* Ensures centering for all sub-section titles */
+            margin-top: 1.5rem !important; /* Reduced from 2rem */
+            margin-bottom: 0.8rem !important; /* Reduced from 1rem */
             transition: color var(--transition-speed);
         }
         @media (prefers-color-scheme: light) {
@@ -496,55 +518,54 @@ Answer:"""
         }
 
         /* General text styling within main content: highly legible */
-        .main-content-area p {
+        .dashboard-card-section p, .output-content-wrapper 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;
+            margin-bottom: 1.2rem; /* Reduced from 1.5rem */
             transition: color var(--transition-speed);
         }
-        .main-content-area a {
+        .dashboard-card-section a, .output-content-wrapper a {
             color: var(--accent-main-dark);
             text-decoration: none;
             font-weight: 500;
             transition: color var(--transition-speed), text-decoration var(--transition-speed);
         }
-        .main-content-area a:hover {
+        .dashboard-card-section a:hover, .output-content-wrapper a:hover {
             color: var(--accent-hover-dark);
             text-decoration: underline;
         }
-        .main-content-area strong {
+        .dashboard-card-section strong, .output-content-wrapper strong {
             font-weight: 700;
             color: var(--text-primary-dark);
             transition: color var(--transition-speed);
         }
         @media (prefers-color-scheme: light) {
-            .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); }
+            .dashboard-card-section p, .output-content-wrapper p { color: var(--text-secondary-light); }
+            .dashboard-card-section a, .output-content-wrapper a { color: var(--accent-main-light); }
+            .dashboard-card-section a:hover, .output-content-wrapper a:hover { color: var(--accent-hover-light); }
+            .dashboard-card-section strong, .output-content-wrapper strong { color: var(--text-primary-light); }
         }
 
         /* 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 */
+            margin: 2rem 0 !important; /* Reduced from 2.5rem */
             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-field-group { margin-bottom: 1rem; } /* Reduced from 1.5rem */
         .input-row {
             display: flex;
-            gap: 3rem; /* Still generous space between inputs */
+            gap: 1.8rem; /* Reduced from 2rem */
             flex-wrap: wrap;
-            margin-bottom: 3rem; /* Adjusted for tighter coupling to buttons */
+            margin-bottom: 1rem; /* Reduced from 1.5rem */
         }
         .input-field {
-            flex: 1;
-            min-width: 350px; /* Wider min-width for larger inputs */
+            flex: 1; /* Allows flexible sizing */
         }
 
         /* Input labels and info text: prominent and clear */
@@ -552,7 +573,7 @@ Answer:"""
             font-size: 1.2rem !important; /* Larger, more prominent labels */
             font-weight: 500 !important;
             color: var(--text-primary-dark) !important;
-            margin-bottom: 1rem !important;
+            margin-bottom: 0.8rem !important; /* Reduced from 1rem */
             display: block !important;
             transition: color var(--transition-speed);
         }
@@ -575,7 +596,7 @@ Answer:"""
             border-radius: var(--radius-md) !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;
+            background: var(--main-card-bg-dark) !important; /* Input background matches main console */
             color: var(--text-primary-dark) !important;
             width: 100% !important;
             box-shadow: inset 0 1px 3px rgba(0,0,0,0.3); /* Inner shadow for depth */
@@ -596,7 +617,7 @@ Answer:"""
             .gradio-dropdown select,
             .gradio-textbox input[type=password] {
                 border: 2px solid var(--border-light) !important;
-                background: var(--main-content-bg-light) !important;
+                background: var(--main-card-bg-light) !important;
                 color: var(--text-primary-light) !important;
                 box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
             }
@@ -628,8 +649,8 @@ Answer:"""
         /* Button group and styling: dynamic and clear actions */
         .button-row {
             display: flex;
-            gap: 2.5rem;
-            margin-top: 2.5rem;
+            gap: 2rem; /* Reduced from 2.5rem */
+            margin-top: 2rem; /* Reduced from 2.5rem */
             flex-wrap: wrap;
             justify-content: flex-end;
         }
@@ -658,7 +679,7 @@ Answer:"""
         /* Primary button */
         .gr-button-primary {
             background: var(--accent-main-dark) !important;
-            color: #12121A !important; /* Dark text on gold */
+            color: var(--header-bg-dark) !important; /* Dark text on gold */
             border-color: var(--accent-main-dark) !important;
         }
         .gr-button-primary:hover:not(:disabled) {
@@ -709,11 +730,16 @@ Answer:"""
         }
 
         /* Output Styling within the main content area */
-        .output-card .response-header {
+        .output-card { /* Class for the output content area markdown component */
+            padding: 0 !important; /* Markdown itself might have padding, control it within */
+            margin-top: 0 !important; /* Ensure no extra margin */
+            margin-bottom: 0 !important; /* Ensure no extra margin */
+        }
+        .output-card .response-header { /* For actual answers */
             font-size: 1.8rem; /* Larger and clearer */
             font-weight: 700;
             color: var(--text-primary-dark);
-            margin: 0 0 1.5rem 0;
+            margin: 0 0 1rem 0; /* Reduced margin */
             display: flex;
             align-items: center;
             gap: 1.2rem;
@@ -727,10 +753,10 @@ Answer:"""
         .output-card .divider {
             border: none;
             border-top: 1px solid var(--border-dark);
-            margin: 2rem 0 2.5rem 0;
+            margin: 1.5rem 0 1.8rem 0; /* Adjusted for tighter spacing */
             transition: border-color var(--transition-speed);
         }
-        .output-card .output-content-wrapper {
+        .output-card .output-content-wrapper { /* Applies to the entire markdown content block */
             font-size: 1.15rem; /* Highly legible output text */
             line-height: 1.8;
             color: var(--text-primary-dark);
@@ -765,9 +791,9 @@ Answer:"""
         }
 
         /* Error messages: clear, prominent, and legible */
-        .output-card .error-message {
-            padding: 1.8rem 2.5rem;
-            margin-top: 2.5rem;
+        .output-card .error-message { /* This is also an inner div within the output markdown */
+            padding: 1.5rem 2rem; /* Reduced padding */
+            margin-top: 1.5rem; /* Keeping this margin to separate from prev section */
             font-size: 1.1rem;
             border-radius: var(--radius-md);
             background: var(--error-bg-dark);
@@ -798,9 +824,9 @@ Answer:"""
         }
 
         /* Output placeholder styling: inviting and distinct */
-        .output-card .placeholder {
-            padding: 5rem 2rem;
-            font-size: 1.3rem; /* Larger, more inviting placeholder */
+        .output-card .placeholder { /* Also an inner div within the output markdown */
+            padding: 2.5rem 2rem; /* Reduced padding */
+            font-size: 1.2rem; /* Adjusted font size */
             border-radius: var(--radius-md);
             border: 3px dashed var(--border-dark); /* Thicker dashed border */
             color: var(--text-secondary-dark);
@@ -817,41 +843,37 @@ Answer:"""
 
         /* 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-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 */
+            background: var(--card-section-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;
+                background: var(--card-section-bg-light) !important;
                 box-shadow: inset 0 0 8px rgba(0,0,0,0.05);
             }
         }
 
         .examples-section .gr-examples-table th,
         .examples-section .gr-examples-table td {
-            padding: 1.1rem 1.4rem !important; /* Slightly reduced padding for tighter coupling */
+            padding: 1rem 1.2rem !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 */
+            background: var(--header-bg-dark) !important; /* Match header 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-section .gr-examples-table td {
-            background: var(--main-content-bg-dark) !important;
+            background: var(--card-section-bg-dark) !important;
             color: var(--text-primary-dark) !important;
             border-top: 1px solid var(--border-dark) !important;
             cursor: pointer;
@@ -863,20 +885,20 @@ Answer:"""
         .examples-section .gr-examples-table tr:first-child td { border-top: none !important; }
 
         @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 { border: 1px solid var(--border-light) !important; background: var(--card-section-bg-light) !important; }
+            .examples-section .gr-examples-table th { background: var(--header-bg-light) !important; color: var(--text-primary-light) !important; }
+            .examples-section .gr-examples-table td { background: var(--card-section-bg-light) !important; color: var(--text-primary-light) !important; border-top: 1px solid var(--border-light) !important; }
             .examples-section .gr-examples-table tr:hover td { background: rgba(0, 123, 255, 0.08) !important; }
         }
 
 
         /* Footer styling: clean and informative, integrated at the very bottom */
         .app-footer-wrapper {
-            background: var(--header-bg-dark); /* Match header/app background for consistency */
+            background: var(--header-bg-dark); /* Match header 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;
+            margin-top: 0.5rem; /* Adjusted for tighter gap, assuming minimum needed */
+            padding-top: 2.5rem; /* Reduced from 3rem */
+            padding-bottom: 2.5rem; /* Reduced from 3rem */
             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 */
@@ -935,19 +957,36 @@ Answer:"""
         }
         .gradio-button span:focus { outline: none !important; }
 
-        /* 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; }
-        
-        /* 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 */
+        /* MOST AGGRESSIVE "FALSE" REMOVAL - THIS SHOULD FINALLY KILL IT */
+        /* Targets ALL known problematic elements that might contain "false" or the menu icon */
+        .gr-examples .gr-label,
+        .gr-examples .gr-examples-header, /* Standard header for examples */
+        .gr-examples button.gr-button-filter, /* The "☰" icon button */
+        .gr-examples .label-wrap, /* Common wrapper for labels */
+        .gr-examples div[data-testid*="label-text"], /* Div containing "false" text by data-testid */
+        .gr-examples span[data-testid*="label-text"], /* Span containing "false" text by data-testid */
+        .gr-examples div[class*="label"], /* Any div with "label" in its class name */
+        .gr-examples .gr-example-label, /* Specific class for example labels */
+        .gr-examples .gr-box.gr-component.gradio-example > div:first-child:has(> span[data-testid]), /* Target parent div of specific internal spans with data-testid */
+        .gr-examples .gr-box.gr-component.gradio-example > div:first-child > span, /* Direct span within example items, often containing "false" */
+        /* Targeting elements immediately following our custom H3 within the examples-section that might still render something */
+        .examples-section .sub-section-title + div:has(> button.gr-button-filter),
+        .examples-section .sub-section-title + div:has(span[data-testid*="label-text"]),
+        .examples-section .sub-section-title + div.flex.flex-col.overflow-hidden.h-full.relative /* Catch a common Gradio wrapper div */
+        {
+            display: none !important;
+            visibility: hidden !important; /* Double down on hiding */
+            width: 0 !important;
+            height: 0 !important;
+            overflow: hidden !important;
+            margin: 0 !important;
+            padding: 0 !important;
+            border: 0 !important;
+            font-size: 0 !important;
+            line-height: 0 !important;
+            position: absolute !important; /* Take it out of normal flow */
+            pointer-events: none !important; /* Ensure it's not interactive */
+        }
 
 
         /* Responsive Adjustments (meticulously refined) */
@@ -955,72 +994,70 @@ Answer:"""
             .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; }
+            .app-header-wrapper { padding: var(--padding-md) var(--padding-lg) !important; margin-bottom: 2rem; border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); }
+            .main-dashboard-container { padding: var(--padding-md) !important; margin-bottom: 0.6rem; border-radius: var(--radius-md); gap: 2rem; }
+            .dashboard-card-section { padding: var(--padding-sm); border-radius: var(--radius-sm); }
+            .section-title { font-size: 2.2rem !important; margin-bottom: 1.5rem !important; }
+            .sub-section-title { font-size: 1.8rem !important; margin-top: 1.2rem !important; margin-bottom: 0.7rem !important; }
+            .section-divider { margin: 1.8rem 0; }
+            .input-row { gap: 1.5rem; }
+            .input-field { min-width: 280px; }
             .gradio-textbox textarea { min-height: 160px; }
             .output-card .response-header { font-size: 1.7rem; }
-            .examples-section { padding-top: 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); }
+            .examples-section { padding-top: 1.2rem; }
+            .examples-section .gr-examples-table th, .examples-section .gr-examples-table td { padding: 0.9rem 1.1rem !important; }
+            .app-footer-wrapper { margin-top: 0.6rem; border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); }
         }
 
         @media (max-width: 768px) {
             .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-wrapper { padding: var(--padding-sm) var(--padding-md) !important; margin-bottom: 1.8rem; border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); }
+            .app-header-logo { font-size: 4.5rem; margin-bottom: 0.6rem; }
             .app-header-title { font-size: 3.2rem; letter-spacing: -0.06em; }
             .app-header-tagline { font-size: 1.3rem; }
-            .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; }
+            .main-dashboard-container { padding: var(--padding-sm) !important; margin-bottom: 0.5rem; border-radius: var(--radius-md); gap: 1.8rem; }
+            .dashboard-card-section { padding: 1.5rem; border-radius: var(--radius-sm); }
+            .section-title { font-size: 2rem !important; margin-bottom: 1.2rem !important; }
+            .sub-section-title { font-size: 1.6rem !important; margin-top: 1rem !important; margin-bottom: 0.6rem !important; }
+            .section-divider { margin: 1.5rem 0; }
+            .input-row { flex-direction: column; gap: 1rem; }
             .input-field { min-width: 100%; }
             .gradio-textbox textarea { min-height: 140px; }
-            .button-row { justify-content: stretch; gap: 1.5rem; }
+            .button-row { justify-content: stretch; gap: 1rem; }
             .gradio-button { width: 100%; padding: 1.1rem 2rem !important; font-size: 1.1rem !important; }
             .output-card .response-header { font-size: 1.5rem; }
             .output-card .response-icon { font-size: 1.7rem; }
-            .output-card .placeholder { padding: 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); }
+            .output-card .placeholder { padding: 2.5rem 1.5rem; font-size: 1.1rem; }
+            .examples-section { padding-top: 1rem; }
+            .examples-section .gr-examples-table th, .examples-section .gr-examples-table td { padding: 0.8rem 1rem !important; font-size: 1.0rem !important; }
+            .app-footer-wrapper { margin-top: 0.5rem; padding-top: 2rem; padding-bottom: 2rem; 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 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-wrapper { padding: 1.2rem 1rem !important; margin-bottom: 1.5rem; border-bottom-left-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); }
+            .app-header-logo { font-size: 3.8rem; margin-bottom: 0.5rem; }
             .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; }
+            .main-dashboard-container { padding: 1.2rem !important; margin-bottom: 0.4rem; border-radius: var(--radius-sm); gap: 1.5rem; }
+            .dashboard-card-section { padding: 1rem; border-radius: var(--radius-xs); }
+            .section-title { font-size: 1.8rem !important; margin-bottom: 1rem !important; }
+            .sub-section-title { font-size: 1.4rem !important; margin-top: 0.8rem !important; margin-bottom: 0.5rem !important; }
+            .section-divider { margin: 1rem 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); }
+            .output-card .placeholder { padding: 2rem 1rem; font-size: 1.05rem; }
+            .examples-section { padding-top: 0.8rem; } /* Slightly reduce padding on tiny screens for example section */
+            .examples-section .gr-examples-table th, .examples-section .gr-examples-table td { padding: 0.6rem 0.8rem !important; font-size: 0.95rem !important; }
+            .app-footer-wrapper { margin-top: 0.4rem; padding-top: 1.5rem; padding-bottom: 1.5rem; 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: Truly dynamic and bold, with animations ---
+            # --- Header Section ---
             with gr.Group(elem_classes="app-header-wrapper"):
                 gr.Markdown(
                     """
@@ -1032,68 +1069,66 @@ Answer:"""
                     """
                 )
 
-            # --- 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(
-                    """
-                    <p>Navigate landlord-tenant laws with ease. Enter your <strong>OpenAI API key</strong>, select your state, and ask your question to get detailed, state-specific answers.</p>
-                    <p>Don't have an API key? <a href='https://platform.openai.com/api-keys' target='_blank'>Get one free from OpenAI</a>.</p>
-                    <p><strong>Disclaimer:</strong> This tool provides information only, not legal advice. For legal guidance, always consult a licensed attorney.</p>
-                    """
-                )
-
-                gr.HTML("<hr class='section-divider'>") # Aesthetic divider for internal separation
+            # --- NEW: Main Dashboard Console Container (This holds everything central) ---
+            with gr.Column(elem_classes="main-dashboard-container"):
+
+                # --- Section 1: Introduction and Disclaimer Card ---
+                with gr.Group(elem_classes="dashboard-card-section"):
+                    gr.Markdown("<h3 class='sub-section-title'>Welcome & Disclaimer</h3>")
+                    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 gives information, not legal advice. For specific legal guidance, always consult a licensed attorney in your jurisdiction.</p>
+                        """
+                    )
 
-                # "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"):
+                # --- Section 2: OpenAI API Key Input Card ---
+                with gr.Group(elem_classes="dashboard-card-section"):
+                    gr.Markdown("<h3 class='sub-section-title'>OpenAI API Key</h3>")
                     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
+                        info="Required to process your query. Securely used per request, not stored. <a href='https://platform.openai.com/api-keys' target='_blank'>Get one free from OpenAI</a>.", lines=1
                     )
-                with gr.Row(elem_classes="input-row"):
-                    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%"):
-                        state_input = gr.Dropdown(
-                            label="Select State", choices=dropdown_choices, value=initial_value,
-                            allow_custom_value=False
-                        )
-                with gr.Row(elem_classes="button-row"):
-                    clear_button = gr.Button("Clear", variant="secondary", elem_classes=["gr-button-secondary"])
-                    submit_button = gr.Button("Submit Query", variant="primary", elem_classes=["gr-button-primary"])
-
-                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 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: 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")
+                
+                # --- Section 3: Query Input and State Selection Card ---
+                with gr.Group(elem_classes="dashboard-card-section"):
+                    gr.Markdown("<h3 class='sub-section-title'>Ask Your Question</h3>")
+                    with gr.Row(elem_classes="input-row"): # Query and State in one row
+                        with gr.Column(elem_classes="input-field", scale=3): # Query box takes more space
+                            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", scale=1): # State dropdown takes less space
+                            state_input = gr.Dropdown(
+                                label="Select State", choices=dropdown_choices, value=initial_value,
+                                allow_custom_value=False
+                            )
+                    with gr.Row(elem_classes="button-row"):
+                        clear_button = gr.Button("Clear", variant="secondary", elem_classes=["gr-button-secondary"])
+                        submit_button = gr.Button("Submit Query", variant="primary", elem_classes=["gr-button-primary"])
+
+                # --- Section 4: Output Display Card ---
+                with gr.Group(elem_classes="dashboard-card-section"):
+                    gr.Markdown("<h3 class='sub-section-title'>Legal Assistant's Response</h3>")
+                    output = gr.Markdown(
+                        value="<div class='placeholder output-card'>The answer will appear here after submitting your query.</div>",
+                        elem_classes="output-content-wrapper output-card" # Apply these classes for styling
+                    )
+                
+                # --- Section 5: Example Questions Section (NO ACCORDION, direct display) ---
+                with gr.Group(elem_classes="dashboard-card-section examples-section"): 
+                    gr.Markdown("<h3 class='sub-section-title'>Example Questions to Ask</h3>") 
                     if example_queries:
                         gr.Examples(
                             examples=example_queries, inputs=[query_input, state_input],
                             examples_per_page=5,
-                            label=False, # This is crucial to hide the default "false" label
+                            label="", # This is crucial, but CSS handles the rest
                         )
                     else:
                         gr.Markdown("<div class='placeholder'>Sample questions could not be loaded.</div>")
 
-            # --- 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.
+            # --- Footer Section ---
             with gr.Group(elem_classes="app-footer-wrapper"):
                 gr.Markdown(
                     """
@@ -1119,7 +1154,7 @@ Answer:"""
                 ),
                 inputs=[], outputs=[api_key_input, query_input, state_input, output]
             )
-        logging.info("Fully cohesive, dynamic, and legible Gradio interface created with Legal Noir theme.")
+        logging.info("Completely new, cohesive, dynamic, and legible Gradio interface created with Legal Console theme.")
         return demo
 
 # --- Main Execution Block (remains untouched from original logic) ---
@@ -1127,8 +1162,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)