updated UI_v35

app.py

@@ -6,7 +6,7 @@ import re
 
 import gradio as gr
 try:
-    from vector_db import VectorDatabase
+    from vector_db import VectorDatabase # Assuming this is in the same directory or installed
 except ImportError:
     print("Error: Could not import VectorDatabase from vector_db.py.")
     print("Please ensure vector_db.py exists in the same directory and is correctly defined.")
@@ -72,7 +72,7 @@ Answer:"""
         for statute in statutes:
             statute = statute.strip()
             if '§' in statute and any(char.isdigit() for char in statute):
-                 if not re.match(r'^\([\w\.]+\)$', statute) and 'http' not in statute:
+                if not re.match(r'^\([\w\.]+\)$', statute) and 'http' not in statute:
                     if len(statute) > 5:
                         valid_statutes.append(statute)
 
@@ -189,8 +189,8 @@ Answer:"""
                 error_message = "Error: The request was too long for the AI model. This can happen with very complex questions or extensive retrieved context."
                 details = "Try simplifying your question or asking about a more specific aspect."
             elif "timeout" in str(e).lower():
-                 error_message = "Error: The request to the AI model timed out. The service might be busy."
-                 details = "Please try again in a few moments."
+                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'><span class='error-icon'>❌</span>{error_message}</div>"
             if details:
@@ -220,6 +220,7 @@ Answer:"""
             raise FileNotFoundError(f"PDF file not found: {pdf_path}")
         try:
             logging.info(f"Attempting to load/verify data from PDF: {pdf_path}")
+            # Assuming process_and_load_pdf is part of VectorDatabase and correctly implemented
             num_states_processed = self.vector_db.process_and_load_pdf(pdf_path)
             doc_count = self.vector_db.document_collection.count()
             state_count = self.vector_db.state_collection.count()
@@ -242,7 +243,7 @@ Answer:"""
         def query_interface_wrapper(api_key: str, query: str, state: str) -> str:
             # Basic client-client-side validation for immediate feedback
             if not api_key or not api_key.strip() or not api_key.startswith("sk-"):
-                 return "<div class='error-message'><span class='error-icon'>⚠️</span>Please provide a valid OpenAI API key (starting with 'sk-'). <a href='https://platform.openai.com/api-keys' target='_blank'>Get one here</a>.</div>"
+                return "<div class='error-message'><span class='error-icon'>⚠️</span>Please provide a valid OpenAI API key (starting with 'sk-'). <a href='https://platform.openai.com/api-keys' target='_blank'>Get one here</a>.</div>"
             if not state or state == "Select a state..." or "Error" in state:
                 return "<div class='error-message'><span class='error-icon'>⚠️</span>Please select a valid state from the dropdown.</div>"
             if not query or not query.strip():
@@ -254,11 +255,11 @@ Answer:"""
 
             # Check if the answer already contains an error message (from deeper within process_query)
             if "<div class='error-message'>" in answer:
-                 return answer # Return the pre-formatted error message directly
+                return answer # Return the pre-formatted error message directly
             else:
-                 # Format the successful response with the new UI structure
-                 formatted_response = f"<div class='response-header'><span class='response-icon'>📜</span>Response for {state}</div><hr class='divider'>{answer}"
-                 return formatted_response
+                # Format the successful response with the new UI structure
+                formatted_response = f"<div class='response-header'><span class='response-icon'>📜</span>Response for {state}</div><hr class='divider'>{answer}"
+                return formatted_response
 
         try:
             available_states_list = self.get_states()
@@ -281,7 +282,7 @@ Answer:"""
             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:
-                 example_queries.append(["What basic rights do tenants have?", available_states_list[0] if available_states_list else "California"])
+                example_queries.append(["What basic rights do tenants have?", available_states_list[0] if available_states_list else "California"])
         else: # Fallback if states list is problematic
             example_queries.append(["What basic rights do tenants have?", "California"])
 
