updated UI

app.py

@@ -33,7 +33,7 @@ logging.basicConfig(
     format='%(asctime)s - %(levelname)s - [%(filename)s:%(lineno)d] - %(message)s'
 )
 
-# --- RAGSystem Class ---
+# --- RAGSystem Class (Processing Logic - kept intact as requested) ---
 class RAGSystem:
     def __init__(self, vector_db: Optional[VectorDatabase] = None):
         logging.info("Initializing RAGSystem")
@@ -237,10 +237,10 @@ Answer:"""
             logging.error(f"Failed to load or process PDF '{pdf_path}': {str(e)}", exc_info=True)
             raise RuntimeError(f"Failed to process PDF '{pdf_path}': {e}") from e
 
-    # --- GRADIO INTERFACE ---
+    # --- GRADIO INTERFACE (Completely Redesigned UI) ---
     def gradio_interface(self):
         def query_interface_wrapper(api_key: str, query: str, state: str) -> str:
-            # ... (validation logic remains the same)
+            # Basic 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>"
             if not state or state == "Select a state..." or "Error" in state:
@@ -248,13 +248,17 @@ Answer:"""
             if not query or not query.strip():
                 return "<div class='error-message'><span class='error-icon'>⚠️</span>Please enter your question in the text box.</div>"
 
+            # Call the core processing logic
             result = self.process_query(query=query, state=state, openai_api_key=api_key)
             answer = result.get("answer", "<div class='error-message'><span class='error-icon'>⚠️</span>An unexpected error occurred.</div>")
-            if not "<div class='error-message'>" in answer:
-                 formatted_response = f"<div class='response-header'><span class='response-icon'>📜</span>Response for {state}</div><hr class='divider'>{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
             else:
-                 formatted_response = 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()
@@ -264,6 +268,7 @@ Answer:"""
             dropdown_choices = ["Error: Critical failure loading states"]
             initial_value = dropdown_choices[0]
 
+        # Define example queries, filtering based on available states
         example_queries_base = [
             ["What are the rules for security deposit returns?", "California"],
             ["Can a landlord enter my apartment without notice?", "New York"],
@@ -273,133 +278,672 @@ Answer:"""
         if available_states_list and "Error" not in available_states_list[0] and len(available_states_list) > 0:
             loaded_states_set = set(available_states_list)
             example_queries = [ex for ex in example_queries_base if ex[1] in loaded_states_set]
-            if not example_queries and available_states_list[0] != "Error: States unavailable": # Ensure first state is not error
-                 example_queries.append(["What basic rights do tenants have?", available_states_list[0]])
-        elif not example_queries : # Fallback if states list is problematic
+            # 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"])
+        else: # Fallback if states list is problematic
             example_queries.append(["What basic rights do tenants have?", "California"])
 
 
