/* ==========================================================
   pet4.css · 「会动的小熊头」——合并版
   队友样式：悬浮 / 呼吸挤压 / 弹跳 / 左右晃 / 压扁 / 气泡 / 影子 / 右键菜单
   我的增强：① .pet4-orb 加 --skew/--sx/--sy 支持拉扯感 ② 聊天面板样式
   ========================================================== */
.pet4 {
  position: fixed;
  right: 26px;
  bottom: 24px;
  z-index: 2147483000;
  width: 0;
  height: 0;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}
.pet4 * { box-sizing: border-box; }

/* 影子 */
.pet4-shadow {
  position: absolute;
  left: 50%;
  bottom: -10px;
  width: 64px;
  height: 12px;
  margin-left: -32px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(20, 26, 40, .26), rgba(20, 26, 40, .10) 62%, transparent);
  filter: blur(1.5px);
  transform: scale(1);
  transition: transform .5s ease, opacity .5s ease;
  pointer-events: none;
}
.pet4.is-big .pet4-shadow { width: 104px; margin-left: -52px; height: 18px; bottom: -16px; }

/* 悬浮层 */
.pet4-float {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 92px;
  height: 92px;
  animation: pet4-float 4.2s ease-in-out infinite;
  pointer-events: none;
}
.pet4.is-big .pet4-float { width: 168px; height: 168px; }
@keyframes pet4-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* 主体：跟随鼠标 + 呼吸挤压 + 动作（含 --skew/--sx/--sy 拉扯感） */
.pet4-orb {
  position: absolute;
  inset: 0;
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  transform:
    translate(var(--mx, 0px), var(--my, 0px))
    rotate(var(--mt, 0deg))
    skewX(var(--skew, 0deg))
    scale(var(--sx, 1), var(--sy, 1));
  transition: transform .18s ease-out;
}
.pet4-orb:active { cursor: grabbing; }

/* 熊头图片：呼吸挤压 */
.pet4-head {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 50% 88%;
  filter: drop-shadow(0 10px 16px rgba(24, 34, 60, .16)) drop-shadow(0 2px 4px rgba(24, 34, 60, .12));
  animation: pet4-breathe 3.2s ease-in-out infinite;
  will-change: transform;
  pointer-events: none;
}
.pet4-orb.is-big .pet4-head { animation-duration: 3.8s; }
@keyframes pet4-breathe {
  0%, 100% { transform: scale(1, 1); }
  42%      { transform: scale(1.028, .972); }
  70%      { transform: scale(.986, 1.014); }
}

/* 动作：弹跳 */
.pet4-orb.is-hop .pet4-head { animation: pet4-hop .9s cubic-bezier(.22, 1.4, .36, 1); }
@keyframes pet4-hop {
  0%   { transform: scale(1.14, .86) translateY(2px); }
  28%  { transform: scale(.92, 1.10) translateY(-22px); }
  55%  { transform: scale(1.04, .96) translateY(-6px); }
  76%  { transform: scale(.98, 1.02) translateY(-1px); }
  100% { transform: scale(1, 1) translateY(0); }
}

/* 动作：左右晃 */
.pet4-orb.is-wobble .pet4-head { animation: pet4-wobble .8s ease-in-out; }
@keyframes pet4-wobble {
  0%, 100% { transform: rotate(0deg) scale(1, 1); }
  18%      { transform: rotate(-5deg) scale(1.02, .98); }
  42%      { transform: rotate(4.5deg) scale(.99, 1.01); }
  66%      { transform: rotate(-3deg) scale(1.01, .99); }
  86%      { transform: rotate(1.5deg) scale(1, 1); }
}

/* 动作：压扁再弹起 */
.pet4-orb.is-squash .pet4-head { animation: pet4-squash .55s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes pet4-squash {
  0%   { transform: scale(1.16, .82) translateY(3px); }
  55%  { transform: scale(.94, 1.08) translateY(-4px); }
  100% { transform: scale(1, 1) translateY(0); }
}

/* 气泡 */
.pet4-bubble {
  position: absolute;
  right: 4px;
  bottom: 104px;
  max-width: 230px;
  padding: 9px 12px;
  border-radius: 14px 14px 4px 14px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 8px 20px rgba(26, 34, 56, .14);
  color: #2a3142;
  font-size: 12.5px;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(6px) scale(.96);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
  white-space: pre-wrap;
}
.pet4.is-big .pet4-bubble { bottom: 180px; font-size: 13px; }
.pet4-bubble.is-on { opacity: 1; transform: translateY(0) scale(1); }

/* 夜猫模式 */
html[data-theme="night"] .pet4-head {
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .55)) drop-shadow(0 2px 5px rgba(0, 0, 0, .4));
}
html[data-theme="night"] .pet4-bubble {
  background: rgba(30, 36, 54, .97);
  color: #e8ebf6;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .5);
}
html[data-theme="night"] .pet4-shadow {
  background: radial-gradient(closest-side, rgba(0, 0, 0, .5), rgba(0, 0, 0, .2) 62%, transparent);
}

