i changed the whole design again whoops

app.py

@@ -60,48 +60,163 @@ def respond(message, chat_history):
     return chat_history, image_paths
 
 #hopefully fixed CSS code
+# Updated CSS section - replace your existing CSS variable
 css = """
-.gradio-container { background-color: #EBBAB9 !important; }
-#chatbot-box { background-color: #407076 !important; color: white !important; }
-#gallery-box { background-color: #407076 !important; }
-#gallery-box img { border: 3px solid #D5AF37 !important; border-radius: 8px !important; }
+.gradio-container { 
+    background: linear-gradient(135deg, #F4D2D0 0%, #E8B5B3 100%) !important;
+    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif !important;
+}
+
+/* Professional container styling */
+#chatbot-box { 
+    background-color: #2F4F4F !important; 
+    color: white !important;
+    border-radius: 12px !important;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
+    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+}
+
+#gallery-box { 
+    background-color: #2F4F4F !important;
+    border-radius: 12px !important;
+    padding: 20px !important;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
+    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+}
+
+#gallery-box img { 
+    border: 2px solid #DAA520 !important; 
+    border-radius: 8px !important;
+    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
+}
+
+#gallery-box img:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 12px 24px rgba(218, 165, 32, 0.3) !important;
+}
+
 #input-box textarea { 
-    background-color: #698996 !important; 
+    background-color: #4A6B70 !important; 
     color: white !important; 
-    border: 2px solid #407076 !important;
+    border: 2px solid #2F4F4F !important;
+    border-radius: 10px !important;
+    padding: 15px !important;
+    font-size: 14px !important;
+    transition: border-color 0.3s ease !important;
 }
+
+#input-box textarea:focus {
+    border-color: #DAA520 !important;
+    box-shadow: 0 0 0 3px rgba(218, 165, 32, 0.1) !important;
+}
+
 #input-box textarea::placeholder {
-    color: rgba(255, 255, 255, 0.7) !important;
+    color: rgba(255, 255, 255, 0.6) !important;
+    font-style: italic !important;
 }
 
-/* Fix for chatbot messages */
+/* Refined chatbot messages */
 .message-wrap .message { 
-    background-color: #407076 !important; 
-    color: white !important; 
+    background-color: #2F4F4F !important; 
+    color: white !important;
+    padding: 16px 20px !important;
+    border-radius: 10px !important;
+    margin: 8px 0 !important;
+    line-height: 1.6 !important;
 }
 
-/* Alternative chatbot styling if the above doesn't work */
 .chatbot .message.bot, .chatbot .message.assistant {
-    background-color: #407076 !important;
+    background-color: #2F4F4F !important;
     color: white !important;
 }
 
-/* Title font styling with web-safe fallback */
+/* Sophisticated title styling */
 h1 {
     font-family: 'Pinyon Script', 'Brush Script MT', cursive !important;
-    font-size: 2.5em !important;
-    font-style: italic !important;
+    font-size: 3.2em !important;
+    background: linear-gradient(45deg, #2F4F4F, #4A6B70) !important;
+    -webkit-background-clip: text !important;
+    -webkit-text-fill-color: transparent !important;
+    background-clip: text !important;
+    text-align: center !important;
+    margin: 20px 0 30px 0 !important;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1) !important;
 }
 
-/* Ensure input box is fully styled */
+/* Professional subtitle */
+.gradio-markdown p {
+    color: #2F4F4F !important;
+    font-size: 1.1em !important;
+    text-align: center !important;
+    margin-bottom: 30px !important;
+    font-weight: 400 !important;
+}
+
+/* Refined input styling */
 .textbox input, .textbox textarea {
-    background-color: #698996 !important;
+    background-color: #4A6B70 !important;
     color: white !important;
-    border: 2px solid #407076 !important;
+    border: 2px solid #2F4F4F !important;
+    border-radius: 10px !important;
+    transition: all 0.3s ease !important;
 }
-"""
 
+/* Professional labels */
+.form label {
+    color: #2F4F4F !important;
+    font-weight: 600 !important;
+    font-size: 0.95em !important;
+    margin-bottom: 8px !important;
+}
+
+/* Elegant scrollbar for chat */
+#chatbot-box .overflow-y-auto::-webkit-scrollbar {
+    width: 6px !important;
+}
+
+#chatbot-box .overflow-y-auto::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.1) !important;
+    border-radius: 3px !important;
+}
+
+#chatbot-box .overflow-y-auto::-webkit-scrollbar-thumb {
+    background: rgba(218, 165, 32, 0.6) !important;
+    border-radius: 3px !important;
+}
+
+#chatbot-box .overflow-y-auto::-webkit-scrollbar-thumb:hover {
+    background: rgba(218, 165, 32, 0.8) !important;
+}
+
+/* Refined gallery grid */
+#gallery-box .grid {
+    gap: 16px !important;
+}
+
+/* Professional button styling if any */
+.btn {
+    background: linear-gradient(135deg, #4A6B70, #2F4F4F) !important;
+    border: none !important;
+    color: white !important;
+    padding: 12px 24px !important;
+    border-radius: 8px !important;
+    font-weight: 500 !important;
+    transition: all 0.3s ease !important;
+}
+
+.btn:hover {
+    transform: translateY(-1px) !important;
+    box-shadow: 0 6px 20px rgba(47, 79, 79, 0.4) !important;
+}
+"""
 
+# Add this function to load the Google Font
+def load_google_font():
+    return """
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Pinyon+Script&display=swap" rel="stylesheet">
+    """
 
 with gr.Blocks(css=css) as demo:
     gr.HTML("""