.lz-web-pet {
  --lz-pet-effective-size: var(--lz-pet-size);
  position: fixed;
  bottom: var(--lz-pet-bottom);
  width: var(--lz-pet-effective-size);
  height: calc(var(--lz-pet-effective-size) * 1.083333);
  box-sizing: content-box;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  contain: layout style;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .2));
  transition: opacity .16s ease;
}

.lz-web-pet.lz-ready {
  opacity: 1;
  pointer-events: auto;
}

.lz-position-right { right: var(--lz-pet-side); }
.lz-position-left { left: var(--lz-pet-side); }
.lz-web-pet.lz-dragging { cursor: grabbing; }

.lz-pet-stage {
  position: absolute;
  inset: 0;
  overflow: visible;
}

.lz-pet-sprite {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none;
  background-repeat: no-repeat;
  background-position: 0 0;
  cursor: grab;
  outline: none;
  will-change: background-position;
  -webkit-tap-highlight-color: transparent;
}

.lz-dragging .lz-pet-sprite { cursor: grabbing; }
.lz-pet-sprite:focus-visible { filter: drop-shadow(0 0 6px rgba(255, 255, 255, .9)); }

/* 主精灵图是 8 列 × 11 行，动作行、帧数和位移由脚本统一设置。 */
.lz-pet-sprite.lz-action-sheet {
  background-image: var(--lz-idle);
  background-size: 800% 1100%;
  background-position-y: var(--lz-row-position, 0%);
  animation: lzPetSheet var(--lz-action-duration, 1.4s) steps(var(--lz-action-frames, 7)) infinite;
}

/* pet-smoking.webp 是 8 帧，pet-kowtow.webp 是 12 帧。 */
.lz-pet-sprite.lz-action-smoking {
  background-image: var(--lz-smoking);
  background-size: 800% 100%;
  animation: lzPetSmoking var(--lz-action-duration, .67s) steps(8) infinite;
}

.lz-pet-sprite.lz-action-kowtow {
  background-image: var(--lz-kowtow);
  background-size: 1200% 100%;
  animation: lzPetKowtow var(--lz-action-duration, 1s) steps(12) infinite;
}

button.lz-pet-bubble {
  all: unset;
  position: absolute;
  bottom: calc(100% + 8px);
  display: block;
  box-sizing: border-box;
  width: max-content;
  max-width: min(240px, calc(100vw - 24px));
  min-width: min(120px, calc(100vw - 24px));
  padding: 10px 13px !important;
  border: 1px solid rgba(0, 0, 0, .08) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .16) !important;
  color: #222 !important;
  font: 400 13px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  text-align: left !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

button.lz-pet-bubble[hidden] { display: none !important; }

.lz-web-pet[data-bubble-side="left"] .lz-pet-bubble {
  right: 38%;
  left: auto;
}

.lz-web-pet[data-bubble-side="right"] .lz-pet-bubble {
  right: auto;
  left: 38%;
}

.lz-pet-bubble::after {
  content: "";
  position: absolute;
  bottom: -7px;
  width: 14px;
  height: 14px;
  background: inherit;
  transform: rotate(45deg);
  border-right: 1px solid rgba(0, 0, 0, .06);
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}

[data-bubble-side="left"] .lz-pet-bubble::after { right: 24px; }
[data-bubble-side="right"] .lz-pet-bubble::after { left: 24px; }

@keyframes lzPetSheet {
  to { background-position-x: var(--lz-action-shift, 100%); }
}

@keyframes lzPetSmoking {
  to { background-position-x: 114.285714%; }
}

@keyframes lzPetKowtow {
  to { background-position-x: 109.090909%; }
}

@media (max-width: 782px) {
  .lz-web-pet {
    --lz-pet-effective-size: min(var(--lz-pet-mobile-size), 42vw);
  }

  button.lz-pet-bubble {
    max-width: min(190px, calc(100vw - 24px));
    font-size: 12px !important;
  }

  .lz-hide-mobile { display: none !important; }
}

@media (min-width: 783px) {
  .lz-hide-desktop { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .lz-web-pet { transition: none; }
}