UI v30

app.py

@@ -255,7 +255,10 @@ Answer:"""
             if "<div class='error-message'>" in answer:
                 return answer
             else:
-                formatted_response_content = f"<div class='response-header'><span class='response-icon'>📜</span>Response for {state}</div><hr class='divider'>{answer}"
+                # Use Markdown to allow for text styling within 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}"
+                )
                 return f"<div class='animated-output-content'>{formatted_response_content}</div>"
 
         try:
@@ -290,19 +293,23 @@ Answer:"""
         
         /* Root variables for consistent theming - based on image's dark theme */
         :root {
-            --primary-color: hsl(150, 60%, 50%); /* Vibrant Seafoam Green for highlights */
+            --primary-color: hsl(150, 60%, 50%); /* Vibrant Seafoam Green for highlights (Submit button, links) */
             --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 */
-            --background-input-output: hsl(210, 25%, 28%); /* Slightly lighter blue for input/output elements */
-            
-            --text-light: hsl(0, 0%, 95%); /* Very light text for dark backgrounds */
-            --text-muted-light: hsl(210, 10%, 70%); /* Muted light text for secondary info */
+            --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) */
             
-            --border-light: hsl(210, 10%, 65%); /* Light gray for borders */
-            --border-input: hsl(210, 15%, 45%); /* Mid-tone blue-gray for input borders */
+            --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) */
             
+            --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);
@@ -330,18 +337,18 @@ Answer:"""
             border-radius: 16px !important;
         }
 
-        /* Header Styling */
+        /* Header Styling (title box) */
         .app-header-wrapper {
-            background: var(--background-card) !important; /* Consistent dark blue with other cards */
+            background: var(--background-card) !important; /* Consistent deep blue with other cards (as per image) */
             border: 2px solid var(--border-light) !important;
             border-radius: 16px !important;
             padding: 2.5rem 1.5rem !important;
             margin-bottom: 1.5rem !important;
-            text-align: center !important;
+            text-align: center !important; /* Centered */
             box-shadow: var(--shadow-md) !important;
             position: relative;
             overflow: hidden;
-            color: var(--text-light) !important; /* Ensure header text is light */
+            color: var(--text-light) !important;
         }
         .app-header-wrapper::before { /* Subtle background pattern */
             content: '';
@@ -429,32 +436,32 @@ Answer:"""
         }
         .dashboard-card-section p {
             line-height: 1.7 !important;
-            color: var(--text-light) !important;
+            color: var(--text-light) !important; /* Text on dark cards is white */
             font-size: 1rem !important;
         }
         .dashboard-card-section strong {
-            color: var(--primary-color) !important; /* Green for strong text */
+            color: var(--accent-orange) !important; /* Orange for specific strong text (e.g., Disclaimer) */
         }
 
-        /* Input Styling */
+        /* Input Styling (textboxes, dropdowns) - now white 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; /* Lighter blue for inputs */
-            border: 2px solid var(--border-input) !important; /* Mid-tone blue-gray border */
+            background: var(--background-input-output) !important; /* WHITE background for inputs */
+            border: 2px solid var(--border-white-input) !important; /* Light gray border for white inputs */
             border-radius: 8px !important;
             padding: 0.85rem 1rem !important;
             font-size: 0.98rem !important;
             font-family: 'Inter', sans-serif !important;
-            color: var(--text-light) !important; /* White text for inputs */
+            color: var(--text-dark) !important; /* Dark 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-light) !important; /* Muted light placeholder text */
+            color: var(--text-muted-dark) !important; /* Muted dark placeholder text */
             opacity: 0.7;
         }
         .gradio-textbox textarea:focus,
