update

Author: daffadevhosting

_includes/chat-launcher.html

@@ -33,6 +33,6 @@
 </div>
 
 <!-- Chat Box Area -->
-<div id="chat-box-wrapper" class="hidden max-w-sm md:max-w-xl lg:max-w-3xl fixed top-0 left-0 right-0 bottom-20 overflow-y-auto p-4 space-y-4 bg-transparent text-white z-40 transition-all duration-500 ease-in-out transform scale-0 opacity-0" style="max-width: 1100px;max-height: 80vh;margin: auto;margin-top: 95px;margin-bottom: 25px;">
+<div id="chat-box-wrapper" class="hidden max-w-sm md:max-w-xl lg:max-w-3xl fixed top-0 left-0 right-0 bottom-20 overflow-y-auto p-4 space-y-4 bg-transparent text-white z-40 transition-all duration-500 ease-in-out transform scale-0 opacity-0">
   <div id="chat-messages" class="w-full verflow-y-auto scroll-smooth h-[400px]"></div>
 </div>

assets/css/styles.css

@@ -26,17 +26,26 @@ body.ready #chat-box-wrapper {
   transition: transform 0.4s ease-in-out;
 }
 #chat-messages {
-  overflow-y: auto;
-  max-height: 100vh; /* atau height tetap sesuai desain */
+    padding: 5px;
+    overflow-y: auto;
+    max-height: 100dvh;
+    height: 100%;
+}
+#chat-box-wrapper {
+    max-width: 900px;
+    margin: auto;
+    margin-top: 50px;
+    margin-bottom: 15px;
+    overflow: hidden;
 }
-
 /* Scrollbar umum (Chrome, Edge, Safari) */
 ::-webkit-scrollbar {
-  width: 8px;
+  width: 2px;
 }
 
 ::-webkit-scrollbar-track {
   background: #1f2937; /* abu gelap */
+  border-radius: 10px;
 }
 
 ::-webkit-scrollbar-thumb {
@@ -53,3 +62,19 @@ body.ready #chat-box-wrapper {
   scrollbar-width: thin;
   scrollbar-color: #4b5563 #1f2937;
 }
+
+@media (max-width: 800px) {
+  #chat-messages {
+      padding: 5px;
+      overflow-y: auto;
+      max-height: 100dvh;
+      height: 100%;
+  }
+  #chat-box-wrapper {
+      max-width: 900px;
+      margin: auto;
+      margin-top: 85px;
+      margin-bottom: 15px;
+      overflow: hidden;
+  }
+}