From a2892cb2415dc775e75d7cf2f877e0f2ce80f5f5 Mon Sep 17 00:00:00 2001
From: Ayron Santoss <ayronc2sistemas@gmail.com>
Date: Thu, 25 Jun 2026 12:50:33 +0000
Subject: [PATCH] =?UTF-8?q?corre=C3=A7=C3=B5es=20layout=20dispositivos=20m?=
 =?UTF-8?q?oveis?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/public/admin-conversations.html |  5 +++-
 src/public/chat.html                |  4 +++
 src/public/client-detail.html       |  5 +++-
 src/public/client-list.html         |  3 +++
 src/public/css/dark-mode.css        |  6 +++++
 src/public/css/main.css             | 42 +++++++++++++++++++++++++++++
 src/public/dashboard.html           |  3 +++
 src/public/js/tabbar.js             | 42 +++++++++++++++++++++++++++++
 src/public/routes.html              |  5 +++-
 src/public/settings.html            |  5 +++-
 10 files changed, 116 insertions(+), 4 deletions(-)
 create mode 100644 src/public/js/tabbar.js

diff --git a/src/public/admin-conversations.html b/src/public/admin-conversations.html
index e378e6e..5fe3256 100644
--- a/src/public/admin-conversations.html
+++ b/src/public/admin-conversations.html
@@ -44,7 +44,7 @@ body { background:var(--surface-3); display:flex; min-height:100vh; }
 </aside>
 <main class="main" id="main-content">
   <div class="topbar">
-    <span class="topbar-title">💬 Todas as Conversas</span>
+      <span class="topbar-title">💬 Todas as Conversas</span>
     <span id="totalInfo" style="font-size:13px;color:#6b7280"></span>
   </div>
   <div class="container">
@@ -182,5 +182,8 @@ setInterval(carregar, 10000);
 <!-- impeccable-live-start -->
 <script src="http://localhost:8400/live.js"></script>
 <!-- impeccable-live-end -->
+
+<!-- Bottom Tab Bar (mobile) -->
+<script src="/js/tabbar.js"></script>
 </body>
 </html>
diff --git a/src/public/chat.html b/src/public/chat.html
index 710adf1..9083c23 100644
--- a/src/public/chat.html
+++ b/src/public/chat.html
@@ -899,6 +899,7 @@ body.dark-mode .msg.enviando { opacity: 0.4; }
 <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" aria-label="Voltar para lista de conversas">←</button>
+    <button class="menu-hamburger" onclick="toggleSidebar()" aria-label="Menu" style="display:none;margin-right:4px">☰</button>
     <div class="info">
       <h3 id="chatNome"></h3>
       <span id="chatStatus"></span>
@@ -2310,5 +2311,8 @@ body.dark-mode #btnCancelarConversa {
 <!-- impeccable-live-start -->
 <script src="http://localhost:8400/live.js"></script>
 <!-- impeccable-live-end -->
+
+<!-- Bottom Tab Bar (mobile) -->
+<script src="/js/tabbar.js"></script>
 </body>
 </html>
diff --git a/src/public/client-detail.html b/src/public/client-detail.html
index c8846c7..36b2dd7 100644
--- a/src/public/client-detail.html
+++ b/src/public/client-detail.html
@@ -119,7 +119,7 @@ table { font-size:13px; }
 <main class="main" id="main-content">
   <div class="topbar">
     <a href="#" class="back-btn" id="backBtn">← Voltar</a>
-    <span class="topbar-title">Detalhes do Cliente</span>
+      <span class="topbar-title">Detalhes do Cliente</span>
     <a href="#" class="btn-acao-topbar" id="btnIniciarConv" style="margin-left:auto">💬 Iniciar Conversa</a>
   </div>
   <div class="container" id="container">
@@ -883,5 +883,8 @@ table { font-size:13px; }
 <!-- impeccable-live-start -->
 <script src="http://localhost:8400/live.js"></script>
 <!-- impeccable-live-end -->
+
+<!-- Bottom Tab Bar (mobile) -->
+<script src="/js/tabbar.js"></script>
 </body>
 </html>
