:root { color-scheme: light; --pink:#ff4f8f; --pink-deep:#ff2d7b; --pink-soft:#fff0f5; --ink:#292429; --muted:#8c8389; --line:#eee7eb; --page:#faf7fa; --shadow:0 10px 28px rgba(107,73,89,.07); }
* { box-sizing: border-box; }
html { min-height:100%; scroll-behavior:smooth; }
body { min-width:320px; min-height:100%; margin:0; color:var(--ink); background:#ece9ed; font-family:"PingFang SC","Noto Sans SC","Microsoft YaHei",system-ui,sans-serif; -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; }
button,a { font:inherit; }
button { color:inherit; }
[hidden] { display:none !important; }
.chat-app { width:min(100%,480px); min-height:100vh; min-height:100svh; margin:0 auto; overflow-x:hidden; background:linear-gradient(180deg,#ffe9f1 0,#faf7fa 290px); box-shadow:0 0 34px rgba(56,38,47,.1); }
.chat-header { position:sticky; z-index:20; top:0; height:calc(68px + env(safe-area-inset-top)); display:grid; grid-template-columns:43px 1fr auto; align-items:end; gap:10px; padding:env(safe-area-inset-top) 16px 11px; background:rgba(255,231,239,.94); backdrop-filter:blur(15px); }
.header-avatar { width:40px; height:40px; display:grid; place-items:center; border:3px solid white; border-radius:50%; color:white; background:linear-gradient(145deg,#ff9abb,#ff4f8f); box-shadow:0 6px 14px rgba(255,79,143,.17); font-size:14px; font-weight:750; }
.header-person { display:grid; gap:2px; align-self:center; }
.header-person b { font-size:14px; }
.header-person span { color:#958a91; font-size:11px; }
.header-person i { width:6px; height:6px; display:inline-block; border-radius:50%; background:#36bc85; }
.chat-header button { align-self:center; padding:7px 10px; border:1px solid rgba(255,79,143,.16); border-radius:999px; color:var(--pink); background:rgba(255,255,255,.62); font-size:11px; cursor:pointer; }
.conversation-progress { position:absolute; right:0; bottom:0; left:0; height:2px; background:rgba(255,255,255,.5); }
.conversation-progress i { display:block; width:8%; height:100%; border-radius:999px; background:linear-gradient(90deg,#ff7daa,var(--pink-deep)); transition:width .35s ease; }
.chat-feed { min-height:calc(100svh - 68px); padding:14px 16px calc(var(--dock-height,190px) + 22px); }
.chat-time { margin:3px 0 13px; color:#aaa0a6; text-align:center; font-size:10px; }
.intro-card { margin-bottom:16px; padding:17px; border:1px solid rgba(255,79,143,.12); border-radius:22px; background:rgba(255,255,255,.82); box-shadow:var(--shadow); }
.intro-person { display:flex; align-items:center; gap:10px; }
.intro-person > span { width:43px; height:43px; display:grid; place-items:center; border-radius:50%; color:white; background:linear-gradient(145deg,#ff92b6,var(--pink)); font-size:14px; font-weight:750; }
.intro-person > div { display:grid; gap:3px; }
.intro-person small { color:var(--pink); font-size:11px; }
.intro-person b { font-size:16px; }
.intro-card > p { margin:12px 0; color:#655d62; font-size:14px; line-height:1.65; }
.intro-card > div:last-child { display:flex; gap:6px; }
.intro-card > div:last-child span { padding:6px 9px; border-radius:999px; color:#8b6575; background:#fff1f6; font-size:10px; }
.message { display:flex; align-items:flex-start; gap:8px; margin:10px 0; animation:message-in .24s ease both; }
@keyframes message-in { from { opacity:0; transform:translateY(5px); } }
.message-avatar { width:31px; height:31px; flex:0 0 auto; display:grid; place-items:center; border:2px solid white; border-radius:50%; color:white; background:linear-gradient(145deg,#ff94b8,var(--pink)); box-shadow:0 4px 10px rgba(255,79,143,.13); font-size:9px; font-weight:750; }
.message-avatar.ghost { visibility:hidden; }
.bubble { max-width:calc(100% - 60px); padding:11px 13px; border-radius:5px 17px 17px 17px; background:white; box-shadow:0 5px 16px rgba(94,66,79,.06); }
.bubble.soft { background:#fff5f8; }
.bubble p { margin:0; font-size:14px; line-height:1.65; }
.bubble time { display:block; margin-top:5px; color:#b7adb3; text-align:right; font-size:9px; }
.user-message { justify-content:flex-end; }
.user-message .bubble { border-radius:17px 5px 17px 17px; color:white; background:linear-gradient(135deg,#ff77a7,#ff4a8c); }
.bot-message.is-active-question .bubble { max-width:calc(100% - 48px); border:2px solid rgba(255,79,143,.48); background:#fff; box-shadow:0 9px 24px rgba(216,60,120,.13); }
.bot-message.is-active-question .bubble::before { content:"现在请回答"; display:block; width:max-content; margin:0 0 7px; padding:3px 7px; border-radius:999px; color:#fff; background:var(--pink); font-size:9px; font-weight:700; }
.typing-message .bubble { display:flex; gap:4px; align-items:center; min-height:34px; }
.typing-message .bubble i { width:5px; height:5px; border-radius:50%; background:#d4c9cf; animation:typing 1s ease-in-out infinite; }
.typing-message .bubble i:nth-child(2) { animation-delay:.14s; }
.typing-message .bubble i:nth-child(3) { animation-delay:.28s; }
@keyframes typing { 50% { opacity:.35; transform:translateY(-2px); } }
.knowledge-card { margin:10px 0 14px 39px; padding:14px; border:1px solid #f0e7ec; border-radius:18px; background:#fff; box-shadow:var(--shadow); }
.knowledge-card > div { display:flex; align-items:center; gap:8px; }
.knowledge-card > div i { width:25px; height:25px; display:grid; place-items:center; border-radius:8px; color:white; background:#39bc87; font-style:normal; font-size:10px; }
.knowledge-card > div b { font-size:13px; }
.knowledge-card ul { display:grid; gap:7px; margin:11px 0 0; padding:10px 0 0 17px; border-top:1px solid var(--line); color:#746b71; font-size:12px; line-height:1.55; }
.roadmap-card { margin:10px 0 15px 39px; padding:15px; border:1px solid rgba(255,79,143,.14); border-radius:19px; background:linear-gradient(145deg,#fff,#fff7fa); box-shadow:var(--shadow); }
.roadmap-card > b { font-size:14px; }
.roadmap-card ol { display:grid; gap:9px; margin:12px 0 10px; padding:0; list-style:none; }
.roadmap-card li { display:grid; grid-template-columns:27px 1fr; align-items:center; gap:8px; }
.roadmap-card li > i { width:29px; height:29px; display:grid; place-items:center; border-radius:9px; color:var(--pink); background:var(--pink-soft); font-style:normal; font-size:10px; font-weight:700; }
.roadmap-card li > div { display:grid; gap:2px; }
.roadmap-card li b { font-size:12px; }.roadmap-card li span { color:#81777d; font-size:11px; }
.roadmap-card > small { display:block; padding-top:9px; border-top:1px dashed #f0dbe4; color:#92878d; font-size:10px; }
.scene-card { margin:10px 0 14px 39px; padding:16px; border:1px solid rgba(255,79,143,.15); border-radius:21px; background:#fff; box-shadow:var(--shadow); }
.scene-card-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.scene-card-head span { padding:5px 8px; border-radius:999px; color:var(--pink); background:var(--pink-soft); font-size:10px; font-weight:700; }
.scene-card-head small { color:#897f85; font-size:10px; }
.scene-card h2 { margin:11px 0 13px; font-size:20px; }
.timing-line,.why-line { display:flex; align-items:flex-start; gap:9px; }
.timing-line > i,.why-line > i { width:27px; height:27px; flex:0 0 auto; display:grid; place-items:center; border-radius:9px; font-style:normal; font-size:9px; font-weight:750; }
.timing-line > i { color:#6f69df; background:#efedff; }
.why-line > i { color:var(--pink); background:var(--pink-soft); }
.timing-line p,.why-line p { display:grid; gap:3px; margin:0; }
.timing-line b,.why-line b { font-size:12px; }
.timing-line span,.why-line span { color:#665f63; font-size:12px; line-height:1.6; }
.scene-items { margin:13px 0; padding:12px; border-radius:13px; background:#faf7f9; }
.scene-items > b { display:block; color:#71676d; font-size:11px; }
.scene-items > small { display:block; margin:3px 0 9px; color:#9c9197; font-size:10px; }
.scene-items > div { display:grid; gap:7px; }
.scene-items article { padding:9px; border:1px solid #eee6eb; border-radius:10px; background:white; }
.scene-items article > div { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.scene-items article b { font-size:12px; }
.scene-items article em { flex:0 0 auto; color:var(--pink); font-size:10px; font-style:normal; font-weight:650; }
.scene-items article p { margin:6px 0 0; color:#746a70; font-size:11px; line-height:1.55; }
.status-record { display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:9px; margin:8px 0 16px 39px; padding:10px 12px; border-radius:14px; background:#fff; box-shadow:0 5px 15px rgba(91,66,78,.05); }
.status-record > i { width:27px; height:27px; display:grid; place-items:center; border:2px solid #e1d8dd; border-radius:9px; font-style:normal; font-size:9px; }
.status-record > div { display:grid; gap:2px; }
.status-record small { color:#8f848a; font-size:9px; }
.status-record b { font-size:12px; }
.status-record > span { padding:5px 7px; border-radius:999px; font-size:10px; }
.status-record.is-confirm > span { color:#98672f; background:#fff2dd; }
.status-record.is-buy > span { color:#b9525c; background:#ffedf0; }
.status-record.is-plan > span { color:#9a6176; background:#fff0f5; }
.status-record.is-ordered > span { color:#297399; background:#eaf6fd; }
.status-record.is-pack > span { color:#5f58bd; background:#efedff; }
.status-record.is-ready > span { color:#277a6e; background:#e8f7f4; }
.status-record.is-done > i { border-color:#35b981; color:white; background:#35b981; }
.status-record.is-done > span { color:#27815f; background:#e8f9f2; }
.result-card { margin:12px 0 16px 39px; overflow:hidden; border-radius:23px; background:#fff; box-shadow:0 12px 30px rgba(103,68,85,.09); }
.result-card-top { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 17px 13px; color:white; background:linear-gradient(135deg,#ff75a7,#ff3f85); }
.result-card-top > div { display:grid; gap:3px; }
.result-card-top small { color:rgba(255,255,255,.78); font-size:10px; }
.result-card-top b { font-size:15px; }
.result-card-top > span { padding:5px 8px; border-radius:999px; background:rgba(255,255,255,.16); font-size:9px; }
.result-hero { display:grid; grid-template-columns:70px 1fr; align-items:center; gap:12px; padding:17px; color:white; background:linear-gradient(135deg,#ff75a7,#ff3f85); }
.result-hero > strong { width:65px; height:65px; display:grid; place-items:center; border:6px solid rgba(255,255,255,.28); border-radius:50%; background:rgba(255,255,255,.08); font-size:27px; }
.result-hero > div { display:grid; gap:4px; }
.result-hero > div b { font-size:14px; line-height:1.35; }
.result-hero p { margin:0; color:rgba(255,255,255,.84); font-size:11px; line-height:1.5; }
.result-stats { display:grid; grid-template-columns:repeat(5,1fr); gap:4px; padding:12px 10px; background:#fff8fb; }
.result-stats > div { display:grid; gap:2px; padding:7px 2px; border-radius:9px; text-align:center; background:white; }
.result-stats b { font-size:16px; }
.result-stats span { color:#746a70; font-size:9px; line-height:1.3; }
.result-stats .confirm b { color:#c3863d; }.result-stats .buy b { color:#d85b67; }.result-stats .ordered b { color:#2f86b0; }.result-stats .pack b { color:#6c64d2; }.result-stats .done b { color:#31a978; }
.quick-result .result-hero > strong { font-size:19px; }
.quick-result .result-stats { grid-template-columns:repeat(3,1fr); padding-right:28px; padding-left:28px; }
.stage-standard { display:grid; gap:4px; margin:14px 15px; padding:13px 14px; border:1px solid #f0dfe7; border-radius:14px; background:linear-gradient(145deg,#fff7fa,#fff); }
.stage-standard small { color:#987f8a; font-size:10px; }
.stage-standard b { color:#d73c77; font-size:13px; }
.stage-standard p { margin:0; color:#71656b; font-size:11px; line-height:1.55; }
.result-section { padding:16px; border-top:1px solid var(--line); }
.result-title { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.result-title i { width:26px; height:26px; display:grid; place-items:center; border-radius:9px; color:white; background:linear-gradient(145deg,#ff87af,var(--pink)); font-style:normal; font-size:8px; }
.result-title b { font-size:13px; }
.action-list { margin:0; padding:0; list-style:none; counter-reset:action; }
.action-list li { counter-increment:action; display:grid; grid-template-columns:25px 1fr; gap:8px; padding:10px 0; border-bottom:1px solid var(--line); }
.action-list li:last-child { border-bottom:0; padding-bottom:0; }
.action-list li::before { content:counter(action); width:23px; height:23px; display:grid; place-items:center; border-radius:8px; color:var(--pink); background:var(--pink-soft); font-size:8px; font-weight:700; }
.action-list li > div { display:grid; gap:3px; }
.action-list b { font-size:12px; }
.action-list p { margin:0; color:#746a70; font-size:11px; line-height:1.55; }
.scene-status-list { display:grid; gap:10px; }
.result-scene { display:grid; grid-template-columns:27px 1fr auto; align-items:center; gap:8px; }
.result-scene > i { width:25px; height:25px; display:grid; place-items:center; border:2px solid #e3dade; border-radius:8px; font-style:normal; font-size:8px; }
.result-scene > div { display:grid; gap:2px; }
.result-scene b { font-size:11px; }.result-scene small { color:#8c8288; font-size:9px; }
.result-scene > span { padding:5px 7px; border-radius:999px; font-size:9px; }
.result-scene.is-confirm > span { color:#98672f; background:#fff2dd; }.result-scene.is-buy > span { color:#b9525c; background:#ffedf0; }.result-scene.is-ordered > span { color:#297399; background:#eaf6fd; }.result-scene.is-pack > span { color:#5f58bd; background:#efedff; }
.result-scene.is-plan > span { color:#9a6176; background:#fff0f5; }.result-scene.is-ready > span { color:#277a6e; background:#e8f7f4; }
.result-scene.is-done > i { border-color:#35b981; color:white; background:#35b981; }.result-scene.is-done > span { color:#27815f; background:#e8f9f2; }
.personal-note { margin:0 15px 15px; padding:13px; border-radius:14px; background:#f8f5ff; }
.personal-note > b { font-size:12px; }
.personal-note > div { display:flex; flex-wrap:wrap; gap:5px; margin:8px 0; }
.personal-note > div span { padding:5px 7px; border-radius:999px; color:#625bbc; background:white; font-size:9px; }
.personal-note p { margin:0; color:#665f72; font-size:11px; line-height:1.55; }
.app-link { min-height:51px; display:flex; align-items:center; justify-content:center; gap:8px; margin:0 15px; border-radius:999px; color:white; text-decoration:none; background:linear-gradient(100deg,#ff659b,var(--pink-deep)); box-shadow:0 9px 20px rgba(255,49,123,.2); font-size:14px; font-weight:650; }
.app-link i { width:21px; height:21px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.16); font-style:normal; font-size:18px; }
.app-path { display:block; padding:8px 15px 15px; color:#948a90; text-align:center; font-size:10px; }
.reply-dock { position:fixed; z-index:30; left:50%; bottom:0; width:min(100%,480px); max-height:62svh; overflow-y:auto; overscroll-behavior:contain; transform:translateX(-50%); padding:13px 16px calc(11px + env(safe-area-inset-bottom)); border-top:1px solid rgba(255,79,143,.18); background:rgba(255,252,253,.98); box-shadow:0 -10px 28px rgba(82,54,67,.09); backdrop-filter:blur(16px); }
.reply-context { display:grid; gap:4px; margin-bottom:10px; padding:10px 12px; border-left:4px solid var(--pink); border-radius:11px; background:#fff1f6; }
.reply-context small { color:#c84377; font-size:10px; font-weight:700; }
.reply-context b { color:#33292e; font-size:14px; line-height:1.45; }
.reply-context p { margin:0; color:#88777f; font-size:10px; }
.quick-replies { display:grid; gap:8px; }
.quick-replies button { position:relative; min-height:48px; padding:9px 14px 9px 44px; border:1px solid rgba(255,79,143,.24); border-radius:14px; color:#c9336d; text-align:left; background:white; box-shadow:0 5px 14px rgba(93,67,79,.05); font-size:14px; line-height:1.4; cursor:pointer; }
.quick-replies button::before { content:""; position:absolute; left:15px; top:50%; width:16px; height:16px; border:2px solid #f3a4c0; border-radius:50%; transform:translateY(-50%); background:#fff; box-shadow:inset 0 0 0 4px #fff; }
.quick-replies button:active::before { background:var(--pink); }
.quick-replies button:disabled { opacity:.55; }
.reply-dock.is-waiting .quick-replies { min-height:12px; }
.reply-dock > small { display:block; margin-top:9px; color:#948a90; text-align:center; font-size:10px; }
.toast { position:fixed; z-index:50; left:50%; bottom:calc(90px + env(safe-area-inset-bottom)); transform:translateX(-50%); padding:10px 14px; border-radius:999px; color:white; background:rgba(40,34,38,.9); font-size:10px; }
button:focus-visible,a:focus-visible { outline:3px solid rgba(111,105,235,.4); outline-offset:2px; }
@media (min-width:481px) { .chat-app { min-height:100vh; } }
@media (max-height:650px) { .reply-dock { max-height:68svh; } .reply-dock > small { display:none; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; } }