.dog-pet {
  --dog-size: 150px;
  --dog-lift: 0px;
  position: fixed;
  left: max(16px, env(safe-area-inset-left));
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + var(--dog-lift));
  width: calc(var(--dog-size) * 1.2 + 40px);
  height: calc(var(--dog-size) + 36px);
  z-index: 25;
  pointer-events: none;
}
.dog-pet-stage { position: absolute; left: 0; bottom: 0; width: calc(var(--dog-size) * 1.2); height: var(--dog-size); }
.dog-pet .dog-pet-target {
  position: absolute; left: 0; bottom: 0; width: var(--dog-size); height: var(--dog-size);
  min-height: 0; padding: 0; border: 0; border-radius: 6px; background: transparent;
  box-shadow: none; pointer-events: auto; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.dog-pet .dog-pet-target:hover { background: transparent; border: 0; }
.dog-pet-target img { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; pointer-events: none; user-select: none; transform-origin: 60% 98%; filter: drop-shadow(0 1px 1px #ffffff70); }
.dog-pet-animation { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; pointer-events: none; transform-origin: 60% 98%; filter: drop-shadow(0 1px 1px #ffffff70); }
/* Compensate for each source image's transparent pixels below the body. */
.dog-pet-target img[data-pose="idle"] { bottom: calc(var(--dog-size) * -0.01276); }
.dog-pet-target img[data-pose="sleep"] { bottom: calc(var(--dog-size) * -0.01989); }
.dog-pet[data-state="sleep"] .dog-pet-target { width: calc(var(--dog-size) * 1.2); height: calc(var(--dog-size) * .64); }
.dog-pet[data-state="idle"] img[data-pose="idle"] { animation: dog-pet-breathe 4.5s ease-in-out infinite; }
.dog-pet[data-state="idle"] .dog-pet-animation { animation: dog-pet-breathe 4.5s ease-in-out infinite; }
.dog-pet[data-animation] .dog-pet-animation { animation: none; }
.dog-pet[data-idle-action="lean"] img[data-pose="idle"] { animation: dog-pet-lean .8s ease-in-out; }
.dog-pet[data-idle-action="bob"] img[data-pose="idle"] { animation: dog-pet-bob .8s ease-in-out; }
.dog-pet[data-paused="true"] img, .dog-pet[data-paused="true"] canvas { animation: none !important; }
.dog-pet-greeting { position: absolute; right: 2px; bottom: calc(100% + 4px); padding: 4px 8px; border-radius: 6px; border: 1px solid #e0e4e3; background: #fff; color: #3b5f53; font-size: 12px; line-height: 1.5; white-space: nowrap; }
.dog-pet .dog-pet-toggle { position: absolute; left: calc(var(--dog-size) * 1.2 + 4px); bottom: 0; width: 34px; height: 34px; min-height: 34px; padding: 0; border-radius: 50%; background: #ffffffec; color: #727579; pointer-events: auto; }
.dog-pet-toggle .icon { width: 16px; height: 16px; }
.dog-pet-toggle::after { content: attr(data-tooltip); position: absolute; left: 0; bottom: 41px; padding: 4px 7px; border-radius: 4px; background: #292d30; color: #fff; font-size: 11px; white-space: nowrap; opacity: 0; pointer-events: none; }
.dog-pet-toggle:hover::after, .dog-pet-toggle:focus-visible::after { opacity: 1; }
.dog-pet[data-visible="false"], .dog-pet[data-obstructed="true"] { width: 34px; height: 34px; }
.dog-pet[data-visible="false"] .dog-pet-toggle, .dog-pet[data-obstructed="true"] .dog-pet-toggle { left: 0; }
.dog-pet[data-obstructed="true"] .dog-pet-stage { visibility: hidden; }
@keyframes dog-pet-breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.008); } }
@keyframes dog-pet-lean { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-1.5deg); } }
@keyframes dog-pet-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@media (max-width: 600px), (max-height: 500px) {
  .dog-pet { --dog-size: 90px; left: max(10px, env(safe-area-inset-left)); bottom: calc(max(10px, env(safe-area-inset-bottom)) + var(--dog-lift)); }
}
@media (prefers-reduced-motion: reduce) {
  .dog-pet img, .dog-pet canvas { animation: none !important; }
}
@media print { .dog-pet { display: none !important; } }