<div
class="relative mx-auto w-full max-w-4xl rounded-3xl bg-white/40 p-4 shadow-sm backdrop-blur-xs"
>
<form
class="group relative flex flex-col gap-4 overflow-hidden rounded-2xl bg-white shadow-sm transition-all before:absolute before:-top-full before:-right-full before:-bottom-full before:-left-full before:-m-96 before:block before:animate-[spin_6s_linear_infinite] before:bg-[conic-gradient(var(--color-purple-500),transparent,transparent)] before:opacity-0 before:content-[''] focus-within:shadow-lg focus-within:ring-4 focus-within:shadow-pink-500/10 focus-within:ring-purple-500/10 focus-within:before:opacity-100 hover:not-focus-within:before:opacity-35"
onsubmit="return false;"
>
<div class="relative m-px rounded-2xl bg-white p-6">
<div class="mb-4 flex items-center gap-3">
<div
class="flex size-12 items-center justify-center rounded-xl bg-purple-100 text-white"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
class="lucide lucide-wand-sparkles inline-block size-6 text-purple-600"
>
<path
d="m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72"
/>
<path d="m14 7 3 3" />
<path d="M5 6v4" />
<path d="M19 14v4" />
<path d="M10 2v2" />
<path d="M7 8H3" />
<path d="M21 16h-4" />
<path d="M11 3H9" />
</svg>
</div>
<div>
<h2 class="text-lg font-semibold text-zinc-900">AI Assistant</h2>
<p class="text-sm text-zinc-500">
Ask anything and get intelligent responses
</p>
</div>
</div>
<div class="relative mb-4">
<textarea
name="prompt"
rows="3"
placeholder="Ask AI anything... Try describing what you want to create, solve, or learn about."
class="block min-h-20 w-full resize-none rounded-xl border border-zinc-200 bg-zinc-50/50 px-4 py-3 text-sm font-medium placeholder-zinc-400 transition-colors focus:border-purple-300 focus:bg-white focus:ring-3 focus:ring-purple-100 focus:outline-hidden"
oninput="this.style.height = ''; this.style.height = Math.max(80, this.scrollHeight + 2) + 'px'"
></textarea>
<div class="absolute right-3 bottom-3 hidden sm:block">
<span class="text-xs font-medium text-zinc-400"
>CTRL/CMD + Enter to send</span
>
</div>
</div>
<div class="my-4 border-y border-dashed border-zinc-200 py-4">
<div
class="mb-2 text-xs font-medium tracking-wide text-zinc-400 uppercase"
>
Quick Prompts
</div>
<div class="flex flex-wrap gap-2">
<button
type="button"
class="rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-1.5 text-xs font-medium text-zinc-700 transition-colors hover:border-purple-200 hover:bg-purple-50 hover:text-purple-700"
>
Explain this concept
</button>
<button
type="button"
class="rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-1.5 text-xs font-medium text-zinc-700 transition-colors hover:border-purple-200 hover:bg-purple-50 hover:text-purple-700"
>
Write code for
</button>
<button
type="button"
class="rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-1.5 text-xs font-medium text-zinc-700 transition-colors hover:border-purple-200 hover:bg-purple-50 hover:text-purple-700"
>
Summarize this
</button>
<button
type="button"
class="rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-1.5 text-xs font-medium text-zinc-700 transition-colors hover:border-purple-200 hover:bg-purple-50 hover:text-purple-700"
>
Creative brainstorm
</button>
<button
type="button"
class="rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-1.5 text-xs font-medium text-zinc-700 transition-colors hover:border-purple-200 hover:bg-purple-50 hover:text-purple-700"
>
Reply to this email
</button>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center gap-1.5">
<button
type="button"
class="group inline-flex size-8 items-center justify-center gap-1.5 rounded-full border border-zinc-200 bg-white text-sm leading-5 font-semibold text-zinc-700 hover:border-zinc-300 hover:text-zinc-900 hover:shadow-xs focus:ring-2 focus:ring-zinc-300/25 focus:outline-hidden active:border-zinc-200 active:shadow-none"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="hi-micro hi-plus inline-block size-4"
>
<path
d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
/>
</svg>
</button>
<label class="group relative flex">
<input
type="checkbox"
name="action_search"
class="peer absolute top-0 left-0 appearance-none opacity-0"
/>
<span
class="relative flex h-8 grow items-center gap-1.5 rounded-xl border border-zinc-200 px-2.5 text-sm font-medium peer-checked:border-purple-400 peer-checked:bg-purple-50 peer-checked:text-purple-700 peer-focus:ring-3 peer-focus:ring-purple-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="hi-micro hi-globe-alt inline-block size-4 opacity-50"
>
<path
fill-rule="evenodd"
d="M3.757 4.5c.18.217.376.42.586.608.153-.61.354-1.175.596-1.678A5.53 5.53 0 0 0 3.757 4.5ZM8 1a6.994 6.994 0 0 0-7 7 7 7 0 1 0 7-7Zm0 1.5c-.476 0-1.091.386-1.633 1.427-.293.564-.531 1.267-.683 2.063A5.48 5.48 0 0 0 8 6.5a5.48 5.48 0 0 0 2.316-.51c-.152-.796-.39-1.499-.683-2.063C9.09 2.886 8.476 2.5 8 2.5Zm3.657 2.608a8.823 8.823 0 0 0-.596-1.678c.444.298.842.659 1.182 1.07-.18.217-.376.42-.586.608Zm-1.166 2.436A6.983 6.983 0 0 1 8 8a6.983 6.983 0 0 1-2.49-.456 10.703 10.703 0 0 0 .202 2.6c.72.231 1.49.356 2.288.356.798 0 1.568-.125 2.29-.356a10.705 10.705 0 0 0 .2-2.6Zm1.433 1.85a12.652 12.652 0 0 0 .018-2.609c.405-.276.78-.594 1.117-.947a5.48 5.48 0 0 1 .44 2.262 7.536 7.536 0 0 1-1.575 1.293Zm-2.172 2.435a9.046 9.046 0 0 1-3.504 0c.039.084.078.166.12.244C6.907 13.114 7.523 13.5 8 13.5s1.091-.386 1.633-1.427c.04-.078.08-.16.12-.244Zm1.31.74a8.5 8.5 0 0 0 .492-1.298c.457-.197.893-.43 1.307-.696a5.526 5.526 0 0 1-1.8 1.995Zm-6.123 0a8.507 8.507 0 0 1-.493-1.298 8.985 8.985 0 0 1-1.307-.696 5.526 5.526 0 0 0 1.8 1.995ZM2.5 8.1c.463.5.993.935 1.575 1.293a12.652 12.652 0 0 1-.018-2.608 7.037 7.037 0 0 1-1.117-.947 5.48 5.48 0 0 0-.44 2.262Z"
clip-rule="evenodd"
/>
</svg>
<span class="hidden sm:inline">Search</span>
</span>
</label>
<label class="group relative flex">
<input
type="checkbox"
name="action_reason"
class="peer absolute top-0 left-0 appearance-none opacity-0"
/>
<span
class="relative flex h-8 grow items-center gap-1.5 rounded-xl border border-zinc-200 px-2.5 text-sm font-medium peer-checked:border-purple-400 peer-checked:bg-purple-50 peer-checked:text-purple-700 peer-focus:ring-3 peer-focus:ring-purple-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="hi-micro hi-light-bulb inline-block size-4 opacity-50"
>
<path
d="M10.618 10.26c-.361.223-.618.598-.618 1.022 0 .226-.142.43-.36.49A6.006 6.006 0 0 1 8 12c-.569 0-1.12-.08-1.64-.227a.504.504 0 0 1-.36-.491c0-.424-.257-.799-.618-1.021a5 5 0 1 1 5.235 0ZM6.867 13.415a.75.75 0 1 0-.225 1.483 9.065 9.065 0 0 0 2.716 0 .75.75 0 1 0-.225-1.483 7.563 7.563 0 0 1-2.266 0Z"
/>
</svg>
<span class="hidden sm:inline">Reason</span>
</span>
</label>
</div>
<div class="flex items-center gap-4">
<div class="hidden items-center gap-1 text-xs text-zinc-500 sm:flex">
<div class="size-2 rounded-full bg-green-400"></div>
<span>GPT-5 Ready</span>
</div>
<button
type="submit"
class="group flex items-center gap-1.5 rounded-lg bg-purple-600 px-4 py-2.5 text-center text-sm font-medium text-white hover:bg-purple-700 focus:ring-2 focus:ring-purple-500/50 focus:ring-offset-2 focus:outline-none active:bg-purple-600"
>
<span>Send</span>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="hi-micro hi-arrow-right inline-block size-4 opacity-75 group-hover:translate-x-0.5 group-hover:opacity-100"
>
<path
fill-rule="evenodd"
d="M2 8a.75.75 0 0 1 .75-.75h8.69L8.22 4.03a.75.75 0 0 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06l3.22-3.22H2.75A.75.75 0 0 1 2 8Z"
clip-rule="evenodd"
/>
</svg>
</button>
</div>
</div>
</div>
</form>
</div>