UI v33

app.py

@@ -247,7 +247,7 @@ Answer:"""
         def query_interface_wrapper(api_key: str, query: str, state: str) -> str:
             # Basic client-side validation for immediate feedback (redundant but good UX)
             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 free from OpenAI</a>.</div>"
+                return "<div class='error-message'><span class='error-icon'>⚠️</span>Please provide a valid OpenAI API key (starting with 'sk-'). <a href='https://platform.openai.com/api-keys' target='_blank'>OpenAI</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():
@@ -334,7 +334,7 @@ Answer:"""
             --error-text: #FF6666;
         }
 
-        /* Ensure the very outer background is also set, overriding any Gradio defaults */
+        /* Ensure the very outer body background is also set, overriding any Gradio defaults */
         body, html {
             background-color: var(--background-secondary) !important;
         }
@@ -360,11 +360,18 @@ Answer:"""
             border-radius: 16px !important;
             padding: 2.5rem 1.5rem !important; /* More vertical padding */
             margin-bottom: 1.5rem !important;
-            text-align: center !important; /* Center text within header */
             box-shadow: var(--shadow-md) !important;
             position: relative; /* For potential pseudo-element effects */
             overflow: hidden; /* For any overflow animations */
         }
+        /* The container for the logo, title, and tagline */
+        .app-header {
+            display: flex !important;
+            flex-direction: column !important;
+            align-items: center !important; /* This centers children horizontally */
+            width: 100% !important; /* Ensure it takes full width to center effectively */
+        }
+
         .app-header-wrapper::before { /* Subtle background pattern for dynamism */
             content: '';
             position: absolute;
@@ -406,6 +413,7 @@ Answer:"""
             letter-spacing: -0.03em !important; /* Tighter spacing */
             position: relative;
             z-index: 1;
+            text-align: center; /* Redundant due to flexbox, but good for fallback */
         }
         .app-header-tagline {
             font-size: 1.25rem !important; /* Slightly larger tagline */
@@ -413,10 +421,9 @@ Answer:"""
             font-weight: 400 !important;
             margin: 0 !important;
             max-width: 700px; /* Constrain tagline width */
-            margin-left: auto;
-            margin-right: auto;
             position: relative;
             z-index: 1;
+            text-align: center; /* Redundant due to flexbox, but good for fallback */
         }
 
         /* Main container with consistent spacing */
@@ -425,7 +432,7 @@ Answer:"""
             flex-direction: column !important;
             gap: 1.25rem !important; /* Consistent spacing between cards */
         }
-        /* Card sections with clear boundaries (boundeyes) and subtle dynamic effects */
+        /* Card sections with clear boundaries and subtle dynamic effects */
         .dashboard-card-section {
             background-color: var(--background-primary) !important; /* Explicitly set background */
             border: 2px solid var(--border-color) !important; /* Distinct border */
@@ -440,17 +447,23 @@ Answer:"""
             transform: translateY(-3px) !important; /* More pronounced lift */
         }
 
+        /* Class to center content within Markdown blocks for titles */
+        .centered-markdown-content {
+            text-align: center !important;
+        }
+
         /* Centered section titles with improved typography */
         .sub-section-title {
             font-family: 'Poppins', sans-serif !important;
             font-size: 1.7rem !important; /* Slightly larger */
             font-weight: 700 !important; /* Bolder */
             color: var(--text-primary) !important;
-            text-align: center !important; /* Centered text */
+            /* Removed text-align here, handled by parent .centered-markdown-content */
             margin: 0 0 1.25rem 0 !important; /* More space below title */
             padding-bottom: 0.75rem !important;
             border-bottom: 2px solid var(--border-color) !important; /* Underline effect */
-            display: block !important;
+            display: block !important; /* Ensure it's a block level element for border-bottom to span */
+            width: 100% !important; /* Ensure it takes full width of its parent */
             letter-spacing: -0.01em !important;
         }
         
@@ -544,7 +557,7 @@ Answer:"""
         }
         .gr-button-primary:hover {
             background-color: var(--primary-hover) !important; /* Explicitly set background */
-            box-shadow: var(--shadow-md) !important;
+            box_shadow: var(--shadow-md) !important;
             transform: translateY(-2px) !important; /* Subtle lift effect on hover */
         }
         .gr-button-primary:active { /* Press down effect on click */
@@ -566,7 +579,7 @@ Answer:"""
             box-shadow: none !important;
         }
 
-        /* Output styling with clear boundaries (boundeyes are clear) and dynamic fade-in */
+        /* Output styling with clear boundaries and dynamic fade-in */
         .output-content-wrapper {
             background-color: var(--background-primary) !important; /* Explicitly set background */
             border: 2px solid var(--border-color) !important; /* Clear border */
@@ -761,11 +774,11 @@ Answer:"""
         }
         """
 
-        # Using gr.Blocks with custom CSS only to ensure no blue colors are inherited from a theme.
+        # Using gr.Blocks with custom CSS only to ensure no undesired colors are inherited from a theme.
         with gr.Blocks(css=custom_css, title="Landlord-Tenant Rights Assistant") as demo:
             # Header Section - uses gr.Group for distinct card-like styling
             with gr.Group(elem_classes="app-header-wrapper"):
-                # Markdown used for flexible styling and auto-centering via CSS
+                # Markdown used for flexible styling and robust centering via flexbox
                 gr.Markdown(
                     """
                     <div class="app-header">
