:root{--bg:#04101c;--cy:#2fe6ff;--bl:#1a7bff;--tx:#d8f4ff;--dim:#7fa6b8;--card:rgba(10,32,52,.72);--line:rgba(47,230,255,.28);--inp:#04101c;--pnl:#07182a}
*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow-x:hidden}
body{background:var(--bg);color:var(--tx);font:calc(16px*var(--fs,1))/1.45 system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Bengali",sans-serif}
.bg{position:fixed;inset:0;z-index:-1;background:
 radial-gradient(1.2px 1.2px at 20% 30%,#9fe 50%,transparent),radial-gradient(1px 1px at 70% 15%,#fff 50%,transparent),radial-gradient(1px 1px at 85% 70%,#9fe 50%,transparent),radial-gradient(1px 1px at 35% 85%,#fff 50%,transparent),
 linear-gradient(var(--line) 1px,transparent 1px) 0 0/40px 40px,linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/40px 40px,
 radial-gradient(circle at 50% 25%,#0a2a48,var(--bg) 70%);opacity:.9}
.app{display:flex;flex-direction:column;height:100dvh;max-width:560px;margin:0 auto;padding:max(10px,env(safe-area-inset-top)) 12px max(8px,env(safe-area-inset-bottom));gap:8px}
.top{display:flex;align-items:center;gap:10px}
h1{font-size:1.25rem;letter-spacing:.35em;font-weight:600;color:var(--cy);flex:1;text-shadow:0 0 12px var(--cy)}
.pill{padding:4px 12px;border:1px solid var(--cy);border-radius:99px;font-size:.75rem;letter-spacing:.12em;color:var(--cy)}
.icon-btn{background:none;border:1px solid var(--line);color:var(--tx);border-radius:10px;width:44px;height:44px;font-size:1.2rem}
.reactor{position:relative;width:min(34vw,34dvh,170px);aspect-ratio:1;margin:0 auto;flex:none}
.ring,.core{position:absolute;border-radius:50%}
.ring{border:2px solid transparent;border-top-color:var(--cy);border-bottom-color:var(--bl);animation:spin 8s linear infinite}
.r1{inset:0}.r2{inset:12%;animation-duration:5s;animation-direction:reverse;border-style:dashed;border-color:var(--cy) transparent}
.r3{inset:24%;animation-duration:3s}
.core{inset:38%;background:radial-gradient(circle,#fff,var(--cy) 45%,var(--bl));box-shadow:0 0 30px 8px rgba(47,230,255,.6);animation:pulse 3s ease-in-out infinite}
body[data-state=listening] .core{animation-duration:.7s;box-shadow:0 0 45px 16px rgba(47,230,255,.9)}
body[data-state=processing] .ring{animation-duration:1.5s}
body[data-state=speaking] .core{animation-duration:.4s;background:radial-gradient(circle,#fff,#7dffb0 45%,var(--bl))}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{50%{transform:scale(.85);opacity:.85}}
.messages{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:4px}
.msg{max-width:88%;padding:9px 13px;border-radius:14px;background:var(--card);border:1px solid var(--line);overflow-wrap:anywhere}
.msg.user{align-self:flex-end;background:rgba(26,123,255,.28)}
.msg.sys{align-self:center;color:var(--dim);font-size:.85rem;text-align:center}
.msg a{color:var(--cy)}
.quick{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.quick::-webkit-scrollbar{display:none}
.quick button{flex:none;min-height:44px;padding:0 14px;border-radius:22px;background:var(--card);border:1px solid var(--line);color:var(--tx);font-size:.9rem}
.input-row{display:flex;gap:8px}
#textInput{flex:1;min-width:0;height:52px;border-radius:26px;border:1px solid var(--line);background:var(--inp);color:var(--tx);padding:0 16px;font-size:1rem}
.mic,.send{flex:none;width:52px;height:52px;border-radius:50%;border:1px solid var(--cy);background:var(--card);color:var(--cy);font-size:1.3rem}
.mic.on{background:var(--cy);color:#022;animation:pulse .8s infinite}
footer{text-align:center;font-size:.75rem;color:var(--dim);padding-top:2px}
button:active{transform:scale(.96)}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--cy);outline-offset:2px}
.overlay{position:fixed;inset:0;background:rgba(2,8,14,.8);display:flex;align-items:flex-end;justify-content:center;z-index:9}
.overlay[hidden]{display:none}
.panel{width:100%;max-width:560px;max-height:85dvh;overflow-y:auto;background:var(--pnl);border:1px solid var(--line);border-radius:20px 20px 0 0;padding:16px;display:flex;flex-direction:column;gap:12px}
.panel h2{display:flex;justify-content:space-between;align-items:center;font-size:1.1rem;color:var(--cy)}
.panel label{display:flex;flex-direction:column;gap:6px}
.panel .row{flex-direction:row;justify-content:space-between;align-items:center;min-height:44px}
.panel input[type=checkbox]{width:24px;height:24px;accent-color:var(--cy)}
select{height:44px;border-radius:10px;background:var(--inp);color:var(--tx);border:1px solid var(--line);padding:0 10px;font-size:1rem}
.hint{color:var(--dim);font-size:.85rem}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

.overlay.center{align-items:center;padding:14px}
.overlay.center .panel{border-radius:20px}
.btn{min-height:46px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--tx);font-size:1rem;padding:0 14px}
.btn.primary{background:var(--cy);color:#022;border-color:var(--cy);font-weight:600}
.btn:disabled{opacity:.6}
.panel input[type=text],.panel input[type=password]{height:46px;border-radius:10px;background:var(--inp);color:var(--tx);border:1px solid var(--line);padding:0 12px;font-size:1rem;width:100%}
.err{color:#ff8a8a}

body.light{--bg:#eaf6ff;--tx:#0b2233;--dim:#4d6b7c;--card:rgba(255,255,255,.85);--line:rgba(10,100,160,.35);--cy:#0a7fa8;--inp:#fff;--pnl:#f4faff}
body.light .bg{background:linear-gradient(var(--line) 1px,transparent 1px) 0 0/40px 40px,linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/40px 40px,radial-gradient(circle at 50% 25%,#fff,#cfe8f8 75%)}
.reactor{cursor:pointer}
input[type=range]{width:100%;accent-color:var(--cy)}
.panel ol{padding-left:1.2em;display:flex;flex-direction:column;gap:6px}

[hidden]{display:none!important}
.msg{white-space:pre-wrap}
.bar{display:flex;gap:6px}
.bar select{flex:1;min-width:0;height:40px;font-size:.85rem;padding:0 6px}
.btn.small{min-height:40px;padding:0 10px;font-size:.85rem;flex:none}
.send.small{width:44px;height:44px;font-size:1.1rem;align-self:center}
.wave{display:flex;gap:5px;height:26px;align-items:center;justify-content:center;flex:none}
.wave i{width:4px;height:6px;border-radius:3px;background:var(--cy);opacity:.4}
body[data-state=listening] .wave i,body[data-state=speaking] .wave i{opacity:1;animation:eq .7s ease-in-out infinite}
.wave i:nth-child(2n){animation-delay:.15s!important}.wave i:nth-child(3n){animation-delay:.3s!important}
@keyframes eq{50%{height:24px}}
.mic.wake{box-shadow:inset 0 0 0 3px var(--cy)}
.attachment-preview{display:flex;flex-direction:column;gap:8px;padding:10px 11px;border:1px solid var(--line);border-radius:16px;background:var(--card);box-shadow:0 8px 24px rgba(0,0,0,.12);max-height:190px;overflow:auto}
.pending-list{display:flex;gap:9px;overflow-x:auto;padding:1px 1px 4px;scrollbar-width:thin}
.pending-card{position:relative;display:flex;align-items:center;gap:9px;min-width:185px;max-width:260px;min-height:66px;padding:8px 30px 8px 8px;border:1px solid var(--line);border-radius:12px;background:rgba(0,0,0,.10);overflow:hidden}
.pending-thumb{width:48px;height:48px;object-fit:cover;border-radius:8px;flex:none;background:var(--inp)}
.pending-file-icon{width:46px;height:48px;display:grid;place-items:center;border-radius:8px;background:var(--line);font-size:1.3rem;flex:none}
.pending-meta{min-width:0;display:flex;flex-direction:column;gap:2px}.pending-meta b{font-size:.82rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pending-meta small{font-size:.72rem;color:var(--dim)}
.pending-remove{position:absolute;right:4px;top:4px;width:26px;height:26px;border:0;border-radius:50%;background:rgba(120,140,155,.18);color:var(--tx);font-size:1rem;line-height:1}
.attachment-preview-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--dim);font-size:.75rem}.attachment-preview-foot button{border:0;background:none;color:var(--cy);font-size:.78rem;padding:5px}
.attach-wrap{position:relative;display:flex;align-items:center;flex:none}.attach-trigger{font-size:1.25rem!important}
.attach-menu{position:absolute;left:0;bottom:calc(100% + 12px);width:min(290px,calc(100vw - 44px));padding:7px;border:1px solid var(--line);border-radius:17px;background:var(--pnl);box-shadow:0 16px 40px rgba(0,0,0,.35);z-index:8;display:flex;flex-direction:column;gap:3px;animation:menuIn .14s ease-out}
.attach-menu[hidden]{display:none}.attach-menu>button{display:flex;align-items:center;text-align:left;gap:11px;padding:10px 9px;min-height:58px;border:0;border-radius:11px;background:transparent;color:var(--tx)}.attach-menu>button:active,.attach-menu>button:hover{background:var(--card)}
.attach-option-icon{display:grid;place-items:center;width:38px;height:38px;flex:none;border:1px solid var(--line);border-radius:11px;color:var(--cy);font-size:1.2rem}
.attach-menu b{display:block;font-size:.9rem;font-weight:600}.attach-menu small{display:block;color:var(--dim);font-size:.75rem;margin-top:2px}.attach-menu p{padding:7px 9px 5px;color:var(--dim);font-size:.7rem;line-height:1.35;border-top:1px solid var(--line)}
@keyframes menuIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.input-row{align-items:center;position:relative;gap:7px}.input-row.drop-active{outline:2px dashed var(--cy);outline-offset:4px;border-radius:28px}
.msg.user .msg-text{white-space:pre-wrap}.msg.user.with-attachments{max-width:94%;padding:10px}.message-files{display:flex;flex-direction:column;gap:7px;margin-top:7px}.message-image{display:block;max-width:min(100%,270px);max-height:260px;border-radius:12px;object-fit:contain;border:1px solid var(--line)}.message-file-card{display:flex;align-items:center;gap:9px;max-width:270px;padding:8px;border:1px solid var(--line);border-radius:11px;background:rgba(0,0,0,.10)}.message-file-icon{display:grid;place-items:center;width:38px;height:42px;border-radius:8px;background:var(--line);font-size:1.1rem;flex:none}.message-file-name{font-size:.78rem;overflow-wrap:anywhere}.message-file-size{display:block;color:var(--dim);font-size:.7rem;margin-top:2px}
body.light .pending-card,body.light .message-file-card{background:rgba(255,255,255,.7)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tool{display:flex;flex-direction:column;gap:2px;text-align:left;padding:10px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--tx);font-size:.8rem}
.tool b{font-size:.95rem}
@media (max-height:620px){.wave{display:none}}