/* ============================================================
   阿水 · 对话挂件（全站共用）
   右下角一只小水滴，点开是一个独立的聊天窗口。
   它跟网站内容无关，只是把话转给云端模型。
   依赖 style.css 里的颜色变量，缺的在这里补默认值。
   ============================================================ */

/* ---------- 小水滴 ---------- */
.pet{
  position:fixed;right:34px;bottom:28px;width:96px;height:96px;z-index:60;   /* 窄屏时低于面板，见下方媒体查询 */
  border:0;background:none;padding:0;cursor:grab;
  transition:transform .2s;
  -webkit-tap-highlight-color:transparent;
  touch-action:none;              /* 按住它拖是拖它，不抢页面滚动 */
  --tilt:0deg;
  /* 一层贴边的接触影 + 一层极淡的环境影：白卡片上也立得住，米底上也不脏 */
  filter:drop-shadow(0 1px 2px rgba(20,20,15,.14)) drop-shadow(0 4px 10px rgba(20,20,15,.07));
}
.pet:hover{transform:translateY(-3px)}
.pet:focus{outline:none}
.pet:focus-visible{outline:1px solid var(--line,#E6E0D4);outline-offset:4px;border-radius:4px}
.pet svg{display:block;width:100%;height:100%}

/* 被拎起来的时候：光标抓住、跟手、不倒翁式地歪一下 */
.pet.st-drag{transform:rotate(6deg) scale(1.04)}
.pet.aw-dragging{
  cursor:grabbing;transition:none;
  transform:rotate(var(--tilt)) scale(1.05);
}

/* 手平时缩着，只有靠近、被拖、说话时才伸出来 */
.arms{
  transform-box:fill-box;transform-origin:50% 68%;opacity:0;transform:scale(.8);
  transition:opacity .26s ease,transform .3s cubic-bezier(.34,1.4,.64,1);
}
.pet:hover .arms,
.pet.st-near .arms,
.pet.st-drag .arms,
.pet.st-talk .arms{opacity:1;transform:scale(1)}
/* 被拎着时手往下垂一点，像被拎起来的玩偶 */
.pet.st-drag .arms{transform:scale(1) translateY(4px)}

.eye-dot{opacity:0;transition:opacity .2s,transform .3s ease;transform-box:fill-box;transform-origin:50% 50%}
.eye-bar{transition:opacity .2s}
.pet:hover .eye-dot,
.pet.st-near .eye-dot,
.pet.st-drag .eye-dot,
.pet.st-think .eye-dot,
.pet.st-talk .eye-dot{opacity:1}
.pet:hover .eye-bar,
.pet.st-near .eye-bar,
.pet.st-drag .eye-bar,
.pet.st-think .eye-bar,
.pet.st-talk .eye-bar{opacity:0}

/* 嘴：平时是条弧线，说话时一开一合 */
.aw-mouth{transform-box:fill-box;transform-origin:50% 0%}
.pet.st-talk .aw-mouth{animation:aw-talk .3s ease-in-out infinite}
@keyframes aw-talk{
  0%,100%{transform:scaleY(1)}
  50%{transform:scaleY(2.8)}
}

/* 思考：眼睛缩成小点往上看，身体极慢地呼吸 */
.pet.st-think .eye-dot{transform:translateY(-3px) scale(.55)}
.pet.st-think svg{animation:aw-breathe 3s ease-in-out infinite}
@keyframes aw-breathe{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-2.5px)}
}

/* 出错：眉毛一高一低地耷下来，嘴向下撇，身体抖两下 */
.pet.st-err .eye-dot{opacity:0}
.pet.st-err .eye-bar{opacity:1}
.pet.st-err .eye-bar rect{transform-box:fill-box;transform-origin:50% 50%;transition:transform .25s}
.pet.st-err .eye-bar rect:first-child{transform:rotate(16deg)}
.pet.st-err .eye-bar rect:last-child{transform:rotate(-16deg)}
.pet.st-err .aw-mouth{transform:scaleY(-1);transition:transform .25s}
.pet.st-err svg{animation:aw-shake .42s ease-in-out 2}
@keyframes aw-shake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-3px)}
  75%{transform:translateX(3px)}
}

