UI v31

app.py

@@ -255,7 +255,7 @@ Answer:"""
             if "<div class='error-message'>" in answer:
                 return answer
             else:
-                # Use Markdown to allow for text styling within the HTML output
+                # Use Markdown.format to correctly render markdown inside the HTML output
                 formatted_response_content = gr.Markdown.format(
                     f"<div class='response-header'><span class='response-icon'>📜</span>Response for {state}</div><hr class='divider'>{answer}"
                 )
@@ -286,40 +286,41 @@ Answer:"""
             example_queries.append(["What basic rights do tenants have?", "California"])
 
 
-        # Custom CSS for the dark theme based on the provided image
+        # Custom CSS for the dark theme based on the provided image and latest requests
         custom_css = """
         /* Import legible fonts from Google Fonts */
         @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@600;700;800&display=swap');
         
         /* Root variables for consistent theming - based on image's dark theme */
         :root {
-            --primary-color: hsl(150, 60%, 50%); /* Vibrant Seafoam Green for highlights (Submit button, links) */
+            --primary-color: hsl(150, 60%, 50%); /* Vibrant Seafoam Green for highlights (Submit button, focus) */
             --primary-hover: hsl(150, 60%, 45%);
             --accent-orange: hsl(30, 90%, 55%); /* Vibrant Orange for specific highlights (Disclaimer) */
             
             --background-app: hsl(210, 15%, 15%); /* Dark charcoal/navy for overall background */
-            --background-card: hsl(210, 30%, 20%); /* Deep blue for content cards (as in image) */
-            --background-input-output: hsl(0, 0%, 100%); /* White for input/output elements (as per request) */
+            --background-card: hsl(210, 30%, 20%); /* Deep blue for main content cards (image primary blue) */
+            --background-input-output: hsl(210, 25%, 30%); /* Lighter blue/gray for input/output elements (image inner blue) */
             
-            --text-light: hsl(0, 0%, 95%); /* Very light text for dark backgrounds (main card text) */
-            --text-dark: hsl(210, 20%, 20%); /* Dark text for light backgrounds (input/output text) */
-            --text-muted-light: hsl(210, 10%, 70%); /* Muted light text for secondary info on dark backgrounds */
-            --text-muted-dark: hsl(210, 10%, 45%); /* Muted dark text for secondary info on light backgrounds (placeholders) */
+            --text-on-dark: hsl(0, 0%, 95%); /* Very light text (white/light gray) for dark backgrounds */
+            
+            --text-muted-on-dark: hsl(210, 10%, 70%); /* Muted light text for secondary info on dark backgrounds */
+            --text-muted-on-input: hsl(210, 15%, 55%); /* Muted blue-gray for placeholders on input fields */
+            
+            --border-card: hsl(210, 10%, 65%); /* Light gray for outer card borders (from image) */
+            --border-input: hsl(210, 15%, 45%); /* Mid-tone blue-gray for borders on inner elements */
             
-            --border-light: hsl(210, 10%, 65%); /* Light gray for outer card borders */
-            --border-input: hsl(210, 15%, 45%); /* Mid-tone blue-gray for borders on dark input fields (original image) */
-            --border-white-input: hsl(210, 5%, 80%); /* Light gray border for white input fields (new) */
-
             --shadow-sm: 0 1px 3px rgba(0,0,0,0.15);
             --shadow-md: 0 4px 10px rgba(0,0,0,0.3);
             --shadow-lg: 0 10px 20px rgba(0,0,0,0.4);
             
-            --error-bg: hsl(0, 70%, 20%); /* Dark red for error background */
+            --error-bg: hsl(0, 70%, 20%);
             --error-border: hsl(0, 70%, 35%);
-            --error-text: hsl(0, 90%, 80%); /* Light red for error text */
+            --error-text: hsl(0, 90%, 80%);
             
-            --button-secondary-bg: hsl(0, 0%, 85%); /* Light gray for secondary button */
-            --button-secondary-text: hsl(210, 30%, 20%); /* Dark blue for secondary button text */
+            --button-secondary-bg: hsl(0, 0%, 85%); /* Light gray button */
+            --button-secondary-text: hsl(210, 30%, 20%); /* Dark text for secondary button */
+
+            --link-footer-color: hsl(210, 20%, 65%); /* Specific blue for footer links as per image */
         }
         
         /* Body and Gradio Container */
@@ -333,14 +334,14 @@ Answer:"""
             font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
             background-color: var(--background-app) !important; /* Overall background */
             box-shadow: none !important;
