*{box-sizing:border-box}html,body{margin:0;height:100%}
body{background:linear-gradient(170deg,#4a1f3d 0%,#2a1024 45%,#170914 100%);color:#e8e9f0;font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;display:flex;flex-direction:column;height:100dvh}
header{display:flex;align-items:center;gap:12px;padding:10px 14px;padding-top:max(10px,env(safe-area-inset-top));transition:all .6s}
#orb{width:52px;height:52px;flex:none;transition:all .7s cubic-bezier(.2,.8,.2,1)}
body.empty #orb{position:fixed;left:50%;top:24vh;width:min(62vw,280px);height:min(62vw,280px);transform:translate(-50%,-50%)}
.brand{display:flex;flex-direction:column;line-height:1.2}.brand span{font-size:12px;color:#8f93b0}
body.empty .brand{opacity:0}
#newchat{margin-left:auto;background:#ffffff10;border:1px solid #ffffff22;color:#dfe1f5;border-radius:999px;padding:8px 14px;font-size:14px;cursor:pointer}
#newchat:hover{background:#ffffff1c}
main{flex:1;overflow-y:auto;padding:8px 14px 16px;max-width:820px;width:100%;margin:0 auto;scroll-behavior:smooth}
#hero{text-align:center;margin-top:calc(24vh + min(31vw,140px) - 10px)}#hero h1{font-size:clamp(22px,5vw,32px);margin:.3em 0;background:linear-gradient(90deg,#9db4ff,#c79bff,#7ff0e0);-webkit-background-clip:text;background-clip:text;color:transparent}
#hero p{color:#8f93b0;margin:0 0 18px}.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.chips button{background:#ffffff0d;border:1px solid #ffffff1f;color:#cfd2ea;border-radius:14px;padding:9px 13px;font-size:14px;cursor:pointer}
.msg{display:flex;margin:10px 0;animation:in .3s ease}.msg.user{justify-content:flex-end}
.b{max-width:85%;padding:10px 14px;border-radius:18px;word-wrap:break-word;overflow-wrap:anywhere}
.user .b{background:linear-gradient(135deg,#5b5cf0,#8b4ff0);border-bottom-right-radius:6px}
.bot .b{background:#ffffff0c;border:1px solid #ffffff17;border-bottom-left-radius:6px}
.err .b{background:#ff4d6d1a;border-color:#ff4d6d55}
.b p{margin:.3em 0}.b code{background:#0006;padding:1px 5px;border-radius:5px;font-size:.9em}.b pre{background:#0008;padding:10px;border-radius:10px;overflow:auto}.b ul{margin:.3em 0;padding-left:1.2em}
.typing span{display:inline-block;width:7px;height:7px;margin:0 2px;border-radius:50%;background:#a9b0ff;animation:bl 1.2s infinite}.typing span:nth-child(2){animation-delay:.2s}.typing span:nth-child(3){animation-delay:.4s}
@keyframes bl{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-4px)}}
@keyframes in{from{opacity:0;transform:translateY(6px)}}
form{display:flex;gap:8px;align-items:flex-end;max-width:820px;width:calc(100% - 20px);margin:0 auto 10px;margin-bottom:max(10px,env(safe-area-inset-bottom));background:#12131c;border:1px solid #ffffff22;border-radius:22px;padding:6px 6px 6px 14px;box-shadow:0 0 30px #6a5cff22}
textarea{flex:1;background:none;border:0;color:inherit;font:inherit;font-size:16px;resize:none;outline:none;max-height:160px;padding:8px 0}
#s{width:42px;height:42px;border-radius:50%;border:0;background:linear-gradient(135deg,#6d7bff,#b05cff);color:#fff;font-size:18px;cursor:pointer;flex:none}#s:disabled{opacity:.4}

.ctl{margin-left:auto;display:flex;gap:6px;align-items:center}.ctl+#newchat{margin-left:0}
#lang{background:#ffffff10;color:#dfe1f5;border:1px solid #ffffff22;border-radius:999px;padding:7px 8px;font-size:14px}#lang option{background:#12131c}
.ic{width:38px;height:38px;border-radius:50%;border:1px solid #ffffff22;background:#ffffff10;color:#fff;font-size:16px;cursor:pointer;flex:none}
.ic.on{background:linear-gradient(135deg,#6d7bff,#b05cff);border-color:transparent}
#mic{width:42px;height:42px;align-self:flex-end}#mic.rec{background:#ff3d71;animation:pr 1.2s infinite}
@keyframes pr{0%{box-shadow:0 0 0 0 #ff3d7188}100%{box-shadow:0 0 0 14px #ff3d7100}}
#note{max-width:820px;margin:0 auto 6px;padding:8px 14px;font-size:13px;color:#ffcf8a;text-align:center}
@media(max-width:480px){#newchat{padding:8px 10px;font-size:0}#newchat::before{content:"＋";font-size:16px}.brand span{display:none}}
form{padding-left:6px}

#vbox{max-width:820px;margin:0 auto 6px;padding:10px 14px;background:#ffffff0d;border:1px solid #ffffff1f;border-radius:16px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:14px}#vbox select,#vbox button{background:#ffffff14;color:#e8e9f0;border:1px solid #ffffff2a;border-radius:10px;padding:5px 8px}#vbox select option{background:#12131c}#vbox input{vertical-align:middle;accent-color:#b05cff}
@media(max-width:480px){.ctl{gap:4px}.ic{width:34px;height:34px;font-size:14px}}

#bokeh{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
#bokeh i{position:absolute;border-radius:50%;filter:blur(8px);opacity:.35;animation:fl 18s ease-in-out infinite alternate}
@keyframes fl{to{transform:translate(30px,-40px) scale(1.15)}}
#orb{position:relative}#orb .mz,#orb .glow{position:absolute;inset:0}
#orb .m{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .12s}#orb .m.on{opacity:1}
#orb .glow{border-radius:50%;background:radial-gradient(circle at 50% 60%,#ffb07a88,#ff7fae33 45%,transparent 70%);transform:scale(1.15);transition:all .6s;opacity:.6}
.mz{transform-origin:50% 92%;animation:breath 3.4s ease-in-out infinite;filter:drop-shadow(0 8px 14px #00000055)}
@keyframes breath{50%{transform:scale(1.03,.975)}}
body[data-mode=listen] .mz{animation:lean 1.6s ease-in-out infinite}@keyframes lean{0%,100%{transform:translateY(3%) scale(1.07)}50%{transform:translateY(4%) scale(1.1)}}
body[data-mode=listen] .glow{background:radial-gradient(circle at 50% 60%,#7ff0d0aa,#5fc8ff44 45%,transparent 70%);opacity:1;animation:gp 1.2s ease-in-out infinite}
body[data-mode=think] .mz{animation:tilt 2s ease-in-out infinite}@keyframes tilt{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(5deg) translateY(-2%)}}
body[data-mode=think] .glow{background:radial-gradient(circle at 50% 60%,#c9a0ffaa,#ff8fd044 45%,transparent 70%);opacity:1;animation:gp 1.6s ease-in-out infinite}
@keyframes gp{50%{transform:scale(1.3);opacity:.7}}
body[data-mode=speak] .mz{animation:bounce .5s ease-in-out infinite}@keyframes bounce{50%{transform:translateY(-5%) scale(1.03,.97)}}
body[data-mode=speak] .glow{opacity:.9}
@media (prefers-reduced-motion:reduce){.mz,.glow,#bokeh i{animation:none!important}}
#vbox[hidden]{display:none}.brand b{white-space:nowrap}@media(max-width:400px){.brand{display:none}}
/* v2: bigger photo mascot + soft neon glow (same palette) */
#orb{width:72px;height:72px}
body.empty #orb{width:min(78vw,380px);height:min(78vw,380px);top:26vh}
#hero{margin-top:calc(26vh + min(39vw,190px) - 6px)}
#orb .mzi{position:absolute;inset:0;transform-origin:50% 95%;will-change:transform}
#orb .sp{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .26s ease;filter:drop-shadow(0 10px 18px #0007) drop-shadow(0 0 14px #ff9ec455)}
#orb .sp.on{opacity:1}
#orb .glow{background:radial-gradient(circle at 50% 62%,#ffb07a99,#ff7fae44 42%,#c79bff22 60%,transparent 72%);transform:scale(1.35);filter:blur(4px)}
body.empty #orb .glow{animation:gp2 5s ease-in-out infinite}
@keyframes gp2{50%{opacity:.85;transform:scale(1.45)}}
#orb::after{content:"";position:absolute;left:18%;right:18%;bottom:2%;height:9%;border-radius:50%;background:radial-gradient(ellipse,#0008,transparent 70%);z-index:-1}
.b,.chips button,#f,#newchat,header .ic,#lang{box-shadow:0 0 0 1px #ff9ec41a,0 0 14px #ff7fae1f,0 0 28px #c79bff14;transition:box-shadow .3s}
.bot .b{border-color:#ff9ec42e}.user .b{box-shadow:0 0 16px #8b4ff055,0 0 30px #5b5cf033}
.chips button:hover,#newchat:hover,header .ic:hover{box-shadow:0 0 0 1px #ff9ec455,0 0 18px #ff7fae55,0 0 36px #c79bff33}
#f:focus-within{box-shadow:0 0 0 1px #ff9ec466,0 0 20px #ff7fae44,0 0 40px #c79bff2e}
/* v3: big spider + subtitle under the language/voice controls */
body.empty #orb{width:min(88vw,470px);height:min(88vw,470px);top:30vh}
#hero{margin-top:calc(30vh + min(44vw,235px) - 4px)}
body:not(.empty) header{position:relative;align-items:flex-start;min-height:156px;padding-bottom:4px}
body:not(.empty) #orb{width:156px;height:156px;margin:-8px 0 0 -8px}
body:not(.empty) .brand{display:flex!important;opacity:1;position:absolute;left:150px;top:96px;right:8px;pointer-events:none}
body:not(.empty) .brand span{display:block!important}
.brand #status{font-size:11px}
header .ctl{position:relative}
header .ctl .sub{position:absolute;top:calc(100% + 6px);right:0;font-size:13px;font-weight:600;color:#ffb3d1;text-shadow:0 0 10px #ff7fae66;white-space:nowrap;pointer-events:none}
@media (min-width:700px){body:not(.empty) header{min-height:214px}body:not(.empty) #orb{width:215px;height:215px}body:not(.empty) .brand{left:215px;top:80px}.brand b{font-size:20px}header .ctl .sub{font-size:15px}}

/* dark neon theme (opt-in) */
html.dark body{background:radial-gradient(ellipse at 20% 0%,#2a0b2e 0%,transparent 55%),radial-gradient(ellipse at 90% 100%,#0b1a3a 0%,transparent 55%),linear-gradient(170deg,#12060f 0%,#0a0410 55%,#05020a 100%)}
html.dark #bokeh i{opacity:.35;filter:saturate(1.6)}
html.dark .bot .b{background:#0d0814cc;border-color:#ff5fb055;box-shadow:0 0 0 1px #ff5fb033,0 0 16px #ff3fa033,0 0 34px #b65cff22}
html.dark .user .b{background:linear-gradient(135deg,#6a3cff,#c03cff);box-shadow:0 0 18px #b05cff88,0 0 40px #ff3fa044}
html.dark .chips button,html.dark #newchat,html.dark header .ic,html.dark #lang{background:#0d0814cc;border-color:#ff5fb055;box-shadow:0 0 0 1px #ff5fb03a,0 0 14px #ff3fa03a,0 0 30px #7f5cff26;color:#ffe3f1}
html.dark #f{background:#0b0712e6;box-shadow:0 0 0 1px #ff5fb055,0 0 22px #ff3fa044,0 0 44px #7f5cff33}
html.dark #orb .glow{background:radial-gradient(circle at 50% 62%,#ff7fae88,#c050ff55 42%,#38c6ff22 62%,transparent 74%)}
html.dark #orb .sp{filter:drop-shadow(0 10px 18px #000a) drop-shadow(0 0 18px #ff5fb077)}
html.dark #hero h1{text-shadow:0 0 24px #c79bff55}
html.dark header .ctl .sub{color:#ff9ed0;text-shadow:0 0 12px #ff3fa0aa}
body:not(.empty) #orb{position:absolute;left:4px;top:2px;margin:0}
body:not(.empty) header .ctl{margin-left:auto}
@media(max-width:480px){header .ic,#lang{height:34px;min-width:34px;padding:0 6px;font-size:14px}header .ctl{gap:4px}#newchat{padding:6px 9px}}