@@ -291,338 +292,203 @@ Answer:"""
         @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@700;800;900&display=swap');
         :root {
             /* Dark Theme Colors (Default: Legal Noir) */
-            --app-bg-dark: #0F0F1A; /* 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: #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 */
+            --app-bg-dark: #0F0F1A;
+            --header-bg-dark: #1A1A2B;
+            --main-card-bg-dark: #1E1E30;
+            --card-section-bg-dark: #2A2A40;
+            --text-primary-dark: #EAEAF0;
+            --text-secondary-dark: #A0A0B0;
+            --accent-main-dark: #FFC107;
+            --accent-hover-dark: #E0A800;
+            --border-dark: #3F3F5A;
+            --shadow-dark: 0 1.2rem 3.5rem rgba(0,0,0,0.6);
+            --focus-ring-dark: rgba(255, 193, 7, 0.4);
+            --error-bg-dark: #4D001A;
+            --error-text-dark: #FFB3C2;
             --error-border-dark: #990026;
             /* Light Theme Colors (Alternative: Legal Lumen) */
-            --app-bg-light: #F0F2F5; /* 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: #DDE2E8; /* Light border */
-            --shadow-light: 0 0.8rem 2.5rem rgba(0,0,0,0.15); /* Soft shadow */
+            --app-bg-light: #F0F2F5;
+            --header-bg-light: #E0E4EB;
+            --main-card-bg-light: #FFFFFF;
+            --card-section-bg-light: #F8F9FA;
+            --text-primary-light: #212529;
+            --text-secondary-light: #6C757D;
+            --accent-main-light: #007bff;
+            --accent-hover-light: #0056b3;
+            --border-light: #DDE2E8;
+            --shadow-light: 0 0.8rem 2.5rem rgba(0,0,0,0.15);
             --focus-ring-light: rgba(0, 123, 255, 0.3);
             --error-bg-light: #F8D7DA;
             --error-text-light: #721C24;
             --error-border-light: #F5C6CB;
             /* General Styling Variables */
             --font-family-main: 'Inter', sans-serif;
-            --font-family-header: 'Playfair Display', serif; /* Elegant serif for titles */
+            --font-family-header: 'Playfair Display', serif;
             --radius-xs: 4px;
             --radius-sm: 8px;
             --radius-md: 12px;
-            --radius-lg: 24px; /* Larger radius for a premium, soft feel */
-            --transition-speed: 0.4s ease-in-out; /* Slightly faster, smoother transitions */
-            --padding-xl: 4.5rem; /* Extra large padding for spaciousness */
+            --radius-lg: 24px;
+            --transition-speed: 0.4s ease-in-out;
+            --padding-xl: 4.5rem;
             --padding-lg: 3.5rem;
             --padding-md: 2.5rem;
             --padding-sm: 1.8rem;
         }
-        /* Apply theme based on system preference */
         body, .gradio-container {
             font-family: var(--font-family-main) !important;
-            background: var(--app-bg-dark) !important; /* Default to dark theme */
+            background: var(--app-bg-dark) !important;
             color: var(--text-primary-dark) !important;
-            margin: 0;
-            padding: 0;
-            min-height: 100vh;
-            font-size: 16px;
-            line-height: 1.75; /* Enhanced line spacing for legibility */
-            -webkit-font-smoothing: antialiased;
-            -moz-osx-font-smoothing: grayscale;
+            margin: 0; padding: 0; min-height: 100vh; font-size: 16px;
+            line-height: 1.75; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
             transition: background var(--transition-speed), color var(--transition-speed);
         }
         * { box-sizing: border-box; }
         @media (prefers-color-scheme: light) {
-            body, .gradio-container {
-                background: var(--app-bg-light) !important;
-                color: var(--text-primary-light) !important;
-            }
+            body, .gradio-container { background: var(--app-bg-light) !important; color: var(--text-primary-light) !important; }
         }
-        /* Global container for content alignment and padding */
         .gradio-container > .flex.flex-col {
-            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;
-            transition: padding var(--transition-speed);
+            max-width: 1120px; margin: 0 auto !important; padding: 0 !important;
+            gap: 0 !important; transition: padding var(--transition-speed);
         }
-        /* Header styling: dynamic, centralized, and visually connecting */
         .app-header-wrapper {
-            background: var(--header-bg-dark); 
-            color: var(--text-primary-dark) !important;
-            padding: var(--padding-xl) var(--padding-lg) !important;
-            text-align: center !important;
-            border-bottom-left-radius: var(--radius-lg);
-            border-bottom-right-radius: var(--radius-lg);
-            box-shadow: var(--shadow-dark);
-            position: relative;
-            overflow: hidden;
-            z-index: 10;
+            background: var(--header-bg-dark); color: var(--text-primary-dark) !important;
+            padding: var(--padding-xl) var(--padding-lg) !important; text-align: center !important;
+            border-bottom-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg);
+            box-shadow: var(--shadow-dark); position: relative; overflow: hidden; z-index: 10;
             transition: background var(--transition-speed), box-shadow var(--transition-speed);
-            margin-bottom: 2.5rem; /* 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 */
-            /* ADDED FOR ROBUST CENTERING */
-            max-width: 1120px; /* Match the main content width */
-            margin-left: auto;
-            margin-right: auto;
-            width: 100%; /* Ensure it fills parent width up to max-width */
+            margin-bottom: 2.5rem; border: 1px solid var(--border-dark); border-top: none;
+            max-width: 1120px; margin-left: auto; margin-right: auto; width: 100%;
         }
         @media (prefers-color-scheme: light) {
-            .app-header-wrapper {
-                background: var(--header-bg-light);
-                color: var(--text-primary-light) !important;
-                box-shadow: var(--shadow-light);
-                border: 1px solid var(--border-light);
-                border-top: none;
-            }
-        }
-        .app-header {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            position: relative;
-            z-index: 1;
+            .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; }
         }
+        .app-header { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; }
         .app-header-logo {
-            font-size: 5.5rem; /* Even larger icon for maximum impact */
-            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 */
+            font-size: 5.5rem; margin-bottom: 0.8rem; line-height: 1;
+            filter: drop-shadow(0 0 15px var(--accent-main-dark));
+            transform: translateY(-40px); opacity: 0;
             animation: fadeInSlideDown 1.5s ease-out forwards; animation-delay: 0.3s;
             transition: filter var(--transition-speed);
         }
         @media (prefers-color-scheme: light) { .app-header-logo { filter: drop-shadow(0 0 10px var(--accent-main-light)); } }
         .app-header-title {
-            font-family: var(--font-family-header) !important;
-            font-size: 4.2rem; /* The main title: massive, bold, and dynamic */
-            font-weight: 900; /* Extra, extra bold */
-            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 */
+            font-family: var(--font-family-header) !important; font-size: 4.2rem; font-weight: 900;
+            margin: 0 0 0.8rem 0; letter-spacing: -0.07em;
+            text-shadow: 0 8px 16px rgba(0,0,0,0.5);
             transform: translateY(-40px); opacity: 0;
             animation: fadeInSlideDown 1.5s ease-out forwards; animation-delay: 0.6s;
             transition: text-shadow var(--transition-speed), color var(--transition-speed);
         }
         @media (prefers-color-scheme: light) { .app-header-title { text-shadow: 0 6px 12px rgba(0,0,0,0.25); } }
         .app-header-tagline {
-            font-family: var(--font-family-main) !important;
-            font-size: 1.6rem; /* Larger, more inviting tagline */
-            font-weight: 300;
-            opacity: 0.9;
-            max-width: 900px;
+            font-family: var(--font-family-main) !important; font-size: 1.6rem; font-weight: 300;
+            opacity: 0.9; max-width: 900px;
             transform: translateY(-40px); opacity: 0;
             animation: fadeInSlideDown 1.5s ease-out forwards; animation-delay: 0.9s;
             transition: opacity var(--transition-speed);
         }
-        /* Keyframe animations for header elements */
-        @keyframes fadeInSlideDown {
-            from { opacity: 0; transform: translateY(-40px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        /* --- NEW: Main Dashboard Console Container --- */
+        @keyframes fadeInSlideDown { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: translateY(0); } }
         .main-dashboard-container {
-            background: var(--main-card-bg-dark) !important;
-            border-radius: var(--radius-lg);
-            box-shadow: var(--shadow-dark);
-            border: 1px solid var(--border-dark) !important;
-            padding: var(--padding-lg) !important; /* 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;
+            background: var(--main-card-bg-dark) !important; border-radius: var(--radius-lg);
+            box-shadow: var(--shadow-dark); border: 1px solid var(--border-dark) !important;
+            padding: var(--padding-lg) !important; margin: 0 auto 0.8rem auto;
+            z-index: 1; position: relative;
             transition: background var(--transition-speed), border-color var(--transition-speed), box-shadow var(--transition-speed);
-            display: flex;
-            flex-direction: column;
-            gap: 2.5rem; /* Space between the main "cards" inside the console */
-            /* ADDED FOR ROBUST WIDTH CONSTRAINT */
-            max-width: 1120px; /* Ensure it matches the header and footer width */
+            display: flex; flex-direction: column; gap: 2.5rem; max-width: 1120px;
         }
         @media (prefers-color-scheme: light) {
-            .main-dashboard-container {
-                background: var(--main-card-bg-light) !important;
-                box-shadow: var(--shadow-light);
-                border: 1px solid var(--border-light) !important;
-            }
+            .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 */
+            background: var(--card-section-bg-dark) !important; border-radius: var(--radius-md);
+            border: 1px solid var(--border-dark); padding: var(--padding-md);
+            box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
             transition: background var(--transition-speed), border-color var(--transition-speed), box-shadow var(--transition-speed);
-            display: flex;
-            flex-direction: column;
-            gap: 1.5rem; /* Space between elements within a card section */
+            display: flex; flex-direction: column; gap: 1.5rem;
         }
         @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);
-            }
+            .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;
-            font-size: 2.8rem !important; /* Larger section titles */
-            font-weight: 800 !important; /* Extra bold */
-            color: var(--text-primary-dark) !important;
-            text-align: center !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%;
+        .section-title {
+            font-family: var(--font-family-header) !important; font-size: 2.8rem !important; font-weight: 800 !important;
+            color: var(--text-primary-dark) !important; text-align: center !important;
+            margin: 0 auto 1.8rem auto !important; padding-bottom: 0.8rem !important;
+            border-bottom: 2px solid var(--border-dark) !important; width: 100%;
             transition: color var(--transition-speed), border-color var(--transition-speed);
         }
-        .sub-section-title { /* For 'Ask Your Question', 'Example Questions to Ask' */
+        .sub-section-title { /* MODIFIED FOR CENTERING */
             font-family: var(--font-family-header) !important;
-            font-size: 2.5rem !important; /* INCREASED for more prominence, from 2.2rem */
+            font-size: 2.5rem !important;
             font-weight: 700 !important;
             color: var(--text-primary-dark) !important;
-            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 */
+            text-align: center !important;
+            margin-top: 1.5rem !important;
+            margin-bottom: 0.8rem !important;
             transition: color var(--transition-speed);
+            display: block !important; /* ADDED: Ensure it's a block element */
+            width: 100% !important;   /* ADDED: Ensure it takes full width for centering */
         }
         @media (prefers-color-scheme: light) {
-            .section-title, .sub-section-title {
-                color: var(--text-primary-light) !important;
-                border-bottom-color: var(--border-light) !important;
-            }
+            .section-title, .sub-section-title { color: var(--text-primary-light) !important; border-bottom-color: var(--border-light) !important; }
         }
-        /* General text styling within main content: highly legible */
         .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.2rem; /* Reduced from 1.5rem */
-            transition: color var(--transition-speed);
+            font-size: 1.15rem; line-height: 1.8; color: var(--text-secondary-dark);
+            margin-bottom: 1.2rem; transition: color var(--transition-speed);
         }
         .dashboard-card-section a, .output-content-wrapper a {
-            color: var(--accent-main-dark);
-            text-decoration: none;
-            font-weight: 500;
+            color: var(--accent-main-dark); text-decoration: none; font-weight: 500;
             transition: color var(--transition-speed), text-decoration var(--transition-speed);
         }
-        .dashboard-card-section a:hover, .output-content-wrapper a:hover {
-            color: var(--accent-hover-dark);
-            text-decoration: underline;
-        }
-        .dashboard-card-section strong, .output-content-wrapper strong {
-            font-weight: 700;
-            color: var(--text-primary-dark);
-            transition: color var(--transition-speed);
-        }
+        .dashboard-card-section a:hover, .output-content-wrapper a:hover { color: var(--accent-hover-dark); text-decoration: underline; }
+        .dashboard-card-section strong, .output-content-wrapper strong { font-weight: 700; color: var(--text-primary-dark); transition: color var(--transition-speed); }
         @media (prefers-color-scheme: light) {
             .dashboard-card-section p, .output-content-wrapper p { color: var(--text-secondary-light); }
             .dashboard-card-section a, .output-content-wrapper a { color: var(--accent-main-light); }
             .dashboard-card-section a:hover, .output-content-wrapper a:hover { color: var(--accent-hover-light); }
             .dashboard-card-section strong, .output-content-wrapper strong { color: var(--text-primary-light); }
         }
-        /* 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: 2rem 0 !important; /* Reduced from 2.5rem */
-            transition: border-color var(--transition-speed);
-        }
+        .section-divider { border: none; border-top: 1px solid var(--border-dark); margin: 2rem 0 !important; transition: border-color var(--transition-speed); }
         @media (prefers-color-scheme: light) { .section-divider { border-top: 1px solid var(--border-light); } }
-        /* Input field groups and layout: spacious and clear */
-        .input-field-group { margin-bottom: 1rem; } /* Reduced from 1.5rem */
-        .input-row {
-            display: flex;
-            gap: 1.8rem; /* Reduced from 2rem */
-            flex-wrap: wrap;
-            margin-bottom: 1rem; /* Reduced from 1.5rem */
-        }
-        .input-field {
-            flex: 1; /* Allows flexible sizing */
-        }
-        /* Input labels and info text: prominent and clear */
+        .input-field-group { margin-bottom: 1rem; }
+        .input-row { display: flex; gap: 1.8rem; flex-wrap: wrap; margin-bottom: 1rem; }
+        .input-field { flex: 1; }
         .gradio-input-label {
-            font-size: 1.2rem !important; /* Larger, more prominent labels */
-            font-weight: 500 !important;
-            color: var(--text-primary-dark) !important;
-            margin-bottom: 0.8rem !important; /* Reduced from 1rem */
-            display: block !important;
-            transition: color var(--transition-speed);
-        }
-        .gradio-input-info {
-            font-size: 1.0rem !important;
-            color: var(--text-secondary-dark) !important;
-            margin-top: 0.6rem;
-            transition: color var(--transition-speed);
+            font-size: 1.2rem !important; font-weight: 500 !important; color: var(--text-primary-dark) !important;
+            margin-bottom: 0.8rem !important; display: block !important; transition: color var(--transition-speed);
         }
+        .gradio-input-info { font-size: 1.0rem !important; color: var(--text-secondary-dark) !important; margin-top: 0.6rem; transition: color var(--transition-speed); }
         @media (prefers-color-scheme: light) {
             .gradio-input-label { color: var(--text-primary-light) !important; }
             .gradio-input-info { color: var(--text-secondary-light) !important; }
         }
-        /* Textbox, Dropdown, Password input styling: larger, more refined */
-        .gradio-textbox textarea,
-        .gradio-dropdown select,
-        .gradio-textbox input[type=password] {
-            border: 2px solid var(--border-dark) !important; /* Thicker border for visibility */
-            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-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 */
+        .gradio-textbox textarea, .gradio-dropdown select, .gradio-textbox input[type=password] {
+            border: 2px solid var(--border-dark) !important; border-radius: var(--radius-md) !important;
+            padding: 1.3rem 1.6rem !important; font-size: 1.15rem !important;
+            background: var(--main-card-bg-dark) !important; color: var(--text-primary-dark) !important;
+            width: 100% !important; box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
             transition: border-color var(--transition-speed), box-shadow var(--transition-speed), background var(--transition-speed), color var(--transition-speed);
         }
-        .gradio-textbox textarea { min-height: 180px; } /* Taller textarea */
-        .gradio-textbox textarea::placeholder,
-        .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 {
+        .gradio-textbox textarea { min-height: 180px; }
+        .gradio-textbox textarea::placeholder, .gradio-textbox input[type=password]::placeholder { color: #808090 !important; }
+        .gradio-textbox textarea:focus, .gradio-dropdown select:focus, .gradio-textbox input[type=password]:focus {
             border-color: var(--accent-main-dark) !important;
-            box-shadow: 0 0 0 6px var(--focus-ring-dark) !important, inset 0 1px 3px rgba(0,0,0,0.4); /* Stronger focus ring and inner shadow */
+            box-shadow: 0 0 0 6px var(--focus-ring-dark) !important, inset 0 1px 3px rgba(0,0,0,0.4);
             outline: none !important;
         }
         @media (prefers-color-scheme: light) {
-            .gradio-textbox textarea,
-            .gradio-dropdown select,
-            .gradio-textbox input[type=password] {
-                border: 2px solid var(--border-light) !important;
-                background: var(--main-card-bg-light) !important;
-                color: var(--text-primary-light) !important;
-                box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
+            .gradio-textbox textarea, .gradio-dropdown select, .gradio-textbox input[type=password] {
+                border: 2px solid var(--border-light) !important; background: var(--main-card-bg-light) !important;
+                color: var(--text-primary-light) !important; box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
             }
-            .gradio-textbox textarea:focus,
-            .gradio-dropdown select:focus,
-            .gradio-textbox input[type=password]:focus {
+            .gradio-textbox textarea:focus, .gradio-dropdown select:focus, .gradio-textbox input[type=password]:focus {
                 border-color: var(--accent-main-light) !important;
                 box-shadow: 0 0 0 6px var(--focus-ring-light) !important, inset 0 1px 3px rgba(0,0,0,0.2);
             }
         }
-        /* Custom dropdown arrow */
         .gradio-dropdown select {
             appearance: none; -webkit-appearance: none; -moz-appearance: none;
             background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22%23A0A0B0%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M5.293%207.293a1%201%200%20011.414%200L10%2010.586l3.293-3.293a1%201%200%20111.414%201.414l-4%204a1%201%200%2001-1.414%200l-4-4a1%201%200%20010-1.414z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E');
-            background-repeat: no-repeat;
-            background-position: right 1.8rem center;
-            background-size: 1.4em; /* Larger arrow */
+            background-repeat: no-repeat; background-position: right 1.8rem center; background-size: 1.4em;
             padding-right: 5rem !important;
         }
         @media (prefers-color-scheme: light) {
@@ -630,136 +496,48 @@ Answer:"""
                 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: 2rem; /* Reduced from 2.5rem */
