:root {
  --bg: #0f0f23;
  --bg-alt: #1a1a3e;
  --surface: rgba(255,255,255,.04);
  --surface-hover: rgba(255,255,255,.08);
  --surface-active: rgba(255,255,255,.1);
  --border: rgba(255,255,255,.08);
  --accent: #7c3aed;
  --accent-hover: #6d28d9;
  --accent-soft: rgba(124,58,237,.12);
  --accent-border: rgba(124,58,237,.25);
  --text: #fff;
  --text-dim: rgba(255,255,255,.45);
  --text-muted: rgba(255,255,255,.25);
  --danger: #ef4444;
  --danger-soft: rgba(239,68,68,.08);
  --danger-border: rgba(239,68,68,.25);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 20px;
  --shadow: 0 8px 32px rgba(0,0,0,.5);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--text);height:100dvh;overflow:hidden}

/* scrollbar */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--text-muted);border-radius:2px}
@supports(scrollbar-color:transparent transparent){*{scrollbar-color:rgba(255,255,255,.15) transparent;scrollbar-width:thin}}

/* login */
#login{display:flex;align-items:center;justify-content:center;height:100dvh;background:linear-gradient(135deg,#0f0f23,#1a1a3e);padding:1rem}
#login.hidden{display:none}
.login-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:2.5rem 2rem;width:100%;max-width:360px;text-align:center;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:var(--shadow);animation:fadeIn .4s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.login-icon{font-size:2.5rem;margin-bottom:.5rem}
.login-card h1{font-size:1.4rem;margin-bottom:.3rem}
.login-card p{color:var(--text-dim);font-size:.85rem;margin-bottom:1.5rem}
.login-card input{width:100%;padding:.75rem 1rem;margin-bottom:.8rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-size:16px;outline:none;transition:var(--transition)}.login-card input:focus{border-color:var(--accent);background:var(--surface-hover)}
.login-card button{width:100%;padding:.75rem;border:none;border-radius:var(--radius-sm);background:var(--accent);color:var(--text);font-size:.95rem;font-weight:600;cursor:pointer;transition:var(--transition)}.login-card button:hover{background:var(--accent-hover)}.login-card button:active{transform:scale(.97)}
#loginError{color:var(--danger);font-size:.8rem;min-height:1.2rem;margin-top:.8rem}
.dl-apk{display:inline-flex;align-items:center;gap:.4rem;margin-top:1.2rem;font-size:.75rem;color:var(--text-dim);text-decoration:none;border:1px solid var(--border);border-radius:var(--radius-sm);padding:.4rem .8rem;transition:var(--transition)}.dl-apk:hover{background:var(--surface-hover);color:var(--text)}

/* app */
#app{display:none;flex-direction:column;height:100dvh}
#app.active{display:flex;animation:fadeIn .25s ease}

