body { margin:0; font-family: system-ui; background:#0b141a; color:#fff; }

.login { display:flex; height:100vh; justify-content:center; align-items:center; }
.login-box {
  background:#202c33; padding:30px; border-radius:8px;
  display:flex; flex-direction:column; gap:10px; width:280px;
}

input,button {
  padding:12px; border:none; border-radius:6px; font-size:16px;
}

button { background:#25D366; color:#000; cursor:pointer; }

.chat { display:flex; flex-direction:column; height:100vh; }
.messages { flex:1; padding:10px; overflow-y:auto; }

.msg {
  background:#202c33;
  padding:8px;
  border-radius:6px;
  margin-bottom:6px;
  max-width:75%;
}

.msg.me { background:#005c4b; margin-left:auto; }

.msg span { display:block; font-size:12px; opacity:.6; }

.input-bar {
  display:flex; gap:6px; padding:8px; background:#202c33;
}