-            margin-top: 2rem; /* Reduced from 2.5rem */
-            flex-wrap: wrap;
-            justify-content: flex-end;
-        }
+        .button-row { display: flex; gap: 2rem; margin-top: 2rem; flex-wrap: wrap; justify-content: flex-end; }
         .gradio-button {
-            border-radius: var(--radius-md) !important;
-            padding: 1.2rem 2.8rem !important; /* More padding */
-            font-size: 1.15rem !important; /* Larger font */
-            font-weight: 600 !important; /* Bolder text */
-            border: 1px solid transparent !important;
-            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(-6px); /* More pronounced lift */
-            box-shadow: 0 12px 28px rgba(0,0,0,0.45) !important;
+            border-radius: var(--radius-md) !important; padding: 1.2rem 2.8rem !important;
+            font-size: 1.15rem !important; font-weight: 600 !important;
+            border: 1px solid transparent !important; box-shadow: 0 6px 20px rgba(0,0,0,0.35);
+            transition: all var(--transition-speed) cubic-bezier(0.0, 0.0, 0.2, 1);
         }
+        .gradio-button:hover:not(:disabled) { transform: translateY(-6px); box-shadow: 0 12px 28px rgba(0,0,0,0.45) !important; }
         .gradio-button:active:not(:disabled) { transform: translateY(-3px); }
         .gradio-button:disabled {
-            background: #3A3A50 !important;
-            color: #6A6A80 !important;
-            box-shadow: none !important;
-            border-color: #4A4A60 !important;
-            cursor: not-allowed;
-        }
-        /* Primary button */
-        .gr-button-primary {
-            background: var(--accent-main-dark) !important;
-            color: var(--header-bg-dark) !important; /* Dark text on gold */
-            border-color: var(--accent-main-dark) !important;
-        }
-        .gr-button-primary:hover:not(:disabled) {
-            background: var(--accent-hover-dark) !important;
-            border-color: var(--accent-hover-dark) !important;
-        }
-        /* Secondary button */
-        .gr-button-secondary {
-            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(255, 193, 7, 0.15) !important; /* Gold tint on hover */
-            color: var(--accent-main-dark) !important;
-            border-color: var(--accent-main-dark) !important;
+            background: #3A3A50 !important; color: #6A6A80 !important;
+            box-shadow: none !important; border-color: #4A4A60 !important; cursor: not-allowed;
         }