-        # --- FINAL REFINED "Clarity & Counsel" Theme ---
+        # --- Custom CSS for "Legal Lumen" Theme ---
         custom_css = """
-        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+        /* New Theme: Legal Lumen */
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Montserrat:wght@600;700;800&display=swap');
 
         :root {
-            --font-family-main: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-            /* Light Theme */
-            --app-bg-light: #F9FAFB; --surface-bg-light: #FFFFFF; --text-primary-light: #1A202C;
-            --text-secondary-light: #718096; --accent-primary-light: #00796B; --accent-primary-hover-light: #00695C;
-            --interactive-text-light: #00796B; --interactive-text-hover-light: #005F52; --border-light: #E2E8F0;
-            --button-secondary-bg-light: #F1F5F9; --button-secondary-text-light: #334155; --button-secondary-hover-bg-light: #E2E8F0;
-            --shadow-light: 0 5px 15px rgba(0,0,0,0.05); --focus-ring-light: rgba(0, 121, 107, 0.25);
-            --error-bg-light: #FFF1F2; --error-text-light: #C81E1E; --error-border-light: #FFD0D0;
-            --success-bg-light: #EFFCF6; --success-text-light: #15803D; --success-border-light: #B3EED1;
-            /* Dark Theme */
-            --app-bg-dark: #0F172A; --surface-bg-dark: #1E293B; --text-primary-dark: #F1F5F9;
-            --text-secondary-dark: #94A3B8; --accent-primary-dark: #2DD4BF; --accent-primary-hover-dark: #14B8A6;
-            --interactive-text-dark: #5EEAD4; --interactive-text-hover-dark: #99F6E4; --border-dark: #334155;
-            --button-secondary-bg-dark: #334155; --button-secondary-text-dark: #CBD5E1; --button-secondary-hover-bg-dark: #475569;
-            --shadow-dark: 0 5px 15px rgba(0,0,0,0.2); --focus-ring-dark: rgba(45, 212, 191, 0.3);
-            --error-bg-dark: #451515; --error-text-dark: #FFD0D0; --error-border-dark: #9E2D2D;
-            --success-bg-dark: #073D24; --success-text-dark: #B3EED1; --success-border-dark: #16653D;
-
-            --radius-md: 8px; --radius-lg: 12px; --transition: 0.2s ease-in-out;
-        }
-
-        body, .gradio-container { font-family: var(--font-family-main) !important; background: var(--app-bg-light) !important; color: var(--text-primary-light) !important; margin: 0; padding: 0; min-height: 100vh; font-size: 16px; line-height: 1.7; }
-        * { box-sizing: border-box; }
-        @media (prefers-color-scheme: dark) { body, .gradio-container { background: var(--app-bg-dark) !important; color: var(--text-primary-dark) !important; } }
-
-        .gradio-container > .flex.flex-col { max-width: 820px; margin: 0 auto !important; padding: 0 1.5rem 3rem 1.5rem !important; gap: 0 !important; /* Remove gap, manage spacing with element margins */ }
-
-        .content-surface { background: var(--surface-bg-light) !important; border-radius: var(--radius-lg) !important; padding: 3rem !important; box-shadow: var(--shadow-light) !important; border: 1px solid var(--border-light) !important; margin-bottom: 3rem; }
-        .content-surface:last-child { margin-bottom: 0; } /* No bottom margin for the last surface */
-        @media (prefers-color-scheme: dark) { .content-surface { background: var(--surface-bg-dark) !important; box-shadow: var(--shadow-dark) !important; border: 1px solid var(--border-dark) !important; } }
+            /* Light Theme Colors */
+            --app-bg-light: #F8F9FA; /* Very light gray */
+            --surface-bg-light: #FFFFFF; /* Pure white for cards */
+            --text-primary-light: #212529; /* Dark charcoal */
+            --text-secondary-light: #6C757D; /* Muted gray */
+            --accent-main-light: #007bff; /* Vibrant professional blue */
+            --accent-hover-light: #0056b3; /* Darker blue on hover */
+            --accent-secondary-light: #6C757D; /* For secondary buttons, similar to text secondary */
+            --accent-secondary-hover-light: #5A6268; /* Darker secondary hover */
+            --border-light: #DEE2E6; /* Light border */
+            --shadow-light: 0 0.5rem 1rem rgba(0,0,0,0.08); /* Subtle shadow */
+            --focus-ring-light: rgba(0, 123, 255, 0.25); /* Blue focus ring */
+            --error-bg-light: #F8D7DA; /* Light red for error backgrounds */
+            --error-text-light: #721C24; /* Dark red for error text */
+            --error-border-light: #F5C6CB; /* Red border for errors */
+
+            /* Dark Theme Colors */
+            --app-bg-dark: #212529; /* Deep dark gray */
+            --surface-bg-dark: #343A40; /* Slightly lighter dark gray for cards */
+            --text-primary-dark: #F8F9FA; /* Off-white */
+            --text-secondary-dark: #ADB5BD; /* Muted light gray */
+            --accent-main-dark: #8AB4F8; /* Lighter blue for dark mode */
+            --accent-hover-dark: #669DF6; /* Darker blue on hover for dark mode */
+            --accent-secondary-dark: #ADB5BD; /* For secondary buttons in dark mode */
+            --accent-secondary-hover-dark: #97A0A8; /* Darker secondary hover in dark mode */
+            --border-dark: #495057; /* Dark border */
+            --shadow-dark: 0 0.5rem 1rem rgba(0,0,0,0.3); /* Darker shadow */
+            --focus-ring-dark: rgba(138, 180, 248, 0.35); /* Muted blue focus ring for dark mode */
+            --error-bg-dark: #721C24; /* Dark red for error backgrounds */
+            --error-text-dark: #F8D7DA; /* Light red for error text */
+            --error-border-dark: #F5C6CB; /* Red border for errors */
+
+            /* General Styling Variables */
+            --font-family-main: 'Inter', sans-serif;
+            --font-family-header: 'Montserrat', sans-serif;
+            --radius-sm: 4px; /* Small border radius */
+            --radius-md: 8px; /* Medium border radius */
+            --radius-lg: 12px; /* Large border radius */
+            --transition-speed: 0.25s; /* Standard transition duration */
+        }
+
+        /* Base styles for the entire app */
+        body, .gradio-container {
+            font-family: var(--font-family-main) !important;
+            background: var(--app-bg-light) !important;
+            color: var(--text-primary-light) !important;
+            margin: 0;
+            padding: 0;
+            min-height: 100vh;
+            font-size: 16px;
+            line-height: 1.6; /* Improved readability */
+            -webkit-font-smoothing: antialiased; /* Smoother fonts */
+            -moz-osx-font-smoothing: grayscale;
+        }
+        * { box-sizing: border-box; } /* Ensure consistent box model */
+
+        /* Dark mode preference (applies styles when user's system is in dark mode) */
+        @media (prefers-color-scheme: dark) {
+            body, .gradio-container {
+                background: var(--app-bg-dark) !important;
+                color: var(--text-primary-dark) !important;
+            }
+        }
+
+        /* Global container styling: max-width for content, centering, and padding */
+        .gradio-container > .flex.flex-col {
+            max-width: 900px; /* Slightly wider for better content flow */
+            margin: 0 auto !important; /* Center the container */
+            padding: 2rem 1.5rem 4rem 1.5rem !important; /* Generous top, side, and bottom padding */
+            gap: 0 !important; /* Remove Gradio's default gap, manage spacing with element margins */
+        }
+
+        /* Header section styling: prominent, rounded banner */
+        .app-header-wrapper {
+            background: linear-gradient(135deg, var(--accent-main-light) 0%, var(--accent-hover-light) 100%); /* Gradient background for depth */
+            color: #FFFFFF !important; /* White text for light theme header */
+            padding: 3rem 2rem 4rem 2rem !important; /* More vertical padding for impact */
+            text-align: center !important;
+            border-radius: var(--radius-lg); /* Rounded corners for the header card */
+            box-shadow: var(--shadow-light);
+            margin-bottom: 3.5rem; /* Spacing between header and first content card */
+            position: relative; /* For animation context */
+            overflow: hidden; /* Ensure content stays within rounded corners */
+        }
+        .app-header {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            position: relative;
+            z-index: 1; /* Keep content above any potential background effects */
+        }
+        .app-header-logo {
+            font-size: 4rem; /* Larger icon */
+            margin-bottom: 1rem;
+            display: block;
+            line-height: 1; /* Prevent extra space below emoji */
+            animation: bounceIn 0.8s ease-out; /* Simple entry animation for logo */
+        }
+        .app-header-title {
+            font-family: var(--font-family-header) !important;
+            font-size: 2.8rem; /* Much larger and bolder */
+            font-weight: 800; /* Extra bold */
+            margin: 0 0 0.75rem 0;
+            letter-spacing: -0.04em; /* Tighter letter spacing for a modern look */
+            text-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Subtle text shadow for depth */
+            animation: fadeInDown 1s ease-out; /* Entry animation for title */
+        }
+        .app-header-tagline {
+            font-family: var(--font-family-main) !important;
+            font-size: 1.25rem; /* Slightly larger tagline */
+            font-weight: 300;
+            opacity: 0.9;
+            max-width: 600px;
+            animation: fadeInUp 1s ease-out; /* Entry animation for tagline */
+        }
+
+        /* Dark mode header adjustments */
+        @media (prefers-color-scheme: dark) {
+            .app-header-wrapper {
+                background: linear-gradient(135deg, var(--accent-main-dark) 0%, var(--accent-hover-dark) 100%);
+                box-shadow: var(--shadow-dark);
+            }
+            .app-header-title { color: var(--text-primary-dark) !important; } /* Ensure title color adjusts for dark theme */
+        }
+
+        /* Keyframe animations for header elements */
+        @keyframes bounceIn {
+            0%, 20%, 40%, 60%, 80%, 100% {
+                -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+                transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+            }
+            0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); }
+            20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); }
+            40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); }
+            60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); }
+            80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); }
+            100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
+        }
 
-        .app-header-wrapper { background: var(--accent-primary-light) !important; margin-bottom: 3rem; border-bottom-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); box-shadow: var(--shadow-light); }
-        .app-header { color: #FFFFFF !important; padding: 3.5rem 2rem !important; text-align: center !important; display: flex; flex-direction: column; align-items: center; }
-        .app-header-logo { font-size: 3rem; margin-bottom: 0.75rem; display: block; text-align: center !important; }
-        .app-header-title { font-size: 2.25rem; font-weight: 600; margin: 0 0 0.5rem 0; text-align: center !important; }
-        .app-header-tagline { font-size: 1.1rem; font-weight: 300; opacity: 0.95; text-align: center !important; }
+        @keyframes fadeInDown {
+            from { opacity: 0; transform: translate3d(0, -20px, 0); }
+            to { opacity: 1; transform: translate3d(0, 0, 0); }
+        }
+
+        @keyframes fadeInUp {
+            from { opacity: 0; transform: translate3d(0, 20px, 0); }
+            to { opacity: 1; transform: translate3d(0, 0, 0); }
+        }
+
+
+        /* Styling for general content cards (surface elements) */
+        .content-surface {
+            background: var(--surface-bg-light) !important;
+            border-radius: var(--radius-lg) !important;
+            padding: 3rem !important; /* Consistent padding */
+            box-shadow: var(--shadow-light) !important;
+            border: 1px solid var(--border-light) !important;
+            margin-bottom: 3rem; /* Spacing between cards */
+            transition: background var(--transition-speed), border-color var(--transition-speed), box-shadow var(--transition-speed);
+        }
+        .content-surface:last-child { margin-bottom: 0; } /* No bottom margin for the last surface */
         @media (prefers-color-scheme: dark) {
-            .app-header-wrapper { background: var(--accent-primary-dark) !important; box-shadow: var(--shadow-dark); }
-            .app-header { color: var(--app-bg-dark) !important; }
+            .content-surface {
+                background: var(--surface-bg-dark) !important;
+                box-shadow: var(--shadow-dark) !important;
+                border: 1px solid var(--border-dark) !important;
+            }
         }
 
-        .section-title, .input-form-card h3, .examples-card .gr-examples-header { font-size: 1.5rem !important; font-weight: 600 !important; color: var(--text-primary-light) !important; margin: 0 auto 2rem auto !important; padding-bottom: 1rem !important; border-bottom: 1px solid var(--border-light) !important; text-align: center !important; width: 100%; }
-        @media (prefers-color-scheme: dark) { .section-title, .input-form-card h3, .examples-card .gr-examples-header { color: var(--text-primary-dark) !important; border-bottom-color: var(--border-dark) !important; } }
+        /* Section titles within content cards: centered, bold, with a clear separator */
+        .section-title, .input-form-card h3, .examples-card .gr-examples-header {
+            font-family: var(--font-family-header) !important;
+            font-size: 1.65rem !important; /* Slightly larger than before */
+            font-weight: 600 !important;
+            color: var(--text-primary-light) !important;
+            margin: 0 auto 2.2rem auto !important; /* Centered, with more space below title */
+            padding-bottom: 1rem !important;
+            border-bottom: 2px solid var(--border-light) !important; /* Thicker separator for emphasis */
+            text-align: center !important;
+            width: 100%;
+        }
+        @media (prefers-color-scheme: dark) {
+            .section-title, .input-form-card h3, .examples-card .gr-examples-header {
+                color: var(--text-primary-dark) !important;
+                border-bottom-color: var(--border-dark) !important;
+            }
+        }
 
-        .content-surface p { font-size: 1rem; line-height: 1.75; color: var(--text-secondary-light); margin-bottom: 1rem; }
-        .content-surface a { color: var(--interactive-text-light); text-decoration: none; font-weight: 500; }
-        .content-surface a:hover { color: var(--interactive-text-hover-light); text-decoration: underline; }
-        .content-surface strong { font-weight: 600; color: var(--text-primary-light); }
-        @media (prefers-color-scheme: dark) { .content-surface p { color: var(--text-secondary-dark); } .content-surface a { color: var(--interactive-text-dark); } .content-surface a:hover { color: var(--interactive-text-hover-dark); } .content-surface strong { color: var(--text-primary-dark); } }
+        /* General text styling within content surfaces */
+        .content-surface p {
+            font-size: 1.05rem; /* Slightly larger body text for readability */
+            line-height: 1.7; /* Generous line height */
+            color: var(--text-secondary-light);
+            margin-bottom: 1rem;
+        }
+        .content-surface a {
+            color: var(--accent-main-light);
+            text-decoration: none;
+            font-weight: 500;
+            transition: color var(--transition-speed), text-decoration var(--transition-speed);
+        }
+        .content-surface a:hover {
+            color: var(--accent-hover-light);
+            text-decoration: underline;
+        }
+        .content-surface strong {
+            font-weight: 600;
+            color: var(--text-primary-light);
+        }
+        @media (prefers-color-scheme: dark) {
+            .content-surface p { color: var(--text-secondary-dark); }
+            .content-surface a { color: var(--accent-main-dark); }
+            .content-surface a:hover { color: var(--accent-hover-dark); }
+            .content-surface strong { color: var(--text-primary-dark); }
+        }
 
+        /* Input field group and layout: organized and symmetric */
         .input-field-group { margin-bottom: 2rem; }
-        .input-row { display: flex; gap: 1.75rem; flex-wrap: wrap; margin-bottom: 2rem; }
-        .input-field { flex: 1; min-width: 250px; }
-
-        .gradio-input-label { font-size: 0.9rem !important; font-weight: 500 !important; color: var(--text-primary-light) !important; margin-bottom: 0.5rem !important; display: block !important; }
-        .gradio-input-info { font-size: 0.8rem !important; color: var(--text-secondary-light) !important; margin-top: 0.35rem; }
-        @media (prefers-color-scheme: dark) { .gradio-input-label { color: var(--text-primary-dark) !important; } .gradio-input-info { color: var(--text-secondary-dark) !important; } }
-
-        .gradio-textbox textarea, .gradio-dropdown select, .gradio-textbox input[type=password] { border: 1px solid var(--border-light) !important; border-radius: var(--radius-md) !important; padding: 0.9rem 1.05rem !important; font-size: 1rem !important; background: var(--surface-bg-light) !important; color: var(--text-primary-light) !important; width: 100% !important; box-shadow: none !important; transition: border-color var(--transition), box-shadow var(--transition); }
-        .gradio-textbox textarea { min-height: 120px; }
-        .gradio-textbox textarea::placeholder, .gradio-textbox input[type=password]::placeholder { color: #A0AEC0 !important; }
-        .gradio-textbox textarea:focus, .gradio-dropdown select:focus, .gradio-textbox input[type=password]:focus { border-color: var(--accent-primary-light) !important; box-shadow: 0 0 0 3px var(--focus-ring-light) !important; outline: none !important; }
-        @media (prefers-color-scheme: dark) { .gradio-textbox textarea, .gradio-dropdown select, .gradio-textbox input[type=password] { border: 1px solid var(--border-dark) !important; background: var(--surface-bg-dark) !important; color: var(--text-primary-dark) !important; } .gradio-textbox textarea::placeholder, .gradio-textbox input[type=password]::placeholder { color: #718096 !important; } .gradio-textbox textarea:focus, .gradio-dropdown select:focus, .gradio-textbox input[type=password]:focus { border-color: var(--accent-primary-dark) !important; box-shadow: 0 0 0 3px var(--focus-ring-dark) !important; } }
-        .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%236B7280%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 1rem center; background-size: 1em; padding-right: 3rem !important; }
-        @media (prefers-color-scheme: dark) { .gradio-dropdown select { background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22%239CA3AF%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-row { display: flex; gap: 1.25rem; margin-top: 2.25rem; flex-wrap: wrap; justify-content: flex-end; }
-        .gradio-button { border-radius: var(--radius-md) !important; padding: 0.8rem 1.85rem !important; font-size: 1rem !important; font-weight: 500 !important; border: 1px solid transparent !important; box-shadow: var(--shadow-light) !important; }
-        .gradio-button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0,0,0,0.07) !important; }
-        .gradio-button:active:not(:disabled) { transform: translateY(-1px); }
-        .gradio-button:disabled { background: #E5E7EB !important; color: #9CA3AF !important; box-shadow: none !important; border-color: #D1D5DB !important; }
-        .gr-button-primary { background: var(--accent-primary-light) !important; color: #FFFFFF !important; border-color: var(--accent-primary-light) !important; }
-        .gr-button-primary:hover:not(:disabled) { background: var(--accent-primary-hover-light) !important; border-color: var(--accent-primary-hover-light) !important;}
-        .gr-button-secondary { background: var(--button-secondary-bg-light) !important; color: var(--button-secondary-text-light) !important; border-color: var(--border-light) !important; }
-        .gr-button-secondary:hover:not(:disabled) { background: var(--button-secondary-hover-bg-light) !important; border-color: #CBD5E0 !important; }
-        @media (prefers-color-scheme: dark) { .gradio-button { box-shadow: var(--shadow-dark) !important; } .gradio-button:hover:not(:disabled) { box-shadow: 0 6px 12px rgba(0,0,0,0.25) !important; } .gradio-button:disabled { background: #334155 !important; color: #6B7280 !important; border-color: #475569 !important;} .gr-button-primary { background: var(--accent-primary-dark) !important; color: var(--app-bg-dark) !important; border-color: var(--accent-primary-dark) !important; } .gr-button-primary:hover:not(:disabled) { background: var(--accent-primary-hover-dark) !important; border-color: var(--accent-primary-hover-dark) !important; } .gr-button-secondary { background: var(--button-secondary-bg-dark) !important; color: var(--button-secondary-text-dark) !important; border-color: var(--border-dark) !important; } .gr-button-secondary:hover:not(:disabled) { background: var(--button-secondary-hover-bg-dark) !important; border-color: #475569 !important; } }
-
-        .output-card .response-header { font-size: 1.3rem; font-weight: 600; color: var(--text-primary-light); margin: 0 0 1rem 0; display: flex; align-items: center; gap: 0.6rem; }
-        .output-card .response-icon { font-size: 1.4rem; color: var(--text-secondary-light); }
-        .output-card .divider { border: none; border-top: 1px solid var(--border-light); margin: 1.5rem 0; }
-        .output-card .output-content-wrapper { font-size: 1rem; line-height: 1.75; color: var(--text-primary-light); }
-        .output-card .output-content-wrapper p { margin-bottom: 1rem; } .output-card .output-content-wrapper ul, .output-card .output-content-wrapper ol { margin-left: 1.5rem; margin-bottom: 1rem; padding-left: 1rem; } .output-card .output-content-wrapper li { margin-bottom: 0.5rem; }
-        @media (prefers-color-scheme: dark) { .output-card .response-header { color: var(--text-primary-dark); } .output-card .response-icon { color: var(--text-secondary-dark); } .output-card .divider { border-top: 1px solid var(--border-dark); } .output-card .output-content-wrapper { color: var(--text-primary-dark); } }
-
-        .output-card .error-message, .output-card .success-message { padding: 1rem 1.25rem; margin-top: 1.25rem; font-size: 0.95rem; border-radius: var(--radius-md);}
-        .output-card .error-message .error-icon { font-size: 1.2rem; } .output-card .error-details { font-size: 0.85rem; }
-        .output-card .placeholder { padding: 3rem 1.5rem; font-size: 1.1rem; border-radius: var(--radius-lg); border: 2px dashed var(--border-light); }
-        @media (prefers-color-scheme: dark) { .output-card .placeholder { border-color: var(--border-dark); } }
-
-        .examples-card .gr-examples-table { border-radius: var(--radius-lg) !important; border: 1px solid var(--border-light) !important; }
-        .examples-card .gr-examples-table th, .examples-card .gr-examples-table td { padding: 0.9rem 1.1rem !important; font-size: 0.95rem !important; }
-        .examples-card .gr-examples-table th { background: #F9FAFB !important; }
-        @media (prefers-color-scheme: dark) { .examples-card .gr-examples-table { border: 1px solid var(--border-dark) !important;} .examples-card .gr-examples-table th { background: #0F172A !important; } }
-
-        .app-footer-wrapper { border-top: 1px solid var(--border-light) !important; margin-top: 3rem; }
-        .app-footer { padding: 3rem 1.5rem !important; text-align: center !important; display: flex; flex-direction: column; align-items: center; }
-        .app-footer p { font-size: 0.9rem !important; color: var(--text-secondary-light) !important; margin-bottom: 0.75rem; text-align: center !important; max-width: 600px; /* Constrain footer text width */ }
-        .app-footer a { color: var(--interactive-text-light) !important; font-weight: 500; }
-        .app-footer a:hover { color: var(--interactive-text-hover-light) !important; text-decoration: underline; }
-        @media (prefers-color-scheme: dark) { .app-footer-wrapper { border-top-color: var(--border-dark) !important; } .app-footer p { color: var(--text-secondary-dark) !important; } .app-footer a { color: var(--interactive-text-dark) !important; } .app-footer a:hover { color: var(--interactive-text-hover-dark) !important; } }
-
-        :focus-visible { outline: 2px solid var(--accent-primary-light) !important; outline-offset: 2px; box-shadow: 0 0 0 3px var(--focus-ring-light) !important; }
-        @media (prefers-color-scheme: dark) { :focus-visible { outline-color: var(--accent-primary-dark) !important; box-shadow: 0 0 0 3px var(--focus-ring-dark) !important; } }
+        .input-row {
+            display: flex;
+            gap: 2rem; /* Increased gap for better spacing */
+            flex-wrap: wrap; /* Allow wrapping on smaller screens */
+            margin-bottom: 2.5rem; /* More space before buttons */
+        }
+        .input-field {
+            flex: 1; /* Distribute space evenly */
+            min-width: 280px; /* Adjusted minimum width before wrapping */
+        }
+
+        /* Input labels and info text */
+        .gradio-input-label {
+            font-size: 1rem !important; /* Slightly larger label */
+            font-weight: 500 !important;
+            color: var(--text-primary-light) !important;
+            margin-bottom: 0.6rem !important;
+            display: block !important;
+        }
+        .gradio-input-info {
+            font-size: 0.85rem !important;
+            color: var(--text-secondary-light) !important;
+            margin-top: 0.4rem;
+        }
+        @media (prefers-color-scheme: dark) {
+            .gradio-input-label { color: var(--text-primary-dark) !important; }
+            .gradio-input-info { color: var(--text-secondary-dark) !important; }
+        }
+
+        /* Textbox, Dropdown, Password input styling: larger and more padded */
+        .gradio-textbox textarea,
+        .gradio-dropdown select,
+        .gradio-textbox input[type=password] {
+            border: 1px solid var(--border-light) !important;
+            border-radius: var(--radius-md) !important;
+            padding: 1rem 1.2rem !important; /* More padding */
+            font-size: 1.05rem !important; /* Larger font size */
+            background: var(--surface-bg-light) !important;
+            color: var(--text-primary-light) !important;
+            width: 100% !important;
+            box-shadow: none !important;
+            transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
+        }
+        .gradio-textbox textarea { min-height: 140px; } /* Taller textarea for more input visibility */
+        .gradio-textbox textarea::placeholder,
+        .gradio-textbox input[type=password]::placeholder {
+            color: #A0AEC0 !important; /* Consistent placeholder color */
+        }
+        .gradio-textbox textarea:focus,
+        .gradio-dropdown select:focus,
+        .gradio-textbox input[type=password]:focus {
+            border-color: var(--accent-main-light) !important;
+            box-shadow: 0 0 0 3px var(--focus-ring-light) !important; /* Accent color focus ring */
+            outline: none !important;
+        }
+        @media (prefers-color-scheme: dark) {
+            .gradio-textbox textarea,
+            .gradio-dropdown select,
+            .gradio-textbox input[type=password] {
+                border: 1px solid var(--border-dark) !important;
+                background: var(--surface-bg-dark) !important;
+                color: var(--text-primary-dark) !important;
+            }
+            .gradio-textbox textarea::placeholder,
+            .gradio-textbox input[type=password]::placeholder {
+                color: #718096 !important;
+            }
+            .gradio-textbox textarea:focus,
+            .gradio-dropdown select:focus,
+            .gradio-textbox input[type=password]:focus {
+                border-color: var(--accent-main-dark) !important;
+                box-shadow: 0 0 0 3px var(--focus-ring-dark) !important;
+            }
+        }
+
+        /* Custom dropdown arrow for consistent look (re-applied for new colors) */
+        .gradio-dropdown select {
+            appearance: none; /* Remove native arrow */
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22%236C757D%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M5.293%207.293a1%201%200%20011.414%200L10%2010.586l3.293-3.293a1%201%200%20111.414%201.414l-4%204a1%201%200%2001-1.414%200l-4-4a1%201%200%20010-1.414z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E');
+            background-repeat: no-repeat;
+            background-position: right 1.2rem center; /* Adjusted position */
+            background-size: 1.1em; /* Slightly larger arrow */
+            padding-right: 3.5rem !important; /* Make space for arrow */
+        }
+        @media (prefers-color-scheme: dark) {
+            .gradio-dropdown select {
+                background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22%23ADB5BD%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M5.293%207.293a1%201%200%20011.414%200L10%2010.586l3.293-3.293a1%201%200%20111.414%201.414l-4%204a1%201%200%2001-1.414%200l-4-4a1%201%200%20010-1.414z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E');
+            }
+        }
+
+        /* Button group and styling: dynamic and clear actions */
+        .button-row {
+            display: flex;
+            gap: 1.5rem; /* More space between buttons */
+            margin-top: 2rem;
+            flex-wrap: wrap;
+            justify-content: flex-end; /* Align buttons to the right */
+        }
+        .gradio-button {
+            border-radius: var(--radius-md) !important;
+            padding: 0.9rem 2rem !important; /* More padding */
+            font-size: 1.05rem !important; /* Larger font */
+            font-weight: 500 !important;
+            border: 1px solid transparent !important;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Subtle shadow for primary */
+            transition: all var(--transition-speed) ease; /* Smooth transition for hover/active states */
+        }
+        .gradio-button:hover:not(:disabled) {
+            transform: translateY(-3px); /* More pronounced lift on hover */
+            box-shadow: 0 6px 12px rgba(0,0,0,0.15) !important;
+        }
+        .gradio-button:active:not(:disabled) { transform: translateY(-1px); } /* Slight press effect */
+        .gradio-button:disabled {
+            background: #E9ECEF !important;
+            color: #ADB5BD !important;
+            box-shadow: none !important;
+            border-color: #DEE2E6 !important;
+            cursor: not-allowed;
+        }
+
+        /* Primary button (Submit Query) */
+        .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;
+        }
+
+        /* Secondary button (Clear) */
+        .gr-button-secondary {
+            background: transparent !important; /* Transparent background */
+            color: var(--accent-secondary-light) !important;
+            border-color: var(--accent-secondary-light) !important; /* Border in accent color */
+            box-shadow: none !important; /* No shadow for secondary button */
+        }
+        .gr-button-secondary:hover:not(:disabled) {
+            background: rgba(0, 123, 255, 0.05) !important; /* Very light hover background */
+            color: var(--accent-hover-light) !important;
+            border-color: var(--accent-hover-light) !important;
+            box-shadow: none !important;
+        }
+
+        @media (prefers-color-scheme: dark) {
+            .gradio-button { box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important; }
+            .gradio-button:hover:not(:disabled) { box-shadow: 0 6px 12px rgba(0,0,0,0.3) !important; }
+            .gradio-button:disabled {
+                background: #495057 !important;
+                color: #6C757D !important;
+                border-color: #6C757D !important;
+            }
+            .gr-button-primary {
+                background: var(--accent-main-dark) !important;
+                color: var(--text-primary-dark) !important; /* Text color contrasts with dark accent */
+                border-color: var(--accent-main-dark) !important;
+            }
+            .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(--accent-secondary-dark) !important;
+                border-color: var(--accent-secondary-dark) !important;
+            }
+            .gr-button-secondary:hover:not(:disabled) {
+                background: rgba(138, 180, 248, 0.1) !important; /* Light blue hover for dark secondary */
+                color: var(--accent-hover-dark) !important;
+                border-color: var(--accent-hover-dark) !important;
+            }
+        }
+
+        /* Output Card Styling: clear structure for answers */
+        .output-card .response-header {
+            font-size: 1.4rem; /* Larger header */
+            font-weight: 600;
+            color: var(--text-primary-light);
+            margin: 0 0 1.2rem 0;
+            display: flex;
+            align-items: center;
+            gap: 0.8rem; /* Space between icon and text */
+        }
+        .output-card .response-icon {
+            font-size: 1.6rem;
+            color: var(--accent-main-light); /* Accent color for icon */
+        }
+        .output-card .divider {
+            border: none;
+            border-top: 1px solid var(--border-light);
+            margin: 1.5rem 0 2rem 0; /* More spacing around divider */
+        }
+        .output-card .output-content-wrapper {
+            font-size: 1.05rem;
+            line-height: 1.7;
+            color: var(--text-primary-light);
+        }
+        .output-card .output-content-wrapper p { margin-bottom: 1rem; }
+        .output-card .output-content-wrapper ul,
+        .output-card .output-content-wrapper ol {
+            margin-left: 1.8rem; /* More indentation for lists */
+            margin-bottom: 1rem;
+            padding-left: 0;
+            list-style-type: disc; /* Ensure consistent bullet style */
+        }
+        .output-card .output-content-wrapper ol { list-style-type: decimal; } /* Numbered lists */
+        .output-card .output-content-wrapper li { margin-bottom: 0.6rem; }
+        .output-card .output-content-wrapper strong { font-weight: 700; } /* Bolder strong text within output */
+        .output-card .output-content-wrapper a {
+            color: var(--accent-main-light);
+            text-decoration: underline; /* Links in output should be underlined for clarity */
+        }
+        .output-card .output-content-wrapper a:hover {
+            color: var(--accent-hover-light);
+        }
+
+        @media (prefers-color-scheme: dark) {
+            .output-card .response-header { color: var(--text-primary-dark); }
+            .output-card .response-icon { color: var(--accent-main-dark); }
+            .output-card .divider { border-top: 1px solid var(--border-dark); }
+            .output-card .output-content-wrapper { color: var(--text-primary-dark); }
+            .output-card .output-content-wrapper a { color: var(--accent-main-dark); }
+            .output-card .output-content-wrapper a:hover { color: var(--accent-hover-dark); }
+        }
+
+        /* Error and Success Messages: visually distinct and informative */
+        .output-card .error-message {
+            padding: 1rem 1.5rem;
+            margin-top: 1.5rem;
+            font-size: 1rem;
+            border-radius: var(--radius-md);
+            background: var(--error-bg-light);
+            color: var(--error-text-light);
+            border: 1px solid var(--error-border-light);
+            display: flex; /* Use flexbox for icon and text alignment */
+            align-items: flex-start; /* Align text to top if icon is taller */
+            gap: 0.8em;
+        }
+        .output-card .error-message .error-icon {
+            font-size: 1.4rem;
+            line-height: 1; /* Ensure icon is vertically centered */
+            padding-top: 0.1em; /* Fine tune vertical alignment */
+        }
+        .output-card .error-details {
+            font-size: 0.9rem;
+            margin-top: 0.6rem;
+            opacity: 0.9;
+            word-break: break-word; /* Prevent long URLs/messages from overflowing */
+        }
+        @media (prefers-color-scheme: dark) {
+            .output-card .error-message {
+                background: var(--error-bg-dark);
+                color: var(--error-text-dark);
+                border: 1px solid var(--error-border-dark);
+            }
+        }
+
+        /* Placeholder styling for empty output area */
+        .output-card .placeholder {
+            padding: 3.5rem 1.5rem; /* More vertical padding */
+            font-size: 1.15rem; /* Larger placeholder text */
+            border-radius: var(--radius-lg);
+            border: 2px dashed var(--border-light);
+            color: var(--text-secondary-light);
+            text-align: center;
+            opacity: 0.8;
+        }
+        @media (prefers-color-scheme: dark) {
+            .output-card .placeholder {
+                border-color: var(--border-dark);
+                color: var(--text-secondary-dark);
+            }
+        }
+
+        /* Examples table styling: clean and interactive */
+        .examples-card .gr-examples-table {
+            border-radius: var(--radius-lg) !important;
+            border: 1px solid var(--border-light) !important;
+            overflow: hidden; /* Ensures border-radius is applied to table */
+        }
+        .examples-card .gr-examples-table th,
+        .examples-card .gr-examples-table td {
+            padding: 1rem 1.2rem !important; /* More padding */
+            font-size: 0.98rem !important;
+            border: none !important; /* Remove individual cell borders */
+        }
+        .examples-card .gr-examples-table th {
+            background: var(--app-bg-light) !important; /* Match app background for table header for seamless look */
+            color: var(--text-primary-light) !important;
+            font-weight: 600 !important;
+            text-align: left;
+        }
+        .examples-card .gr-examples-table td {
+            background: var(--surface-bg-light) !important;
+            color: var(--text-primary-light) !important;
+            border-top: 1px solid var(--border-light) !important; /* Add horizontal rule between rows */
+            cursor: pointer; /* Indicate clickable rows */
+            transition: background var(--transition-speed);
+        }
+        .examples-card .gr-examples-table tr:hover td {
+            background: rgba(0, 123, 255, 0.03) !important; /* Very light hover effect */
+        }
+        .examples-card .gr-examples-table tr:first-child td { border-top: none !important; } /* No top border for first row's cells */
+
+        @media (prefers-color-scheme: dark) {
+            .examples-card .gr-examples-table { border: 1px solid var(--border-dark) !important;}
+            .examples-card .gr-examples-table th {
+                background: var(--app-bg-dark) !important;
+                color: var(--text-primary-dark) !important;
+            }
+            .examples-card .gr-examples-table td {
+                background: var(--surface-bg-dark) !important;
+                color: var(--text-primary-dark) !important;
+                border-top: 1px solid var(--border-dark) !important;
+            }
+            .examples-card .gr-examples-table tr:hover td {
+                background: rgba(138, 180, 248, 0.1) !important; /* Light blue hover for dark table */
+            }
+        }
+
+        /* Footer styling: clean and informative */
+        .app-footer-wrapper {
+            border-top: 1px solid var(--border-light) !important;
+            margin-top: 3.5rem; /* Spacing from last content card */
+            padding-top: 3rem; /* Padding above footer content */
+        }
+        .app-footer {
+            padding: 0 1.5rem !important;
+            text-align: center !important;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        .app-footer p {
+            font-size: 0.95rem !important;
+            color: var(--text-secondary-light) !important;
+            margin-bottom: 0.8rem;
+            max-width: 650px; /* Constrain text width for readability */
+        }
+        .app-footer a {
+            color: var(--accent-main-light) !important;
+            font-weight: 500;
+            transition: color var(--transition-speed), text-decoration var(--transition-speed);
+        }
+        .app-footer a:hover {
+            color: var(--accent-hover-light) !important;
+            text-decoration: underline;
+        }
+        @media (prefers-color-scheme: dark) {
+            .app-footer-wrapper { border-top-color: var(--border-dark) !important; }
+            .app-footer p { color: var(--text-secondary-dark) !important; }
+            .app-footer a { color: var(--accent-main-dark) !important; }
+            .app-footer a:hover { color: var(--accent-hover-dark) !important; }
+        }
+
+        /* Accessibility: Focus styles for keyboard navigation */
+        :focus-visible {
+            outline: 2px solid var(--accent-main-light) !important;
+            outline-offset: 2px;
+            box-shadow: 0 0 0 4px var(--focus-ring-light) !important; /* Thicker, more visible focus ring */
+        }
+        @media (prefers-color-scheme: dark) {
+            :focus-visible {
+                outline-color: var(--accent-main-dark) !important;
+                box-shadow: 0 0 0 4px var(--focus-ring-dark) !important;
+            }
+        }
+        /* Prevent double focus outline on Gradio buttons' internal span */
         .gradio-button span:focus { outline: none !important; }
 
-        @media (max-width: 768px) { body { font-size: 15px; } .gradio-container > .flex.flex-col { padding: 0 1rem 2.5rem 1rem !important; } .content-surface { padding: 2.25rem !important; margin-bottom: 2.5rem; } .app-header-wrapper { margin-bottom: 2.5rem; } .app-header { padding: 2.75rem 1.25rem !important; } .app-header-logo { font-size: 2.6rem; } .app-header-title { font-size: 2rem; } .app-header-tagline { font-size: 1.05rem; } .input-row { flex-direction: column; gap: 1.5rem; } .input-field { min-width: 100%; } .button-row { justify-content: stretch; } .gradio-button { width: 100%; } .section-title, .input-form-card h3, .examples-card .gr-examples-header { font-size: 1.35rem !important; } .app-footer-wrapper { margin-top: 2.5rem; } .app-footer { padding: 2.5rem 1rem !important; } }
-        @media (max-width: 480px) { .gradio-container > .flex.flex-col { padding: 0 0.75rem 2rem 0.75rem !important; } .content-surface { padding: 1.75rem !important; margin-bottom: 2rem; border-radius: var(--radius-md) !important; } .app-header-wrapper { margin-bottom: 2rem; border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); } .app-header { padding: 2.25rem 1rem !important; } .app-header-logo { font-size: 2.2rem; } .app-header-title { font-size: 1.7rem; } .app-header-tagline { font-size: 0.95rem; } .section-title, .input-form-card h3, .examples-card .gr-examples-header { font-size: 1.25rem !important; margin-bottom: 1.75rem !important; padding-bottom: 0.85rem !important; } .gradio-textbox textarea, .gradio-dropdown select, .gradio-textbox input[type=password] { font-size: 0.95rem !important; padding: 0.85rem 1rem !important; } .gradio-button { padding: 0.85rem 1.5rem !important; font-size: 0.95rem !important; } .examples-card .gr-examples-table th, .examples-card .gr-examples-table td { padding: 0.75rem 0.9rem !important; font-size: 0.9rem !important; } .app-footer-wrapper { margin-top: 2rem; } .app-footer { padding: 2rem 0.75rem !important; } }
 
-        .gradio-container > .flex { gap: 0 !important; } /* Main gap removed, managed by surface margins */
-        .gradio-markdown > *:first-child { margin-top: 0; } .gradio-markdown > *:last-child { margin-bottom: 0; }
+        /* Essential overrides to ensure custom styles take precedence over Gradio defaults */
+        .gradio-container > .flex { gap: 0 !important; } /* Remove main container gap */
+        .gradio-markdown > *:first-child { margin-top: 0; } /* Remove top margin from first element in Markdown */
+        .gradio-markdown > *:last-child { margin-bottom: 0; } /* Remove bottom margin from last element in Markdown */
+        /* Remove default Gradio component borders/padding that interfere with custom styling */
         .gradio-dropdown, .gradio-textbox { border: none !important; padding: 0 !important; background: transparent !important; }
+
+        /* Responsive adjustments for various screen sizes */
+        @media (max-width: 992px) {
+            .gradio-container > .flex.flex-col { max-width: 760px; padding: 1.5rem 1.25rem 3.5rem 1.25rem !important; }
+            .content-surface { padding: 2.5rem !important; margin-bottom: 2.5rem; }
+            .app-header-wrapper { padding: 2.5rem 1.5rem 3.5rem 1.5rem !important; margin-bottom: 3rem; }
+            .app-header-title { font-size: 2.5rem; }
+            .app-header-tagline { font-size: 1.15rem; }
+            .section-title, .input-form-card h3, .examples-card .gr-examples-header { font-size: 1.5rem !important; margin-bottom: 2rem !important; }
+            .input-row { gap: 1.5rem; }
+            .gradio-textbox textarea { min-height: 120px; }
+        }
+
+        @media (max-width: 768px) {
+            .gradio-container > .flex.flex-col { padding: 1rem 1rem 3rem 1rem !important; }
+            .content-surface { padding: 2rem !important; margin-bottom: 2rem; }
+            .app-header-wrapper { padding: 2rem 1.25rem 3rem 1.25rem !important; margin-bottom: 2.5rem; }
+            .app-header-logo { font-size: 3.5rem; }
+            .app-header-title { font-size: 2.2rem; letter-spacing: -0.03em; }
+            .app-header-tagline { font-size: 1.05rem; }
+            .section-title, .input-form-card h3, .examples-card .gr-examples-header { font-size: 1.4rem !important; margin-bottom: 1.8rem !important; }
+            .input-row { flex-direction: column; gap: 1.25rem; } /* Stack inputs vertically */
+            .input-field { min-width: 100%; }
+            .button-row { justify-content: stretch; } /* Stretch buttons to full width */
+            .gradio-button { width: 100%; }
+            .output-card .response-header { font-size: 1.25rem; }
+            .output-card .response-icon { font-size: 1.4rem; }
+            .output-card .placeholder { padding: 3rem 1rem; font-size: 1.1rem; }
+            .examples-card .gr-examples-table th, .examples-card .gr-examples-table td { padding: 0.8rem 1rem !important; font-size: 0.95rem !important; }
+            .app-footer-wrapper { margin-top: 3rem; padding-top: 2.5rem; }
+            .app-footer p { font-size: 0.9rem !important; }
+        }
+
+        @media (max-width: 480px) {
+            .gradio-container > .flex.flex-col { padding: 0.75rem 0.75rem 2.5rem 0.75rem !important; }
+            .content-surface { padding: 1.5rem !important; margin-bottom: 1.5rem; border-radius: var(--radius-md) !important; }
+            .app-header-wrapper { padding: 1.5rem 1rem 2rem 1rem !important; margin-bottom: 2rem; border-radius: var(--radius-md); }
+            .app-header-logo { font-size: 3rem; margin-bottom: 0.75rem; }
+            .app-header-title { font-size: 2rem; letter-spacing: -0.02em; }
+            .app-header-tagline { font-size: 0.95rem; }
+            .section-title, .input-form-card h3, .examples-card .gr-examples-header { font-size: 1.25rem !important; margin-bottom: 1.5rem !important; padding-bottom: 0.75rem !important; }
+            .gradio-textbox textarea, .gradio-dropdown select, .gradio-textbox input[type=password] { font-size: 0.95rem !important; padding: 0.8rem 1rem !important; }
+            .gradio-textbox textarea { min-height: 100px; }
+            .gradio-button { padding: 0.8rem 1.2rem !important; font-size: 0.95rem !important; }
+            .output-card .response-header { font-size: 1.15rem; }
+            .output-card .response-icon { font-size: 1.3rem; }
+            .output-card .placeholder { padding: 2.5rem 0.8rem; font-size: 1rem; }
+            .examples-card .gr-examples-table th, .examples-card .gr-examples-table td { padding: 0.6rem 0.8rem !important; font-size: 0.85rem !important; }
+            .app-footer-wrapper { margin-top: 2.5rem; padding-top: 2rem; }
+            .app-footer p { font-size: 0.85rem !important; }
+        }
         """
 
         with gr.Blocks(theme=None, css=custom_css, title="Landlord-Tenant Rights Assistant") as demo:
