:root{--a:#e63946;--a2:#ff6b6b;--g:rgba(255,255,255,.08);--b:rgba(255,255,255,.18)}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{font-family:Vazirmatn,system-ui,Tahoma,sans-serif;background:#0b1020;color:#fff;display:grid;place-items:center;overflow:hidden}
.bg{position:fixed;inset:0;z-index:-1}
.bg i{position:absolute;width:55vmax;height:55vmax;border-radius:50%;filter:blur(90px);opacity:.55;animation:f 22s ease-in-out infinite alternate}
.bg i:nth-child(1){background:var(--a);top:-20%;left:-10%}
.bg i:nth-child(2){background:#5b3df5;bottom:-25%;right:-15%;animation-delay:-8s}
.bg i:nth-child(3){background:#0fb5d6;top:30%;left:35%;width:35vmax;height:35vmax;animation-delay:-14s}
@keyframes f{to{transform:translate(12vw,-8vh) scale(1.2)}}
.glass{background:var(--g);border:1px solid var(--b);backdrop-filter:blur(26px) saturate(160%);-webkit-backdrop-filter:blur(26px) saturate(160%);box-shadow:0 20px 60px rgba(0,0,0,.35)}
.hidden{display:none!important}
.card{width:min(92vw,400px);padding:32px 26px;border-radius:28px;text-align:center;display:grid;gap:14px;animation:up .6s}
.logo{width:84px;margin:auto;filter:drop-shadow(0 8px 24px color-mix(in srgb,var(--a) 60%,transparent))}
h1{letter-spacing:.5px}p{opacity:.75;font-size:14px;line-height:1.8}
input,textarea{font:inherit;color:#fff;background:rgba(255,255,255,.1);border:1px solid var(--b);border-radius:16px;padding:12px 14px;outline:none;width:100%;transition:.2s}
input:focus,textarea:focus{border-color:var(--a);box-shadow:0 0 0 3px color-mix(in srgb,var(--a) 25%,transparent)}
::placeholder{color:rgba(255,255,255,.45)}
.btn,.round,.ghost{font:inherit;color:#fff;border:0;cursor:pointer;transition:.2s}
.btn{background:linear-gradient(135deg,var(--a),var(--a2));padding:12px;border-radius:16px;font-weight:700}
.btn:hover,.accent:hover{transform:translateY(-2px);box-shadow:0 8px 24px color-mix(in srgb,var(--a) 50%,transparent)}
#err{color:#ffb4b4}
#chat{width:min(96vw,820px);height:min(96dvh,900px);border-radius:28px;display:flex;flex-direction:column;overflow:hidden;animation:up .6s}
@keyframes up{from{opacity:0;transform:translateY(24px) scale(.97)}}
header{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--b)}
header img{width:32px}.sp{flex:1}
.dot{width:9px;height:9px;border-radius:50%;background:#3ddc84;box-shadow:0 0 10px #3ddc84}
.ghost{background:var(--g);border:1px solid var(--b);padding:6px 14px;border-radius:12px}
.ghost:hover{background:var(--b)}
#list{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth}
.msg{max-width:min(82%,460px);padding:10px 14px;border-radius:20px 20px 20px 6px;background:var(--g);border:1px solid var(--b);align-self:flex-end;animation:pop .35s;word-break:break-word}
.msg.me{align-self:flex-start;background:linear-gradient(135deg,color-mix(in srgb,var(--a) 55%,transparent),color-mix(in srgb,var(--a2) 35%,transparent));border-radius:20px 20px 6px 20px}
@keyframes pop{from{opacity:0;transform:scale(.9) translateY(10px)}}
.msg img,.msg video{max-width:100%;max-height:340px;border-radius:14px;display:block;margin-bottom:6px}
.msg audio{max-width:100%}
.msg a{color:#9fd8ff}
.file{display:block;padding:8px 10px;margin-bottom:4px;border-radius:12px;background:rgba(0,0,0,.2);text-decoration:none;font-size:14px}
.meta{display:flex;gap:8px;align-items:center;font-size:11px;opacity:.55;margin-top:4px}
.meta span{flex:1}.meta button{background:none;border:0;color:#fff;cursor:pointer;opacity:.7}
#ups{padding:0 16px}
.up{position:relative;overflow:hidden;border-radius:12px;background:var(--g);padding:8px 12px;margin-bottom:6px;font-size:13px}
.up b{position:absolute;inset:auto 0 0 auto;height:3px;width:0;background:var(--a);transition:width .2s}
footer{display:flex;gap:8px;padding:12px;border-top:1px solid var(--b);align-items:flex-end}
footer textarea{resize:none;max-height:120px}
.round{width:44px;height:44px;border-radius:50%;background:var(--g);border:1px solid var(--b);display:grid;place-items:center;flex:none;font-size:18px}
.accent{background:linear-gradient(135deg,var(--a),var(--a2));border:0}
#list::-webkit-scrollbar{width:6px}#list::-webkit-scrollbar-thumb{background:var(--b);border-radius:9px}
@media(max-width:600px){#chat{width:100vw;height:100dvh;border-radius:0}}
#panel,#pick{position:fixed;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.45);backdrop-filter:blur(6px);z-index:9}
#panel .card,#pick .card{max-height:90dvh;overflow:auto}
.add{display:grid;gap:8px}#note{opacity:.85}
.urow{display:flex;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--b)}.urow span{flex:1}
.urow.off span{opacity:.45;text-decoration:line-through}

#chat{flex-direction:row;width:min(96vw,1040px)}
#side{width:290px;flex:none;border-inline-end:1px solid var(--b);display:flex;flex-direction:column;min-width:0}
#conv{flex:1;display:flex;flex-direction:column;min-width:0}
#chats{flex:1;overflow:auto;padding:8px 10px}
#chats h4{opacity:.6;font-size:12px;margin:12px 6px 6px}
.hint{opacity:.4;font-size:12px;padding:4px 8px}
.ci{display:block;width:100%;text-align:start;font:inherit;color:#fff;background:none;border:0;padding:10px 12px;border-radius:14px;cursor:pointer;transition:.2s}
.ci:hover{background:var(--g)}.ci.on{background:linear-gradient(135deg,color-mix(in srgb,var(--a) 50%,transparent),color-mix(in srgb,var(--a2) 25%,transparent))}
#newDm{margin:10px}#back{display:none}.empty{margin:auto;opacity:.5}
.checks{display:grid;gap:6px;max-height:160px;overflow:auto;padding:6px 0}
h2,h3{margin:8px 0 4px}h3{font-size:15px;opacity:.8}
@media(max-width:700px){#side{width:100%;border:0}#conv{display:none}#chat.open #side{display:none}#chat.open #conv{display:flex}#back{display:block}}

.pw{display:block;font-size:11px;opacity:.5;text-align:center;padding:8px;letter-spacing:.5px}.pw b{letter-spacing:2px}
#ann{position:fixed;top:10px;left:50%;transform:translateX(-50%);z-index:8;padding:8px 18px;border-radius:999px;background:color-mix(in srgb,var(--a) 70%,transparent);backdrop-filter:blur(14px);font-size:13px;max-width:92vw;text-align:center}
#upd{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:20;display:flex;gap:12px;align-items:center;padding:10px 14px;border-radius:18px;font-size:14px;animation:up .5s}
#upd .btn{padding:6px 14px}
input[type=color]{padding:2px;height:40px;cursor:pointer}
label:has(input[type=color]){display:grid;gap:4px;font-size:13px}