Update index.html

index.html

@@ -36,57 +36,57 @@
 
         .message {
             max-width: 80%;
-            padding: 15px;
-            border-radius: 15px;
-            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
+            padding: 15px 20px;
+            border-radius: 20px;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
             line-height: 1.6;
             word-wrap: break-word;
-            margin-top: 10px;
             font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
             position: relative;
-            overflow: hidden;
             background: #fff;
             transition: all 0.3s ease-in-out;
         }
 
+        .message:hover {
+            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+            transform: translateY(-3px);
+        }
+
         .message::after {
             content: '';
             position: absolute;
-            bottom: 0;
-            left: 0;
-            width: 100%;
+            bottom: -10px;
+            left: 20px;
+            width: calc(100% - 40px);
             height: 3px;
             background: linear-gradient(to right, #4c51bf, #5a67d8);
-            transform: scaleX(0);
-            transform-origin: bottom right;
-            transition: transform 0.3s ease-in-out;
+            opacity: 0;
+            transition: opacity 0.3s ease-in-out;
         }
 
         .message:hover::after {
-            transform: scaleX(1);
-            transform-origin: bottom left;
-        }
-
-        .message:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
+            opacity: 1;
         }
 
         .user-message {
-            background-color: #f0f0f0;
-            color: #333;
+            background-color: #e0f7fa;
+            color: #00796b;
+            align-self: flex-end;
+            border-radius: 20px 20px 0 20px;
         }
 
         .bot-message {
             background-color: #4c51bf;
             color: #fff;
+            align-self: flex-start;
+            border-radius: 20px 20px 20px 0;
         }
 
         @media (max-width: 768px) {
             .message {
                 max-width: 90%;
-                padding: 12px;
-                border-radius: 12px;
+                padding: 12px 15px;
+                border-radius: 15px;
             }
         }