Update app.py

app.py

@@ -54,56 +54,106 @@ def get_chatbot_response(user_message, insurance_type, country, conversation_his
 
     return conversation_history, chat_display
 
-# ✅ Styling and Theme with Yellow Text in Blue Background
+# ✅ Styling and Theme with a Sophisticated UI
 theme = gr.themes.Base().set(
-    body_background_fill="#00AFFF",
-    button_primary_background_fill="#0052CC",
-    button_primary_text_color="white"
+    body_background_fill="linear-gradient(to right, #001F3F, #0052CC)",  # Dark navy to royal blue
+    button_primary_background_fill="linear-gradient(135deg, #FFD700, #FFAA00)",  # Golden gradient
+    button_primary_text_color="black"
 )
 
 custom_css = """
-/* Title text with blue-to-yellow gradient */
+/* Elegant title styling with a gold-illuminated effect */
 .title-text {
-    background: linear-gradient(90deg, #0052CC, #FFD700);
+    background: linear-gradient(90deg, #FFD700, #FFAA00);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
     -webkit-text-fill-color: transparent;
-    display: inline-block;
-    width: fit-content;
-    font-weight: bold;
+    font-weight: 700;
+    font-size: 48px;
     text-align: center;
-    font-size: 45px;
+    text-transform: uppercase;
+    letter-spacing: 1.5px;
+    text-shadow: 2px 2px 10px rgba(255, 215, 0, 0.3);
 }
 
-/* Make all regular text yellow if inside a blue background */
+/* Sophisticated body text - Gold on Dark Background */
 body, .gradio-container {
-    color: #FFD700 !important; /* Yellow text */
+    color: #FFD700 !important; /* Premium gold text */
+    font-family: 'Inter', sans-serif;
 }
 
-/* Keep chat messages white for readability */
+/* Chat messages - Glassmorphic styling */
 .chat-message {
+    background: rgba(255, 255, 255, 0.1); /* Subtle transparent white */
+    border-radius: 12px;
+    padding: 12px;
+    backdrop-filter: blur(10px);
     color: white !important;
 }
 
-/* Insurance buttons */
+/* Buttons - Glassmorphism with subtle glow */
 .insurance-button {
-    border: 1px solid #FFD700;
-    background-color: transparent;
-    font-size: 15px;
-    padding: 5px 15px;
-    border-radius: 16px;
-    margin: 0 5px;
-    color: #FFD700; /* Yellow text */
+    border: 2px solid rgba(255, 215, 0, 0.8);
+    background: rgba(0, 0, 0, 0.2);
+    font-size: 16px;
+    font-weight: bold;
+    padding: 8px 20px;
+    border-radius: 24px;
+    margin: 5px;
+    color: #FFD700; /* Gold text */
+    transition: all 0.3s ease-in-out;
 }
+
+/* Button hover effect with glowing effect */
 .insurance-button:hover {
-    background: linear-gradient(90deg, #FFD700, #00AFFF);
-    color: white;
+    background: linear-gradient(90deg, #FFD700, #FFAA00);
+    color: black !important;
+    transform: scale(1.05);
+    box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
 }
 
-/* Chatbot text background styling */
+/* Chatbot container - Transparent glass panel */
 .gradio-container .block.markdown {
-    color: #FFD700 !important; /* Ensures markdown text is yellow */
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 12px;
+    padding: 15px;
+    backdrop-filter: blur(12px);
+    color: #FFD700 !important; /* Gold text */
+}
+
+/* Input field - Premium styling */
+textarea {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 215, 0, 0.5);
+    border-radius: 8px;
+    color: white !important;
+    font-size: 16px;
+    padding: 10px;
+}
+
+/* Glow effect on input focus */
+textarea:focus {
+    box-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
+    border-color: #FFD700;
+}
+
+/* Send button - Luxurious design */
+button.primary {
+    background: linear-gradient(135deg, #FFD700, #FFAA00);
+    border: none;
+    color: black !important;
+    font-weight: bold;
+    text-transform: uppercase;
+    border-radius: 20px;
+    padding: 10px 20px;
+    transition: all 0.3s ease-in-out;
+}
+
+/* Send button hover */
+button.primary:hover {
+    transform: scale(1.1);
+    box-shadow: 0 0 15px rgba(255, 215, 0, 0.7);
 }
 """