@keyframes blink{50%{opacity:0}}@keyframes gradientShift{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}@keyframes shimmer{0%{transform:translateX(-100%) translateY(-100%) rotate(45deg)}100%{transform:translateX(100%) translateY(100%) rotate(45deg)}}@keyframes particleFly{0%{transform:translate(0,0) scale(0);opacity:0}10%{opacity:1}90%{opacity:.8}100%{transform:translate(var(--tx),var(--ty)) scale(1);opacity:0}}@keyframes popIn{0%{opacity:0;transform:scale(.5) translateY(10px)}100%{opacity:1;transform:scale(1) translateY(0)}}.ai-image-generator-autoplay{display:flex;justify-content:center;align-items:center;padding:1rem;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}.ai-image-generator-autoplay .generator-card{position:relative;width:100%;max-width:600px;height:500px;background-color:#fff;border-radius:1.5rem;overflow:hidden}.ai-image-generator-autoplay .generator-card .generator-content{position:absolute;inset:0}.ai-image-generator-autoplay .generator-card .generator-content .generated-image,.ai-image-generator-autoplay .generator-card .generator-content .image-placeholder{position:absolute;inset:0;width:100%;height:100%;transition:opacity .6s ease-in-out,transform .6s ease-in-out;will-change:opacity,transform}.ai-image-generator-autoplay .generator-card .generator-content .image-placeholder{display:flex;justify-content:center;align-items:center;border-radius:1rem;opacity:0;transform:scale(.98);background:linear-gradient(135deg,#667eea 0,#764ba2 25%,#f093fb 50%,#4facfe 75%,#667eea 100%);background-size:400% 400%;animation:gradientShift 8s ease infinite}.ai-image-generator-autoplay .generator-card .generator-content .image-placeholder::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.1)}.ai-image-generator-autoplay .generator-card .generator-content .image-placeholder::after{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shimmer 3s infinite;opacity:0;transition:opacity .4s ease}.ai-image-generator-autoplay .generator-card .generator-content .image-placeholder .spinner-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;opacity:0;transition:opacity .4s ease}.ai-image-generator-autoplay .generator-card .generator-content .image-placeholder .spinner-border{width:3rem;height:3rem;color:#fff;border-width:3px}.ai-image-generator-autoplay .generator-card .generator-content .image-placeholder .generating-text{color:#fff;font-weight:600;font-size:1.1rem;text-shadow:0 2px 10px rgba(0,0,0,.2)}.ai-image-generator-autoplay .generator-card .generator-content .image-placeholder .particles-container{position:absolute;inset:0;overflow:hidden;pointer-events:none}.ai-image-generator-autoplay .generator-card .generator-content .image-placeholder .particle{position:absolute;background:#fff;border-radius:50%;box-shadow:0 0 10px rgba(255,255,255,.8);animation:particleFly linear infinite}.ai-image-generator-autoplay .generator-card .generator-content .image-placeholder .particle:nth-child(4n){--tx:150px;--ty:-150px}.ai-image-generator-autoplay .generator-card .generator-content .image-placeholder .particle:nth-child(4n+1){--tx:-150px;--ty:150px}.ai-image-generator-autoplay .generator-card .generator-content .image-placeholder .particle:nth-child(4n+2){--tx:150px;--ty:150px}.ai-image-generator-autoplay .generator-card .generator-content .image-placeholder .particle:nth-child(4n+3){--tx:-150px;--ty:-150px}.ai-image-generator-autoplay .generator-card .generator-content .image-placeholder .particle:nth-child(odd){filter:blur(1px)}.ai-image-generator-autoplay .generator-card .generator-content .generated-image{object-fit:cover;opacity:0;transform:scale(1.05)}.ai-image-generator-autoplay .generator-card .prompt-overlay{position:absolute;bottom:0;left:0;right:0;padding:1.5rem;z-index:10;opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease;will-change:opacity,transform;background:linear-gradient(to top,rgba(0,0,0,.5) 0,rgba(0,0,0,0) 100%)}.ai-image-generator-autoplay .generator-card .prompt-content-wrapper{display:flex;flex-direction:column;align-items:center;gap:.75rem;max-width:90%;margin:0 auto}.ai-image-generator-autoplay .generator-card .input-images-row{display:flex;gap:.75rem;padding-bottom:.25rem}.ai-image-generator-autoplay .generator-card .input-images-row .input-thumb{width:60px;height:60px;object-fit:cover;border-radius:12px;border:2px solid rgba(255,255,255,.9);box-shadow:0 4px 8px rgba(0,0,0,.2);background-color:#eee;animation:popIn .4s cubic-bezier(.175,.885,.32,1.275) forwards;opacity:0}.ai-image-generator-autoplay .generator-card .user-prompt{display:flex;align-items:flex-start;gap:.75rem;width:100%;justify-content:center}.ai-image-generator-autoplay .generator-card .user-prompt .avatar img{width:40px;height:40px;border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.1);border:2px solid #fff;flex-shrink:0}.ai-image-generator-autoplay .generator-card .user-prompt .message-bubble{background-color:rgba(255,255,255,.85);backdrop-filter:blur(8px);padding:.75rem 1rem;border-radius:1.25rem;box-shadow:0 4px 15px rgba(0,0,0,.1);color:#1f2937;font-size:1rem;line-height:1.5;border:1px solid rgba(255,255,255,.5)}.ai-image-generator-autoplay .generator-card .user-prompt .message-bubble .caret{display:inline-block;width:2px;height:1.1em;background-color:#3b82f6;vertical-align:text-bottom;animation:blink 1s step-end infinite}.ai-image-generator-autoplay .generator-card.state-prompt-visible .prompt-overlay{opacity:1;transform:translateY(0)}.ai-image-generator-autoplay .generator-card.state-generating .image-placeholder{opacity:1;transform:scale(1)}.ai-image-generator-autoplay .generator-card.state-generating .image-placeholder::after{opacity:1}.ai-image-generator-autoplay .generator-card.state-generating .image-placeholder .spinner-content{opacity:1}.ai-image-generator-autoplay .generator-card.state-image-visible .image-placeholder{opacity:0}.ai-image-generator-autoplay .generator-card.state-image-visible .generated-image{opacity:1;transform:scale(1)}@media (max-width:640px){.ai-image-generator-autoplay .generator-card{height:400px}.ai-image-generator-autoplay .generator-card .prompt-overlay{padding:1rem}.ai-image-generator-autoplay .generator-card .user-prompt .message-bubble{font-size:.9rem}.ai-image-generator-autoplay .generator-card .generator-content .image-placeholder .generating-text{font-size:1rem}.ai-image-generator-autoplay .generator-card .input-images-row .input-thumb{width:45px;height:45px;border-radius:8px}}