AI Response Base

<article class="ws-ai-response rounded-2xl border border-[var(--ws-ai-response-border)] bg-[var(--ws-ai-response-bg)] p-6 sm:p-8">
  <div class="flex gap-4">
    <!-- Avatar -->
    <div class="flex-shrink-0">
      <div class="flex h-10 w-10 items-center justify-center rounded-full bg-[var(--ws-ai-response-accent)] text-sm font-bold text-[var(--ws-ai-response-action-text)]" aria-hidden="true">AI</div>
    </div>

    <!-- Response content -->
    <div class="min-w-0 flex-1 space-y-4">
      <h3 class="text-lg font-semibold text-[var(--ws-ai-response-text)]">Getting started with Tailwind CSS</h3>
      <p class="text-base leading-relaxed text-[var(--ws-ai-response-text-soft)]">Tailwind CSS is a utility-first framework that lets you build custom designs without leaving your HTML. Here are the key concepts you need to know:</p>
      <ul class="list-inside list-disc space-y-2 text-[var(--ws-ai-response-text-soft)]" role="list">
        <li>Utility classes map directly to CSS properties</li>
        <li>Responsive design uses mobile-first breakpoint prefixes</li>
        <li>Dark mode is supported via the <code class="rounded bg-[var(--ws-ai-response-border)] px-1.5 py-0.5 text-sm font-mono text-[var(--ws-ai-response-text)]">dark:</code> variant</li>
        <li>Custom values are defined in your theme configuration</li>
      </ul>
    </div>
  </div>
</article>