/* ================================================================
 * AI宠物 PetAgent · 样式
 * 不依赖任何主题：颜色走 var(--st-primary, 默认靛蓝) 兜底，
 * 主题有设计令牌就自动跟随，没有也一样好看。
 * ================================================================ */
#pet-agent-root{
    position:fixed; left:50vw; bottom:0; z-index:99999;
    transform:translateX(-50%);
    -webkit-user-select:none; user-select:none;
    touch-action:none;
    filter:none; pointer-events:none;
}
#pet-agent-root *{box-sizing:border-box; margin:0; padding:0}
#pet-agent-root .pa-hit{pointer-events:auto; cursor:grab; position:relative; display:block}
#pet-agent-root.pa-grabbing .pa-hit{cursor:grabbing}

/* 宠物本体（帧图统一朝右；朝左时镜像） */
.pa-stage{position:relative; transform-origin:bottom center}
.pa-face{transform:scaleX(var(--pa-face,1)); transform-origin:bottom center; transition:transform .12s}
.pa-anim{transform-origin:bottom center; animation:pa-breathe 4s ease-in-out infinite}
.pa-sprite{
    display:block; height:var(--pa-h,220px); width:auto;
    -webkit-user-drag:none; user-drag:none; pointer-events:none;
    filter:drop-shadow(0 10px 16px rgba(40,40,80,.30));
    image-rendering:auto;
}
.pa-shadow{
    position:absolute; left:50%; bottom:-6px; width:46%; height:16px;
    transform:translateX(-50%) scaleX(var(--pa-shsc,1));
    background:radial-gradient(closest-side, rgba(50,45,90,.32), transparent 72%);
    border-radius:50%; filter:blur(2px); opacity:var(--pa-shop,.55);
}

/* ---- 帧不足时的 CSS 降级动画（对整个 stage 施加） ---- */
@keyframes pa-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.pa-loco-walk .pa-anim{animation:pa-walkbob .44s ease-in-out infinite}
.pa-loco-run  .pa-anim{animation:pa-walkbob .29s ease-in-out infinite}
@keyframes pa-walkbob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-6px) rotate(2deg)}}
.pa-g-point .pa-anim{animation:pa-glean .8s ease forwards}
@keyframes pa-glean{to{transform:rotate(-9deg) translateY(-2px)}}
.pa-g-bow .pa-anim{animation:pa-gbow 1.1s ease}
@keyframes pa-gbow{0%,100%{transform:none}35%,70%{transform:translateY(6px) rotate(8deg) scaleY(.92)}}
.pa-g-cheer .pa-anim{animation:pa-gcheer .75s cubic-bezier(.3,1.5,.5,1)}
@keyframes pa-gcheer{0%{transform:none}45%{transform:translateY(-42px)}100%{transform:none}}
.pa-g-surprised .pa-anim{animation:pa-gsurp .6s cubic-bezier(.3,1.5,.5,1)}
@keyframes pa-gsurp{0%{transform:none}35%{transform:translateY(-14px) rotate(-5deg)}100%{transform:none}}
.pa-g-shy .pa-anim{animation:pa-gshy 1s ease}
@keyframes pa-gshy{0%,100%{transform:none}40%,70%{transform:translateY(4px) scale(.93)}}
.pa-g-dizzy .pa-anim{animation:pa-gdizzy 1.2s ease-in-out}
@keyframes pa-gdizzy{0%,100%{transform:none}25%{transform:rotate(8deg)}55%{transform:rotate(-8deg)}80%{transform:rotate(5deg)}}
.pa-g-nod .pa-anim{animation:pa-gnod .6s ease}
@keyframes pa-gnod{0%,100%{transform:none}50%{transform:translateY(3px) rotate(3deg)}}
.pa-g-hop .pa-anim{animation:pa-ghop .5s ease}
@keyframes pa-ghop{0%,100%{transform:none}45%{transform:translateY(-26px)}}
.pa-g-spin .pa-anim{animation:pa-gspin .9s ease-in-out}
@keyframes pa-gspin{to{transform:rotateY(360deg)}}
.pa-sleeping .pa-anim{animation:pa-breathe 5.4s ease-in-out infinite}
/* VRM 模式：真3D转身取代画布镜像 */
.pa-vrm .pa-face{transform:none}
/* Live2D 模式：模型自带呼吸/物理摆动，关闭 CSS 呼吸；画布带投影 */
.pa-live2d .pa-anim{animation:none}
.pa-live2d .pa-stage canvas{display:block; filter:drop-shadow(0 10px 16px rgba(40,40,80,.30))}
.pa-sleeping .pa-sprite{filter:drop-shadow(0 10px 16px rgba(40,40,80,.30)) saturate(.82) brightness(.95)}

