/**
 * KBKart AI icon animations (storefront float + admin picker).
 * Isolated — does not alter layout / strip / navbar flow.
 * Color vars are set on the chip/picker parent (not here) so admin colors apply.
 */
.kb-nav-ai-agent-chip--animated,
.kb-ai-anim-picker,
.kb-ai-anim-live,
#kbAiNavSizePreviewWrap {
  --kb-ai-anim-accent: #ed7d19;
  --kb-ai-anim-secondary: #ffb347;
  --kb-ai-anim-ink: #255c7a;
  --kb-ai-anim-online: #18bd75;
  --kb-ai-anim-bg: #ffffff;
  --kb-ai-anim-spin: 1.2s;
}

.kb-ai-anim {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kb-ai-anim-accent, #ed7d19);
  pointer-events: none;
  line-height: 0;
}

.kb-ai-anim svg {
  width: 72%;
  height: 72%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  position: relative;
  z-index: 2;
}

/* 1. Brain Pulse */
.kb-ai-anim--brain {
  animation: kbAiBrainPulse 1.8s infinite ease-in-out;
}

@keyframes kbAiBrainPulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 2px var(--kb-ai-anim-accent));
  }
  50% {
    transform: scale(1.12);
    filter: drop-shadow(0 0 10px var(--kb-ai-anim-accent));
  }
}

/* 2. Orbit */
.kb-ai-anim--orbit::before,
.kb-ai-anim--orbit::after {
  content: "";
  position: absolute;
  border: 2px solid var(--kb-ai-anim-accent);
  border-radius: 50%;
  inset: 8%;
  animation: kbAiRotate 3s linear infinite;
  pointer-events: none;
}

.kb-ai-anim--orbit::after {
  inset: 18% -4%;
  border-color: var(--kb-ai-anim-ink);
  transform: rotate(60deg);
  animation-duration: 4.2s;
  animation-direction: reverse;
}

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

/* 3. Sparkle */
.kb-ai-anim--sparkle {
  animation: kbAiSparkle 1.5s infinite;
}

@keyframes kbAiSparkle {
  0%, 100% { transform: rotate(0) scale(0.88); opacity: 0.75; }
  50% { transform: rotate(18deg) scale(1.15); opacity: 1; }
}

/* 4. Thinking / Assistant */
.kb-ai-anim--thinking {
  animation: kbAiThinking 2s infinite ease-in-out;
}

@keyframes kbAiThinking {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* 5. Scanner */
.kb-ai-anim--scanner {
  animation: kbAiScanGlow 1.5s infinite;
}

@keyframes kbAiScanGlow {
  0%, 100% {
    filter: drop-shadow(0 0 0 transparent);
    opacity: 0.7;
  }
  50% {
    filter: drop-shadow(0 0 10px var(--kb-ai-anim-accent));
    opacity: 1;
  }
}

/* 6. Wave */
.kb-ai-anim--wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5%;
}

.kb-ai-anim--wave span {
  width: 8%;
  max-width: 6px;
  min-width: 3px;
  height: 28%;
  border-radius: 999px;
  background: var(--kb-ai-anim-accent);
  animation: kbAiWave 0.8s infinite alternate;
}

.kb-ai-anim--wave span:nth-child(2) { animation-delay: 0.15s; }
.kb-ai-anim--wave span:nth-child(3) { animation-delay: 0.3s; }
.kb-ai-anim--wave span:nth-child(4) { animation-delay: 0.45s; }
.kb-ai-anim--wave span:nth-child(5) { animation-delay: 0.6s; }

@keyframes kbAiWave {
  to { height: 72%; }
}

/* 7. Spin + Pulse (rainbow loader) */
.kb-ai-anim--rainbow {
  overflow: visible;
}

.kb-ai-anim-rainbow {
  width: 78%;
  height: 78%;
  position: relative;
  animation:
    kbAiRainbowSpin var(--kb-ai-anim-spin, 1.2s) linear infinite,
    kbAiRainbowPulse calc(var(--kb-ai-anim-spin, 1.2s) * 1.33) ease-in-out infinite;
}

.kb-ai-anim-rainbow span {
  position: absolute;
  width: 18.5%;
  height: 32%;
  left: 40.75%;
  top: 3%;
  border-radius: 999px;
  transform-origin: 50% 145%;
}

