/* ── 桌宠小螃蟹（chai 的浮窗，可拎可放） ────────── */
  /* 跟启动 SplashView 同造型：陶土橙 #dc8569，14×8 像素主体 + 两侧小角 + 4 腿 + 地面线 */
  .crab-pet {
    position: fixed;
    width: 64px; height: 64px;
    z-index: 80;                  /* 高于 float-btn(55)，低于 sidebar(95) */
    cursor: grab;
    touch-action: none;           /* 让 pointer 接管，不被滚动吃掉 */
    -webkit-user-select: none; user-select: none;
    -webkit-tap-highlight-color: transparent;
    will-change: transform, top, left;
    pointer-events: auto;
  }
  .crab-pet.dragging { cursor: grabbing; z-index: 81; }
  .crab-pet svg.crab-svg {
    display: block;
    width: 100%; height: 100%;
    overflow: visible;
    transform-origin: 50% 70%;     /* wobble/弹跳的支点在脚附近 */
    transition: transform 0.18s ease;
  }
  .crab-pet.dragging svg.crab-svg { transition: none; }

  /* 呼吸以脚底 y=18 为支点轻微伸缩；站立时脚不离开输入框上沿。 */
  .crab-pet .crab-bob {
    animation: crab-breathe 1s ease-in-out infinite alternate;
    transform-box: view-box;
    transform-origin: 50% 90%;
  }
  .crab-pet.dragging .crab-bob { animation: none; }
  @keyframes crab-breathe {
    0%   { transform: scaleY(1); }
    100% { transform: scaleY(1.05); }
  }

  /* 眼睛：眨眼瞬时切高度，张望整体 translate */
  .crab-pet .crab-eye   { transition: height 0.09s ease; }
  .crab-pet .crab-eyes  { transition: transform 0.32s ease; transform-origin: center; }

  /* 手脚动画：
     - idle 时手脚都完全不动（chai 反馈：手乱动太诡异；要动得配合表情/姿势一起做）
     - 未来做姿势动画（走路 / 蹲下打电脑 / 挥手）按 sprite 切像素，不在这里做持续摆动 */
  .crab-pet .crab-arm,
  .crab-pet .crab-leg {
    transform-box: fill-box;
    transform-origin: 50% 50%;
  }

  /* 拖动/飞行/睡眠时不应该再挥手踏步 */
  .crab-pet.dragging .crab-arm,
  .crab-pet.dragging .crab-leg,
  .crab-pet.sleeping .crab-arm,
  .crab-pet.sleeping .crab-leg {
    animation: none;
  }

  /* ── 面部表情切换：通过 data-eyes / data-tear 属性切 ──
     default=竖条 / smile=^ ^（哈欠+笑） / closed=— —（睡眠） / squint=> <（兴奋）
     全用 visibility 切显隐，不留过渡，纯像素 snap 感。 */
  .crab-pet .crab-eyes-smile,
  .crab-pet .crab-eyes-closed,
  .crab-pet .crab-eyes-squint,
  .crab-pet .crab-eyes-groove { visibility: hidden; }
  .crab-pet[data-eyes="smile"]  .crab-eyes-default { visibility: hidden; }
  .crab-pet[data-eyes="smile"]  .crab-eyes-smile   { visibility: visible; }
  .crab-pet[data-eyes="closed"] .crab-eyes-default { visibility: hidden; }
  .crab-pet[data-eyes="closed"] .crab-eyes-closed  { visibility: visible; }
  .crab-pet[data-eyes="squint"] .crab-eyes-default { visibility: hidden; }
  .crab-pet[data-eyes="squint"] .crab-eyes-squint  { visibility: visible; }
  .crab-pet[data-eyes="groove"] .crab-eyes-default { visibility: hidden; }
  .crab-pet[data-eyes="groove"] .crab-eyes-groove  { visibility: visible; }
  .viewer-non .crab-red-cord { display: none; }
  .crab-pet .crab-bow { display: none; }
  .viewer-non .crab-pet .crab-bow { display: inline; }
  .crab-pet .crab-eyes-sad,
  .crab-pet .crab-eyes-love { visibility: hidden; }
  .crab-pet[data-eyes="sad"]  .crab-eyes-default { visibility: hidden; }
  .crab-pet[data-eyes="sad"]  .crab-eyes-sad     { visibility: visible; }
  .crab-pet[data-eyes="love"] .crab-eyes-default { visibility: hidden; }
  .crab-pet[data-eyes="love"] .crab-eyes-love    { visibility: visible; }

  /* 口水滴：打哈欠时从脚下漏一颗（不画嘴） */
  .crab-pet .crab-tear { opacity: 0; }
  .crab-pet[data-tear="show"] .crab-tear {
    opacity: 1;
    animation: crab-tear-drop 0.75s ease-in forwards;
  }
  @keyframes crab-tear-drop {
    0%   { transform: translateY(0);    opacity: 0.9; }
    70%  { transform: translateY(1.2px); opacity: 0.9; }
    100% { transform: translateY(3px);  opacity: 0;   }
  }

  /* 眼睛瞟动：用 steps(2) 模拟像素 snap，幅度也加大才看得出 */
  .crab-pet .crab-eyes { transition: transform 0.18s steps(2, end) !important; }

  /* 双击/连击触发的红心飘动（JS 动态插入 .crab-heart span） */
  .crab-heart {
    position: absolute;
    top: 4px;
    left: 50%;
    font: 700 16px/1 -apple-system, system-ui, sans-serif;
    color: #e57373;
    pointer-events: none;
    user-select: none;
    --dx: 0px;
    animation: crab-heart-float 1.4s ease-out forwards;
  }
  @keyframes crab-heart-float {
    0%   { opacity: 0; transform: translate(calc(-50% + var(--dx)), 0)     scale(0.5); }
    25%  { opacity: 1; transform: translate(calc(-50% + var(--dx)), -12px) scale(1.2); }
    100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), -40px) scale(0.7); }
  }

  /* ── mood 层：thinking / typing / alert（套在 idle 之上） ──
     默认全部隐藏；JS 在 streaming 时切 data-mood 属性。
     遵循 chai 像素风原则：3 个 dot 用 step(1) 切，不要平滑 fade；
     手敲用 sprite 切 y 不要 rotate 平滑；眼睛扫用 transform 但 step(2) snap。 */
  .crab-pet .crab-think,
  .crab-pet .crab-alert,
  .crab-pet .crab-sparkle { visibility: hidden; }

  /* —— thinking：气泡浮现 + 3 dot 依次亮 —— */
  .crab-pet[data-mood="thinking"] .crab-think { visibility: visible; }
  .crab-pet[data-mood="thinking"] .crab-think-dot { opacity: 0; }
  .crab-pet[data-mood="thinking"] .crab-think-dot.dot-1 {
    animation: crab-thinkdot-1 1.5s steps(1, end) infinite;
  }
  .crab-pet[data-mood="thinking"] .crab-think-dot.dot-2 {
    animation: crab-thinkdot-2 1.5s steps(1, end) infinite;
  }
  .crab-pet[data-mood="thinking"] .crab-think-dot.dot-3 {
    animation: crab-thinkdot-3 1.5s steps(1, end) infinite;
  }
  @keyframes crab-thinkdot-1 {
    0%, 100%      { opacity: 0; }
    8%, 86%       { opacity: 1; }
  }
  @keyframes crab-thinkdot-2 {
    0%, 28%, 100% { opacity: 0; }
    30%, 86%      { opacity: 1; }
  }
  @keyframes crab-thinkdot-3 {
    0%, 52%, 100% { opacity: 0; }
    54%, 86%      { opacity: 1; }
  }

  /* —— typing：JS 直接改 arm rect 的 y 切帧，CSS 这里禁掉 transition —— */
  .crab-pet[data-mood="typing"] .crab-arm {
    transition: none !important;
  }

  /* —— alert：!气泡 + 跳两下循环 ——
     8s 周期：前 ~1s 跳两下，剩 7s 静止（让长 alert 仍有节奏感，不是死气沉沉的静"!"） */
  .crab-pet[data-mood="alert"] .crab-alert { visibility: visible; }
  .crab-pet[data-mood="alert"] .crab-bob {
    animation: crab-alert-jolt 8s ease-in-out infinite;
  }
  @keyframes crab-alert-jolt {
    0%, 13%, 100% { transform: translateY(0); }
    3%             { transform: translateY(-2px); }
    6%             { transform: translateY(0); }
    10%            { transform: translateY(-2px); }
  }

  /* —— happy sparkle：3 颗错峰 pop —— */
  .crab-pet[data-sparkle="show"] .crab-sparkle { visibility: visible; }
  .crab-pet[data-sparkle="show"] .sparkle {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: crab-sparkle-pop 0.85s ease-out forwards;
  }
  .crab-pet[data-sparkle="show"] .sparkle-2 { animation-delay: 0.15s; }
  .crab-pet[data-sparkle="show"] .sparkle-3 { animation-delay: 0.30s; }
  @keyframes crab-sparkle-pop {
    0%   { opacity: 0; transform: scale(0.4); }
    35%  { opacity: 1; transform: scale(1.6); }
    60%  { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.6); }
  }

  /* —— juggling（听歌）：戴耳机 + vv 陶醉眼 + 默认手藏于耳罩内 —— */
  .crab-pet .crab-headphones { visibility: hidden; }
  .crab-pet[data-mood="juggling"] .crab-headphones { visibility: visible; }
  /* juggling 时默认手 col 4-5 / 14-15 y=12-13 被耳罩自然覆盖；明确隐藏避免颜色透出 */
  .crab-pet[data-mood="juggling"] .crab-arm { visibility: hidden; }
  .crab-pet[data-mood="juggling"] .crab-leg {
    transition: none !important;   /* JS 直接改 x 切帧（摆腿），不要 transition */
  }

  /* —— idea（想到了）：小灯泡 + 右手举起指着 —— */
  .crab-pet .crab-idea { visibility: hidden; }
  .crab-pet[data-mood="idea"] .crab-idea { visibility: visible; }
  /* idea 时遮住默认右手（被举起的右手 sprite 替代） */
  .crab-pet[data-mood="idea"] .crab-arm-r { visibility: hidden; }

  /* ════ 三个情绪表情：生气 angry / 委屈 sad / 冒爱心 love（双击随机 + Non 远程触发）════ */
  .crab-pet .crab-anger,
  .crab-pet .crab-sad-tear,
  .crab-pet .crab-love-hearts { visibility: hidden; }

  /* 生气：怒气筋一跳一跳 + 身体高频抖（钳子由 JS 逐帧挥）*/
  .crab-pet[data-mood="angry"] .crab-anger {
    visibility: visible;   /* 静态稳稳显示，整段生气一直清楚在，不缩放闪 */
  }
  .crab-pet[data-mood="angry"] .crab-arm { transition: none !important; }
  .crab-pet[data-mood="angry"] .crab-bob { animation: crab-angry-shake 0.12s steps(2, end) infinite alternate; }
  @keyframes crab-angry-shake { 0% { transform: translateX(-0.6px); } 100% { transform: translateX(0.6px); } }
  @keyframes crab-anger-throb { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } }

  /* 委屈：泪珠涌出 + 身体发抖（擦泪由 JS 接力）*/
  .crab-pet[data-mood="sad"] .crab-sad-tear {
    visibility: visible;   /* 两眼泪珠静静挂着，不往下流 */
  }
  .crab-pet[data-mood="sad"] .crab-bob { animation: crab-sad-quiver 0.22s steps(2, end) infinite alternate; }
  @keyframes crab-sad-quiver { 0% { transform: translateX(-0.3px); } 100% { transform: translateX(0.3px); } }
  @keyframes crab-tear-swell { 0% { opacity: 0; transform: translateY(0); } 25% { opacity: 1; transform: translateY(0); } 100% { opacity: 0.35; transform: translateY(2.5px); } }

  /* 冒爱心：头顶飘三颗心 + 身体弹跳 */
  .crab-pet[data-mood="love"] .crab-love-hearts { visibility: visible; }
  .crab-pet[data-mood="love"] .crab-bob { animation: crab-love-bounce 0.6s ease-in-out infinite; }
  @keyframes crab-love-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-0.6px); } }
  .crab-pet .crab-love-heart { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
  .crab-pet[data-mood="love"] .crab-love-heart-1 { animation: crab-love-float 1.4s ease-out infinite; }
  .crab-pet[data-mood="love"] .crab-love-heart-2 { animation: crab-love-float 1.4s ease-out infinite 0.46s; }
  .crab-pet[data-mood="love"] .crab-love-heart-3 { animation: crab-love-float 1.4s ease-out infinite 0.92s; }
  @keyframes crab-love-float { 0% { opacity: 0; transform: translateY(0) scale(.5); } 25% { opacity: 1; transform: translateY(-2px) scale(1); } 100% { opacity: 0; transform: translateY(-7px) scale(.7); } }

  /* 睡眠态：温柔躺下盖被子（设计师交付）—— 轻微压扁 + 收手脚 + 盖粉被子 + 抱被手。 */
  .crab-pet.sleeping svg.crab-svg {
    transform: translateY(2px) scaleY(0.9);
    transform-origin: 50% 100%;
    transition: transform 0.5s ease;
  }
  /* 躺下时原本的手脚收起，露出被子和抱被手 */
  .crab-pet.sleeping .crab-leg { animation: none !important; visibility: hidden; }
  .crab-pet.sleeping .crab-arm { animation: none !important; visibility: hidden; }
  /* 被子 + 抱被手：平时藏，睡觉时露 */
  .crab-pet .crab-blanket,
  .crab-pet .crab-sleep-hands { visibility: hidden; }
  .crab-pet.sleeping .crab-blanket { visibility: visible; }
  .crab-pet.sleeping .crab-sleep-hands { visibility: visible; }
  .crab-pet.sleeping .crab-bob {
    animation: crab-snore 2.6s ease-in-out infinite alternate;
  }
  @keyframes crab-snore {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-0.25px); }
  }
  /* z：3 个由小到大，从脑袋右上往上飘出去到螃蟹外面，错峰循环（小 z 刚冒头 → 大 z 飘到上方）*/
  .crab-z {
    position: absolute;
    font-weight: 700; line-height: 1;
    font-family: -apple-system, system-ui, sans-serif;
    color: #b8a999;
    opacity: 0;
    pointer-events: none;
    user-select: none;
  }
  .crab-z1 { font-size: 10px; top: 31px; left: 42px; }
  .crab-z2 { font-size: 14px; top: 23px; left: 47px; }
  .crab-pet.sleeping .crab-z1 { animation: crab-z-rise 3s ease-in-out infinite; }
  .crab-pet.sleeping .crab-z2 { animation: crab-z-rise 3s ease-in-out infinite 1s; }
  @keyframes crab-z-rise {
    0%   { opacity: 0;    transform: translate(0, 4px)   scale(0.7); }
    25%  { opacity: 0.95; }
    60%  { opacity: 0.95; }
    100% { opacity: 0;    transform: translate(5px, -8px)  scale(1.12); }
  }

@media(prefers-reduced-motion:reduce){.crab-pet *{animation:none!important;transition:none!important}}