/* 玄真 · 新中式视觉 —— 全部资源同源，无外部字体/CDN */
@font-face{font-family:"XZ Display";src:url(assets/xz-display.woff2) format("woff2");font-weight:700;font-display:swap}
:root{
  color-scheme:light only;
  --zhu:#a3242a;--zhu2:#c0392f;--zhu-d:#7a171c;--mo:#2a2420;--mo2:#5b4d42;--mo3:#8c7a6a;
  --jin:#b8935a;--jin2:#e3cc98;--jin3:#f3e6c4;--xuan:#f6efe2;--xuan2:#fbf7ee;--qing:#3d6b6a;
  --wood:#4c8a5a;--fire:#c4412f;--earth:#a7773d;--metal:#b08a2e;--water:#2f5f8f;
  --serif:"Songti SC","STSong","Noto Serif CJK SC","Source Han Serif SC","Noto Serif SC","SimSun",serif;
  --display:"XZ Display","Songti SC","STSong","Noto Serif CJK SC","Source Han Serif SC",serif;
  --sans:-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  --paper:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .36 0 0 0 0 .24 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --fiber:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .09' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .45 0 0 0 0 .3 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --cloud:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='80' viewBox='0 0 160 80'%3E%3Cg fill='none' stroke='%23b8935a' stroke-width='1.1' stroke-linecap='round' opacity='.55'%3E%3Cpath d='M10 60c0-11 9-20 20-20s20 9 20 20c0-7 6-13 13-13s13 6 13 13M30 60c0-5.5 4.5-10 10-10s10 4.5 10 10'/%3E%3Cpath d='M90 30c0-9 7-16 16-16s16 7 16 16c0-6 5-11 11-11s11 5 11 11M106 30c0-4.4 3.6-8 8-8'/%3E%3C/g%3E%3C/svg%3E");
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#e8dcc6;color:var(--mo);font-family:var(--serif);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:#e6d9c1 var(--paper)}
button,input,textarea{font-family:inherit}
.share-thumb{position:absolute;left:-9999px;top:0;width:1px;height:1px;opacity:0}
.app{position:relative;max-width:540px;margin:0 auto;height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;
  background:var(--paper),var(--fiber),linear-gradient(180deg,#f8f2e6 0%,#f4ecdc 55%,#efe4cf 100%);box-shadow:0 0 40px rgba(60,40,20,.12)}
.app::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--cloud) right -30px top 64px/220px auto no-repeat,var(--cloud) left -40px bottom 120px/200px auto no-repeat;opacity:.5}

/* 顶栏 */
.bar{position:relative;z-index:3;flex:none;display:flex;align-items:center;gap:10px;padding:10px 14px 10px;padding-top:max(10px,env(safe-area-inset-top));padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right));
  background:rgba(250,245,234,.86);-webkit-backdrop-filter:saturate(1.2) blur(10px);backdrop-filter:saturate(1.2) blur(10px)}