.kb-ai-anim-rainbow span:nth-child(1) { transform: rotate(0deg); background: #f044cf; }
.kb-ai-anim-rainbow span:nth-child(2) { transform: rotate(45deg); background: #b23cf0; }
.kb-ai-anim-rainbow span:nth-child(3) { transform: rotate(90deg); background: #7045ff; }
.kb-ai-anim-rainbow span:nth-child(4) { transform: rotate(135deg); background: #3985ff; }
.kb-ai-anim-rainbow span:nth-child(5) { transform: rotate(180deg); background: #15c4df; }
.kb-ai-anim-rainbow span:nth-child(6) { transform: rotate(225deg); background: #27c98c; }
.kb-ai-anim-rainbow span:nth-child(7) { transform: rotate(270deg); background: #ffc044; }
.kb-ai-anim-rainbow span:nth-child(8) { transform: rotate(315deg); background: #ff6b9e; }

@keyframes kbAiRainbowSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes kbAiRainbowPulse {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(112, 69, 255, 0.35)); }
  50% { filter: drop-shadow(0 0 10px rgba(240, 68, 207, 0.55)); }
}

/* 8. Ask KBKART AI — float + pulse mascot */
.kb-ai-anim--askai {
  overflow: visible;
}

.kb-ai-anim-askai {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kb-ai-anim-askai__btn {
  position: relative;
  width: 92%;
  height: 92%;
  border: 3px solid #fff;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--kb-ai-anim-secondary, #087bff), var(--kb-ai-anim-ink, #071b85));
  box-shadow:
    0 0 15px color-mix(in srgb, var(--kb-ai-anim-secondary, #168aff) 85%, transparent),
    0 0 30px color-mix(in srgb, var(--kb-ai-anim-secondary, #168aff) 40%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  animation: kbAiAskFloat 2s infinite ease-in-out;
}

.kb-ai-anim-askai__btn::after {
  content: "";
  position: absolute;
  inset: -7px;
  border: 2px solid var(--kb-ai-anim-secondary, #168aff);
  border-radius: 50%;
  animation: kbAiAskPulse 2s infinite;
  pointer-events: none;
}

.kb-ai-anim-askai__img {
  width: 86%;
  height: 86%;
  object-fit: contain;
  display: block;
  position: relative;
  z-index: 1;
  pointer-events: none;
  -webkit-user-drag: none;
}

.kb-ai-anim-askai__label {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--kb-ai-anim-ink, #071b85);
  color: #fff;
  padding: 8px 12px;
  border-radius: 20px;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
  pointer-events: none;
}

/* Admin / tiny previews: hide label so cards stay compact */
.kb-ai-anim-picker__preview .kb-ai-anim-askai__label,
.kb-ai-anim-live .kb-ai-anim-askai__label,
.kb-ai-admin-nav-preview .kb-ai-anim-askai__label {
  display: none;
}

@keyframes kbAiAskFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

@keyframes kbAiAskPulse {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* 9. 3D Chat Orbit */
.kb-ai-anim--chat3d {
  overflow: visible;
}

.kb-ai-anim-chat3d {
  position: relative;
  width: 82%;
  height: 82%;
  border: 3px solid #fff;
  border-radius: 28%;
  background: linear-gradient(145deg, var(--kb-ai-anim-secondary), var(--kb-ai-anim-accent));
  box-shadow:
    0 9px 22px color-mix(in srgb, var(--kb-ai-anim-accent) 35%, transparent),
    inset 0 3px 8px rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  animation: kbAiChat3dFloat 2.5s ease-in-out infinite;
}

.kb-ai-anim-chat3d__orbit {
  position: absolute;
  width: 118%;
  height: 118%;
  border: 2px solid var(--kb-ai-anim-secondary);
  border-radius: 50%;
  transform: rotateX(65deg);
  animation: kbAiChat3dOrbit 5s linear infinite;
  pointer-events: none;
}

.kb-ai-anim-chat3d__chat {
  width: 48%;
  height: 36%;
  border: 3px solid #fff;
  border-radius: 28%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9%;
  position: relative;
  z-index: 2;
}

.kb-ai-anim-chat3d__chat::after {
  content: "";
  position: absolute;
  bottom: -28%;
  left: 16%;
  border-width: 7px 7px 0 0;
  border-style: solid;
  border-color: #fff transparent transparent;
}

.kb-ai-anim-chat3d__chat span {
  width: 12%;
  max-width: 5px;
  min-width: 3px;
  aspect-ratio: 1;
  background: #fff;
  border-radius: 50%;
  animation: kbAiChat3dTyping 1s infinite;
}

.kb-ai-anim-chat3d__chat span:nth-child(2) { animation-delay: 0.2s; }
.kb-ai-anim-chat3d__chat span:nth-child(3) { animation-delay: 0.4s; }

.kb-ai-anim-chat3d__online {
  position: absolute;
  right: -4%;
  top: -4%;
  width: 18%;
  max-width: 14px;
  min-width: 10px;
  aspect-ratio: 1;
  background: var(--kb-ai-anim-online);
  border: 3px solid #fff;
  border-radius: 50%;
  z-index: 3;
}

@keyframes kbAiChat3dFloat {
  0%, 100% { transform: translateY(0) rotateY(-5deg); }
  50% { transform: translateY(-7px) rotateY(5deg); }
}

@keyframes kbAiChat3dOrbit {
  to { transform: rotateX(65deg) rotateZ(360deg); }
}

@keyframes kbAiChat3dTyping {
  0%, 80%, 100% { opacity: 0.35; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .kb-ai-anim,
  .kb-ai-anim::before,
  .kb-ai-anim::after,
  .kb-ai-anim--wave span,
  .kb-ai-anim-chat3d,
  .kb-ai-anim-chat3d__orbit,
  .kb-ai-anim-chat3d__chat span,
  .kb-ai-anim-rainbow,
  .kb-ai-anim-askai__btn,
  .kb-ai-anim-askai__btn::after {
    animation: none !important;
  }
}

/* Float chip: circular padded background (admin-controllable) */
.kb-nav-ai-agent-chip--animated {
  padding: 0 !important;
  gap: 0;
  background: var(--kb-ai-anim-bg, #ffffff) !important;
  border: 2px solid rgba(255, 255, 255, 0.95) !important;
  border-radius: 50% !important;
  box-shadow: 0 6px 18px rgba(12, 48, 108, 0.16) !important;
  overflow: visible;
}

.kb-nav-ai-agent-chip--animated .kb-ai-anim {
  width: 100%;
  height: 100%;
}

/* chat3d / rainbow / askai have their own look — keep chip bg transparent */
.kb-nav-ai-agent-chip--animated[data-kb-ai-anim="chat3d"],
.kb-nav-ai-agent-chip--animated[data-kb-ai-anim="rainbow"],
.kb-nav-ai-agent-chip--animated[data-kb-ai-anim="askai"] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

/* Admin live preview circle */
.kb-ai-anim-live {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--kb-ai-anim-bg, #ffffff);
  border: 2px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 6px 18px rgba(12, 48, 108, 0.16);
  overflow: visible;
}

.kb-ai-anim-live[data-kb-ai-anim="chat3d"],
.kb-ai-anim-live[data-kb-ai-anim="rainbow"],
.kb-ai-anim-live[data-kb-ai-anim="askai"] {
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}

/* Admin picker cards */
.kb-ai-anim-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 12px;
}

.kb-ai-anim-picker__item {
  position: relative;
  margin: 0;
  cursor: pointer;
}

.kb-ai-anim-picker__item input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.kb-ai-anim-picker__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 8px 10px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  min-height: 128px;
}

.kb-ai-anim-picker__item input:checked + .kb-ai-anim-picker__card {
  border-color: #0ea5e9;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.18);
}

.kb-ai-anim-picker__item input:focus-visible + .kb-ai-anim-picker__card {
  outline: 2px solid #0ea5e9;
  outline-offset: 2px;
}

.kb-ai-anim-picker__preview {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--kb-ai-anim-bg, #ffffff);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(12, 48, 108, 0.12);
  overflow: visible;
}

.kb-ai-anim-picker__item input[value="chat3d"] + .kb-ai-anim-picker__card .kb-ai-anim-picker__preview,
.kb-ai-anim-picker__item input[value="rainbow"] + .kb-ai-anim-picker__card .kb-ai-anim-picker__preview,
.kb-ai-anim-picker__item input[value="askai"] + .kb-ai-anim-picker__card .kb-ai-anim-picker__preview,
.kb-ai-anim-picker__item input[value="custom"] + .kb-ai-anim-picker__card .kb-ai-anim-picker__preview {
  background: #f8fafc;
  box-shadow: none;
  border-radius: 12px;
}

.kb-ai-anim-picker__label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #0C306C;
  text-align: center;
  line-height: 1.2;
}

.kb-ai-anim-picker__rec {
  color: #dc2626;
  font-weight: 800;
  font-size: 0.68rem;
  letter-spacing: 0.02em;
}

.kb-ai-anim-picker__tick {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e2e8f0;
  color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
}

.kb-ai-anim-picker__item input:checked + .kb-ai-anim-picker__card .kb-ai-anim-picker__tick {
  background: #0ea5e9;
  color: #fff;
}