class ChatBot {
      constructor() {
        this.isLoading = false;
        this.init();
      }

      init() {
        this.bindEvents();
        this.updateCharCounter();
        this.setupMobileMenu();
      }

      bindEvents() {
        const input = document.getElementById('messageInput');
        input.addEventListener('keypress', (e) => {
          if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            this.sendMessage();
          }
        });
        input.addEventListener('input', () => this.updateCharCounter());

        document.getElementById('sendButton').addEventListener('click', () => this.sendMessage());
      }

      updateCharCounter() {
        const input = document.getElementById('messageInput');
        const counter = document.getElementById('charCount');
        if (counter) {
          const length = input.value.length;
          counter.textContent = length;
          counter.style.color = length > 450 ? '#d78b8b' : '#9aabbe';
        }
      }

      async sendMessage() {
        const input = document.getElementById('messageInput');
        const message = input.value.trim();
        if (!message || this.isLoading) return;

        this.addMessage(message, 'user');
        input.value = '';
        this.updateCharCounter();

        this.showLoading();

        try {
          // Simulação de chamada a api/chat.php (igual ao original)
          const response = await fetch('api/chat.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ mensagem: message })
          });

          if (!response.ok) throw new Error('resposta da rede falhou');
          const data = await response.json();
          this.addMessage(data.resposta || 'resposta recebida', 'bot');
        } catch (error) {
          console.warn('erro simulado — usando fallback amigável');
          const demoResponse = `obrigado pela mensagem "${message}". (simulação — conecte api/chat.php para respostas reais)`;
          this.addMessage(demoResponse, 'bot');
        } finally {
          this.hideLoading();
        }
      }

      addMessage(text, sender) {
        const container = document.getElementById('chatMessages');
        const messageDiv = document.createElement('div');
        messageDiv.className = `message ${sender === 'user' ? 'user-message' : 'bot-message'}`;

        const now = new Date();
        const timeString = now.toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' });

        const avatarSVG = sender === 'bot' 
          ? '<svg viewBox="0 0 24 24" stroke="currentColor"><circle cx="12" cy="12" r="10" fill="none"/><path d="M12 8v4l3 3" stroke-linecap="round"/></svg>' 
          : '<svg viewBox="0 0 24 24" stroke="currentColor"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4" fill="none"/></svg>';

        messageDiv.innerHTML = `
          <div class="avatar">${avatarSVG}</div>
          <div class="message-content">
            <div class="message-bubble">${this.escapeHtml(text)}</div>
            <div class="message-time">${sender === 'bot' ? 'assistente · ' : ''}${timeString}</div>
          </div>
        `;

        container.appendChild(messageDiv);
        container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' });
      }

      showLoading() {
        this.isLoading = true;
        const input = document.getElementById('messageInput');
        const sendBtn = document.getElementById('sendButton');
        input.disabled = true;
        sendBtn.style.opacity = '0.7';

        const container = document.getElementById('chatMessages');
        const loadingDiv = document.createElement('div');
        loadingDiv.className = 'message bot-message';
        loadingDiv.id = 'loadingMessage';
        loadingDiv.innerHTML = `
          <div class="avatar"><svg viewBox="0 0 24 24" stroke="currentColor"><circle cx="12" cy="12" r="10" fill="none"/><path d="M12 8v4l3 3" stroke-linecap="round"/></svg></div>
          <div class="message-content">
            <div class="message-bubble"><div class="loading-dots"><div></div><div></div><div></div></div></div>
          </div>
        `;
        container.appendChild(loadingDiv);
        container.scrollTop = container.scrollHeight;
      }

      hideLoading() {
        this.isLoading = false;
        const input = document.getElementById('messageInput');
        const sendBtn = document.getElementById('sendButton');
        input.disabled = false;
        sendBtn.style.opacity = '1';
        input.focus();

        const loadingMsg = document.getElementById('loadingMessage');
        if (loadingMsg) loadingMsg.remove();
      }

      escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
      }

      // Função para controlar o menu hambúrguer no mobile
      setupMobileMenu() {
        const menuToggle = document.getElementById('menuToggle');
        const sidebar = document.getElementById('sidebar');
        const overlay = document.getElementById('sidebarOverlay');
        const body = document.body;

        if (!menuToggle || !sidebar || !overlay) return;

        const openMenu = () => {
          body.classList.add('sidebar-open');
          overlay.classList.add('active');
        };

        const closeMenu = () => {
          body.classList.remove('sidebar-open');
          overlay.classList.remove('active');
        };

        menuToggle.addEventListener('click', (e) => {
          e.stopPropagation();
          if (body.classList.contains('sidebar-open')) {
            closeMenu();
          } else {
            openMenu();
          }
        });

        overlay.addEventListener('click', closeMenu);

        // Fechar ao redimensionar para desktop (garantir que sidebar fique visível)
        window.addEventListener('resize', () => {
          if (window.innerWidth > 768) {
            closeMenu();
            // Em desktop a sidebar já está visível normalmente
          }
        });
      }
    }

    document.addEventListener('DOMContentLoaded', () => {
      window.chatbot = new ChatBot();

      // Mantém sugestões ao clicar apenas preenchem o input
      const chips = document.querySelectorAll('.suggestion-chip');
      chips.forEach(chip => {
        chip.addEventListener('click', function() {
          const input = document.getElementById('messageInput');
          input.focus();
        });
      });
    });