/* ---------- 首次问候的小卡片 ---------- */
.greet{
  --paper:#FFFDF9;
  position:fixed;left:0;top:0;z-index:62;width:300px;
  background:var(--paper);border:1px solid var(--line,#E6E0D4);border-radius:2px;
  padding:15px 18px 14px;
  font-family:var(--sans,system-ui,sans-serif);text-align:left;
  box-shadow:0 12px 34px -14px rgba(20,20,15,.22),0 2px 6px -2px rgba(20,20,15,.06);
  opacity:0;transform:translateY(6px) scale(.985);pointer-events:none;
  transition:opacity .24s ease,transform .26s cubic-bezier(.22,1,.36,1);
}
.greet.on{opacity:1;transform:none;pointer-events:auto}
.greet .g-hi{margin:0;font-size:13.5px;line-height:1.7;color:var(--ink,#14140F)}
.greet .g-try{margin:7px 0 0;font-size:12.5px;line-height:1.7;color:var(--muted,#7A756B)}
.greet .g-cta{margin-top:13px;display:flex;align-items:center;gap:20px}
.greet .g-go,
.greet .g-no{font:inherit;background:none;border:0;padding:0;cursor:pointer;transition:opacity .16s}
.greet .g-go{font-size:13px;letter-spacing:.02em;color:var(--accent,#B85C38)}
.greet .g-no{font-size:12.5px;color:var(--faint,#A29B90)}
.greet .g-go:hover,.greet .g-no:hover{opacity:.72}
.greet .g-go:focus-visible,.greet .g-no:focus-visible{outline:1px solid var(--line,#E6E0D4);outline-offset:3px}

/* ---------- 烟花彩蛋 ---------- */
.fx{position:fixed;left:0;top:0;width:100%;height:100%;z-index:58;pointer-events:none}
.fx-tube{
  position:fixed;z-index:59;pointer-events:none;
  transform-origin:50% 100%;transform:translate(-50%,-100%);display:none;
  filter:drop-shadow(0 1px 2px rgba(20,20,15,.13));
}
.fx-tube svg{display:block;width:100%;height:100%;overflow:visible}
/* 掏烟花时手伸出来 */
.pet.st-fire .arms{opacity:1;transform:scale(1)}
/* 点火时闭眼 */
.pet.aw-closed .eye-dot{opacity:0}
.pet.aw-closed .eye-bar{opacity:1}

/* ---------- 面板 ---------- */
.panel{
  --paper:#FFFDF9;
  position:fixed;right:34px;bottom:140px;width:min(340px,calc(100vw - 48px));
  height:min(520px,calc(100vh - 180px));z-index:61;
  background:var(--paper);border:1px solid var(--line,#E6E0D4);border-radius:2px;
  display:flex;flex-direction:column;overflow:hidden;
  opacity:0;transform:translateY(10px) scale(.985);pointer-events:none;
  transform-origin:90% 100%;
  transition:opacity .22s ease,transform .26s cubic-bezier(.22,1,.36,1);
  font-family:var(--sans,system-ui,sans-serif);text-align:left;
}
.panel.open{opacity:1;transform:none;pointer-events:auto}

.p-head{display:flex;align-items:center;gap:11px;padding:16px 24px 13px;border-bottom:1px solid var(--line,#E6E0D4);flex:0 0 auto}
/* 头像框：全站 .avatar 是首页那张人像，这里必须换名并写死尺寸，否则会继承成 168px 的大圆 */
.aw-avatar{
  flex:0 0 auto;display:block;line-height:0;width:38px;height:38px;
  border-radius:0;background:none;box-shadow:none;
}
.aw-avatar svg{width:38px;height:38px;display:block}
.p-head .aw-who{display:block;font-family:var(--serif,Georgia,serif);font-size:16px;font-weight:600;color:var(--ink,#14140F);line-height:1.35}
.p-head .aw-sub{display:block;font-size:11px;color:var(--faint,#A29B90);letter-spacing:.04em;line-height:1.4}
/* 操作区同理：全站 .acts 带 margin-top:auto，会把按钮压到底部 */
.p-head .aw-acts{margin:0 0 0 auto;display:flex;align-items:center;gap:14px;font-size:12px;flex:0 0 auto}
.p-head .act{
  font:inherit;font-size:11.5px;letter-spacing:.08em;color:var(--faint,#A29B90);
  background:none;border:0;padding:2px 0;cursor:pointer;transition:color .16s;
}
.p-head .act:hover{color:var(--ink,#14140F)}

.p-body{flex:1 1 auto;overflow-y:auto;padding:20px 26px 6px;scroll-behavior:smooth;overscroll-behavior:contain}
.p-body::-webkit-scrollbar{width:5px}
.p-body::-webkit-scrollbar-thumb{background:#DED7C9;border-radius:3px}

.msg{margin:0 0 18px;font-size:14px;line-height:1.85;color:var(--body,#3A3833);white-space:pre-wrap;word-break:break-word}
.msg.me{text-align:right;color:var(--muted,#7A756B);font-size:13.5px}
.msg.err{color:var(--accent,#B85C38)}
.msg .caret{display:inline-block;width:1.5px;height:14px;background:var(--faint,#A29B90);vertical-align:-2px;margin-left:2px;animation:ashui-bl .85s steps(1) infinite}
@keyframes ashui-bl{0%,49%{opacity:1}50%,100%{opacity:0}}

.dots{display:none;align-items:center;gap:5px;height:16px;margin:-6px 0 14px}
.dots.on{display:flex}
.dots i{width:4px;height:4px;border-radius:50%;background:var(--faint,#A29B90);animation:ashui-tp 1.15s infinite}
.dots i:nth-child(2){animation-delay:.16s}
.dots i:nth-child(3){animation-delay:.32s}
@keyframes ashui-tp{0%,60%,100%{opacity:.25}30%{opacity:1;transform:translateY(-2px)}}

.p-foot{flex:0 0 auto;border-top:1px solid var(--line,#E6E0D4);padding:12px 26px 10px}
.p-foot .row{display:flex;align-items:center;gap:12px}
.p-foot input{
  flex:1;border:0;background:none;font:inherit;font-size:13.5px;color:var(--ink,#14140F);
  padding:3px 0;outline:none;font-family:var(--sans,system-ui,sans-serif);min-width:0;
}
.p-foot input::placeholder{color:var(--faint,#A29B90)}
.p-foot input:disabled{color:var(--faint,#A29B90)}
.p-foot .send{
  flex:0 0 auto;width:26px;height:24px;padding:0;display:flex;align-items:center;justify-content:center;
  background:none;border:1px solid var(--line,#E6E0D4);border-radius:2px;
  color:var(--faint,#A29B90);cursor:pointer;transition:color .16s,border-color .16s,background .16s;
}
.p-foot .send:hover{color:var(--accent,#B85C38);border-color:var(--accent,#B85C38)}
.p-foot .send:active{background:rgba(184,92,56,.07)}
.p-foot .send:focus-visible{outline:1px solid var(--line,#E6E0D4);outline-offset:2px}
.p-foot .send svg{display:block}
.p-foot .stop{
  font:inherit;font-size:12px;color:var(--accent,#B85C38);background:none;border:0;
  padding:2px 0;cursor:pointer;display:none;
}
.p-foot .stop.on{display:block}
.p-foot .note{margin:6px 0 0;font-size:11px;color:var(--faint,#A29B90);letter-spacing:.04em;transition:color .2s}

/* ---------- 发图 ---------- */
.imgbtn{
  flex:0 0 auto;width:22px;height:22px;padding:0;border:0;background:none;cursor:pointer;
  color:var(--faint,#A29B90);display:flex;align-items:center;justify-content:center;transition:color .16s;
}
.imgbtn:hover{color:var(--accent,#B85C38)}
.attach{padding:0 0 9px}
.attach[hidden]{display:none}
.thumb-wrap{position:relative;display:inline-block;line-height:0}
.thumb-wrap img{max-width:96px;max-height:72px;border:1px solid var(--line,#E6E0D4);border-radius:2px;display:block}
.thumb-wrap .rm{
  position:absolute;right:-7px;top:-7px;width:17px;height:17px;line-height:15px;text-align:center;
  border-radius:50%;background:var(--ink,#14140F);color:#F8F5EF;font-size:11px;border:0;cursor:pointer;padding:0;
}
.msg.me img{
  display:block;margin:0 0 6px auto;max-width:220px;max-height:180px;
  border:1px solid var(--line,#E6E0D4);border-radius:2px;
}
.panel.drop{outline:1px dashed var(--line,#E6E0D4);outline-offset:-8px}

/* ---------- 窄屏 ---------- */
/* 桌面上小水滴永远压在最顶层：面板怎么摆都不会把它盖住 */
@media (min-width:761px){
  .pet{z-index:80}
}

@media (max-width:760px){
  .pet{right:18px;bottom:18px;width:74px;height:74px}
  /* 手机上不跳到中间，卡片就地弹在它上方 */
  .greet{width:auto}
  .panel{
    right:0;left:0;bottom:0;top:0;width:100%;height:100%;max-height:100%;
    border:0;border-radius:0;
  }
  .p-head{padding:16px 18px 13px}
  .p-body{padding:18px 18px 6px}
  .p-foot{padding:12px 18px 10px}
}

@media (prefers-reduced-motion:reduce){
  .pet,.panel,.greet,.arms,.eye-dot,.eye-bar{transition:none}
  .dots i,.msg .caret,.pet svg,.pet.st-talk .aw-mouth{animation:none}
  .pet.aw-dragging{transform:none}
}

/* 打印时不出现 */
@media print{
  .pet,.panel,.greet{display:none!important}
}