-            # --- Header Section ---
-            # We'll wrap the Markdown in a gr.Group to apply wrapper styles if needed
+            # --- Header Section: Prominent, dynamic banner ---
             with gr.Group(elem_classes="app-header-wrapper"):
                 gr.Markdown(
                     """
@@ -411,17 +955,18 @@ Answer:"""
                     """
                 )
 
-            # --- Main Content Sections ---
+            # --- "Know Your Rights" Section: Informational card ---
             with gr.Group(elem_classes="content-surface"):
                 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, consult a licensed attorney.</p>
+                    <p><strong>Disclaimer:</strong> This tool provides information only, not legal advice. For legal guidance, always consult a licensed attorney.</p>
                     """
                 )
 
+            # --- "Ask Your Question" Section (Input Form): Structured and clear inputs ---
             with gr.Group(elem_classes="content-surface input-form-card"):
                 gr.Markdown("<h3>Ask Your Question</h3>")
                 with gr.Column(elem_classes="input-field-group"):
@@ -430,12 +975,12 @@ Answer:"""
                         info="Required to process your query. Securely used per request, not stored.", lines=1
                     )
                 with gr.Row(elem_classes="input-row"):
-                    with gr.Column(elem_classes="input-field", min_width="58%"):
+                    with gr.Column(elem_classes="input-field", min_width="58%"): # Allocate more width for the question
                         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%"):
+                    with gr.Column(elem_classes="input-field", min_width="38%"): # Allocate less width for the dropdown
                         state_input = gr.Dropdown(
                             label="Select State", choices=dropdown_choices, value=initial_value,
                             allow_custom_value=False
@@ -444,12 +989,14 @@ Answer:"""
                     clear_button = gr.Button("Clear", variant="secondary", elem_classes=["gr-button-secondary"])
                     submit_button = gr.Button("Submit Query", variant="primary", elem_classes=["gr-button-primary"])
 
