app.py

import os
import logging
from typing import Dict, List, Optional
from functools import lru_cache
import re

import gradio as gr
try:
    from vector_db import VectorDatabase
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.")
    exit(1)

try:
    from langchain_openai import ChatOpenAI
except ImportError:
    print("Error: langchain-openai not found. Please install it: pip install langchain-openai")
    exit(1)

from langchain.prompts import PromptTemplate
from langchain.chains import LLMChain

# Suppress warnings
import warnings
warnings.filterwarnings("ignore", category=SyntaxWarning)
warnings.filterwarnings("ignore", category=UserWarning, message=".*You are using gradio version.*")
warnings.filterwarnings("ignore", category=DeprecationWarning)

# Enhanced logging
logging.basicConfig(
    level=logging.INFO,
    format='%(asctime)s - %(levelname)s - [%(filename)s:%(lineno)d] - %(message)s'
)

# --- RAGSystem Class (Processing Logic - kept intact as requested) ---
class RAGSystem:
    def __init__(self, vector_db: Optional[VectorDatabase] = None):
        logging.info("Initializing RAGSystem")
        self.vector_db = vector_db if vector_db else VectorDatabase()
        self.llm = None
        self.chain = None
        self.prompt_template_str = """You are a legal assistant specializing in tenant rights and landlord-tenant laws. Your goal is to provide accurate, detailed, and helpful answers grounded in legal authority. Use the provided statutes as the primary source when available. If no relevant statutes are found in the context, rely on your general knowledge to provide a pertinent and practical response, clearly indicating when you are doing so and prioritizing state-specific information over federal laws for state-specific queries.
Instructions:
* Use the context and statutes as the primary basis for your answer when available.
* For state-specific queries, prioritize statutes or legal principles from the specified state over federal laws.
* Cite relevant statutes (e.g., (AS § 34.03.220(a)(2))) explicitly in your answer when applicable.
* If multiple statutes apply, list all relevant ones.
* If no specific statute is found in the context, state this clearly (e.g., 'No specific statute was found in the provided context'), then provide a general answer based on common legal principles or practices, marked as such.
* Include practical examples or scenarios to enhance clarity and usefulness.
* Use bullet points or numbered lists for readability when appropriate.
* Maintain a professional and neutral tone.
Question: {query}
State: {state}
Statutes from context:
{statutes}
Context information:
--- START CONTEXT ---
{context}
--- END CONCONTEXT ---
Answer:"""
        self.prompt_template = PromptTemplate(
            input_variables=["query", "context", "state", "statutes"],
            template=self.prompt_template_str
        )
        logging.info("RAGSystem initialized.")

    def extract_statutes(self, text: str) -> str:
        statute_pattern = r'\b(?:[A-Z]{2,}\.?\s+(?:Rev\.\s+)?Stat\.?|Code(?:\s+Ann\.?)?|Ann\.?\s+Laws|Statutes|CCP|USC|ILCS|Civ\.\s+Code|Penal\s+Code|Gen\.\s+Oblig\.\s+Law|R\.?S\.?|P\.?L\.?)\s+§\s*[\d\-]+(?:\.\d+)?(?:[\(\w\.\)]+)?|Title\s+\d+\s+USC\s+§\s*\d+(?:-\d+)?\b'
        statutes = re.findall(statute_pattern, text, re.IGNORECASE)
        valid_statutes = []
        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 len(statute) > 5:
                        valid_statutes.append(statute)

        if valid_statutes:
            seen = set()
            unique_statutes = [s for s in valid_statutes if not (s.rstrip('.,;') in seen or seen.add(s.rstrip('.,;')))]
            logging.info(f"Extracted {len(unique_statutes)} unique statutes.")
            return "\n".join(f"- {s}" for s in unique_statutes)

        logging.info("No statutes found matching the pattern in the context.")
        return "No specific statutes found in the provided context."

    @lru_cache(maxsize=50)
    def process_query_cached(self, query: str, state: str, openai_api_key: str, n_results: int = 5) -> Dict[str, any]:
        logging.info(f"Processing query (cache key: '{query}'|'{state}'|key_hidden) with n_results={n_results}")

        if not state or state == "Select a state..." or "Error" in state:
            logging.warning("No valid state provided for query.")
            return {"answer": "<div class='error-message'>Error: Please select a valid state.</div>", "context_used": "N/A - Invalid Input"}
        if not query or not query.strip():
            logging.warning("No query provided.")
            return {"answer": "<div class='error-message'>Error: Please enter your question.</div>", "context_used": "N/A - Invalid Input"}
        if not openai_api_key or not openai_api_key.strip() or not openai_api_key.startswith("sk-"):
            logging.warning("No valid OpenAI API key provided.")
            return {"answer": "<div class='error-message'>Error: Please provide a valid OpenAI API key (starting with 'sk-'). Get one from <a href='https://platform.openai.com/api-keys' target='_blank'>OpenAI</a>.</div>", "context_used": "N/A - Invalid Input"}

        try:
            logging.info("Initializing temporary LLM and Chain for this query...")
            temp_llm = ChatOpenAI(
                temperature=0.2, openai_api_key=openai_api_key, model_name="gpt-3.5-turbo",
                max_tokens=1500, request_timeout=45
            )
            temp_chain = LLMChain(llm=temp_llm, prompt=self.prompt_template)
            logging.info("Temporary LLM and Chain initialized successfully.")
        except Exception as e:
            logging.error(f"LLM Initialization failed: {str(e)}", exc_info=True)
            error_msg = "Error: Failed to initialize AI model. Please check your network connection and API key validity."
            if "authentication" in str(e).lower():
                error_msg = "Error: OpenAI API Key is invalid or expired. Please check your key."
            return {"answer": f"<div class='error-message'>{error_msg}</div><div class='error-details'>Details: {str(e)}</div>", "context_used": "N/A - LLM Init Failed"}

        context = "No relevant context found."
        statutes_from_context = "Statute retrieval skipped due to context issues."
        try:
            logging.info(f"Querying Vector DB for query: '{query[:50]}...' in state '{state}'...")
            results = self.vector_db.query(query, state=state, n_results=n_results)
            logging.info(f"Vector DB query successful for state '{state}'. Processing results...")

            context_parts = []
            doc_results = results.get("document_results", {})
            docs = doc_results.get("documents", [[]])[0]
            metadatas = doc_results.get("metadatas", [[]])[0]
            if docs and metadatas and len(docs) == len(metadatas):
                logging.info(f"Found {len(docs)} document chunks.")
                for i, doc_content in enumerate(docs):
                    metadata = metadatas[i]
                    state_label = metadata.get('state', 'Unknown State')
                    chunk_id = metadata.get('chunk_id', 'N/A')
                    context_parts.append(f"**Source: Document Chunk {chunk_id} (State: {state_label})**\n{doc_content}")

            state_results_data = results.get("state_results", {})
            state_docs = state_results_data.get("documents", [[]])[0]
            state_metadatas = state_results_data.get("metadatas", [[]])[0]
            if state_docs and state_metadatas and len(state_docs) == len(state_metadatas):
                logging.info(f"Found {len(state_docs)} state summary documents.")
                for i, state_doc_content in enumerate(state_docs):
                    metadata = state_metadatas[i]
                    state_label = metadata.get('state', state)
                    context_parts.append(f"**Source: State Summary (State: {state_label})**\n{state_doc_content}")

            if context_parts:
                context = "\n\n---\n\n".join(context_parts)
                logging.info(f"Constructed context with {len(context_parts)} parts. Length: {len(context)} chars.")
                try:
                    statutes_from_context = self.extract_statutes(context)
                except Exception as e:
                    logging.error(f"Error extracting statutes: {e}", exc_info=True)
                    statutes_from_context = "Error extracting statutes from context."
            else:
                logging.warning("No relevant context parts found from vector DB query.")
                context = "No relevant context could be retrieved from the knowledge base for this query and state. The AI will answer from its general knowledge."
                statutes_from_context = "No specific statutes found as no context was retrieved."

        except Exception as e:
            logging.error(f"Vector DB query/context processing failed: {str(e)}", exc_info=True)
            context = f"Warning: Error retrieving documents from the knowledge base ({str(e)}). The AI will attempt to answer from its general knowledge, which may be less specific or accurate."
            statutes_from_context = "Statute retrieval skipped due to error retrieving context."

        try:
            logging.info("Invoking LLMChain with constructed input...")
            llm_input = {"query": query, "context": context, "state": state, "statutes": statutes_from_context}
            answer_dict = temp_chain.invoke(llm_input)
            answer_text = answer_dict.get('text', '').strip()

            if not answer_text:
                logging.warning("LLM returned an empty answer.")
                answer_text = "<div class='error-message'><span class='error-icon'>⚠️</span>The AI model returned an empty response. This might be due to the query, context limitations, or temporary issues. Please try rephrasing your question or try again later.</div>"
            else:
                logging.info("LLM generated answer successfully.")

            return {"answer": answer_text, "context_used": context}

        except Exception as e:
            logging.error(f"LLM processing failed: {str(e)}", exc_info=True)
            error_message = "Error: AI answer generation failed."
            details = f"Details: {str(e)}"
            if "authentication" in str(e).lower():
                error_message = "Error: Authentication failed. Please double-check your OpenAI API key."
                details = ""
            elif "rate limit" in str(e).lower():
                error_message = "Error: You've exceeded your OpenAI API rate limit or quota. Please check your usage and plan limits, or wait and try again."
                details = ""
            elif "context length" in str(e).lower():
                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."

            formatted_error = f"<div class='error-message'><span class='error-icon'>❌</span>{error_message}</div>"
            if details:
                formatted_error += f"<div class='error-details'>{details}</div>"

            return {"answer": formatted_error, "context_used": context}

    def process_query(self, query: str, state: str, openai_api_key: str, n_results: int = 5) -> Dict[str, any]:
        return self.process_query_cached(query.strip(), state, openai_api_key.strip(), n_results)

    def get_states(self) -> List[str]:
        try:
            states = self.vector_db.get_states()
            if not states:
                logging.warning("No states retrieved from vector_db. Returning empty list.")
                return []
            valid_states = sorted(list(set(s for s in states if s and isinstance(s, str) and s != "Select a state...")))
            logging.info(f"Retrieved {len(valid_states)} unique, valid states from VectorDatabase.")
            return valid_states
        except Exception as e:
            logging.error(f"Failed to get states from VectorDatabase: {str(e)}", exc_info=True)
            return ["Error: Could not load states"]

    def load_pdf(self, pdf_path: str) -> int:
        if not os.path.exists(pdf_path):
            logging.error(f"PDF file not found at path: {pdf_path}")
            raise FileNotFoundError(f"PDF file not found: {pdf_path}")
        try:
            logging.info(f"Attempting to load/verify data from PDF: {pdf_path}")
            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()
            total_items = doc_count + state_count

            if total_items > 0:
                logging.info(f"Vector DB contains {total_items} items ({doc_count} docs, {state_count} states). PDF processed or data already existed.")
                current_states = self.get_states()
                return len(current_states) if current_states and "Error" not in current_states[0] else 0
            else:
                logging.warning(f"PDF processing completed, but the vector database appears empty. Check PDF content and processing logs.")
                return 0

        except Exception as e:
            logging.error(f"Failed to load or process PDF '{pdf_path}': {str(e)}", exc_info=True)
            raise RuntimeError(f"Failed to process PDF '{pdf_path}': {e}") from e

    # --- GRADIO INTERFACE (Complete Overhaul for Cohesion, Legibility, and Advanced Look) ---
    def gradio_interface(self):
        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>"
            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():
                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>")

            # 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:
                 # 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()
            dropdown_choices = ["Select a state..."] + (available_states_list if available_states_list and "Error" not in available_states_list[0] else ["Error: States unavailable"])
            initial_value = dropdown_choices[0]
        except Exception: # Catch-all for safety
            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"],
            ["My landlord hasn't made necessary repairs. What can I do?", "Texas"],
        ]
        example_queries = []
        if available_states_list and "Error" not in available_states_list[0] and len(available_states_list) > 0:
            loaded_states_set = set(available_states_list)
            # Filter for examples whose state is in the loaded states
            example_queries = [ex for ex in example_queries_base if ex[1] in loaded_states_set]
            # Add a generic example if no specific state examples match or if list is empty
            if not example_queries:
                 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"])


        # --- Custom CSS for "Legal Noir" Theme (Dark Mode First) ---
        custom_css = """
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@700;800;900&display=swap');
        :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 */
            --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 */
            --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 */
            --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 */
            --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 */
            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;
            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;
            }
        }
        /* 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);
        }
        /* 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;
            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 */
        }
        @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-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 */
            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 */
            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;
            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 --- */
        .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;
            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 */
        }
        @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;
            }
        }
        /* --- NEW: Card Sections within the Main Console --- */
        .dashboard-card-section {
            background: var(--card-section-bg-dark) !important;
            border-radius: var(--radius-md);
            border: 1px solid var(--border-dark);
            padding: var(--padding-md); /* Padding inside each card section */
            box-shadow: inset 0 0 10px rgba(0,0,0,0.2); /* Subtle inner shadow for depth */
            transition: background var(--transition-speed), border-color var(--transition-speed), box-shadow var(--transition-speed);
            display: flex;
            flex-direction: column;
            gap: 1.5rem; /* Space between elements within a card section */
        }
        @media (prefers-color-scheme: light) {
            .dashboard-card-section {
                background: var(--card-section-bg-light) !important;
                border: 1px solid var(--border-light);
                box-shadow: inset 0 0 8px rgba(0,0,0,0.05);
            }
        }
        /* Section titles within the unified main content area */
        .section-title { /* For 'Know Your Rights' */
            font-family: var(--font-family-header) !important;
            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%;
            transition: color var(--transition-speed), border-color var(--transition-speed);
        }
        .sub-section-title { /* For 'Ask Your Question', 'Example Questions to Ask' */
            font-family: var(--font-family-header) !important;
            font-size: 2.2rem !important; /* Slightly smaller for sub-sections, increased from 2rem */
            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 */
            transition: color var(--transition-speed);
        }
        @media (prefers-color-scheme: light) {
            .section-title, .sub-section-title {
                color: var(--text-primary-light) !important;
                border-bottom-color: var(--border-light) !important;
            }
        }
        /* General text styling within 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);
        }
        .dashboard-card-section a, .output-content-wrapper a {
            color: var(--accent-main-dark);
            text-decoration: none;
            font-weight: 500;
            transition: color var(--transition-speed), text-decoration var(--transition-speed);
        }
        .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);
        }
        @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 */
        .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);
        }
        @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 */
            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 {
            border-color: var(--accent-main-dark) !important;
            box-shadow: 0 0 0 6px var(--focus-ring-dark) !important, inset 0 1px 3px rgba(0,0,0,0.4); /* Stronger focus ring and inner shadow */
            outline: none !important;
        }
        @media (prefers-color-scheme: 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: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 */
            padding-right: 5rem !important;
        }
        @media (prefers-color-scheme: light) {
            .gradio-dropdown select {
                background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22%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;
        }
        .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;
        }
        .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;
        }
        @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);
            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 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);
        }
        @media (prefers-color-scheme: light) {
            .output-card .response-header { color: var(--text-primary-light); }
            .output-card .response-icon { color: var(--accent-main-light); }
            .output-card .divider { border-top: 1px solid var(--border-light); }
            .output-card .output-content-wrapper { color: var(--text-primary-light); }
            .output-card .output-content-wrapper a { color: var(--accent-main-light); }
            .output-card .output-content-wrapper a:hover { color: var(--accent-hover-light); }
        }
        /* Error 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;
            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;
        }
        @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 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;
            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);
            }
        }
        /* 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 */
            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 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;
            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;
            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: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; }
            .examples-section .gr-examples-table th { background: var(--header-bg-light) !important; color: var(--text-primary-light) !important; }
            .examples-section .gr-examples-table td { background: var(--card-section-bg-light) !important; color: var(--text-primary-light) !important; border-top: 1px solid var(--border-light) !important; }
            .examples-section .gr-examples-table tr:hover td { background: rgba(0, 123, 255, 0.08) !important; }
        }
        /* Footer styling: clean and informative, integrated at the very bottom */
        .app-footer-wrapper {
            background: var(--header-bg-dark); /* Match header 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 */
            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 */
        }
        @media (prefers-color-scheme: light) {
            .app-footer-wrapper {
                background: var(--header-bg-light);
                border-top: 1px solid var(--border-light) !important;
                box-shadow: inset 0 6px 12px rgba(0,0,0,0.1);
            }
        }
        .app-footer {
            padding: 0 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 */
        }
        .app-footer p {
            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; /* Ensure text aligns left within its container */
            transition: color var(--transition-speed);
        }
        .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;
            box-shadow: 0 0 0 8px var(--focus-ring-dark) !important;
            border-radius: var(--radius-md) !important; /* Ensure border-radius for focus */
        }
        @media (prefers-color-scheme: light) {
            :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) */
        @media (max-width: 1024px) {
            .gradio-container > .flex.flex-col { max-width: 960px; padding: 0 1.5rem !important; }
            .app-header-title { font-size: 3.8rem; }
            .app-header-tagline { font-size: 1.5rem; }
            .app-header-wrapper { 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; }
            .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 */
        }
        @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-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; }
            .gradio-button { width: 100%; padding: 1.1rem 2rem !important; font-size: 1.1rem !important; }
            .output-card .response-header { font-size: 1.5rem; }
            .output-card .response-icon { font-size: 1.7rem; }
            .output-card .placeholder { padding: 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; padding-top: 2rem; padding-bottom: 2rem; border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); }
            .app-footer { padding: 0 1rem !important; } /* Match main content padding */
        }
        @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-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); }
            .section-title { font-size: 1.8rem !important; margin-bottom: 1rem !important; }
            .sub-section-title { font-size: 1.4rem !important; margin-top: 0.8rem !important; margin-bottom: 0.5rem !important; }
            .section-divider { margin: 1rem 0; }
            .gradio-textbox textarea, .gradio-dropdown select, .gradio-textbox input[type=password] { font-size: 1.05rem !important; padding: 1rem 1.2rem !important; }
            .gradio-textbox textarea { min-height: 120px; }
            .gradio-button { padding: 1rem 1.5rem !important; font-size: 1rem !important; }
            .output-card .response-header { font-size: 1.4rem; }
            .output-card .response-icon { font-size: 1.5rem; }
            .output-card .placeholder { padding: 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; padding-top: 1.5rem; padding-bottom: 1.5rem; border-top-left-radius: var(--radius-sm); border-top-right-radius: var(--radius-sm); }
            .app-footer { padding: 0 0.8rem !important; } /* Match main content padding */
        }
        """

        with gr.Blocks(theme=None, css=custom_css, title="Landlord-Tenant Rights Assistant") as demo:
            # --- Header Section ---
            with gr.Group(elem_classes="app-header-wrapper"):
                gr.Markdown(
                    """
                    <div class="app-header">
                        <span class="app-header-logo">⚖️</span>
                        <h1 class="app-header-title">Landlord-Tenant Rights Assistant</h1>
                        <p class="app-header-tagline">Empowering You with State-Specific Legal Insights</p>
                    </div>
                    """
                )

            # --- NEW: Main Dashboard Console Container (This holds everything central) ---
            with gr.Column(elem_classes="main-dashboard-container"):

                # --- Section 1: Introduction and Disclaimer Card ---
                with gr.Group(elem_classes="dashboard-card-section"):
                    gr.Markdown("<h3 class='sub-section-title'>Welcome & Disclaimer</h3>")
                    gr.Markdown(
                        """
                        <p>Navigate landlord-tenant laws with ease. This assistant provides detailed, state-specific answers grounded in legal authority.</p>
                        <p><strong>Disclaimer:</strong> This tool is for informational purposes only and does not constitute legal advice. For specific legal guidance, always consult a licensed attorney in your jurisdiction.</p>
                        """
                    )

                # --- Section 2: OpenAI API Key Input Card ---
                with gr.Group(elem_classes="dashboard-card-section"):
                    gr.Markdown("<h3 class='sub-section-title'>OpenAI API Key</h3>")
                    api_key_input = gr.Textbox(
                        label="", # Removed redundant label here
                        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
                            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
                            state_input = gr.Dropdown(
                                label="Select State", choices=dropdown_choices, value=initial_value,
                                allow_custom_value=False
                            )
                    with gr.Row(elem_classes="button-row"):
                        clear_button = gr.Button("Clear", variant="secondary", elem_classes=["gr-button-secondary"])
                        submit_button = gr.Button("Submit Query", variant="primary", elem_classes=["gr-button-primary"])

                # --- Section 4: Output Display Card ---
                with gr.Group(elem_classes="dashboard-card-section"):
                    gr.Markdown("<h3 class='sub-section-title'>Legal Assistant's Response</h3>")
                    output = gr.Markdown(
                        value="<div class='placeholder output-card'>The answer will appear here after submitting your query.</div>",
                        elem_classes="output-content-wrapper output-card" # Apply these classes for styling
                    )
                
                # --- Section 5: Example Questions Section (NO ACCORDION, direct display) ---
                with gr.Group(elem_classes="dashboard-card-section examples-section"): 
                    gr.Markdown("<h3 class='sub-section-title'>Example Questions to Ask</h3>") 
                    if example_queries:
                        gr.Examples(
                            examples=example_queries, inputs=[query_input, state_input],
                            examples_per_page=5,
                            label="", # This is crucial, but CSS handles the rest
                        )
                    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(
                    """
                    <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>
                        <p>Developed by <strong>Nischal Subedi</strong>.
                        Connect on <a href="https://www.linkedin.com/in/nischal1/" target='_blank'>LinkedIn</a>
                        or explore insights at <a href="https://datascientistinsights.substack.com/" target='_blank'>Substack</a>.</p>
                    </div>
                    """
                )

            # --- Event Listeners (Logic remains identical) ---
            submit_button.click(
                fn=query_interface_wrapper, inputs=[api_key_input, query_input, state_input], outputs=output, api_name="submit_query"
            )
            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
                ),
                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
# --- 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")

        # 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}")
            print(f"\n--- CONFIGURATION ERROR ---\nPDF file ('{os.path.basename(PDF_PATH)}') not found at: {PDF_PATH}.\nPlease ensure it exists or set 'PDF_PATH' environment variable.\n---------------------------\n")
            exit(1)

        if not os.access(PDF_PATH, os.R_OK):
            logging.error(f"FATAL: PDF file at '{PDF_PATH}' exists but is not readable. Check file permissions.")
            print(f"\n--- PERMISSION ERROR ---\nPDF file ('{os.path.basename(PDF_PATH)}') found but not readable at: {PDF_PATH}\nPlease check file permissions (e.g., using 'chmod +r' in terminal).\n---------------------------\n")
            exit(1)

        logging.info(f"PDF file '{os.path.basename(PDF_PATH)}' found and is readable.")

        # Initialize Vector Database and RAG System
        vector_db_instance = VectorDatabase(persist_directory=VECTOR_DB_PATH)
        rag = RAGSystem(vector_db=vector_db_instance)
        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(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 more details.\n---------------------------\n")
        exit(1)