Chatbox Base

<div class="ws-chatbox mx-auto flex max-w-sm flex-col overflow-hidden rounded-xl border border-[var(--ws-chatbox-border)] bg-[var(--ws-chatbox-bg)]" style="height: 28rem;">
  <!-- Header -->
  <div class="flex items-center gap-3 border-b border-[var(--ws-chatbox-border)] px-4 py-3">
    <div class="flex h-9 w-9 items-center justify-center rounded-full bg-indigo-100 text-xs font-bold text-indigo-700" aria-hidden="true">SK</div>
    <div class="min-w-0 flex-1">
      <p class="text-sm font-semibold text-[var(--ws-chatbox-text)]">Sarah Kim</p>
      <div class="flex items-center gap-1.5">
        <span class="h-2 w-2 rounded-full bg-emerald-500" aria-hidden="true"></span>
        <span class="text-xs text-[var(--ws-chatbox-text-soft)]">Online</span>
      </div>
    </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)]">Hey! Have you seen the new design mockups?</p>
        <time class="mt-1 block text-right text-xs text-[var(--ws-chatbox-text-soft)]">10:24</time>
      </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">Yes! They look amazing. Love the new color palette.</p>
        <time class="mt-1 block text-right text-xs text-white/70">10:26</time>
      </div>
    </div>
    <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)]">Great! I'll share the Figma link in the channel.</p>
        <time class="mt-1 block text-right text-xs text-[var(--ws-chatbox-text-soft)]">10:27</time>
      </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">Perfect, thanks!</p>
        <time class="mt-1 block text-right text-xs text-white/70">10:28</time>
      </div>
    </div>
  </div>
  <!-- Input -->
  <div class="border-t border-[var(--ws-chatbox-border)] p-3">
    <div class="flex items-center gap-2">
      <button type="button" class="shrink-0 rounded-lg p-2 text-[var(--ws-chatbox-text-soft)] transition hover:bg-[var(--ws-chatbox-border)]" aria-label="Add emoji">
        <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="M15.182 15.182a4.5 4.5 0 0 1-6.364 0M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Z" /></svg>
      </button>
      <input type="text" placeholder="Type a message..." class="min-w-0 flex-1 rounded-lg border border-[var(--ws-chatbox-border)] bg-transparent px-3 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-lg 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>