UI update

app.py

@@ -455,12 +455,12 @@ Answer:"""
         }
 
         /* NEW: Class for the solid color title bar within each card */
-        .section-title-gradient-bar { /* Renamed for clarity to avoid confusion with actual gradient */
+        .section-title-gradient-bar { 
             background-color: var(--background-secondary) !important; /* Solid warm peach/cream */
             padding: 1.25rem 1.75rem !important; /* Inner padding for the title bar */
             border-top-left-radius: 10px !important; /* Match parent's border radius */
             border-top-right-radius: 10px !important;
-            margin-bottom: 1rem !important; /* Reduced space below the title bar */
+            margin-bottom: 1rem !important; /* Space below the title bar */
             text-align: center !important; /* Ensure content inside this bar is centered */
             box-sizing: border-box; /* Include padding in width */
             width: 100%; /* Ensure it spans full width */
@@ -473,7 +473,7 @@ Answer:"""
             font-weight: 700 !important; /* Bolder */
             color: var(--text-primary) !important;
             margin: 0 !important; /* No margin on h3 itself as parent handles spacing */
-            padding-bottom: 0.2rem !important; /* REDUCED to bring text closer to border */
+            padding-bottom: 0.1rem !important; /* REDUCED further to bring text closer to border */
             border-bottom: 2px solid var(--border-color) !important; /* Underline effect */
             line-height: 1.1 !important; /* Ensure line height does not add extra space */
             display: inline-block !important; /* Allow centering within text-align: center of parent */
@@ -506,7 +506,7 @@ Answer:"""
         /* Overrides for common Gradio internal elements that might have default backgrounds */
         /* These ensure transparency or explicit primary background for common Gradio containers */
         .gr-block, .gr-box, .gr-prose, .gr-form, .gr-panel, .gr-columns, .gr-column,
-        .gradio-html, .gradio-markdown {
+        .gradio-html, .gradio-markdown, .gradio-textbox, .gradio-radio, .gradio-button {
             background-color: transparent !important; 
             color: var(--text-primary) !important; /* Ensure text color is consistent */
             /* Ensure text wrapping for markdown as well */
@@ -518,7 +518,6 @@ Answer:"""
 
         /* Improved input styling with clear boundaries and focus */
         .gradio-textbox {
-            background-color: transparent !important; /* Ensure parent container is transparent */
             margin-bottom: 0.75rem !important;
         }
         /* Target the actual input elements for background color */
@@ -548,7 +547,6 @@ Answer:"""
 
         /* Styling for the radio button group (state selection) */
         .gradio-radio {
-            background-color: transparent !important; /* Ensure parent container is transparent */
             padding: 0 !important; /* Remove any default padding */
             margin-top: 1rem !important; /* Add a little space above */
         }
@@ -845,11 +843,11 @@ Answer:"""
         }
         .app-footer a {
             color: var(--primary-color) !important;
-            text-decoration: none !important;
+            text-decoration: underline !important; /* Ensure links are underlined */
             font-weight: 600 !important;
         }
         .app-footer a:hover {
-            text-decoration: underline !important;
+            text-decoration: none !important; /* Remove underline on hover for subtle effect */
         }
 
         /* Responsive design for smaller screens */
@@ -912,7 +910,7 @@ Answer:"""
 
                 # How This Assistant Works Box (formerly Welcome & Disclaimer)
                 with gr.Group(elem_classes="dashboard-card-section"):
-                    # Title bar with gradient
+                    # Title bar with solid warm peach/cream background
                     gr.Markdown("<h3 class='section-title'>How This Assistant Works</h3>", elem_classes="full-width-center section-title-gradient-bar")
                     # Content area with pure primary background
                     with gr.Column(elem_classes="dashboard-card-content-area"): # New wrapper for content area
@@ -924,7 +922,7 @@ Answer:"""
 
                 # OpenAI API Key Input Card
                 with gr.Group(elem_classes="dashboard-card-section"):
-                    # Title bar with gradient
+                    # Title bar with solid warm peach/cream background
                     gr.Markdown("<h3 class='section-title'>OpenAI API Key</h3>", elem_classes="full-width-center section-title-gradient-bar")
                     # Content area with pure primary background
                     with gr.Column(elem_classes="dashboard-card-content-area"): # New wrapper for content area
@@ -935,7 +933,7 @@ Answer:"""
                             lines=1,
                             elem_classes=["input-field-group"] # Custom class for input styling
                         )
-                        # Separate Markdown for the clickable info link
+                        # Separate Markdown for the clickable info link, using standard Markdown link syntax
                         gr.Markdown(
                             "Required to process your query. Get one from OpenAI: [platform.openai.com/api-keys](https://platform.openai.com/api-keys)",
                             elem_classes="gr-prose" # Reuse Gradio's info text class for styling
@@ -943,7 +941,7 @@ Answer:"""
 
                 # Query Input and State Selection Card
                 with gr.Group(elem_classes="dashboard-card-section"):
-                    # Title bar with gradient
+                    # Title bar with solid warm peach/cream background
                     gr.Markdown("<h3 class='section-title'>Ask Your Question</h3>", elem_classes="full-width-center section-title-gradient-bar")
                     # Content area with pure primary background
                     with gr.Column(elem_classes="dashboard-card-content-area"): # New wrapper for content area
@@ -971,7 +969,7 @@ Answer:"""
 
                 # Output Display Card - Using gr.HTML for better animation control
                 with gr.Group(elem_classes="dashboard-card-section"):
-                    # Title bar with gradient
+                    # Title bar with solid warm peach/cream background
                     gr.Markdown("<h3 class='section-title'>Legal Assistant's Response</h3>", elem_classes="full-width-center section-title-gradient-bar")
                     # Content area with pure primary background
                     with gr.Column(elem_classes="dashboard-card-content-area"): # New wrapper for content area
@@ -982,7 +980,7 @@ Answer:"""
 
                 # Example Questions Section
                 with gr.Group(elem_classes="dashboard-card-section examples-section"):
-                    # Title bar with gradient
+                    # Title bar with solid warm peach/cream background
                     gr.Markdown("<h3 class='section-title'>Example Questions</h3>", elem_classes="full-width-center section-title-gradient-bar")
                     # Content area with pure primary background
                     with gr.Column(elem_classes="dashboard-card-content-area"): # New wrapper for content area
@@ -998,7 +996,7 @@ Answer:"""
 
             # Footer Section - contains disclaimer and developer info (now including the full disclaimer)
             with gr.Group(elem_classes="app-footer-wrapper"):
-                # Use p tags to ensure proper text wrapping and centering.
+                # Using paragraph tags for proper text wrapping and bolding in Markdown
                 gr.Markdown(
                     """
                     <p>**Disclaimer:** This tool is for informational purposes only and does not constitute legal advice. For specific legal guidance, always consult with a licensed attorney in your jurisdiction.</p>