components/generation-modal.js

```javascript
class CustomGenerationModal extends HTMLElement {
    constructor() {
        super();
        this.isOpen = false;
    }

    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.render();
    }

    render() {
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: none;
                }
                
                :host(.open) {
                    display: block;
                }
                
                .overlay {
                    position: fixed;
                    inset: 0;
                    background: rgba(15, 23, 42, 0.9);
                    backdrop-filter: blur(10px);
                    z-index: 2000;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding: 2rem;
                }
                
                .modal {
                    width: 100%;
                    max-width: 900px;
                    max-height: 90vh;
                    background: rgba(30, 41, 59, 0.95);
                    border: 1px solid rgba(148, 163, 184, 0.2);
                    border-radius: 24px;
                    overflow: hidden;
                    display: flex;
                    flex-direction: column;
                }
                
                .modal-header {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 1.5rem;
                    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
                }
                
                .modal-title {
                    font-size: 1.25rem;
                    font-weight: 600;
                    color: #f8fafc;
                }
                
                .close-btn {
                    width: 40px;
                    height: 40px;
                    border-radius: 12px;
                    background: rgba(148, 163, 184, 0.1);
                    border: none;
                    color: #94a3b8;
                    cursor: pointer;
                    transition: all 0.2s ease;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                
                .close-btn:hover {
                    background: rgba(239, 68, 68, 0.2);
                    color: #ef4444;
                }
                
                .modal-body {
                    flex: 1;
                    overflow: auto;
                    padding: 1.5rem;
                }
                
                .generating-state {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    min-height: 400px;
                    gap: 2rem;
                }
                
                .neural-spinner {
                    width: 150px;
                    height: 150px;
                    position: relative;
                }
                
                .neural-ring {
                    position: absolute;
                    inset: 0;
                    border: 4px solid transparent;
                    border-top-color: #0ea5e9;
                    border-radius: 50%;
                    animation: spin 2s linear infinite;
                }
                
                .neural-ring:nth-child(2) {
                    inset: 20px;
                    border-top-color: #d946ef;
                    animation-duration: 1.5s;
                    animation-direction: reverse;
                }
                
                .neural-ring:nth-child(3) {
                    inset: 40px;
                    border-top-color: #f97316;
                    animation-duration: 1s;
                }
                
                @keyframes spin {
                    to { transform: rotate(360deg); }
                }
                
                .progress-info {
                    text-align: center;
                }
                .progress-text {
                    font-size: 1.5rem;
                    color: #e2e8f0;
                    font-weight: 600;
                    margin-bottom: 0.5rem;
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                }

                .fallback-badge {
                    padding: 0.25rem 0.5rem;
                    background: rgba(245, 158, 11, 0.2);
                    border-radius: 6px;
                    font-size: 0.75rem;
                    color: #f59e0b;
                    font-weight: 600;
                }
.progress-subtext {
                    color: #64748b;
                    font-size: 0.9375rem;
                }
                
                .progress-bar {
                    width: 300px;
                    height: 6px;
                    background: rgba(148, 163, 184, 0.2);
                    border-radius: 3px;
                    overflow: hidden;
                    margin-top: 1.5rem;
                }
                
                .progress-fill {
                    height: 100%;
                    background: linear-gradient(90deg, #0ea5e9, #d946ef);
                    border-radius: 3px;
                    transition: width 0.3s ease;
                    width: 0%;
                }
                
                .result-state {
                    display: none;
                }
                
                .result-state.show {
                    display: block;
                }
                
                .result-image {
                    width: 100%;
                    border-radius: 16px;
                    margin-bottom: 1.5rem;
                }
                
                .result-meta {
                    display: grid;
                    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
                    gap: 1rem;
                    margin-bottom: 1.5rem;
                }
                
                .meta-item {
                    padding: 1rem;
                    background: rgba(15, 23, 42, 0.5);
                    border-radius: 12px;
                }
                
                .meta-label {
                    font-size: 0.75rem;
                    color: #64748b;
                    text-transform: uppercase;
                    margin-bottom: 0.25rem;
                }
                
                .meta-value {
                    font-size: 0.9375rem;
                    color: #e2e8f0;
                    font-weight: 600;
                }
                
                .result-actions {
                    display: flex;
                    gap: 1rem;
                    justify-content: center;
                }
                
                .action-btn {
                    padding: 0.875rem 1.5rem;
                    border-radius: 12px;
                    font-size: 0.9375rem;
                    font-weight: 600;
                    cursor: pointer;
                    transition: all 0.2s ease;
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                    border: none;
                }
                
                .action-btn.primary {
                    background: linear-gradient(135deg, #0ea5e9, #d946ef);
                    color: white;
                }
                
                .action-btn.primary:hover {
                    transform: scale(1.02);
                    box-shadow: 0 10px 40px rgba(14, 165, 233, 0.4);
                }
                
                .action-btn.secondary {
                    background: rgba(30, 41, 59, 0.6);
                    border: 1px solid rgba(148, 163, 184, 0.2);
                    color: #e2e8f0;
                }
                
                .action-btn.secondary:hover {
                    border-color: #0ea5e9;
                }
                
                .error-state {
                    display: none;
                    text-align: center;
                    padding: 3rem;
                }
                
                .error-state.show {
                    display: block;
                }
                
                .error-icon {
                    width: 80px;
                    height: 80px;
                    margin: 0 auto 1.5rem;
                    border-radius: 50%;
                    background: rgba(239, 68, 68, 0.1);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #ef4444;
                }
            </style>
            
            <div class="overlay" id="overlay">
                <div class="modal">
                    <div class="modal-header">
                        <h3 class="modal-title" id="modal-title">Generating...</h3>
                        <button class="close-btn" id="close-btn">
                            <i data-feather="x" style="width: 20px; height: 20px;"></i>
                        </button>
                    </div>
                    
                    <div class="modal-body">
                        <div class="generating-state" id="generating-state">
                            <div class="neural-spinner">
                                <div class="neural-ring"></div>
                                <div class="neural-ring"></div>
                                <div class="neural-ring"></div>
                            </div>
                            <div class="progress-info">
                                <div class="progress-text" id="progress-text">
                                    <span id="progress-status">Initializing AI...</span>
                                    <span id="fallback-badge" class="fallback-badge" style="display: none;">Fallback Mode</span>
                                </div>
                                <div class="progress-subtext" id="progress-subtext">Preparing pipeline</div>
<div class="progress-bar">
                                    <div class="progress-fill" id="progress-fill"></div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="result-state" id="result-state">
                            <img class="result-image" id="result-image" src="" alt="Generated result">
                            <div class="result-meta" id="result-meta"></div>
                            <div class="result-actions">
                                <button class="action-btn primary" id="download-btn">
                                    <i data-feather="download" style="width:
___METADATA_START___
{"repoId":"MoShow/vortexai-multiverse-generator","isNew":false,"userName":"MoShow"}
___METADATA_END___