class CustomChat extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: flex;
                    flex-direction: column;
                    height: 100%;
                }
                
                .chat-container {
                    flex: 1;
                    background: white;
                    border: 1px solid #e5e7eb;
                    border-radius: 0.75rem;
                    margin-bottom: 1.5rem;
                    overflow-y: auto;
                    padding: 1.5rem;
                    display: flex;
                    flex-direction: column;
                    gap: 1rem;
                }
                
                .empty-state {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    height: 100%;
                    text-align: center;
                }
                
                .empty-icon {
                    width: 5rem;
                    height: 5rem;
                    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: white;
                    font-size: 2.5rem;
                    margin: 0 auto 1rem;
                }
                
                .empty-title {
                    font-size: 1.125rem;
                    font-weight: 700;
                    color: #111827;
                    margin-bottom: 0.5rem;
                }
                
                .empty-description {
                    color: #6b7280;
                    margin-bottom: 0.25rem;
                }
                
                .empty-hint {
                    color: #9ca3af;
                    font-size: 0.875rem;
                }
                
                .message-user {
                    display: flex;
                    justify-content: flex-end;
                }
                
                .message-ai {
                    display: flex;
                    justify-content: flex-start;
                }
                
                .message-bubble {
                    max-width: 42rem;
                    padding: 1rem;
                    border-radius: 1rem;
                    font-size: 0.875rem;
                    line-height: 1.5;
                    white-space: pre-wrap;
                }
                
                .user-bubble {
                    background: #3b82f6;
                    color: white;
                    border-bottom-right-radius: 0;
                }
                
                .ai-bubble {
                    background: #f3f4f6;
                    color: #111827;
                    border-bottom-left-radius: 0;
                }
                
                .message-time {
                    font-size: 0.75rem;
                    margin-top: 0.5rem;
                }
                
                .user-time {
                    color: #bfdbfe;
                }
                
                .ai-time {
                    color: #9ca3af;
                }
                
                .input-container {
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                    background: white;
                    border: 1px solid #e5e7eb;
                    border-radius: 0.75rem;
                    padding: 1rem;
                }
                
                .chat-input {
                    flex: 1;
                    border: none;
                    outline: none;
                    font-size: 0.875rem;
                }
                
                .send-btn {
                    padding: 0.75rem;
                    background: #3b82f6;
                    color: white;
                    border-radius: 0.5rem;
                    transition: all 0.2s;
                }
                
                .send-btn:hover {
                    background: #2563eb;
                }
            </style>
            
            <div class="chat-container" id="chat-messages">
                <div class="empty-state">
                    <div>
                        <div class="empty-icon">🤖</div>
                        <h3 class="empty-title">Rosalinda</h3>
                        <p class="empty-description">Votre IA générateur de code 100% propriétaire</p>
                        <p class="empty-hint">Demandez n'importe quoi pour générer du code !</p>
                    </div>
                </div>
            </div>
            
            <div class="input-container">
                <input type="text" class="chat-input" id="chat-input" placeholder="Décrivez votre projet, Rosalinda génère le code...">
                <button class="send-btn" onclick="sendMessage()">
                    <i data-feather="send"></i>
                </button>
            </div>
        `;
        
        feather.replace();
    }
}

customElements.define('custom-chat', CustomChat);