+        .gr-button-primary { background: var(--accent-main-dark) !important; color: var(--header-bg-dark) !important; border-color: var(--accent-main-dark) !important; }
+        .gr-button-primary:hover:not(:disabled) { background: var(--accent-hover-dark) !important; border-color: var(--accent-hover-dark) !important; }
+        .gr-button-secondary { background: transparent !important; color: var(--text-secondary-dark) !important; border: 2px solid var(--border-dark) !important; box-shadow: none !important; }
+        .gr-button-secondary:hover:not(:disabled) { background: rgba(255, 193, 7, 0.15) !important; color: var(--accent-main-dark) !important; border-color: var(--accent-main-dark) !important; }
         @media (prefers-color-scheme: light) {
             .gradio-button { box-shadow: 0 6px 20px rgba(0,0,0,0.1); }
             .gradio-button:hover:not(:disabled) { box-shadow: 0 12px 28px rgba(0,0,0,0.2) !important; }
-            .gradio-button:disabled {
-                background: #E9ECEF !important;
-                color: #ADB5BD !important;
-                border-color: #DEE2E6 !important;
-            }
-            .gr-button-primary {
-                background: var(--accent-main-light) !important;
-                color: #FFFFFF !important;
-                border-color: var(--accent-main-light) !important;
-            }
-            .gr-button-primary:hover:not(:disabled) {
-                background: var(--accent-hover-light) !important;
-                border-color: var(--accent-hover-light) !important;
-            }
-            .gr-button-secondary {
-                background: transparent !important;
-                color: var(--text-secondary-light) !important;
-                border: 2px solid var(--border-light) !important;
-            }
-            .gr-button-secondary:hover:not(:disabled) {
-                background: rgba(0, 123, 255, 0.1) !important;
-                color: var(--accent-main-light) !important;
-                border-color: var(--accent-main-light) !important;
-            }
-        }
-        /* Output Styling within the main content area */
-        .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 1rem 0; /* Reduced margin */
-            display: flex;
-            align-items: center;
-            gap: 1.2rem;
-            transition: color var(--transition-speed);
-        }
-        .output-card .response-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-dark);
-            margin: 1.5rem 0 1.8rem 0; /* Adjusted for tighter spacing */
-            transition: border-color var(--transition-speed);
-        }
-        .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);
+            .gradio-button:disabled { background: #E9ECEF !important; color: #ADB5BD !important; border-color: #DEE2E6 !important; }
+            .gr-button-primary { background: var(--accent-main-light) !important; color: #FFFFFF !important; border-color: var(--accent-main-light) !important; }
+            .gr-button-primary:hover:not(:disabled) { background: var(--accent-hover-light) !important; border-color: var(--accent-hover-light) !important; }
+            .gr-button-secondary { background: transparent !important; color: var(--text-secondary-light) !important; border: 2px solid var(--border-light) !important; }
+            .gr-button-secondary:hover:not(:disabled) { background: rgba(0, 123, 255, 0.1) !important; color: var(--accent-main-light) !important; border-color: var(--accent-main-light) !important; }
+        }
+        .output-card { padding: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; }
+        .output-card .response-header {
+            font-size: 1.8rem; font-weight: 700; color: var(--text-primary-dark);
+            margin: 0 0 1rem 0; display: flex; align-items: center; gap: 1.2rem;
             transition: color var(--transition-speed);
         }
+        .output-card .response-icon { font-size: 2rem; color: var(--accent-main-dark); transition: color var(--transition-speed); }
+        .output-card .divider { border: none; border-top: 1px solid var(--border-dark); margin: 1.5rem 0 1.8rem 0; transition: border-color var(--transition-speed); }
+        .output-card .output-content-wrapper { font-size: 1.15rem; line-height: 1.8; color: var(--text-primary-dark); transition: color var(--transition-speed); }
         .output-card .output-content-wrapper p { margin-bottom: 1rem; }
-        .output-card .output-content-wrapper ul,
-        .output-card .output-content-wrapper ol {
-            margin-left: 2.2rem; /* More indentation */
-            margin-bottom: 1.2rem;
-            padding-left: 0;
-            list-style-type: disc;
-        }
+        .output-card .output-content-wrapper ul, .output-card .output-content-wrapper ol { margin-left: 2.2rem; margin-bottom: 1.2rem; padding-left: 0; list-style-type: disc; }
         .output-card .output-content-wrapper ol { list-style-type: decimal; }
         .output-card .output-content-wrapper li { margin-bottom: 0.8rem; }
         .output-card .output-content-wrapper strong { font-weight: 700; }
-        .output-card .output-content-wrapper a {
-            color: var(--accent-main-dark);
-            text-decoration: underline;
-        }
-        .output-card .output-content-wrapper a:hover {
-            color: var(--accent-hover-dark);
-        }
+        .output-card .output-content-wrapper a { color: var(--accent-main-dark); text-decoration: underline; }
+        .output-card .output-content-wrapper a:hover { color: var(--accent-hover-dark); }
         @media (prefers-color-scheme: light) {
             .output-card .response-header { color: var(--text-primary-light); }
             .output-card .response-icon { color: var(--accent-main-light); }
@@ -768,95 +546,48 @@ Answer:"""
             .output-card .output-content-wrapper a { color: var(--accent-main-light); }
             .output-card .output-content-wrapper a:hover { color: var(--accent-hover-light); }
         }
-        /* Error messages: clear, prominent, and legible */
-        .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);
-            color: var(--error-text-dark);
-            border: 2px solid var(--error-border-dark);
-            display: flex;
-            align-items: flex-start;
-            gap: 1.5em;
+        .output-card .error-message {
+            padding: 1.5rem 2rem; margin-top: 1.5rem; font-size: 1.1rem;
+            border-radius: var(--radius-md); background: var(--error-bg-dark);
+            color: var(--error-text-dark); border: 2px solid var(--error-border-dark);
+            display: flex; align-items: flex-start; gap: 1.5em;
             transition: background var(--transition-speed), color var(--transition-speed), border-color var(--transition-speed);
         }
-        .output-card .error-message .error-icon {
-            font-size: 1.8rem;
-            line-height: 1;
-            padding-top: 0.1em;
-        }
-        .output-card .error-details {
-            font-size: 0.95rem;
-            margin-top: 0.8rem;
-            opacity: 0.9;
-            word-break: break-word;
-        }
+        .output-card .error-message .error-icon { font-size: 1.8rem; line-height: 1; padding-top: 0.1em; }
+        .output-card .error-details { font-size: 0.95rem; margin-top: 0.8rem; opacity: 0.9; word-break: break-word; }
         @media (prefers-color-scheme: light) {
-            .output-card .error-message {
-                background: var(--error-bg-light);
-                color: var(--error-text-light);
-                border: 2px solid var(--error-border-light);
-            }
+            .output-card .error-message { background: var(--error-bg-light); color: var(--error-text-light); border: 2px solid var(--error-border-light); }
         }
-        /* Output placeholder styling: inviting and distinct */
-        .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);
-            text-align: center;
-            opacity: 0.8;
+        .output-card .placeholder {
+            padding: 2.5rem 2rem; font-size: 1.2rem; border-radius: var(--radius-md);
+            border: 3px dashed var(--border-dark); color: var(--text-secondary-dark);
+            text-align: center; opacity: 0.8;
             transition: border-color var(--transition-speed), color var(--transition-speed);
         }
         @media (prefers-color-scheme: light) {
-            .output-card .placeholder {
-                border-color: var(--border-light);
-                color: var(--text-secondary-light);
-            }
+            .output-card .placeholder { border-color: var(--border-light); color: var(--text-secondary-light); }
         }
-        /* 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 .gr-examples-table {
-            border-radius: var(--radius-md) !important;
-            border: 1px solid var(--border-dark) !important;
-            overflow: hidden;
-            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 */
+            border-radius: var(--radius-md) !important; border: 1px solid var(--border-dark) !important;
+            overflow: hidden; background: var(--card-section-bg-dark) !important;
+            box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
             transition: border-color var(--transition-speed), background var(--transition-speed), box-shadow var(--transition-speed);
         }
         @media (prefers-color-scheme: light) {
-            .examples-section .gr-examples-table {
-                border: 1px solid var(--border-light) !important;
-                background: var(--card-section-bg-light) !important;
-                box-shadow: inset 0 0 8px rgba(0,0,0,0.05);
-            }
-        }
-        .examples-section .gr-examples-table th,
-        .examples-section .gr-examples-table td {
-            padding: 1rem 1.2rem !important; /* Slightly reduced padding for tighter coupling */
-            font-size: 1.05rem !important;
-            border: none !important;
+            .examples-section .gr-examples-table { border: 1px solid var(--border-light) !important; background: var(--card-section-bg-light) !important; box-shadow: inset 0 0 8px rgba(0,0,0,0.05); }
         }
+        .examples-section .gr-examples-table th, .examples-section .gr-examples-table td { padding: 1rem 1.2rem !important; font-size: 1.05rem !important; border: none !important; }
         .examples-section .gr-examples-table th {
-            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;
+            background: var(--header-bg-dark) !important; 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(--card-section-bg-dark) !important;
-            color: var(--text-primary-dark) !important;
-            border-top: 1px solid var(--border-dark) !important;
-            cursor: pointer;
+            background: var(--card-section-bg-dark) !important; color: var(--text-primary-dark) !important;
+            border-top: 1px solid var(--border-dark) !important; cursor: pointer;
             transition: background var(--transition-speed), color var(--transition-speed), border-color var(--transition-speed);
         }
-        .examples-section .gr-examples-table tr:hover td {
-            background: rgba(255, 193, 7, 0.1) !important; /* Gold tint on hover */
-        }
+        .examples-section .gr-examples-table tr:hover td { background: rgba(255, 193, 7, 0.1) !important; }
         .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(--card-section-bg-light) !important; }
@@ -864,160 +595,104 @@ Answer:"""
             .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 background for consistency */
-            border-top: 1px solid var(--border-dark) !important;
-            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 */
+            background: var(--header-bg-dark); border-top: 1px solid var(--border-dark) !important;
+            margin-top: 0.5rem; padding-top: 2.5rem; padding-bottom: 2.5rem;
+            border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg);
+            box-shadow: inset 0 8px 15px rgba(0,0,0,0.2);
             transition: background var(--transition-speed), border-color var(--transition-speed), box-shadow var(--transition-speed);
-            /* ADDED FOR ROBUST CENTERING */
-            max-width: 1120px; /* Ensure it matches the main content width */
-            margin-left: auto;
-            margin-right: auto;
-            width: 100%; /* Ensure it fills parent width up to max-width */
+            max-width: 1120px; margin-left: auto; margin-right: auto; width: 100%;
         }
         @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-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 {
+        .app-footer { /* MODIFIED FOR RIGHT ALIGNMENT OF TEXT */
             padding: 0 var(--padding-lg) !important;
-            /* Changed from align-items: center */
             display: flex;
             flex-direction: column;
-            align-items: flex-start; /* Align content to the start (left) */
-            max-width: 1120px; /* Match main content width */
-            margin: 0 auto; /* Center the footer content block */
+            align-items: stretch; /* MODIFIED: Make child <p> tags take full width */
+            max-width: 1120px;
+            margin: 0 auto;
         }
-        .app-footer p {
+        .app-footer p { /* MODIFIED FOR RIGHT ALIGNMENT */
             font-size: 1.05rem !important;
             color: var(--text-secondary-dark) !important;
             margin-bottom: 1rem;
-            max-width: 900px; /* Keep max-width for readability */
-            text-align: left !important; /* Ensure text aligns left within its container */
+            /* max-width: 900px; /* REMOVED/COMMENTED: To allow full width alignment */
+            text-align: right !important; /* MODIFIED: Align text to the right */
             transition: color var(--transition-speed);
+            width: 100%; /* ADDED: Ensure <p> takes full width of stretched item */
         }
-        .app-footer a {
-            color: var(--accent-main-dark) !important;
-            font-weight: 500;
-            transition: color var(--transition-speed), text-decoration var(--transition-speed);
-        }
-        .app-footer a:hover {
-            color: var(--accent-hover-dark) !important;
-            text-decoration: underline;
-        }
+        .app-footer a { color: var(--accent-main-dark) !important; font-weight: 500; transition: color var(--transition-speed), text-decoration var(--transition-speed); }
+        .app-footer a:hover { color: var(--accent-hover-dark) !important; text-decoration: underline; }
         @media (prefers-color-scheme: light) {
             .app-footer-wrapper { border-top-color: var(--border-light) !important; }
             .app-footer p { color: var(--text-secondary-light) !important; }
             .app-footer a { color: var(--accent-main-light) !important; }
             .app-footer a:hover { color: var(--accent-hover-light) !important; }
         }
-        /* Accessibility: Focus styles */
         :focus-visible {
-            outline: 5px solid var(--accent-main-dark) !important; /* Even thicker for accessibility */
-            outline-offset: 5px;
+            outline: 5px solid var(--accent-main-dark) !important; outline-offset: 5px;
             box-shadow: 0 0 0 8px var(--focus-ring-dark) !important;
-            border-radius: var(--radius-md) !important; /* Ensure border-radius for focus */
+            border-radius: var(--radius-md) !important;
         }
         @media (prefers-color-scheme: light) {
-            :focus-visible {
-                outline-color: var(--accent-main-light) !important;
-                box_shadow: 0 0 0 8px var(--focus-ring-light) !important;
-            }
+            :focus-visible { outline-color: var(--accent-main-light) !important; box_shadow: 0 0 0 8px var(--focus-ring-light) !important; }
         }
         .gradio-button span:focus { outline: none !important; }
-        /* MOST AGGRESSIVE "FALSE" & FILTER ICON REMOVAL - THIS SHOULD FINALLY KILL IT */
-        /* Targets ALL known problematic elements that might contain "false", the filter menu icon, or accordion toggle */
-        .gr-examples .gr-label,
-        .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" */
-        /* NEW: Targeting Accordion-related elements if Examples acts as an Accordion internally */
-        .gr-examples .gr-accordion-header,
-        .gr-examples .gr-accordion-title,
-        .gr-examples .gr-accordion-toggle-icon,
-        .gr-examples .gr-accordion-header button,
-        .gr-examples .gr-button.gr-button-filter, /* More general button target for filter */
-        .gr-examples .gr-button.gr-button-primary.gr-button-filter, /* Specific primary filter button target */
-        /* NEW AND MORE AGGRESSIVE: Target the entire header of gr.Examples and its direct children */
-        .gr-examples .gr-examples-header, /* The main header container for examples */
-        .gr-examples .gr-examples-header > * /* ALL direct children within that header */
-        {
-            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) */
+        .gr-examples .gr-label, .gr-examples button.gr-button-filter, .gr-examples .label-wrap,
+        .gr-examples div[data-testid*="label-text"], .gr-examples span[data-testid*="label-text"],
+        .gr-examples div[class*="label"], .gr-examples .gr-example-label,
+        .gr-examples .gr-box.gr-component.gradio-example > div:first-child:has(> span[data-testid]),
+        .gr-examples .gr-box.gr-component.gradio-example > div:first-child > span,
+        .gr-examples .gr-accordion-header, .gr-examples .gr-accordion-title, .gr-examples .gr-accordion-toggle-icon,
+        .gr-examples .gr-accordion-header button, .gr-examples .gr-button.gr-button-filter,
+        .gr-examples .gr-button.gr-button-primary.gr-button-filter,
+        .gr-examples .gr-examples-header, .gr-examples .gr-examples-header > * {
+            display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important;
+            overflow: hidden !important; margin: 0 !important; padding: 0 !important; border: 0 !important;
+            font-size: 0 !important; line-height: 0 !important; position: absolute !important;
+            pointer-events: none !important;
+        }
+        /* Responsive Adjustments (meticulously refined) - KEPT AS IS */
         @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-title { font-size: 3.8rem; } .app-header-tagline { font-size: 1.5rem; }
             .app-header-wrapper { padding: var(--padding-md) var(--padding-lg) !important; margin-bottom: 2rem; border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); }
             .main-dashboard-container { padding: var(--padding-md) !important; margin-bottom: 0.6rem; border-radius: var(--radius-md); gap: 2rem; }
             .dashboard-card-section { padding: var(--padding-sm); border-radius: var(--radius-sm); }
             .section-title { font-size: 2.2rem !important; margin-bottom: 1.5rem !important; }
-            .sub-section-title { font-size: 1.8rem !important; margin-bottom: 0.7rem !important; } /* Adjusted for 1024px */
-            .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; }
+            .sub-section-title { font-size: 1.8rem !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: 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); }
-            .app-footer { padding: 0 1.5rem !important; } /* Match main content padding */
+            .app-footer { padding: 0 1.5rem !important; }
         }
         @media (max-width: 768px) {
             .gradio-container > .flex.flex-col { padding: 0 1rem !important; }
             .app-header-wrapper { padding: var(--padding-sm) var(--padding-md) !important; margin-bottom: 1.8rem; border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); }
