Chatbox Minimal

<div class="ws-chatbox relative min-h-[24rem]">
  <!-- Floating chat bubble trigger -->
  <div class="absolute bottom-4 right-4">
    <button type="button" class="relative flex h-14 w-14 items-center justify-center rounded-full bg-[var(--ws-chatbox-accent)] text-white shadow-lg transition hover:opacity-90" aria-label="Open chat">
      <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M8.625 12a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 0 1-2.555-.337A5.972 5.972 0 0 1 5.41 20.97a5.969 5.969 0 0 1-.474-.065 4.48 4.48 0 0 0 .978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25Z" /></svg>
      <span class="absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-rose-500 text-xs font-bold text-white" aria-label="3 unread messages">3</span>
    </button>
  </div>
  <!-- Chat window (conceptually open state) -->
  <div class="absolute bottom-20 right-4 w-72 overflow-hidden rounded-xl border border-[var(--ws-chatbox-border)] bg-[var(--ws-chatbox-bg)] shadow-xl">
    <div class="flex items-center justify-between border-b border-[var(--ws-chatbox-border)] px-4 py-3">
      <p class="text-sm font-semibold text-[var(--ws-chatbox-text)]">Support Chat</p>
      <button type="button" class="rounded p-1 text-[var(--ws-chatbox-text-soft)] transition hover:bg-[var(--ws-chatbox-border)]" aria-label="Close chat">
        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>
      </button>
    </div>
    <div class="space-y-2 p-3" role="log" aria-label="Chat messages">
      <div class="flex justify-start">
        <div class="max-w-[80%] rounded-xl rounded-tl-sm bg-[var(--ws-chatbox-border)] px-3 py-1.5 text-xs text-[var(--ws-chatbox-text)]">Hi! How can we help you?</div>
      </div>
      <div class="flex justify-end">
        <div class="max-w-[80%] rounded-xl rounded-tr-sm bg-[var(--ws-chatbox-accent)] px-3 py-1.5 text-xs text-white">I have a question about pricing.</div>
      </div>
    </div>
    <div class="border-t border-[var(--ws-chatbox-border)] p-2">
      <input type="text" placeholder="Type a message..." class="w-full rounded-lg border border-[var(--ws-chatbox-border)] bg-transparent px-3 py-1.5 text-xs text-[var(--ws-chatbox-text)] placeholder:text-[var(--ws-chatbox-text-soft)]" aria-label="Message input" />
    </div>
  </div>
</div>