Meeting Participants List Card

<div class="relative ring-1 ring-inset ring-white/5 overflow-hidden bg-neutral-900/60 border-white/10 border rounded-2xl">
      <div class="flex items-center justify-between px-4 py-3 border-b border-white/10">
        <div class="flex items-center gap-2">
          <span class="text-sm font-medium text-neutral-200">Meeting participants</span>
          
        </div>
        <span class="inline-flex items-center gap-1.5 text-[10px] font-medium text-green-300 bg-green-500/10 border border-green-500/20 rounded-full px-2 py-0.5">
          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="">
            <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" class=""></path>
            <path d="m9 12 2 2 4-4" class=""></path>
          </svg>
          No bots detected
        </span>
      </div>
      <ul class="px-3 py-3 space-y-2">
        <li class="flex items-center justify-between rounded-lg px-2 py-2 hover:bg-white/5 transition-colors">
          <div class="flex items-center gap-3">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/52f90c3d-9f64-4db9-997b-8765ea3ff941_320w.jpg" class="h-8 w-8 rounded-full object-cover flex-shrink-0" alt="">
            <div class="min-w-0">
              <p class="text-sm font-medium text-white truncate">Gina Huels <span class="text-neutral-400">(You)</span></p>
              <p class="text-xs text-neutral-400 truncate">ginahue65@cluely.com</p>
            </div>
          </div>
          <span class="text-xs text-neutral-300 flex-shrink-0">Owner</span>
        </li>
        <li class="flex items-center justify-between rounded-lg px-2 py-2 hover:bg-white/5 transition-colors">
          <div class="flex items-center gap-3">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/b6d79211-32f1-430e-96b3-9b4d857c1482_320w.jpg" class="h-8 w-8 rounded-full object-cover flex-shrink-0" alt="">
            <div class="min-w-0">
              <p class="text-sm font-medium text-white truncate">Todd Cremin</p>
              <p class="text-xs text-neutral-400 truncate">todd.cremin@cluely.com</p>
            </div>
          </div>
          <span class="text-xs text-neutral-300 flex-shrink-0">Speaker</span>
        </li>
        <li class="flex items-center justify-between rounded-lg px-2 py-2 hover:bg-white/5 transition-colors">
          <div class="flex items-center gap-3">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/86a541ae-1b5d-4597-8538-e55c0858f4ff_320w.jpg" class="h-8 w-8 rounded-full object-cover flex-shrink-0" alt="">
            <div class="min-w-0">
              <p class="text-sm font-medium text-white truncate">Holly Gleason</p>
              <p class="text-xs text-neutral-400 truncate">holly_gleaso1972@cluely.com</p>
            </div>
          </div>
          <span class="text-xs text-neutral-300 flex-shrink-0">Speaker</span>
        </li>
        <li class="flex items-center justify-between rounded-lg px-2 py-2 hover:bg-white/5 transition-colors">
          <div class="flex items-center gap-3">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/27a2c31e-38f3-479f-a831-858e91b9bd84_320w.jpg" class="h-8 w-8 rounded-full object-cover flex-shrink-0" alt="">
            <div class="min-w-0">
              <p class="text-sm font-medium text-white truncate">Tomas Hansen</p>
              <p class="text-xs text-neutral-400 truncate">tomas_hansen@cluely.com</p>
            </div>
          </div>
          <span class="text-xs text-neutral-300 flex-shrink-0">Speaker</span>
        </li>
      </ul>
      <div class="flex flex-col sm:flex-row sm:items-center gap-2 border-white/10 border-t pt-3 pr-4 pb-3 pl-4 items-start justify-between">
        <div class="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="">
            <path d="M9 12l2 2 4-4" class=""></path>
            <path d="M21 12c-1 0-3-1-3-3s2-3 3-3 3 1 3 3-2 3-3 3" class=""></path>
            <path d="M3 12c1 0 3-1 3-3s-2-3-3-3-3 1-3 3 2 3 3 3" class=""></path>
          </svg>
          Auto‑redacted
        </div>
        <div class="text-xs text-neutral-400">Guest list stays clean</div>
      </div>
    </div>