:root{--bg:#07070d;--panel:#0d0d17;--line:#ffffff17;--tx:#f2f2f7;--mu:#9a9ab0;
--g:conic-gradient(from var(--a,0deg),#4f8cff,#a855f7,#ff5fa2,#ffa14f,#4f8cff)}
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{background:var(--bg);color:var(--tx);font:16px/1.8 Vazirmatn,Tahoma,system-ui,sans-serif;display:flex;overflow:hidden}
body::before{content:"";position:fixed;inset:auto -10% -35% -10%;height:55%;background:radial-gradient(60% 60% at 50% 100%,#a855f733,#4f8cff1f 50%,transparent);pointer-events:none}
#side{width:270px;background:var(--panel);border-left:1px solid var(--line);padding:18px;display:flex;flex-direction:column;gap:14px;z-index:5}
.brand{display:flex;align-items:center;gap:10px;font-size:19px}.brand img{width:34px}
.btn{background:#ffffff0d;border:1px solid var(--line);color:var(--tx);padding:10px;border-radius:14px;font:inherit;cursor:pointer;transition:.2s}
.btn:hover{background:#ffffff1a}
#list{overflow:auto;display:flex;flex-direction:column;gap:4px}
#list a{padding:8px 12px;border-radius:12px;color:var(--mu);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}
#list a:hover,#list a.on{background:#ffffff12;color:var(--tx)}
main{flex:1;display:flex;flex-direction:column;align-items:center;position:relative;min-width:0}
#menu{display:none;position:absolute;top:12px;right:12px;background:none;border:0;color:var(--tx);font-size:24px;cursor:pointer}
#hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;gap:6px}
#hero[hidden],#msgs[hidden]{display:none}
.orb{width:120px;height:120px;position:relative;margin-bottom:14px}
.orb::before{content:"";position:absolute;inset:-14px;border-radius:50%;background:var(--g);filter:blur(30px);opacity:.55;animation:spin 8s linear infinite}
.orb img{position:relative;width:100%}
h1{font-size:34px;font-weight:700;background:linear-gradient(90deg,#8fb2ff,#c58cff,#ff8cbf);-webkit-background-clip:text;background-clip:text;color:transparent}
#hero p{color:var(--mu)}
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:22px;max-width:640px}
.chips button{background:#ffffff0a;border:1px solid var(--line);color:var(--tx);padding:9px 16px;border-radius:99px;font:inherit;font-size:14px;cursor:pointer;transition:.2s}
.chips button:hover{background:#ffffff18;transform:translateY(-2px)}
#msgs{flex:1;width:100%;max-width:760px;overflow:auto;padding:60px 20px 10px;display:flex;flex-direction:column;gap:18px}
.m{max-width:85%;padding:12px 18px;border-radius:20px;white-space:pre-wrap;word-break:break-word}
.m.u{align-self:flex-start;background:#ffffff14;border-bottom-right-radius:6px}
.m.a{align-self:flex-end;background:linear-gradient(135deg,#4f8cff22,#a855f722 50%,#ff5fa21c);border:1px solid var(--line);border-bottom-left-radius:6px}
.dots{display:inline-flex;gap:5px}.dots i{width:7px;height:7px;border-radius:50%;background:var(--mu);animation:b 1s infinite}.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
#form{width:100%;max-width:760px;padding:10px 20px 24px}
.glow{position:relative;display:flex;align-items:flex-end;gap:8px;background:#0e0e1a;border-radius:26px;padding:8px 8px 8px 14px}
.glow::before,.glow::after{content:"";position:absolute;inset:-2px;border-radius:28px;background:var(--g);z-index:-1;animation:spin 6s linear infinite}
.glow::after{filter:blur(14px);opacity:.55}
textarea{flex:1;background:none;border:0;outline:0;color:var(--tx);font:inherit;resize:none;max-height:180px;padding:8px 6px}
#send{width:40px;height:40px;border-radius:50%;border:0;background:var(--g);color:#fff;font-size:20px;cursor:pointer;flex:none;animation:spin 6s linear infinite}
#send:disabled{opacity:.35}
button:focus-visible,textarea:focus-visible{outline:2px solid #8fb2ff;outline-offset:2px}
@keyframes spin{to{--a:360deg}}
@keyframes b{50%{transform:translateY(-5px);opacity:.4}}
@media(max-width:760px){#side{position:fixed;inset:0 0 0 auto;transform:translateX(100%);transition:.3s}#side.open{transform:none}#menu{display:block}h1{font-size:26px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}