AI Prompt Base

<section
  class="ws-ai-prompt mx-auto max-w-2xl rounded-2xl border shadow-md"
  style="
    --ws-ai-prompt-bg: oklch(0.985 0.002 75);
    --ws-ai-prompt-text: oklch(0.205 0.015 75);
    --ws-ai-prompt-text-soft: oklch(0.556 0.01 75);
    --ws-ai-prompt-border: oklch(0.885 0.008 75);
    --ws-ai-prompt-accent: oklch(0.588 0.16 250);
    --ws-ai-prompt-input-bg: oklch(0.97 0.003 75);
    background: var(--ws-ai-prompt-bg);
    color: var(--ws-ai-prompt-text);
    border-color: var(--ws-ai-prompt-border);
  "
>
  <form class="flex flex-col gap-3 p-4" onsubmit="return false">
    <label for="ai-prompt-base" class="sr-only">Enter your prompt</label>
    <div
      class="rounded-xl border transition focus-within:ring-2"
      style="
        border-color: var(--ws-ai-prompt-border);
        background: var(--ws-ai-prompt-input-bg);
      "
    >
      <textarea
        id="ai-prompt-base"
        rows="3"
        placeholder="Ask anything..."
        class="w-full resize-none bg-transparent px-4 pt-3 pb-2 text-sm outline-none"
        style="color: var(--ws-ai-prompt-text)"
        aria-label="Prompt input"
      ></textarea>
      <div class="flex items-center justify-between px-4 pb-3">
        <p class="text-xs" style="color: var(--ws-ai-prompt-text-soft)">
          Press Enter to send
        </p>
        <button
          type="submit"
          class="flex h-8 w-8 items-center justify-center rounded-lg text-white transition hover:opacity-90"
          style="background: var(--ws-ai-prompt-accent)"
          aria-label="Send prompt"
        >
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a1 1 0 01-.707-.293l-7-7a1 1 0 011.414-1.414L9 14.586V3a1 1 0 112 0v11.586l5.293-5.293a1 1 0 011.414 1.414l-7 7A1 1 0 0110 18z" clip-rule="evenodd" transform="rotate(180 10 10)" />
          </svg>
        </button>
      </div>
    </div>
  </form>
</section>