:root{--clay:#b9684f;--clay-dark:#a6503e;--ink:#242936;--muted:#959aa3;--line:#ead6ce;--paper:#fffdfb;--bubble:#f6efec}*{box-sizing:border-box}html,body{margin:0;min-height:100%;height:100%;font-family:"Songti SC","Noto Serif CJK SC","Source Han Serif SC",serif;color:var(--ink);background:#f9f6f3}button,textarea{font:inherit}button{cursor:pointer}.shell{width:min(100%,940px);height:100dvh;min-height:400px;margin:auto;background:var(--paper);display:flex;flex-direction:column;box-shadow:0 8px 40px #533c2d0d} .hero{height:132px;flex:none;background:#ba6b52;position:relative;overflow:hidden;color:white}.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,#b9654c,#c07a61);opacity:.8}.hero-content{position:relative;z-index:2;height:100%;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:22px 26px} .hero h1{font-size:clamp(23px,3.5vw,32px);font-weight:400;letter-spacing:1px;margin:9px 0 7px;white-space:nowrap}.hero p{font-size:clamp(13px,2vw,18px);margin:0;color:#fff3eb;letter-spacing:.5px}.botanical{position:absolute;z-index:1;right:-70px;bottom:-80px;width:320px;height:250px;object-fit:contain;opacity:.65;pointer-events:none}.new-chat{color:white;background:#ffffff0e;border:1px solid white;border-radius:100px;padding:10px 15px;white-space:nowrap;font-size:15px;z-index:3}.new-chat:hover{background:#ffffff26}.conversation{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}.messages{max-width:760px;margin:auto;padding:22px 24px 12px;display:flex;flex-direction:column;gap:18px}.message{display:grid;grid-template-columns:32px 1fr;gap:12px;align-items:start}.avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:16px;flex:none}.user .avatar{background:#eee1dc;color:#b76e55}.assistant .avatar{background:#5c806c;color:white}.message-body{min-width:0}.text{font-family:system-ui,-apple-system,"PingFang SC","Noto Sans CJK SC",sans-serif;font-size:clamp(15px,1.6vw,18px);line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere}.user .text{background:var(--bubble);border-radius:17px;padding:10px 13px;display:inline-block}.assistant .text{padding:4px 1px}.time{font-family:system-ui,sans-serif;color:var(--muted);font-size:11px;margin:6px 0 0 2px}.empty{text-align:center;margin:14vh 20px 0}.empty-mark{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;margin:auto;background:#5c806c;color:white;font-size:30px}.empty h2{font-weight:400;font-size:25px;margin:22px 0 6px}.empty p{color:#8e939a;font-size:15px}.composer-area{flex:none;background:linear-gradient(#fffdfbdb,#fffdfb 20%);padding:8px 24px max(16px,env(safe-area-inset-bottom))}.prompts{max-width:760px;margin:0 auto 10px;display:flex;flex-direction:column;gap:7px}#prompts[hidden]{display:none}.prompts button{width:100%;min-width:0;border:1px solid var(--line);background:white;border-radius:12px;padding:9px 12px;font-size:13px;line-height:1.55;color:var(--ink);text-align:left;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.prompts button:hover{background:#faf1ec}.composer{max-width:760px;margin:auto;border:1px solid #eee0da;border-radius:26px;display:flex;align-items:flex-end;padding:5px 5px 5px 14px;box-shadow:0 10px 28px #5a382a0c;background:white}.composer:focus-within{border-color:var(--clay)}textarea{border:0;outline:0;resize:none;flex:1;min-width:0;max-height:120px;min-height:34px;padding:7px 2px;background:transparent;color:var(--ink);font-family:system-ui,sans-serif;font-size:16px;line-height:1.4}textarea::placeholder{color:#999da4}#send{border:0;border-radius:50px;min-width:48px;height:38px;background:var(--clay);color:white;font-family:system-ui,sans-serif;font-size:14px}#send:disabled{opacity:.5;cursor:default}.status{text-align:center;font-family:system-ui,sans-serif;color:#989da6;font-size:11px;min-height:15px;margin:5px 0 0}.status.error{color:#b44736}@media(max-width:600px){.hero{height:104px}.hero-content{padding:14px 16px;align-items:flex-start}.hero h1{font-size:21px;margin:9px 0 6px}.hero p{font-size:11px}.new-chat{font-size:12px;padding:7px 9px;margin-top:2px}.botanical{width:190px;right:-60px;bottom:-80px;opacity:.45}.messages{padding:16px 14px 7px;gap:15px}.message{grid-template-columns:28px 1fr;gap:10px}.avatar{height:28px;width:28px;font-size:14px}.text{font-size:15px;line-height:1.6}.user .text{padding:8px 11px}.composer-area{padding:5px 13px max(8px,env(safe-area-inset-bottom))}.prompts{gap:6px;margin-bottom:8px}.prompts button{font-size:12px;padding:8px 10px}.empty{margin-top:10vh}}@media(max-width:390px){.hero h1{font-size:19px}.hero p{font-size:12px}.new-chat{font-size:11px}.prompts button{font-size:11px;padding:7px 9px}}

/* Each public character page has its own visual identity. */
.shell[data-character="yan"]{--clay:#536f5d;--clay-dark:#405a49;--line:#d5e0d4;--paper:#fbfcf8;--bubble:#eef3ec;background:#f4f7f1}.shell[data-character="yan"] .hero{background:#536f5d}.shell[data-character="yan"] .hero:before{background:linear-gradient(110deg,#405d4b,#78927b)}.shell[data-character="yan"] .empty-mark,.shell[data-character="yan"] .assistant .avatar{background:#536f5d}.shell[data-character="yan"] .user .text{border-radius:4px 17px 17px 17px}
.shell[data-character="bao"]{--clay:#9a6335;--clay-dark:#7c4e2b;--line:#ead9bc;--paper:#fffaf1;--bubble:#f5eddf;background:#f6f0e5}.shell[data-character="bao"] .hero{background:#83552f}.shell[data-character="bao"] .hero:before{background:linear-gradient(110deg,#754625,#b7834b)}.shell[data-character="bao"] .empty-mark,.shell[data-character="bao"] .assistant .avatar{background:#83552f}.shell[data-character="bao"] .user .text{border-radius:17px 4px 17px 17px}
.shell[data-character="zhang"]{--clay:#456c82;--clay-dark:#345466;--line:#ccdae3;--paper:#f7fbfd;--bubble:#eaf2f6;background:#eff5f8}.shell[data-character="zhang"] .hero{background:#355b70}.shell[data-character="zhang"] .hero:before{background:linear-gradient(110deg,#2d4c61,#668ba0)}.shell[data-character="zhang"] .empty-mark,.shell[data-character="zhang"] .assistant .avatar{background:#355b70}.shell[data-character="zhang"] .user .text{border-radius:17px 17px 4px 17px}

/* Keep speaker sides unmistakable and let suggested prompts blend into the page. */
.message.user{grid-template-columns:minmax(0,1fr) 32px}
.message.user .avatar{grid-column:2;grid-row:1;background:#e7e9e7;color:#5d655f}
.message.user .message-body{grid-column:1;grid-row:1;width:100%;text-align:right}
.message.user .text{max-width:100%;text-align:left}
.message.user .time{margin:6px 2px 0 0;text-align:right}
.prompts{gap:4px;margin-bottom:8px}
.prompts button{border-color:color-mix(in srgb,var(--clay) 12%,transparent);background:transparent;border-radius:8px;padding:5px 9px;font-size:11px;line-height:1.45;color:color-mix(in srgb,var(--ink) 72%,transparent)}
.prompts button:hover{background:color-mix(in srgb,var(--clay) 5%,transparent);border-color:color-mix(in srgb,var(--clay) 20%,transparent)}
@media(max-width:600px){.message.user{grid-template-columns:minmax(0,1fr) 28px}.prompts{gap:3px;margin-bottom:6px}.prompts button{font-size:10px;padding:4px 8px}}

/* Continue the conversation background behind prompts; user messages remain unfilled. */
.composer-area{background:inherit}
.prompts{background:transparent}
.prompts button{background:transparent;border-color:transparent;font-size:13px;padding:7px 10px;color:var(--ink)}
.prompts button:hover{background:color-mix(in srgb,var(--clay) 6%,transparent);border-color:transparent}
.message.user .text{background:transparent;border-radius:0;padding:0}
.prompts button{display:flex;align-items:flex-start;gap:8px}
.prompt-icon{display:grid;place-items:center;flex:0 0 18px;width:18px;height:18px;margin-top:1px;border-radius:50%;background:color-mix(in srgb,var(--clay) 12%,transparent);color:var(--clay);font:600 12px/1 system-ui,sans-serif}
.prompt-label{min-width:0;flex:1}
@media(max-width:600px){.prompts button{font-size:12px;padding:6px 9px}}

/* Give each side of the conversation its own raised message card. */
.message.assistant .text{display:block;width:fit-content;max-width:100%;padding:14px 18px;border:1px solid color-mix(in srgb,var(--clay) 13%,var(--paper));border-radius:4px 18px 18px 18px;background:var(--paper);box-shadow:0 5px 18px #202a3214}
.message.assistant .text.thinking{color:var(--muted);font-style:italic}
.message.user .text{max-width:min(88%,640px);padding:11px 15px;border:1px solid color-mix(in srgb,var(--clay) 19%,transparent);border-radius:18px 4px 18px 18px;background:color-mix(in srgb,var(--clay) 10%,var(--paper));box-shadow:0 4px 12px #202a320d}
@media(max-width:600px){.message.assistant .text{padding:12px 14px}.message.user .text{padding:9px 12px}}
.hero p{white-space:pre-line;line-height:1.45}
.botanical{width:240px;height:135px;right:6px;bottom:0;object-fit:contain;opacity:.62}
@media(max-width:600px){.botanical{width:184px;height:104px;right:8px;bottom:0;opacity:.48}}

/* Mobile Safari: prevent the full-width shell shadow from creating horizontal scroll. */
html,body{max-width:100%;overflow-x:hidden}.shell{min-width:0}@media(max-width:600px){.shell{width:100%;max-width:100%;box-shadow:none}}

/* Lock the page viewport; only the conversation pane scrolls vertically. */
html,body{overflow-y:hidden;overscroll-behavior-y:none}.shell{min-height:0}.conversation{overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}@media(max-width:600px){.shell{height:100vh;height:100dvh;min-height:0}}