:root{
  --bg:#0b0d22; --bg2:#12152f; --glass:rgba(22,26,58,.62); --panel:rgba(255,255,255,.055); --line:rgba(255,255,255,.09);
  --text:#eef0ff; --muted:#9aa1cc; --me1:#7b6cff; --me2:#b06cff; --her:rgba(255,255,255,.075); --accent:#ffd27d; --ok:#6ee7a8;
  --r:20px; --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;color:var(--text);overflow:hidden;
  background:radial-gradient(900px 600px at 85% -10%,#3a2f7a55 0%,transparent 60%),radial-gradient(800px 600px at -10% 110%,#1d4f8a44 0%,transparent 60%),var(--bg);
  font:15.5px/1.65 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}
#stars{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.8}
.hidden{display:none!important}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block}
button{font:inherit;cursor:pointer;border:0;border-radius:14px;padding:.6em 1.2em;color:#fff;
  background:linear-gradient(135deg,var(--me1),var(--me2));transition:transform .15s var(--ease),opacity .2s,background .2s,box-shadow .2s}
button:active{transform:scale(.96)}
button:disabled{opacity:.45;cursor:default}
button.icon,label.icon{margin:0;background:transparent;padding:9px;color:var(--muted);cursor:pointer;border-radius:12px;display:grid;place-items:center;transition:color .2s,background .2s}
button.icon:hover,label.icon:hover{background:var(--panel);color:var(--text)}
button.ghost{background:var(--panel);border:1px solid var(--line);color:var(--text)}
button.ghost:hover{background:rgba(255,255,255,.09)}
button.warn{color:#ff9b9b;border-color:#ff9b9b33}
input,textarea{font:inherit;color:var(--text);background:rgba(0,0,0,.22);border:1px solid var(--line);border-radius:12px;padding:.65em .85em;width:100%;transition:border-color .2s,box-shadow .2s}
input::placeholder,textarea::placeholder{color:#6f76a3}
input:focus,textarea:focus{outline:0;border-color:#8f84ff;box-shadow:0 0 0 3px #7b6cff33}
label{display:block;margin:.7em 0;font-size:.88em;color:var(--muted)}
label input,label textarea{margin-top:.35em}
label.inline{display:flex;gap:.55em;align-items:center;color:var(--text)}
label.inline input{width:auto;accent-color:var(--me1)}
.muted{color:var(--muted)} .small{font-size:.84em} .err{color:#ff9b9b;min-height:1.2em;margin:.6em 0 0;font-size:.9em}
.row{display:flex;gap:.6em;align-items:flex-end}.row>*{flex:1}.row button{flex:0 0 auto}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-thumb{background:#ffffff1f;border-radius:6px}

/* 门 */
.gate{position:fixed;inset:0;display:grid;place-items:center;z-index:2;padding:1.2em;overflow-y:auto}
.card{width:min(380px,100%);background:var(--glass);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid var(--line);border-radius:28px;padding:2.2em 1.8em 1.6em;text-align:center;box-shadow:0 30px 80px #0007;animation:rise .5s var(--ease)}
.card form{text-align:left;margin-top:1em}.card button{width:100%;margin-top:1em;padding:.75em;font-weight:600;box-shadow:0 8px 24px #7b6cff44}
.card h1{margin:.7em 0 .1em;font-weight:650;font-size:1.5em;letter-spacing:.02em}
.card .muted{text-align:center;margin:.2em 0 .6em}

/* 头像 */
.orb{--c1:#8fa2ff;--c2:#c79bff;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;position:relative;
  background:radial-gradient(circle at 32% 28%,#ffffffb0 0,transparent 38%),linear-gradient(135deg,var(--c1),var(--c2));
  box-shadow:0 0 18px color-mix(in srgb,var(--c1) 70%,transparent),inset 0 -4px 10px #0002;animation:breathe 4.5s ease-in-out infinite;transition:box-shadow .6s}
.orb.big{width:92px;height:92px;margin:0 auto;font-size:1.55em;box-shadow:0 0 50px color-mix(in srgb,var(--c1) 60%,transparent)}
.orb .face{color:#1b1f45;font-weight:700;font-size:.72em;letter-spacing:-1px;white-space:nowrap}
.orb.big .face{font-size:1em}
.orb.talking{animation:talk .45s ease-in-out infinite alternate}
.orb[data-mood=happy]{--c1:#ffd27d;--c2:#ff9ec7}
.orb[data-mood=excited]{--c1:#ffb36b;--c2:#ff6fae}
.orb[data-mood=shy]{--c1:#ffb3c8;--c2:#d7a1ff}
.orb[data-mood=sad]{--c1:#7aa0d8;--c2:#5b6aa8}
.orb[data-mood=worried]{--c1:#9fb6d9;--c2:#8c8fd6}
.orb[data-mood=pouty]{--c1:#ff8f8f;--c2:#ffb36b}
.orb[data-mood=sleepy]{--c1:#7c84c9;--c2:#3f467f}
@keyframes breathe{50%{transform:scale(1.05)}}
@keyframes talk{to{transform:scale(1.1)}}
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.98)}}

/* 主界面 */
main{position:relative;z-index:1;display:flex;flex-direction:column;height:100dvh;max-width:780px;margin:0 auto}
header{display:flex;align-items:center;gap:.75em;margin:.6em .7em 0;padding:.55em .6em .55em .75em;margin-top:max(.6em,env(safe-area-inset-top));
  background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:20px;box-shadow:0 10px 30px #0004}
.who{display:flex;flex-direction:column;line-height:1.3;flex:1;min-width:0}
.who strong{font-size:1.02em;font-weight:650}
.who small{color:var(--muted);font-size:.76em;display:flex;align-items:center;gap:.4em}
.dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok);display:inline-block}
main.busy .dot{background:var(--accent);box-shadow:0 0 8px var(--accent);animation:blink 1s infinite}
.actions{display:flex;gap:2px}
#ttsBtn .wave{display:none}#ttsBtn.on .wave{display:block}#ttsBtn.on .mute{display:none}#ttsBtn.on{color:var(--accent)}

.list{flex:1;overflow-y:auto;padding:1.1em .9em .6em;display:flex;flex-direction:column;gap:.35em;scroll-behavior:smooth;
  mask-image:linear-gradient(to bottom,transparent 0,#000 18px,#000 calc(100% - 10px),transparent 100%)}
.line{display:flex;align-items:flex-end;gap:.55em;max-width:100%;animation:pop .3s var(--ease)}
.line.user{flex-direction:row-reverse}
.line .av{width:28px;height:28px;font-size:.8em;animation:none;box-shadow:none;visibility:hidden}
.line.assistant.last .av{visibility:visible}
.line.user .av{display:none}
.stack{display:flex;flex-direction:column;max-width:min(78%,560px);min-width:0}
.line.user .stack{align-items:flex-end}
.msg{padding:.6em 1em;border-radius:var(--r);white-space:pre-wrap;word-break:break-word}
.line.user .msg{background:linear-gradient(135deg,var(--me1),var(--me2));border-bottom-right-radius:6px;box-shadow:0 6px 18px #7b6cff30}
.line.assistant .msg{background:var(--her);border:1px solid var(--line);border-bottom-left-radius:6px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.line.proactive .msg::before{content:"✨ 主动找你";color:var(--accent);font-size:.72em;display:block;margin-bottom:.15em;letter-spacing:.05em}
.line .time{font-size:.68em;color:#7d84b3;margin:.2em .5em 0}
.line:not(.last) .time{display:none}
.line + .line.user,.line + .line.assistant{margin-top:0}
.line.user + .line.assistant,.line.assistant + .line.user{margin-top:.7em}
.msg .img-tag{font-size:.8em;opacity:.8}
.msg img{max-width:min(240px,100%);border-radius:14px;display:block;margin:.1em 0 .35em}
.msg .typing::after{content:"";display:inline-block;width:2px;height:1em;background:currentColor;vertical-align:-2px;margin-left:2px;animation:blink 1s steps(1) infinite}
.msg .thinking{display:inline-flex;gap:4px;padding:.35em 0}
.msg .thinking i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:bounce 1.2s infinite ease-in-out}
.msg .thinking i:nth-child(2){animation-delay:.15s}.msg .thinking i:nth-child(3){animation-delay:.3s}
.day{align-self:center;color:var(--muted);font-size:.72em;margin:.9em 0 .4em;padding:.15em .8em;border-radius:999px;background:var(--panel)}
.sys{align-self:center;color:#ffb0b0;font-size:.82em;background:#ff6b6b14;border:1px solid #ff6b6b33;padding:.3em .9em;border-radius:999px;margin:.4em 0}
@keyframes pop{from{opacity:0;transform:translateY(8px)}}
@keyframes blink{50%{opacity:0}}
@keyframes bounce{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-5px);opacity:1}}

.chips{display:flex;flex-wrap:wrap;gap:.45em;justify-content:center;padding:0 1em .4em}
.chips button{background:var(--panel);border:1px solid var(--line);color:var(--text);padding:.4em .9em;font-size:.85em;border-radius:999px}
.chips button:hover{border-color:#8f84ff88;background:#7b6cff22}

.composer{padding:.4em .7em .7em;padding-bottom:max(.7em,env(safe-area-inset-bottom))}
.pill{display:flex;align-items:flex-end;gap:2px;padding:5px 5px 5px 6px;background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--line);border-radius:24px;box-shadow:0 10px 30px #0005;transition:border-color .2s,box-shadow .2s}
.pill:focus-within{border-color:#8f84ff88;box-shadow:0 10px 30px #0005,0 0 0 3px #7b6cff22}
.composer textarea{resize:none;max-height:140px;min-height:40px;background:transparent;border:0;box-shadow:none!important;padding:.5em .5em;flex:1;line-height:1.5}
#sendBtn{width:40px;height:40px;padding:0;border-radius:50%;display:grid;place-items:center;flex:0 0 auto}
#sendBtn svg{stroke-width:2.2}
#micBtn.on{color:#ff6f8e;background:#ff6f8e22;animation:breathe 1s infinite}
#imgPreview{position:relative;align-self:center;margin:0 .2em}
#imgPreview img{height:36px;border-radius:9px;display:block}
#imgPreview button{position:absolute;top:-7px;right:-7px;width:18px;height:18px;padding:0;font-size:.65em;border-radius:50%;line-height:18px;background:#000c}

/* 抽屉 */
.scrim{position:fixed;inset:0;z-index:4;background:#05061399;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:fade .2s}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);z-index:5;background:linear-gradient(180deg,#171b3d,#10132c);border-left:1px solid var(--line);
  padding:1.1em 1.3em calc(1.3em + env(safe-area-inset-bottom));overflow-y:auto;box-shadow:-30px 0 80px #000a;animation:slide .28s var(--ease)}
.drawer-head{display:flex;justify-content:space-between;align-items:center;position:sticky;top:-1.1em;margin:-1.1em -1.3em .4em;padding:1em 1.3em .6em;background:#171b3dee;backdrop-filter:blur(8px);z-index:1}
.drawer h2{margin:0;font-size:1.12em;font-weight:650}
fieldset{border:1px solid var(--line);border-radius:16px;margin:1.1em 0;padding:.5em 1em .9em;background:#ffffff05}
legend{color:var(--accent);padding:0 .45em;font-size:.85em;letter-spacing:.04em}
.summary{background:linear-gradient(135deg,#7b6cff1f,#b06cff12);border:1px solid #8f84ff33;border-radius:14px;padding:.75em .95em;font-size:.88em;color:#c9cdf0;margin:.7em 0}
.summary:empty{display:none}
.mem-list{list-style:none;padding:0;margin:.7em 0}
.mem-list li{display:flex;gap:.6em;align-items:flex-start;padding:.6em .7em;margin-bottom:.4em;font-size:.9em;background:var(--panel);border:1px solid var(--line);border-radius:12px}
.mem-list li.muted{justify-content:center;background:none;border-style:dashed}
.mem-list li span{flex:1}
.mem-list li em{font-style:normal;color:var(--accent);font-size:.72em;border:1px solid #ffd27d44;background:#ffd27d10;border-radius:6px;padding:.05em .4em;white-space:nowrap;margin-top:.2em}
.mem-list li button{padding:0 .3em;background:transparent;color:var(--muted);opacity:.5}
.mem-list li:hover button{opacity:1}
.danger{display:flex;flex-direction:column;gap:.5em;margin:1.4em 0 .4em;padding-top:1em;border-top:1px solid var(--line)}
#setForm>button{width:100%;margin-top:.8em;padding:.7em;font-weight:600}
#consolidateBtn{width:100%;margin-top:.6em}
@keyframes slide{from{transform:translateX(100%)}}
@keyframes fade{from{opacity:0}}

@media (max-width:560px){
  header{margin:.4em .45em 0;margin-top:max(.4em,env(safe-area-inset-top));border-radius:18px}
  .stack{max-width:84%}
  .list{padding:1em .6em .5em}
  .composer{padding:.3em .45em .5em;padding-bottom:max(.5em,env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* TA 的画 */
.msg.art{padding:5px;background:var(--her)}
.msg.art img{width:min(260px,62vw);max-width:none;aspect-ratio:1;object-fit:cover;border-radius:15px;margin:0;cursor:zoom-in;display:block;background:#ffffff0d}
.msg.art span:empty{display:none}
.msg.painting{width:min(260px,62vw);aspect-ratio:1;display:grid;place-items:center;color:var(--muted);font-size:.9em;
  background:linear-gradient(110deg,#ffffff08 30%,#ffffff1a 50%,#ffffff08 70%) 0 0/250% 100%;animation:shimmer 1.6s linear infinite}
.msg.painting::before{content:"🎨";font-size:1.8em;display:block;text-align:center;margin-bottom:.2em}
@keyframes shimmer{to{background-position:-250% 0}}