[hidden]{display:none!important}
:root{--bg:#f5f1ea;--card:#fff;--ink:#1f1b16;--mute:#7a7066;--line:#e6dfd3;--beige:#efe6d6;--beige2:#e7dcc8;--code:#f3ecdf;--accent:#8a6a3f;
--green:#2f9e5b;--greenbg:#e3f4ea;--blue:#2f6fd6;--bluebg:#e4edfb;--red:#d64545;--shadow:0 1px 2px rgba(60,40,10,.06),0 4px 16px rgba(60,40,10,.06);
--sab:env(safe-area-inset-bottom,0px);--sat:env(safe-area-inset-top,0px)}
:root[data-theme=dark]{--bg:#171513;--card:#211e1a;--ink:#f1ebe2;--mute:#a59a8c;--line:#35302a;--beige:#3a3229;--beige2:#4a4034;--code:#2a2520;--accent:#d8b37a;
--greenbg:#173826;--green:#5fd18f;--bluebg:#182a48;--blue:#7aa8f5;--shadow:0 1px 2px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.25)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#171513;--card:#211e1a;--ink:#f1ebe2;--mute:#a59a8c;--line:#35302a;--beige:#3a3229;--beige2:#4a4034;--code:#2a2520;--accent:#d8b37a;--greenbg:#173826;--green:#5fd18f;--bluebg:#182a48;--blue:#7aa8f5;--shadow:0 1px 2px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.25)}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font:16px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",Roboto,sans-serif;overscroll-behavior:none}
button{font:inherit;color:inherit;cursor:pointer}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
#app{display:flex;flex-direction:column;height:var(--vh,100dvh);position:fixed;inset:0 0 auto 0;max-width:760px;margin:0 auto}
#top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:calc(10px + var(--sat)) 14px 6px}
.iconbtn{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow)}
.iconbtn.flat{border:0;background:transparent;box-shadow:none;width:38px;height:38px;color:var(--mute)}
.pill{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);font-weight:600;font-size:15px;box-shadow:var(--shadow);white-space:nowrap}
.pill.small{height:32px;padding:0 12px;font-size:13px;box-shadow:none}
#modelBtn{flex:0 1 auto;min-width:0}#modelBtn span{overflow:hidden;text-overflow:ellipsis}
.chev{width:16px;height:16px;color:var(--mute)}
#newBtn svg{width:16px;height:16px}
#chips{display:flex;gap:8px;padding:6px 16px 4px}
.chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:999px;font-size:13px;border:0}
.chip i{width:7px;height:7px;border-radius:50%;background:currentColor}
.chip b{font-weight:600}
.green{background:var(--greenbg);color:var(--green)}.blue{background:var(--bluebg);color:var(--blue)}
.chip.off{background:var(--beige);color:var(--mute)}
.chip.busy i{animation:pulse 1s infinite}
#scroll{flex:1;overflow-y:auto;padding:8px 14px 0;-webkit-overflow-scrolling:touch}
#spacer{height:12px}
.msg{margin:10px 0;animation:rise .25s ease}
.user{display:flex;justify-content:flex-end}
.user .bub{max-width:82%;background:var(--beige);padding:10px 14px;border-radius:20px 20px 6px 20px;white-space:pre-wrap;word-wrap:break-word}
.user .bub img{display:block;max-width:180px;border-radius:12px;margin-bottom:6px}
.bot .card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:14px 16px 8px;box-shadow:var(--shadow)}
.bot .who{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mute);margin-bottom:4px;font-weight:600}
.bot .who img{width:22px;height:22px;border-radius:7px}
.md{word-wrap:break-word;overflow-wrap:anywhere}
.md>:first-child{margin-top:0}.md>:last-child{margin-bottom:4px}
.md p{margin:.5em 0}.md ul,.md ol{padding-left:1.3em;margin:.4em 0}
.md a{color:var(--blue)}
.md code{font:13.5px/1.5 ui-monospace,"SF Mono",Menlo,Consolas,monospace;background:var(--code);padding:1px 5px;border-radius:6px}
.md pre{position:relative;background:var(--code);border:1px solid var(--line);border-radius:14px;padding:30px 14px 12px;overflow-x:auto;margin:.6em 0}
.md pre code{background:none;padding:0;font-size:13px}
.md pre .lang{position:absolute;top:7px;left:14px;font-size:11px;color:var(--mute);text-transform:lowercase}
.md pre .cc{position:absolute;top:4px;right:6px;font-size:11px;border:0;background:transparent;color:var(--mute);padding:4px 8px}
.md table{border-collapse:collapse;display:block;overflow-x:auto}.md th,.md td{border:1px solid var(--line);padding:4px 8px}
.md blockquote{margin:.5em 0;padding-left:12px;border-left:3px solid var(--beige2);color:var(--mute)}
.md img.gen{width:100%;border-radius:14px;display:block}
.cursor::after{content:"";display:inline-block;width:8px;height:16px;margin-left:2px;vertical-align:-2px;background:var(--accent);border-radius:2px;animation:blink 1s steps(2) infinite}
.typing{display:flex;gap:5px;padding:8px 0}.typing i{width:7px;height:7px;border-radius:50%;background:var(--mute);animation:bounce 1.2s infinite}.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
.acts{display:flex;gap:4px;margin-top:6px;border-top:1px solid var(--line);padding-top:6px;flex-wrap:wrap}
.acts button{display:inline-flex;align-items:center;gap:5px;border:0;background:transparent;color:var(--mute);font-size:13px;padding:6px 8px;border-radius:10px}
.acts button:active{background:var(--beige)}
.acts svg{width:16px;height:16px}
.err{color:var(--red)}
.empty{text-align:center;color:var(--mute);padding:40px 20px 0}
.empty img{width:72px;height:72px;border-radius:20px;box-shadow:var(--shadow)}
.empty h2{color:var(--ink);margin:12px 0 4px;font-size:22px}
.sugg{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}
.sugg button{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:8px 12px;font-size:14px}
#sheet{background:var(--card);border-radius:24px 24px 0 0;box-shadow:0 -4px 24px rgba(60,40,10,.08);padding:6px 12px calc(10px + var(--sab));border-top:1px solid var(--line)}
.grabber{width:40px;height:5px;border-radius:3px;background:var(--line);margin:2px auto 8px}
.toggles{display:flex;gap:8px;margin-bottom:8px}
.tpill{flex:1;display:flex;align-items:center;gap:7px;height:42px;padding:0 10px 0 12px;border-radius:999px;border:1px solid var(--line);background:var(--bg);font-size:14px;font-weight:600;min-width:0;user-select:none}
.tpill span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tpill svg{width:18px;height:18px;color:var(--mute)}
.tpill input{display:none}
.tpill em{position:relative;width:36px;height:22px;border-radius:11px;background:var(--line);transition:.2s;flex:none}
.tpill em::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:.2s}
.tpill input:checked+em{background:var(--green)}.tpill input:checked+em::after{left:16px}
.tpill:has(input:checked){border-color:var(--green)}
#studio{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:8px 12px;margin-bottom:8px;font-size:13px}
#studio .row{display:flex;align-items:center;gap:10px;margin:2px 0}#studio .row>span{width:52px;color:var(--mute)}
.seg{display:flex;gap:4px}.seg button{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:3px 10px;font-size:12px}.seg button.on{background:var(--ink);color:var(--bg)}
input[type=range]{flex:1;accent-color:var(--accent)}
#attach{display:flex;gap:8px;flex-wrap:wrap}#attach:not(:empty){margin-bottom:8px}
#attach .th{position:relative}#attach img{width:58px;height:58px;object-fit:cover;border-radius:12px;border:1px solid var(--line)}
#attach button{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;border:0;background:var(--ink);color:var(--bg);font-size:13px;line-height:22px;padding:0}
#composer{border:1px solid var(--line);border-radius:20px;background:var(--card);padding:10px 8px 6px 14px;box-shadow:var(--shadow)}
#input{width:100%;border:0;outline:0;resize:none;background:transparent;color:var(--ink);font:inherit;font-size:16px;max-height:140px;padding:2px 0}
#input::placeholder{color:var(--mute)}
.cbar{display:flex;align-items:center;gap:2px}.hint{flex:1;font-size:12px;color:var(--mute)}
.send{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;border:0;border-radius:999px;background:var(--beige2);color:var(--ink);font-weight:600;margin-left:4px}
.send svg{width:16px;height:16px}.send:disabled{opacity:.5}
.send.stop{background:var(--ink);color:var(--bg)}
#micBtn.rec{color:#fff;background:var(--red);border-radius:50%;animation:ring 1.4s infinite}
#voiceBar{display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:8px 10px 8px 14px;margin-bottom:8px}
.vstate{display:flex;align-items:center;gap:8px;flex:1;font-weight:600;font-size:14px}
.vstate .dot{width:10px;height:10px;border-radius:50%;background:var(--red);animation:pulse 1s infinite}
#voiceBar[data-s=thinking] .dot,#voiceBar[data-s=transcribing] .dot{background:var(--accent)}
#voiceBar[data-s=speaking] .dot{background:var(--green)}
.wave{display:flex;gap:3px;align-items:center;height:22px}.wave i{width:3px;height:6px;border-radius:2px;background:var(--mute)}
#voiceBar[data-s=recording] .wave i{background:var(--red);animation:wv .9s infinite ease-in-out}
#voiceBar[data-s=speaking] .wave i{background:var(--green);animation:wv .7s infinite ease-in-out}
#voiceBar[data-s=thinking] .wave i,#voiceBar[data-s=transcribing] .wave i{animation:bounce 1.2s infinite}
.wave i:nth-child(2){animation-delay:.1s!important}.wave i:nth-child(3){animation-delay:.2s!important}.wave i:nth-child(4){animation-delay:.3s!important}.wave i:nth-child(5){animation-delay:.4s!important}
#scrim{position:fixed;inset:0;background:rgba(20,15,10,.35);z-index:20}
#drawer{position:fixed;top:0;bottom:0;left:0;width:300px;max-width:84vw;background:var(--card);z-index:21;transform:translateX(-105%);transition:transform .25s ease;display:flex;flex-direction:column;padding:calc(14px + var(--sat)) 12px calc(12px + var(--sab));box-shadow:var(--shadow)}
#drawer.open{transform:none}
.dhead{display:flex;justify-content:space-between;align-items:center;padding:4px 6px 10px;font-size:18px}
#chatList{flex:1;overflow-y:auto}
.ci{display:flex;align-items:center;gap:6px;border-radius:12px;padding:0 4px 0 10px}.ci.on{background:var(--beige)}
.ci button.t{flex:1;text-align:left;border:0;background:none;padding:10px 0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:15px}
.ci small{display:block;color:var(--mute);font-size:12px}
.ci .x{border:0;background:none;color:var(--mute);width:30px;height:30px}
.dfoot{border-top:1px solid var(--line);padding-top:8px}.dlink{display:block;width:100%;text-align:left;border:0;background:none;padding:10px 8px;border-radius:10px;font-size:15px}
#menu{position:fixed;inset:0;z-index:30;background:rgba(20,15,10,.2)}
.mcard{position:absolute;top:calc(60px + var(--sat));left:50%;transform:translateX(-50%);width:min(340px,92vw);background:var(--card);border:1px solid var(--line);border-radius:18px;padding:10px;box-shadow:0 10px 40px rgba(0,0,0,.18)}
.mtitle{font-size:12px;color:var(--mute);text-transform:uppercase;letter-spacing:.04em;padding:6px 8px}
.mopt{display:block;width:100%;text-align:left;border:0;background:none;padding:8px 10px;border-radius:12px}.mopt.on{background:var(--beige)}.mopt small{display:block;color:var(--mute)}
.mrow{display:flex;align-items:center;gap:10px;padding:6px 8px;font-size:14px}.mrow>span{width:80px;color:var(--mute)}.mrow output{width:44px;text-align:right;font-size:13px}
.mrow select{flex:1;font:inherit;padding:4px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
#toast{position:fixed;left:50%;bottom:calc(170px + var(--sab));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:8px 14px;border-radius:999px;font-size:14px;z-index:40;max-width:90vw}
@keyframes blink{50%{opacity:0}}@keyframes pulse{50%{opacity:.35}}@keyframes rise{from{opacity:0;transform:translateY(6px)}}
@keyframes bounce{0%,80%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-5px);opacity:1}}
@keyframes wv{0%,100%{height:5px}50%{height:20px}}@keyframes ring{0%{box-shadow:0 0 0 0 rgba(214,69,69,.5)}100%{box-shadow:0 0 0 12px rgba(214,69,69,0)}}

