:root{--bg:#b3a186;--glass:#594b57;--glass2:#4a3e4a;--line:#c9b8e8;--t:#fff;--m:#d9ccd6;--g:linear-gradient(135deg,#7c3fe0,#d672b4);--sent:linear-gradient(135deg,#7c3fe0,#b472cf)}
*{box-sizing:border-box;margin:0;font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif}
html,body{height:100%}
body{background:radial-gradient(circle at 20% 10%,#c9b99f,#a89274 70%);color:var(--t);overflow:hidden}
button,input{font-size:15px;color:var(--t)}
button{cursor:pointer;border:0}
input{background:var(--glass);border:1.5px solid var(--line);border-radius:22px;padding:12px 16px;outline:0;width:100%}
input::placeholder{color:#b9a9b6}
.btn{background:var(--g);border:1.5px solid var(--line);border-radius:22px;padding:12px 18px;font-weight:700}
.ghost{background:var(--glass);border:1.5px solid var(--line);border-radius:22px;padding:10px 14px}
.hide{display:none!important}
#auth,.modal,#call{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:16px}
.modal,#call{background:#2a1f2acc;z-index:5;display:none}
.modal.on,#call.on{display:flex}
.card{background:var(--glass);border:1.5px solid var(--line);border-radius:26px;padding:22px;width:100%;max-width:400px;display:flex;flex-direction:column;gap:12px;max-height:92vh;overflow:auto}
.card h2{font-size:22px}.sm{font-size:13px;color:var(--m)}
#app{display:flex;height:100%;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
#side{width:340px;max-width:100%;display:flex;flex-direction:column;gap:10px;padding:12px}
#chat{flex:1;display:flex;flex-direction:column;gap:10px;padding:12px;min-width:0}
.bar{display:flex;align-items:center;gap:10px;background:var(--glass);border:1.5px solid var(--line);border-radius:30px;padding:10px 14px}
.bar b{flex:1;font-size:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ic{background:var(--glass2);border:1.5px solid var(--line);border-radius:50%;width:40px;height:40px;flex:none}
#list{flex:1;overflow:auto;display:flex;flex-direction:column;gap:8px}
.it{background:var(--glass);border-radius:20px;padding:12px 14px;cursor:pointer}
.it b{display:flex;align-items:center;gap:5px}.it span{font-size:13px;color:var(--m)}
.it.on{outline:2px solid var(--line)}
#msgs{flex:1;overflow:auto;display:flex;flex-direction:column;gap:8px;padding:4px}
.m{max-width:80%;padding:10px 14px;border-radius:22px;background:var(--glass);word-wrap:break-word}
.m.me{align-self:flex-end;background:var(--sent);border:1.5px solid var(--line)}
.m img{max-width:100%;border-radius:12px;display:block}.m a{color:#fff}
.m small{display:block;font-size:11px;color:var(--m);text-align:right;margin-top:3px}
#comp{display:flex;gap:8px;align-items:center}
.bd{width:16px;height:16px;flex:none}
.empty{margin:auto;text-align:center;color:var(--m)}
#rv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#111}
#lv{position:absolute;right:14px;top:14px;width:110px;border-radius:14px;border:2px solid var(--line);background:#222}
#cb{position:absolute;bottom:34px;display:flex;gap:14px}
#call{padding:0}
.req{background:var(--glass2);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:6px;font-size:14px}
.req img{max-width:100%;border-radius:10px}
.row{display:flex;gap:8px}
@media(max-width:760px){#side.back{display:none}#chat{display:none}#chat.on{display:flex}#side{width:100%}}