feat: comprehensive design system overhaul

Applied impeccable design critique, audit, harden, layout, distill, and polish across all pages. DESIGN SYSTEM: - Created PRODUCT.md (5 design principles, WCAG 2.1 AA target) - Created DESIGN.md (34 color tokens, 6 radius scale, full component spec) - Created .impeccable/design.json (sidecar with tonal ramps, shadows, motion) ACCESSIBILITY: - 33 aria-labels across 7 pages (was ~13) - 63 <label> elements (was ~30) - 6 <main> landmarks + role=navigation on all sidebars - Esc to close modals on 4 pages - Keyboard shortcuts (Ctrl+J/K, Ctrl+F) on chat THEMING: - 216 hardcoded colors replaced with var() references - 449 !important removed from dark-mode.css - Dark mode script unified (was duplicated 9x inline) - All modals converted to .modal-overlay + .modal design system classes CHAT: - Error states for messages (.msg.erro, .msg.enviando) - Connection status indicator - Confirmation modal before finalizar - Input bar reorganized (3 visible actions, + menu) - Right panel accordions - Send button disabled when empty - Touch targets 44px on mobile CLIENT DETAIL: - Tabs/badges/sub-tabs use CSS classes instead of inline styles - 'Iniciar Conversa' button now primary action - alert() replaced with inline feedback - Modal converted to design system classes CLIENT LIST: - Modal moved inside <body> (was HTML-invalid) - alert() replaced with inline feedback - Modal uses .show pattern SETTINGS: - 4 modals converted to design system classes - 14 alert() calls replaced with inline feedback - fecharModal() uses classList instead of style.display ROUTES: - border-radius normalized, hardcoded colors fixed Score progression: Chat: 23 → 32/40 Client List: 32 → 35/40 Client Detail: 26 → 30/40 Settings: 29 → 35/40 Routes: 37 → 38/40 Audit (project): 14/20 → 17/20
2026-06-23 16:58:12 +00:00
parent cf720c37a1
commit 12d419de7c
113 changed files with 52423 additions and 951 deletions
@@ -0,0 +1,43 @@
+# Product
+
+## Register
+
+product
+
+## Users
+
+Atendentes de cobrança, call center e suporte ao cliente de empresas do setor funerário. Os usuários são originados de um ERP legado e importados para o Chatc2. Trabalham em desktop e mobile, com dois níveis de acesso: Agente (A) e Gerente/Admin (G). Passam longas jornadas na plataforma (8h+), que centraliza todo o atendimento da empresa.
+
+## Product Purpose
+
+Plataforma multi-empresa de atendimento omnichannel que unifica WhatsApp (Evolution API), triagem automatizada, geração de boletos em PDF, transcrição de áudio (Whisper.cpp) e gestão de clientes. Existe para substituir o atendimento fragmentado (telefone, WhatsApp pessoal, sistemas diferentes) por uma central única, rápida e organizada. Sucesso = atendente resolve mais rápido, cliente sai satisfeito.
+
+## Brand Personality
+
+Ágil, moderno, direto. A interface deve transmitir competência sem arrogância, velocidade sem ansiedade. O tom é funcional e respeitoso — não é uma rede social, é uma ferramenta de trabalho que inspira confiança.
+
+Referência positiva: Chatwoot — estrutura limpa de chat multi-agente, mas o Chatc2 deve ser **menos carregado de informação**, com foco no essencial.
+
+## Anti-references
+
+- Interfaces abarrotadas onde o atendente se sente perdido ou sobrecarregado
+- Navegação ambígua ou escondida que exige adivinhar onde as coisas estão
+- Excesso de distrações visuais, animações chamativas, cores gritantes
+- Qualquer padrão que faça o usuário duvidar do estado atual da operação
+
+## Design Principles
+
+1. **Clareza acima de tudo** — Informação certa no momento certo. Zero poluição visual. O atendente acha o que precisa sem pensar.
+2. **Fluidez operacional** — Mínimo atrito, cliques e esperas. Fluxos de atendimento (chat, triagem, boleto) rápidos e previsíveis.
+3. **Resistência à fadiga** — Conforto para uso prolongado. Dark mode caprichado, contraste equilibrado, tipografia legível, animações sutis.
+4. **Confiança visível** — Status sempre claros, feedback imediato, navegação óbvia. O atendente nunca se sente perdido.
+5. **Acessibilidade inclusiva** — Mirar WCAG 2.1 AA. Cores não são o único meio de comunicar estado. Suporte a zoom, teclado e leitores de tela.
+
+## Accessibility & Inclusion
+
+- Meta: WCAG 2.1 AA
+- Contraste adequado em ambos os temas (claro e escuro)
+- Estados de UI comunicados por ícone + cor (nunca só cor)
+- Suporte a navegação por teclado em todos os fluxos críticos
+- Considerar `prefers-reduced-motion` para animações
+- Textos com tamanho mínimo legível (14px corpo, 11px metadados)