-            border: 2px solid var(--border-light) !important; /* Outer border as per image */
+            border: 2px solid var(--border-card) !important; /* Outer border as per image */
             border-radius: 16px !important;
         }
 
         /* Header Styling (title box) */
         .app-header-wrapper {
             background: var(--background-card) !important; /* Consistent deep blue with other cards (as per image) */
-            border: 2px solid var(--border-light) !important;
+            border: 2px solid var(--border-card) !important; /* Border for header is the same as card border */
             border-radius: 16px !important;
             padding: 2.5rem 1.5rem !important;
             margin-bottom: 1.5rem !important;
@@ -348,7 +349,7 @@ Answer:"""
             box-shadow: var(--shadow-md) !important;
             position: relative;
             overflow: hidden;
-            color: var(--text-light) !important;
+            color: var(--text-on-dark) !important;
         }
         .app-header-wrapper::before { /* Subtle background pattern */
             content: '';
@@ -367,7 +368,7 @@ Answer:"""
             font-size: 4.5rem !important; /* Larger icon */
             margin-bottom: 0.75rem !important;
             display: block !important;
-            color: var(--border-light) !important; /* Light gray for icon as per image */
+            color: var(--border-card) !important; /* Light gray for icon as per image */
             position: relative;
             z-index: 1;
             animation: float-icon 3s ease-in-out infinite alternate;
@@ -381,7 +382,7 @@ Answer:"""
             font-family: 'Poppins', sans-serif !important;
             font-size: 3rem !important;
             font-weight: 800 !important;
-            color: var(--text-light) !important; /* White for title */
+            color: var(--text-on-dark) !important; /* White for title */
             margin: 0 0 0.75rem 0 !important;
             line-height: 1.1 !important;
             letter-spacing: -0.03em !important;
@@ -390,7 +391,7 @@ Answer:"""
         }
         .app-header-tagline {
             font-size: 1.25rem !important;
-            color: var(--text-light) !important; /* White for tagline */
+            color: var(--text-on-dark) !important; /* White for tagline */
             font-weight: 400 !important;
             margin: 0 !important;
             max-width: 700px;
@@ -408,13 +409,13 @@ Answer:"""
         }
         .dashboard-card-section {
             background: var(--background-card) !important; /* Deep blue for content cards */
-            border: 2px solid var(--border-light) !important;
+            border: 2px solid var(--border-card) !important; /* Border for all cards */
             border-radius: 12px !important;
             padding: 1.75rem !important;
             box-shadow: var(--shadow-sm) !important;
             transition: all 0.3s ease-out !important;
             cursor: default;
-            color: var(--text-light) !important; /* Ensure card content text is light */
+            color: var(--text-on-dark) !important; /* Ensure card content text is light */
         }
         .dashboard-card-section:hover {
             box-shadow: var(--shadow-md) !important;
@@ -426,7 +427,7 @@ Answer:"""
             font-family: 'Poppins', sans-serif !important;
             font-size: 1.7rem !important;
             font-weight: 700 !important;
-            color: var(--text-light) !important; /* White for titles */
+            color: var(--text-on-dark) !important; /* White for titles */
             text-align: left !important; /* LEFT-ALIGNED as per image */
             margin: 0 0 1.25rem 0 !important;
             padding-bottom: 0.75rem !important;
@@ -436,32 +437,32 @@ Answer:"""
         }
         .dashboard-card-section p {
             line-height: 1.7 !important;
-            color: var(--text-light) !important; /* Text on dark cards is white */
+            color: var(--text-on-dark) !important; /* Text on dark cards is white */
             font-size: 1rem !important;
         }
         .dashboard-card-section strong {
             color: var(--accent-orange) !important; /* Orange for specific strong text (e.g., Disclaimer) */
         }
 
-        /* Input Styling (textboxes, dropdowns) - now white backgrounds */
+        /* Input Styling (textboxes, dropdowns) - now light blue-gray backgrounds */
         .gradio-textbox textarea,
         .gradio-textbox input,
         .gradio-dropdown > div > input[type="text"],
         .gradio-dropdown .primary-wrap,
         .gradio-dropdown .scroll-hide {
-            background: var(--background-input-output) !important; /* WHITE background for inputs */
-            border: 2px solid var(--border-white-input) !important; /* Light gray border for white inputs */
+            background: var(--background-input-output) !important; /* Light blue-gray background for inputs */
+            border: 2px solid var(--border-input) !important; /* Mid-tone blue-gray border for inner elements */
             border-radius: 8px !important;
             padding: 0.85rem 1rem !important;
             font-size: 0.98rem !important;
             font-family: 'Inter', sans-serif !important;
-            color: var(--text-dark) !important; /* Dark text for inputs */
+            color: var(--text-on-dark) !important; /* Light text for inputs */
             transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
             box-shadow: var(--shadow-sm) !important;
         }
         .gradio-textbox textarea::placeholder,
         .gradio-textbox input::placeholder {
-            color: var(--text-muted-dark) !important; /* Muted dark placeholder text */
+            color: var(--text-muted-on-input) !important; /* Muted blue-gray placeholder text */
             opacity: 0.7;
         }
         .gradio-textbox textarea:focus,
@@ -475,7 +476,7 @@ Answer:"""
         .gradio-textbox label,
         .gradio-dropdown label {
             font-weight: 600 !important;
-            color: var(--text-light) !important; /* Labels (on dark card background) are white */
+            color: var(--text-on-dark) !important; /* Labels (on dark card background) are white */
             font-size: 1rem !important;
             margin-bottom: 0.6rem !important;
             display: block !important;
@@ -483,7 +484,7 @@ Answer:"""
         .gradio-textbox .gr-form,
         .gradio-dropdown .gr-form {
             font-size: 0.9rem !important;
-            color: var(--text-muted-light) !important; /* Info text (on dark card background) is muted light */
+            color: var(--text-muted-on-dark) !important; /* Info text (on dark card background) is muted light */
             margin-top: 0.4rem !important;
         }
         .input-row {
@@ -529,7 +530,7 @@ Answer:"""
         .gr-button-secondary {
             background: var(--button-secondary-bg) !important; /* Light gray button */
             color: var(--button-secondary-text) !important; /* Dark text */
-            border-color: var(--border-light) !important; /* Overall light border from the main theme */
+            border-color: var(--border-card) !important; /* Border matches general card border */
         }
         .gr-button-secondary:hover {
             background: hsl(0, 0%, 75%) !important; /* Darker gray on hover */
@@ -541,14 +542,14 @@ Answer:"""
             box-shadow: none !important;
         }
 
-        /* Output Styling - now white background */
+        /* Output Styling - now light blue-gray background */
         .output-content-wrapper {
-            background: var(--background-input-output) !important; /* WHITE background for output box */
-            border: 2px dashed var(--border-white-input) !important; /* Dashed light gray border */
+            background: var(--background-input-output) !important; /* Light blue-gray background for output box */
+            border: 2px dashed var(--border-input) !important; /* Dashed light blue-gray border */
             border-radius: 8px !important;
             padding: 1.5rem !important;
             min-height: 150px !important;
-            color: var(--text-dark) !important; /* Dark text for output */
+            color: var(--text-on-dark) !important; /* Light text for output */
             display: flex;
             flex-direction: column;
             justify-content: center;
@@ -562,7 +563,7 @@ Answer:"""
             overflow-wrap: break-word;
             word-break: break-word;
             text-align: left !important;
-            color: var(--text-dark) !important; /* Ensure this also overrides to dark text */
+            color: var(--text-on-dark) !important; /* Ensure this also overrides to light text */
         }
         @keyframes fadeInAndSlideUp {
             from { opacity: 0; transform: translateY(15px); }
@@ -583,7 +584,7 @@ Answer:"""
         }
         .divider {
             border: none !important;
-            border-top: 1px dashed var(--border-white-input) !important; /* Dashed light gray divider */
+            border-top: 1px dashed var(--border-input) !important; /* Dashed light blue-gray divider */
             margin: 1rem 0 !important;
         }
         .error-message {
@@ -618,21 +619,21 @@ Answer:"""
             opacity: 0.8;
         }
         .placeholder {
-            background: var(--background-input-output) !important; /* WHITE background for placeholder */
-            border: 2px dashed var(--border-white-input) !important; /* Dashed light gray border */
+            background: var(--background-input-output) !important; /* Light blue-gray background for placeholder */
+            border: 2px dashed var(--border-input) !important; /* Dashed light blue-gray border */
             border-radius: 8px !important;
             padding: 2.5rem 1.5rem !important;
             text-align: center !important;
-            color: var(--text-muted-dark) !important; /* Muted dark text for placeholder */
+            color: var(--text-muted-on-input) !important; /* Muted blue-gray text for placeholder */
             font-style: italic !important;
             font-size: 1.1rem !important;
             width: 100%;
             box-sizing: border-box;
         }
 
-        /* Examples Table Styling - now white background rows */
+        /* Examples Table Styling - now light blue-gray background rows */
         .examples-section .gr-samples-table {
-            border: 2px solid var(--border-light) !important; /* Outer table border matches cards */
+            border: 2px solid var(--border-card) !important; /* Outer table border matches cards */
             border-radius: 8px !important;
             overflow: hidden !important;
             margin-top: 1rem !important;
@@ -647,17 +648,17 @@ Answer:"""
         .examples-section .gr-samples-table th {
             background: var(--background-card) !important; /* Deep blue for example header */
             font-weight: 700 !important;
-            color: var(--text-light) !important; /* White text for header */
+            color: var(--text-on-dark) !important; /* White text for header */
         }
         .examples-section .gr-samples-table td {
-            background: var(--background-input-output) !important; /* WHITE for example rows */
-            color: var(--text-dark) !important; /* Dark text for example rows */
-            border-top: 1px solid var(--border-white-input) !important; /* Light gray border between rows */
+            background: var(--background-input-output) !important; /* Light blue-gray for example rows */
+            color: var(--text-on-dark) !important; /* Light text for example rows */
+            border-top: 1px solid var(--border-input) !important; /* Mid-tone blue-gray border between rows */
             cursor: pointer !important;
             transition: background 0.2s ease, transform 0.1s ease !important;
         }
         .examples-section .gr-samples-table tr:hover td {
-            background: hsl(0, 0%, 95%) !important; /* Slightly darker white on hover */
+            background: hsl(210, 25%, 35%) !important; /* Slightly darker light blue-gray on hover */
             transform: translateX(5px);
         }
         .gr-examples .gr-label,
@@ -669,28 +670,28 @@ Answer:"""
         /* Footer Styling */
         .app-footer-wrapper {
             background: var(--background-card) !important; /* Deep blue for footer */
-            border: 2px solid var(--border-light) !important;
+            border: 2px solid var(--border-card) !important;
             border-radius: 12px !important;
             padding: 1.75rem !important;
             margin-top: 1.5rem !important;
             text-align: center !important;
-            color: var(--text-light) !important; /* White text for footer */
+            color: var(--text-muted-on-dark) !important; /* Muted light text for footer */
         }
         .app-footer p {
             margin: 0.6rem 0 !important;
             font-size: 0.95rem !important;
-            color: var(--text-muted-light) !important; /* Muted light text */
+            color: var(--text-muted-on-dark) !important; /* Muted light text */
             line-height: 1.6 !important;
         }
         .app-footer a {
-            color: var(--primary-color) !important; /* GREEN highlight for links (same as submit button) */
+            color: var(--link-footer-color) !important; /* BLUE highlight for links (as per image) */
             text-decoration: none !important;
             font-weight: 600 !important;
             transition: text-decoration 0.2s ease, text-decoration-color 0.2s ease !important;
         }
         .app-footer a:hover {
             text-decoration: underline !important;
-            text-decoration-color: var(--primary-color) !important; /* Green underline on hover */
+            text-decoration-color: var(--link-footer-color) !important; /* Blue underline on hover */
         }
 
         /* Responsive Design */
@@ -744,7 +745,6 @@ Answer:"""
             with gr.Column(elem_classes="main-dashboard-container"):
 
                 with gr.Group(elem_classes="dashboard-card-section"):
-                    # Use a span to color "Disclaimer:" orange
                     gr.Markdown("<h3 class='sub-section-title'>Welcome & Disclaimer</h3>")
                     gr.Markdown(
                         """
@@ -757,10 +757,10 @@ Answer:"""
                 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="API Key", # Label color handled by CSS on .gradio-textbox label
+                        label="API Key",
                         type="password",
                         placeholder="Enter your OpenAI API key (e.g., sk-...)",
-                        info="Required to process your query. Get one from OpenAI: platform.openai.com/api-keys", # Info text color handled by CSS on .gradio-textbox .gr-form
+                        info="Required to process your query. Get one from OpenAI: platform.openai.com/api-keys",
                         lines=1,
                         elem_classes=["input-field-group"]
                     )
@@ -770,7 +770,7 @@ Answer:"""
                     with gr.Row(elem_classes="input-row"):
                         with gr.Column(elem_classes="input-field", scale=3):
                             query_input = gr.Textbox(
-                                label="Your Question", # Label color handled by CSS
+                                label="Your Question",
                                 placeholder="E.g., What are the rules for security deposit returns in my state?",
                                 lines=4,
                                 max_lines=8,
@@ -778,7 +778,7 @@ Answer:"""
                             )
                         with gr.Column(elem_classes="input-field", scale=1):
                             state_input = gr.Dropdown(
-                                label="Select State", # Label color handled by CSS
+                                label="Select State",
                                 choices=dropdown_choices,
                                 value=initial_value,
                                 allow_custom_value=False,
@@ -790,9 +790,9 @@ Answer:"""
 
                 with gr.Group(elem_classes="dashboard-card-section"):
                     gr.Markdown("<h3 class='sub-section-title'>Legal Assistant's Response</h3>")
-                    output = gr.HTML( # Changed to gr.HTML to wrap content with animation class
+                    output = gr.HTML(
                         value="<div class='placeholder'>The answer will appear here after submitting your query.</div>",
-                        elem_classes="output-content-wrapper" # Custom class for output styling
+                        elem_classes="output-content-wrapper"
                     )
 
                 with gr.Group(elem_classes="dashboard-card-section examples-section"):