-            .app-header-logo { font-size: 4.5rem; margin-bottom: 0.6rem; }
-            .app-header-title { font-size: 3.2rem; letter-spacing: -0.06em; }
+            .app-header-logo { font-size: 4.5rem; margin-bottom: 0.6rem; } .app-header-title { font-size: 3.2rem; letter-spacing: -0.06em; }
             .app-header-tagline { font-size: 1.3rem; }
             .main-dashboard-container { padding: var(--padding-sm) !important; margin-bottom: 0.5rem; border-radius: var(--radius-md); gap: 1.8rem; }
             .dashboard-card-section { padding: 1.5rem; border-radius: var(--radius-sm); }
             .section-title { font-size: 2rem !important; margin-bottom: 1.2rem !important; }
             .sub-section-title { font-size: 1.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: 1rem; }
+            .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: 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 .response-header { font-size: 1.5rem; } .output-card .response-icon { font-size: 1.7rem; }
             .output-card .placeholder { padding: 2.5rem 1.5rem; font-size: 1.1rem; }
             .examples-section { padding-top: 1.2rem; }
             .examples-section .gr-examples-table th, .examples-section .gr-examples-table td { padding: 0.9rem 1.1rem !important; font-size: 1.0rem !important; }
             .app-footer-wrapper { margin-top: 0.5rem; border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); padding-top: 2rem; padding-bottom: 2rem; }
