Update playground.html

playground.html

@@ -207,11 +207,25 @@
             border-radius: 15px;
         }
 
+.chat-wrapper {
+    position: relative;
+    width: 100%;
+    max-width: 800px;
+    height: 90vh;
+    background-color: var(--bg-darker);
+    border-radius: 24px;
+    overflow: hidden;
+    box-shadow: 0 20px 50px rgba(5, 5, 10, 0.7);
+    display: flex;
+    flex-direction: column;
+}
+
 .chat-container {
     display: none;
     flex-direction: column;
-    height: 100%;
+    flex: 1;
     position: relative;
+    overflow: hidden;
 }
 
 .chat-messages {
@@ -224,12 +238,11 @@
     background-color: var(--bg-dark);
     font-family: 'JetBrains Mono', monospace;
     overscroll-behavior: contain;
-    max-height: calc(90vh - 120px); /* Adjust based on header and input height */
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
-    bottom: 70px; /* Space for input area */
+    bottom: 80px; /* Space for input area */
 }
 
 .chat-input {
@@ -245,6 +258,21 @@
     z-index: 10;
 }
 
+/* Custom Scrollbar for Chat Messages */
+.chat-messages::-webkit-scrollbar {
+    width: 8px;
+}
+
+.chat-messages::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.chat-messages::-webkit-scrollbar-thumb {
+    background-color: var(--primary-blue);
+    border-radius: 20px;
+}
+}
+
         .message {
             max-width: 80%;
             width: fit-content;