Notification Inbox Panel

<section class="ws-notification-inbox-panel" style="--ws-panel-bg: var(--ws-color-surface); --ws-panel-text: var(--ws-color-text); --ws-panel-text-soft: var(--ws-color-text-soft); --ws-panel-border: var(--ws-color-border); --ws-panel-accent: var(--ws-color-primary);">
  <div class="mx-auto max-w-3xl px-4 py-10 sm:px-6 lg:px-8">
    <div class="overflow-hidden rounded-2xl border border-[var(--ws-panel-border)] bg-[var(--ws-panel-bg)] shadow-sm">
      <div class="flex items-center justify-between border-b border-[var(--ws-panel-border)] px-6 py-4">
        <div>
          <h2 class="text-lg font-semibold text-[var(--ws-panel-text)]">Notifications</h2>
          <p class="mt-1 text-sm text-[var(--ws-panel-text-soft)]">A denser inbox-style surface for product updates and account events.</p>
        </div>
        <button type="button" class="text-sm font-medium text-[var(--ws-panel-accent)]">Mark all read</button>
      </div>
      <ul class="divide-y divide-[var(--ws-panel-border)]">
        <li class="flex gap-4 bg-[var(--ws-panel-accent)]/5 px-6 py-4">
          <div class="mt-1 h-2.5 w-2.5 rounded-full bg-[var(--ws-panel-accent)]"></div>
          <div class="min-w-0 flex-1">
            <div class="flex flex-wrap items-center gap-2">
              <p class="font-medium text-[var(--ws-panel-text)]">Quarterly billing report is ready</p>
              <span class="rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700">New</span>
            </div>
            <p class="mt-1 text-sm text-[var(--ws-panel-text-soft)]">Export the March summary or share it directly with finance.</p>
          </div>
          <p class="whitespace-nowrap text-sm text-[var(--ws-panel-text-soft)]">5 min</p>
        </li>
        <li class="flex gap-4 px-6 py-4">
          <div class="mt-1 h-2.5 w-2.5 rounded-full bg-emerald-500"></div>
          <div class="min-w-0 flex-1">
            <p class="font-medium text-[var(--ws-panel-text)]">Maya approved the new onboarding copy</p>
            <p class="mt-1 text-sm text-[var(--ws-panel-text-soft)]">The changes are live in the workspace preview.</p>
          </div>
          <p class="whitespace-nowrap text-sm text-[var(--ws-panel-text-soft)]">1 h</p>
        </li>
        <li class="flex gap-4 px-6 py-4">
          <div class="mt-1 h-2.5 w-2.5 rounded-full bg-amber-500"></div>
          <div class="min-w-0 flex-1">
            <p class="font-medium text-[var(--ws-panel-text)]">Storage usage reached 82%</p>
            <p class="mt-1 text-sm text-[var(--ws-panel-text-soft)]">Review uploads from the asset library before the next billing cycle.</p>
          </div>
          <p class="whitespace-nowrap text-sm text-[var(--ws-panel-text-soft)]">Yesterday</p>
        </li>
      </ul>
    </div>
  </div>
</section>