/* Seed 20 Engine — UI overlay styles */
.s20-sphere-canvas{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:0}

/* ── HUD (top-left telemetry readout) ──────────────────────────────── */
.s20-debug-hud{position:fixed;top:40px;left:45px;font-family:"SF Mono","Fira Code","Consolas",monospace;font-size:10px;opacity:0.3;color:var(--color-fg,#F6F6F6);z-index:10;pointer-events:none;display:grid;grid-template-columns:auto auto;gap:2px 12px}
.s20-debug-hud .label{text-transform:uppercase;letter-spacing:1px}
.s20-debug-hud .value{text-align:right;font-variant-numeric:tabular-nums}

/* ── Prompt Selector Overlay (right side) ──────────────────────────── */
.s20-prompt-overlay{position:fixed;right:0;top:0;bottom:0;width:420px;pointer-events:auto;display:flex;flex-direction:column;justify-content:flex-end;padding:60px 35px 80px 20px;z-index:10;font-family:"SF Mono","Fira Code","Consolas",monospace;font-size:13px;line-height:1.6;color:var(--color-fg,#F6F6F6);transform:translateX(60%);transition:transform 0.3s ease}
.s20-prompt-overlay:hover{transform:translateX(0)}
.s20-prompt-list{overflow-y:auto;scroll-behavior:smooth;scrollbar-width:none;pointer-events:auto;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 15%,black 85%,transparent 100%),linear-gradient(to right,transparent 0%,rgba(0,0,0,0.15) 10%,rgba(0,0,0,0.6) 30%,black 50%);-webkit-mask-composite:destination-in;mask-image:linear-gradient(to bottom,transparent 0%,black 15%,black 85%,transparent 100%),linear-gradient(to right,transparent 0%,rgba(0,0,0,0.15) 10%,rgba(0,0,0,0.6) 30%,black 50%);mask-composite:intersect}
.s20-prompt-list:hover{-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0.4) 0%,black 8%,black 92%,rgba(0,0,0,0.4) 100%),linear-gradient(to right,rgba(0,0,0,0.4) 0%,rgba(0,0,0,0.6) 8%,rgba(0,0,0,0.85) 20%,black 35%);mask-image:linear-gradient(to bottom,rgba(0,0,0,0.4) 0%,black 8%,black 92%,rgba(0,0,0,0.4) 100%),linear-gradient(to right,rgba(0,0,0,0.4) 0%,rgba(0,0,0,0.6) 8%,rgba(0,0,0,0.85) 20%,black 35%)}
.s20-prompt-list::-webkit-scrollbar{display:none}

/* ── Individual Prompt Items ───────────────────────────────────────── */
.s20-prompt-item{position:relative;padding:12px 8px;pointer-events:auto;cursor:pointer;border-radius:4px;transition:background-color 0.2s ease,opacity 0.2s ease;overflow:hidden}
.s20-prompt-item:hover{background-color:var(--color-surface,rgba(255,255,255,0.04))}

/* Prompt text */
.s20-prompt-text{opacity:0.85}
.s20-prompt-text::before{content:"> ";opacity:0.4}

/* Category tag */
.s20-prompt-tag{font-size:10px;font-weight:600;letter-spacing:0.5px;opacity:0.9}

/* Response text (typewriter reveal target) */
.s20-prompt-response{opacity:0.45;border-left:2px solid currentColor;padding-left:10px;margin-top:6px;min-height:0}
.s20-prompt-response:empty{display:none}

/* ── State: Playing — cyan wipe animation (distinct from s14 gold) ── */
.s20-prompt-item[data-state="playing"]{background-color:transparent}
.s20-prompt-item[data-state="playing"]::before{content:"";position:absolute;inset:0;border-radius:4px;background:linear-gradient(to right,rgba(0,188,212,0.2) 0%,rgba(0,188,212,0.2) calc(var(--wipe-progress,0) * 100%),transparent calc(var(--wipe-progress,0) * 100%));pointer-events:none;z-index:-1;transition:none}
.s20-prompt-item[data-state="playing"] .s20-prompt-text{opacity:1;color:#00BCD4}
.s20-prompt-item[data-state="playing"] .s20-prompt-text::before{opacity:0.7;color:#00BCD4}

/* ── State: Queued — highlighted pending ───────────────────────────── */
.s20-prompt-item[data-state="queued"]{background-color:#9558C7}
.s20-prompt-item[data-state="queued"] .s20-prompt-text{opacity:1;color:#F6F6F6}
.s20-prompt-item[data-state="queued"] .s20-prompt-text::before{color:rgba(246,246,246,0.7)}

/* ── Responsive breakpoints ────────────────────────────────────────── */
@media(max-width:700px){.s20-prompt-overlay,.s20-debug-hud{display:none!important}}