:root {color-scheme:light dark;--bg:light-dark(#f8f2e8,#28241f);--paper:light-dark(#fffdf8,#353029);--ink:light-dark(#443b33,#f4eadb);--muted:light-dark(#77695a,#c1b2a0);--pine:light-dark(#405f50,#b7cbb7);--clay:light-dark(#a65b40,#dfac8d);--on-clay:light-dark(#fffdf8,#30231d);--soft:light-dark(#f0e1d1,#493b30);--line:light-dark(#e2d6c5,#584c3e);--glow:light-dark(#f4e2c7,#48392a);--danger:light-dark(#923f36,#f0b4a9);font-family:"PingFang SC","Microsoft YaHei",sans-serif;font-size:18px;line-height:1.8;color:var(--ink);background:var(--bg)}
* {box-sizing:border-box}
[hidden] {display:none!important}
body {margin:0}
button,input,textarea {font:inherit;line-height:1.8}
button,a,input,textarea {-webkit-tap-highlight-color:transparent}
button {cursor:pointer}
button:disabled {cursor:default;opacity:0.6}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible {outline:2px solid var(--pine);outline-offset:3px}
p,h1,h2,h3 {margin:0;font-size:18px;line-height:1.8}
h1,h2,h3,strong {font-weight:500}
a {color:var(--pine);text-underline-offset:4px}
#app {max-width:500px;min-height:100dvh;margin:auto;background:radial-gradient(ellipse at 100% 8%,var(--glow),transparent 52%),var(--bg)}
.header {display:flex;gap:10px;align-items:center;position:sticky;top:0;z-index:10;padding:15px 18px;background:var(--paper);border-bottom:1px solid var(--line)}
.brand {flex:1;min-width:0;display:flex;flex-direction:column;font-weight:500}
.secondary {font-size:16px;color:var(--muted);font-weight:400}
.text-button {padding:5px;min-height:44px;min-width:44px;background:transparent;border:0;color:var(--pine);border-radius:8px}
main {padding:25px 20px max(24px,env(safe-area-inset-bottom));min-height:calc(100dvh - 90px);display:flex;flex-direction:column;gap:23px;overflow-wrap:anywhere}
.welcome {display:flex;align-items:center;gap:18px}
.avatar {display:block;width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;background:var(--soft)}
.welcome .avatar {width:72px;height:72px;border:3px solid var(--paper)}
.welcome-copy {flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.welcome-note {white-space:pre-line}
.actions {display:flex;flex-direction:column;gap:10px}
.shortcuts {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.button {display:flex;align-items:center;justify-content:center;gap:8px;min-height:54px;padding:11px 13px;width:100%;border:1px solid var(--line);border-radius:16px;background:var(--paper);color:var(--ink);font-size:18px;font-weight:500;text-decoration:none;text-align:center;white-space:normal}
.primary {background:var(--clay);color:var(--on-clay);border-color:transparent}
.quiet {background:transparent;border-color:transparent;color:var(--pine);font-weight:400}
.danger {color:var(--danger)}
.form {display:flex;flex-direction:column;gap:11px}
input,textarea {width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:17px;background:var(--paper);color:var(--ink);font-size:18px;min-width:0}
textarea {min-height:112px;resize:vertical}
textarea::placeholder,input::placeholder {color:var(--muted);opacity:1}
.composer {display:grid;grid-template-columns:minmax(0,1fr) 68px;gap:10px;align-items:end;position:sticky;bottom:0;z-index:5;background:var(--bg);padding-top:15px;padding-bottom:max(12px,env(safe-area-inset-bottom));border-top:1px solid var(--line);margin-top:auto}
.composer textarea {min-height:76px;padding:12px 14px}
.composer .button {padding:10px 7px}
.composer .notice,.composer .reference {grid-column:1/-1}
.timeline {display:flex;flex-direction:column;gap:23px}
.user-message {align-self:flex-end;max-width:94%;background:var(--soft);border-radius:21px 5px 21px 21px;padding:16px 18px;white-space:pre-wrap}
.assistant-message {display:flex;flex-direction:column;gap:8px;min-width:0}
.assistant-id {display:flex;align-items:center;gap:10px}
.bubble {background:var(--paper);border:1px solid var(--line);border-radius:5px 21px 21px 21px;padding:18px;display:flex;flex-direction:column;gap:15px;min-width:0}
.message-text {white-space:pre-wrap}
.message-tools {display:flex;flex-wrap:wrap;gap:5px 14px}
.message-tools button,.message-tools a {background:transparent;border:0;color:var(--pine);font-size:18px;min-height:44px;padding:5px 0;text-decoration:none;font-weight:400}
.notice {font-size:16px;color:var(--danger);white-space:pre-wrap}
.reference {display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:16px;color:var(--muted)}
.record-list {display:flex;flex-direction:column;gap:12px}
.record-card {text-align:left;align-items:flex-start;flex-direction:column;padding:17px;gap:7px}
.record-content {white-space:pre-wrap}
.record-panel {background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:17px;white-space:pre-wrap}
.divider {border-top:1px solid var(--line);padding-top:17px;display:flex;flex-direction:column;gap:12px}
.spacer {flex:1;min-height:12px}
.footer-note {text-align:center;color:var(--muted);font-size:16px}
.sr-only {position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media(min-width:501px) {#app {border-left:1px solid var(--line);border-right:1px solid var(--line)}}
@media(max-width:359px) {.header {padding:14px}.welcome {gap:12px}.welcome .avatar {width:64px;height:64px}main {padding-left:16px;padding-right:16px}.bubble {padding:15px}.composer {grid-template-columns:minmax(0,1fr) 60px;gap:8px}}
@media(prefers-reduced-motion:reduce) {* {scroll-behavior:auto!important}}