components/input-area.js

class ClaudeInputArea extends HTMLElement {
    constructor() {
        super();
    }

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

    render() {
        this.shadowRoot.innerHTML = `
            <style>
                .input-container {
                    background: white;
                    border-top: 1px solid #e2e8f0;
                    padding: 1.5rem;
                    position: fixed;
                    bottom: 0;
                    left: 0;
                    right: 0;
                }
                
                .input-wrapper {
                    max-width: 1200px;
                    margin: 0 auto;
                    display: flex;
                    gap: 1rem;
                    align-items: flex-end;
                }
                
                .textarea-container {
                    flex: 1;
                    position: relative;
                }
                
                .message-textarea {
                    width: 100%;
                    min-height: 56px;
                    max-height: 150px;
                    padding: 1rem;
                    border: