AI Chat Assistant Card with Floating Popover

<section class="col-span-12 lg:col-span-5 md:pt-14 flex pt-14 items-center justify-center"
  data-element-locator="html &gt; body:nth-of-type(1) &gt; main:nth-of-type(1) &gt; div:nth-of-type(1) &gt; div:nth-of-type(1) &gt; section:nth-of-type(2)">
  <div class="relative w-full max-w-lg">

    <!-- ✨ Clean Floating Popover (Top Right) -->
    <div
      class="absolute -top-14 -right-4 sm:w-[280px] bg-[#1C1C1E] border border-white/10 rounded-xl shadow-lg p-4 z-20">
      <div class="flex items-start justify-between gap-3">
        <div
          class="inline-flex items-center justify-center w-8 h-8 rounded-lg bg-white/5 ring-1 ring-white/10 shrink-0">
          <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" data-lucide="wand-2"
            class="lucide lucide-wand-2 w-5 h-5 text-white">
            <path
              d="m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72"
              class=""></path>
            <path d="m14 7 3 3" class=""></path>
            <path d="M5 6v4" class=""></path>
            <path d="M19 14v4" class=""></path>
            <path d="M10 2v2" class=""></path>
            <path d="M7 8H3" class=""></path>
            <path d="M21 16h-4" class=""></path>
            <path d="M11 3H9" class=""></path>
          </svg>
        </div>
        <button aria-label="Dismiss" class="text-white/70 hover:text-white transition-colors p-1 -mr-1 rounded-md">
      <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" data-lucide="x" class="lucide lucide-x w-5 h-5"><path d="M18 6 6 18" class=""></path><path d="m6 6 12 12" class=""></path></svg>
    </button>
      </div>
      <div class="mt-3">
        <h4 class="text-white text-base font-semibold tracking-tight">Ask Neon AI to create with you!</h4>
        <p class="text-slate-300 text-sm mt-1">The more details you share, the better it will deliver.</p>
      </div>

      <!-- Pointer triangle -->
      <div class="absolute right-6 -bottom-2 w-4 h-4 rotate-45 bg-[#1C1C1E] border-r border-b border-white/10"></div>
    </div>

    <!-- 🌟 Chat Card -->
    <div
      class="group overflow-hidden transition-all duration-500 hover:border-indigo-500/40 hover:ring-indigo-500/30 bg-[#0F0F11] border-white/10 border ring-white/5 ring-1 rounded-2xl relative">

      <!-- Background accents (optional) -->
      <div
        class="absolute -bottom-12 -right-12 h-48 w-48 rounded-full bg-white/5 blur-3xl transition-all duration-700 group-hover:scale-110">
      </div>

      <div class="p-6">
        <div class="flex mb-4 items-start justify-between">
          <span class="inline-flex items-center gap-1.5 text-xs font-medium text-white bg-white/5 ring-1 ring-white/10 rounded-lg pt-1 pr-2.5 pb-1 pl-2.5">
            <div class="h-1.5 w-1.5 animate-pulse bg-indigo-400 rounded-full"></div>
            AI Assistant
          </span>
          <div class="flex items-center gap-2">
            <div class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
            <span class="text-xs text-slate-400">Online</span>
          </div>
        </div>

        <h3 class="text-lg font-semibold tracking-tight text-white mb-3">AI Chat Assistant</h3>
        <p class="leading-relaxed text-sm text-slate-300 mb-4">
          Ask me anything! I can help with code, design, writing, analysis, and more. Just type your question below.
        </p>

        <!-- Chat Interface -->
        <div class="bg-[#1C1C1E] rounded-xl p-4 mb-4 ring-1 ring-white/10">
          <div class="space-y-3">
            <!-- User message -->
            <div class="flex justify-end">
              <div class="bg-indigo-600 text-white text-sm px-3 py-2 rounded-lg max-w-[80%]">
                How can I improve my website's performance?
              </div>
            </div>

            <!-- AI response -->
            <div class="flex justify-start items-start gap-2">
              <div
                class="flex text-xs font-bold text-white w-6 h-6 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/b3b62420-5c07-4956-9d39-22d810ae74f6_320w.webp)] bg-cover rounded-full items-center justify-center">
              </div>
              <div class="bg-[#252527] text-slate-200 text-sm px-3 py-2 rounded-lg max-w-[80%]">
                I can help optimize your website! Consider image compression, CDN usage, and code minification...
              </div>
            </div>
          </div>
        </div>

        <!-- Input area -->
        <div class="flex items-center gap-2 bg-[#1C1C1E] rounded-xl p-2 ring-1 ring-white/10">
          <input type="text" placeholder="Type your message..." class="flex-1 bg-transparent text-sm text-white placeholder-slate-400 outline-none px-2 py-1">
          <button class="bg-indigo-600 hover:bg-indigo-700 transition-colors w-8 h-8 rounded-lg flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white">
              <path d="M12 19V5" class=""></path>
              <path d="m5 12 7-7 7 7" class=""></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</section>