#call{position:fixed;inset:0;z-index:50;background:radial-gradient(120% 80% at 50% 30%,var(--card),var(--bg));display:flex;flex-direction:column;align-items:center;padding:calc(18px + var(--sat)) 20px calc(28px + var(--sab))}
.ctop{width:100%;display:flex;justify-content:space-between;color:var(--mute);font-weight:600;font-size:14px}
.orbwrap{flex:1;display:grid;place-items:center}
.orb{position:relative;width:190px;height:190px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f7e3bf,#c89a5a 55%,#8a6a3f);box-shadow:0 20px 60px rgba(138,106,63,.45);transition:transform .12s}
.orb i{position:absolute;inset:-14px;border-radius:50%;border:2px solid rgba(200,154,90,.35);opacity:0}
#call[data-s=listening] .orb i{animation:ripple 2.4s infinite}#call[data-s=listening] .orb i:nth-child(2){animation-delay:.8s}#call[data-s=listening] .orb i:nth-child(3){animation-delay:1.6s}
#call[data-s=thinking] .orb{animation:think 1.4s infinite ease-in-out;filter:saturate(.6)}
#call[data-s=speaking] .orb{background:radial-gradient(circle at 35% 30%,#d9f5e4,#5fbf87 55%,#2f9e5b);box-shadow:0 20px 60px rgba(47,158,91,.4)}
#call[data-s=muted] .orb{filter:grayscale(1);opacity:.6}
#cState{font-size:22px;font-weight:700}#cLine{min-height:44px;color:var(--mute);text-align:center;max-width:320px;margin:6px 0 24px;font-size:15px}
.cbtns{display:flex;gap:40px}.cb{width:72px;height:72px;border-radius:50%;border:1px solid var(--line);background:var(--card);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;box-shadow:var(--shadow)}
.cb small{font-size:11px;color:var(--mute)}.cb.on{background:var(--ink);color:var(--bg)}.cb.end{background:var(--red);color:#fff;border:0}.cb.end small{color:#fff}
@keyframes ripple{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.5);opacity:0}}@keyframes think{50%{transform:scale(.93)}}

html,body{overflow:hidden;position:fixed;inset:0;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.md,.bub,textarea{-webkit-user-select:text;user-select:text}
button{touch-action:manipulation;transition:transform .12s cubic-bezier(.2,.8,.2,1),background .15s}
button:active{transform:scale(.94)}
#scroll{overscroll-behavior:contain;will-change:scroll-position}
.skel{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:16px}
.skel i{display:block;height:12px;border-radius:6px;margin:10px 0;background:linear-gradient(90deg,var(--beige) 25%,var(--line) 50%,var(--beige) 75%);background-size:200% 100%;animation:shim 1.2s infinite linear}
.skel i:nth-child(2){width:85%}.skel i:nth-child(3){width:60%}
@keyframes shim{to{background-position:-200% 0}}