UI update

app.py

@@ -432,10 +432,10 @@ Answer:"""
         }
         /* Card sections with clear boundaries and subtle dynamic effects */
         .dashboard-card-section {
-            /* Background already set by .main-dashboard-container > * to primary white */
+            background-color: var(--background-primary) !important; /* Solid primary background for card body */
             border: 2px solid var(--border-color) !important; /* Distinct border */
             border-radius: 12px !important;
-            padding: 0 !important; /* Removed padding to allow gradient bar to control it */
+            padding: 0 !important; /* Removed padding to allow gradient bar and content area to control it */
             box-shadow: var(--shadow-sm) !important; /* Subtle shadow */
             transition: all 0.3s ease-out !important; /* Smoother transition */
             cursor: default; /* Indicate not directly clickable (unless examples) */
@@ -454,13 +454,13 @@ Answer:"""
             flex-direction: column !important; /* Ensure content stacks vertically if needed */
         }
 
-        /* NEW: Class for the gradient title bar within each card */
-        .section-title-gradient-bar {
-            background: linear-gradient(145deg, var(--background-primary) 0%, var(--background-secondary) 100%) !important;
+        /* NEW: Class for the solid color title bar within each card */
+        .section-title-gradient-bar { /* Renamed for clarity to avoid confusion with actual gradient */
+            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: 1.5rem !important; /* Space below the title bar */
+            margin-bottom: 1rem !important; /* Reduced 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.3rem !important; /* REDUCED to bring text closer to border */
+            padding-bottom: 0.2rem !important; /* REDUCED 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 */
@@ -498,14 +498,21 @@ Answer:"""
             padding: 0 !important; /* Remove default paragraph padding */
             white-space: normal !important; /* Ensure text wraps */
         }
-        .dashboard-card-section strong {
+        .dashboard-card-section strong, .dashboard-card-section b {
+            font-weight: 700 !important; /* Ensure bold is actually bold */
             color: var(--primary-color) !important; /* Highlight strong text with primary color */
         }
 
         /* Overrides for common Gradio internal elements that might have default backgrounds */
-        .gr-block, .gr-box, .gr-prose, .gr-form, .gr-panel, .gr-columns, .gr-column {
-            background-color: transparent !important; /* Ensure these are transparent to show parent's color */
+        /* 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 {
+            background-color: transparent !important; 
             color: var(--text-primary) !important; /* Ensure text color is consistent */
+            /* Ensure text wrapping for markdown as well */
+            white-space: normal !important;
+            overflow-wrap: break-word;
+            word-break: break-word;
         }
 
 
@@ -612,11 +619,13 @@ Answer:"""
             text-align: left !important; /* Ensure these labels are left-aligned */
         }
         /* Info text styling below inputs (e.g., for API Key) */
-        .gr-prose { /* This class is used by Gradio for info text */
+        /* Specifically target gr-prose if it is the direct child of a gr.Block or gr.Group */
+        .gr-prose { 
             font-size: 0.9rem !important;
             color: var(--text-secondary) !important;
             margin-top: 0.4rem !important; /* More space for info text */
             text-align: left !important; /* Ensure info text is left aligned */
+            background-color: transparent !important; /* Ensure no unwanted background */
         }
         /* Input column layout improvements */
         .input-column { /* Renamed from .input-row */
@@ -830,6 +839,10 @@ Answer:"""
             text-align: center !important; /* Ensure footer text is centered */
             white-space: normal !important; /* Allow text to wrap */
         }
+        .app-footer strong, .app-footer b {
+            font-weight: 700 !important; /* Ensure bold is actually bold */
+            color: var(--primary-color) !important; /* Highlight strong text with primary color */
+        }
         .app-footer a {
             color: var(--primary-color) !important;
             text-decoration: none !important;
@@ -919,10 +932,14 @@ Answer:"""
                             label="API Key",
                             type="password", # Hides the input for security
                             placeholder="Enter your OpenAI API key (e.g., sk-...)",
-                            info="Required to process your query. Get one from OpenAI: [platform.openai.com/api-keys](https://platform.openai.com/api-keys)", # Made link clickable
                             lines=1,
                             elem_classes=["input-field-group"] # Custom class for input styling
                         )
+                        # Separate Markdown for the clickable info link
+                        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
+                        )
 
                 # Query Input and State Selection Card
                 with gr.Group(elem_classes="dashboard-card-section"):
@@ -981,6 +998,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.
                 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>