-            .app-footer { padding: 0 1rem !important; } /* Match main content padding */
+            .app-footer { padding: 0 1rem !important; }
         }
         @media (max-width: 480px) {
             .gradio-container > .flex.flex-col { padding: 0 0.8rem !important; }
             .app-header-wrapper { padding: 1.2rem 1rem !important; margin-bottom: 1.5rem; border-bottom-left-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); }
-            .app-header-logo { font-size: 3.8rem; margin-bottom: 0.5rem; }
-            .app-header-title { font-size: 2.8rem; }
+            .app-header-logo { font-size: 3.8rem; margin-bottom: 0.5rem; } .app-header-title { font-size: 2.8rem; }
             .app-header-tagline { font-size: 1.1rem; }
             .main-dashboard-container { padding: 1.2rem !important; margin-bottom: 0.4rem; border-radius: var(--radius-sm); gap: 1.5rem; }
             .dashboard-card-section { padding: 1rem; border-radius: var(--radius-xs); }
@@ -1027,13 +702,12 @@ Answer:"""
             .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 .response-header { font-size: 1.4rem; } .output-card .response-icon { font-size: 1.5rem; }
             .output-card .placeholder { padding: 2rem 1rem; font-size: 1.05rem; }
             .examples-section { padding-top: 0.8rem; }
             .examples-section .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; border-top-left-radius: var(--radius-sm); border-top-right-radius: var(--radius-sm); padding-top: 1.5rem; padding-bottom: 1.5rem; }
-            .app-footer { padding: 0 0.8rem !important; } /* Match main content padding */
+            .app-footer { padding: 0 0.8rem !important; }
         }
         """
 
