*{box-sizing:border-box}body{margin:0;background:#08080a;color:#eee;font-family:system-ui,Arial}main{height:100vh;display:flex}aside{width:250px;padding:22px 16px;background:#111115;border-right:1px solid #29292f}.brand{font-weight:900;letter-spacing:2px}.room{margin-top:30px;padding:11px;background:#24242a;border-radius:9px;font-weight:700}.label{margin:25px 8px 10px;color:#888;font-size:11px;letter-spacing:1px}.user{padding:8px 10px}.user:before{content:"";display:inline-block;width:7px;height:7px;background:#55d98b;border-radius:50%;margin-right:9px}section{flex:1;display:flex;flex-direction:column;min-width:0}header{height:76px;border-bottom:1px solid #29292f;padding:0 24px;display:flex;justify-content:space-between;align-items:center}header strong,header small{display:block}header small{color:#888;font-size:12px}#status{font-size:11px;color:#777}#status.ok{color:#65dc92}#messages{flex:1;overflow:auto;padding:25px 8%;display:flex;flex-direction:column;gap:13px}.msg{max-width:760px;padding:11px 14px;background:#17171c;border:1px solid #292930;border-radius:13px}.mine{align-self:flex-end;background:#25252a}.meta{font-size:12px;margin-bottom:5px}.meta b{margin-right:8px}.meta span{color:#777;font-size:10px}.body{white-space:pre-wrap;word-break:break-word;line-height:1.45}.pic{max-width:100%;max-height:500px;margin-top:8px;border-radius:9px}.system{align-self:center;color:#777;font-size:12px}.hint{text-align:center;color:#666;font-size:10px;padding:0 0 11px}form{margin:0 8% 8px;padding:9px;display:flex;gap:8px;background:#151519;border:1px solid #303037;border-radius:13px}textarea{flex:1;resize:none;background:transparent;color:#fff;border:0;outline:0;padding:10px;font:inherit}form button,#joinBtn{border:0;border-radius:9px;background:#fff;color:#08080a;font-weight:800;cursor:pointer;padding:0 17px}#attach{font-size:22px;background:#292930;color:#fff}.overlay{position:fixed;inset:0;z-index:5;display:grid;place-items:center;background:#000d;backdrop-filter:blur(10px)}.card{width:min(430px,92vw);background:#151519;border:1px solid #33333b;border-radius:19px;padding:32px}.card>b{letter-spacing:4px;color:#aaa;font-size:12px}.card h1{font-size:32px;margin:8px 0}.card p{color:#888}.card input{width:100%;padding:13px;background:#0a0a0d;color:#fff;border:1px solid #36363e;border-radius:9px;margin-bottom:10px}.card button{width:100%;height:44px}.card small{display:block;color:#ff7777;margin-top:9px}@media(max-width:700px){aside{display:none}#messages{padding:18px 4%}form{margin-left:4%;margin-right:4%}}