/* NEON City companion — compact, calm and interactive. */
.neon-pet {
  --pet-size: 88px;
  --look-x: 0px;
  --look-y: 0px;
  position: fixed;
  right: 20px;
  bottom: 18px;
  width: var(--pet-size);
  height: var(--pet-size);
  z-index: 2147482000;
  isolation: isolate;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

.neon-pet.neon-pet--beside-dock {
  right: 88px;
}

.neon-pet-stage {
  position: absolute;
  inset: 0;
  z-index: 3;
  filter: drop-shadow(0 12px 16px rgba(70, 83, 154, .18));
  animation: neonPetFloat 4.2s ease-in-out infinite;
  transform-origin: 50% 84%;
  will-change: transform;
}

.neon-pet-halo {
  position: absolute;
  inset: 9px;
  z-index: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, .9) 0 39%, transparent 65%),
    conic-gradient(from 20deg, rgba(76, 213, 242, .45), rgba(129, 110, 244, .32), rgba(255, 121, 183, .4), rgba(76, 213, 242, .45));
  filter: blur(7px);
  opacity: .5;
  animation: neonPetHalo 7s linear infinite;
  pointer-events: none;
}

.neon-pet-ground-shadow {
  position: absolute;
  z-index: 0;
  left: 20%;
  right: 20%;
  bottom: 2px;
  height: 12px;
  border-radius: 50%;
  background: rgba(65, 77, 145, .17);
  filter: blur(5px);
  transform: scaleX(1);
  transition: transform .18s ease, opacity .18s ease;
  pointer-events: none;
}

.neon-pet-sparkles {
  position: absolute;
  z-index: 4;
  inset: 0;
  color: #8a76ef;
  font-size: 9px;
  font-weight: 800;
  pointer-events: none;
}

.neon-pet-sparkles i {
  position: absolute;
  display: block;
  font-style: normal;
  opacity: 0;
  animation: neonPetAmbientSparkle 5.2s ease-in-out infinite;
}