@@ -1055,7 +729,7 @@ Answer:"""
 
                 # --- 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("<h3 class='sub-section-title'>Welcome & Disclaimer</h3>") # Should be centered by CSS
                     gr.Markdown(
                         """
                         <p>Navigate landlord-tenant laws with ease. This assistant provides detailed, state-specific answers grounded in legal authority.</p>
@@ -1065,23 +739,23 @@ Answer:"""
 
                 # --- Section 2: OpenAI API Key Input Card ---
                 with gr.Group(elem_classes="dashboard-card-section"):
-                    gr.Markdown("<h3 class='sub-section-title'>OpenAI API Key</h3>")
+                    gr.Markdown("<h3 class='sub-section-title'>OpenAI API Key</h3>") # Should be centered by CSS
                     api_key_input = gr.Textbox(
-                        label="", # Removed redundant label here
+                        label="", 
                         type="password", placeholder="Enter your API key (e.g., sk-...)",
                         info="Required to process your query. Securely used per request, not stored. <a href='https://platform.openai.com/api-keys' target='_blank'>Get one free from OpenAI</a>.", lines=1
                     )
-                
+
                 # --- 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
+                    gr.Markdown("<h3 class='sub-section-title'>Ask Your Question</h3>") # Should be centered by CSS
+                    with gr.Row(elem_classes="input-row"): 
+                        with gr.Column(elem_classes="input-field", scale=3):
                             query_input = gr.Textbox(
                                 label="Question", placeholder="E.g., What are the rules for security deposit returns in my state?",
                                 lines=5, max_lines=10
                             )
-                        with gr.Column(elem_classes="input-field", scale=1): # State dropdown takes less space
+                        with gr.Column(elem_classes="input-field", scale=1): 
                             state_input = gr.Dropdown(
                                 label="Select State", choices=dropdown_choices, value=initial_value,
                                 allow_custom_value=False
@@ -1092,27 +766,27 @@ Answer:"""
 
                 # --- Section 4: Output Display Card ---
                 with gr.Group(elem_classes="dashboard-card-section"):
