*{box-sizing:border-box}body{margin:0;font-family:system-ui;background:#0b141a;color:#e9edef}.auth{min-height:100vh;display:grid;place-items:center;background:linear-gradient(145deg,#0b141a,#12372c)}.card{width:min(92%,390px);padding:28px;background:#202c33;border-radius:22px;display:grid;gap:14px;box-shadow:0 20px 70px #0008}.card input,.card button,#search,#send input{padding:14px;border:0;border-radius:12px}.card button,#send button{background:#25d366;color:#07140d;font-weight:800;border:0;border-radius:12px}.card a{color:#53bdeb}.err{background:#5d1b1b;padding:10px;border-radius:10px}.app{height:100vh;display:grid;grid-template-columns:360px 1fr}aside{background:#111b21;border-right:1px solid #2a3942;overflow:auto}header{height:64px;background:#202c33;padding:15px;display:flex;align-items:center;justify-content:space-between}header a{color:#53bdeb}#search{margin:10px;width:calc(100% - 20px);background:#202c33;color:white}.row{padding:14px 18px;border-bottom:1px solid #202c33;display:grid;cursor:pointer}.row small{color:#8696a0;margin-top:5px}main{display:grid;grid-template-rows:64px 1fr 65px;background:#0b141a}.empty{place-self:center;color:#8696a0}#msgs{overflow:auto;padding:22px;display:flex;flex-direction:column;gap:9px}.bubble{max-width:70%;background:#202c33;padding:9px 12px;border-radius:12px;align-self:flex-start}.bubble.mine{background:#005c4b;align-self:flex-end}.bubble small{color:#aebac1}.actions{display:none;margin-top:5px}.bubble:hover .actions{display:block}.actions button{font-size:10px;background:transparent;color:#aebac1;border:0;cursor:pointer}#send{display:flex;gap:8px;padding:9px;background:#202c33}#send input{flex:1;background:#2a3942;color:white}#send button{width:52px}@media(max-width:700px){.app{grid-template-columns:1fr}aside{width:100%}main{position:fixed;inset:0;display:none}main:has(#msgs){display:grid}.bubble{max-width:85%}}
.card{max-width:900px;margin:30px auto;padding:20px;background:#fff;border-radius:18px;box-shadow:0 8px 30px #0001}.card form{display:grid;gap:10px;margin:12px 0}.card input,.card textarea,.card select,.toolbar select{padding:10px;border:1px solid #ddd;border-radius:10px}.avatar{width:42px;height:42px;border-radius:50%;object-fit:cover}.avatar.big{width:96px;height:96px}.toolbar{display:flex;gap:6px;flex-wrap:wrap}.toolbar button,.actions button,#upload button{font-size:12px;padding:6px 8px}#upload{display:flex;gap:6px;padding:8px;background:#f6f6f6}#typing{height:20px;padding:0 14px;font-size:12px;color:#667}