/* Reference-to-script waiting state. All motion is illustrative, never a percent. */
#ideaPickerProgress.script-creation {
  --script-accent: var(--sia-sidebar-accent, var(--sia-teal));
  background: var(--sia-sidebar-bg, var(--sia-surface)) !important;
  border-radius: 0 0 24px 24px; display: block; isolation: isolate;
  min-height: 0; padding: clamp(20px, 3vw, 40px); text-align: left;
  color: var(--sia-text); overflow: hidden;
}
#ideaPickerProgress.script-creation[hidden] { display: none; }
#ideaPickerProgress .script-creation-heading { align-items: start; display: flex; gap: 16px; }
#ideaPickerProgress .script-creation-spark { color: var(--script-accent); flex: 0 0 44px; height: 44px; padding: 5px; }
#ideaPickerProgress svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#ideaPickerProgress .script-creation-title { color: var(--sia-heading); font-size: clamp(24px, 3vw, 32px); line-height: 1.2; margin: 0 0 8px; }
#ideaPickerProgress [data-script-lead] { color: var(--sia-muted); font-size: 15px; line-height: 1.6; margin: 0; max-width: 760px; }
#ideaPickerProgress .script-creation-source { align-items: baseline; border-bottom: 1px solid var(--sia-line); display: flex; gap: 10px; margin: 24px 0; padding-bottom: 16px; }
#ideaPickerProgress .script-creation-source small { color: var(--sia-muted); flex-shrink: 0; font-size: 12px; }
#ideaPickerProgress #ideaPickerProgressIdea { color: var(--sia-heading); font-size: 15px; line-height: 1.5; margin: 0; overflow-wrap: anywhere; }
#ideaPickerProgress [data-script-references] { display: flex; justify-content: center; gap: 20px; }
#ideaPickerProgress [data-script-references][hidden], #ideaPickerProgress [hidden] { display: none; }
#ideaPickerProgress .script-creation-reference { border: 1px solid color-mix(in srgb, var(--script-accent) 35%, var(--sia-line)); border-radius: 16px; flex: 1 1 0; max-width: 360px; min-width: 0; overflow: hidden; background: var(--sia-surface-soft); }
#ideaPickerProgress .script-creation-thumbnail { aspect-ratio: 16 / 9; position: relative; display: grid; place-items: center; overflow: hidden; background: var(--sia-surface-soft); }
#ideaPickerProgress .script-creation-thumbnail img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
#ideaPickerProgress [data-script-image-fallback] { color: var(--sia-muted); padding: 12px; font-size: 12px; text-align: center; }
#ideaPickerProgress .script-creation-play { position: absolute; bottom: 10px; left: 10px; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #ffffff60; border-radius: 50%; color: white; background: #071018b3; font-size: 22px; }
#ideaPickerProgress .script-creation-reference-copy { padding: 12px 14px; }
#ideaPickerProgress .script-creation-reference-copy small { color: var(--sia-teal-dark); font-size: 12px; font-weight: 700; }
#ideaPickerProgress .script-creation-reference-copy p { color: var(--sia-heading); font-size: 14px; font-weight: 650; line-height: 1.4; margin: 4px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
#ideaPickerProgress [data-script-empty] { text-align: center; padding: 20px; border: 1px solid var(--sia-line); border-radius: 16px; background: var(--sia-surface-soft); }
#ideaPickerProgress [data-script-empty-title] { font-size: 18px; line-height: 1.5; color: var(--sia-heading); overflow-wrap: anywhere; margin: 0 0 8px; }
#ideaPickerProgress [data-script-empty-note] { font-size: 13px; color: var(--sia-muted); }
#ideaPickerProgress .script-creation-connections { display: block; color: var(--script-accent); width: 100%; height: 80px; overflow: visible; }
#ideaPickerProgress .script-creation-connection { opacity: .25; stroke-width: 1.2; }
#ideaPickerProgress .script-creation-flow { stroke-width: 2; stroke-dasharray: 6 94; animation: scriptReferenceFlow 3.6s linear infinite; }
#ideaPickerProgress[data-references="1"] .connection-side, #ideaPickerProgress[data-references="0"] .connection-side { display: none; }
#ideaPickerProgress[data-references="2"] .connection-center { display: none; }
#ideaPickerProgress .script-creation-document { position: relative; border: 1px solid color-mix(in srgb, var(--script-accent) 55%, var(--sia-line)); border-radius: 22px; background: var(--sia-surface-soft); max-width: 560px; margin: 0 auto; padding: 24px 28px; }
#ideaPickerProgress .script-creation-document::before { position: absolute; inset: -32px; border-radius: 50%; z-index: -1; content: ''; background: radial-gradient(ellipse, color-mix(in srgb, var(--script-accent) 13%, transparent), transparent 68%); animation: scriptDocumentBreathe 5s ease-in-out infinite; }
#ideaPickerProgress .script-creation-document-head { align-items: center; display: flex; gap: 16px; }
#ideaPickerProgress .script-creation-document-head svg { flex: 0 0 40px; height: 44px; color: var(--script-accent); }
#ideaPickerProgress #ideaPickerProgressText { color: var(--sia-heading); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 20px; font-weight: 750; line-height: 1.4; margin: 0; }
#ideaPickerProgress .script-creation-lines { display: grid; gap: 12px; padding-top: 24px; }
#ideaPickerProgress .script-creation-line { height: 7px; background: color-mix(in srgb, var(--sia-muted) 23%, transparent); border-radius: 4px; transform-origin: left; animation: scriptLineWrite 8s ease-in-out infinite; animation-delay: calc(var(--line-index) * .32s); }
#ideaPickerProgress .script-creation-line:nth-child(2) { width: 61%; } #ideaPickerProgress .script-creation-line:nth-child(3) { width: 83%; } #ideaPickerProgress .script-creation-line:nth-child(4) { width: 92%; }
#ideaPickerProgress .script-creation-line:last-child { background: var(--script-accent); width: 68%; position: relative; }
#ideaPickerProgress .script-creation-line:last-child::after { content: ''; position: absolute; right: -8px; top: -4px; width: 2px; height: 15px; background: var(--script-accent); }
#ideaPickerProgress .script-creation-footer { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 20px; margin-top: 28px; }
#ideaPickerProgress [data-script-wait] { color: var(--sia-muted); font-size: 13px; line-height: 1.6; margin: 0; text-align: center; }
#ideaPickerProgress [data-script-motion] { border: 1px solid var(--sia-line-strong); border-radius: 12px; color: var(--sia-text); background: var(--sia-surface); font: inherit; font-size: 13px; padding: 8px 14px; min-height: 44px; cursor: pointer; }
#ideaPickerProgress [data-script-motion]:focus-visible { outline: 3px solid var(--script-accent); outline-offset: 3px; }
#ideaPickerProgress [data-script-workflow] { list-style: none; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; padding: 24px 0 0; margin: 24px 0 0; border-top: 1px solid var(--sia-line); }
#ideaPickerProgress [data-script-workflow] li { text-align: center; color: var(--sia-muted); font-size: 13px; line-height: 1.5; }
#ideaPickerProgress [data-script-workflow] li::before { content: ''; display: block; height: 12px; width: 12px; border: 2px solid color-mix(in srgb,var(--script-accent) 40%,var(--sia-line)); border-radius: 50%; margin: 0 auto 10px; background: var(--sia-surface-soft); }
#ideaPickerProgress[data-state="complete"] [data-script-workflow] li::before { background: var(--script-accent); }
#ideaPickerProgress[data-motion="paused"] *, #ideaPickerProgress[data-motion="paused"] *::before { animation-play-state: paused !important; }
@keyframes scriptReferenceFlow { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes scriptLineWrite { 0%, 8% { transform: scaleX(.35); opacity: .65; } 45%, 82% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(.35); opacity: .65; } }
@keyframes scriptDocumentBreathe { 0%,100% { opacity: .2; transform: scale(.96); } 50% { opacity: .4; transform: scale(1.02); } }
@media (max-width: 600px) {
  #ideaPickerProgress.script-creation { padding: 20px 16px; }
  #ideaPickerProgress .script-creation-heading { gap: 10px; } #ideaPickerProgress .script-creation-spark { flex-basis: 30px; height: 34px; padding: 0; }
  #ideaPickerProgress .script-creation-source { flex-direction: column; gap: 4px; margin: 20px 0; }
  #ideaPickerProgress [data-script-references] { gap: 8px; }
  #ideaPickerProgress .script-creation-reference { border-radius: 10px; }
  #ideaPickerProgress .script-creation-reference-copy { padding: 8px; } #ideaPickerProgress .script-creation-reference-copy p { font-size: 12px; }
  #ideaPickerProgress .script-creation-reference-copy small { display: none; }
  #ideaPickerProgress .script-creation-play { width: 22px; height: 22px; font-size: 16px; bottom: 5px; left: 5px; }
  #ideaPickerProgress .script-creation-connections { height: 54px; }
  #ideaPickerProgress .script-creation-document { padding: 20px; border-radius: 18px; } #ideaPickerProgress #ideaPickerProgressText { font-size: 18px; }
  #ideaPickerProgress .script-creation-document-head { gap: 12px; } #ideaPickerProgress .script-creation-document-head svg { flex-basis: 32px; height: 36px; }
  #ideaPickerProgress [data-script-workflow] { gap: 8px; } #ideaPickerProgress [data-script-workflow] li { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  #ideaPickerProgress *, #ideaPickerProgress *::before { animation: none !important; }
  #ideaPickerProgress .script-creation-flow { stroke-dasharray: none; opacity: .45; }
  #ideaPickerProgress .script-creation-line { transform: none; opacity: 1; }
}
