Update playground.html

playground.html

@@ -13,7 +13,7 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
 
     <style>
-        @import url('https://fonts.googleapis.com/css2?family=Encode+Sans:wght@100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Protest+Revolution&display=swap');
+       @import url('https://fonts.googleapis.com/css2?family=Encode+Sans:wght@100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Protest+Revolution&display=swap');
 
         :root {
             --bg-dark: #0a0a0f;
@@ -207,24 +207,23 @@
             border-radius: 15px;
         }
 
-.chat-container {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-}
+        .chat-container {
+            display: none;
+            flex-direction: column;
+            height: 100%;
+        }
 
-/* Make chat-messages scrollable with flex-grow to take remaining space */
-.chat-messages {
-    flex-grow: 1;
-    overflow-y: auto;
-    padding: 20px;
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-    background-color: var(--bg-dark);
-    font-family: 'JetBrains Mono', monospace;
-    overscroll-behavior: contain;
-}
+        .chat-messages {
+            flex: 1;
+            overflow-y: auto;
+            padding: 20px;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+            background-color: var(--bg-dark);
+            font-family: 'JetBrains Mono', monospace;
+            overscroll-behavior: contain;
+        }
 
         .message {
             max-width: 80%;
@@ -269,22 +268,13 @@
             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);
-    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 {
+            display: flex;
+            gap: 12px;
+            padding: 16px;
+            background-color: var(--bg-darker);
+            border-top: 1px solid var(--border-color);
+        }
 
         .chat-input button {
             background-color: var(--accent-color);