Update app.py

app.py

@@ -203,17 +203,17 @@ custom_css = """
     /* General body styles */
     .gradio-container {
         font-family: 'Arial', sans-serif;
-        background-color: #f8f9fa;
-        color: #333;
+        background-color: #f0f4f8; /* Lighter blue-gray background */
+        color: #2d3748;;
     }
     /* Header styles */
     .gradio-header {
-        background-color: #007bff;
+        background: linear-gradient(135deg, #4a00e0 0%, #8e2de2 100%); /* Purple gradient */
         color: white;
         padding: 20px;
         text-align: center;
         border-radius: 8px;
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
         animation: fadeIn 1s ease-out;
     }
     .gradio-header h1 {
@@ -228,28 +228,23 @@ custom_css = """
         background-color: #fff;
         border-radius: 10px;
         padding: 20px;
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-        max-height: 500px;
-        overflow-y: auto;
-        animation: fadeIn 2s ease-out;
+        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
+        border-left: 4px solid #4a00e0; /* Accent border */
     }
     /* Input field styles */
     .gradio-textbox, .gradio-dropdown, .gradio-image, .gradio-audio, .gradio-file, .gradio-slider {
         border-radius: 8px;
-        border: 2px solid #ccc;
-        padding: 10px;
-        margin-bottom: 10px;
-        width: 100%;
-        font-size: 1rem;
-        transition: all 0.3s ease;
+        border: 2px solid #e2e8f0;
+        background-color: #f8fafc;
     }
     .gradio-textbox:focus, .gradio-dropdown:focus, .gradio-image:focus, .gradio-audio:focus, .gradio-file:focus, .gradio-slider:focus {
-        border-color: #007bff;
+        border-color: #8e2de2;
+        box-shadow: 0 0 0 3px rgba(142, 45, 226, 0.2);
     }
     /* Button styles */
     /* Send Button: Sky Blue */
     #submit-btn {
-        background-color: #00aaff; /* Sky blue */
+        background: linear-gradient(135deg, #4a00e0 0%, #8e2de2 100%); /* Purple gradient */
         color: white;
         border: none;
         border-radius: 8px;
@@ -263,13 +258,14 @@ custom_css = """
         margin-top: 10px;
     }
     #submit-btn:hover {
-        background-color: #0099cc; /* Slightly darker blue */
+        background: linear-gradient(135deg, #5b10f1 0%, #9f3ef3 100%); /* Slightly lighter */
+        box-shadow: 0 6px 8px rgba(74, 0, 224, 0.4);
     }
     #submit-btn:active {
         transform: scale(0.95);
     }
     #clear-history {
-        background-color: #f04e4e; /* Slightly Darker red */
+        ackground-color: #e53e3e; /* Red */
         color: white;
         border: none;
         border-radius: 8px;
@@ -278,9 +274,11 @@ custom_css = """
         cursor: pointer;
         transition: all 0.3s ease;
         margin-top: 10px;
+        box-shadow: 0 4px 6px rgba(229, 62, 62, 0.3);
     }
     #clear-history:hover {
-        background-color: #f5a4a4; /* Light red */
+        background-color: #f56565; /* Lighter red */
+        box-shadow: 0 6px 8px rgba(229, 62, 62, 0.4);
     }
     #clear-history:active {
         transform: scale(0.95);
@@ -293,7 +291,7 @@ custom_css = """
         margin-bottom: 20px;
     }
     .input-type-btn {
-        background-color: #6c757d;
+        background-color: #718096; /* Slate gray */
         color: white;
         border: none;
         border-radius: 8px;
@@ -303,17 +301,17 @@ custom_css = """
         transition: all 0.3s ease;
     }
     .input-type-btn.selected {
-        background-color: #007bff;
+        background-color: linear-gradient(135deg, #4a00e0 0%, #8e2de2 100%); /* Purple gradient */
     }
     .input-type-btn:hover {
-        background-color: #5a6268;
+        background-color: #4a5568; /* Darker slate */
     }
     /* Chat history styles */
     .gradio-chatbot .message {
         margin-bottom: 10px;
     }
     .gradio-chatbot .user {
-        background-color: #007bff;
+        background-color: linear-gradient(135deg, #4a00e0 0%, #8e2de2 100%); /* Purple gradient */
         color: white;
         padding: 10px;
         border-radius: 12px;
@@ -321,8 +319,8 @@ custom_css = """
         animation: slideInUser 0.5s ease-out;
     }
     .gradio-chatbot .assistant {
-        background-color: #f1f1f1;
-        color: #333;
+        background-color: #f0f4f8; /* Light blue-gray */
+        color: #2d3748;
         padding: 10px;
         border-radius: 12px;
         max-width: 70%;