@@ -781,7 +794,8 @@ Answer:"""
 
                 # Introduction and Disclaimer Card
                 with gr.Group(elem_classes="dashboard-card-section"):
-                    gr.Markdown("<h3 class='sub-section-title'>Welcome & Disclaimer</h3>") # Centered by CSS
+                    # Added elem_classes="centered-markdown-content" for robust centering
+                    gr.Markdown("<h3 class='sub-section-title'>Welcome & Disclaimer</h3>", elem_classes="centered-markdown-content")
                     gr.Markdown(
                         """
                         Navigate landlord-tenant laws with ease. This assistant provides detailed, state-specific answers grounded in legal authority.
@@ -792,7 +806,8 @@ Answer:"""
 
                 # OpenAI API Key Input Card
                 with gr.Group(elem_classes="dashboard-card-section"):
-                    gr.Markdown("<h3 class='sub-section-title'>OpenAI API Key</h3>") # Centered by CSS
+                    # Added elem_classes="centered-markdown-content" for robust centering
+                    gr.Markdown("<h3 class='sub-section-title'>OpenAI API Key</h3>", elem_classes="centered-markdown-content")
                     api_key_input = gr.Textbox(
                         label="API Key",
                         type="password", # Hides the input for security
@@ -804,7 +819,8 @@ Answer:"""
 
                 # 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>") # Centered by CSS
+                    # Added elem_classes="centered-markdown-content" for robust centering
+                    gr.Markdown("<h3 class='sub-section-title'>Ask Your Question</h3>", elem_classes="centered-markdown-content")
                     with gr.Row(elem_classes="input-row"): # Row for side-by-side query and state
                         with gr.Column(elem_classes="input-field", scale=3): # Query text area takes more space
                             query_input = gr.Textbox(
@@ -828,7 +844,8 @@ Answer:"""
 
                 # Output Display Card - Using gr.HTML for better animation control
                 with gr.Group(elem_classes="dashboard-card-section"):
-                    gr.Markdown("<h3 class='sub-section-title'>Legal Assistant's Response</h3>") # Centered by CSS
+                    # Added elem_classes="centered-markdown-content" for robust centering
+                    gr.Markdown("<h3 class='sub-section-title'>Legal Assistant's Response</h3>", elem_classes="centered-markdown-content")
                     output = gr.HTML( # Changed to gr.HTML to wrap content with animation class
                         value="<div class='placeholder'>The answer will appear here after submitting your query.</div>",
                         elem_classes="output-content-wrapper" # Custom class for output styling
@@ -836,7 +853,8 @@ Answer:"""
 
                 # Example Questions Section
                 with gr.Group(elem_classes="dashboard-card-section examples-section"):
-                    gr.Markdown("<h3 class='sub-section-title'>Example Questions</h3>") # Centered by CSS
+                    # Added elem_classes="centered-markdown-content" for robust centering
+                    gr.Markdown("<h3 class='sub-section-title'>Example Questions</h3>", elem_classes="centered-markdown-content")
                     if example_queries:
                         gr.Examples(
                             examples=example_queries,