estica pela largura da aside (flex-col), então aplicar
container-type nela é seguro (não depende do conteúdo).
============================================================ */
aside section:has(img[src*="/brand-assets/logo"]) {
container-type:inline-size;
row-gap:16px !important; /* afasta a busca do logo (estava colado) */
margin-top:8px !important; /* desce um tico o bloco do topo */
}
@container (max-width:130px) {
img[src*="/brand-assets/logo"] {
content:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2040%2046'%3E%3Cpath%20d='M20%202L37%2011.5V30.5L20%2040L3%2030.5V11.5L20%202Z'%20fill='%23b6720c'%20stroke='%23f2a93b'%20stroke-width='1.5'/%3E%3Ctext%20x='20'%20y='27'%20font-family='monospace'%20font-weight='bold'%20font-size='14'%20fill='white'%20text-anchor='middle'%3EUV%3C/text%3E%3C/svg%3E") !important;
height:30px !important; width:auto !important;
max-width:32px !important; margin:2px 0 !important;
}
}
/* ============================================================
BLOCO 9 (24/07) — barra de seleção FINA e CONFIÁVEL.
O ::before se ancorava no lugar errado (aparecia como blob no vão
ou sumia). Solução: barra via box-shadow INSET, que renderiza sempre
na borda esquerda do próprio card — fina (3px), reta, cor da ref. */
.conversation.active::before, .conversation.selected::before { display:none !important; }
.conversation.active, .conversation.selected {
box-shadow:inset 3px 0 0 var(--uv-primary), 0 1px 3px rgba(0,0,0,.4) !important;
}
/* ============================================================
BLOCO 10 (24/07) — contador de não-lidas em LARANJA (era teal nativo,
bg-n-teal-9), pra bater com o mockup. ESCOPADO em .conversation:
a bolinha de status "Online" do agente TAMBÉM é bg-n-teal-9 e deve
seguir VERDE/teal — por isso o laranja fica SÓ dentro do card. */
.conversation [class*="bg-n-teal"] { background-color:var(--uv-primary) !important; }
/* número do badge SEMPRE branco. Vence a regra do horário discreto
`.conversation .text-xxs {color:#6a6a6a}` (0,2,0) via (0,3,0). */
.conversation [class*="bg-n-teal"][class*="text-"],
.conversation [class*="bg-n-teal"],
.conversation [class*="bg-n-teal"] * { color:#fff !important; }
/* ============================================================
BLOCO 11 (24/07) — ícone do item de menu ATIVO em laranja.
Os ícones lucide (span.i-lucide-*) são máscaras pintadas por
background-color (currentColor). No item ativo forçamos texto E
ícone laranja. Cobrimos os marcadores comuns de "ativo" do Chatwoot
(router-link-active dos sub-itens + .active + aria-current). */
nav a.router-link-active, nav a.router-link-exact-active,
nav .active, nav [aria-current="page"] {
color:var(--uv-primary) !important;
}
nav a.router-link-active [class*="i-lucide"],
nav a.router-link-exact-active [class*="i-lucide"],
nav .active [class*="i-lucide"],
nav [aria-current="page"] [class*="i-lucide"] {
background-color:var(--uv-primary) !important;
}
/* ============================================================
BLOCO 12 (24/07) — TEMA CLARO.
Todo o tema acima força cores escuras com !important. O Chatwoot
marca o modo escuro com a classe `dark` no . Então, quando o
body NÃO tem `dark` (= modo claro), devolvemos a paleta CLARA do
dashboard (#f5f5f0 / #fff / #ebebeb / texto #1a1a1a). Os acentos
(laranja, logo, bolha enviada, badge, seleção) ficam nos DOIS modos.
Prefixo `body:not(.dark)` sobe a especificidade e vence as regras
escuras. Se sobrar alguma mancha escura no claro, é só me apontar.
============================================================ */
/* superfícies — off-white (branco puro cansava). Cards ficam #fff e
"saltam" sobre as superfícies off-white. */
body:not(.dark) .bg-n-background { background-color:#eef1f5 !important; }
body:not(.dark) [class*="bg-n-surface"] { background-color:#f8f9fb !important; }
body:not(.dark) [class*="bg-n-solid-1"], body:not(.dark) [class*="bg-n-solid-2"] { background-color:#f1f3f6 !important; }
body:not(.dark) [class*="bg-n-solid-3"] { background-color:#eaedf2 !important; }
body:not(.dark) [class*="conversations-list"] { background-color:#f0f2f5 !important; }
body:not(.dark) [class*="bg-n-button-color"] { background-color:#ffffff !important; }
/* textos */
body:not(.dark) [class*="text-n-slate-12"] { color:#1a1a1a !important; }
body:not(.dark) [class*="text-n-slate-11"] { color:#666666 !important; }
body:not(.dark) [class*="text-n-slate-10"], body:not(.dark) [class*="text-n-slate-9"] { color:#888888 !important; }
/* bordas / outline */
body:not(.dark) [class*="border-n-weak"], body:not(.dark) [class*="border-n-strong"],
body:not(.dark) [class*="border-n-slate-3"], body:not(.dark) [class*="border-n-slate-4"],
body:not(.dark) [class*="divide-n-"], body:not(.dark) [class*="border-n-brand"],
body:not(.dark) [class*="border-woot"] { border-color:#e0e0e0 !important; }
body:not(.dark) [class*="outline-n-container"] { outline-color:#c8cfd8 !important; } /* + contraste no Resolver */
/* cards da lista */
body:not(.dark) .conversation { background-color:#ffffff !important; }
body:not(.dark) .conversation:hover { background-color:#f2f4f7 !important; }
body:not(.dark) .conversation.active, body:not(.dark) .conversation.selected { background-color:#e8ecf3 !important; } /* leve tom azulado */
body:not(.dark) .conversation--user { color:#1a1a1a !important; }
body:not(.dark) .conversation .text-n-slate-11 { color:#666666 !important; }
body:not(.dark) .conversation .text-xxs:not([class*="bg-n-teal"]) { color:#999999 !important; }
/* bolha recebida + composer */
body:not(.dark) .left-bubble { background-color:#e9edf3 !important; color:#1a1a1a !important; } /* cinza levemente azulado */
body:not(.dark) .reply-box { background-color:#ffffff !important; border-color:#e0e0e0 !important; }
/* handle de resize + scrollbar no claro */
body:not(.dark) [class*="cursor-col-resize"]:hover,
body:not(.dark) [class*="cursor-col-resize"]:hover * { background-color:#cccccc !important; }
body:not(.dark) ::-webkit-scrollbar-thumb { background:#cccccc !important; }
/* ============================================================
BLOCO 13 (24/07) — refinamentos do feedback (GPT).
ESCURO: profundidade por CAMADAS (cada área um tom, separação sem
linhas) + campo de resposta como CARD FLUTUANTE. Tudo escopado em
`.dark` pra não afetar o tema claro.
============================================================ */
/* camadas de profundidade: chat #151515 · sidebar #1a1a1a ·
lista #1d1d1d · cards #232323 · hover #2a2a2a */
.dark .bg-n-background { background-color:#151515 !important; }
.dark aside[class*="bg-n-background"] { background-color:#1a1a1a !important; }
.dark [class*="bg-n-surface"] { background-color:#151515 !important; }
.dark [class*="conversations-list"] { background-color:#1d1d1d !important; }
.dark .conversation { background-color:#232323 !important; }
.dark .conversation:hover { background-color:#2a2a2a !important; }
.dark .conversation.active, .dark .conversation.selected { background-color:#2a2a2a !important; }
.dark .left-bubble { background-color:#262626 !important; border:0 !important; }
/* campo de resposta = card flutuante no escuro (estava "colado") */
.dark .reply-box {
background-color:#1d1d1d !important;
border:1px solid rgba(255,255,255,.06) !important;
border-radius:14px !important;
box-shadow:0 4px 20px rgba(0,0,0,.35) !important;
}
/* ============================================================
BLOCO 14 (24/07) — divisória vertical ao lado do logo.
É um (fundo, não borda), fina (1px)
e sem contraste. Deixa 2px e visível nos dois modos. */
[class*="bg-n-strong"][class*="w-px"] { width:2px !important; }
.dark [class*="bg-n-strong"][class*="w-px"] { background-color:#3d3d3d !important; }
body:not(.dark) [class*="bg-n-strong"][class*="w-px"] { background-color:#c8cfd8 !important; }
/* ============================================================
BLOCO 15 — papel de parede: NAO TEM, de proposito.
O tema do Grafeno traz aqui o doodle da pizzaria embutido em base64,
nos dois modos. Sao 199 KB, 89% daquele arquivo, e o nginx injeta isso
em toda carga de pagina.
Nao veio para ca por duas razoes, nesta ordem: a arte e da pizzaria, e
por em cima do atendimento da UV seria vestir a UV com a marca errada
-- que e justamente o que este arquivo existe para evitar. A segunda e
o peso.
Quando houver arte da UV, o bloco volta identico ao do Grafeno, so
trocando as duas imagens: [class*="conversation-panel"] com
no-repeat/cover/center, e as duas regras .dark e body:not(.dark).
============================================================ */
*/
img[src*="/brand-assets/logo"] {
content:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20165%2046'%3E%3Cpath%20d='M20%202L37%2011.5V30.5L20%2040L3%2030.5V11.5L20%202Z'%20fill='%23b6720c'%20stroke='%23f2a93b'%20stroke-width='1.5'/%3E%3Ctext%20x='20'%20y='27'%20font-family='monospace'%20font-weight='bold'%20font-size='14'%20fill='white'%20text-anchor='middle'%3EUV%3C/text%3E%3Ctext%20x='45'%20y='26'%20font-family='monospace'%20font-weight='bold'%20font-size='17'%20fill='%23f2a93b'%3Einform%C3%A1tica%3C/text%3E%3Ctext%20x='46'%20y='38'%20font-family='sans-serif'%20font-size='7'%20letter-spacing='2'%20fill='%23888888'%3EATENDENTE%20VIRTUAL%3C/text%3E%3C/svg%3E") !important;
width:auto !important;
height:34px !important;
max-width:160px !important;
object-fit:contain !important;
margin:4px 0 !important;
}
/* Container do logo: cresce com o conteúdo, SEM largura forçada (o
min-width fixo era o que empurrava o logo pra fora quando a sidebar
colapsa). overflow:hidden garante que nunca vaze pro painel ao lado. */
div:has(> img[src*="/brand-assets/logo"]) {
width:auto !important;
height:auto !important;
max-width:100% !important;
overflow:hidden !important;
place-content:center start !important;
}
/* Esconde textos de marca "Chatwoot"/"powered by" que sobrarem */
[class*="powered-by"], .powered-by-chatwoot { display:none !important; }
/* ============================================================
BLOCO 2 (24/07) — estrutura estilo BotConversa
Lista de conversas como lista de contatos, busca em pílula,
seleção com barra laranja, paleta completa do dashboard.
Mesma estratégia defensiva: tokens n-* via [class*=].
============================================================ */
/* ---- 6. SUPERFÍCIES E BORDAS restantes (paleta completa) ---- */
[class*="bg-n-solid-3"] { background-color:#1a1a1a !important; }
[class*="border-n-weak"], [class*="border-n-strong"],
[class*="border-n-container"], [class*="divide-n-"] { border-color:#2a2a2a !important; }
/* Texto na escala do dashboard (#f0f0f0 / #888 / #555) */
[class*="text-n-slate-12"] { color:#f0f0f0 !important; }
[class*="text-n-slate-11"] { color:#999999 !important; }
[class*="text-n-slate-10"], [class*="text-n-slate-9"] { color:#777777 !important; }
/* ---- 7. LISTA DE CONVERSAS = lista de contatos do BotConversa ---- */
/* Conversa selecionada: fundo levemente claro + barrinha laranja */
[class*="conversation"][class*="active"],
[class*="conversation"][aria-selected="true"] {
background-color:#161616 !important;
box-shadow:inset 3px 0 0 var(--uv-primary) !important;
}
[class*="conversation"]:hover { background-color:#141414; }
/* ---- 8. BUSCA em pílula (como o campo "Busca" do BotConversa) ---- */
input[type="search"],
input[placeholder*="esquisar"], input[placeholder*="earch"], input[placeholder*="uscar"] {
background-color:#1a1a1a !important;
border:1px solid #2a2a2a !important;
border-radius:999px !important;
color:#f0f0f0 !important;
}
input::placeholder { color:#555 !important; }
/* ---- 9. (removido 24/07: horários em Space Mono ficavam feios —
o mockup aprovado usa DM Sans em tudo) ---- */
/* ---- 10. SCROLLBAR escura ---- */
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#2a2a2a; border-radius:99px; }
::-webkit-scrollbar-thumb:hover { background:#3a3a3a; }
* { scrollbar-color:#2a2a2a transparent; }
/* ============================================================
BLOCO 3 (24/07) — bolhas de mensagem, seletores EXATOS da
v4.14.0 (components-next/message/bubbles/Base.vue):
AGENT=bg-n-solid-blue · BOT/TEMPLATE=bg-n-solid-iris ·
PRIVATE=bg-n-solid-amber · USER=bg-n-slate-4 ·
orientação: .left-bubble / .right-bubble
============================================================ */
/* Enviada (agente/bot): laranja sólido, texto branco — estilo BotConversa */
.right-bubble {
background-color:#f2a93b !important;
color:#fff !important;
}
/* Nota privada (espelho do bot pro WhatsApp): mesmo laranja, cadeado diferencia */
.right-bubble[class*="bg-n-solid-amber"] { background-color:#f2a93b !important; }
/* Recebida (cliente): cartão escuro do dashboard */
.left-bubble {
background-color:#1a1a1a !important;
border:1px solid #2a2a2a !important;
color:#f0f0f0 !important;
}
/* TUDO dentro da bolha enviada é branco: texto, horário, cadeado,
confirmações (✓✓), negrito, itálico, links — sem exceção.
(a regra por token deixava o meta e o itálico vermelho-escuro) */
.right-bubble, .right-bubble * { color:#fff !important; }
.right-bubble a { text-decoration:underline; }
/* ============================================================
BLOCO 4 (24/07) — estrutura BotConversa: cards de conversa
arredondados com respiro, composer em cartão, painéis
separados. Classe .conversation exata do ConversationCard.vue
da v4.14 (root: "... cursor-pointer conversation border-b ...").
============================================================ */
/* Linhas da lista viram CARDS (como os contatos do BotConversa) */
.conversation {
margin:3px 8px !important;
border-radius:12px !important;
border-bottom-color:transparent !important;
padding-top:6px !important;
padding-bottom:6px !important;
}
.conversation:hover { background-color:#161616 !important; }
.conversation.active {
background-color:#1a1a1a !important;
box-shadow:inset 3px 0 0 var(--uv-primary) !important;
}
.conversation--user { font-weight:600 !important; }
/* Painel da lista levemente mais claro que o fundo do chat */
[class*="conversations-list"] { background-color:#111111 !important; }
/* Composer (Responder / Mensagem Privada) como cartão do dashboard */
.reply-box {
border:1px solid #2a2a2a !important;
border-radius:12px !important;
margin:0 12px 12px !important;
overflow:hidden !important;
background-color:#111111 !important;
}
/* ============================================================
BLOCO 5 (24/07) — aproximação final do mockup aprovado
============================================================ */
/* 5.1 Tintas de marca com alpha (bg-n-brand/10 etc.) tinham virado
laranja SÓLIDO pela regra genérica do topo — volta a ser tinta
suave. Conserta o retângulo laranja pesado da aba ativa. */
[class*="bg-n-brand/"], [class*="bg-woot-25"], [class*="bg-woot-50"],
[class*="bg-woot-75"], [class*="bg-woot-100"] {
background-color:rgba(242,169,59,.15) !important;
}
/* 5.2 Badges e acentos AZUIS viram laranja (contador das abas) */
[class*="bg-n-blue"], [class*="bg-n-iris"] {
background-color:var(--uv-primary) !important;
color:#fff !important;
}
/* Texto azul -> laranja (abas Minhas/Não atribuídas/Todos + acentos).
Excluímos SÓ os badges realmente coloridos (bg-n-blue/iris), pra o
número não ficar laranja no fundo laranja. Antes eu excluía qualquer
"bg-n-", o que pegava o "after:bg-n-brand" da aba ativa e a deixava
azul — por isso as abas não ficavam laranja. */
[class*="text-n-blue"]:not([class*="bg-n-blue"]):not([class*="bg-n-iris"]),
[class*="text-n-iris"]:not([class*="bg-n-blue"]):not([class*="bg-n-iris"]) {
color:var(--uv-primary) !important;
}
/* 5.3 Cards da lista SEMPRE com fundo de cartão e mais respiro,
como no mockup (não só no hover/ativo) */
.conversation {
background-color:#151515 !important;
margin:6px 10px !important;
border-radius:14px !important;
padding:12px !important;
}
.conversation:hover { background-color:#191919 !important; }
.conversation.active { background-color:#1d1d1d !important; }
/* 5.4 Respiro no menu lateral e na busca */
nav a, nav button { border-radius:10px; }
input[placeholder*="esquisar"], input[placeholder*="earch"] { padding:10px 14px !important; }
/* ============================================================
BLOCO 6 (24/07) — refinamento "produto premium" (feedback GPT).
Objetivo: sair do "mockup" e parecer Linear/Slack/Intercom, SEM
sair da identidade da UV. Paleta mantida escura (mockup), com
profundidade por CAMADAS de fundo — não por linhas. Laranja só
como acento (bolha enviada, seleção, badge, ativo).
============================================================ */
/* 6.0 Microinterações — transições suaves em tudo que reage ao mouse */
.conversation, nav a, nav button, .reply-box, .reply-box button,
button[class*="bg-n"], [class*="tabs"] a {
transition:background-color .18s ease, color .18s ease,
box-shadow .18s ease, border-color .18s ease !important;
}
/* 6.1 Separadores DISCRETOS (o mockup tem linhas MUITO sutis entre
colunas e borda nos botões/composer) — cinza escuro, não transparente.
Só o interior dos cards da lista fica sem linha. */
[class*="border-n-weak"], [class*="border-n-strong"],
[class*="border-n-slate-3"], [class*="border-n-slate-4"],
[class*="divide-n-"] {
border-color:#232323 !important;
}
.conversation, .conversation .border-line { border-color:transparent !important; }
/* 6.2 Camadas de profundidade (tudo escuro, cada nível um tom acima):
chat #0a0a0a (base) · painéis #0d0d0d · cards #161616 · hover #1f1f1f */
[class*="conversations-list"], [class*="bg-n-surface"] { background-color:#0d0d0d !important; }
/* 6.3 CARDS da lista: mais baixos, compactos, seleção discreta.
Seleção = barra laranja 4px à esquerda + fundo levemente acima +
sombra sutil (NUNCA borda laranja completa). */
.conversation {
margin:4px 8px !important;
padding:2px 10px !important;
border-radius:12px !important;
background-color:#161616 !important;
box-shadow:none !important;
}
.conversation .border-line { padding-top:9px !important; padding-bottom:9px !important; }
.conversation:hover { background-color:#1f1f1f !important; }
.conversation.active {
background-color:#1c1c1c !important;
box-shadow:inset 4px 0 0 var(--uv-primary), 0 1px 3px rgba(0,0,0,.45) !important;
}
/* Hierarquia tipográfica dentro do card: nome forte, prévia média, hora discreta */
.conversation--user { font-weight:600 !important; font-size:14px !important; color:#f0f0f0 !important; }
.conversation .text-n-slate-11 { font-size:12.5px !important; color:#8a8a8a !important; }
.conversation .text-xxs:not([class*="bg-n-teal"]) { font-size:11px !important; color:#6a6a6a !important; }
/* 6.4 BOLHAS estilo WhatsApp Desktop: recebida sem borda (só fill),
mais respiro vertical entre mensagens */
.left-bubble { background-color:#171717 !important; border:0 !important; }
.left-bubble, .right-bubble { margin-top:7px !important; }
/* 6.5 COMPOSER moderno (Slack/Discord/WhatsApp): baixo e arredondado */
.reply-box {
border:1px solid #1e1e1e !important;
border-radius:14px !important;
margin:0 12px 14px !important;
}
.reply-box [contenteditable], .reply-box textarea { min-height:38px !important; }
/* 6.6 SIDEBAR compacta (Linear/Slack): itens juntos, ícones menores, logo menor */
nav a, nav button { padding-top:7px !important; padding-bottom:7px !important; }
nav [class*="i-"], nav svg { width:19px !important; height:19px !important; font-size:19px !important; }
/* logo: devolvido pra 36px (28 tinha ficado pequeno demais) */
img[src*="/brand-assets/logo"] { height:36px !important; max-width:180px !important; }
/* 6.7 MATA o retângulo laranja da seleção: o Chatwoot roda a animação
"animate-card-select" que desenha uma borda/ring laranja nos 4 lados.
Zera qualquer borda/outline/ring/animação no card e deixa SÓ a barra
de 4px à esquerda + sombra sutil. */
.conversation { border:0 !important; outline:0 !important; }
.conversation.animate-card-select { animation:none !important; }
.conversation.active, .conversation.selected {
border:0 !important; outline:0 !important;
background-color:#1c1c1c !important;
box-shadow:inset 4px 0 0 var(--uv-primary), 0 1px 3px rgba(0,0,0,.45) !important;
}
/* 6.8 BOTÃO ENVIAR redondo com avião de papel (como no mockup).
No fonte v4.14 é um