@font-face{font-family:Mukta;src:url(fonts/mukta-400.woff2)format("woff2");font-weight:400}@font-face{font-family:Mukta;src:url(fonts/mukta-700.woff2)format("woff2");font-weight:700}
:root{--bg:#0f0b1a;--pan:#17112a;--el:#221a3a;--tx:#ece8f5;--mu:#9b93b3;--ln:#2d2449;--ac:#e7b84a;--pu:#7c3aed;--ub:#2e1f55}
.light{--bg:#faf8ff;--pan:#f1edfa;--el:#fff;--tx:#1d1530;--mu:#6b6385;--ln:#e2dbf2;--ub:#ede5ff}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--tx);font:16px/1.55 Mukta,system-ui,sans-serif}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
#app{display:flex;height:100dvh}
aside{width:270px;background:var(--pan);border-right:1px solid var(--ln);display:flex;flex-direction:column;padding:14px;gap:8px}
.brand{display:flex;align-items:center;gap:10px;font-size:18px;padding:4px}.brand img{width:34px}
.newbtn{border:1px solid var(--ln);border-radius:12px;padding:10px;text-align:left;background:var(--el)}
.lbl{color:var(--mu);font-size:13px;margin-top:8px}#list{flex:1;overflow:auto}
#list button{display:block;width:100%;text-align:left;padding:8px 10px;border-radius:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--mu)}
#list button.on,#list button:hover{background:var(--el);color:var(--tx)}.setbtn{text-align:left;padding:10px;border-radius:10px}
main{flex:1;display:flex;flex-direction:column;min-width:0;position:relative}
header{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--ln)}
header>button{width:38px;height:38px;border-radius:10px;font-size:18px}.title{flex:1;display:flex;align-items:center;gap:8px;font-weight:700}.title img{width:26px}
.pill{border:1px solid var(--ln);font-size:13px!important;width:auto!important;padding:0 12px}
#menu{display:none}
#msgs{flex:1;overflow:auto;padding:18px 14px 8px;display:flex;flex-direction:column;gap:14px;max-width:820px;width:100%;margin:0 auto}
.m{display:flex;gap:10px;max-width:100%}.m.u{justify-content:flex-end}
.m.u .b{background:var(--ub);border-radius:18px 18px 4px 18px;padding:9px 14px;max-width:85%}
.m.a img.av{width:28px;height:28px;flex:none}.m.a .b{max-width:calc(100% - 40px)}
.b p{margin:0 0 .6em}.b p:last-child{margin:0}.b pre{background:#0008;color:#eee;padding:10px;border-radius:10px;overflow:auto;font-size:14px}
.b code{background:#7c3aed22;padding:1px 5px;border-radius:5px}.b pre code{background:none;padding:0}.b ul,.b ol{padding-left:22px;margin:.3em 0}.b a{color:var(--ac)}
.tools{display:flex;gap:4px;margin-top:4px}.tools button{color:var(--mu);font-size:13px;padding:2px 6px;border-radius:6px}.tools button:hover{background:var(--el)}
.typing span{display:inline-block;width:7px;height:7px;margin:0 2px;border-radius:50%;background:var(--ac);animation:t 1s infinite}
.typing span:nth-child(2){animation-delay:.15s}.typing span:nth-child(3){animation-delay:.3s}@keyframes t{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-4px)}}
#empty{position:absolute;inset:60px 0 130px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px}
#empty img{width:76px;filter:drop-shadow(0 0 22px #e7b84a55)}#empty h1{font-size:24px;margin:14px 0 4px}#empty p{color:var(--mu);margin:0 0 18px}
.chips{display:flex;flex-direction:column;gap:8px;width:100%;max-width:420px}.chips button{border:1px solid var(--ln);border-radius:14px;padding:10px 14px;background:var(--pan);text-align:left}
#composer{padding:8px 12px calc(10px + env(safe-area-inset-bottom));max-width:820px;width:100%;margin:0 auto}
.box{display:flex;align-items:flex-end;gap:6px;background:var(--el);border:1px solid var(--ln);border-radius:24px;padding:6px}
.box:focus-within{border-color:var(--pu)}textarea#inp{flex:1;background:none;border:0;outline:0;color:var(--tx);font:inherit;resize:none;max-height:160px;padding:8px 4px}
.ic{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;cursor:pointer}.ic.rec{background:#dc2626;animation:t 1s infinite}
.sendb{width:38px;height:38px;border-radius:50%;background:var(--ac);color:#1d1530;font-weight:700}.sendb.stop{background:var(--tx);color:var(--bg)}
#composer small{display:block;text-align:center;color:var(--mu);font-size:12px;margin-top:6px}
#att{font-size:13px;color:var(--ac);padding:0 8px 4px}
dialog{border:1px solid var(--ln);border-radius:20px;background:var(--pan);color:var(--tx);width:min(94vw,480px);padding:20px}dialog::backdrop{background:#0009}
dialog h2{margin:0 0 12px}dialog label{display:block;margin-bottom:12px;font-size:14px;color:var(--mu)}
dialog input:not([type=checkbox]),dialog textarea{display:block;width:100%;margin-top:4px;background:var(--el);border:1px solid var(--ln);color:var(--tx);border-radius:10px;padding:9px;font:inherit}
.row{display:flex!important;gap:8px;align-items:center;color:var(--tx)!important}.note{font-size:12px;color:var(--mu)}
.acts{display:flex;gap:8px;justify-content:space-between}.pri{background:var(--ac);color:#1d1530;padding:10px 18px;border-radius:12px;font-weight:700}.ghost{color:#f87171;font-size:14px}
#scrim{display:none}
@media(max-width:760px){#menu{display:block}aside{position:fixed;z-index:20;inset:0 auto 0 0;transform:translateX(-100%);transition:.25s}
body.drawer aside{transform:none}body.drawer #scrim{display:block;position:fixed;inset:0;background:#0008;z-index:10}}

dialog select{display:block;width:100%;margin-top:4px;background:var(--el);border:1px solid var(--ln);color:var(--tx);border-radius:10px;padding:9px;font:inherit}.hint{font-size:13px;margin:-6px 0 12px;color:var(--mu)}.hint a{color:var(--ac)}