.nori-bot {
  position: relative;
  isolation: isolate;
  display: block;
  width: 120px;
  aspect-ratio: 4 / 5;
  contain: layout paint style;
  pointer-events: none;
}

.nori-bot::before {
  position: absolute;
  z-index: -1;
  inset: 16% 7% 9%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 212, 148, 0.2), rgba(214, 169, 95, 0.07) 48%, transparent 72%);
  filter: blur(8px);
  opacity: 0.7;
  content: "";
  animation: nori-cat-glow 3.6s ease-in-out infinite;
}

.nori-bot::after {
  position: absolute;
  z-index: -1;
  right: 15%;
  bottom: 1.5%;
  left: 15%;
  height: 6%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.56);
  filter: blur(4px);
  content: "";
  animation: nori-cat-shadow 3.6s ease-in-out infinite;
}

.nori-mascot-portrait {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  transform-origin: 50% 92%;
  animation: nori-cat-idle 3.6s ease-in-out infinite;
  will-change: transform;
}

.nori-mascot-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 13px 15px rgba(0, 0, 0, 0.38));
  transition: filter 180ms ease;
  user-select: none;
  -webkit-user-drag: none;
}

.nori-mascot-sparkles {
  position: absolute;
  z-index: 2;
  inset: 4% 0 10%;
  opacity: 0;
  transition: opacity 180ms ease;
}

.nori-mascot-sparkles i {
  position: absolute;
  width: 9%;
  aspect-ratio: 1;
  background: #f4d494;
  clip-path: polygon(50% 0, 61% 36%, 100% 50%, 61% 64%, 50% 100%, 39% 64%, 0 50%, 39% 36%);
  filter: drop-shadow(0 0 5px rgba(244, 212, 148, 0.72));
}

.nori-mascot-sparkles i:nth-child(1) { top: 16%; left: 3%; }
.nori-mascot-sparkles i:nth-child(2) { top: 5%; right: 6%; width: 7%; }
.nori-mascot-sparkles i:nth-child(3) { right: 0; bottom: 20%; width: 6%; }

.nori-bot[data-state="hello"] .nori-mascot-portrait {
  animation: nori-cat-hello 0.8s ease-in-out 3;
}

.nori-bot[data-state="hello"] .nori-mascot-sparkles,
.nori-bot[data-state="happy"] .nori-mascot-sparkles,
.nori-bot[data-state="success"] .nori-mascot-sparkles,
.nori-bot[data-state="item-added"] .nori-mascot-sparkles,
.nori-bot[data-state="order-ready"] .nori-mascot-sparkles,
.nori-bot[data-state="celebrating"] .nori-mascot-sparkles {
  opacity: 1;
}

.nori-bot[data-state="hello"] .nori-mascot-sparkles i,
.nori-bot[data-state="happy"] .nori-mascot-sparkles i,
.nori-bot[data-state="success"] .nori-mascot-sparkles i,
.nori-bot[data-state="item-added"] .nori-mascot-sparkles i,
.nori-bot[data-state="order-ready"] .nori-mascot-sparkles i,
.nori-bot[data-state="celebrating"] .nori-mascot-sparkles i {
  animation: nori-cat-sparkle 0.8s ease-in-out infinite alternate;
}

.nori-bot[data-state="listening"] .nori-mascot-portrait {
  animation: nori-cat-listen 1.6s ease-in-out infinite;
}

.nori-bot[data-state="thinking"] .nori-mascot-portrait {
  animation: nori-cat-think 2.2s ease-in-out infinite;
}

.nori-bot[data-state="talking"] .nori-mascot-portrait,
.nori-bot[data-state="recommending"] .nori-mascot-portrait {
  animation: nori-cat-talk 0.72s ease-in-out infinite;
}