diff --git a/src/public/client-list.html b/src/public/client-list.html
index 906d541..1b2dd08 100644
--- a/src/public/client-list.html
+++ b/src/public/client-list.html
@@ -359,6 +359,9 @@ modalConvEl.addEventListener('click', function(e) { if (e.target === this) this.
 <!-- impeccable-live-start -->
 <script src="http://localhost:8400/live.js"></script>
 <!-- impeccable-live-end -->
+
+<!-- Bottom Tab Bar (mobile) -->
+<script src="/js/tabbar.js"></script>
 </body>
 </html>
 </script>
diff --git a/src/public/css/dark-mode.css b/src/public/css/dark-mode.css
index f4b5718..2e9a853 100644
--- a/src/public/css/dark-mode.css
+++ b/src/public/css/dark-mode.css
@@ -1035,6 +1035,12 @@ body.dark-mode .tabs { background: #16213e; border-color: #0f3460; }
 body.dark-mode .tabs button { background: #16213e; color: #9ca3af; }
 body.dark-mode .tabs button:hover { background: #1a1a2e; color: #c0c0c0; }
 body.dark-mode .tabs button.active { background: #1a2744; color: #818cf8; border-bottom-color: #818cf8; }
+/* Bottom tab bar no dark mode */
+body.dark-mode .tabbar {
+  background: #16213e;
+  border-color: #0f3460;
+  box-shadow: 0 -2px 12px rgba(0,0,0,0.3);
+}
 /* Botoes do painel direito no dark mode */
 body.dark-mode [style*="background:#eef2ff"] {
   background: #1e1b4b !important;
diff --git a/src/public/css/main.css b/src/public/css/main.css
index 6846896..8bb1e56 100644
--- a/src/public/css/main.css
+++ b/src/public/css/main.css
@@ -741,3 +741,45 @@ tr:last-child td { border-bottom: none; }
   .btn { padding: 9px 14px; font-size: 13px; }
   .info-grid { grid-template-columns: 1fr; }
 }
+
+/* ===== BOTTOM TAB BAR (MOBILE ≤768px) ===== */
+@media (max-width: 768px) {
+  .sidebar { display: none !important; }
+  .main { width: 100%; padding-bottom: 64px; }
+
+  /* Barra inferior fixa */
+  .tabbar {
+    display: flex !important;
+    position: fixed;
+    bottom: 0; left: 0; right: 0;
+    height: 62px;
+    background: var(--surface);
+    border-top: 1px solid var(--border);
+    z-index: 1000;
+    box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+  .tabbar a {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 3px;
+    text-decoration: none;
+    color: var(--text-faint);
+    font-size: 10px;
+    font-weight: 500;
+    transition: color .15s;
+    -webkit-tap-highlight-color: transparent;
+  }
+  .tabbar a .tab-icon { font-size: 22px; line-height: 1; }
+  .tabbar a.active { color: var(--primary); font-weight: 600; }
+
+  .topbar { padding: 10px 14px; }
+  .topbar-title { font-size: 15px; }
+
+  /* Chat: espaço para tabbar no mobile */
+  .chat-center { padding-bottom: 70px; }
+  .sidebar-left { padding-bottom: 70px; }
+}
diff --git a/src/public/dashboard.html b/src/public/dashboard.html
index a31db91..53b0057 100644
--- a/src/public/dashboard.html
+++ b/src/public/dashboard.html
@@ -268,5 +268,8 @@
 <!-- impeccable-live-start -->
 <script src="http://localhost:8400/live.js"></script>
 <!-- impeccable-live-end -->
+
+<!-- Bottom Tab Bar (mobile) -->
+<script src="/js/tabbar.js"></script>
 </body>
 </html>
diff --git a/src/public/js/tabbar.js b/src/public/js/tabbar.js
new file mode 100644
index 0000000..1d593da
--- /dev/null
+++ b/src/public/js/tabbar.js
@@ -0,0 +1,42 @@
+/**
+ * Bottom Tab Bar — Chatc2 (Mobile)
+ *
+ * Em dispositivos móveis (≤768px), renderiza uma barra de navegação
+ * inferior fixa com ícones. A sidebar desktop é ocultada.
+ *
+ * Incluir antes do </body>:
+ *   <script src="/js/tabbar.js"></script>
+ */
+(function() {
+  var alias = (window.location.pathname.split('/')[2]) || localStorage.getItem('chatc2_alias') || 'novo_local';
+  var user = JSON.parse(localStorage.getItem('chatc2_user') || '{}');
+  var empresaId = user.empresas ? user.empresas[0] : 1;
+  var isGerente = (user.tipoChat || '') === 'G';
+
+  // Determina qual aba está ativa baseado na URL
+  var path = window.location.pathname;
+  var activeTab = 'chat';
+  if (path.includes('/dashboard')) activeTab = 'dash';
+  else if (path.includes('/clients')) activeTab = 'clients';
+  else if (path.includes('/settings')) activeTab = 'config';
+  else if (path.includes('/routes')) activeTab = 'config';
+
+  var tabs = [
+    { id: 'dash',    icon: '📊', label: 'Dash',   href: '/app/' + alias + '/dashboard', admin: true },
+    { id: 'clients', icon: '👥', label: 'Clientes', href: '/app/' + alias + '/clients', admin: false },
+    { id: 'chat',    icon: '💬', label: 'Chat',    href: '/app/' + alias + '/company/' + empresaId + '/conversation/0', admin: false },
+    { id: 'config',  icon: '⚙️', label: 'Config',  href: '/app/' + alias + '/settings', admin: true },
+  ];
+
+  var html = '<nav class="tabbar" style="display:none">';
+  for (var i = 0; i < tabs.length; i++) {
+    var t = tabs[i];
+    if (t.admin && !isGerente) continue;
+    var cls = t.id === activeTab ? ' class="active"' : '';
+    html += '<a href="' + t.href + '"' + cls + '><span class="tab-icon">' + t.icon + '</span>' + t.label + '</a>';
+  }
+  html += '</nav>';
+
+  // Insere no body
+  document.body.insertAdjacentHTML('beforeend', html);
+})();
diff --git a/src/public/routes.html b/src/public/routes.html
index 252230d..5b7f057 100644
--- a/src/public/routes.html
+++ b/src/public/routes.html
@@ -107,7 +107,7 @@ body { background:var(--surface-3); display:flex; min-height:100vh; }
 </aside>
 <main class="main" id="main-content">
   <div class="topbar">
-    <span class="topbar-title">📡 Rotas da API</span>
+      <span class="topbar-title">📡 Rotas da API</span>
     <span id="totalRotas" style="font-size:13px;color:#6b7280"></span>
   </div>
   <div class="container">
@@ -333,5 +333,8 @@ carregarRotas();
 <!-- impeccable-live-start -->
 <script src="http://localhost:8400/live.js"></script>
 <!-- impeccable-live-end -->
+
+<!-- Bottom Tab Bar (mobile) -->
+<script src="/js/tabbar.js"></script>
 </body>
 </html>
diff --git a/src/public/settings.html b/src/public/settings.html
index ca93397..6849cb2 100644
--- a/src/public/settings.html
+++ b/src/public/settings.html
@@ -82,7 +82,7 @@ body { background:var(--surface-3); display:flex; min-height:100vh; }
     <a onclick="logout()" aria-label="Sair do sistema"><span class="icon">🚪</span> Sair</a></div>
 </aside>
 <main class="main" id="main-content">
-  <div class="topbar"><span class="topbar-title">⚙️ Configurações</span></div>
+      <span class="topbar-title">⚙️ Configurações</span></div>
   <div class="container">
     <div class="tabs">
       <button class="active" onclick="ativarAba('equipe',this)">👥 Equipe</button>
@@ -1078,5 +1078,8 @@ carregarResolucao();
 <!-- impeccable-live-start -->
 <script src="http://localhost:8400/live.js"></script>
 <!-- impeccable-live-end -->
+
+<!-- Bottom Tab Bar (mobile) -->
+<script src="/js/tabbar.js"></script>
 </body>
 </html>