<div class="chat-shell" data-chat-shell>
    <aside class="conversation-list" data-conversation-list>
        <div class="chat-empty">Konusmalar yukleniyor...</div>
    </aside>

    <section class="chat-window" data-chat-window>
        <header class="chat-header">
            <div>
                <strong data-chat-title>Konusma sec</strong>
                <span data-chat-subtitle>Sol listeden bir sohbet ac.</span>
            </div>
        </header>

        <div class="chat-messages" data-chat-messages>
            <div class="chat-empty">Mesajlar burada gorunecek.</div>
        </div>

        <div class="chat-tools">
            <button type="button" class="icon-btn" data-emoji-toggle title="Emoji">☺</button>
            <button type="button" class="icon-btn" data-gif-toggle title="GIF">GIF</button>
            <label class="icon-btn chat-upload" title="Gorsel">
                <span>+</span>
                <input type="file" accept="image/jpeg,image/png,image/webp,image/gif" data-chat-upload>
            </label>
            <div class="emoji-picker" data-emoji-picker hidden>
                <button type="button">😀</button>
                <button type="button">🔥</button>
                <button type="button">👍</button>
                <button type="button">💜</button>
                <button type="button">🎮</button>
                <button type="button">🎵</button>
            </div>
            <div class="gif-picker" data-gif-picker hidden></div>
        </div>

        <form class="chat-form" data-chat-form>
            <input name="body" type="text" placeholder="Mesaj yaz..." autocomplete="off">
            <input name="conversation_id" type="hidden" data-chat-conversation>
            <input name="attachment_path" type="hidden" data-chat-attachment>
            <input name="gif_url" type="hidden" data-chat-gif>
            <button class="pill primary" type="submit">Gonder</button>
        </form>
    </section>
</div>
