Glassmorphic Image Card with Floating HUD Overlay

<div class="relative ring-1 ring-inset ring-white/5 overflow-hidden bg-neutral-900/60 border-white/10 border rounded-2xl">
      <div class="relative h-56">
        <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/22848efd-ec1e-4b8e-9232-4701ae5cb3c8_800w.jpg" alt="" class="absolute inset-0 h-full w-full object-cover opacity-70">
        <div class="absolute inset-0 bg-gradient-to-tr from-indigo-600/30 to-pink-500/20 mix-blend-overlay"></div>

        <!-- floating HUD -->
        <div class="absolute right-4 top-4 w-32 sm:w-40 rounded-xl bg-neutral-900/70 border border-white/10 backdrop-blur p-3 shadow-sm">
          <div class="flex items-center gap-2 text-xs font-medium text-neutral-200">
            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-blue-400 flex-shrink-0">
              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" class=""></path>
            </svg>
            <span class="truncate">AI Response</span>
          </div>
          <div class="mt-2 space-y-1.5">
            <div class="h-1.5 w-full max-w-28 rounded bg-white/20"></div>
            <div class="h-1.5 w-full max-w-24 rounded bg-white/10"></div>
            <div class="h-1.5 w-full max-w-20 rounded bg-white/10"></div>
          </div>
        </div>

        <!-- bottom meta -->
        <div class="absolute left-0 right-0 bottom-0">
          
        </div>

        <!-- dock controls -->
        <div class="absolute left-1/2 -translate-x-1/2 bottom-4 flex items-center gap-2">
          <div class="rounded-xl bg-neutral-900/70 border border-white/10 backdrop-blur px-2 py-1.5 flex items-center gap-1.5">
            <span class="text-[10px] text-neutral-300 rounded-lg bg-white/5 border border-white/10 px-2 py-1">⌘</span>
            <span class="text-[10px] text-neutral-300 hidden sm:inline">command</span>
          </div>
          <div class="rounded-xl bg-neutral-900/70 border border-white/10 backdrop-blur px-2 py-1.5 flex items-center gap-1">
            <span class="text-[10px] text-neutral-300 rounded-lg bg-white/5 border border-white/10 px-2 py-1">↑</span>
            <span class="text-[10px] text-neutral-300 rounded-lg bg-white/5 border border-white/10 px-2 py-1">↓</span>
            <span class="text-[10px] text-neutral-300 rounded-lg bg-white/5 border border-white/10 px-2 py-1">→</span>
          </div>
        </div>
      </div>
      <div class="px-4 py-3 border-t border-white/10 flex items-center gap-2 text-xs text-neutral-400">
        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="">
          <rect x="2" y="4" width="20" height="16" rx="2" class=""></rect>
          <path d="M10 4v4" class=""></path>
          <path d="M2 8h20" class=""></path>
          <path d="M6 4v4" class=""></path>
        </svg>
        <span class="truncate">Translucent, hideable overlay</span>
      </div>
    </div>