.site-pet {
  position: fixed;
  right: 18px;
  bottom: 10px;
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(0, 245px) 112px;
  align-items: end;
  gap: 8px;
  pointer-events: none;
}

.pet-toggle,
.pet-message { pointer-events: auto; }

.pet-toggle {
  position: relative;
  width: 112px;
  height: 112px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(0 9px 10px rgba(0, 0, 0, .34));
  transform-origin: 50% 100%;
  animation: pet-drift 4.8s ease-in-out infinite;
}

.pet-toggle img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pet-toggle:focus-visible {
  outline: 2px dashed #00f5d4;
  outline-offset: 5px;
}

.pet-orbit {
  position: absolute;
  z-index: 1;
  inset: 6px;
  border: 1px dashed rgba(0, 245, 212, .65);
  border-radius: 50%;
  animation: pet-orbit-spin 14s linear infinite;
}

.pet-signal-dot {
  position: absolute;
  z-index: 3;
  right: 7px;
  top: 17px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #00f5d4;
  box-shadow: 0 0 0 4px rgba(0, 245, 212, .12), 0 0 13px #00f5d4;
  animation: pet-signal 2s ease-in-out infinite;
}

.pet-message {
  position: relative;
  margin-bottom: 44px;
  padding: 14px 38px 21px 15px;
  background: #120637;
  color: #f5e6ca;
  border: 1px solid rgba(0, 245, 212, .72);
  box-shadow: 5px 5px 0 rgba(0, 245, 212, .11), 0 15px 30px rgba(0, 0, 0, .25);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 18px) calc(100% - 12px), 100% 100%, calc(100% - 40px) calc(100% - 12px), 0 calc(100% - 12px));
  transition: opacity .18s ease, transform .18s ease;
}

.pet-message-label {
  display: block;
  margin-bottom: 5px;
  color: #00f5d4;
  font: 600 .64rem "Space Mono", monospace;
  letter-spacing: .12em;
}

.pet-message p {
  margin: 0;
  font: 500 .78rem/1.45 "Inter", Arial, sans-serif;
}

.pet-message-close {
  position: absolute;
  right: 7px;
  top: 5px;
  width: 27px;
  height: 27px;
  border: 0;
  background: transparent;
  color: #f5e6ca;
  font: 400 1.25rem/1 "Space Mono", monospace;
  cursor: pointer;
}

.pet-message-close:focus-visible { outline: 1px dashed #00f5d4; }
.message-closed .pet-message { opacity: 0; transform: translateX(12px) scale(.96); pointer-events: none; }
.message-closed .pet-toggle { animation: pet-peek 5.5s ease-in-out infinite; }

@keyframes pet-drift {
  0%, 100% { transform: translateY(4px) rotate(-1deg); }
  50% { transform: translateY(-3px) rotate(1deg); }
}

@keyframes pet-peek {
  0%, 78%, 100% { transform: translateY(34px) rotate(0); }
  84% { transform: translateY(22px) rotate(-3deg); }
  90% { transform: translateY(28px) rotate(2deg); }
}

@keyframes pet-signal {
  0%, 100% { opacity: .42; transform: scale(.75); }
  50% { opacity: 1; transform: scale(1); }
}

@keyframes pet-orbit-spin { to { transform: rotate(360deg); } }

@media (max-width: 720px) {
  .site-pet { right: 7px; bottom: 4px; grid-template-columns: minmax(0, 210px) 82px; }
  .pet-toggle { width: 82px; height: 82px; }
  .pet-message { margin-bottom: 29px; padding: 11px 33px 18px 12px; }
  .pet-message p { font-size: .64rem; }
  .pet-message-label { font-size: .48rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pet-toggle,
  .pet-orbit,
  .pet-signal-dot,
  .message-closed .pet-toggle { animation: none; }
}