class TypingIndicator extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                @keyframes pulse {
                    0%, 100% { opacity: 1; }
                    50% { opacity: 0.5; }
                }
                .container {
                    display: flex;
                    gap: 4px;
                }
                .dot {
                    width: 8px;
                    height: 8px;
                    background-color: #38bdf8;
                    border-radius: 50%;
                    display: inline-block;
                    animation: pulse 1.5s infinite ease-in-out;
                }
                .dot:nth-child(2) {
                    animation-delay: 0.2s;
                }
                .dot:nth-child(3) {
                    animation-delay: 0.4s;
                }
            </style>
            <div class="container">
                <span class="dot"></span>
                <span class="dot"></span>
                <span class="dot"></span>
            </div>
        `;
    }
}

customElements.define('typing-indicator', TypingIndicator);