<div class="chat-widget-container">
    <div class="chat-toggle chat-button bg-reverse" id="chatToggle">
        <p class="m-0">Задать Вопрос</p>
    </div>
    <div id="chatWidget" class="card">
        <div class="chat-header" id="chatHeader">
            <div class="agent-info">
                <div class="agent-avatar">АС</div>
                <div class="agent-details">
                    <div class="agent-name">Онлайн поддержка</div>
                    <div class="agent-status">
                        <span class="status-indicator"></span>
                        <span>Online</span>
                    </div>
                </div>
            </div>
            <div class="header-actions">
                <button class="header-btn" id="closeChat">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down" viewBox="0 0 16 16">
                        <path d="M3.204 5h9.592L8 10.481zm-.753.659 4.796 5.48a1 1 0 0 0 1.506 0l4.796-5.48c.566-.647.106-1.659-.753-1.659H3.204a1 1 0 0 0-.753 1.659"/>
                    </svg>
                </button>
            </div>
        </div>

        <div class="chat-body" id="chatBody">
            <div class="d-flex flex-column align-items-center justify-content-center text-center p-4 h-100 empty-chat">
                <img src="https://cdn-icons-png.flaticon.com/512/542/542638.png" alt="No Messages" class="mb-3" style="width: 80px; opacity: 0.5;">
                <h5 class="text-muted mb-1">Здесь пока пусто</h5>
                <p class="text-secondary mb-0">Начните общение с поддержкой — мы вам обязательно ответим!</p>
            </div>

        </div>

        <div class="chat-footer">
            <div class="input-container w-100">
                <button class="attachment-btn" disabled="disabled">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-paperclip" viewBox="0 0 16 16">
                        <path d="M4.5 3a2.5 2.5 0 0 1 5 0v9a1.5 1.5 0 0 1-3 0V5a.5.5 0 0 1 1 0v7a.5.5 0 0 0 1 0V3a1.5 1.5 0 1 0-3 0v9a2.5 2.5 0 0 0 5 0V5a.5.5 0 0 1 1 0v7a3.5 3.5 0 1 1-7 0z"/>
                    </svg>
                </button>
                <input type="text" class="message-input" placeholder="Введите сообщение...">
                <button class="send-btn send-m-support">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-send" viewBox="0 0 16 16">
                        <path d="M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576zm6.787-8.201L1.591 6.602l4.339 2.76z"/>
                    </svg>
                </button>
            </div>
        </div>
    </div>
</div>

<script src="{$theme}/assets/ws/support.js"></script>