Animated AI Assistant Status Card

<div
  class="max-w-md overflow-hidden animate-fade-in-up delay-800 bg-black/30 border-white/10 border rounded-2xl pt-6 pr-6 pb-6 pl-6 relative">
  <div class="pointer-events-none absolute inset-px rounded-2xl ring-1 ring-inset ring-white/10"></div>

  <!-- Header -->
  <div class="flex items-center justify-between mb-4">
    <div class="flex items-center gap-2">
      <div class="h-8 w-8 rounded-lg bg-sky-500/10 border border-sky-400/30 flex items-center justify-center">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
          class="h-4 w-4 text-sky-300">
          <path
            d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"
            class=""></path>
        </svg>
      </div>
      <span class="text-sm font-medium text-zinc-200">AI Assistant</span>
    </div>
    <span class="text-xs text-zinc-500">Live</span>
  </div>

  <div class="relative">
    <div class="mx-auto w-full max-w-sm">
      <div class="relative mx-auto h-40 w-full">
        <!-- stacked layers with animation -->
        <div class="animate-pulse border-white/10 border rounded-xl absolute top-6 right-0 bottom-0 left-0"
          style="animation-duration: 3s; animation-delay: 0s"></div>
        <div class="absolute inset-0 top-3 rounded-xl border border-white/10 bg-white/[0.03] animate-pulse"
          style="animation-duration: 3s; animation-delay: 0.2s;"></div>
        <div class="animate-pulse border-white/10 border rounded-xl absolute top-0 right-0 bottom-0 left-0"
          style="animation-duration: 3s; animation-delay: 0.4s"></div>
        <div class="-top-2 -translate-x-1/2 animate-pulse bg-sky-400/80 w-2 h-2 rounded-full absolute left-1/2"></div>

        <div class="flex z-10 h-full relative items-center justify-center"
          style="animation: float-up 4s ease-in-out infinite">
          <div class="mx-auto w-full max-w-xs rounded-lg border border-white/10 bg-black/50 px-4 py-3 backdrop-blur"
            style="animation: scale-pulse 3s ease-in-out infinite;">
            <div class="flex items-center gap-2 text-[13px] text-sky-200 mb-1">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"
                style="animation: rotate-sparkle 4s linear infinite;">
                <path
                  d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"
                  class=""></path>
              </svg>
              <span class="font-medium">Best practices for CI/CD?</span>
            </div>
            <p class="text-[13.5px] text-zinc-300 leading-relaxed">
              Implement automated testing, deploy frequently, monitor
              metrics.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Stats with stagger animation -->
  <div class="grid grid-cols-3 gap-2 text-center mt-40 gap-x-2 gap-y-2">
    <div
      class="rounded-lg border border-white/10 bg-white/[0.02] p-2 transition-all duration-300 hover:bg-white/[0.05] hover:scale-105"
      style="animation: fade-in-up 0.6s ease-out 0.2s both;">
      <div class="text-sm font-semibold text-zinc-100">2.4s</div>
      <div class="text-[10px] text-zinc-500">Avg Response</div>
    </div>
    <div
      class="rounded-lg border border-white/10 bg-white/[0.02] p-2 transition-all duration-300 hover:bg-white/[0.05] hover:scale-105"
      style="animation: fade-in-up 0.6s ease-out 0.4s both;">
      <div class="text-sm font-semibold text-emerald-400">98.9%</div>
      <div class="text-[10px] text-zinc-500">Accuracy</div>
    </div>
    <div
      class="rounded-lg border border-white/10 bg-white/[0.02] p-2 transition-all duration-300 hover:bg-white/[0.05] hover:scale-105"
      style="animation: fade-in-up 0.6s ease-out 0.6s both;">
      <div class="text-sm font-semibold text-sky-300">24/7</div>
      <div class="text-[10px] text-zinc-500">Available</div>
    </div>
  </div>

  <style>
    @keyframes float-up {

      0%,
      100% {
        transform: translateY(0px);
      }

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

    @keyframes scale-pulse {

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

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

    @keyframes rotate-sparkle {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

    @keyframes fade-in-up {
      from {
        opacity: 0;
        transform: translateY(10px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
  </style>
</div>