Update static/style.css

static/style.css

@@ -1,15 +1,15 @@
 /* QA Answer Card */
 #answer-box div {
-    background-color: #eef2ff; /* Light indigo */
+    background: linear-gradient(135deg, #c3dafe, #e0e7ff);
     padding: 15px 20px;
     border-radius: 15px;
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
     margin-bottom: 12px;
     transition: background 0.3s, transform 0.2s;
 }
 
 #answer-box div:hover {
-    background-color: #e0e7ff; /* Slightly darker on hover */
+    background: linear-gradient(135deg, #a5b4fc, #c7d2fe);
     transform: translateY(-2px);
 }
 
@@ -18,22 +18,22 @@
 }
 
 #answer-box strong {
-    color: #4f46e5; /* Indigo for labels */
+    color: #4338ca;
 }
 
 /* Dark mode adjustments */
 .dark-mode #answer-box div {
-    background-color: #1f2937; /* dark card */
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+    background-color: #1f2937;
+    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
 }
 
 .dark-mode #answer-box strong {
-    color: #93c5fd; /* lighter indigo in dark mode */
+    color: #93c5fd;
 }
 
 /* History List Items */
 #history-list li {
-    background-color: #f3f4f6; /* light gray */
+    background: linear-gradient(135deg, #fce7f3, #fbcfe8);
     padding: 10px 15px;
     border-radius: 12px;
     margin-bottom: 8px;
@@ -45,7 +45,7 @@
 }
 
 #history-list li:hover {
-    background-color: #e0e7ff; /* light indigo on hover */
+    background: linear-gradient(135deg, #f9a8d4, #f472b6);
     transform: translateX(2px);
 }
 
@@ -56,9 +56,21 @@
 /* Dark mode for history items */
 .dark-mode #history-list li {
     background-color: #1f2937;
-    color: #d1d5db; /* lighter gray text */
+    color: #d1d5db;
 }
 
 .dark-mode #history-list li:hover {
-    background-color: #374151; /* darker hover effect */
+    background-color: #374151;
+}
+
+/* Scrollbar styling */
+#answer-box::-webkit-scrollbar,
+#history-list::-webkit-scrollbar {
+    width: 8px;
+}
+
+#answer-box::-webkit-scrollbar-thumb,
+#history-list::-webkit-scrollbar-thumb {
+    background-color: rgba(99,102,241,0.6);
+    border-radius: 4px;
 }