Correções

- main.css: media queries (1024/768/480) — sidebar vira barra horizontal,
  tabelas com rolagem, busca/modais adaptados
- chat.html: layout de 3 colunas vira navegação de painel único no mobile
  (lista -> conversa com botão voltar; painel de info como overlay)
- settings.html: abas com rolagem horizontal no celular

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/controllers/chatController.js

@@ -611,7 +611,8 @@ class ChatController {
           if (user.length > 0) {
             const nomeUser = (user[0].USU_NOME || '').trim();
             if (nomeUser && textoFinal) {
-              textoFinal = nomeUser + ': ' + textoFinal;
+              // Padrão WhatsApp: *Nome:* em negrito + quebra de linha + mensagem
+              textoFinal = '*' + nomeUser + ':*\n' + textoFinal;
             }
           }
         }

src/controllers/evolutionController.js

@@ -440,10 +440,10 @@ class EvolutionController {
       // Reaproveita a funcao de atualizar foto
       var numero = conv[0].CON_NUMERO || '';
       var empresaId = conv[0].CON_EMPRESA_ID;
-      // A funcao atualizarFotoContato esta no escopo do processWebhook, entao recriamos a logica aqui
+      // Ação explícita do usuário: força a busca (ignora a flag CFE_FOTO_CELULAR)
-      await EvolutionController.atualizarFotoContato(alias, conv[0].CON_CLIENTE_ID, numero, empresaId);
+      const atualizou = await EvolutionController.atualizarFotoContato(alias, conv[0].CON_CLIENTE_ID, numero, empresaId, true);
 
-      res.json({ success: true, message: 'Foto atualizada.' });
+      res.json({ success: true, atualizada: !!atualizou, message: atualizou ? 'Foto atualizada.' : 'Nenhuma foto encontrada para este contato.' });
     } catch (err) {
       res.status(500).json({ success: false, error: err.message });
     }
