/* chat.css —— 芨芨龙聊天小窗（外层，13页全覆盖） */
#chatFab{
  position:fixed;right:10px;top:46%;
  width:52px;height:52px;border-radius:50%;
  z-index:120;cursor:pointer;touch-action:none;
  background:rgba(255,255,255,.98);
  box-shadow:0 3px 12px rgba(70,35,18,.26);
  -webkit-tap-highlight-color:transparent;
  will-change:transform;
  transition:transform .16s cubic-bezier(.25,1.2,.35,1),opacity .3s;
}
#chatFab img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
/* 点击压缩动画 */
#chatFab:active{transform:scale(.8)}
#chatFab.dragging{transition:none}

/* ---------- 聊天面板 ---------- */
#chatPanel{
  position:fixed;right:12px;bottom:12px;top:auto;
  width:min(330px,88vw);height:min(580px,74vh);
  z-index:130;display:flex;flex-direction:column;
  background:rgba(250,243,228,.98);
  border:1.5px solid rgba(168,120,55,.65);
  border-radius:14px;overflow:hidden;
  box-shadow:0 14px 46px rgba(60,30,12,.32),0 2px 0 rgba(255,250,238,.9) inset;
  transform:translateX(calc(100% + 30px));opacity:0;
  visibility:hidden;pointer-events:none;
  transition:transform .5s cubic-bezier(.2,1.2,.3,1),opacity .35s;
  will-change:transform;
}
#chatPanel.open{
  transform:translateX(0);opacity:1;visibility:visible;pointer-events:auto;
}
/* 标题栏 */
#chatHead{
  display:flex;align-items:center;gap:8px;padding:9px 10px;
  background:linear-gradient(135deg,#c43328,#a5251c);
  color:#fff8ec;
}
#chatHead .av{width:32px;height:32px;border-radius:50%;overflow:hidden;
  background:#fff;flex:none;box-shadow:0 0 0 2px rgba(255,248,236,.85)}
#chatHead .av img{width:100%;height:100%;display:block;object-fit:cover}
#chatHead .nm{flex:1;min-width:0}
#chatHead .nm b{display:block;font-size:14px;letter-spacing:.06em}
#chatHead .nm i{display:block;font-style:normal;font-size:10px;opacity:.85;margin-top:1px}
#chatHead .hd-btn{
  width:30px;height:30px;border-radius:50%;border:0;flex:none;
  background:rgba(255,248,236,.16);color:#fff8ec;font-size:15px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .25s;
}
#chatHead .hd-btn:hover{background:rgba(255,248,236,.3)}
#chatHead .hd-btn#chatCredit{font-size:12.5px;font-family:"Kaiti SC","KaiTi",serif;font-weight:700}
#chatHead .hd-btn.mute-off{opacity:.55}
#chatHead .hd-btn.mute-off::after{content:'';position:absolute;width:16px;height:2px;
  background:#ffd9c9;transform:rotate(-45deg);border-radius:1px}
/* 消息区 */
#chatBody{flex:1;overflow-y:auto;padding:12px 12px 6px;
  background:
    radial-gradient(circle at 15% 10%,rgba(196,50,38,.05),transparent 42%),
    radial-gradient(circle at 85% 90%,rgba(168,120,55,.06),transparent 45%),
    #f7efdd;
  overscroll-behavior:contain;}
#chatBody::-webkit-scrollbar{width:4px}
#chatBody::-webkit-scrollbar-thumb{background:rgba(168,120,55,.4);border-radius:2px}
.msg{display:flex;gap:7px;margin-bottom:11px;align-items:flex-end;
  animation:msgIn .38s cubic-bezier(.2,1.1,.3,1)}
.msg.bot .mav{width:26px;height:26px;border-radius:50%;overflow:hidden;flex:none;background:#fff;
  box-shadow:0 0 0 1.5px rgba(196,50,38,.4)}
.msg.bot .mav img{width:100%;height:100%;display:block;object-fit:cover}
.bub{
  max-width:82%;padding:9px 12px;font-size:13.5px;line-height:1.55;
  border-radius:12px;word-break:break-word;
  box-shadow:0 1px 3px rgba(70,40,18,.12);
}
.msg.bot .bub{background:#fff8ea;color:#3c2c1a;border:1px solid rgba(190,140,70,.35);
  border-bottom-left-radius:4px}
