.nana-companion {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: clamp(120px, 9vw, 180px);
  height: clamp(120px, 9vw, 180px);
  z-index: 40;
  pointer-events: none;
  user-select: none;
  transition: opacity 0.3s ease;
}

/* Permanent home inside the Conversation Stage */
.nana-companion--staged {
  position: relative;
  right: auto;
  bottom: auto;
  z-index: 1;
  flex-shrink: 0;
  margin: 0 auto;
  width: clamp(110px, 28vw, 150px);
  height: clamp(110px, 28vw, 150px);
  max-height: none;
}

.nana-companion--speech {
  width: clamp(88px, 20vw, 124px);
  height: clamp(88px, 20vw, 124px);
  transform: translateY(0.15rem);
}

.nana-companion[data-state="idle"] {
  opacity: 0.92;
}

.nana-companion[data-state="thinking"],
.nana-companion[data-state="success"],
.nana-companion[data-state="error"] {
  opacity: 1;
}

.nana-companion__float,
.nana-companion__breathe,
.nana-companion__glow {
  width: 100%;
  height: 100%;
}

.nana-companion__glow {
  position: relative;
}

.nana-companion__sprites {
  position: relative;
  width: 100%;
  height: 100%;
}

.nana-companion__sprite {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.nana-companion__sprite--layer-a,
.nana-companion__sprite--layer-b {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 180ms ease;
  z-index: 1;
}

.nana-companion__sprite.is-active {
  opacity: 1;
}

@keyframes nana-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }
}

@keyframes nana-breathe {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.08);
  }
}

@keyframes nana-thinking-breathe {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }
}

@keyframes nana-thinking-glow {
  0%,
  100% {
    filter: drop-shadow(0 0 48px rgba(129, 140, 248, 0.68))
      drop-shadow(0 0 72px rgba(108, 99, 255, 0.52));
  }

  50% {
    filter: drop-shadow(0 0 56px rgba(139, 92, 246, 0.82))
      drop-shadow(0 0 80px rgba(99, 102, 241, 0.62));
  }
}

@keyframes nana-thinking-halo {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.96);
  }

  50% {
    opacity: 0.92;
    transform: scale(1.14);
  }
}

@keyframes nana-success-bob {
  0% {
    transform: translateY(0) scale(1);
  }

  45% {
    transform: translateY(-6px) scale(1.012);
  }

  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes nana-error-soft {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  45% {
    opacity: 0.84;
    transform: translateY(2px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.nana-companion[data-state="idle"] .nana-companion__float {
  animation: nana-float 5s ease-in-out infinite;
}

.nana-companion[data-state="idle"] .nana-companion__breathe {
  animation: nana-breathe 3.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

.nana-companion[data-state="thinking"] .nana-companion__float {
  animation: nana-float 4.2s ease-in-out infinite;
}

.nana-companion[data-state="thinking"] .nana-companion__breathe {
  animation: nana-thinking-breathe 3s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

.nana-companion[data-state="thinking"] .nana-companion__glow {
  animation: nana-thinking-glow 2.8s ease-in-out infinite;
}

.nana-companion[data-state="thinking"] .nana-companion__glow::before {
  content: "";
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(129, 140, 248, 0.42) 0%,
    rgba(108, 99, 255, 0.2) 42%,
    rgba(108, 99, 255, 0) 74%
  );
  animation: nana-thinking-halo 2.8s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}

.nana-companion[data-state="success"] .nana-companion__float {
  animation: none;
  transform: translateY(0);
}

.nana-companion[data-state="success"] .nana-companion__breathe {
  animation: nana-success-bob 0.65s ease-in-out forwards;
}

.nana-companion[data-state="error"] .nana-companion__float {
  animation: nana-error-soft 1s ease-in-out forwards;
}

.nana-companion[data-state="error"] .nana-companion__breathe {
  animation: none;
  transform: scale(1);
}

@media (max-width: 640px) {
  .nana-companion--staged {
    width: clamp(88px, 24vw, 120px);
    height: clamp(88px, 24vw, 120px);
  }

  .nana-companion--speech {
    width: clamp(76px, 18vw, 100px);
    height: clamp(76px, 18vw, 100px);
  }
}

@media (max-width: 480px) {
  .nana-companion:not(.nana-companion--staged) {
    right: 10px;
    bottom: 92px;
    width: clamp(72px, 20vw, 96px);
    height: clamp(72px, 20vw, 96px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nana-companion {
    transition: opacity 0.01ms linear;
  }

  .nana-companion__float,
  .nana-companion__breathe,
  .nana-companion[data-state="thinking"] .nana-companion__glow {
    animation: none !important;
  }

  .nana-companion[data-state="thinking"] .nana-companion__glow::before {
    animation: none !important;
    opacity: 0.65;
    transform: scale(1);
  }

  .nana-companion[data-state="success"] .nana-companion__breathe,
  .nana-companion[data-state="error"] .nana-companion__float {
    animation: none !important;
  }

  .nana-companion[data-state="thinking"] .nana-companion__glow {
    filter: drop-shadow(0 0 48px rgba(129, 140, 248, 0.62))
      drop-shadow(0 0 72px rgba(108, 99, 255, 0.48));
  }
}