Chat, scrolling, sockets and timestamps updated

src/pages/css/Chat.css

@@ -1,3 +1,7 @@
+body {
+  background: linear-gradient(to right, #e0f7fa, #fffde7);
+}
+
 .chat-container {
   display: flex;
   flex-direction: column;
@@ -11,10 +15,13 @@
 }
 
 .chat-header {
-  padding: 10px;
+  padding: 15px;
   background-color: #007bff;
   color: white;
   text-align: center;
+  font-weight: bold;
+  letter-spacing: 1px;
+  border-bottom: 2px solid #0056b3;
 }
 
 .chat-messages {
@@ -24,6 +31,7 @@
   padding: 10px;
   overflow-y: auto;
   background-color: #fff;
+  max-height: 400px;
 }
 
 .message-bubble {
@@ -33,6 +41,12 @@
   max-width: 70%;
   word-wrap: break-word;
   display: inline-block;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  transition: transform 0.2s;
+}
+
+.message-bubble:hover {
+  transform: translateY(-2px);
 }
 
 .sent {
@@ -58,8 +72,9 @@
 
 .message-timestamp {
   font-size: 10px;
-  color: #999;
-  margin-top: 5px;
+  color: black;
+  text-align: right;
+  margin-top: 4px;
   display: block;
 }