/* ---- 气泡 ---- */
.pa-bubble{
    position:absolute; left:50%; bottom:calc(100% + 10px);
    transform:translateX(-50%) translateY(6px) scale(.92);
    min-width:56px; max-width:240px; padding:10px 14px;
    border-radius:16px; font:600 13.5px/1.55 "PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
    text-align:left; white-space:pre-wrap; word-break:break-word;
    color:var(--st-text, #2a2d3d);
    background:var(--pa-glass, rgba(255,255,255,.92));
    -webkit-backdrop-filter:blur(16px) saturate(1.5); backdrop-filter:blur(16px) saturate(1.5);
    border:1px solid rgba(140,150,200,.28);
    box-shadow:0 12px 34px rgba(40,45,95,.22);
    opacity:0; visibility:hidden; transition:opacity .18s, transform .18s;
    pointer-events:none;
}
.pa-bubble::after{
    content:""; position:absolute; left:50%; bottom:-7px; width:13px; height:13px;
    transform:translateX(-50%) rotate(45deg);
    background:inherit; border-right:1px solid rgba(140,150,200,.28); border-bottom:1px solid rgba(140,150,200,.28);
}
.pa-bubble.pa-show{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0) scale(1)}

/* ---- 粒子特效 ---- */
.pa-fx{position:absolute; left:50%; bottom:30%; width:0; height:0; pointer-events:none}
.pa-p{
    position:absolute; left:0; bottom:0; font-size:19px; will-change:transform,opacity;
    animation:pa-pfloat 1.15s ease-out forwards;
}
@keyframes pa-pfloat{
    0%{transform:translate(-50%,0) scale(.4); opacity:0}
    16%{opacity:1}
    100%{transform:translate(calc(-50% + var(--pa-dx,0px)), var(--pa-dy,-80px)) scale(var(--pa-ps,1)); opacity:0}
}