/* topbar */
.topbar{display:flex;align-items:center;padding:.5rem .7rem;background:var(--surface);border-bottom:1px solid var(--border);gap:.6rem;min-height:48px}
.topbar-left{display:flex;align-items:center;gap:.5rem;min-width:0;flex-shrink:1}
.topbar-name{font-weight:600;font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar-role{font-size:.65rem;color:var(--text-dim)}
.topbar-title{flex:1;text-align:center;font-weight:700;font-size:.85rem;color:#a78bfa;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0 .2rem}
.topbar-right{display:flex;align-items:center;gap:.3rem}
.online-count{font-size:.7rem;color:var(--text-muted);padding:.15rem .4rem;background:var(--surface);border-radius:8px}
.topbar button{background:transparent;border:none;color:var(--text-dim);font-size:1.05rem;cursor:pointer;padding:.3rem .4rem;border-radius:6px;min-height:36px;min-width:36px;transition:var(--transition)}.topbar button:hover{background:var(--surface-hover);color:var(--text)}.topbar button:active{transform:scale(.92)}

/* messages */
.msgs{flex:1;padding:.6rem .7rem;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:.35rem;-webkit-overflow-scrolling:touch}
.msg{max-width:88%;padding:.5rem .8rem;border-radius:var(--radius);font-size:.8rem;line-height:1.55;position:relative;word-break:break-word}
.date-sep{text-align:center;margin:.5rem 0;font-size:.7rem;color:var(--text-muted);position:relative}
.date-sep::before,.date-sep::after{content:'';position:absolute;top:50%;width:2rem;height:1px;background:var(--border)}
.date-sep::before{right:calc(50% + 3rem)}.date-sep::after{left:calc(50% + 3rem)}
.msg-new{animation:msgIn .25s ease}
@keyframes msgIn{from{opacity:0;transform:translateY(6px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.msg.sent{background:var(--accent);align-self:flex-end;border-bottom-right-radius:3px}
.msg.recv{background:var(--surface-hover);align-self:flex-start;border-bottom-left-radius:3px}
.msg .author{font-size:.6rem;font-weight:600;margin-bottom:.1rem;opacity:.7}
.msg.sent .author{color:rgba(255,255,255,.7)}
.msg.recv .author{color:#a78bfa}
.msg .t{font-size:.55rem;color:var(--text-dim);margin-top:.15rem;text-align:right}
.msg.sent .t{color:rgba(255,255,255,.6)}

/* file attachments */
.msg .file-attach{margin-top:.35rem;border-radius:var(--radius-sm);overflow:hidden;cursor:pointer}
.msg .file-attach img{max-width:100%;max-height:180px;border-radius:var(--radius-sm);display:block;transition:var(--transition)}.msg .file-attach img:hover{opacity:.85}
.msg .file-attach .doc{display:flex;align-items:center;gap:.5rem;padding:.45rem .6rem;background:var(--surface);border-radius:var(--radius-sm);font-size:.8rem;transition:var(--transition)}.msg .file-attach .doc:hover{background:var(--surface-hover)}
.msg .file-attach .doc .icon{font-size:1.2rem;flex-shrink:0}
.msg .file-attach .doc .meta{flex:1;min-width:0}
.msg .file-attach .doc .meta .fname{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg .file-attach .doc .meta .fsize{font-size:.6rem;color:var(--text-dim)}

/* input */
.input-area{display:flex;gap:.4rem;padding:.5rem .7rem;padding-bottom:calc(.5rem + env(safe-area-inset-bottom,0px));border-top:1px solid var(--border);align-items:flex-end}
.attach-btn{width:38px;height:38px;min-width:38px;border-radius:50%;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;font-size:1rem;color:var(--text-dim);transition:var(--transition)}.attach-btn:hover{background:var(--surface-hover);color:var(--text)}.attach-btn:active{transform:scale(.92)}
.attach-btn input{display:none}
.input-wrap{flex:1;display:flex;flex-direction:column;gap:.25rem;min-width:0}
.file-preview{display:flex;align-items:center;gap:.35rem;padding:.3rem .6rem;background:var(--accent-soft);border:1px solid var(--accent-border);border-radius:var(--radius-sm);font-size:.7rem;animation:msgIn .2s ease}
.file-preview span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.file-preview #fileSize{color:var(--text-dim);flex-shrink:0}
.file-preview button{background:transparent;border:none;color:var(--text-dim);cursor:pointer;font-size:.8rem;flex-shrink:0;padding:.1rem;min-height:28px;min-width:28px;transition:var(--transition)}.file-preview button:hover{color:var(--danger)}
.input-area input[type="text"]{width:100%;padding:.65rem 1rem;border:1px solid var(--border);border-radius:20px;background:var(--surface);color:var(--text);font-size:16px;outline:none;transition:var(--transition)}.input-area input[type="text"]:focus{border-color:var(--accent);background:var(--surface-hover)}.input-area input[type="text"]:disabled{opacity:.4}
.input-area #sendBtn{width:38px;height:38px;min-width:38px;border:none;border-radius:50%;background:var(--accent);color:var(--text);cursor:pointer;font-size:1.1rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--transition)}.input-area #sendBtn:disabled{opacity:.4}.input-area #sendBtn:hover:not(:disabled){background:var(--accent-hover)}.input-area #sendBtn:active:not(:disabled){transform:scale(.92)}

/* modal */
.modal{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.65);display:none;align-items:flex-end;z-index:1000;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
@media(min-width:500px){.modal{align-items:center}}
.modal.show{display:flex}
.modal-box{background:var(--bg-alt);border:1px solid var(--border);border-radius:var(--radius-lg) var(--radius-lg) 0 0;width:100%;max-height:85vh;overflow-y:auto;margin-top:auto;animation:modalUp .3s ease}
@keyframes modalUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@media(min-width:500px){.modal-box{border-radius:var(--radius-lg);width:90%;max-width:420px;max-height:80vh;margin-top:0;animation:fadeIn .25s ease}}
.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.2rem;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg-alt);z-index:1}
.modal-header h2{font-size:1rem}
.modal-header button{background:transparent;border:none;color:var(--text-dim);font-size:1.1rem;cursor:pointer;padding:.2rem;min-height:36px;min-width:36px;transition:var(--transition)}.modal-header button:hover{color:var(--text)}
.modal-body{padding:1.2rem}
.modal-body input{width:100%;padding:.7rem 1rem;margin-bottom:.7rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-size:16px;outline:none;transition:var(--transition)}.modal-body input:focus{border-color:var(--accent)}
.modal-body button{padding:.6rem 1.2rem;border:none;border-radius:var(--radius-sm);background:var(--accent);color:var(--text);cursor:pointer;font-size:.85rem;transition:var(--transition)}.modal-body button:hover{background:var(--accent-hover)}.modal-body button:active{transform:scale(.97)}
.modal-tabs{display:flex;gap:.3rem;margin-bottom:.8rem}
.modal-tabs button{flex:1;padding:.45rem;border:1px solid var(--border);border-radius:6px;background:transparent;color:var(--text-dim);cursor:pointer;font-size:.8rem;transition:var(--transition)}.modal-tabs button:hover{background:var(--surface-hover)}.modal-tabs button.active{background:var(--accent);border-color:var(--accent);color:var(--text)}
.modal-tab{display:none}
.modal-tab.show{display:block}
.user-card{display:flex;align-items:center;gap:.6rem;padding:.5rem .6rem;background:var(--surface);border-radius:6px;margin-bottom:.25rem;transition:var(--transition)}.user-card:hover{background:var(--surface-hover)}
.user-card .avatar{width:32px;height:32px;font-size:.75rem;flex-shrink:0}
.user-card .info{flex:1;min-width:0}
.user-card .name{font-weight:600;font-size:.8rem}
.user-card .login{font-size:.7rem;color:var(--text-dim)}
.user-card .badge{font-size:.6rem;padding:.1rem .35rem;border-radius:4px;background:var(--accent-soft);color:#a78bfa;flex-shrink:0}
.user-card .badge.admin{background:var(--danger-soft);color:#fca5a5}
#addMsg{font-size:.8rem;margin-top:.8rem;min-height:1rem}
.ok{color:#10b981}
.err{color:var(--danger)}

.btn-clear{width:100%;padding:.6rem;border:1px solid var(--danger-border);border-radius:var(--radius-sm);background:var(--danger-soft);color:var(--danger);cursor:pointer;font-size:.8rem;transition:var(--transition)}.btn-clear:hover{background:rgba(239,68,68,.15)}.btn-clear:active{transform:scale(.97)}

/* avatar */
.avatar{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text);font-weight:700;font-size:.7rem;flex-shrink:0}