<section id="recommendation-card" class="primitive-showcase group flex w-full scroll-mt-8 flex-col border-b border-dashed border-line px-8 py-10" style="animation:fade-up 600ms cubic-bezier(0.23,1,0.32,1) 240ms both"><div class="mb-3 flex items-start gap-2 sm:items-baseline"><span class="mt-0.5 font-mono text-[11px] text-ink-3 tabular-nums sm:mt-0">09</span><div class="min-w-0 sm:flex sm:items-baseline sm:gap-2"><h3 class="whitespace-nowrap text-[13px] font-semibold text-ink">Recommendation Card</h3><p class="mt-0.5 text-[12.5px] text-ink-3 text-pretty sm:mt-0 sm:truncate">Agent suggestion with a confidence meter and actions.</p></div></div><div class="primitive-demo-surface relative flex items-center justify-center overflow-hidden rounded-window bg-canvas p-3 shadow-hairline" style="min-height: 454px;"><div class="w-full max-w-120 [&amp;&gt;*]:mx-auto"><div class="w-full max-w-95 overflow-hidden rounded-card bg-surface shadow-card"><div class="primitive-card-pad"><span class="text-[13px] font-semibold text-ink">Want me to place this restock order?</span><p class="mt-1.5 min-h-12 text-[13px] leading-relaxed text-ink-2" style="animation:fade-in 180ms ease-out both">Reorder waffle cones from<!-- --> <code class="rounded-md bg-accent-tint px-1.5 py-0.5 font-mono text-[12px] text-accent-ink">cone_king</code> <!-- -->with lead time<!-- --> <code class="rounded-md bg-accent-tint px-1.5 py-0.5 font-mono text-[12px] text-accent-ink">7_days</code>.</p></div><div class="grid transition-[grid-template-rows,opacity] duration-300" style="grid-template-rows:0fr;opacity:0;transition-timing-function:cubic-bezier(0.16, 1, 0.3, 1)"><div class="overflow-hidden"><div class="border-t border-line bg-inset px-2 py-2"><p class="px-1.5 pb-1 text-[11px] font-medium text-ink-3">Other options</p><button type="button" class="flex w-full items-center gap-2.5 rounded-control px-1.5 py-1.5 text-left transition-colors duration-100 hover:bg-hover"><span class="flex items-end gap-0.5"><span class="w-1 rounded-full transition-colors duration-300" style="height:10px;background:var(--orange)"></span><span class="w-1 rounded-full transition-colors duration-300" style="height:10px;background:var(--orange)"></span><span class="w-1 rounded-full transition-colors duration-300" style="height:10px;background:var(--line-strong)"></span></span><span class="min-w-0 flex-1 truncate text-[12.5px] text-ink">Switch to vanilla_madagascar</span><span class="shrink-0 text-[11px] text-ink-3">Needs review</span></button><button type="button" class="flex w-full items-center gap-2.5 rounded-control px-1.5 py-1.5 text-left transition-colors duration-100 hover:bg-hover"><span class="flex items-end gap-0.5"><span class="w-1 rounded-full transition-colors duration-300" style="height:10px;background:var(--line-strong)"></span><span class="w-1 rounded-full transition-colors duration-300" style="height:10px;background:var(--line-strong)"></span><span class="w-1 rounded-full transition-colors duration-300" style="height:10px;background:var(--line-strong)"></span></span><span class="min-w-0 flex-1 truncate text-[12.5px] text-ink">Full restock across every SKU</span><span class="shrink-0 text-[11px] text-ink-3">No signal</span></button></div></div></div><div class="primitive-card-footer flex items-center justify-between gap-3 border-t border-line bg-inset"><span class="flex items-center gap-2"><span class="flex items-end gap-0.5"><span class="w-1 rounded-full transition-colors duration-300" style="height:10px;background:var(--green)"></span><span class="w-1 rounded-full transition-colors duration-300" style="height:10px;background:var(--green)"></span><span class="w-1 rounded-full transition-colors duration-300" style="height:10px;background:var(--green)"></span></span><span class="text-[12.5px] font-medium text-ink-2">High confidence</span></span><span class="-mr-0.5 flex items-center gap-2"><button type="button" aria-expanded="false" class="h-7 rounded-control px-2.5 text-[12.5px] font-medium shadow-btn
              transition-[background-color,transform] duration-100 active:scale-[0.96]
              bg-surface text-ink hover:bg-hover">Alternatives</button><button type="button" class="h-7 rounded-control px-3 text-[12.5px] font-medium
              shadow-[inset_0_1px_0_rgba(255,255,255,0.14),0_0_0_1px_rgba(16,24,40,0.12),0_1px_2px_rgba(16,24,40,0.1)]
              transition-[background-color,transform] duration-150 active:scale-[0.96]
              bg-accent text-white">Accept</button></span></div></div></div><div class="absolute top-3 right-3 flex gap-1 opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-focus-within:opacity-100"><button aria-label="Copy code" class="flex size-7 items-center justify-center rounded-control bg-surface
              shadow-btn transition-colors duration-100 hover:bg-hover
              text-ink-3 hover:text-ink"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="12" height="12" rx="2.5"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg></button><button aria-label="View code" class="flex size-7 items-center justify-center rounded-control bg-surface text-ink-3 shadow-btn transition-colors duration-100 hover:bg-hover hover:text-ink"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 18l6-6-6-6M8 6l-6 6 6 6"></path></svg></button></div></div></section>