@media (max-width: 640px) {
  .pet4 { right: 14px; bottom: 14px; }
  .pet4-orb { width: 76px; height: 76px; }
  .pet4-orb.is-big { width: 132px; height: 132px; }
  .pet4-bubble { max-width: 170px; }
}

/* ---------------- 聊天面板 ---------------- */
.pet4-panel {
  position: fixed;
  left: 0; top: 0;
  width: 320px;
  max-width: calc(100vw - 24px);
  display: flex; flex-direction: column;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(20, 26, 48, .22), 0 2px 8px rgba(20, 26, 48, .12);
  overflow: hidden;
  z-index: 2147483001;
  -webkit-user-select: text;
  user-select: text;
  animation: pet4-panel-in .18s ease-out;
}
.pet4-panel[hidden] { display: none !important; }
@keyframes pet4-panel-in {
  from { opacity: 0; transform: translateY(6px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.pet4-panel-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: linear-gradient(135deg, #f5f7ff, #eef1fc);
  border-bottom: 1px solid #e7ebf7;
  cursor: grab;
  touch-action: none;
}
.pet4-panel.is-dragging .pet4-panel-head { cursor: grabbing; }
.pet4-panel-title {
  flex: 1; min-width: 0;
  font-size: 13.5px; font-weight: 700; color: #2b3245;
  display: flex; flex-direction: column; gap: 1px;
}
.pet4-panel-sub { font-size: 11px; font-weight: 500; color: #7b8398; }
.pet4-panel-x {
  flex: none;
  width: 26px; height: 26px;
  border: none; border-radius: 8px;
  background: transparent; color: #7b8398;
  font-size: 13px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
}
.pet4-panel-x:hover { background: #e6eaf6; color: #2b3245; }
.pet4-log {
  flex: 1;
  max-height: 260px; min-height: 90px;
  overflow-y: auto;
  padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
  background: #fbfcff;
}
.pet4-msg {
  max-width: 84%;
  padding: 8px 11px;
  border-radius: 12px;
  font-size: 13px; line-height: 1.55;
  word-break: break-word;
  white-space: pre-wrap;
}
.pet4-msg.ai { align-self: flex-start; background: #eef2ff; color: #2b3245; border-bottom-left-radius: 4px; }
.pet4-msg.me { align-self: flex-end; background: #4f6ef7; color: #fff; border-bottom-right-radius: 4px; }
.pet4-msg.is-typing { opacity: .65; font-style: italic; }
.pet4-inputrow {
  display: flex; gap: 8px;
  padding: 10px 12px 12px;
  border-top: 1px solid #eef1f9;
  background: #fff;
}
.pet4-inputrow input {
  flex: 1; min-width: 0;
  height: 34px; padding: 0 10px;
  border: 1px solid #e2e7f5; border-radius: 10px;
  background: #f8faff; color: #2b3245;
  font-size: 13px; outline: none;
  -webkit-user-select: text; user-select: text;
}
.pet4-inputrow input:focus { border-color: #9fb2ff; background: #fff; }
.pet4-inputrow button {
  flex: none; height: 34px; padding: 0 14px;
  border: none; border-radius: 10px;
  background: #4f6ef7; color: #fff;
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.pet4-inputrow button:hover { background: #4262ee; }
html[data-theme="night"] .pet4-panel { background: #1b2135; box-shadow: 0 18px 44px rgba(0, 0, 0, .5); }
html[data-theme="night"] .pet4-panel-head { background: linear-gradient(135deg, #232b45, #1e253c); border-bottom-color: #2c3450; }
html[data-theme="night"] .pet4-panel-title { color: #e8ebf6; }
html[data-theme="night"] .pet4-panel-sub { color: #9aa3bd; }
html[data-theme="night"] .pet4-panel-x:hover { background: #2c3450; color: #e8ebf6; }
html[data-theme="night"] .pet4-log { background: #181d2e; }
html[data-theme="night"] .pet4-msg.ai { background: #242c45; color: #dfe4f5; }
html[data-theme="night"] .pet4-inputrow { background: #1b2135; border-top-color: #2c3450; }
html[data-theme="night"] .pet4-inputrow input { background: #232b45; border-color: #313a58; color: #e8ebf6; }
html[data-theme="night"] .pet4-inputrow input:focus { background: #26304d; border-color: #5a6ea8; }

/* 右键菜单 */
.pet4-menu {
  position: fixed;
  z-index: 2147483400;
  min-width: 168px;
  padding: 6px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 12px 32px rgba(20, 28, 46, .22), 0 2px 6px rgba(20, 28, 46, .12);
  border: 1px solid rgba(20, 28, 46, .06);
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
}
.pet4-menu button {
  appearance: none;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer;
  color: #2a3142;
  font: inherit;
}
.pet4-menu button:hover { background: rgba(79, 110, 247, .1); color: #2a3a7a; }
html[data-theme="night"] .pet4-menu { background: rgba(30, 36, 54, .98); border-color: rgba(255,255,255,.08); }
html[data-theme="night"] .pet4-menu button { color: #e8ebf6; }
html[data-theme="night"] .pet4-menu button:hover { background: rgba(125, 149, 255, .18); color: #fff; }