Poderia por esse codigo real time porfavor yha 

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
  <title>assistente · tom sereno</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/style_chatbot.css">


</head>
<body>

  <!-- Overlay para fechar sidebar no mobile -->
  <div id="sidebarOverlay" class="sidebar-overlay"></div>

  <aside class="sidebar" id="sidebar">
    <div class="new-chat-btn">+ Novo chat</div>
    <div class="sidebar-title">Chats</div>
    <div class="chat-item active">Aumentando UI do Chatbot</div>
    <div class="chat-item">Correção de Formulário...</div>
  </aside>

  <main class="main-content">
    <header class="chat-header">
      <!-- Botão hambúrguer (mobile) -->
      <button class="menu-toggle" id="menuToggle" aria-label="Menu">
        <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M3 12h18M3 6h18M3 18h18"/>
        </svg>
      </button>

      <div class="logo-row">
        <span class="logo-icon">⚡</span>
        <h1>assistente leve</h1>
      </div>
      <div class="subhead">sempre à disposição · tom calmo</div>
    </header>

    <div id="chatMessages" class="chat-messages">
      <div class="suggestions-panel">
        <div class="suggestion-chip" onclick="document.getElementById('messageInput').value='Como posso ajudar?'; document.getElementById('messageInput').focus()">💬 como posso ajudar?</div>
        <div class="suggestion-chip" onclick="document.getElementById('messageInput').value='Quais são os serviços?'; document.getElementById('messageInput').focus()">📋 serviços</div>
        <div class="suggestion-chip" onclick="document.getElementById('messageInput').value='Falar com um humano'; document.getElementById('messageInput').focus()">👤 falar com humano</div>
      </div>

      <div class="message bot-message">
        <div class="avatar">
          <svg viewBox="0 0 24 24" stroke="currentColor">
            <circle cx="12" cy="12" r="10" fill="none"/>
            <path d="M12 8v4l3 3" stroke-linecap="round"/>
          </svg>
        </div>
        <div class="message-content">
          <div class="message-bubble">olá! como posso ajudar você hoje? :)</div>
          <div class="message-time">assistente · agora</div>
        </div>
      </div>
    </div>

    <div class="input-footer">
      <div class="input-pill">
        <input type="text" id="messageInput" placeholder="escreva sua mensagem..." autocomplete="off">
        <button id="sendButton" class="send-btn">
          <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"/></svg>
        </button>
      </div>
      <p style="text-align: center; font-size: 0.7rem; color: #9fb3c9; margin-top: 1rem;">respostas podem não ser exatas · use com calma</p>
    </div>
  </main>


    <script src="assets/js/chatbot.js"></script>
</body>
</html>