From 887e95c6ca076cfab0e62c28af63074df5c14541 Mon Sep 17 00:00:00 2001
From: Ayron Santos <ayronc2sistemas@gmail.com>
Date: Wed, 17 Jun 2026 16:28:02 -0300
Subject: [PATCH] Torna a interface responsiva para celular e tablet
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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/public/chat.html     | 42 ++++++++++++++++++++
 src/public/css/main.css  | 84 ++++++++++++++++++++++++++++++++++++++++
 src/public/settings.html |  6 +++
 3 files changed, 132 insertions(+)

diff --git a/src/public/chat.html b/src/public/chat.html
index 9fd2ca9..4899737 100644
--- a/src/public/chat.html
+++ b/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');
@@ -1445,6 +1479,14 @@ 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');
+};
+
 window.togglePrivada = function() {
   document.getElementById('privadaToggle').classList.toggle('ativa');
   var btn = document.getElementById('privadaToggle');
diff --git a/src/public/css/main.css b/src/public/css/main.css
index 1ec2911..d13466a 100644
--- a/src/public/css/main.css
+++ b/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; }
+}
diff --git a/src/public/settings.html b/src/public/settings.html
index 586184a..a6d9f9b 100644
--- a/src/public/settings.html
+++ b/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'});}