+            # --- Output Section: Clearly formatted answers or messages ---
             with gr.Group(elem_classes="content-surface output-card"):
                 output = gr.Markdown(
                     value="<div class='placeholder'>Your answer will appear here after submitting your query.</div>",
-                    elem_classes="output-content-wrapper"
+                    elem_classes="output-content-wrapper" # This div will be replaced by the answer HTML
                 )
 
+            # --- "Explore Sample Questions" Section: Interactive examples ---
             if example_queries:
                 with gr.Group(elem_classes="content-surface examples-card"):
                     gr.Examples(
@@ -460,7 +1007,7 @@ Answer:"""
                 with gr.Group(elem_classes="content-surface"):
                     gr.Markdown("<div class='placeholder'>Sample questions could not be loaded.</div>")
 
-            # --- Footer Section ---
+            # --- Footer Section: Disclaimer and author info ---
             with gr.Group(elem_classes="app-footer-wrapper"):
                 gr.Markdown(
                     """
@@ -473,46 +1020,60 @@ Answer:"""
                     """
                 )
 
+            # --- Event Listeners ---
             submit_button.click(
                 fn=query_interface_wrapper, inputs=[api_key_input, query_input, state_input], outputs=output, api_name="submit_query"
             )
             clear_button.click(
-                fn=lambda: ("", "", initial_value, "<div class='placeholder'>Inputs cleared. Ready for your next question.</div>"),
+                fn=lambda: (
+                    "", # Clear API key input
+                    "", # Clear query input
+                    initial_value, # Reset state dropdown to initial value
+                    "<div class='placeholder'>Inputs cleared. Ready for your next question.</div>" # Reset output to placeholder
+                ),
                 inputs=[], outputs=[api_key_input, query_input, state_input, output]
             )
