Dark Inbox Panel with Search, Filters and Message List

<div class="relative ring-1 ring-neutral-800 overflow-hidden bg-neutral-900 rounded-[20px] shadow-2xl">
      <!-- Status/header -->
      <div class="px-4 pt-4 pb-3 flex items-center justify-between">
        <div class="flex items-center gap-2">
          <button class="size-8 rounded-lg bg-neutral-850 ring-1 ring-neutral-800 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="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="menu" class="lucide lucide-menu size-4 text-neutral-300"><path d="M4 12h16" class=""></path><path d="M4 18h16" class=""></path><path d="M4 6h16" class=""></path></svg>
          </button>
          <div class="flex items-center gap-2">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="inbox" class="lucide lucide-inbox size-4 text-neutral-300"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12" class=""></polyline><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" class=""></path></svg>
            <span class="text-base font-medium text-neutral-200">Inbox</span>
          </div>
        </div>
        <button class="rounded-lg bg-neutral-850 px-3 py-1.5 text-xs font-medium text-neutral-300 ring-1 ring-neutral-800 hover:ring-neutral-700">
          Select
        </button>
      </div>

      <!-- Search + quick actions -->
      <div class="px-4">
        <div class="flex items-center gap-2">
          <div class="flex-1 flex items-center gap-2 rounded-xl bg-neutral-850 ring-1 ring-neutral-800 px-3 py-2.5">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="search" class="lucide lucide-search size-4 text-neutral-400"><path d="m21 21-4.34-4.34" class=""></path><circle cx="11" cy="11" r="8" class=""></circle></svg>
            <input class="w-full bg-transparent placeholder-neutral-500 text-sm focus:outline-none" placeholder="Search">
          </div>
          <button class="size-10 rounded-xl bg-neutral-850 ring-1 ring-neutral-800 flex items-center justify-center hover:ring-neutral-700">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="filter" class="lucide lucide-filter size-5 text-neutral-300"><path d="M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z" class=""></path></svg>
          </button>
        </div>

        <!-- Category chips -->
        <div class="flex gap-2 overflow-x-auto no-scrollbar mt-3 py-1 items-center" style="scrollbar-width: none;">
          <button class="px-4 py-2 text-sm font-medium rounded-full bg-blue-600/90 text-white shadow-sm">Primary</button>
          <button class="px-4 py-2 text-sm font-medium rounded-full bg-neutral-850 text-neutral-300 ring-1 ring-neutral-800 hover:ring-neutral-700">Notifications</button>
          <button class="px-4 py-2 text-sm font-medium rounded-full bg-neutral-850 text-neutral-300 ring-1 ring-neutral-800 hover:ring-neutral-700">Updates</button>
          <button class="px-4 py-2 text-sm font-medium rounded-full bg-neutral-850 text-neutral-300 ring-1 ring-neutral-800 hover:ring-neutral-700">Social</button>
          <button class="px-4 py-2 text-sm font-medium rounded-full bg-neutral-850 text-neutral-300 ring-1 ring-neutral-800 hover:ring-neutral-700">Promos</button>
        </div>
      </div>

      <!-- List -->
      <div class="mt-4 space-y-6">
        <!-- Section: Pinned -->
        <div class="px-4">
          <div class="flex items-center justify-between py-2">
            <div class="flex items-center gap-2">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="star" class="lucide lucide-star size-4 text-yellow-400"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" class=""></path></svg>
              <span class="text-[13px] font-medium text-neutral-300">Pinned</span>
            </div>
            <button class="size-7 rounded-lg bg-neutral-850 ring-1 ring-neutral-800 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="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="plus" class="lucide lucide-plus size-4 text-neutral-300"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
            </button>
          </div>

          <div class="space-y-2">
            <!-- Pinned Item -->
            <article class="group rounded-2xl bg-blue-600/10 ring-1 ring-blue-500/30 p-4">
              <div class="flex items-center gap-3">
                <img src="https://images.unsplash.com/photo-1544723795-3fb6469f5b39?q=80&amp;w=80&amp;auto=format&amp;fit=crop" class="size-10 rounded-full object-cover" alt="">
                <div class="min-w-0 flex-1">
                  <div class="flex items-center justify-between gap-2">
                    <p class="truncate text-sm font-medium text-neutral-100">Ari Tan • Design Ops</p>
                    
                  </div>
                  <p class="truncate text-[13px] text-neutral-300">Draft handoff recap — please review sections 3–5</p>
                </div>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="pin" class="lucide lucide-pin size-4 text-neutral-400"><path d="M12 17v5" class=""></path><path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z" class=""></path></svg>
              </div>
            </article>

            <article class="group rounded-2xl bg-blue-600/10 ring-1 ring-blue-500/30 p-4">
              <div class="flex items-center gap-3">
                <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&amp;w=80&amp;auto=format&amp;fit=crop" class="size-10 rounded-full object-cover" alt="">
                <div class="min-w-0 flex-1">
                  <div class="flex items-center justify-between gap-2">
                    <p class="truncate text-sm font-medium text-neutral-100">Sam &amp; Nova</p>
                    
                  </div>
                  <p class="truncate text-[13px] text-neutral-300">Q3 roadmap sync — next steps and owners</p>
                </div>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="alert-triangle" class="lucide lucide-alert-triangle size-4 text-amber-400"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" class=""></path><path d="M12 9v4" class=""></path><path d="M12 17h.01" class=""></path></svg>
              </div>
            </article>
          </div>
        </div>

        <!-- Section: Primary -->
        <div class="pr-4 pl-4">
          <div class="flex items-center gap-2 py-2">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="zap" class="lucide lucide-zap size-4 text-blue-400"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z" class=""></path></svg>
            <p class="text-[13px] font-medium text-neutral-300">Primary <span class="ml-1 rounded-md bg-neutral-850 px-1.5 py-0.5 text-[11px] text-neutral-400 ring-1 ring-neutral-800">196</span></p>
          </div>

          <ul class="space-y-0">
            <li class="flex items-center gap-3 py-3">
              <div class="size-10 rounded-full bg-gradient-to-br from-orange-500 to-amber-600 text-white flex items-center justify-center font-medium">F</div>
              <div class="min-w-0 flex-1">
                <div class="flex items-center justify-between">
                  <p class="truncate text-sm font-medium text-neutral-200">ForgeLabs</p>
                  
                </div>
                <p class="truncate text-[13px] text-neutral-400">Deploy failed on main • action #2189</p>
              </div>
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="shield-alert" class="lucide lucide-shield-alert size-4 text-emerald-400"><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="M12 8v4" class=""></path><path d="M12 16h.01" class=""></path></svg>
            </li>

            <li class="flex gap-3 pt-3 pb-3 items-center">
              <div class="size-10 rounded-full bg-neutral-800 ring-1 ring-neutral-700 flex items-center justify-center">
                <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&amp;w=80&amp;auto=format&amp;fit=crop" class="size-10 rounded-full object-cover" alt="">
              </div>
              <div class="min-w-0 flex-1">
                <div class="flex items-center justify-between">
                  <p class="truncate text-sm font-medium text-neutral-200">Nimbus Cloud</p>
                  
                </div>
                <p class="truncate text-[13px] text-neutral-400">Security update on your account</p>
              </div>
              <div class="flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="bell" class="lucide lucide-bell size-4 text-violet-400"><path d="M10.268 21a2 2 0 0 0 3.464 0" class=""></path><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326" class=""></path></svg>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="triangle-alert" class="lucide lucide-triangle-alert size-4 text-amber-400"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" class=""></path><path d="M12 9v4" class=""></path><path d="M12 17h.01" class=""></path></svg>
              </div>
            </li>

            <li class="flex items-center gap-3 py-3">
              <div class="size-10 rounded-full bg-neutral-800 ring-1 ring-neutral-700 flex items-center justify-center">
                <img src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?q=80&amp;w=80&amp;auto=format&amp;fit=crop" class="size-10 rounded-full object-cover" alt="">
              </div>
              <div class="min-w-0 flex-1">
                <div class="flex items-center justify-between">
                  <p class="truncate text-sm font-medium text-neutral-200">Atlas UI</p>
                  
                </div>
                <p class="truncate text-[13px] text-neutral-400">Edit request — component tokens</p>
              </div>
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="user-round-check" class="lucide lucide-user-round-check size-4 text-emerald-400"><path d="M2 21a8 8 0 0 1 13.292-6" class=""></path><circle cx="10" cy="8" r="5" class=""></circle><path d="m16 19 2 2 4-4" class=""></path></svg>
            </li>

            <li class="flex items-center gap-3 py-3">
              <div class="size-10 rounded-full bg-indigo-500 text-white flex items-center justify-center font-medium">Z</div>
              <div class="min-w-0 flex-1">
                <div class="flex items-center justify-between">
                  <p class="truncate text-sm font-medium text-neutral-200">ZenChat</p>
                  
                </div>
                <p class="truncate text-[13px] text-neutral-400">Payment received • Team Plus</p>
              </div>
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="badge-check" class="lucide lucide-badge-check size-4 text-emerald-400"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z" class=""></path><path d="m9 12 2 2 4-4" class=""></path></svg>
            </li>

            <li class="flex items-center gap-3 py-3">
              <div class="size-10 rounded-full bg-neutral-800 ring-1 ring-neutral-700 overflow-hidden">
                <img src="https://images.unsplash.com/photo-1621619856624-42fd193a0661?w=1080&amp;q=80" alt="" class="size-10 object-cover">
              </div>
              <div class="min-w-0 flex-1">
                <div class="flex items-center justify-between">
                  <p class="truncate text-sm font-medium text-neutral-200">PixelDrop</p>
                  
                </div>
                <p class="truncate text-[13px] text-neutral-400">Thanks for joining — starter pack inside</p>
              </div>
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="download" class="lucide lucide-download size-4 text-cyan-400"><path d="M12 15V3" class=""></path><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path><path d="m7 10 5 5 5-5" class=""></path></svg>
            </li>
          </ul>
        </div>
      </div>

      <!-- Bottom bar -->
      
    </div>