@@ -452,12 +452,14 @@ class EvolutionController {
   /**
    * Versão estática de atualizarFotoContato para uso externo
    */
-  static async atualizarFotoContato(alias, clienteId, numero, empresaId) {
+  static async atualizarFotoContato(alias, clienteId, numero, empresaId, forcar) {
-    if (!clienteId) return;
+    if (!clienteId) return false;
     try {
+      if (!forcar) {
         const cfg = await db.query(alias,
           "SELECT CFE_FOTO_CELULAR FROM CHATC2_CONFIGURACOES_EMPRESA WHERE CFE_EMPRESA_ID = ?", [empresaId]);
-      if (cfg.length === 0 || cfg[0].CFE_FOTO_CELULAR !== 'S') return;
+        if (cfg.length === 0 || cfg[0].CFE_FOTO_CELULAR !== 'S') return false;
+      }
 
       const inst = await db.query(alias,
         "SELECT * FROM CHATC2_INSTANCIAS WHERE INS_EMPRESA_ID = ? AND INS_SITUACAO = 'A' FETCH FIRST 1 ROWS ONLY", [empresaId]);
@@ -468,29 +470,34 @@ class EvolutionController {
       const instanceName = (inst[0].INS_INSTANCE_NAME || '').trim();
       if (!url || !apiKey || !instanceName) return;
 
-      // Evolution API 2.4.0 NAO possui endpoint getProfile (disponivel apenas a partir da v2.5+)
+      // Busca a foto de perfil via Evolution: POST <URL>/chat/fetchProfile/<instancia> { number }
-      console.log('[Foto] Evolution API ' + url + ' - getProfile nao disponivel nesta versao. A foto do WhatsApp sera usada quando atualizar a Evolution.');
       
-      // Mesmo sem o endpoint, tentamos alguns formatos conhecidos
+      // Normaliza o numero para o padrao WhatsApp BR: 55(DDI) + DDD + 9XXXXXXXX
-      var profileEndpoints = [
+      function normalizarNumero(n) {
-        '/chat/getProfile/' + encodeURIComponent(instanceName) + '?number=' + numero,
+        var d = String(n || '').replace(/\D/g, '');
-        '/chat/getProfile/' + encodeURIComponent(instanceName) + '/' + numero,
+        if (!d) return '';
-        '/contact/getProfile/' + encodeURIComponent(instanceName) + '?number=' + numero,
+        if (!d.startsWith('55')) d = '55' + d;       // garante DDI Brasil
-      ];
+        var resto = d.slice(2);                       // DDD + assinante
+        if (resto.length === 10) {                    // DDD(2) + 8 digitos -> insere o 9 (celular)
+          resto = resto.slice(0, 2) + '9' + resto.slice(2);
+        }
+        return '55' + resto;
+      }
+      var numeroFmt = normalizarNumero(numero);
+      if (!numeroFmt) return false;
 
       var profile = null;
-      for (var ep of profileEndpoints) {
       try {
-          profile = await evolutionRequest(url, apiKey, ep, 'GET');
+        profile = await evolutionRequest(url, apiKey,
-          if (profile) break;
+          '/chat/fetchProfile/' + encodeURIComponent(instanceName), 'POST', { number: numeroFmt });
-        } catch(e) {
+      } catch (e) {
-          profile = null;
+        console.log('[Foto] fetchProfile falhou:', (e.message || '').substring(0, 120));
-        }
+        return false;
       }
 
       if (!profile) {
-        console.log('[Foto] Nenhum endpoint getProfile disponivel. Evolution API precisa ser atualizada.');
+        console.log('[Foto] Nenhum perfil retornado para', numeroFmt);
-        return;
+        return false;
       }
 
       let fotoUrl = null;
@@ -505,31 +512,32 @@ class EvolutionController {
         fotoUrl = profile.response.profilePicUrl || profile.response.picUrl || null;
       }
 
-      if (fotoUrl && fotoUrl.startsWith('http')) {
+      if (fotoUrl && String(fotoUrl).startsWith('http')) {
-        console.log('[Foto] Baixando foto de:', fotoUrl.substring(0, 80));
+        console.log('[Foto] Baixando foto de:', String(fotoUrl).substring(0, 80));
         try {
-          var http = require('http');
-          var https = require('https');
           var fotoBuffer = await new Promise(function(resolve, reject) {
             var u = new URL(fotoUrl);
             var lib = u.protocol === 'https:' ? https : http;
-            lib.get(fotoUrl, { timeout: 15000, headers: { 'apikey': apiKey } }, function(imgRes) {
+            lib.get(fotoUrl, { timeout: 15000 }, function(imgRes) {
               var chunks = [];
               imgRes.on('data', function(c) { chunks.push(c); });
               imgRes.on('end', function() { resolve(Buffer.concat(chunks)); });
             }).on('error', reject).on('timeout', function() { this.destroy(); reject(new Error('Timeout')); });
           });
           if (fotoBuffer && fotoBuffer.length > 100) {
-            var imgData = fotoBuffer.toString('base64');
             await db.execute(alias,
               'UPDATE CLIENTES SET CLI_FOTO = ? WHERE CLI_CODIGO_ID = ?',
-              [imgData, clienteId]);
+              [fotoBuffer.toString('base64'), clienteId]);
-            console.log('[Foto] Foto atualizada para cliente', clienteId, '- tamanho:', fotoBuffer.length);
+            console.log('[Foto] Foto atualizada para cliente', clienteId, '- bytes:', fotoBuffer.length);
+            return true;
           }
         } catch(imgErr) {
-          console.error('[Foto] Erro ao baixar imagem:', imgErr.message.substring(0, 100));
+          console.error('[Foto] Erro ao baixar imagem:', (imgErr.message || '').substring(0, 120));
         }
+      } else {
+        console.log('[Foto] Perfil sem foto disponivel para', numeroFmt);
       }
+      return false;
     } catch(e) {
       console.error('[Foto] Erro:', e.message);
     }

src/public/chat.html

@@ -594,6 +594,35 @@ body { background:#f3f4f6; display:flex; height:100vh; overflow:hidden; }
 }
 .empty-state .icon { font-size: 52px; opacity: 0.45; }
 .empty-state p { font-size: 15px; color: #6b7280; }
+
+/* Botões só do mobile (voltar / info) */
+.mobile-only { display: none; }
+
+/* ===== RESPONSIVO: navegação de painel único (lista → conversa → info) ===== */
+@media (max-width: 768px) {
+  .sidebar-left { width: 100%; }
+  .chat-center { display: none; }
+
+  /* Quando uma conversa está aberta, mostra o chat e esconde a lista */
+  body.chat-aberto .sidebar-left { display: none; }
+  body.chat-aberto .chat-center { display: flex; }
+
+  /* Painel de informações vira overlay deslizante (oculto por padrão) */
+  .sidebar-right {
+    position: fixed;
+    top: 0; right: 0; bottom: 0;
+    width: 88%; max-width: 340px;
+    z-index: 1200;
+    box-shadow: -4px 0 24px rgba(0,0,0,0.28);
+    display: none !important;
+  }
+  body.info-aberto .sidebar-right { display: flex !important; }
+
+  .mobile-only { display: inline-flex !important; align-items: center; justify-content: center; }
+
+  .chat-header { gap: 8px; }
+  .chat-header .info h3 { font-size: 14px; }
+}
 </style>
 <link rel="stylesheet" href="/css/dark-mode.css">
 <script>function darkModeToggle(){var e=document.body;if(!e)return;var a=localStorage.getItem('chatc2_dark_mode')!=='true';e.classList.toggle('dark-mode',a);localStorage.setItem('chatc2_dark_mode',a?'true':'false');document.querySelectorAll('.dark-mode-toggle').forEach(function(b){b.innerHTML=a?'☀️ Claro':'🌙 Escuro'});}
@@ -652,11 +681,13 @@ window.darkModeIsDark=function(){return localStorage.getItem('chatc2_dark_mode')
 
 <div class="chat-center">
   <div class="chat-header" id="chatHeader" style="display:none">
+    <button class="mobile-only" onclick="voltarLista()" title="Voltar" style="background:none;border:none;font-size:20px;cursor:pointer;padding:4px 6px;color:#374151">←</button>
     <div class="info">
       <h3 id="chatNome"></h3>
       <span id="chatStatus"></span>
     </div>
     <div class="actions">
+      <button class="mobile-only" onclick="toggleInfo()" title="Informações">ℹ️</button>
       <button class="btn-finalizar" onclick="finalizarConversa()">✅ Finalizar</button>
     </div>
   </div>
@@ -888,6 +919,9 @@ function renderConversas(convs, busca) {
 // ===== ABRIR CONVERSA =====
 window.abrirConversa = async function(id) {
   conversaAtiva = id;
+  // Mobile: alterna para a visão da conversa (e fecha o painel de info)
+  document.body.classList.add('chat-aberto');
+  document.body.classList.remove('info-aberto');
   document.querySelectorAll('.conv-item').forEach(function(el) { el.classList.remove('active'); });
   var item = document.querySelector('.conv-item[data-id="' + id + '"]');
   if (item) item.classList.add('active');
@@ -952,7 +986,8 @@ function renderInfoConversa(conv) {
       (c.matricula ? '<div class="field"><div class="label">Matrícula</div><div class="value">' + esc(c.matricula) + '</div></div>' : '') +
       (c.plano ? '<div class="field"><div class="label">Plano</div><div class="value">' + esc(c.plano) + '</div></div>' : '') +
       '<div class="field"><div class="label">Contato</div><div class="value">' + esc(c.celular || c.telefone || conv.numero || '-') + '</div></div>' +
-      '<div class="field"><div class="label ' + inadClass + '">' + inadLabel + '</div></div>';
+      '<div class="field"><div class="label ' + inadClass + '">' + inadLabel + '</div></div>' +
+      '<button id="btnAtualizarFoto" onclick="atualizarFotoCliente()" style="margin-top:8px;padding:6px 10px;border:1px solid #e5e7eb;border-radius:6px;background:#f9fafb;cursor:pointer;font-size:12px;color:#374151">🔄 Atualizar foto (WhatsApp)</button>';
   } else if (conv.dependente) {
     var dep = conv.dependente;
     fotoContainer.textContent = (dep.nome || '?').charAt(0).toUpperCase();
@@ -1445,6 +1480,35 @@ window.finalizarConversa = async function() {
 };
 
 // ===== PRIVADA TOGGLE =====
+// ===== NAVEGAÇÃO MOBILE (painel único) =====
+window.voltarLista = function() {
+  document.body.classList.remove('chat-aberto', 'info-aberto');
+};
+window.toggleInfo = function() {
+  document.body.classList.toggle('info-aberto');
+};
+
+// Busca a foto do cliente via Evolution (fetchProfile) e atualiza o painel
+window.atualizarFotoCliente = async function() {
+  if (!conversaAtiva) return;
+  var btn = document.getElementById('btnAtualizarFoto');
+  if (btn) { btn.disabled = true; btn.textContent = '⏳ Buscando...'; }
+  try {
+    var r = await (await fetch('/api/' + alias + '/evolution/refresh-photo/' + conversaAtiva, {
+      method: 'POST', headers: { 'Authorization': 'Bearer ' + token }
+    })).json();
+    if (r.success && r.atualizada) {
+      abrirConversa(conversaAtiva); // recarrega para exibir a nova foto
+    } else if (btn) {
+      btn.disabled = false;
+      btn.textContent = r.message || 'Nenhuma foto encontrada';
+      setTimeout(function(){ btn.textContent = '🔄 Atualizar foto (WhatsApp)'; }, 2500);
+    }
+  } catch(e) {
+    if (btn) { btn.disabled = false; btn.textContent = '🔄 Atualizar foto (WhatsApp)'; }
+  }
+};
+
 window.togglePrivada = function() {
   document.getElementById('privadaToggle').classList.toggle('ativa');
   var btn = document.getElementById('privadaToggle');

src/public/client-detail.html

@@ -452,8 +452,8 @@ window.darkModeIsDark=function(){return localStorage.getItem('chatc2_dark_mode')
           } else {
             html += '<div id="conteudoCarnes_' + c.id + '" style="display:none"></div>';
           }
-          // Conteudo Itens
+          // Conteudo Itens (oculto por padrão quando há boletos — Boletos é a aba ativa)
-          html += '<div id="conteudoItens_' + c.id + '" style="' + (temCarnes && !temItens ? 'display:none' : '') + ';overflow-x:auto">';
+          html += '<div id="conteudoItens_' + c.id + '" style="' + (temCarnes ? 'display:none;' : '') + 'overflow-x:auto">';
           if (temItens) {
             html += '<table style="font-size:12px"><thead><tr>' +
               '<th>Produto</th><th style="text-align:center">Quantidade</th>' +
@@ -492,19 +492,64 @@ window.darkModeIsDark=function(){return localStorage.getItem('chatc2_dark_mode')
     if (cItens) cItens.style.display = prefixo === 'itens' ? '' : 'none';
   };
 
+  // Edição INLINE do telefone do dependente (sem prompt/alert)
   window.editarTelDep = function(id) {
-    var btn = document.querySelector('button[onclick="editarTelDep(' + id + ')"]');
+    var span = document.getElementById('depTel_' + id);
-    var telAtual = btn ? (btn.getAttribute('data-tel') || '') : '';
+    if (!span || span.getAttribute('data-editing') === '1') return;
-    var novo = prompt('Editar telefone do dependente:', telAtual || '');
+    var btnEdit = document.querySelector('button[onclick="editarTelDep(' + id + ')"]');
-    if (novo === null || novo.trim() === telAtual) return;
+    var telAtual = btnEdit ? (btnEdit.getAttribute('data-tel') || '') : '';
+    span.setAttribute('data-editing', '1');
+    span.setAttribute('data-original', span.innerHTML);
+    if (btnEdit) btnEdit.style.display = 'none';
+    span.innerHTML =
+      '<input type="text" id="depTelInput_' + id + '" value="' + telAtual.replace(/"/g, '&quot;') + '" style="width:120px;padding:2px 6px;border:1px solid #667eea;border-radius:4px;font-size:12px;outline:none">' +
+      ' <button onclick="confirmarTelDep(' + id + ')" title="Confirmar" style="padding:1px 7px;border:1px solid #059669;border-radius:4px;background:#059669;color:#fff;cursor:pointer;font-size:11px">✔</button>' +
+      ' <button onclick="cancelarTelDep(' + id + ')" title="Cancelar" style="padding:1px 7px;border:1px solid #d1d5db;border-radius:4px;background:#fff;cursor:pointer;font-size:11px">✖</button>';
+    var inp = document.getElementById('depTelInput_' + id);
+    if (inp) {
+      inp.focus();
+      inp.addEventListener('keydown', function(e) {
+        if (e.key === 'Enter') { e.preventDefault(); confirmarTelDep(id); }
+        else if (e.key === 'Escape') { cancelarTelDep(id); }
+      });
+    }
+  };
+
+  window.cancelarTelDep = function(id) {
+    var span = document.getElementById('depTel_' + id);
+    if (!span) return;
+    span.innerHTML = span.getAttribute('data-original') || '-';
+    span.setAttribute('data-editing', '');
+    var btnEdit = document.querySelector('button[onclick="editarTelDep(' + id + ')"]');
+    if (btnEdit) btnEdit.style.display = '';
+  };
+
+  window.confirmarTelDep = function(id) {
+    var inp = document.getElementById('depTelInput_' + id);
+    var span = document.getElementById('depTel_' + id);
+    if (!inp || !span) return;
+    var novo = (inp.value || '').trim();
+    var btnEdit = document.querySelector('button[onclick="editarTelDep(' + id + ')"]');
+    inp.disabled = true;
     fetch('/api/' + alias + '/dependents/' + id + '/phone', {
       method: 'PUT',
       headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token },
-      body: JSON.stringify({ telefone: novo.trim() })
+      body: JSON.stringify({ telefone: novo })
     }).then(function(r) { return r.json(); }).then(function(d) {
-      if (d.success) { document.getElementById('depTel_' + id).textContent = novo.trim(); alert('Telefone atualizado!'); }
+      if (d.success) {
-      else alert('Erro: ' + d.error);
+        span.setAttribute('data-editing', '');
-    }).catch(function(e) { alert('Erro: ' + e.message); });
+        span.textContent = novo || '-';
+        if (btnEdit) { btnEdit.setAttribute('data-tel', novo); btnEdit.style.display = ''; }
+      } else {
+        inp.disabled = false;
+        inp.style.borderColor = '#ef4444';
+        inp.title = d.error || 'Erro ao salvar';
+      }
+    }).catch(function(e) {
+      inp.disabled = false;
+      inp.style.borderColor = '#ef4444';
+      inp.title = e.message;
+    });
   };
 
   // ============================================================

src/public/css/main.css

@@ -646,3 +646,87 @@ tr:last-child td { border-bottom: none; }
 ::-webkit-scrollbar-track { background: transparent; }
 ::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
 ::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
+
+/* =====================================================
+   RESPONSIVO (tablet / celular)
+   ===================================================== */
+@media (max-width: 1024px) {
+  .container { padding: 18px; }
+  .search-bar select { min-width: 150px; }
+}
+
+@media (max-width: 768px) {
+  /* A sidebar lateral vira uma barra horizontal no topo */
+  body { flex-direction: column; }
+  .sidebar {
+    width: 100%;
+    flex-direction: row;
+    align-items: center;
+    overflow-x: auto;
+  }
+  .sidebar-brand {
+    border-bottom: none;
+    padding: 10px 14px;
+    flex-shrink: 0;
+  }
+  .sidebar-brand span { display: none; }
+  .sidebar-brand h2 { font-size: 15px; }
+  .sidebar-nav {
+    flex-direction: row;
+    align-items: center;
+    padding: 6px;
+    gap: 2px;
+    overflow-x: auto;
+    overflow-y: hidden;
+    flex: 1;
+  }
+  .sidebar-nav .nav-label { display: none; }
+  .sidebar-nav a {
+    white-space: nowrap;
+    padding: 8px 12px;
+    margin-bottom: 0;
+    font-size: 13px;
+  }
+  .sidebar-footer {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    border-top: none;
+    padding: 6px;
+    flex-shrink: 0;
+  }
+  .sidebar-footer .dark-mode-toggle {
+    width: auto;
+    margin: 0 4px 0 0;
+    white-space: nowrap;
+  }
+  .sidebar-footer a { padding: 8px 10px; white-space: nowrap; }
+
+  /* Conteúdo principal */
+  .container { padding: 14px; }
+  .topbar { padding: 12px 16px; flex-wrap: wrap; gap: 8px; }
+  .topbar-title { font-size: 15px; }
+  .user-info { gap: 8px; }
+  .card { padding: 16px; border-radius: var(--radius-md); }
+
+  /* Tabelas: rolagem horizontal em vez de espremer */
+  .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
+  .table-wrapper table { min-width: 560px; }
+
+  /* Busca/filtros empilham e ocupam a largura */
+  .search-bar { gap: 8px; }
+  .search-bar input,
+  .search-bar select,
+  .search-bar button { width: 100%; min-width: 0; }
+  .search-bar .total-info { margin-left: 0; }
+
+  /* Modal quase tela cheia */
+  .modal-box { width: 94%; padding: 20px; max-height: 90vh; overflow-y: auto; }
+}
+
+@media (max-width: 480px) {
+  .container { padding: 10px; }
+  .card { padding: 13px; }
+  .btn { padding: 9px 14px; font-size: 13px; }
+  .info-grid { grid-template-columns: 1fr; }
+}

src/public/settings.html

@@ -36,6 +36,12 @@ body { background:#f3f4f6; display:flex; min-height:100vh; }
 .user-name { font-size:14px; font-weight:500; color:#374151; }
 .status-badge { display:inline-flex; align-items:center; gap:5px; padding:4px 12px; border-radius:20px; font-size:12px; font-weight:600; }
 .status-badge.online { background:#d1fae5; color:#065f46; }
+
+/* Responsivo: abas rolam horizontalmente no celular */
+@media (max-width: 768px) {
+  .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
+  .tabs button { flex: 0 0 auto; white-space: nowrap; padding: 12px 14px; font-size: 13px; }
+}
 </style>
 <link rel="stylesheet" href="/css/dark-mode.css">
 <script>function darkModeToggle(){var e=document.body;if(!e)return;var a=localStorage.getItem('chatc2_dark_mode')!=='true';e.classList.toggle('dark-mode',a);localStorage.setItem('chatc2_dark_mode',a?'true':'false');document.querySelectorAll('.dark-mode-toggle').forEach(function(b){b.innerHTML=a?'☀️ Claro':'🌙 Escuro'});}