.neon-pet-sparkles i:nth-child(1) { top: 8%; left: 7%; animation-delay: .2s; }
.neon-pet-sparkles i:nth-child(2) { top: 24%; right: 2%; color: #67cfe9; animation-delay: 1.8s; }
.neon-pet-sparkles i:nth-child(3) { bottom: 19%; left: 1%; color: #ed7eb7; animation-delay: 3.3s; }

.neon-pet-button {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  color: inherit;
  background: transparent;
  cursor: grab;
  -webkit-tap-highlight-color: transparent;
}

.neon-pet-button:active,
.neon-pet.is-dragging .neon-pet-button {
  cursor: grabbing;
}

.neon-pet-button:focus-visible {
  outline: 3px solid rgba(72, 117, 238, .3);
  outline-offset: 4px;
  border-radius: 50%;
}

.neon-pet-svg {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.neon-pet-eye {
  transform: translate(var(--look-x), var(--look-y));
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 90ms ease-out;
}

.neon-pet-eye-shape {
  transform-box: fill-box;
  transform-origin: center;
  animation: neonPetBlink 5.4s infinite;
}

.neon-pet-tail {
  transform-box: fill-box;
  transform-origin: 82% 70%;
  animation: neonPetTail 2.7s ease-in-out infinite;
}

.neon-pet-antenna-star {
  transform-box: fill-box;
  transform-origin: center;
  animation: neonPetStar 3.2s ease-in-out infinite;
}

.neon-pet-mouth-happy,
.neon-pet-mouth-sleep {
  transition: opacity .18s ease;
}

.neon-pet-mouth-sleep,
.neon-pet-z {
  opacity: 0;
}

.neon-pet.is-sleeping .neon-pet-eye-shape {
  transform: scaleY(.12);
  animation: none;
}

.neon-pet.is-sleeping .neon-pet-mouth-happy { opacity: 0; }
.neon-pet.is-sleeping .neon-pet-mouth-sleep,
.neon-pet.is-sleeping .neon-pet-z { opacity: 1; }
.neon-pet.is-sleeping .neon-pet-stage { animation: neonPetSleep 3.6s ease-in-out infinite; }
.neon-pet.is-sleeping .neon-pet-halo { opacity: .25; animation-duration: 12s; }

.neon-pet.is-happy .neon-pet-stage {
  animation: neonPetHappy .68s cubic-bezier(.2, .8, .3, 1);
}

.neon-pet.is-happy .neon-pet-tail { animation-duration: .2s; }

.neon-pet.is-idle-bouncing .neon-pet-stage {
  animation: neonPetIdleBounce 1.05s cubic-bezier(.22, .78, .26, 1);
}

.neon-pet.is-idle-bouncing .neon-pet-ground-shadow {
  animation: neonPetShadowBounce 1.05s ease-out;
}

.neon-pet.is-idle-bouncing .neon-pet-sparkles i {
  animation-duration: 1s;
}

.neon-pet.is-dragging .neon-pet-stage {
  animation: none;
  transform: scale(1.05) rotate(-2deg);
}

.neon-pet:hover .neon-pet-stage {
  filter: drop-shadow(0 15px 20px rgba(72, 92, 182, .25));
}

.neon-pet:hover .neon-pet-tail {
  animation-duration: .7s;
}

.neon-pet-bubble {
  position: absolute;
  right: calc(100% - 8px);
  bottom: 74%;
  width: max-content;
  max-width: min(210px, calc(100vw - 120px));
  padding: 9px 12px;
  border: 1px solid rgba(93, 116, 177, .15);
  border-radius: 15px 15px 5px 15px;
  color: #334160;
  background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(244, 247, 255, .91));
  box-shadow: 0 11px 30px rgba(50, 69, 121, .13), inset 0 1px 0 rgba(255, 255, 255, .9);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.45;
  letter-spacing: .01em;
  opacity: 0;
  transform: translate(7px, 6px) scale(.95);
  transform-origin: right bottom;
  transition: opacity .2s ease, transform .25s cubic-bezier(.2, .8, .2, 1);
  pointer-events: none;
}

.neon-pet-bubble::after {
  content: "";
  position: absolute;
  right: -6px;
  bottom: 8px;
  width: 12px;
  height: 12px;
  border-right: 1px solid rgba(93, 116, 177, .13);
  border-bottom: 1px solid rgba(93, 116, 177, .13);
  background: rgba(249, 251, 255, .95);
  transform: rotate(-45deg);
}

.neon-pet.bubble-right .neon-pet-bubble {
  left: calc(100% - 8px);
  right: auto;
  border-radius: 15px 15px 15px 5px;
  transform-origin: left bottom;
}

.neon-pet.bubble-right .neon-pet-bubble::after {
  left: -6px;
  right: auto;
  transform: rotate(135deg);
}

.neon-pet.is-talking .neon-pet-bubble,
.neon-pet:hover .neon-pet-bubble,
.neon-pet-button:focus-visible + .neon-pet-bubble {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

.neon-pet-heart {
  position: absolute;
  left: 50%;
  top: 29%;
  z-index: 6;
  color: #f36eb1;
  font-size: 14px;
  font-style: normal;
  font-weight: 900;
  text-shadow: 0 4px 12px rgba(243, 110, 177, .28);
  pointer-events: none;
  animation: neonPetHeart .85s ease-out forwards;
}

@keyframes neonPetFloat {
  0%, 100% { transform: translateY(0) rotate(-.45deg); }
  50% { transform: translateY(-4px) rotate(.55deg); }
}

@keyframes neonPetHalo { to { transform: rotate(360deg); } }

@keyframes neonPetBlink {
  0%, 44%, 48%, 82%, 86%, 100% { transform: scaleY(1); }
  46%, 84% { transform: scaleY(.08); }
}

@keyframes neonPetTail {
  0%, 100% { transform: rotate(-7deg); }
  50% { transform: rotate(9deg); }
}

@keyframes neonPetStar {
  0%, 100% { transform: scale(.9) rotate(-7deg); filter: drop-shadow(0 0 3px rgba(124, 104, 242, .24)); }
  50% { transform: scale(1.1) rotate(7deg); filter: drop-shadow(0 0 7px rgba(242, 105, 176, .5)); }
}

@keyframes neonPetAmbientSparkle {
  0%, 62%, 100% { opacity: 0; transform: translateY(3px) scale(.55) rotate(-12deg); }
  72% { opacity: .85; }
  86% { opacity: 0; transform: translateY(-8px) scale(1.05) rotate(12deg); }
}

@keyframes neonPetHappy {
  0%, 100% { transform: translateY(0) scale(1); }
  32% { transform: translateY(-10px) scale(1.04, .96) rotate(-4deg); }
  64% { transform: translateY(-2px) scale(.98, 1.03) rotate(3deg); }
}

@keyframes neonPetIdleBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  16% { transform: translateY(2px) scale(1.05, .94); }
  46% { transform: translateY(-18px) scale(.97, 1.05) rotate(-2deg); }
  68% { transform: translateY(-4px) scale(1.01, .99) rotate(1.5deg); }
  82% { transform: translateY(1px) scale(1.03, .96); }
}

@keyframes neonPetShadowBounce {
  0%, 100% { transform: scaleX(1); opacity: 1; }
  46% { transform: scaleX(.58); opacity: .42; }
}

@keyframes neonPetSleep {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(1px) scale(1.015, .985); }
}

@keyframes neonPetHeart {
  0% { opacity: 0; transform: translate(-50%, 4px) scale(.4) rotate(-8deg); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--heart-x)), -54px) scale(1.08) rotate(12deg); }
}

@media (max-width: 720px) {
  .neon-pet {
    --pet-size: 72px;
    right: 10px;
    bottom: 12px;
  }

  .neon-pet.neon-pet--beside-dock { right: 72px; }

  .neon-pet-bubble {
    max-width: min(180px, calc(100vw - 92px));
    padding: 8px 10px;
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .neon-pet-stage,
  .neon-pet-halo,
  .neon-pet-eye-shape,
  .neon-pet-tail,
  .neon-pet-antenna-star,
  .neon-pet-sparkles i {
    animation: none !important;
  }
}