",
+ "css": ".ds-msg-cliente { align-self: flex-start; background: #ffffff; border: 1px solid #f3f4f6; padding: 10px 14px; border-radius: 16px; border-top-left-radius: 4px; max-width: 70%; font-size: 14px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #111827; word-wrap: break-word; }"
+ }
+ ],
+ "narrative": {
+ "northStar": "O Terminal Humanizado",
+ "overview": "O Chatc2 é um terminal funcional — preciso, confiável, sem firulas — mas que não esquece que do outro lado da tela há uma pessoa. A interface respira. Curvas suaves (6px–16px) substituem cantos duros de terminal. O espaço entre elementos é generoso o suficiente para não cansar, mas econômico o bastante para manter densidade de informação. Toques de índigo funcional guiam o olhar sem gritar. O sidebar noturno ancora a experiência com profundidade, como um painel de comando que nunca apaga. O sistema rejeita explicitamente a poluição visual e a ambiguidade. Cada estado tem feedback imediato. Cada cor tem um porquê. Cada pixel de sombra existe para hierarquia, não por decoração.",
+ "keyCharacteristics": [
+ "Paleta enxuta: um acento índigo + violeta de apoio + neutros limpos",
+ "Dark mode como cidadão de primeira classe",
+ "Sombras leves — destaque sem peso",
+ "Tipografia de sistema: nativa, zero latência",
+ "Componentes táteis que respondem ao toque com confiança"
+ ],
+ "rules": [
+ {
+ "name": "The One Voice Rule",
+ "body": "O índigo funcional ocupa ≤10% de qualquer tela. Sua raridade é o ponto. Se tudo é índigo, nada é importante.",
+ "section": "colors"
+ },
+ {
+ "name": "The Semantic Triplet Rule",
+ "body": "Estados (sucesso, erro, aviso) sempre usam o trio completo: cor de destaque + fundo claro + texto escuro. Nunca usar a cor de destaque como fundo de texto corrido.",
+ "section": "colors"
+ },
+ {
+ "name": "The Native-First Rule",
+ "body": "Nunca importar webfonts. O sistema operacional já tem tipografia excelente.",
+ "section": "typography"
+ },
+ {
+ "name": "The Weight Discipline Rule",
+ "body": "Apenas três pesos convivem: 400 (corpo), 600 (labels), 700–800 (títulos). Nunca usar 300, 500 ou 900.",
+ "section": "typography"
+ },
+ {
+ "name": "The Flat-by-Default Rule",
+ "body": "A superfície base é plana. Sombras aparecem apenas quando um elemento precisa de separação hierárquica — nunca por decoração.",
+ "section": "elevation"
+ },
+ {
+ "name": "The Dark Mode Elevation Rule",
+ "body": "No dark mode, sombras são abolidas. A diferenciação entre superfícies é 100% tonal.",
+ "section": "elevation"
+ }
+ ],
+ "dos": [
+ "Usar o índigo funcional (#667eea) em ≤10% da superfície visível. Ele é um acento, não uma cor de fundo.",
+ "Garantir que todo estado interativo tenha feedback em ≤150ms.",
+ "Comunicar estado com ícone + cor. Nunca apenas cor.",
+ "Usar o trio semântico completo para qualquer indicador de estado.",
+ "Manter o dark mode com diferenciação tonal, nunca com sombras.",
+ "Usar border-left: 4px solid com cor semântica para stat cards no dashboard.",
+ "Usar padding mínimo de 24px em cards, 14px 24px na topbar.",
+ "Preservar a barra lateral noturna em todas as páginas."
+ ],
+ "donts": [
+ "Criar interfaces abarrotadas onde o atendente precise adivinhar onde as coisas estão.",
+ "Usar mais de 3 pesos tipográficos na mesma tela.",
+ "Importar webfonts externas.",
+ "Usar sombras em dark mode.",
+ "Usar cores semânticas como cor de fundo para texto corrido.",
+ "Criar modais sem overlay escuro + blur.",
+ "Usar cantos vivos (border-radius: 0) em componentes interativos.",
+ "Omitir o ring de foco de 3px em inputs."
+ ]
+ }
+}
diff --git a/.impeccable/live/config.json b/.impeccable/live/config.json
new file mode 100644
index 0000000..5f042e9
--- /dev/null
+++ b/.impeccable/live/config.json
@@ -0,0 +1,6 @@
+{
+ "files": ["src/public/**/*.html"],
+ "insertBefore": "
",
+ "commentSyntax": "html",
+ "cspChecked": true
+}
diff --git a/.pi/skills/impeccable/SKILL.md b/.pi/skills/impeccable/SKILL.md
new file mode 100644
index 0000000..179e7b4
--- /dev/null
+++ b/.pi/skills/impeccable/SKILL.md
@@ -0,0 +1,166 @@
+---
+name: impeccable
+description: Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.
+version: 3.8.0
+license: Apache 2.0
+allowed-tools:
+ - Bash(npx impeccable *)
+---
+
+Designs and iterates production-grade frontend interfaces. Real working code, committed design choices, exceptional craft.
+
+## Setup
+
+You MUST do these steps before proceeding:
+
+1. Run `node .pi/skills/impeccable/scripts/context.mjs` once per session. If the request names or implies a file, route, or app inside a monorepo, infer the concrete path and run `node .pi/skills/impeccable/scripts/context.mjs --target