@@ -468,7 +475,7 @@ Answer:"""
         .gradio-textbox label,
         .gradio-dropdown label {
             font-weight: 600 !important;
-            color: var(--text-light) !important; /* White labels */
+            color: var(--text-light) !important; /* Labels (on dark card background) are white */
             font-size: 1rem !important;
             margin-bottom: 0.6rem !important;
             display: block !important;
@@ -476,7 +483,7 @@ Answer:"""
         .gradio-textbox .gr-form,
         .gradio-dropdown .gr-form {
             font-size: 0.9rem !important;
-            color: var(--text-muted-light) !important; /* Muted light info text */
+            color: var(--text-muted-light) !important; /* Info text (on dark card background) is muted light */
             margin-top: 0.4rem !important;
         }
         .input-row {
@@ -522,11 +529,11 @@ 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;
+            border-color: var(--border-light) !important; /* Overall light border from the main theme */
         }
         .gr-button-secondary:hover {
             background: hsl(0, 0%, 75%) !important; /* Darker gray on hover */
-            border-color: var(--primary-color) !important;
+            border-color: var(--primary-color) !important; /* Green border on hover */
             transform: translateY(-2px) !important;
         }
         .gr-button-secondary:active {
@@ -534,14 +541,14 @@ Answer:"""
             box-shadow: none !important;
         }
 
-        /* Output Styling */
+        /* Output Styling - now white background */
         .output-content-wrapper {
-            background: var(--background-input-output) !important; /* Lighter blue for output box */
-            border: 2px dashed var(--border-input) !important; /* Dashed border as per image */
+            background: var(--background-input-output) !important; /* WHITE background for output box */
+            border: 2px dashed var(--border-white-input) !important; /* Dashed light gray border */
             border-radius: 8px !important;
             padding: 1.5rem !important;
             min-height: 150px !important;
-            color: var(--text-light) !important; /* White text for output */
+            color: var(--text-dark) !important; /* Dark text for output */
             display: flex;
             flex-direction: column;
             justify-content: center;
@@ -555,6 +562,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 */
         }
         @keyframes fadeInAndSlideUp {
             from { opacity: 0; transform: translateY(15px); }
@@ -563,7 +571,7 @@ Answer:"""
         .response-header {
             font-size: 1.3rem !important;
             font-weight: 700 !important;
-            color: var(--primary-color) !important;
+            color: var(--primary-color) !important; /* Green for response header */
             margin-bottom: 0.75rem !important;
             display: flex !important;
             align-items: center !important;
@@ -575,7 +583,7 @@ Answer:"""
         }
         .divider {
             border: none !important;
-            border-top: 1px dashed rgba(255, 255, 255, 0.15) !important; /* Light dashed divider */
+            border-top: 1px dashed var(--border-white-input) !important; /* Dashed light gray divider */
             margin: 1rem 0 !important;
         }
         .error-message {
@@ -610,21 +618,21 @@ Answer:"""
             opacity: 0.8;
         }
         .placeholder {
-            background: var(--background-input-output) !important; /* Lighter blue for placeholder */
-            border: 2px dashed var(--border-input) !important; /* Dashed border */
+            background: var(--background-input-output) !important; /* WHITE background for placeholder */
+            border: 2px dashed var(--border-white-input) !important; /* Dashed light gray border */
             border-radius: 8px !important;
             padding: 2.5rem 1.5rem !important;
             text-align: center !important;
-            color: var(--text-muted-light) !important; /* Muted light text */
+            color: var(--text-muted-dark) !important; /* Muted dark text for placeholder */
             font-style: italic !important;
             font-size: 1.1rem !important;
             width: 100%;
             box-sizing: border-box;
         }
 
-        /* Examples Table Styling */
+        /* Examples Table Styling - now white background rows */
         .examples-section .gr-samples-table {
-            border: 2px solid var(--border-light) !important;
+            border: 2px solid var(--border-light) !important; /* Outer table border matches cards */
             border-radius: 8px !important;
             overflow: hidden !important;
             margin-top: 1rem !important;
@@ -635,20 +643,21 @@ Answer:"""
             border: none !important;
             font-size: 0.95rem !important;
             text-align: left !important;
-            color: var(--text-light) !important; /* White text for examples */
         }
         .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 */
         }
         .examples-section .gr-samples-table td {
-            background: var(--background-input-output) !important; /* Lighter blue for example rows */
-            border-top: 1px solid var(--border-input) !important; /* Mid-tone blue-gray border */
+            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 */
             cursor: pointer !important;
             transition: background 0.2s ease, transform 0.1s ease !important;
         }
         .examples-section .gr-samples-table tr:hover td {
-            background: hsl(210, 28%, 32%) !important; /* Slightly darker light blue on hover */
+            background: hsl(0, 0%, 95%) !important; /* Slightly darker white on hover */
             transform: translateX(5px);
         }
         .gr-examples .gr-label,
@@ -674,7 +683,7 @@ Answer:"""
             line-height: 1.6 !important;
         }
         .app-footer a {
-            color: var(--primary-color) !important; /* Green highlight for links */
+            color: var(--primary-color) !important; /* GREEN highlight for links (same as submit button) */
             text-decoration: none !important;
             font-weight: 600 !important;
             transition: text-decoration 0.2s ease, text-decoration-color 0.2s ease !important;
@@ -735,22 +744,23 @@ 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(
                         """
                         Navigate landlord-tenant laws with ease. This assistant provides detailed, state-specific answers grounded in legal authority.
                         
-                        **Disclaimer:** 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.
+                        <span style="color: var(--accent-orange);">**Disclaimer:**</span> 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.
                         """
                     )
 
                 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="API Key", # Label color handled by CSS on .gradio-textbox label
                         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="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
                         lines=1,
                         elem_classes=["input-field-group"]
                     )
@@ -760,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="Your Question", # Label color handled by CSS
                                 placeholder="E.g., What are the rules for security deposit returns in my state?",
                                 lines=4,
                                 max_lines=8,
@@ -768,7 +778,7 @@ Answer:"""
                             )
                         with gr.Column(elem_classes="input-field", scale=1):
                             state_input = gr.Dropdown(
-                                label="Select State",
+                                label="Select State", # Label color handled by CSS
                                 choices=dropdown_choices,
                                 value=initial_value,
                                 allow_custom_value=False,
@@ -780,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(
+                    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"
+                        elem_classes="output-content-wrapper" # Custom class for output styling
                     )
 
                 with gr.Group(elem_classes="dashboard-card-section examples-section"):