Animated Ticket Creation Form with Team & Repo Selectors

<section class="w-full max-w-3xl shadow-[0_10px_50px_-12px_rgba(80,70,180,0.4)] animate-in fade-in duration-700 bg-white/5 border-white/10 border rounded-2xl backdrop-blur-xl">
            <!-- title bar -->
            <div class="flex animate-in slide-in-from-top duration-700 delay-200 border-white/10 rounded-t-2xl border-b pt-4 pr-5 pb-4 pl-5 items-center justify-between">
                <div class="flex items-center gap-2">
                    <div class="h-2.5 w-2.5 rounded-full bg-emerald-400/80 shadow-[0_0_12px_rgba(52,211,153,0.7)]" id="statusDot"></div>
                    <h2 class="text-sm font-medium tracking-tight text-neutral-200">Create Nova Ticket</h2>
                </div>
                <div class="flex items-center gap-2 text-neutral-400" id="autosaveWrap">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check-circle" class="lucide lucide-check-circle h-4 w-4" id="autosaveIcon"><path d="M21.801 10A10 10 0 1 1 17 3.335"></path><path d="m9 11 3 3L22 4"></path></svg>
                    <span class="text-xs" id="autosaveStatus">saved</span>
                </div>
            </div>

            <!-- form content -->
            <div class="px-5 py-5 animate-in slide-in-from-bottom duration-700 delay-300">
                <!-- row: team + repo/branch -->
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div class="relative animate-in slide-in-from-left duration-700 delay-400">
                        <label class="mb-2 block text-xs font-medium text-neutral-400">Team</label>
                        <button id="teamButton" class="group flex w-full items-center justify-between rounded-lg border border-white/10 bg-white/[0.06] px-3 py-2 text-sm text-neutral-200 hover:border-white/20 transition-colors">
                            <span class="inline-flex items-center gap-2">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="users" class="lucide lucide-users h-4 w-4 text-neutral-400"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><path d="M16 3.128a4 4 0 0 1 0 7.744"></path><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><circle cx="9" cy="7" r="4"></circle></svg>
                                <span id="teamLabel" class="truncate">Core</span>
                            </span>
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="chevron-down" class="lucide lucide-chevron-down h-4 w-4 text-neutral-400 group-hover:text-neutral-300 transition-colors"><path d="m6 9 6 6 6-6"></path></svg>
                        </button>
                        <!-- Team menu -->
                        <div id="teamMenu" class="hidden absolute z-20 mt-1 w-full rounded-lg border border-white/10 bg-[#0f1220] shadow-[0_10px_40px_-10px_rgba(120,80,255,.4)] overflow-hidden">
                            <button data-team="Core" class="w-full text-left px-3 py-2 text-sm text-neutral-200 hover:bg-white/5 transition-colors">Core</button>
                            <button data-team="Frontend" class="w-full text-left px-3 py-2 text-sm text-neutral-200 hover:bg-white/5 transition-colors">Frontend</button>
                            <button data-team="Platform" class="w-full text-left px-3 py-2 text-sm text-neutral-200 hover:bg-white/5 transition-colors">Platform</button>
                            <button data-team="AI" class="w-full text-left px-3 py-2 text-sm text-neutral-200 hover:bg-white/5 transition-colors">AI</button>
                        </div>
                    </div>

                    <div class="space-y-2 relative animate-in slide-in-from-right duration-700 delay-500">
                        <label class="mb-2 block text-xs font-medium text-neutral-400">Repository</label>
                        <div class="flex items-center gap-2">
                            <button id="repoButton" class="group flex min-w-0 flex-1 items-center justify-between rounded-lg border border-white/10 bg-white/[0.06] px-3 py-2 text-sm text-neutral-200 hover:border-white/20 transition-colors">
                                <span class="truncate inline-flex items-center gap-2">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="git-branch" class="lucide lucide-git-branch h-4 w-4 text-neutral-400"><line x1="6" x2="6" y1="3" y2="15"></line><circle cx="18" cy="6" r="3"></circle><circle cx="6" cy="18" r="3"></circle><path d="M18 9a9 9 0 0 1-9 9"></path></svg>
                                    <span id="repoLabel" class="truncate">nova-desktop</span>
                                </span>
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="chevron-down" class="lucide lucide-chevron-down h-4 w-4 text-neutral-400 group-hover:text-neutral-300 transition-colors"><path d="m6 9 6 6 6-6"></path></svg>
                            </button>
                            <!-- custom toggle -->
                            <label class="relative inline-flex cursor-pointer items-center">
                                <input id="createBranchToggle" type="checkbox" class="peer sr-only" checked="">
                                <div class="h-6 w-10 rounded-full bg-neutral-700 transition peer-checked:bg-violet-500">
                                    <div class="absolute top-[3px] left-[3px] h-5 w-5 rounded-full bg-white/95 shadow transition peer-checked:translate-x-4"></div>
                                </div>
                                <span class="ml-2 text-xs text-neutral-300">Create branch</span>
                            </label>
                        </div>
                        <!-- Repo menu -->
                        <div id="repoMenu" class="hidden absolute z-20 mt-1 w-full rounded-lg border border-white/10 bg-[#0f1220] shadow-[0_10px_40px_-10px_rgba(120,80,255,.4)] overflow-hidden">
                            <button data-repo="nebula-kit" class="w-full text-left px-3 py-2 text-sm text-neutral-200 hover:bg-white/5 transition-colors">nebula-kit</button>
                            <button data-repo="nova-desktop" class="w-full text-left px-3 py-2 text-sm text-neutral-200 hover:bg-white/5 transition-colors">nova-desktop</button>
                            <button data-repo="nova-api" class="w-full text-left px-3 py-2 text-sm text-neutral-200 hover:bg-white/5 transition-colors">nova-api</button>
                        </div>
                        <!-- Branch name -->
                        
                    </div>
                </div>

                <!-- name -->
                <div class="mt-4 animate-in fade-in duration-700 delay-600">
                    <label class="mb-2 block text-xs font-medium text-neutral-400">Title</label>
                    <input id="titleInput" class="w-full rounded-lg border border-white/10 bg-white/[0.06] px-3 py-2 text-sm text-neutral-100 placeholder-neutral-500 outline-none focus:border-white/20 transition-colors" placeholder="Stabilize modal blur on Windows">
                </div>

                <!-- description -->
                <div class="mt-4 animate-in fade-in duration-700 delay-700">
                    <div class="flex items-center justify-between">
                        <label class="mb-2 block text-xs font-medium text-neutral-400">Description (optional)</label>
                        <button id="assistBtn" type="button" class="flex items-center gap-2 text-[11px] text-neutral-400 hover:text-neutral-300 transition-colors">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="wand-2" class="lucide lucide-wand-2 h-3.5 w-3.5"><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><path d="m14 7 3 3"></path><path d="M5 6v4"></path><path d="M19 14v4"></path><path d="M10 2v2"></path><path d="M7 8H3"></path><path d="M21 16h-4"></path><path d="M11 3H9"></path></svg>
                            <span>Suggest with Assist</span>
                        </button>
                    </div>
                    <div class="rounded-lg border border-white/10 bg-black/20 px-3 py-3">
                        <textarea id="descriptionInput" class="w-full min-h-[120px] rounded-md bg-transparent text-sm text-neutral-300 outline-none resize-y placeholder-neutral-500" placeholder="Add context, reproduction steps, expected behavior...">We noticed inconsistent blur rendering in the desktop shell.
