Chat Bubble FAB

<!--
  The unread count is folded into the button's aria-label ("Open chat, 3
  unread") so it is announced, not left to a coloured dot the badge is only a
  picture of and is aria-hidden. The panel is width-capped with
  max-w-[calc(100vw-3rem)] so it never crosses the viewport edge on a phone.
-->
<div class="fab-chat fixed bottom-6 right-6 z-40 flex flex-col items-end gap-3" data-open="false">
  <div id="fab-chat-panel" role="dialog" aria-label="Support chat" class="w-72 max-w-[calc(100vw-3rem)] rounded-2xl border border-gray-200 bg-white p-4 shadow-[0_20px_40px_-12px_rgba(15,23,42,0.4)] motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-2 group-data-[open=false]:hidden dark:border-gray-800 dark:bg-gray-900">
    <p class="text-sm font-semibold text-gray-900 dark:text-gray-50">Support</p>
    <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Hi there - how can we help you today?</p>
  </div>
  <button type="button" aria-expanded="false" aria-controls="fab-chat-panel" aria-label="Open chat, 3 unread" class="relative inline-flex h-14 w-14 items-center justify-center rounded-full bg-blue-600 text-white shadow-[0_12px_28px_-8px_rgba(15,23,42,0.45)] hover:bg-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:bg-blue-500 dark:hover:bg-blue-400 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-950">
    <svg class="h-6 w-6" 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="M21 11.5a8.4 8.4 0 0 1-8.5 8.5 8.6 8.6 0 0 1-3.9-.9L3 21l1.9-5.6A8.4 8.4 0 0 1 4 11.5 8.4 8.4 0 0 1 12.5 3 8.4 8.4 0 0 1 21 11.5Z" /></svg>
    <span aria-hidden="true" class="absolute -right-0.5 -top-0.5 inline-flex h-5 min-w-5 items-center justify-center rounded-full border-2 border-white bg-rose-600 px-1 text-xs font-semibold text-white dark:border-gray-950">3</span>
  </button>
</div>

<script>
  document.querySelectorAll('.fab-chat').forEach(function (root) {
    var trigger = root.querySelector('[aria-controls="fab-chat-panel"]');
    var badge = root.querySelector('span[aria-hidden]');
    trigger.addEventListener('click', function () {
      var open = root.dataset.open !== 'true';
      root.dataset.open = String(open);
      trigger.setAttribute('aria-expanded', String(open));
      trigger.setAttribute('aria-label', open ? 'Close chat' : 'Open chat, 3 unread');
      if (badge) badge.style.display = open ? 'none' : '';
    });
  });
</script>