Notification Dropdown

<!--
  The bell trigger carries the unread count in its aria-label - a red dot alone
  says nothing to a screen reader. The panel is a role="menu": "Mark all read",
  every notification row, and "View all" share one arrow-key ring in reading
  order, so the dividers never trap focus. Anchored right-0 and capped so it
  never leaves a 320px viewport.
-->
<div class="relative inline-block">
  <button type="button" aria-haspopup="menu" aria-expanded="true" aria-controls="nt-menu" aria-label="Notifications, 2 unread" class="relative inline-flex h-10 w-10 items-center justify-center rounded-lg border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">
    <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10.3 21a1.94 1.94 0 0 0 3.4 0" /></svg>
    <span aria-hidden="true" class="absolute right-1.5 top-1.5 h-2 w-2 rounded-full bg-red-500 ring-2 ring-white dark:ring-gray-900"></span>
  </button>

  <div id="nt-menu" role="menu" aria-label="Notifications" class="absolute right-0 top-[calc(100%+0.5rem)] z-20 w-80 max-w-[calc(100vw-2rem)] rounded-xl border border-gray-200 bg-white p-1 shadow-lg dark:border-gray-700 dark:bg-gray-900">
    <div class="flex items-center justify-between px-2 py-1.5">
      <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">Notifications</p>
      <button type="button" role="menuitem" class="rounded px-1.5 py-1 text-xs font-medium text-blue-600 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 dark:text-blue-400">Mark all read</button>
    </div>
    <hr role="separator" class="my-1 h-px border-0 bg-gray-200 dark:bg-gray-700" />
    <ul class="max-h-64 overflow-y-auto" role="none">
      <li role="none">
        <button type="button" role="menuitem" class="flex w-full items-start gap-2.5 rounded-md px-2.5 py-2 text-left hover:bg-gray-100 focus-visible:bg-gray-100 focus-visible:outline-none dark:hover:bg-gray-800 dark:focus-visible:bg-gray-800">
          <span aria-hidden="true" class="mt-1.5 h-2 w-2 flex-none rounded-full bg-blue-500"></span>
          <span class="min-w-0 flex-1">
            <span class="block text-sm text-gray-800 dark:text-gray-200">Priya commented on “Q3 roadmap”</span>
            <span class="mt-0.5 block text-xs text-gray-500 dark:text-gray-400">2m ago</span>
          </span>
        </button>
      </li>
      <li role="none">
        <button type="button" role="menuitem" class="flex w-full items-start gap-2.5 rounded-md px-2.5 py-2 text-left hover:bg-gray-100 focus-visible:bg-gray-100 focus-visible:outline-none dark:hover:bg-gray-800 dark:focus-visible:bg-gray-800">
          <span aria-hidden="true" class="mt-1.5 h-2 w-2 flex-none rounded-full bg-transparent"></span>
          <span class="min-w-0 flex-1">
            <span class="block text-sm text-gray-800 dark:text-gray-200">Weekly report is ready</span>
            <span class="mt-0.5 block text-xs text-gray-500 dark:text-gray-400">Yesterday</span>
          </span>
        </button>
      </li>
    </ul>
    <hr role="separator" class="my-1 h-px border-0 bg-gray-200 dark:bg-gray-700" />
    <button type="button" role="menuitem" class="block w-full rounded-md px-3 py-2 text-center text-sm font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus-visible:bg-gray-100 focus-visible:text-gray-900 focus-visible:outline-none dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-100 dark:focus-visible:bg-gray-800 dark:focus-visible:text-gray-100">View all</button>
  </div>
</div>