refactor(ui): Modernize chat interface and standardize background

This commit overhauls the chat page UI for a cleaner, more modern aesthetic inspired by popular messaging apps.

Key changes include:
- Redesigned the chat header to display the user's name and role.
- Replaced the message input area with a WhatsApp-style layout.
- Added user avatars to received messages and a person icon to sent messages for clearer identification.
- Swapped custom SVG icons with Bootstrap Icons for consistency and easier maintenance.
- Removed the floating circles background animation from both the chat and login pages to reduce visual clutter and improve focus.

login-page/style.css

@@ -11,7 +11,7 @@ body {
     justify-content: center;
     align-items: center;
     min-height: 100vh;
-    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
+    background: linear-gradient(135deg, #0077b6, #023e8a); /* Same as chat page */
     overflow: hidden;
 }
 
@@ -29,7 +29,7 @@ body {
 
 .background-animation i {
     position: absolute;
-    background: rgba(255, 255, 255, 0.6);
+    background: rgba(72, 202, 228, 0.4); /* #48cae4 with transparency */
     border-radius: 50%;
     animation: float linear infinite;
     opacity: 0;
@@ -89,12 +89,11 @@ body {
 
 /* Login container styling */
 .login-container {
-    background: rgba(255, 255, 255, 0.9);
-    backdrop-filter: blur(10px);
+    background: rgba(255, 255, 255, 0.9); /* Slightly transparent white */
+    backdrop-filter: blur(20px); /* Frosted glass effect */
+    -webkit-backdrop-filter: blur(20px);
     border-radius: 20px;
-    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2), 
-                0 0 0 2px rgba(255, 255, 255, 0.1) inset,
-                0 10px 20px rgba(0, 0, 0, 0.1) inset;
+    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
     padding: 40px;
     width: 90%;
     max-width: 450px;
@@ -144,7 +143,7 @@ body {
 }
 
 .toggle-btn.active {
-    background: #6a11cb;
+    background: #0096c7; /* New blue from palette */
     color: white;
 }
 
@@ -171,9 +170,9 @@ body {
 }
 
 .input-group input:focus,
-.phone-input-wrapper:focus-within {
-    border-color: #6a11cb;
-    box-shadow: 0 0 0 3px rgba(106, 17, 203, 0.2);
+.phone-input-wrapper:极focus-within {
+    border-color: #48cae4;
+    box-shadow: 0 0 0 3px rgba(72, 202, 228, 0.2);
     transform: translateY(-2px);
     outline: none;
 }
@@ -225,7 +224,7 @@ body {
 .login-btn {
     width: 100%;
     padding: 15px;
-    background: linear-gradient(to right, #6a11cb, #2575fc);
+    background: #0096c7; /* New blue from palette */
     color: white;
     border: none;
     border-radius: 10px;
@@ -233,7 +232,7 @@ body {
     font-weight: 600;
     cursor: pointer;
     transition: all 0.3s ease;
-    box-shadow: 0 5px 15px rgba(37, 117, 252, 0.4);
+    box-shadow: 0 5px 15px rgba(0, 150, 199, 0.4);
     position: relative;
     overflow: hidden;
 }
@@ -255,14 +254,14 @@ body {
 }
 
 .links a {
-    color: #6a11cb;
+    color: #48cae4; /* New light blue from palette */
     text-decoration: none;
     font-size: 14px;
     transition: color 0.3s ease;
 }
 
 .links a:hover {
-    color: #2575fc;
+    color: #03045e; /* Darkest blue from palette */
     text-decoration: underline;
 }