*{box-sizing:border-box}body{margin:0;background:#000;color:#eee;font-family:Arial,sans-serif}
#login{min-height:100vh;display:grid;place-items:center;background:#000}.box{width:min(90%,370px);padding:34px 28px;background:#090d0a;border:1px solid #123d20;border-radius:20px;text-align:center;box-shadow:0 0 45px #00ff4c12}.dot{margin:auto;width:55px;height:55px;border-radius:50%;display:grid;place-items:center;color:#00e676;background:#07140b;border:1px solid #00a83b;font-size:24px}.box h1{color:#00e676;letter-spacing:2px;margin:16px 0 5px}.box p{color:#777;margin:0 0 22px}.box input{display:block;width:100%;padding:14px;margin:9px 0;background:#050505;border:1px solid #26382b;border-radius:11px;color:#fff;outline:0}.box input:focus{border-color:#00c853}.box button{width:100%;padding:14px;margin-top:8px;border:0;border-radius:11px;background:#00c853;color:#001b09;font-weight:bold;font-size:15px}#err{height:20px;color:#ff5252;margin-top:10px;font-size:12px}.hide{display:none!important}
#chat{height:100vh;display:flex;flex-direction:column;background:#000}#chat header{height:68px;background:#071009;border-bottom:1px solid #173521;display:flex;align-items:center;justify-content:space-between;padding:0 15px}.title{display:flex;align-items:center;gap:9px}.title b{color:#00e676;letter-spacing:1.5px}.title small{display:block;color:#6f7c73;font-size:10px;margin-top:3px}.online{width:10px;height:10px;background:#00d957;border-radius:50%;box-shadow:0 0 8px #00d957}#out{background:#101510;border:1px solid #26382b;color:#aaa;padding:8px 13px;border-radius:9px}
#msgs{flex:1;overflow:auto;padding:15px;display:flex;flex-direction:column;gap:8px;background:#000}.msg{max-width:78%;padding:9px 12px;border-radius:14px 14px 14px 3px;background:#111713;border:1px solid #1b2b20;align-self:flex-start}.msg.me{background:#064c25;border-color:#08763a;align-self:flex-end;border-radius:14px 14px 3px 14px}.name{font-size:10px;color:#62e69a;margin-bottom:3px}.time{font-size:9px;color:#718078;margin-top:4px}
#chat form{display:flex;gap:7px;padding:9px;background:#071009;border-top:1px solid #173521}#text{flex:1;padding:13px;border-radius:12px;background:#101510;border:1px solid #26382b;color:#fff;outline:0}#chat form button{width:48px;border:0;border-radius:12px;background:#00c853;color:#001b09;font-size:19px}#typing{height:17px;color:#66806e;font-size:10px;padding:0 17px;background:#000}
@media(max-width:500px){.msg{max-width:88%}}