*{box-sizing:border-box;font-family:system-ui,Arial}
body{margin:0;background:#0b141a;color:#e9edef}
a{color:inherit;text-decoration:none}
.center{display:flex;min-height:100vh;align-items:center;justify-content:center;padding:24px}
.card{width:360px;background:#111b21;border:1px solid #1f2c33;border-radius:14px;padding:18px}
label{display:block;margin-top:10px;color:#b6c1c9;font-size:13px}
input{width:100%;padding:10px;border-radius:10px;border:1px solid #1f2c33;background:#0b141a;color:#e9edef;margin-top:6px}
button{margin-top:14px;width:100%;padding:10px;border:0;border-radius:10px;background:#00a884;color:#04130f;font-weight:700;cursor:pointer}
.alert{background:#2a1b1b;border:1px solid #5a2a2a;padding:10px;border-radius:10px;margin:10px 0}
.muted{color:#b6c1c9;font-size:13px}

.layout{display:flex;min-height:100vh}
.sidebar{width:360px;background:#111b21;border-right:1px solid #1f2c33;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px;border-bottom:1px solid #1f2c33}
.btn-link{color:#00a884;font-weight:700}
.search{padding:12px;border-bottom:1px solid #1f2c33}
.users{overflow:auto;flex:1}
.user{display:flex;gap:12px;padding:12px 14px;border-bottom:1px solid #1a262c}
.user:hover{background:#0b141a}
.avatar{width:40px;height:40px;border-radius:50%;background:#1f2c33;display:flex;align-items:center;justify-content:center;font-weight:800}
.avatar.big{width:52px;height:52px}
.meta .name{font-weight:800}
.status{font-size:12px}
.status.on{color:#7CFCB3}
.status.off{color:#b6c1c9}

.empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0b141a}

.chat{flex:1;display:flex;flex-direction:column;background:#0b141a}
.chat-head{display:flex;gap:12px;padding:14px;border-bottom:1px solid #1f2c33;align-items:center}
.messages{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:10px}
.msg{display:flex}
.msg.me{justify-content:flex-end}
.bubble{max-width:70%;background:#1f2c33;border-radius:14px;padding:10px 12px;position:relative}
.msg.me .bubble{background:#005c4b}
.time{margin-top:6px;font-size:11px;color:#b6c1c9;text-align:right}
.composer{display:flex;gap:10px;padding:12px;border-top:1px solid #1f2c33}
.composer input{flex:1;margin-top:0}
.composer button{width:120px;margin-top:0}