The task is to resolve the artifact and ensure parity across platforms.

Steps to complete:
1. Reproduce on Windows 11 with animations enabled.
2. Inspect GPU composition and isolate overlay layers.
3. Ship a fix behind the modal-blur-v2 flag.</textarea>
                    </div>
                </div>

                <!-- footer -->
                <div class="mt-5 flex items-center justify-between animate-in fade-in duration-700 delay-800">
                    <a href="#" id="learnLink" class="inline-flex items-center gap-1.5 text-sm text-neutral-300 hover:text-white transition-colors">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="info" class="lucide lucide-info h-4 w-4"><circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path></svg>
                        Learn about the Nova integration
                    </a>
                    <button id="createBtn" class="inline-flex items-center gap-2 rounded-lg bg-gradient-to-r from-violet-500 to-fuchsia-500 px-4 py-2 text-sm font-medium text-white shadow-[0_8px_24px_-8px_rgba(168,85,247,0.6)] hover:from-violet-400 hover:to-fuchsia-400 transition-all transform hover:scale-105">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="rocket" class="lucide lucide-rocket h-4 w-4"><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"></path><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"></path><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"></path><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"></path></svg>
                        Create
                    </button>
                </div>

                <!-- toast -->
                <div id="toast" class="pointer-events-none fixed left-1/2 -translate-x-1/2 bottom-0 mb-8 hidden">
                    <div class="rounded-lg border border-white/10 bg-[#0f1220] px-4 py-2 text-sm text-neutral-200 shadow-[0_10px_40px_-10px_rgba(120,80,255,.4)]">
                        Ticket created successfully
                    </div>
                </div>
            </div>
        </section>