CTA Floating Bubble

<!-- Floating bubble CTA — CSS-only toggle via hidden checkbox + peer -->

<!-- The checkbox is hidden and drives the open/close state -->
<input type="checkbox" id="ws-bubble-toggle" class="peer sr-only" aria-label="Toggle contact form">

<!-- Backdrop (optional subtle overlay when open) -->
<label
  for="ws-bubble-toggle"
  class="pointer-events-none fixed inset-0 z-40 bg-black/0 transition-colors duration-300
         peer-checked:pointer-events-auto peer-checked:bg-black/10"
  aria-hidden="true"
></label>

<!-- Floating panel + button wrapper -->
<div class="ws-cta fixed bottom-6 right-6 z-50 flex flex-col items-end gap-3">

  <!-- Contact panel (hidden until checkbox checked) -->
  <div
    class="w-72 translate-y-2 scale-95 rounded-2xl border border-[var(--ws-cta-border)] bg-[var(--ws-cta-bg)] p-5 opacity-0 shadow-xl transition-all duration-300
           peer-checked:translate-y-0 peer-checked:scale-100 peer-checked:opacity-100"
    role="dialog"
    aria-label="Contact form"
    aria-modal="true"
  >
    <!-- Panel header -->
    <div class="mb-4 flex items-center justify-between">
      <div>
        <p class="text-sm font-semibold text-[var(--ws-cta-text)]">Send us a message</p>
        <p class="text-xs text-[var(--ws-cta-text-soft)]">We typically reply within 24 hours.</p>
      </div>
      <!-- Close button -->
      <label for="ws-bubble-toggle" class="cursor-pointer rounded-lg p-1.5 text-[var(--ws-color-text-muted)] transition hover:bg-[var(--ws-color-surface-alt)] hover:text-[var(--ws-cta-text)]" aria-label="Close contact form">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
        </svg>
      </label>
    </div>

    <!-- Form fields -->
    <form class="flex flex-col gap-3" onsubmit="return false;">
      <div>
        <label for="ws-bubble-name" class="mb-1 block text-xs font-medium text-[var(--ws-cta-text-soft)]">Your name</label>
        <input
          id="ws-bubble-name"
          type="text"
          placeholder="Jane Smith"
          class="w-full rounded-lg border border-[var(--ws-cta-border)] bg-[var(--ws-color-surface-alt)] px-3 py-2 text-sm text-[var(--ws-cta-text)] placeholder-[var(--ws-color-text-muted)] outline-none focus:border-violet-500 focus:ring-2 focus:ring-violet-500/20"
        >
      </div>
      <div>
        <label for="ws-bubble-message" class="mb-1 block text-xs font-medium text-[var(--ws-cta-text-soft)]">Message</label>
        <textarea
          id="ws-bubble-message"
          rows="3"
          placeholder="How can we help?"
          class="w-full resize-none rounded-lg border border-[var(--ws-cta-border)] bg-[var(--ws-color-surface-alt)] px-3 py-2 text-sm text-[var(--ws-cta-text)] placeholder-[var(--ws-color-text-muted)] outline-none focus:border-violet-500 focus:ring-2 focus:ring-violet-500/20"
        ></textarea>
      </div>
      <button
        type="submit"
        class="w-full rounded-lg bg-violet-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-violet-700 active:scale-95"
      >
        Send message
      </button>
    </form>
  </div>

  <!-- Floating action button (toggle trigger) -->
  <label
    for="ws-bubble-toggle"
    class="flex h-14 w-14 cursor-pointer items-center justify-center rounded-full bg-violet-600 shadow-lg shadow-violet-500/30 transition hover:bg-violet-700 hover:scale-105 active:scale-95"
    aria-label="Open contact form"
  >
    <!-- Chat icon (shown when closed) -->
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="h-6 w-6 text-white transition-all duration-300 peer-checked:opacity-0 peer-checked:scale-75"
      fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"
    >
      <path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
    </svg>
  </label>

</div>

<!-- Demo page placeholder so the fixed element is visible -->
<div class="flex min-h-screen items-center justify-center bg-[var(--ws-cta-bg)]">
  <p class="text-sm text-[var(--ws-color-text-muted)]">Page content — floating CTA appears bottom-right.</p>
</div>