Here's a concise and descriptive commit message:

```
Enhance UI animations and mobile layout; update chat send icon

- Update chat send button icon to bi-arrow-right-circle
- Revamp floating circles animation with 10 configurable elements and complex movement
- Improve mobile layout (header alignment and full-height chat container)
- Increase login page animation visibility and continuity
- Remove message input focus outline for cleaner UI
```

The message summarizes key changes:
1. Icon update in chat interface
2. Major animation enhancements (both chat background and login page)
3. Mobile layout improvements
4. UX polish (focus state removal)

It maintains imperative mood, stays within line limits, and clearly connects changes to their purpose (improved visuals and responsiveness).

chat-page/index.html

@@ -67,7 +67,7 @@
             </div>
             
             <button class="send-btn">
-                <i class="bi bi-send"></i>
+                <i class="bi bi-arrow-right-circle"></i>
             </button>
         </div>
     </div>

chat-page/style.css

@@ -83,6 +83,7 @@ body {
     font-weight: bold;
 }
 
+/* Enhanced floating circles background */
 .floating-circles {
     position: absolute;
     top: 0;
@@ -104,21 +105,110 @@ body {
     bottom: -150px;
     border-radius: 50%;
     z-index: 1;
-    animation-fill-mode: both; /* Smoother animation */
+    animation-fill-mode: both;
 }
 
-/* Konfigurasi floating circles... */
+.floating-circles li:nth-child(1) {
+    left: 25%;
+    width: 80px;
+    height: 80px;
+    animation-delay: 0s;
+    animation-duration: 20s;
+}
 
+.floating-circles li:nth-child(2) {
+    left: 10%;
+    width: 20px;
+    height: 20px;
+    animation-delay: 2s;
+    animation-duration: 22s;
+}
+
+.floating-circles li:nth-child(3) {
+    left: 70%;
+    width: 20px;
+    height: 20px;
+    animation-delay: 4s;
+    animation-duration: 18s;
+}
+
+.floating-circles li:nth-child(4) {
+    left: 40%;
+    width: 60px;
+    height: 60px;
+    animation-delay: 0s;
+    animation-duration: 24s;
+}
+
+.floating-circles li:nth-child(5) {
+    left: 65%;
+    width: 20px;
+    height: 20px;
+    animation-delay: 0s;
+    animation-duration: 16s;
+}
+
+.floating-circles li:nth-child(6) {
+    left: 75%;
+    width: 110px;
+    height: 110px;
+    animation-delay: 3s;
+    animation-duration: 26s;
+}
+
+.floating-circles li:nth-child(7) {
+    left: 35%;
+    width: 150px;
+    height: 150px;
+    animation-delay: 7s;
+    animation-duration: 30s;
+}
+
+.floating-circles li:nth-child(8) {
+    left: 50%;
+    width: 25px;
+    height: 25px;
+    animation-delay: 15s;
+    animation-duration: 45s;
+}
+
+.floating-circles li:nth-child(9) {
+    left: 20%;
+    width: 15px;
+    height: 15px;
+    animation-delay: 2s;
+    animation-duration: 35s;
+}
+
+.floating-circles li:nth-child(10) {
+    left: 85%;
+    width: 150px;
+    height: 150px;
+    animation-delay: 0s;
+    animation-duration: 28s;
+}
+
+/* Enhanced floating animation with horizontal movement */
 @keyframes floating {
     0% {
-        transform: translateY(0) rotate(0deg);
+        transform: translate(0, 0) rotate(0deg);
         opacity: 0.7;
-        border-radius: 50%;
+    }
+    25% {
+        transform: translate(-50px, -250px) rotate(90deg);
+        opacity: 0.5;
+    }
+    50% {
+        transform: translate(50px, -500px) rotate(180deg);
+        opacity: 0.3;
+    }
+    75% {
+        transform: translate(-30px, -750px) rotate(270deg);
+        opacity: 0.5;
     }
     100% {
-        transform: translateY(-1000px) rotate(720deg);
+        transform: translate(0, -1000px) rotate(360deg);
         opacity: 0;
-        border-radius: 50%;
     }
 }
 
@@ -224,6 +314,10 @@ body {
     width: 100%;
 }
 
+.message-input:focus {
+    outline: none; /* Remove focus outline */
+}
+
 .send-btn {
     background: #0096c7;
     border: none;
@@ -378,17 +472,19 @@ body {
 }
 
 @media (max-width: 768px) {
+    body {
+        align-items: flex-start; /* Header menempel di atas */
+        padding: 0;
+    }
+    
     .chat-container {
-        height: 100vh;
+        height: 100vh; /* Kembali ke viewport height normal */
         max-height: none;
         border-radius: 0;
+        margin-top: 0;
     }
     
     .message {
         max-width: 85%;
     }
-    
-    body {
-        padding: 0;
-    }
 }