AI Chat Base

<section
  class="ws-ai-chat mx-auto flex h-[600px] max-w-3xl flex-col overflow-hidden rounded-2xl border shadow-md"
  style="
    --ws-ai-chat-bg: oklch(0.985 0.002 75);
    --ws-ai-chat-text: oklch(0.205 0.015 75);
    --ws-ai-chat-text-soft: oklch(0.556 0.01 75);
    --ws-ai-chat-border: oklch(0.885 0.008 75);
    --ws-ai-chat-accent: oklch(0.588 0.16 250);
    --ws-ai-chat-user-bg: oklch(0.588 0.16 250);
    --ws-ai-chat-ai-bg: oklch(0.95 0.004 75);
    background: var(--ws-ai-chat-bg);
    color: var(--ws-ai-chat-text);
    border-color: var(--ws-ai-chat-border);
  "
>
  <!-- Header -->
  <header
    class="flex items-center gap-3 border-b px-6 py-4"
    style="border-color: var(--ws-ai-chat-border)"
  >
    <div
      class="flex h-8 w-8 items-center justify-center rounded-full text-sm font-bold text-white"
      style="background: var(--ws-ai-chat-accent)"
    >
      AI
    </div>
    <div>
      <p class="text-sm font-semibold">AI Assistant</p>
      <p class="text-xs" style="color: var(--ws-ai-chat-text-soft)">Online</p>
    </div>
  </header>

  <!-- Messages -->
  <div class="flex flex-1 flex-col gap-4 overflow-y-auto px-6 py-6" role="log" aria-label="Chat messages" aria-live="polite">
    <!-- AI message -->
    <div class="flex items-start gap-3">
      <div
        class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-xs font-bold text-white"
        style="background: var(--ws-ai-chat-accent)"
        aria-hidden="true"
      >
        AI
      </div>
      <div class="max-w-[75%] rounded-2xl rounded-tl-sm px-4 py-3 text-sm" style="background: var(--ws-ai-chat-ai-bg)">
        Hello! I'm your AI assistant. How can I help you today?
      </div>
    </div>

    <!-- User message -->
    <div class="flex items-start justify-end gap-3">
      <div
        class="max-w-[75%] rounded-2xl rounded-tr-sm px-4 py-3 text-sm text-white"
        style="background: var(--ws-ai-chat-user-bg)"
      >
        Can you explain how Tailwind CSS custom properties work?
      </div>
    </div>

    <!-- AI message -->
    <div class="flex items-start gap-3">
      <div
        class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-xs font-bold text-white"
        style="background: var(--ws-ai-chat-accent)"
        aria-hidden="true"
      >
        AI
      </div>
      <div class="max-w-[75%] rounded-2xl rounded-tl-sm px-4 py-3 text-sm" style="background: var(--ws-ai-chat-ai-bg)">
        Of course! CSS custom properties (also called CSS variables) let you define reusable values. In Tailwind v4, you can use <code class="rounded px-1 py-0.5 text-xs" style="background: var(--ws-ai-chat-border)">@theme</code> to expose design tokens as custom properties that integrate directly with utility classes.
      </div>
    </div>

    <!-- User message -->
    <div class="flex items-start justify-end gap-3">
      <div
        class="max-w-[75%] rounded-2xl rounded-tr-sm px-4 py-3 text-sm text-white"
        style="background: var(--ws-ai-chat-user-bg)"
      >
        That makes sense, thanks!
      </div>
    </div>
  </div>

  <!-- Input area -->
  <div class="border-t px-4 py-4" style="border-color: var(--ws-ai-chat-border)">
    <form class="flex items-center gap-3" onsubmit="return false">
      <label for="chat-input-base" class="sr-only">Type a message</label>
      <input
        id="chat-input-base"
        type="text"
        placeholder="Type a message..."
        class="flex-1 rounded-xl border px-4 py-2.5 text-sm outline-none transition focus:ring-2"
        style="
          border-color: var(--ws-ai-chat-border);
          background: var(--ws-ai-chat-bg);
          color: var(--ws-ai-chat-text);
        "
      />
      <button
        type="submit"
        class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl text-white transition hover:opacity-90"
        style="background: var(--ws-ai-chat-accent)"
        aria-label="Send message"
      >
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
          <path d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z" />
        </svg>
      </button>
    </form>
  </div>
</section>