*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#10131c;--s1:#181c28;--s2:#212636;--line:rgba(255,255,255,.09);--text:#eef0f6;--muted:#8a91a8;--accent:#ffcf4a;--on:#6ee7c8;--danger:#ff6b6b;--r:14px;--f:'Bricolage Grotesque',system-ui,sans-serif}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font-family:var(--f);font-size:15px;line-height:1.5}
a{color:var(--accent);text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hidden{display:none!important}
/* auth */
.auth{min-height:100dvh;display:grid;place-items:center;padding:1.5rem}
.auth-box{width:min(400px,100%);display:flex;flex-direction:column;gap:1rem}
.logo{font-weight:800;font-size:1.6rem;letter-spacing:-.03em}
.logo i{font-style:normal;background:var(--accent);color:#10131c;border-radius:50% 50% 50% 4px;padding:0 .45rem;margin-right:.4rem}
h1{font-size:1.7rem;letter-spacing:-.02em;line-height:1.15}
.sub{color:var(--muted)}
.field{display:flex;flex-direction:column;gap:.3rem}
.field label{font-size:.85rem;color:var(--muted)}
.field input,.field textarea{background:var(--s1);border:1px solid var(--line);border-radius:10px;padding:.7rem .85rem}
.field input:focus{border-color:var(--accent);outline:none}
.hint{font-size:.78rem;color:var(--muted)}.err{font-size:.8rem;color:var(--danger);min-height:1em}
.btn{background:var(--accent);color:#10131c;border:0;border-radius:10px;padding:.75rem 1rem;font-weight:700;cursor:pointer}
.btn:disabled{opacity:.5;cursor:default}
.btn.ghost{background:var(--s2);color:var(--text)}
.btn.danger{background:var(--danger);color:#fff}
.sep{display:flex;align-items:center;gap:.75rem;color:var(--muted);font-size:.8rem}
.sep::before,.sep::after{content:"";flex:1;height:1px;background:var(--line)}
.row{display:flex;gap:.6rem}.row>*{flex:1}
.center{text-align:center}
.toast{position:fixed;bottom:1.25rem;left:50%;transform:translate(-50%,20px);background:var(--s2);border:1px solid var(--line);padding:.6rem 1rem;border-radius:10px;opacity:0;pointer-events:none;transition:.25s}
.toast.show{opacity:1;transform:translate(-50%,0)}
/* avatar */
.av{width:40px;height:40px;border-radius:50%;background:var(--s2);display:grid;place-items:center;font-weight:700;flex-shrink:0;position:relative;background-size:cover}
.av.on::after{content:"";position:absolute;right:0;bottom:0;width:11px;height:11px;border-radius:50%;background:var(--on);border:2px solid var(--s1)}
.av.lg{width:88px;height:88px;font-size:2rem}
/* app */
.app{display:grid;grid-template-columns:320px 1fr;height:100dvh}
.side{background:var(--s1);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.side-top{padding:1rem;display:flex;justify-content:space-between;align-items:center}
.tabs{display:flex;padding:0 .75rem;gap:.25rem;border-bottom:1px solid var(--line)}
.tab{background:none;border:0;padding:.6rem .75rem;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent}
.tab.active{color:var(--text);border-color:var(--accent)}
.badge{background:var(--accent);color:#10131c;border-radius:99px;font-size:.7rem;font-weight:700;padding:0 .4rem;margin-left:.25rem}
.list{flex:1;overflow-y:auto;padding:.5rem}
.item{display:flex;gap:.75rem;align-items:center;padding:.6rem;border-radius:10px;cursor:pointer}
.item:hover,.item.active{background:var(--s2)}
.item-body{flex:1;min-width:0}.item-name{font-weight:600}
.item-last{color:var(--muted);font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search{padding:.75rem}.search input{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:.55rem .75rem}
.me{border-top:1px solid var(--line);padding:.75rem;display:flex;gap:.75rem;align-items:center}
.icon{background:none;border:0;color:var(--muted);cursor:pointer;padding:.4rem;border-radius:8px;display:grid;place-items:center}
.icon:hover{background:var(--s2);color:var(--text)}
.chat{display:flex;flex-direction:column;min-width:0;min-height:0}
.chat-head{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border-bottom:1px solid var(--line)}
.chat-head .item-body{flex:1}
.msgs{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.35rem}
.msg{max-width:min(70%,520px);padding:.55rem .8rem;border-radius:16px 16px 16px 4px;background:var(--s2);width:fit-content}
.msg.mine{align-self:flex-end;background:var(--accent);color:#10131c;border-radius:16px 16px 4px 16px}
.msg time{display:block;font-size:.68rem;opacity:.6;margin-top:.15rem}
.typing{padding:0 1rem .4rem;color:var(--muted);font-size:.8rem;min-height:1.4em}
.composer{display:flex;gap:.5rem;padding:.75rem 1rem;border-top:1px solid var(--line);align-items:flex-end}
.composer textarea{flex:1;resize:none;max-height:140px;background:var(--s1);border:1px solid var(--line);border-radius:12px;padding:.65rem .85rem}
.empty{margin:auto;text-align:center;color:var(--muted);max-width:280px}
.empty b{display:block;color:var(--text);font-size:1.1rem;margin-bottom:.25rem}
.back{display:none}
/* call */
.call{position:fixed;inset:0;background:rgba(10,12,18,.96);z-index:50;display:flex;flex-direction:column}
.call-stage{flex:1;position:relative;display:grid;place-items:center}
.call-remote{width:100%;height:100%;object-fit:cover;background:#000}
.call-local{position:absolute;right:1rem;bottom:1rem;width:150px;aspect-ratio:3/4;border-radius:12px;object-fit:cover;background:var(--s2)}
.call-info{position:absolute;top:2rem;text-align:center;width:100%}
.call-bar{display:flex;justify-content:center;gap:1rem;padding:1.25rem}
.round{width:54px;height:54px;border-radius:50%;border:0;background:var(--s2);cursor:pointer;display:grid;place-items:center}
.round.end{background:var(--danger)}.round.ok{background:var(--on);color:#10131c}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.7);display:grid;place-items:center;padding:1rem;z-index:40}
.modal-box{background:var(--s1);border:1px solid var(--line);border-radius:var(--r);padding:1.5rem;width:min(420px,100%);display:flex;flex-direction:column;gap:1rem}
@media(max-width:760px){.app{grid-template-columns:1fr}.chat{display:none}.app.open .side{display:none}.app.open .chat{display:flex}.back{display:grid}.msg{max-width:85%}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.msg img{max-width:100%;max-height:320px;border-radius:10px;display:block;margin-bottom:.25rem}
.msg div{white-space:pre-wrap;overflow-wrap:anywhere}.msg b{display:block;font-size:.78rem;opacity:.7}