ws version with nice DB select

static/style.css

@@ -7,6 +7,11 @@
   --text:    #eee;
   --accent:  #88f;
 }
+/* Placeholder text in chat input should be white */
+.chat-input::placeholder {
+  color: #fff;
+  opacity: 0.7;
+}
 
 html {
   margin: 0;
@@ -201,6 +206,81 @@ body {
   background: var(--accent);
   color: #111;
 }
+
+/* ---------- chat window styling ------------------------------- */
+.chat-btn {
+  margin-top: 4px;
+  padding: 2px 6px;
+  background: var(--accent);
+  color: #111;
+  border: none;
+  border-radius: 3px;
+  font-size: 0.75rem;
+  cursor: pointer;
+}
+
+.chat-window {
+  position: absolute;
+  top: 10px;
+  /* position window to start just right of the sidebar */
+  left: calc(var(--sidebar-width) + 10px);
+  /* increase default size for better usability */
+  width: 760px; /* increased width for larger terminal area */
+  height: 300px;
+  background: var(--card);
+  border: 1px solid #555;
+  display: flex;
+  flex-direction: column;
+  z-index: 10000;
+}
+
+.chat-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: var(--accent);
+  padding: 4px;
+  color: #111;
+}
+
+.chat-close-btn {
+  background: transparent;
+  border: none;
+  font-size: 1.2rem;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.chat-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 4px;
+  font-size: 0.85rem;
+  color: #fff;
+  /* reserve space so messages aren't hidden behind the input */
+  padding-bottom: 40px;
+}
+
+.chat-form {
+  display: flex;
+  border-top: 1px solid #333;
+  /* fix input area to the bottom of the chat window */
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: #333;
+  z-index: 10;
+}
+
+.chat-input {
+  flex: 1;
+  padding: 4px 6px;
+  border: none;
+  background: #333;
+  color: #fff;
+  outline: none;
+}
 .stat.onlinetime::before { content: "🕑 "}
 .stat.deaths::before { content: "💀 "}