-        logging.info("Final refined Clarity & Counsel theme Gradio interface created.")
+        logging.info("Advanced UI (Legal Lumen theme) Gradio interface created.")
         return demo
 
-# --- Main Execution Block (remains the same) ---
+# --- 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_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)
         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)
-        os.makedirs(os.path.dirname(PDF_PATH), exist_ok=True)
+        # If PDF_PATH could point to a file in a non-existent subdirectory, uncomment:
+        # if os.path.dirname(PDF_PATH):
+        #     os.makedirs(os.path.dirname(PDF_PATH), exist_ok=True)
+
 
+        # Validate PDF file existence before proceeding
         if not os.path.exists(PDF_PATH):
             logging.error(f"FATAL: PDF file not found at the specified path: {PDF_PATH}")
             print(f"\n--- CONFIGURATION ERROR ---\nPDF file ('{os.path.basename(PDF_PATH)}') not found at: {PDF_PATH}\nPlease ensure it exists or set 'PDF_PATH' environment variable.\n---------------------------\n")
             exit(1)
 
+        # 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)
+        rag.load_pdf(PDF_PATH) # Load/process PDF data into the vector DB
 
+        # Create and launch the Gradio interface
         app_interface = rag.gradio_interface()
         SERVER_PORT = 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--------------------------\n")
+        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)
 
     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 details.\n---------------------------\n")
+        print(f"\n--- FATAL STARTUP ERROR ---\n{str(e)}\nCheck logs for more details.\n---------------------------\n")
         exit(1)