.nori-bot[data-state="happy"] .nori-mascot-portrait,
.nori-bot[data-state="success"] .nori-mascot-portrait,
.nori-bot[data-state="item-added"] .nori-mascot-portrait,
.nori-bot[data-state="order-ready"] .nori-mascot-portrait,
.nori-bot[data-state="celebrating"] .nori-mascot-portrait {
  animation: nori-cat-happy 0.78s cubic-bezier(0.2, 0.8, 0.2, 1) 2;
}

.nori-bot[data-state="warning"] .nori-mascot-portrait,
.nori-bot[data-state="surprised"] .nori-mascot-portrait {
  animation: nori-cat-warning 0.48s ease-in-out 2;
}

.nori-bot[data-state="warning"]::before,
.nori-bot[data-state="surprised"]::before {
  background: radial-gradient(circle, rgba(255, 152, 81, 0.25), transparent 70%);
}

.nori-bot[data-state="sleep"] .nori-mascot-portrait {
  animation: nori-cat-sleep 3.8s ease-in-out infinite;
}

.nori-bot[data-state="walk"] .nori-mascot-portrait {
  animation: nori-cat-walk 0.56s ease-in-out infinite;
}

.nori-bot[data-state="jump"] .nori-mascot-portrait {
  animation: nori-cat-jump 0.9s cubic-bezier(0.22, 0.75, 0.22, 1) 1;
}

@keyframes nori-cat-idle {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-4%) rotate(0.45deg); }
}

@keyframes nori-cat-glow {
  0%, 100% { opacity: 0.54; transform: scale(0.96); }
  50% { opacity: 0.86; transform: scale(1.04); }
}

@keyframes nori-cat-shadow {
  0%, 100% { opacity: 0.64; transform: scaleX(1); }
  50% { opacity: 0.43; transform: scaleX(0.88); }
}

@keyframes nori-cat-hello {
  0%, 100% { transform: translateY(0) rotate(0); }
  45% { transform: translateY(-4%) rotate(3deg); }
}

@keyframes nori-cat-listen {
  0%, 100% { transform: translateY(-1%) rotate(0); }
  50% { transform: translateY(-3%) rotate(2.2deg); }
}

@keyframes nori-cat-think {
  0%, 100% { transform: translateY(-1%) rotate(-1.2deg); }
  50% { transform: translateY(-3%) rotate(1.8deg); }
}

@keyframes nori-cat-talk {
  0%, 100% { transform: translateY(-1%) scale(1); }
  50% { transform: translateY(-3%) scale(1.012); }
}

@keyframes nori-cat-happy {
  0%, 100% { transform: translateY(0) scale(1); }
  42% { transform: translateY(-12%) scale(1.025); }
  68% { transform: translateY(1.5%) scale(0.99); }
}

@keyframes nori-cat-warning {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4%); }
  75% { transform: translateX(4%); }
}

@keyframes nori-cat-sleep {
  0%, 100% { transform: translateY(1%) rotate(1.5deg) scale(0.995); opacity: 0.88; }
  50% { transform: translateY(3%) rotate(1.5deg) scale(0.985); opacity: 0.8; }
}

@keyframes nori-cat-walk {
  0%, 100% { transform: translate(-2%, 0) rotate(-1deg); }
  50% { transform: translate(2%, -4%) rotate(1deg); }
}

@keyframes nori-cat-jump {
  0%, 100% { transform: translateY(0) scale(1); }
  45% { transform: translateY(-20%) scale(0.985, 1.02); }
}

@keyframes nori-cat-bars {
  from { transform: scaleY(0.48); opacity: 0.58; }
  to { transform: scaleY(1.45); opacity: 1; }
}

@keyframes nori-cat-dots {
  from { transform: translateY(25%); opacity: 0.48; }
  to { transform: translateY(-45%); opacity: 1; }
}

@keyframes nori-cat-sparkle {
  from { transform: rotate(0) scale(0.7); opacity: 0.42; }
  to { transform: rotate(45deg) scale(1.2); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .nori-bot,
  .nori-bot::before,
  .nori-bot::after,
  .nori-bot *,
  .nori-bot *::before,
  .nori-bot *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}