.bar::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:4px;background:linear-gradient(var(--jin),var(--jin)) top/100% 1px no-repeat,linear-gradient(var(--jin2),var(--jin2)) bottom/100% 1px no-repeat;opacity:.9}
.avatar{flex:none;width:36px;height:36px;border-radius:50%;box-shadow:0 2px 6px rgba(122,23,28,.28)}
.avatar.lg{width:40px;height:40px}
.who{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.who b{font-family:var(--display);font-size:18px;letter-spacing:3px;color:var(--mo)}
.who span{font-size:11.5px;color:var(--mo3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#5aa36c;margin-right:5px;vertical-align:1px;box-shadow:0 0 0 2px rgba(90,163,108,.2)}
.reset{flex:none;border:1px solid var(--jin);background:transparent;color:var(--zhu);font-size:13px;letter-spacing:1px;border-radius:999px;padding:6px 13px;transition:all .2s}
.reset:active{background:var(--jin3)}
.reset.warn{background:var(--zhu);border-color:var(--zhu);color:#fff7e6}

/* 消息区 */
.list{position:relative;z-index:1;flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:14px 12px 18px;padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
.hero{text-align:center;padding:14px 0 6px}
.hero img{width:64px;height:64px;filter:drop-shadow(0 4px 10px rgba(122,23,28,.25))}
.hero h1{margin:8px 0 2px;font-family:var(--display);font-size:22px;letter-spacing:6px;color:var(--mo);font-weight:700}
.hero p{margin:0;font-size:12.5px;color:var(--mo3);letter-spacing:2px}
.hero-rule{display:flex;align-items:center;justify-content:center;gap:10px;margin:12px auto 4px;max-width:260px;font-size:11px;color:var(--jin);letter-spacing:3px}
.hero-rule i{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--jin))}.hero-rule i:last-child{transform:scaleX(-1)}

.row{display:flex;gap:9px;margin:12px 0;align-items:flex-start;animation:rise .38s cubic-bezier(.2,.8,.2,1) both}
.row.me{flex-direction:row-reverse;margin-left:44px}
.row.me .bubble{max-width:min(100%,420px)}
.row.cont{margin-top:-4px}.row.cont .avatar{visibility:hidden}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.bubble{position:relative;max-width:min(80%,400px);background:var(--xuan2);border:1px solid rgba(184,147,90,.38);border-radius:4px 16px 16px 16px;padding:11px 14px;font-size:15.5px;line-height:1.82;letter-spacing:.2px;color:var(--mo);
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 6px 18px -8px rgba(90,60,30,.25);word-break:break-word}
.bubble p{margin:0 0 7px}.bubble p:last-child{margin-bottom:0}
.bubble ul{margin:4px 0;padding-left:1.1em}.bubble li{margin:3px 0}.bubble li::marker{color:var(--jin)}
.bubble strong{color:var(--zhu);font-weight:700}
.row.me .bubble{background:linear-gradient(160deg,#b8322f 0%,#9d2228 60%,#861b21 100%);color:#fff8ea;border:0;border-radius:16px 4px 16px 16px;box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 6px 16px -6px rgba(122,23,28,.45)}
.row.me .bubble strong{color:#fff}
.bubble .st{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-family:var(--display);font-size:16px;font-weight:700;color:var(--zhu);letter-spacing:2px}
.bubble .st::before{content:"";width:7px;height:7px;transform:rotate(45deg);background:var(--zhu);box-shadow:0 0 0 2px var(--jin3)}
.bubble .st::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--jin2),transparent)}
.bubble.section{border-top:2px solid var(--jin2)}
/* 流式输出 */
.caret>:last-child::after{content:"";display:inline-block;width:2px;height:1.05em;margin-left:3px;vertical-align:-2px;background:var(--zhu);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.typing{display:inline-flex;gap:5px;padding:6px 2px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--mo);opacity:.25;animation:ink 1.3s infinite}
.typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
@keyframes ink{0%,80%,100%{opacity:.18;transform:scale(.8)}40%{opacity:.75;transform:scale(1.05)}}
.notice{display:block;width:max-content;max-width:90%;margin:6px auto;font-size:11px;color:var(--mo3);background:rgba(184,147,90,.12);border-radius:999px;padding:3px 10px}

/* 命盘卡片 */
.card{position:relative;flex:1;max-width:calc(100% - 45px);background:#fffdf7 var(--paper);border:1px solid rgba(184,147,90,.55);border-radius:4px 16px 16px 16px;padding:14px 12px 12px;box-shadow:0 10px 26px -12px rgba(90,60,30,.35);overflow:hidden}
.card::before{content:"";position:absolute;inset:5px;border:1px solid rgba(184,147,90,.3);border-radius:2px 12px 12px 12px;pointer-events:none}
.card::after{content:"";position:absolute;right:-30px;top:-14px;width:150px;height:76px;background:var(--cloud) center/contain no-repeat;opacity:.45;pointer-events:none}
.mp-h{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 4px 6px}
.mp-h b{font-family:var(--display);font-size:17px;color:var(--mo);letter-spacing:2px}
.seal{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;margin-left:6px;border:1.5px solid var(--zhu);color:var(--zhu);border-radius:4px;font-family:var(--display);font-size:11px;line-height:1;writing-mode:vertical-rl;letter-spacing:-1px;transform:rotate(-6deg);vertical-align:-6px;background:rgba(163,36,42,.04)}
.zodiac{font-size:24px;line-height:1}
.meta{position:relative;margin:0 4px;font-family:var(--sans);font-size:11.5px;color:var(--mo2);line-height:1.75}
.meta em{font-style:normal;color:var(--mo3)}
.pillars{position:relative;display:grid;grid-template-columns:30px repeat(4,1fr);margin:10px 2px 8px;border-radius:10px;overflow:hidden;background:rgba(255,255,255,.65);box-shadow:0 0 0 1px rgba(184,147,90,.35) inset;text-align:center}
.pillars>div{padding:4px 1px;font-size:11px;color:var(--mo2);border-top:1px dashed rgba(184,147,90,.28)}
.pillars .hd{border-top:0;padding:6px 1px;background:linear-gradient(180deg,#a3242a,#8b1c22);color:#fbeed2;font-family:var(--display);font-size:12.5px;letter-spacing:2px}
.pillars .hd.rl{background:#8b1c22}
.pillars .rl{display:flex;align-items:center;justify-content:center;color:var(--mo3);font-size:10px;writing-mode:vertical-rl;letter-spacing:1px;background:rgba(184,147,90,.08)}
.pillars .big{font-family:var(--display);font-size:27px;line-height:1.2;font-weight:700;padding:3px 0}
.pillars .ss{font-size:11px;color:var(--mo)}
.pillars .day{background:rgba(163,36,42,.055)}
.pillars .hd.day{background:linear-gradient(180deg,#b8322f,#9d2228)}
.pillars small{display:block;font-size:9.5px;color:var(--mo3);line-height:1.2}
.wx-木{color:var(--wood)}.wx-火{color:var(--fire)}.wx-土{color:var(--earth)}.wx-金{color:var(--metal)}.wx-水{color:var(--water)}
.bg-木{background:linear-gradient(90deg,#6fae7e,var(--wood))}.bg-火{background:linear-gradient(90deg,#e0705c,var(--fire))}.bg-土{background:linear-gradient(90deg,#c99a5e,var(--earth))}.bg-金{background:linear-gradient(90deg,#dcbc63,var(--metal))}.bg-水{background:linear-gradient(90deg,#5c8cc0,var(--water))}
.sec{position:relative;display:flex;align-items:center;gap:6px;margin:10px 4px 6px;font-family:var(--display);font-size:12.5px;color:var(--zhu);letter-spacing:2px}
.sec::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--jin2),transparent)}
.wx{position:relative;display:grid;gap:5px;margin:0 4px}
.wx .w{display:grid;grid-template-columns:22px 1fr 18px;align-items:center;gap:6px;font-size:12px}
.wx .w b{font-family:var(--display);font-size:13px}
.wx .t{height:7px;border-radius:99px;background:rgba(184,147,90,.16);overflow:hidden}
.wx .t i{display:block;height:100%;width:0;border-radius:99px;transition:width .9s cubic-bezier(.2,.8,.2,1)}
.wx .n{font-family:var(--sans);font-size:11px;color:var(--mo3);text-align:right}
.kv{position:relative;display:flex;flex-wrap:wrap;gap:5px;margin:9px 4px 0}
.kv span{font-family:var(--sans);font-size:11px;color:var(--mo2);background:rgba(184,147,90,.13);border-radius:99px;padding:3px 9px}
.kv b{color:var(--zhu);font-weight:600}
.hs{position:relative;display:flex;gap:6px;overflow-x:auto;padding:2px 4px 4px;scrollbar-width:none;scroll-snap-type:x proximity}.hs::-webkit-scrollbar{display:none}
.dy{flex:none;min-width:52px;scroll-snap-align:start;text-align:center;border-radius:10px;padding:5px 4px;background:rgba(255,255,255,.7);box-shadow:0 0 0 1px rgba(184,147,90,.35) inset;font-family:var(--sans);font-size:10px;color:var(--mo3);line-height:1.35}
.dy b{display:block;margin:1px 0;font-family:var(--display);font-size:16px}
.dy.cur{background:#fff3ee;box-shadow:0 0 0 1.5px var(--zhu) inset}
.dy.cur::before{content:"当前";display:block;font-size:9px;color:var(--zhu)}

/* 快捷回复 */
.quick{position:relative;z-index:2;flex:none;display:flex;gap:8px;overflow-x:auto;padding:2px 12px 10px;padding-left:max(12px,env(safe-area-inset-left));scrollbar-width:none;mask-image:linear-gradient(90deg,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent)}
.quick::-webkit-scrollbar{display:none}.quick:empty{display:none}
.quick button{flex:none;border:1px solid rgba(163,36,42,.45);background:rgba(255,252,244,.92);color:var(--zhu);font-size:13.5px;letter-spacing:.5px;border-radius:999px;padding:7px 14px;white-space:nowrap;box-shadow:0 3px 10px -6px rgba(122,23,28,.5);animation:rise .4s both;transition:transform .15s}
.quick button:nth-child(2){animation-delay:.05s}.quick button:nth-child(3){animation-delay:.1s}.quick button:nth-child(4){animation-delay:.15s}
.quick button:active{transform:scale(.96)}
.quick button.primary{background:linear-gradient(160deg,#b8322f,#8b1c22);border-color:transparent;color:#fff7e6}

/* 输入区 */
.composer{position:relative;z-index:3;flex:none;display:flex;align-items:flex-end;gap:9px;padding:9px 12px;padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));background:rgba(250,245,234,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid rgba(184,147,90,.35)}
.field{flex:1;display:flex;background:#fffdf8;border:1px solid rgba(184,147,90,.55);border-radius:22px;padding:2px 4px 2px 14px;transition:border-color .2s,box-shadow .2s}
.field:focus-within{border-color:var(--zhu);box-shadow:0 0 0 3px rgba(163,36,42,.1)}
.composer textarea{flex:1;border:0;outline:0;resize:none;background:transparent;color:var(--mo);font-size:16px;line-height:1.5;max-height:112px;padding:8px 0;-webkit-appearance:none;appearance:none}
.composer textarea::placeholder{color:#ae9d8a}
#send{flex:none;width:42px;height:42px;border:0;border-radius:50%;background:linear-gradient(160deg,#c0392f,#8b1c22);color:#fff7e6;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px -4px rgba(122,23,28,.6),0 0 0 2px var(--jin3);transition:transform .15s,opacity .2s}
#send:active{transform:scale(.92)}#send:disabled{opacity:.45}
.foot{position:relative;z-index:3;flex:none;text-align:center;font-family:var(--sans);font-size:10.5px;color:var(--mo3);padding:0 12px 6px;padding-bottom:max(6px,env(safe-area-inset-bottom));background:rgba(250,245,234,.92)}
.foot a{color:var(--mo2);text-decoration:none;border-bottom:1px solid rgba(91,77,66,.3)}

@media (min-width:541px){.app{border-left:1px solid rgba(184,147,90,.3);border-right:1px solid rgba(184,147,90,.3)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* 强制浅色：即使系统/内置浏览器开启深色模式也保持宣纸配色 */
@media (prefers-color-scheme:dark){html,body{background:#e6d9c1}}
.jump{position:absolute;z-index:4;left:50%;bottom:calc(var(--jump-b,128px));transform:translateX(-50%);padding:6px 14px;border:1px solid rgba(184,147,90,.55);border-radius:999px;background:rgba(255,253,247,.96);color:var(--zhu);font:600 13px/1.4 var(--sans);box-shadow:0 6px 16px -6px rgba(90,60,30,.45);cursor:pointer;animation:rise .25s ease both}
.jump[hidden]{display:none}