Chatbox Floating

<div class="ws-chatbox mx-auto flex max-w-sm flex-col overflow-hidden rounded-2xl border border-[var(--ws-chatbox-border)] bg-[var(--ws-chatbox-bg)] shadow-xl" style="height: 26rem;">
  <!-- Header -->
  <div class="flex items-center gap-3 bg-[var(--ws-chatbox-accent)] px-4 py-3">
    <div class="flex h-9 w-9 items-center justify-center rounded-full bg-white/20 text-sm font-bold text-white" aria-hidden="true">
      <svg class="h-5 w-5" 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>
    </div>
    <div class="min-w-0 flex-1">
      <p class="text-sm font-semibold text-white">Support Team</p>
      <p class="text-xs text-white/70">Typically replies in minutes</p>
    </div>
  </div>
  <!-- Messages -->
  <div class="flex-1 space-y-3 overflow-y-auto p-4" role="log" aria-label="Chat messages" aria-live="polite">
    <div class="flex justify-start">
      <div class="max-w-[75%] rounded-2xl rounded-tl-sm bg-[var(--ws-chatbox-border)] px-4 py-2">
        <p class="text-sm text-[var(--ws-chatbox-text)]">Hi there! How can we help you today?</p>
      </div>
    </div>
    <div class="flex justify-end">
      <div class="max-w-[75%] rounded-2xl rounded-tr-sm bg-[var(--ws-chatbox-accent)] px-4 py-2">
        <p class="text-sm text-white">I'd like to know more about the Pro plan.</p>
      </div>
    </div>
  </div>
  <!-- Quick replies -->
  <div class="flex flex-wrap gap-2 border-t border-[var(--ws-chatbox-border)] px-4 py-3">
    <button type="button" class="rounded-full border border-[var(--ws-chatbox-accent)] px-3 py-1 text-xs font-medium text-[var(--ws-chatbox-accent)] transition hover:bg-[var(--ws-chatbox-accent)]/10">Yes</button>
    <button type="button" class="rounded-full border border-[var(--ws-chatbox-accent)] px-3 py-1 text-xs font-medium text-[var(--ws-chatbox-accent)] transition hover:bg-[var(--ws-chatbox-accent)]/10">No</button>
    <button type="button" class="rounded-full border border-[var(--ws-chatbox-accent)] px-3 py-1 text-xs font-medium text-[var(--ws-chatbox-accent)] transition hover:bg-[var(--ws-chatbox-accent)]/10">More info</button>
  </div>
  <!-- Input -->
  <div class="border-t border-[var(--ws-chatbox-border)] p-3">
    <div class="flex items-center gap-2">
      <input type="text" placeholder="Type a message..." class="min-w-0 flex-1 rounded-full border border-[var(--ws-chatbox-border)] bg-transparent px-4 py-2 text-sm text-[var(--ws-chatbox-text)] placeholder:text-[var(--ws-chatbox-text-soft)]" aria-label="Message input" />
      <button type="button" class="shrink-0 rounded-full bg-[var(--ws-chatbox-accent)] p-2 text-white transition hover:opacity-90" aria-label="Send message">
        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5" /></svg>
      </button>
    </div>
  </div>
</div>