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/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'});}