:root{
  --bg:#0f1115; --panel:#151923; --edge:#1c2230; --muted:#7d8596; --text:#e5e7eb; --accent:#9aa4b2;
}
html,body{height:100%; background:var(--bg); color:var(--text); margin:0; font:14px/1.5 system-ui,Segoe UI,Roboto,Arial;}
.wrap{display:grid; grid-template-rows:auto 1fr auto; min-height:100%;}
header{padding:16px; border-bottom:1px solid var(--edge); background:linear-gradient(180deg, #121622, #0f1115);}
header h1{margin:0; font-size:16px; letter-spacing:.12em; text-transform:uppercase; color:#c7ccd6}
header .sub{color:var(--muted); font-size:12px}
#room{
  display:grid; grid-template-columns:260px 1fr; gap:12px; padding:12px;
}
.panel{background:var(--panel); border:1px solid var(--edge); border-radius:12px}
#sidebar{padding:12px; display:flex; flex-direction:column; gap:10px}
.me{font-size:12px; color:var(--muted)}
.users{display:flex; flex-direction:column; gap:6px; overflow:auto; max-height:calc(100vh - 200px)}
.user{display:flex; align-items:center; gap:8px}
.dot{width:8px; height:8px; border-radius:50%}
#log{padding:0; margin:0; list-style:none; height:62vh; overflow:auto; scrollbar-width:thin}
#log li{padding:10px 12px; border-bottom:1px solid #1a2130; word-wrap:break-word}
#log li:nth-child(2n){background:rgba(255,255,255,0.01)}
.meta{color:var(--muted); font-size:12px}
.name{font-weight:600; opacity:.9}
.sys{color:#9ba3b3; font-style:italic}
footer{border-top:1px solid var(--edge); padding:10px 12px; background:#10131b; display:flex; gap:8px}
#msg{flex:1; resize:none; background:#0e121a; color:var(--text); border:1px solid #1b2330; border-radius:10px; padding:10px 12px; height:44px}
button{background:#1c2636; color:#d7dbe3; border:1px solid #2a3447; border-radius:10px; padding:0 14px; font-weight:600; cursor:pointer}
button:hover{filter:brightness(1.05)}
.hint{color:var(--muted); font-size:12px; padding:0 12px 10px}

/* name modal */
.modal-backdrop{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(4,6,10,.7)}
.modal{width:min(520px,92vw); background:var(--panel); border:1px solid var(--edge); border-radius:14px; padding:18px; box-shadow:0 10px 30px rgba(0,0,0,.4)}
.modal h2{margin:0 0 8px 0; font-size:18px}
.modal p{margin:0 0 12px 0; color:var(--muted)}
.row{display:flex; gap:8px}
.row input{flex:1; background:#0e121a; color:var(--text); border:1px solid #1b2330; border-radius:10px; padding:10px 12px}

@media (max-width: 820px){
  #room{grid-template-columns:1fr}
  #log{height:58vh}
}