/* ---- 指向箭头 ---- */
.pa-pointer{
    position:fixed; z-index:99998; font-size:26px; pointer-events:none;
    color:var(--st-primary, #6d78c9);
    filter:drop-shadow(0 2px 5px rgba(0,0,0,.28));
    opacity:0; transition:opacity .2s;
    animation:pa-pbounce .8s ease-in-out infinite;
}
.pa-pointer.pa-show{opacity:1}
@keyframes pa-pbounce{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,-62%)}}
.pa-halo{
    position:fixed; z-index:99997; border:2px dashed var(--st-primary, #6d78c9); border-radius:10px;
    pointer-events:none; opacity:0; transition:opacity .25s;
    box-shadow:0 0 0 4px rgba(109,120,201,.16);
}
.pa-halo.pa-show{opacity:1; animation:pa-halop 1.4s ease-in-out infinite}
@keyframes pa-halop{0%,100%{box-shadow:0 0 0 4px rgba(109,120,201,.16)}50%{box-shadow:0 0 0 10px transparent}}

/* ---- 头旁聊天挂件按钮 ---- */
.pa-chat-fab{
    position:absolute; right:-14px; top:5%; z-index:2;
    width:34px; height:34px; padding:0; display:grid; place-items:center;
    border:1px solid rgba(255,255,255,.55); border-radius:50%; cursor:pointer;
    color:var(--st-primary, #6d78c9);
    background:var(--pa-glass, rgba(255,255,255,.88));
    -webkit-backdrop-filter:blur(14px) saturate(1.5); backdrop-filter:blur(14px) saturate(1.5);
    box-shadow:0 6px 18px rgba(50,60,110,.28), inset 0 1px 0 rgba(255,255,255,.6);
    animation:pa-fab-bob 3.2s ease-in-out infinite;
    transition:transform .18s, box-shadow .18s, color .18s;
}
.pa-chat-fab:hover{transform:scale(1.14); box-shadow:0 10px 24px rgba(50,60,110,.36), inset 0 1px 0 rgba(255,255,255,.6)}
.pa-chat-fab:active{transform:scale(.94)}
.pa-chat-fab.pa-on{color:#fff; background:linear-gradient(180deg, var(--st-primary, #7b86d6), var(--st-primary-hover, #5f6bc2)); border-color:transparent}
.pa-chat-fab svg{display:block}
@keyframes pa-fab-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.pa-chat-fab::after{
    content:""; position:absolute; inset:-3px; border-radius:50%;
    border:1px solid rgba(109,120,201,.35); opacity:0; transform:scale(.8);
    transition:opacity .3s, transform .3s;
}
.pa-chat-fab:hover::after{opacity:1; transform:scale(1)}

/* ---- AI 聊天面板（跟随人物侧边弹出的玻璃对话窗） ---- */
.pa-chat{
    position:fixed; left:0; bottom:0; z-index:100000;
    width:min(332px, calc(100vw - 24px));
    display:none; flex-direction:column; overflow:hidden;
    border-radius:22px; border:1px solid rgba(255,255,255,.5);
    background:var(--pa-glass-strong, rgba(255,255,255,.9));
    -webkit-backdrop-filter:blur(30px) saturate(1.65); backdrop-filter:blur(30px) saturate(1.65);
    box-shadow:0 24px 70px rgba(35,40,90,.34), inset 0 1px 0 rgba(255,255,255,.65);
    font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
    transform-origin:bottom left;
}
.pa-chat.pa-chat--left{transform-origin:bottom right}
.pa-chat.pa-open{display:flex; animation:pa-chat-pop .26s cubic-bezier(.34,1.4,.44,1)}
@keyframes pa-chat-pop{0%{opacity:0; transform:translateY(14px) scale(.86)}100%{opacity:1; transform:none}}
/* 指向人物的小尾巴 */
.pa-chat::before{
    content:""; position:absolute; bottom:26px; left:-6px; width:14px; height:14px;
    transform:rotate(45deg); border-radius:3px;
    background:inherit;
    border-left:1px solid rgba(255,255,255,.5); border-bottom:1px solid rgba(255,255,255,.5);
}
.pa-chat--left::before{left:auto; right:-6px; border:0; border-right:1px solid rgba(255,255,255,.5); border-top:1px solid rgba(255,255,255,.5)}

.pa-chat-head{
    display:flex; align-items:center; gap:10px; padding:11px 12px 10px 14px;
    background:linear-gradient(180deg, rgba(255,255,255,.5), transparent);
    border-bottom:1px solid rgba(140,150,200,.16);
}
.pa-chat-ava{
    width:38px; height:38px; border-radius:50%; overflow:hidden; flex:0 0 38px;
    border:2px solid rgba(255,255,255,.85);
    background:linear-gradient(180deg, #eef0fb, #dfe3f6);
    box-shadow:0 4px 10px rgba(60,70,130,.22);
}
.pa-chat-ava img{width:100%; height:200%; object-fit:cover; object-position:top center; display:block}
.pa-chat-who{display:grid; line-height:1.25; min-width:0}
.pa-chat-who strong{font-size:14px; font-weight:800; color:var(--st-text, #2a2d3d); letter-spacing:.3px}
.pa-chat-who small{display:flex; align-items:center; gap:5px; font-size:11px; color:var(--st-text-muted, #8b90ab)}
.pa-dot{width:6px; height:6px; border-radius:50%; background:#4fc07d; box-shadow:0 0 5px #4fc07d; animation:pa-dot-breathe 2.4s ease-in-out infinite}
@keyframes pa-dot-breathe{0%,100%{opacity:1}50%{opacity:.45}}
.pa-chat-tools{margin-left:auto; display:flex; gap:4px}
.pa-chat-tool{
    width:28px; height:28px; display:grid; place-items:center; padding:0;
    border:0; border-radius:9px; background:transparent; cursor:pointer;
    color:var(--st-text-muted, #8b90ab); transition:background .15s, color .15s;
}
.pa-chat-tool:hover{background:rgba(109,120,201,.13); color:var(--st-primary, #6d78c9)}

.pa-chat-list{
    flex:1; min-height:120px; max-height:min(46vh, 380px); overflow-y:auto;
    padding:13px 13px 8px; display:flex; flex-direction:column; gap:9px;
    overscroll-behavior:contain; scrollbar-width:thin;
}
.pa-chat-list::-webkit-scrollbar{width:4px}
.pa-chat-list::-webkit-scrollbar-thumb{background:rgba(120,130,180,.3); border-radius:4px}
.pa-msg{
    max-width:84%; padding:9px 13px; border-radius:16px;
    font-size:13.5px; line-height:1.62; white-space:pre-wrap; word-break:break-word;
    animation:pa-msg-in .22s ease both;
}
@keyframes pa-msg-in{0%{opacity:0; transform:translateY(6px)}100%{opacity:1; transform:none}}
.pa-msg-bot{
    align-self:flex-start; color:var(--st-text, #2a2d3d);
    background:rgba(255,255,255,.78);
    border:1px solid rgba(140,150,200,.2);
    border-bottom-left-radius:6px;
    box-shadow:0 2px 8px rgba(60,70,130,.08);
}
.pa-msg-me{
    align-self:flex-end; color:#fff;
    background:linear-gradient(160deg, var(--st-primary, #7b86d6), var(--st-primary-hover, #5f6bc2));
    border-bottom-right-radius:6px;
    box-shadow:0 5px 14px rgba(95,107,194,.35);
}
.pa-msg-sys{align-self:center; color:var(--st-text-muted, #9aa0bd); font-size:11.5px; padding:2px 8px; background:rgba(130,140,190,.1); border-radius:999px}

.pa-chat-form{
    display:flex; gap:8px; align-items:center; padding:10px 12px 12px;
    border-top:1px solid rgba(140,150,200,.16);
    background:linear-gradient(0deg, rgba(255,255,255,.4), transparent);
}
.pa-chat-input{
    flex:1; min-width:0; padding:10px 15px; font:500 13.5px/1.4 inherit;
    color:var(--st-text, #2a2d3d); background:rgba(255,255,255,.65);
    border:1px solid rgba(140,150,200,.28); border-radius:999px; outline:none;
    transition:border-color .16s, box-shadow .16s, background .16s;
}
.pa-chat-input::placeholder{color:var(--st-text-muted, #9aa0bd)}
.pa-chat-input:focus{border-color:var(--st-primary, #6d78c9); background:rgba(255,255,255,.85); box-shadow:0 0 0 3px rgba(109,120,201,.16)}
.pa-chat-send{
    flex:0 0 auto; width:38px; height:38px; display:grid; place-items:center; padding:0;
    border:0; border-radius:50%; cursor:pointer; color:#fff;
    background:linear-gradient(160deg, var(--st-primary, #7b86d6), var(--st-primary-hover, #5f6bc2));
    box-shadow:0 6px 16px rgba(95,107,194,.42), inset 0 1px 0 rgba(255,255,255,.35);
    transition:transform .15s, filter .15s, box-shadow .15s;
}
.pa-chat-send svg{display:block; margin-left:1px}
.pa-chat-send:hover{transform:translateY(-1px) scale(1.05); filter:brightness(1.06)}
.pa-chat-send:active{transform:scale(.94)}
.pa-chat-send:disabled{opacity:.5; cursor:default; transform:none}
.pa-typing{display:inline-flex; gap:4px; align-items:center; padding:4px 2px}
.pa-typing i{width:6px; height:6px; border-radius:50%; background:var(--st-primary, #6d78c9); opacity:.4; animation:pa-ty 1.1s ease-in-out infinite}
.pa-typing i:nth-child(2){animation-delay:.18s}
.pa-typing i:nth-child(3){animation-delay:.36s}
@keyframes pa-ty{0%,100%{opacity:.35; transform:translateY(0)}50%{opacity:1; transform:translateY(-3px)}}

/* 手机端：底部全宽弹出 */
@media (max-width:560px){
    .pa-chat{left:8px !important; right:8px !important; bottom:8px !important; width:auto; transform-origin:bottom center}
    .pa-chat::before{display:none}
}

/* 深色主题跟随（站点主题令牌存在时自动生效） */
:root[data-theme="dark"] .pa-bubble,
:root[data-theme="dark"] .pa-chat,
:root[data-theme="dark"] .pa-chat-fab{
    --pa-glass:rgba(30,32,48,.92); --pa-glass-strong:rgba(26,28,42,.95);
    color:#e9ecf7;
}
:root[data-theme="dark"] .pa-chat{border-color:rgba(255,255,255,.14)}
:root[data-theme="dark"] .pa-chat::before{border-color:rgba(255,255,255,.14)}
:root[data-theme="dark"] .pa-chat-head{background:linear-gradient(180deg, rgba(255,255,255,.06), transparent)}
:root[data-theme="dark"] .pa-chat-who strong{color:#e9ecf7}
:root[data-theme="dark"] .pa-msg-bot{background:rgba(52,56,84,.75); border-color:rgba(255,255,255,.12); color:#e9ecf7}
:root[data-theme="dark"] .pa-chat-input{background:rgba(40,44,66,.7); color:#e9ecf7; border-color:rgba(255,255,255,.16)}
:root[data-theme="dark"] .pa-chat-input:focus{background:rgba(40,44,66,.9)}
:root[data-theme="dark"] .pa-chat-form{background:linear-gradient(0deg, rgba(255,255,255,.04), transparent)}

/* 移动端 */
@media (max-width:560px){
    .pa-chat{right:10px; bottom:10px}
    .pa-bubble{max-width:190px; font-size:12.5px}
}

/* 无障碍：减少动态 */
@media (prefers-reduced-motion:reduce){
    .pa-anim, .pa-pointer, .pa-halo{animation:none !important}
    .pa-bubble{transition:none}
}