Update playground.html

playground.html

@@ -207,29 +207,15 @@
             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;
+    display: flex;
     flex-direction: column;
-    flex: 1;
-    position: relative;
-    overflow: hidden;
+    height: 100%;
 }
 
+/* Make chat-messages scrollable with flex-grow to take remaining space */
 .chat-messages {
-    flex: 1;
+    flex-grow: 1;
     overflow-y: auto;
     padding: 20px;
     display: flex;
@@ -238,39 +224,6 @@
     background-color: var(--bg-dark);
     font-family: 'JetBrains Mono', monospace;
     overscroll-behavior: contain;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 80px; /* Space for input area */
-}
-
-.chat-input {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    display: flex;
-    gap: 12px;
-    padding: 16px;
-    background-color: var(--bg-darker);
-    border-top: 1px solid var(--border-color);
-    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 {
@@ -316,13 +269,22 @@
             border: 1px solid var(--border-color);
         }
 
-        .chat-input {
-            display: flex;
-            gap: 12px;
-            padding: 16px;
-            background-color: var(--bg-darker);
-            border-top: 1px solid var(--border-color);
-        }
+chat-input {
+    display: flex;
+    gap: 12px;
+    padding: 16px;
+    background-color: var(--bg-darker);
+    border-top: 1px solid var(--border-color);
+    position: sticky;
+    bottom: 0;
+    z-index: 1; /* Ensure it stays above messages */
+    background-color: var(--bg-darker);
+}
+
+/* Optional: Adjust input field style for smooth UX */
+.chat-input input {
+    flex-grow: 1;
+}
 
         .chat-input button {
             background-color: var(--accent-color);