Torna a interface responsiva para celular e tablet

- 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

@@ -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');