add 1 on 1 chat

static/index.css

@@ -13,13 +13,52 @@ body {
     color: #e0e0e0;
 }
 
-#messages {
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.5rem 1rem;
+    background: #0f0f23;
+    border-bottom: 1px solid #333;
+}
+
+.user-setup {
+    display: flex;
+    gap: 0.5rem;
+}
+
+#username {
+    padding: 0.4rem;
+    background: #16213e;
+    border: 1px solid #333;
+    border-radius: 4px;
+    color: #e0e0e0;
+}
+
+#login-btn {
+    padding: 0.4rem 0.8rem;
+    background: #6d4aff;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+.online-users {
+    font-size: 0.9rem;
+}
+
+#online-list {
+    color: #4ade80;
+}
+
+#message-log {
     flex: 1;
     overflow-y: auto;
     padding: 1rem;
 }
 
-.message {
+#message-log p {
     padding: 0.4rem 0.6rem;
     margin-bottom: 0.3rem;
     background: #16213e;
@@ -32,9 +71,10 @@ body {
     padding: 1rem;
     background: #0f0f23;
     border-top: 1px solid #333;
+    gap: 0.5rem;
 }
 
-#message-input {
+#recipient-select {
     flex: 1;
     padding: 0.5rem;
     background: #16213e;
@@ -44,8 +84,17 @@ body {
     font-family: monospace;
 }
 
+#message-input {
+    flex: 2;
+    padding: 0.5rem;
+    background: #16213e;
+    border: 1px solid #333;
+    border-radius: 4px;
+    color: #e0e0e0;
+    font-family: monospace;
+}
+
 #publish-form button {
-    margin-left: 0.5rem;
     padding: 0.5rem 1rem;
     background: #6d4aff;
     color: white;