.msg.user{flex-direction:row-reverse}
.msg.user .bub{background:linear-gradient(135deg,#d34a3a,#b5341f);color:#fff7ea;
  border-bottom-right-radius:4px}
@keyframes msgIn{
  from{opacity:0;transform:translateY(12px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
/* 打字指示器 */
#typing{display:flex;gap:4px;padding:11px 14px;background:#fff8ea;
  border:1px solid rgba(190,140,70,.35);border-radius:12px;border-bottom-left-radius:4px;
  width:fit-content;margin-bottom:11px}
#typing i{width:6px;height:6px;border-radius:50%;background:#c9a66a;
  animation:tp 1s ease-in-out infinite}
#typing i:nth-child(2){animation-delay:.16s}
#typing i:nth-child(3){animation-delay:.32s}
@keyframes tp{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}
/* 快捷问题 */
.quick{display:flex;flex-wrap:wrap;gap:7px;padding:0 4px 8px}
.quick button{
  border:1px solid rgba(196,50,38,.5);background:#fff6e6;color:#b5341f;
  font-size:13px;padding:6px 11px;border-radius:16px;cursor:pointer;
  transition:transform .18s,background .2s;
}
.quick button:hover{background:#fde8d9;transform:scale(1.05)}
/* 输入区 */
#chatInput{display:flex;align-items:center;gap:7px;padding:9px 10px;
  border-top:1px solid rgba(168,120,55,.28);background:#fdf7ea}
#chatInput input{
  flex:1;min-width:0;border:1.5px solid rgba(168,120,55,.4);border-radius:18px;
  padding:9px 13px;font-size:13.5px;background:#fffcf3;color:#3c2c1a;outline:none;
}
#chatInput input:focus{border-color:#c43328}
#chatSend{
  width:36px;height:36px;border-radius:50%;border:0;flex:none;cursor:pointer;
  background:linear-gradient(135deg,#d34a3a,#b5341f);color:#fff7ea;font-size:15px;
  display:flex;align-items:center;justify-content:center;
  transition:transform .18s;
}
#chatSend:hover{transform:scale(1.08)}
#chatSend:active{transform:scale(.94)}
/* 面板打开时图标下沉隐藏 */
#chatFab.mini{opacity:0;pointer-events:none;transform:scale(.6)}

/* ---------- 翻页玩法引导气泡（芨芨龙说话） ---------- */
#chatGuide{position:fixed;z-index:121;max-width:min(300px,80vw);
  background:rgba(255,252,242,.97);color:#3c2c1a;
  padding:10px 14px;border-radius:13px;border:1.5px solid rgba(196,50,38,.35);
  font-size:14px;line-height:1.55;font-weight:600;letter-spacing:.01em;
  box-shadow:0 8px 26px rgba(70,35,18,.3),0 0 0 1px rgba(255,248,236,.9) inset;
  opacity:0;transform:translateY(10px) scale(.95);pointer-events:none;
  transition:opacity .32s ease,transform .32s cubic-bezier(.2,1.3,.35,1)}
#chatGuide.show{opacity:1;transform:translateY(0) scale(1)}
#chatGuide .gt{position:absolute;left:50%;bottom:-10px;margin-left:-9px;
  width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;
  border-top:10px solid rgba(255,252,242,.97);
  filter:drop-shadow(0 1px 1px rgba(70,35,18,.18))}
/* 可点引导态（P1 封面）：呼吸光晕 + 轻浮动，暗示可以点 */
#chatGuide.tap{pointer-events:auto;cursor:pointer;
  animation:guideFloat 2.2s ease-in-out infinite,guidePulse 1.7s ease-in-out infinite}
@keyframes guideFloat{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-6px) scale(1.02)}}
@keyframes guidePulse{
  0%,100%{box-shadow:0 8px 26px rgba(70,35,18,.3),0 0 0 1px rgba(255,248,236,.9) inset,0 0 0 0 rgba(196,50,38,.4)}
  50%{box-shadow:0 8px 26px rgba(70,35,18,.3),0 0 0 1px rgba(255,248,236,.9) inset,0 0 0 10px rgba(196,50,38,0)}}