UI v30

app.py

@@ -184,7 +184,7 @@ Answer:"""
             error_message = "Error: AI answer generation failed."
             details = f"Details: {str(e)}"
             if "authentication" in str(e).lower():
-                error_message = "Error: Authentication failed. Please double-check your OpenAI API key."
+                error_message = "Error: OpenAI API Key is invalid or expired. Please check your key."
                 details = ""
             elif "rate limit" in str(e).lower():
                 error_message = "Error: You've exceeded your OpenAI API rate limit or quota. Please check your usage and plan limits, or wait and try again."
@@ -317,6 +317,7 @@ Answer:"""
             --error-bg: #FFEBEB;
             --error-border: #FFCACA;
             --error-text: #D32F2F;
+            --header-bg-color: hsl(180, 70%, 92%); /* Distinct light seafoam for header */
         }
         
         /* Dark mode variables - for consistency if a dark mode toggle were present */
@@ -331,6 +332,7 @@ Answer:"""
             --error-bg: #3F1D1D;
             --error-border: #5A1A1A;
             --error-text: #FF7070;
+            --header-bg-color: #253842; /* Darker header for dark mode */
         }
 
         /* Base container improvements */
@@ -349,7 +351,7 @@ Answer:"""
 
         /* Header styling - centered and prominent */
         .app-header-wrapper {
-            background: linear-gradient(135deg, var(--background-primary) 0%, var(--background-secondary) 100%) !important;
+            background: var(--header-bg-color) !important; /* Use new distinct header background color */
             border: 2px solid var(--border-color) !important;
             border-radius: 16px !important;
             padding: 2.5rem 1.5rem !important; /* More vertical padding */
@@ -434,7 +436,7 @@ Answer:"""
             transform: translateY(-3px) !important; /* More pronounced lift */
         }
 
-        /* Centered section titles with improved typography */
+        /* Centered section titles with improved typography and consistent line */
         .sub-section-title {
             font-family: 'Poppins', sans-serif !important;
             font-size: 1.7rem !important; /* Slightly larger */
@@ -443,12 +445,12 @@ Answer:"""
             text-align: center !important; /* Centered text */
             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 */
+            border-bottom: 2px solid var(--border-color) !important; /* Underline effect (the "line") */
             display: block !important;
             letter-spacing: -0.01em !important;
         }
         
-        /* Specific styling for the welcome/disclaimer markdown content */
+        /* Specific styling for the markdown content within cards */
         .dashboard-card-section p {
             line-height: 1.7 !important;
             color: var(--text-primary) !important;
@@ -483,7 +485,7 @@ Answer:"""
         .gradio-dropdown > div > input[type="text"]:focus,
         .gradio-dropdown .primary-wrap.focused { /* Apply focus style to dropdown wrap */
             outline: none !important;
-            border-color: var(--border-focus) !important; /* Distinct border on focus */
+            border-color: var(--border-focus) !important; /* Distinct border on focus (green) */
             box-shadow: 0 0 0 4px rgba(60, 179, 113, 0.2) !important; /* Broader, softer glow on focus */
         }
 
@@ -690,7 +692,7 @@ Answer:"""
             display: none !important;
         }
         
-        /* Footer styling - centered text */
+        /* Footer styling - centered text and green links */
         .app-footer-wrapper {
             background: var(--background-secondary) !important;
             border: 2px solid var(--border-color) !important;
@@ -706,12 +708,14 @@ Answer:"""
             line-height: 1.6 !important;
         }
         .app-footer a {
-            color: var(--primary-color) !important;
+            color: var(--primary-color) !important; /* Green highlight for links */
             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 */
         }
 
         /* Responsive design for smaller screens */