Chat Widget

<section
  class="ws-chat-widget flex max-w-sm flex-col rounded-2xl border"
  style="
    --ws-chat-widget-bg: oklch(0.99 0.005 75);
    --ws-chat-widget-text: oklch(0.25 0.01 75);
    --ws-chat-widget-text-soft: oklch(0.45 0.01 75);
    --ws-chat-widget-text-muted: oklch(0.6 0.01 75);
    --ws-chat-widget-border: oklch(0.9 0.01 75);
    --ws-chat-widget-accent: oklch(0.55 0.12 75);
    --ws-chat-widget-accent-soft: oklch(0.92 0.04 75);
    --ws-chat-widget-accent-text: oklch(0.99 0.005 75);
    --ws-chat-widget-muted-bg: oklch(0.96 0.005 75);
    background: var(--ws-chat-widget-bg);
    color: var(--ws-chat-widget-text);
    border-color: var(--ws-chat-widget-border);
  "
  aria-label="Chat support window"
>
  <!-- Header -->
  <header class="flex items-center justify-between border-b px-4 py-3" style="border-color: var(--ws-chat-widget-border)">
    <div class="flex items-center gap-2.5">
      <div class="relative">
        <div
          class="flex h-8 w-8 items-center justify-center rounded-full text-xs font-semibold"
          style="background: var(--ws-chat-widget-accent); color: var(--ws-chat-widget-accent-text)"
          aria-hidden="true"
        >S</div>
        <span class="absolute -bottom-0.5 -right-0.5 h-2.5 w-2.5 rounded-full border-2" style="background: oklch(0.72 0.19 145); border-color: var(--ws-chat-widget-bg)" aria-label="Online"></span>
      </div>
      <div class="flex flex-col">
        <span class="text-sm font-semibold">Support</span>
        <span class="text-xs" style="color: var(--ws-chat-widget-text-muted)">Online</span>
      </div>
    </div>
    <div
      class="flex h-7 w-7 items-center justify-center rounded-md"
      style="color: var(--ws-chat-widget-text-muted)"
      aria-label="Minimize chat"
      role="button"
      tabindex="0"
    >
      <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M4 10a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H4.75A.75.75 0 0 1 4 10Z" clip-rule="evenodd"/>
      </svg>
    </div>
  </header>

  <!-- Messages -->
  <div class="flex flex-col gap-3 overflow-y-auto px-4 py-4" style="max-height: 22rem" role="log" aria-label="Chat messages">
    <!-- Received -->
    <div class="flex flex-col items-start gap-1">
      <div class="max-w-[80%] rounded-2xl rounded-bl-md px-3.5 py-2 text-sm" style="background: var(--ws-chat-widget-muted-bg); color: var(--ws-chat-widget-text-soft)">
        Hi! How can I help?
      </div>
      <time class="px-1 text-[10px]" style="color: var(--ws-chat-widget-text-muted)">10:02 AM</time>
    </div>

    <!-- Sent -->
    <div class="flex flex-col items-end gap-1">
      <div class="max-w-[80%] rounded-2xl rounded-br-md px-3.5 py-2 text-sm" style="background: var(--ws-chat-widget-accent); color: var(--ws-chat-widget-accent-text)">
        I have a question about pricing
      </div>
      <time class="px-1 text-[10px]" style="color: var(--ws-chat-widget-text-muted)">10:03 AM</time>
    </div>

    <!-- Received -->
    <div class="flex flex-col items-start gap-1">
      <div class="max-w-[80%] rounded-2xl rounded-bl-md px-3.5 py-2 text-sm" style="background: var(--ws-chat-widget-muted-bg); color: var(--ws-chat-widget-text-soft)">
        Of course! Which plan are you interested in?
      </div>
      <time class="px-1 text-[10px]" style="color: var(--ws-chat-widget-text-muted)">10:03 AM</time>
    </div>

    <!-- Sent -->
    <div class="flex flex-col items-end gap-1">
      <div class="max-w-[80%] rounded-2xl rounded-br-md px-3.5 py-2 text-sm" style="background: var(--ws-chat-widget-accent); color: var(--ws-chat-widget-accent-text)">
        The Pro plan — does it include API access?
      </div>
      <time class="px-1 text-[10px]" style="color: var(--ws-chat-widget-text-muted)">10:04 AM</time>
    </div>

    <!-- Received -->
    <div class="flex flex-col items-start gap-1">
      <div class="max-w-[80%] rounded-2xl rounded-bl-md px-3.5 py-2 text-sm" style="background: var(--ws-chat-widget-muted-bg); color: var(--ws-chat-widget-text-soft)">
        Yes! The Pro plan includes full API access with 10k requests/month.
      </div>
      <time class="px-1 text-[10px]" style="color: var(--ws-chat-widget-text-muted)">10:04 AM</time>
    </div>
  </div>

  <!-- Input -->
  <div class="flex items-center gap-2 border-t px-4 py-3" style="border-color: var(--ws-chat-widget-border)">
    <label for="chat-input" class="sr-only">Type a message</label>
    <input
      id="chat-input"
      type="text"
      placeholder="Type a message…"
      class="flex-1 rounded-xl border px-3.5 py-2 text-sm outline-none"
      style="background: var(--ws-chat-widget-muted-bg); border-color: var(--ws-chat-widget-border); color: var(--ws-chat-widget-text)"
    />
    <div
      class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl"
      style="background: var(--ws-chat-widget-accent); color: var(--ws-chat-widget-accent-text)"
      role="button"
      tabindex="0"
      aria-label="Send message"
    >
      <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path d="M3.105 2.288a.75.75 0 0 0-.826.95l1.414 4.926A1.5 1.5 0 0 0 5.135 9.25h6.115a.75.75 0 0 1 0 1.5H5.135a1.5 1.5 0 0 0-1.442 1.086l-1.414 4.926a.75.75 0 0 0 .826.95l15.5-6a.75.75 0 0 0 0-1.424l-15.5-6Z"/>
      </svg>
    </div>
  </div>
</section>