-                    gr.Markdown("<h3 class='sub-section-title'>Legal Assistant's Response</h3>")
+                    gr.Markdown("<h3 class='sub-section-title'>Legal Assistant's Response</h3>") # Should be centered by CSS
                     output = gr.Markdown(
                         value="<div class='placeholder output-card'>The answer will appear here after submitting your query.</div>",
-                        elem_classes="output-content-wrapper output-card" # Apply these classes for styling
+                        elem_classes="output-content-wrapper output-card" 
                     )
-                
+
                 # --- 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>") 
+                with gr.Group(elem_classes="dashboard-card-section examples-section"):
+                    gr.Markdown("<h3 class='sub-section-title'>Example Questions to Ask</h3>") # Should be centered by CSS
                     if example_queries:
                         gr.Examples(
                             examples=example_queries, inputs=[query_input, state_input],
                             examples_per_page=5,
-                            label="", # This is crucial, but CSS handles the rest
+                            label="", 
                         )
                     else:
                         gr.Markdown("<div class='placeholder'>Sample questions could not be loaded.</div>")
 
             # --- Footer Section ---
             with gr.Group(elem_classes="app-footer-wrapper"):
-                gr.Markdown(
+                gr.Markdown( # Text inside these <p> tags will be right-aligned by CSS
                     """
                     <div class="app-footer">
                         <p>This tool is for informational purposes only and does not constitute legal advice. For legal guidance, always consult with a licensed attorney in your jurisdiction.</p>
@@ -1129,31 +803,29 @@ Answer:"""
             )
             clear_button.click(
                 fn=lambda: (
-                    "", # Clear API key input
-                    "", # Clear query input
-                    initial_value, # Reset state dropdown to initial value
-                    "<div class='placeholder output-card'>Inputs cleared. Ready for your next question.</div>" # Reset output to placeholder
+                    "", 
+                    "", 
+                    initial_value, 
+                    "<div class='placeholder output-card'>Inputs cleared. Ready for your next question.</div>"
                 ),
                 inputs=[], outputs=[api_key_input, query_input, state_input, output]
             )
-        logging.info("Completely new, cohesive, dynamic, and legible Gradio interface created with Legal Console theme.")
-        return demo
+            logging.info("Completely new, cohesive, dynamic, and legible Gradio interface created with Legal Console theme and UI fixes.")
+            return demo
+
 # --- Main Execution Block (remains untouched from original logic) ---
 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_PDF_PATH = os.path.join(SCRIPT_DIR, "tenant-landlord.pdf") 
         DEFAULT_DB_PATH = os.path.join(SCRIPT_DIR, "chroma_db")
 
-        # Use environment variables if set, otherwise default paths
         PDF_PATH = os.getenv("PDF_PATH", DEFAULT_PDF_PATH)
         VECTOR_DB_PATH = os.getenv("VECTOR_DB_PATH", DEFAULT_DB_PATH)
 
-        # Ensure directories exist
         os.makedirs(os.path.dirname(VECTOR_DB_PATH), exist_ok=True)
 
-        # 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}")
@@ -1164,21 +836,37 @@ if __name__ == "__main__":
             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)
-        rag.load_pdf(PDF_PATH) # Load/process PDF data into the vector DB
+        
+        # Ensure vector_db.py has process_and_load_pdf and it's called appropriately
+        # Example: if rag.load_pdf handles it internally based on db content.
+        # If not, you might need to call vector_db_instance.process_and_load_pdf(PDF_PATH) here
+        # For now, assuming rag.load_pdf is sufficient as per original structure.
+        rag.load_pdf(PDF_PATH) 
 
-        # Create and launch the Gradio interface
         app_interface = rag.gradio_interface()
-        SERVER_PORT = 7860
+        SERVER_PORT = int(os.getenv("PORT", 7860)) # Use PORT env var if on Spaces/Cloud, else 7860
+        
         logging.info(f"Launching Gradio app on http://0.0.0.0:{SERVER_PORT}")
-        print(f"\n--- Gradio App Running ---\nAccess at: http://localhost:{SERVER_PORT}\n(Share link will be available if you use share=True)\n--------------------------\n")
-        app_interface.launch(server_name="0.0.0.0", server_port=SERVER_PORT, share=True)
-
+        print(f"\n--- Gradio App Running ---\nAccess at: http://localhost:{SERVER_PORT} or your public Spaces URL\n--------------------------\n")
+        app_interface.launch(server_name="0.0.0.0", server_port=SERVER_PORT, share=False) # share=False is typical for Spaces
+
+    except ModuleNotFoundError as e:
+        if "vector_db" in str(e):
+             logging.error(f"FATAL: Could not import VectorDatabase. Ensure 'vector_db.py' is in the same directory and 'chromadb', 'langchain', 'pypdf', 'sentence-transformers' are installed.", exc_info=True)
+             print(f"\n--- MISSING DEPENDENCY OR FILE ---\nCould not find/import 'vector_db.py' or one of its dependencies.\nError: {e}\nPlease ensure 'vector_db.py' is present and all required packages (chromadb, langchain, pypdf, sentence-transformers, etc.) are in your requirements.txt and installed.\n---------------------------\n")
+        else:
+            logging.error(f"Application startup failed due to a missing module: {str(e)}", exc_info=True)
+            print(f"\n--- FATAL STARTUP ERROR - MISSING MODULE ---\n{str(e)}\nPlease ensure all dependencies are installed.\nCheck logs for more details.\n---------------------------\n")
+        exit(1)
+    except FileNotFoundError as e:
+        logging.error(f"Application startup failed due to a missing file: {str(e)}", exc_info=True)
+        print(f"\n--- FATAL STARTUP ERROR - FILE NOT FOUND ---\n{str(e)}\nPlease ensure the file exists at the specified path.\nCheck logs for more details.\n---------------------------\n")
+        exit(1)
     except Exception as e:
         logging.error(f"Application startup failed: {str(e)}", exc_info=True)
         print(f"\n--- FATAL STARTUP ERROR ---\n{str(e)}\nCheck logs for more details.\n---------------------------\n")