/* =====================================================================
AGOS Atendimento — skin premium (SaaS enterprise) sobre o Chatwoot.
Implementa os design tokens do redesign sem tocar no código do sistema:
é uma camada de CSS injetada pelo proxy. Remover = volta ao original.
===================================================================== */
/* ----------------------------- tokens ------------------------------ */
:root{
--ag-nav: #071B34; /* navegação global */
--ag-nav-2: #0B2547; /* navegação elevada / hover */
--ag-bg: #FAFAF9; /* fundo principal */
--ag-surface: #FFFFFF; /* superfícies */
--ag-chat-bg: #FCFBF9; /* fundo da conversa */
--ag-text: #182230; /* texto principal */
--ag-text-2: #667085; /* texto secundário */
--ag-text-3: #8A94A6; /* texto discreto */
--ag-border: #E6E9EF; /* bordas */
--ag-blue: #0B63F6; /* azul principal */
--ag-blue-hover: #0754D8;
--ag-blue-soft: #EDF4FF; /* seleção */
--ag-green: #169B62;
--ag-green-soft: #ECFDF3;
--ag-red: #D92D4C;
--ag-red-soft: #FFF1F3;
--ag-amber: #F59E0B;
/* recalibra a escala de azul interna do Chatwoot para o azul da spec —
tabs, links, botões e indicadores herdam o novo tom de uma vez */
--blue-9: 11 99 246;
--blue-10: 7 84 216;
--blue-11: 7 84 216;
}
/* --------------------------- fundamentos --------------------------- */
#app{ background: var(--ag-bg); }
*{ -webkit-font-smoothing: antialiased; }
/* foco visível e consistente (teclado) */
#app :is(a,button,[role="tab"],[role="menuitem"],input,textarea):focus-visible{
outline: 2px solid var(--ag-blue) !important;
outline-offset: 2px !important;
border-radius: 8px;
}
/* respeita usuários com movimento reduzido */
@media (prefers-reduced-motion: reduce){
#app *, #app *::before, #app *::after{
animation: none !important;
transition: none !important;
}
}
/* barras de rolagem finas e discretas */
#app *::-webkit-scrollbar{ width: 10px; height: 10px; }
#app *::-webkit-scrollbar-thumb{
background: rgba(24,34,48,.18); border-radius: 8px;
border: 3px solid transparent; background-clip: content-box;
}
#app *::-webkit-scrollbar-thumb:hover{ background-color: rgba(24,34,48,.32); }
#app *::-webkit-scrollbar-track{ background: transparent; }
/* =================================================================
1) NAVEGAÇÃO GLOBAL — espelha o menu do AURA (webapp/static/style.css)
Valores copiados do tema ativo do AURA: gradiente navy #243345→#1B2632,
itens em #AAB7C9 com ícone #8595AB, hover branco-translúcido, e o ativo
com gradiente azul + anel interno + barra luminosa à esquerda.
================================================================= */
aside.bg-n-background{
background: linear-gradient(180deg, #243345 0%, #1B2632 100%) !important;
border-right: 1px solid #141C26 !important;
box-shadow: 1px 0 0 rgba(0,0,0,.10), 4px 0 16px rgba(0,0,0,.18) !important;
}
aside.bg-n-background > div,
aside.bg-n-background nav,
aside.bg-n-background ul,
aside.bg-n-background section{ background: transparent !important; }
/* itens: mesmas cores e tipografia do AURA */
aside.bg-n-background,
aside.bg-n-background a, aside.bg-n-background button,
aside.bg-n-background span, aside.bg-n-background p{
color: #AAB7C9 !important;
}
aside.bg-n-background svg{ color: #8595AB !important; transition: color .15s ease !important; }
aside.bg-n-background a, aside.bg-n-background button{
border-radius: 10px !important;
font-size: 13.5px !important;
font-weight: 500 !important;
transition: background .15s ease, color .15s ease, box-shadow .15s ease !important;
}
/* hover: véu branco translúcido + texto e ícone clareando (igual AURA) */
aside.bg-n-background a:hover, aside.bg-n-background button:hover{
background: rgba(255,255,255,.05) !important;
}
aside.bg-n-background a:hover, aside.bg-n-background a:hover span,
aside.bg-n-background button:hover, aside.bg-n-background button:hover span{
color: #EAF1FB !important;
}
aside.bg-n-background a:hover svg, aside.bg-n-background button:hover svg{
color: #CFE0F6 !important;
}
/* ATIVO: gradiente azul + anel interno + brilho, como no AURA */
aside.bg-n-background a[aria-current="page"],
aside.bg-n-background a[class*="active"]{
position: relative !important;
background: linear-gradient(100deg, rgba(37,99,235,.30), rgba(37,99,235,.12)) !important;
border-radius: 10px !important;
font-weight: 600 !important;
box-shadow: inset 0 0 0 1px rgba(96,165,250,.35),
0 8px 22px -10px rgba(37,99,235,.9) !important;
}
aside.bg-n-background a[aria-current="page"],
aside.bg-n-background a[aria-current="page"] span,
aside.bg-n-background a[class*="active"],
aside.bg-n-background a[class*="active"] span{ color: #FFFFFF !important; }
aside.bg-n-background a[aria-current="page"] svg,
aside.bg-n-background a[class*="active"] svg{ color: #FFFFFF !important; opacity: 1 !important; }
/* barra luminosa à esquerda do item ativo (assinatura visual do AURA) */
aside.bg-n-background a[aria-current="page"]::before,
aside.bg-n-background a[class*="active"]::before{
content: "";
position: absolute;
left: -6px; top: 50%; transform: translateY(-50%);
width: 3px; height: 22px;
border-radius: 0 3px 3px 0;
background: linear-gradient(180deg, #93B8FF, #2563EB);
box-shadow: 0 0 12px 1px rgba(96,165,250,.85);
}
/* rótulos de seção (ex.: "Times", "Canais") no padrão do AURA */
aside.bg-n-background [class*="uppercase"],
aside.bg-n-background h2, aside.bg-n-background h3{
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
color: #5E708A !important;
}
/* remove o degradê claro nativo do fim da lista (destoava do navy) */
aside.bg-n-background .bg-gradient-to-t,
aside.bg-n-background [class*="from-n-background"]{
background-image: none !important;
display: none !important;
}
/* rodapé: usuário atual, legível, com divisor sutil */
aside.bg-n-background footer,
aside.bg-n-background > section:last-of-type{
background: transparent !important;
border-top: 1px solid rgba(255,255,255,.08) !important;
}
aside.bg-n-background .text-n-slate-12{ color:#FFFFFF !important; opacity:1 !important; }
aside.bg-n-background .text-n-slate-11,
aside.bg-n-background .text-n-slate-10{ color:#93A5BE !important; opacity:1 !important; }
/* =================================================================
TOPO DO MENU — marca AGOS + botão "Novo atendimento" (verde) + rail
Tudo por CSS: sem JavaScript recriando elementos, então não pisca
nem some quando o Chatwoot redesenha a tela.
================================================================= */
/* marca: MESMA técnica do AURA — a logo oficial (1024×286) é recortada em
duas faixas da mesma imagem: "AGOS" em branco (knockout, para aparecer no
navy) e "ASSESSORIA CONTÁBIL" na cor original (dourado). */
/* escopadas: soltas, escondiam a FOTO de qualquer colaborador e o rótulo
de QUALQUER botão do menu (o cabeçalho de Times é um button) */
aside.bg-n-background > :first-child img{ display: none !important; }
aside.bg-n-background > :first-child button > span.truncate,
aside.bg-n-background div:has(> a.bg-n-button-color) button > span.truncate{ display: none !important; }
aside.bg-n-background > :first-child{
border-bottom: 1px solid rgba(255,255,255,.07) !important;
margin-bottom: 10px !important;
padding-bottom: 4px !important;
}
aside.bg-n-background .place-content-center.size-6{
display: block !important;
width: 100% !important; height: auto !important;
max-width: 138px;
}
aside.bg-n-background .place-content-center.size-6::before{
content: "";
display: block; width: 100%;
aspect-ratio: 1024 / 210;
background: url("/agos-logo.png") no-repeat top center / 100% auto;
filter: brightness(0) invert(1);
opacity: .96;
}
aside.bg-n-background .place-content-center.size-6::after{
content: "";
display: block; width: 100%;
aspect-ratio: 1024 / 76;
background: url("/agos-logo.png") no-repeat bottom center / 100% auto;
}
/* a linha do botão respeita a largura do menu (evita o verde "cortado") */
aside.bg-n-background div:has(> a.bg-n-button-color){
display: flex !important;
width: 100% !important;
padding: 0 12px 2px !important;
margin: 0 !important;
box-sizing: border-box !important;
}
/* busca "Pesquisar… ⌘K" some; o atalho continua funcionando */
aside.bg-n-background div:has(> a.bg-n-button-color) > a.bg-n-button-color{ display: none !important; }
/* o botão do lápis vira o "Novo atendimento": verde, largura total.
O wrapper externo fica neutro; só o botão MAIS INTERNO recebe o visual —
sem isso o rótulo aparecia duplicado. */
aside.bg-n-background div:has(> a.bg-n-button-color) > button{
width: 100% !important;
min-width: 0 !important;
flex: 1 1 auto !important;
box-sizing: border-box !important;
background: transparent !important;
box-shadow: none !important;
outline: 0 !important;
padding: 0 !important;
height: auto !important;
min-height: 0 !important;
}
aside.bg-n-background div:has(> a.bg-n-button-color) > button::after{ content: none !important; }
aside.bg-n-background div:has(> a.bg-n-button-color) button:not(:has(button)){
width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
padding: 0 12px !important;
height: 38px !important;
min-height: 38px !important;
justify-content: center !important;
gap: 8px !important;
border-radius: 11px !important;
background: linear-gradient(180deg, #22C55E 0%, #16A34A 55%, #12904A 100%) !important;
color: #FFFFFF !important;
outline: 1px solid rgba(255,255,255,.16) !important;
box-shadow: 0 8px 20px -10px rgba(22,163,74,.95),
inset 0 1px 0 rgba(255,255,255,.22) !important;
transition: filter .15s ease, box-shadow .15s ease, transform .12s ease !important;
}
aside.bg-n-background div:has(> a.bg-n-button-color) button:not(:has(button)) svg{ color: #FFFFFF !important; }
aside.bg-n-background div:has(> a.bg-n-button-color) button:not(:has(button))::after{
content: "Novo atendimento";
font-size: 12.5px;
font-weight: 650;
letter-spacing: .01em;
color: #FFFFFF;
white-space: nowrap;
}
aside.bg-n-background div:has(> a.bg-n-button-color) button:not(:has(button)):hover{
filter: brightness(1.06);
box-shadow: 0 10px 24px -10px rgba(22,163,74,1),
inset 0 1px 0 rgba(255,255,255,.28) !important;
}
aside.bg-n-background div:has(> a.bg-n-button-color) button:not(:has(button)):active{ transform: scale(.985); }
/* ---- botão de recolher (setinha), no padrão do AURA ---- */
#agos-sb-toggle{
position: fixed; top: 87px; left: 189px; z-index: 60;
width: 30px; height: 30px; padding: 0; border-radius: 9px;
display: flex; align-items: center; justify-content: center; cursor: pointer;
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.16);
color: #CFE0F6;
transition: left .28s ease, background .15s ease, color .15s ease;
}
#agos-sb-toggle:hover{ background: rgba(255,255,255,.14); color: #FFFFFF; }
#agos-sb-toggle svg{ width: 18px; height: 18px; display: block; transition: transform .28s ease; }
html.agos-rail #agos-sb-toggle{ left: 57px; top: 83px; }
html.agos-rail #agos-sb-toggle svg{ transform: rotate(180deg); }
/* ---- MODO RAIL: só ícones (padrão do menu recolhido do AURA) ---- */
@media (min-width: 981px){
html.agos-rail aside.bg-n-background{
width: 72px !important; min-width: 72px !important;
padding-top: 56px !important;
overflow-x: hidden !important;
}
/* TODO texto some (regra única: pega qualquer nível de aninhamento);
os ícones são SVG e não dependem de font-size */
html.agos-rail aside.bg-n-background,
html.agos-rail aside.bg-n-background *{
font-size: 0 !important;
letter-spacing: 0 !important;
}
html.agos-rail aside.bg-n-background svg{
width: 21px !important; height: 21px !important;
}
/* marca e divisória somem */
html.agos-rail aside.bg-n-background > :first-child{
border-bottom: 0 !important; margin: 0 !important; padding: 0 !important;
}
html.agos-rail aside.bg-n-background > :first-child > div:first-child{ display: none !important; }
/* contêineres perdem recuos para os ícones centralizarem de verdade */
html.agos-rail aside.bg-n-background nav,
html.agos-rail aside.bg-n-background ul,
html.agos-rail aside.bg-n-background li,
html.agos-rail aside.bg-n-background > div{
padding-left: 0 !important; padding-right: 0 !important;
margin-left: 0 !important; margin-right: 0 !important;
}
/* cada item = bloco quadrado com o ícone no centro */
html.agos-rail aside.bg-n-background a{
display: flex !important;
width: 44px !important; height: 44px !important;
margin: 3px auto !important;
padding: 0 !important;
align-items: center !important; justify-content: center !important;
border-radius: 12px !important;
}
/* submenus recolhem: no rail fica só a navegação principal */
html.agos-rail aside.bg-n-background ul ul,
html.agos-rail aside.bg-n-background li li{ display: none !important; }
/* item ATIVO: bloco com gradiente, anel e brilho (sem a barra lateral) */
html.agos-rail aside.bg-n-background a[aria-current="page"],
html.agos-rail aside.bg-n-background a[class*="active"]{
background: linear-gradient(160deg, rgba(37,99,235,.45), rgba(37,99,235,.18)) !important;
box-shadow: inset 0 0 0 1px rgba(96,165,250,.5),
0 10px 24px -12px rgba(37,99,235,1) !important;
}
html.agos-rail aside.bg-n-background a[aria-current="page"]::before,
html.agos-rail aside.bg-n-background a[class*="active"]::before{ display: none !important; }
/* botão verde vira um bloco quadrado com "+" */
html.agos-rail aside.bg-n-background div:has(> a.bg-n-button-color){
justify-content: center !important; padding: 0 0 10px !important;
}
html.agos-rail aside.bg-n-background div:has(> a.bg-n-button-color) button:not(:has(button)){
width: 44px !important; min-width: 44px !important; height: 44px !important;
margin: 0 auto !important; padding: 0 !important;
border-radius: 12px !important; justify-content: center !important;
}
html.agos-rail aside.bg-n-background div:has(> a.bg-n-button-color) button:not(:has(button))::after{
content: "+" !important;
font-size: 19px !important; font-weight: 700 !important; color: #FFFFFF !important;
line-height: 1 !important;
}
/* rodapé: só o avatar, centralizado */
html.agos-rail aside.bg-n-background > section:last-of-type{
display: flex !important; justify-content: center !important;
padding: 10px 0 !important;
}
}
/* campo de busca / botões do topo: mesmo tratamento dos controles do AURA
(fundo translúcido, borda fina, raio 11px) */
aside.bg-n-background input{
background: rgba(255,255,255,.05) !important;
border: 1px solid rgba(255,255,255,.1) !important;
border-radius: 11px !important;
color: #DCE6F4 !important;
font-size: 12.5px !important;
transition: background .15s ease, border-color .15s ease !important;
}
aside.bg-n-background input::placeholder{ color:#7E92AC !important; }
aside.bg-n-background input:hover,
aside.bg-n-background input:focus{
background: rgba(255,255,255,.08) !important;
border-color: rgba(96,165,250,.45) !important;
}
/* =================================================================
2) PAINEL DE ATENDIMENTOS (lista) — escopo: .conversations-list-wrap
Ganchos estáveis do Chatwoot: .conversations-list (scroller),
.conversation (item), .conversation.active (selecionado),
.conversation--user (nome). !important é necessário para vencer
as classes utilitárias compiladas; uso localizado apenas aqui.
================================================================= */
.conversations-list-wrap{
/* tokens locais do painel */
--q-surface: #FFFFFF;
--q-text: #182230;
--q-muted: #667085;
--q-subtle: #8A94A6;
--q-border: #E6E9EF;
--q-hover: #F8FAFC;
--q-selected: #EDF4FF;
--q-selected-hover: #E4EEFD;
--q-primary: #0B63F6;
background: var(--q-surface) !important;
border-right: 1px solid var(--q-border) !important;
}
/* largura confortável em monitores muito largos (nativo 2xl = 412px) */
@media (min-width: 1536px){
.conversations-list-wrap{ width: 360px !important; }
}
/* ---- cabeçalho ("Atendimentos" + ações) ---- */
.conversations-list-wrap [class*="h-[3.25rem]"]{
height: 64px !important;
padding-left: 20px !important;
padding-right: 14px !important;
}
.conversations-list-wrap h1{
font-size: 17px !important; /* 19px truncava o título no painel de 340px */
font-weight: 650 !important;
color: var(--q-text) !important;
letter-spacing: -0.01em;
}
/* botões de ícone: neutros, 36px, hover discreto, foco visível */
.conversations-list-wrap [class*="h-[3.25rem]"] button{
width: 36px !important; height: 36px !important;
justify-content: center !important;
background: transparent !important;
outline: none !important;
color: var(--q-muted) !important;
border-radius: 8px !important;
transition: background-color 140ms ease, color 140ms ease !important;
}
.conversations-list-wrap [class*="h-[3.25rem]"] button:hover{
background: var(--q-hover) !important;
color: var(--q-text) !important;
}
.conversations-list-wrap [class*="h-[3.25rem]"] button:focus-visible{
outline: 2px solid var(--q-primary) !important; outline-offset: 1px !important;
}
/* ---- abas (Meus · Na fila · Todos) ---- */
.conversations-list-wrap ul[class*="list-none"]{
height: 48px;
align-items: center;
padding: 0 12px !important;
border-bottom: 1px solid var(--q-border);
}
.conversations-list-wrap ul[class*="list-none"] li{
font-size: 14px !important;
color: var(--q-muted);
}
.conversations-list-wrap ul[class*="list-none"] li:hover{ color: var(--q-text); }
/* ---- itens de atendimento ----
Linha enxuta: o item somava 14px de recheio próprio + 12px do invólucro
interno (py-3) e passava de 99px de altura. Agora fica em ~68px, com o
mesmo respiro visual. */
.conversations-list .conversation{
padding: 10px 14px !important;
border-bottom: 1px solid #F1F3F7 !important; /* divisor bem discreto */
color: var(--q-muted) !important; /* prévia e horário herdam */
font-size: 13px;
transition: background-color 150ms ease !important;
}
/* invólucro do nome + prévia (âncora estável: contém o .conversation--user) */
.conversations-list .conversation > div:has(> .conversation--user){
padding-top: 1px !important;
padding-bottom: 1px !important;
}
/* prévia da mensagem, logo abaixo do nome */
.conversations-list .conversation .conversation--user + div{
font-size: 13px !important;
line-height: 1.35 !important;
margin-top: 1px !important;
}
/* horário na mesma linha do nome, agora que o item é mais baixo */
.conversations-list .conversation > div:has(> .conversation--user) > div:last-child{
top: 12px !important;
}
/* o avatar tinha 16px de recuo pensados na linha alta e ficava caído;
com 6px ele volta ao centro óptico das duas linhas de texto */
.conversations-list .conversation span[class*="avatar"]{
margin-top: 6px !important;
}
.conversations-list .conversation:hover{
background: var(--q-hover) !important;
border-bottom-color: #F1F3F7 !important;
}
/* nome do contato */
.conversations-list .conversation .conversation--user{
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1.3 !important;
padding-top: 0 !important;
color: var(--q-text) !important;
}
/* selecionado: fundo azul suave + barra de 3px, sem borda pesada */
.conversations-list .conversation.active{
background: var(--q-selected) !important;
box-shadow: inset 2px 0 0 var(--q-primary) !important;
}
.conversations-list .conversation.active:hover{
background: var(--q-selected-hover) !important;
}
.conversations-list .conversation.active .conversation--user{
font-weight: 650 !important;
}
/* foco por teclado no item */
.conversations-list .conversation:focus-visible{
outline: 2px solid var(--q-primary) !important;
outline-offset: -2px !important;
}
/* ---- fim da lista / estados vazios ---- */
.conversations-list-wrap p[class*="text-center"]{
font-size: 13px !important;
color: var(--q-subtle) !important;
padding: 20px 16px !important;
}
/* ---------------------- 3) conversa ativa -------------------------- */
/* coluna central: fundo levemente quente + conteúdo centralizado
com largura máxima de ~780px (sem tocar no DOM) */
/* Fundo do histórico: padrão de rabiscos ORIGINAL (desenhado aqui em SVG e
embutido no CSS — não usa arte de terceiros nem arquivo externo).
Dá o clima de "papel de parede de conversa" sem prejudicar a leitura. */
.conversation-panel{
background-color: #F8F6F1 !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: repeat !important;
background-size: 300px 300px !important;
padding-left: max(20px, calc((100% - 780px) / 2)) !important;
padding-right: max(20px, calc((100% - 780px) / 2)) !important;
}
/* cabeçalho da conversa: azul em degradê discreto (claro → um pouco mais
saturado), com um fio de luz no topo. Texto escuro para manter a leitura
confortável e os botões existentes sem perder contraste. */
.conversation-details-wrap > div:first-of-type{
background: linear-gradient(180deg, #F3F8FF 0%, #E4EEFD 60%, #DAE8FC 100%) !important;
border-bottom: 1px solid #C9DCF8 !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.75) !important;
}
/* nome do contato: azul-marinho, um pouco mais forte */
.conversation-details-wrap > div:first-of-type .text-n-slate-12{
color: #0B2547 !important;
font-weight: 650 !important;
}
/* ticket, canal e status: azul acinzentado */
.conversation-details-wrap > div:first-of-type .text-n-slate-11,
.conversation-details-wrap > div:first-of-type .text-n-slate-10{
color: #5A7CA8 !important;
}
.conversation-details-wrap{ background: #F8F6F1 !important; }
/* mensagens recebidas: branco, borda discreta, texto escuro */
.left-bubble{
background: var(--ag-surface) !important;
border: 1px solid var(--ag-border) !important;
border-radius: 12px 12px 12px 4px !important;
box-shadow: none !important;
}
.left-bubble, .left-bubble *{ color: var(--ag-text) !important; }
/* mensagens enviadas: azul suave de baixa saturação, texto de alto contraste.
:not([class*="amber"]) preserva as NOTAS INTERNAS, que o Chatwoot marca
em âmbar — sem isso elas ficavam azuis, iguais a uma resposta ao cliente. */
.right-bubble:not([class*="amber"]){
background: #E7F0FE !important;
border: 1px solid #D3E3FC !important;
border-radius: 12px 12px 4px 12px !important;
box-shadow: none !important;
}
.right-bubble:not([class*="amber"]),
.right-bubble:not([class*="amber"]) *{ color: #12263F !important; }
.right-bubble:not([class*="amber"]) svg{ color: var(--ag-blue) !important; }
/* ---- NOTA INTERNA: fundo âmbar + etiqueta, para não confundir com
uma mensagem enviada ao cliente ---- */
.right-bubble[class*="amber"],
.left-bubble[class*="amber"]{
background: #FFF7E3 !important;
border: 1px solid #F2D08A !important;
border-left: 4px solid #F59E0B !important;
border-radius: 10px !important;
box-shadow: none !important;
}
.right-bubble[class*="amber"], .right-bubble[class*="amber"] *,
.left-bubble[class*="amber"], .left-bubble[class*="amber"] *{
color: #6B4708 !important;
}
/* etiqueta "Observação interna" acima do texto da nota */
.right-bubble[class*="amber"]::before,
.left-bubble[class*="amber"]::before{
content: "Observação interna · só a equipe vê";
display: block;
/* o balão virou uma linha flexível (texto + selos): sem isto a
etiqueta fica LADO A LADO com o texto da nota */
flex: 1 0 100%;
order: -1;
font-size: 11px;
font-weight: 650;
letter-spacing: .02em;
text-transform: uppercase;
color: #B26A00;
margin-bottom: 6px;
}
/* eventos de sistema: timeline discreta, sem cápsulas pesadas */
.conversation-panel [class*="bg-n-alpha-1"]:not([class*="hover:bg-n-alpha-1"]){
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
.conversation-panel [class*="bg-n-alpha-1"]:not([class*="hover:bg-n-alpha-1"]) span{
color: var(--ag-text-3) !important;
font-size: 12px !important;
}
/* separadores ("Hoje", "Novas mensagens") mais leves */
.conversation-panel hr{ border-color: var(--ag-border) !important; }
/* falha de envio: legível e vinculada à mensagem */
.conversation-panel [class*="text-n-ruby-11"],
.conversation-panel [class*="text-n-ruby-9"]{
color: var(--ag-red) !important;
}
/* --------------------------- 4) composer --------------------------- */
/* painel do composer: tom levemente diferente do histórico, para separar
visualmente "ler a conversa" de "escrever a resposta" */
.reply-box,
.conversation-details-wrap [class*="reply-box"]{
background: #F4F7FB !important;
border: 1px solid #DFE5EE !important;
border-radius: 12px !important;
box-shadow: 0 2px 10px rgba(16,24,40,.06) !important;
}
/* dentro do painel, o campo de digitação é branco (parece um campo de fato) */
.reply-box .reply-box__top{
background: var(--ag-surface) !important;
border: 1px solid var(--ag-border) !important;
border-radius: 10px !important;
margin: 0 10px !important;
}
/* nota interna no composer: superfície âmbar suave.
:not(button) é essencial — sem isso o botão "Enviar" (que usa a mesma
escala âmbar) ficava creme com texto branco, ou seja, invisível. */
.reply-box [class*="bg-n-amber"]:not(button):not([role="button"]),
.reply-box [class*="bg-yellow"]:not(button):not([role="button"]){
background: #FFF8E6 !important;
}
/* modo Nota interna: o painel inteiro fica âmbar, deixando óbvio que o
texto NÃO vai para o cliente */
.reply-box:has([class*="bg-n-amber"]){
background: #FFF4DF !important;
border-color: #F2D08A !important;
}
.reply-box:has([class*="bg-n-amber"]) .reply-box__top{
background: #FFFDF6 !important;
border-color: #F0D69B !important;
}
/* botão "Enviar" no modo Nota interna: âmbar forte, texto branco legível */
.reply-box button[class*="bg-n-amber"]{
background: #B45309 !important;
color: #FFFFFF !important;
font-weight: 600 !important;
}
.reply-box button[class*="bg-n-amber"] *{ color: #FFFFFF !important; }
.reply-box button[class*="bg-n-amber"]:hover:enabled{ background: #92400E !important; }
/* desabilitado (sem texto digitado): continua visível, só mais discreto */
.reply-box button[class*="bg-n-amber"]:disabled{
opacity: 1 !important;
background: #FDE9CC !important;
color: #92400E !important;
border: 1px solid #F2D08A !important;
}
.reply-box button[class*="bg-n-amber"]:disabled *{ color: #92400E !important; }
/* --------------------- 5) painel de detalhes ----------------------- */
[class*="conversation--details"],
[class*="contact--panel"],
[class*="conversation-sidebar"]{
background: var(--ag-surface) !important;
border-left: 1px solid var(--ag-border) !important;
}
[class*="conversation--details"] h3,
[class*="contact--panel"] h3{
font-size: 13px !important; font-weight: 600 !important;
color: var(--ag-text-2) !important;
}
/* "Resolver": ação principal do cabeçalho, azul dominante (split button) */
.header-actions-wrap [class*="rounded-r-none"],
.header-actions-wrap [class*="rounded-l-none"]{
background: var(--ag-blue) !important;
transition: background-color 140ms ease !important;
}
.header-actions-wrap [class*="rounded-r-none"],
.header-actions-wrap [class*="rounded-r-none"] *,
.header-actions-wrap [class*="rounded-l-none"],
.header-actions-wrap [class*="rounded-l-none"] *{
color: #FFFFFF !important;
}
.header-actions-wrap [class*="rounded-r-none"]:hover,
.header-actions-wrap [class*="rounded-l-none"]:hover{
background: var(--ag-blue-hover) !important;
}
/* ------------------------- refinamentos ---------------------------- */
/* superfícies gerais fora da conversa.
As exceções são essenciais: o histórico usa a mesma classe utilitária e
sem elas esta regra apagava o papel de parede do painel de mensagens. */
main .bg-n-surface-1:not(.conversation-panel):not(.conversation-details-wrap){
background: var(--ag-surface) !important;
}
/* botões primários herdam o azul recalibrado; garante hover coerente */
#app button[class*="bg-n-blue"]:hover{ filter: brightness(.96); }
/* tooltips/menus: sombra discreta */
#app [role="menu"], #app [data-radix-popper-content-wrapper] > *{
box-shadow: 0 8px 24px rgba(16,24,40,.10), 0 2px 6px rgba(16,24,40,.06) !important;
border: 1px solid var(--ag-border) !important;
}
/* ---- Chavinha "Abertos / Todos" substitui o filtro avançado ----
O funil abria um construtor de filtros (atributo/operador/valor) que a
equipe não usa; a chavinha entrega as duas únicas opções necessárias. */
/* esconde os botões de filtro e ordenação do cabeçalho (a busca e a
chavinha fazem esse papel). Mira pelo ÍCONE, que é estável. */
.conversations-list-wrap button:has(.i-lucide-list-filter),
.conversations-list-wrap button:has(.i-lucide-arrow-up-down),
.conversations-list-wrap button:has(.i-lucide-arrow-right-to-line){ display: none !important; }
.conversations-list-wrap h1 + span{ display: none !important; } /* chip "Abertos" */
.conversations-list-wrap ul[class*="list-none"]{ padding-right: 10px !important; }
#agos-status-switch button:hover{ background: rgba(255,255,255,.7) !important; }
#agos-status-switch button:focus-visible{ outline: 2px solid #0B63F6 !important; outline-offset: 1px !important; }
/* a chavinha não pode herdar o tamanho fixo (36x36) dos ícones do cabeçalho */
.conversations-list-wrap #agos-status-switch{ height: auto !important; }
.conversations-list-wrap #agos-status-switch button{
width: auto !important;
height: auto !important;
min-height: 26px !important;
padding: 5px 12px !important;
border-radius: 7px !important;
justify-content: center !important;
font-size: 12px !important;
}
/* abas maiores e mais legíveis (padrão de referência da AGOS) */
.conversations-list-wrap ul[class*="list-none"]{ height: 46px !important; }
.conversations-list-wrap ul[class*="list-none"] li{
font-size: 14.5px !important;
font-weight: 500 !important;
padding: 0 2px !important;
}
.conversations-list-wrap ul[class*="list-none"] li a,
.conversations-list-wrap ul[class*="list-none"] li button{ font-size: 14.5px !important; }
/* a setinha fica "sentada" sobre a divisória: fundo do menu ao redor dela */
#agos-sb-toggle{
background: #2A3849 !important;
border: 1px solid rgba(255,255,255,.22) !important;
box-shadow: 0 2px 8px rgba(8,15,30,.35) !important;
color: #DCE6F4 !important;
}
#agos-sb-toggle:hover{ background: #34455A !important; color: #FFFFFF !important; }
/* ---- topo do menu: espaçamento e alinhamento profissionais ---- */
aside.bg-n-background > :first-child{
margin-top: 0 !important;
padding: 26px 0 20px !important; /* respiro no topo */
gap: 22px !important; /* separa a logo do botão */
margin-bottom: 12px !important;
}
/* linha da marca: logo centralizada, sem separadores soltos */
aside.bg-n-background > :first-child > div:first-child{
justify-content: center !important;
padding: 0 16px !important;
gap: 0 !important;
}
/* na linha da marca mantemos só a logo; o traço e o nome da conta saem */
aside.bg-n-background > :first-child > div:first-child > div:not(.place-content-center){
display: none !important;
}
/* a logo respira e fica centrada */
aside.bg-n-background .place-content-center.size-6{
margin: 0 auto !important;
max-width: 142px !important;
}
/* botão verde alinhado à mesma margem da logo */
aside.bg-n-background div:has(> a.bg-n-button-color){
padding: 0 16px !important;
}
/* traço vertical de 1px que ficava solto ao lado da logo */
aside.bg-n-background .w-px.h-3{ display: none !important; }
/* botão "Novo atendimento": proporção e altura confortáveis */
aside.bg-n-background div:has(> a.bg-n-button-color) button:not(:has(button)){
height: 42px !important;
min-height: 42px !important;
border-radius: 12px !important;
letter-spacing: .01em !important;
}
/* ---- botão "Novo atendimento": o Chatwoot embrulha em , então
garantimos largura no invólucro e o visual verde no botão ---- */
aside.bg-n-background div:has(> a.bg-n-button-color) > span{
width: 100% !important;
flex: 1 1 auto !important;
}
aside.bg-n-background div:has(> a.bg-n-button-color) button{
width: 100% !important;
height: 42px !important;
min-height: 42px !important;
justify-content: center !important;
gap: 8px !important;
border-radius: 12px !important;
background: linear-gradient(180deg, #22C55E 0%, #16A34A 55%, #12904A 100%) !important;
color: #FFFFFF !important;
outline: 1px solid rgba(255,255,255,.16) !important;
box-shadow: 0 8px 20px -10px rgba(22,163,74,.95),
inset 0 1px 0 rgba(255,255,255,.22) !important;
}
aside.bg-n-background div:has(> a.bg-n-button-color) button svg{ color: #FFFFFF !important; }
aside.bg-n-background div:has(> a.bg-n-button-color) button::after{
content: "Novo atendimento";
font-size: 12.5px; font-weight: 650; color: #FFFFFF; white-space: nowrap;
}
/* =================================================================
BARRA SUPERIOR — o menu lateral vira uma barra no topo (estilo do
painel de referência). Só no desktop; abaixo de 768px o Chatwoot já
usa seu próprio layout compacto e não mexemos nele.
================================================================= */
@media (min-width: 768px){
/* a coluna [menu | conteúdo] passa a ser [barra / conteúdo] */
div:has(> aside.bg-n-background){ flex-direction: column !important; }
aside.bg-n-background{
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
height: 58px !important;
min-height: 58px !important;
flex-direction: row !important;
align-items: center !important;
gap: 6px !important;
padding: 0 14px !important;
overflow: visible !important;
border-right: 0 !important;
border-bottom: 1px solid #141C26 !important;
background: linear-gradient(90deg, #243345 0%, #1B2632 100%) !important;
box-shadow: 0 2px 10px rgba(0,0,0,.18) !important;
}
/* marca à esquerda, compacta */
aside.bg-n-background > :first-child{
display: flex !important;
flex-direction: row !important;
align-items: center !important;
flex: 0 0 auto !important;
gap: 12px !important;
margin: 0 10px 0 0 !important;
padding: 0 !important;
border-bottom: 0 !important;
}
aside.bg-n-background .place-content-center.size-6{ max-width: 104px !important; }
/* botão "Novo atendimento" compacto, ao lado da marca */
aside.bg-n-background div:has(> a.bg-n-button-color){ padding: 0 !important; flex: 0 0 auto !important; }
aside.bg-n-background div:has(> a.bg-n-button-color) > span{ width: auto !important; }
aside.bg-n-background div:has(> a.bg-n-button-color) button{
width: auto !important;
height: 36px !important; min-height: 36px !important;
padding: 0 14px !important;
}
/* navegação em linha, com rolagem horizontal se faltar espaço */
aside.bg-n-background nav{
display: flex !important;
flex: 1 1 auto !important;
min-width: 0 !important;
padding: 0 !important;
overflow-x: auto !important;
overflow-y: visible !important;
}
aside.bg-n-background nav::-webkit-scrollbar{ height: 0 !important; }
aside.bg-n-background nav > ul{
flex-direction: row !important;
align-items: center !important;
gap: 2px !important;
flex-wrap: nowrap !important;
}
aside.bg-n-background nav > ul > li{ position: relative !important; flex: 0 0 auto !important; }
/* itens do primeiro nível: ícone + rótulo, iguais entre si.
Alguns itens (Notificações, Chamadas) são e outros são ;
antes só o
era tratado, e ele ficava como um quadrado vazio. */
aside.bg-n-background nav > ul > li > a,
aside.bg-n-background nav > ul > li > button{
display: flex !important;
width: auto !important; height: 32px !important;
padding: 4px 6px !important;
gap: 8px !important;
align-items: center !important; justify-content: flex-start !important;
border-radius: 10px !important;
}
aside.bg-n-background nav svg{ width: 21px !important; height: 21px !important; }
/* a setinha só aparece no item aberto e mudava a largura dele ao trocar
de página — na barra ela sai e a posição dos menus fica fixa */
aside.bg-n-background nav > ul > li > * > span[class*="chevron"]{ display: none !important; }
/* item ativo sem a barra lateral (não faz sentido na horizontal) */
aside.bg-n-background nav a[aria-current="page"]::before,
aside.bg-n-background nav a[class*="active"]::before{ display: none !important; }
/* submenus viram menus suspensos */
aside.bg-n-background nav > ul > li > ul{
position: absolute !important;
top: calc(100% + 8px) !important;
left: 0 !important;
min-width: 216px !important;
flex-direction: column !important;
padding: 6px !important;
background: #22303F !important;
border: 1px solid rgba(255,255,255,.12) !important;
border-radius: 12px !important;
box-shadow: 0 16px 36px rgba(0,0,0,.38) !important;
z-index: 60 !important;
display: none !important;
}
aside.bg-n-background nav ul ul a{
width: auto !important; height: 38px !important;
justify-content: flex-start !important;
padding: 0 10px !important;
font-size: 13px !important;
}
aside.bg-n-background nav ul ul a > div{ display: block !important; }
/* no menu lateral os subitens eram uma "árvore" recuada, com um traço
vertical de guia. Dentro do menu suspenso isso vira um risco solto:
tira-se o recuo e o traço. */
aside.bg-n-background nav > ul > li > ul > li{
margin-inline-start: 0 !important;
padding-inline-start: 0 !important;
}
aside.bg-n-background nav ul ul > li::before,
aside.bg-n-background nav ul ul > li::after{ content: none !important; display: none !important; }
/* usuário à direita */
aside.bg-n-background > section:last-of-type{
margin-left: auto !important;
flex: 0 0 auto !important;
flex-direction: row !important;
align-items: center !important;
padding: 0 !important;
border-top: 0 !important;
}
/* esconde só os textos (nome/e-mail) DO BOTÃO; o avatar é um e fica.
Nunca alcança o menu suspenso, que fica em outro ramo. */
aside.bg-n-background > section:last-of-type > div > div > button p{ display: none !important; }
/* conteúdo ocupa o restante da altura */
div:has(> aside.bg-n-background) > main{ flex: 1 1 auto !important; min-height: 0 !important; }
/* o botão de recolher perde a função na barra horizontal */
#agos-sb-toggle{ display: none !important; }
}
/* ---- ajustes finos da barra superior ---- */
@media (min-width: 768px){
/* a logo precisa de largura própria: na horizontal o flex a comprimia a zero */
aside.bg-n-background > :first-child > div:first-child{
flex: 0 0 auto !important;
padding: 0 !important;
width: auto !important;
}
aside.bg-n-background .place-content-center.size-6{
width: 104px !important;
flex: 0 0 104px !important;
max-width: 104px !important;
}
/* bloco do usuário: compacto no canto direito, sem transbordar */
aside.bg-n-background > section:last-of-type{
width: auto !important;
max-width: 220px !important;
justify-content: center !important;
}
aside.bg-n-background > section:last-of-type > div{ width: auto !important; }
aside.bg-n-background > section:last-of-type > div > div{ width: auto !important; }
/* o degradê decorativo do rodapé não faz sentido na barra */
aside.bg-n-background > section:last-of-type > div:first-child{ display: none !important; }
}
@media (min-width: 768px){
/* a seção da marca tinha largura fixa de menu lateral: na horizontal
ela precisa acompanhar o conteúdo, senão o botão sobrepõe a logo */
aside.bg-n-background > :first-child{
width: auto !important;
max-width: none !important;
flex: 0 0 auto !important;
gap: 18px !important;
margin: 0 22px 0 0 !important;
}
aside.bg-n-background > :first-child > div{
width: auto !important;
flex: 0 0 auto !important;
min-width: 0 !important;
}
/* linha branca decorativa do antigo rodapé não aparece na barra */
aside.bg-n-background > section:last-of-type{ border-top: 0 !important; }
}
@media (min-width: 768px){
/* o botão herdava a largura do antigo menu lateral (281px) e invadia o
menu; na barra ele tem largura própria */
aside.bg-n-background div:has(> a.bg-n-button-color),
aside.bg-n-background div:has(> a.bg-n-button-color) > span{
width: auto !important;
max-width: none !important;
flex: 0 0 auto !important;
}
aside.bg-n-background div:has(> a.bg-n-button-color) button{
width: auto !important;
max-width: 190px !important;
flex: 0 0 auto !important;
padding: 0 16px !important;
}
}
@media (min-width: 768px){
/* submenu abre também no clique (classe posta pelo agos-rail.js) */
aside.bg-n-background nav > ul > li.agos-open > ul{ display: flex !important; }
/* seta do item que tem submenu fica visível para indicar que abre */
aside.bg-n-background nav > ul > li:has(> ul) > a::after,
aside.bg-n-background nav > ul > li:has(> ul) > button::after{
content: "";
position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
width: 4px; height: 4px; border-radius: 50%;
background: rgba(207,224,246,.55);
}
aside.bg-n-background nav > ul > li > a,
aside.bg-n-background nav > ul > li > button{ position: relative !important; }
}
@media (min-width: 768px){
/* CAUSA DO SUBMENU INVISÍVEL: com overflow-x:auto o navegador força
overflow-y:auto, e a barra recortava o menu suspenso. Sem rolagem,
o submenu aparece por cima normalmente. */
aside.bg-n-background nav{ overflow: visible !important; }
aside.bg-n-background{ overflow: visible !important; }
aside.bg-n-background nav > ul{ flex-wrap: nowrap !important; overflow: visible !important; }
aside.bg-n-background nav > ul > li > ul{
z-index: 200 !important;
/* menus longos (Configurações) rolam em vez de sair da tela */
max-height: calc(100vh - 84px) !important;
overflow-y: auto !important;
}
}
/* telas mais estreitas: itens ficam só com ícone para tudo caber.
O rótulo mora sempre em um div .flex-grow — é ele que sai; o ícone
fica em um div .relative, que permanece. */
@media (min-width: 768px) and (max-width: 1180px){
aside.bg-n-background nav > ul > li > a,
aside.bg-n-background nav > ul > li > button,
aside.bg-n-background nav > ul > li > div:first-child{
width: 42px !important;
padding: 0 !important;
justify-content: center !important;
}
aside.bg-n-background nav > ul > li > a > div.flex-grow,
aside.bg-n-background nav > ul > li > button > div.flex-grow,
aside.bg-n-background nav > ul > li > div > div.flex-grow,
aside.bg-n-background nav > ul > li > div > span[class*="chevron"]{ display: none !important; }
}
@media (min-width: 768px){
/* submenu sem itens não deve aparecer como uma barra vazia */
aside.bg-n-background nav > ul > li.agos-open > ul:empty{ display: none !important; }
}
@media (min-width: 768px){
/* ---- usuário: só o ícone, ancorado à direita ----
O bloco tinha nome + e-mail, e a largura variava conforme o texto,
fazendo a barra "andar" ao trocar de página. Agora tem largura fixa
e fica colado na direita; clicando abre o menu completo do Chatwoot. */
aside.bg-n-background > section:last-of-type{
width: 56px !important;
min-width: 56px !important;
max-width: 56px !important;
flex: 0 0 56px !important;
margin-left: auto !important;
align-items: center !important;
justify-content: center !important;
}
aside.bg-n-background > section:last-of-type > div{
width: 56px !important; padding: 0 !important; justify-content: center !important;
}
aside.bg-n-background > section:last-of-type .relative.space-y-2{
width: 56px !important; margin: 0 !important;
}
/* SÓ o botão que abre o menu (filho direto do bloco), nunca os itens
de dentro do menu suspenso — eles são botões/links mais fundos. */
aside.bg-n-background > section:last-of-type > div > div > button{
width: 44px !important; height: 44px !important;
padding: 0 !important; margin: 0 auto !important;
justify-content: center !important;
border-radius: 12px !important;
}
/* nome e e-mail saem; sobra o avatar */
aside.bg-n-background > section:last-of-type > div > div > button > div{ display: none !important; }
aside.bg-n-background > section:last-of-type > div > div > button > span{
width: 32px !important; height: 32px !important;
flex: 0 0 32px !important;
}
/* ---- barra estável: menus encostados no ícone do usuário, à direita ---- */
aside.bg-n-background nav{
justify-content: flex-end !important;
padding-right: 8px !important;
}
aside.bg-n-background nav > ul{
margin-left: auto !important;
margin-right: 0 !important;
}
}
@media (min-width: 768px){
/* menu do usuário: era desenhado para o rodapé do menu lateral, então
abria para CIMA e sumia acima da barra. Na horizontal ele desce. */
aside.bg-n-background > section:last-of-type div.absolute.z-50.w-80{
bottom: auto !important;
top: calc(100% + 10px) !important;
left: auto !important;
right: 0 !important;
margin: 0 !important;
/* cartão escuro, igual aos menus suspensos da barra: sem ele o menu
ficava transparente sobre a área branca e os textos sumiam */
background: #22303F !important;
border: 1px solid rgba(255,255,255,.12) !important;
border-radius: 12px !important;
box-shadow: 0 18px 40px rgba(0,0,0,.42) !important;
padding: 6px !important;
overflow: hidden !important;
}
aside.bg-n-background > section:last-of-type div.absolute.z-50.w-80 a:not([class*="ruby"]),
aside.bg-n-background > section:last-of-type div.absolute.z-50.w-80 span:not([class*="ruby"]):not([class*="i-lucide"]),
aside.bg-n-background > section:last-of-type div.absolute.z-50.w-80 div:not([class*="ruby"]):not([class*="bg-"]){
color: #E7EEF8 !important;
}
aside.bg-n-background > section:last-of-type div.absolute.z-50.w-80 li > a:hover,
aside.bg-n-background > section:last-of-type div.absolute.z-50.w-80 li > button:hover{
background: rgba(255,255,255,.08) !important;
border-radius: 8px !important;
}
/* divisórias claras não aparecem no escuro */
aside.bg-n-background > section:last-of-type div.absolute.z-50.w-80 [class*="border-"]{
border-color: rgba(255,255,255,.10) !important;
}
}
@media (min-width: 768px){
/* avatar do usuário sempre visível, tamanho fixo */
aside.bg-n-background > section:last-of-type > div > div > button > span{
display: inline-flex !important;
width: 32px !important; height: 32px !important;
flex: 0 0 32px !important;
}
aside.bg-n-background > section:last-of-type > div > div > button > span > *{
display: inline-flex !important;
width: 32px !important; height: 32px !important;
}
/* pontinho de status fica pequeno no canto */
aside.bg-n-background > section:last-of-type > div > div > button > span > .absolute{
width: 10px !important; height: 10px !important;
display: block !important;
}
}
/* =================================================================
ESTADO VAZIO DA FILA (bloco .agos-empty-state, montado por
agos-empty.js). Tudo escopado sob a classe própria: nenhum seletor
genérico de button/svg/h2/p/span e nenhum outro estado vazio do
Chatwoot é afetado.
================================================================= */
.agos-empty-state{
--agos-empty-bg: #FAFBFC;
--agos-empty-surface: #FFFFFF;
--agos-empty-text: #172033;
--agos-empty-secondary: #5F6B7C;
--agos-empty-muted: #7A8699;
--agos-empty-border: #E1E6ED;
--agos-empty-focus: #176BFF;
--agos-empty-gold: #C5A85A;
--agos-empty-success: #23A36D;
box-sizing: border-box;
width: calc(100% - 48px);
max-width: 560px;
max-height: 100%;
overflow-y: auto;
margin: 0 auto;
padding: 8px 0 4px;
text-align: center;
transform: translateY(-4%);
font-family: inherit;
}
.agos-empty-state *{ box-sizing: border-box; }
/* o Chatwoot pinta o invólucro com a utilitária .bg-n-surface-1; o
!important está só nestes dois seletores exatos porque a regra
utilitária compilada tem a mesma especificidade e venceria. */
.conversation-details-wrap:has(.agos-empty-state){
background: var(--agos-empty-bg, #FAFBFC) !important;
}
.conversation-details-wrap:has(.agos-empty-state) .bg-n-surface-1{
background: transparent !important;
}
/* o estado original continua no DOM, apenas oculto enquanto o nosso vive */
.agos-empty-original-oculto{ display: none !important; }
/* ---- ícone ---- */
.agos-empty-state__icon{
width: 96px; height: 96px;
margin: 0 auto;
display: flex; align-items: center; justify-content: center;
background: var(--agos-empty-surface);
border: 1px solid var(--agos-empty-border);
border-radius: 18px;
box-shadow: 0 1px 2px rgba(23,32,51,.04);
color: var(--agos-empty-text);
}
.agos-empty-state__glyph{ width: 64px; height: 64px; display: block; }
/* ---- selo "FILA EM DIA" ---- */
.agos-empty-state__status{
margin: 20px 0 0;
display: flex; align-items: center; justify-content: center; gap: 8px;
font-size: 11px; font-weight: 600;
letter-spacing: .14em; text-transform: uppercase;
color: var(--agos-empty-secondary);
}
.agos-empty-state__dot{
width: 8px; height: 8px; border-radius: 50%;
background: var(--agos-empty-success);
flex: 0 0 8px;
}
/* ---- título e descrição ---- */
.agos-empty-state__title{
margin: 10px 0 0;
font-size: 28px; font-weight: 620; line-height: 1.2;
color: var(--agos-empty-text);
letter-spacing: -.2px;
}
.agos-empty-state__description{
margin: 12px auto 0;
max-width: 500px;
font-size: 15px; line-height: 1.5; font-weight: 400;
color: var(--agos-empty-secondary);
}
/* ---- ação ---- */
.agos-empty-state__action{
margin: 24px auto 0;
height: 42px; padding: 0 19px;
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
background: var(--agos-empty-surface);
border: 1px solid #D7DDE6;
border-radius: 10px;
font-family: inherit; font-size: 14px; font-weight: 600;
color: var(--agos-empty-text);
cursor: pointer;
box-shadow: 0 1px 2px rgba(23,32,51,.05);
transition: background-color .15s ease, border-color .15s ease;
}
.agos-empty-state__arrow{
width: 16px; height: 16px; flex: 0 0 16px;
transition: transform .15s ease;
}
.agos-empty-state__action:hover{ background: #F8FAFC; border-color: #C7D0DC; }
.agos-empty-state__action:hover .agos-empty-state__arrow{ transform: translateX(2px); }
.agos-empty-state__action:active{ background: #F1F5F9; box-shadow: none; }
.agos-empty-state__action:focus-visible{
outline: 2px solid var(--agos-empty-focus);
outline-offset: 2px;
}
/* ---- atalhos ---- */
.agos-empty-state__utilities{
margin: 32px auto 0;
padding-top: 22px;
max-width: 520px;
border-top: 1px solid #E6E9EF;
display: flex; align-items: center; justify-content: center;
flex-wrap: wrap; gap: 10px 16px;
}
.agos-empty-state__hint{
display: inline-flex; align-items: center; gap: 6px;
font-size: 12px; color: var(--agos-empty-secondary);
}
.agos-empty-state__hint-label{ margin-left: 4px; }
.agos-empty-state__key{
min-width: 26px; height: 30px; padding: 0 8px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--agos-empty-surface);
border: 1px solid var(--agos-empty-border);
border-radius: 7px;
font-family: inherit; font-size: 12px; font-weight: 500;
color: var(--agos-empty-text);
line-height: 1;
}
.agos-empty-state__separator{
width: 1px; height: 20px;
background: var(--agos-empty-border);
}
/* ---- atualização ---- */
.agos-empty-state__updated{
margin: 18px 0 0;
display: flex; align-items: center; justify-content: center; gap: 7px;
font-size: 12px; color: var(--agos-empty-muted);
}
.agos-empty-state__refresh{ width: 14px; height: 14px; flex: 0 0 14px; }
.agos-empty-state__updated[hidden]{ display: none; }
/* ---- responsivo ---- */
@media (max-width: 1199px){
.agos-empty-state__title{ font-size: 26px; }
.agos-empty-state__description{ max-width: 460px; }
}
@media (max-width: 767px){
.agos-empty-state{ width: 100%; padding-left: 24px; padding-right: 24px; transform: none; }
.agos-empty-state__icon{ width: 84px; height: 84px; border-radius: 16px; }
.agos-empty-state__glyph{ width: 56px; height: 56px; }
.agos-empty-state__title{ font-size: 24px; }
.agos-empty-state__description{ font-size: 14px; }
.agos-empty-state__action{ width: 100%; max-width: 320px; }
.agos-empty-state__separator{ display: none; }
}
@media (prefers-reduced-motion: reduce){
.agos-empty-state__action,
.agos-empty-state__arrow{ transition: none; }
.agos-empty-state__action:hover .agos-empty-state__arrow{ transform: none; }
}
/* o nome do contato tem prioridade: quem encolhe é a etiqueta da empresa */
.conversation-details-wrap > div:first-of-type span:has(+ .agos-empresa-tag){
flex: 0 0 auto !important;
max-width: 260px;
}
/* empresa vinculada, ao lado do nome do contato no cabeçalho */
.agos-empresa-tag{
flex: 0 1 auto;
min-width: 0;
max-width: 300px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 13px;
font-weight: 500;
color: #4A5B72;
letter-spacing: .1px;
}
/* lápis discreto para editar as empresas, ao lado do nome do contato */
.agos-empresa-editar{
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
padding: 0;
margin-left: 2px;
border: 0;
background: transparent;
border-radius: 6px;
color: #A3ADBC;
cursor: pointer;
opacity: .75;
transition: color 140ms ease, background-color 140ms ease, opacity 140ms ease;
}
.agos-empresa-editar svg{ width: 14px; height: 14px; }
.agos-empresa-editar:hover{
color: #0B63F6;
background: rgba(11,99,246,.08);
opacity: 1;
}
.agos-empresa-editar:focus-visible{
outline: 2px solid #0B63F6;
outline-offset: 1px;
opacity: 1;
}
/* =================================================================
SUBMENUS COMPLETOS NA BARRA SUPERIOR
No menu lateral original, cada seção é uma sanfona: quando está
recolhida, o Chatwoot esconde os subitens com style="display:none"
(v-show do Vue) e deixa só o item ativo. Na barra horizontal o menu
suspenso JÁ É a expansão — então, enquanto ele está aberto, todos os
itens precisam aparecer. O !important é obrigatório aqui: só ele
vence um estilo inline.
================================================================= */
@media (min-width: 768px){
aside.bg-n-background nav > ul > li.agos-open > ul > li{
display: list-item !important;
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
}
/* itens que são sub-seções (Times, Canais) mantêm o empilhamento */
aside.bg-n-background nav > ul > li.agos-open > ul > li:has(> ul){
display: flex !important;
flex-direction: column !important;
}
aside.bg-n-background nav > ul > li.agos-open > ul > li > *{
height: auto !important;
}
/* cabeçalho das sub-seções (Times, Canais) também vem com display:none */
aside.bg-n-background nav > ul > li.agos-open > ul > li:has(> ul) > div{
display: flex !important;
}
aside.bg-n-background nav > ul > li.agos-open > ul > li:has(> ul) > ul{
display: block !important;
}
/* rótulo das sub-seções em caixa alta discreta, como no menu original */
aside.bg-n-background nav > ul > li.agos-open > ul > li:has(> ul) > div{
padding: 8px 10px 4px !important;
font-size: 10.5px !important;
letter-spacing: .1em !important;
text-transform: uppercase !important;
color: #7C8CA5 !important;
}
}
/* =================================================================
SINO DE NOTIFICAÇÕES — o item "Notificações" vira um ícone de sino
ancorado à direita, colado ao ícone do usuário. O glifo é trocado
pela mesma técnica do Chatwoot (máscara CSS), então ele acompanha
cor, tamanho e estados sem nenhuma imagem externa.
================================================================= */
@media (min-width: 768px){
aside.bg-n-background nav > ul > li:first-child{
order: 99 !important;
margin-left: 12px !important;
}
aside.bg-n-background nav > ul > li:first-child > a{
position: relative !important;
width: 38px !important;
height: 38px !important;
padding: 0 !important;
gap: 0 !important;
justify-content: center !important;
border-radius: 10px !important;
}
/* o rótulo sai; fica só o ícone */
aside.bg-n-background nav > ul > li:first-child > a > div.flex-grow{
display: none !important;
}
/* bandeja -> sino */
aside.bg-n-background nav > ul > li:first-child span[class*="i-lucide"]{
width: 19px !important;
height: 19px !important;
-webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.268 21a2 2 0 0 0 3.464 0'/%3E%3Cpath d='M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.268 21a2 2 0 0 0 3.464 0'/%3E%3Cpath d='M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326'/%3E%3C/svg%3E");
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
}
/* contador vermelho no canto do sino */
aside.bg-n-background nav > ul > li:first-child > a[data-agos-badge]::after{
content: attr(data-agos-badge);
position: absolute;
top: 1px;
right: 0;
transform: translate(3px, -3px);
min-width: 15px;
height: 15px;
padding: 0 3.5px;
box-sizing: border-box;
border-radius: 8px;
background: #E5484D;
color: #FFFFFF !important;
font-size: 9.5px;
font-weight: 700;
line-height: 15px;
text-align: center;
letter-spacing: 0;
box-shadow: 0 0 0 2px #223040;
}
/* com notificação: o sino ganha destaque e um anel que pulsa devagar */
aside.bg-n-background nav > ul > li.agos-tem-notificacao > a{
background: rgba(229,72,77,.12) !important;
}
aside.bg-n-background nav > ul > li.agos-tem-notificacao span[class*="i-lucide"]{
background-color: #FF8A8D !important;
}
aside.bg-n-background nav > ul > li.agos-tem-notificacao > a::before{
content: "";
position: absolute;
inset: 0;
border-radius: 10px;
box-shadow: 0 0 0 0 rgba(229,72,77,.55);
animation: agos-pulso-sino 2.4s ease-out infinite;
pointer-events: none;
}
}
@keyframes agos-pulso-sino{
0% { box-shadow: 0 0 0 0 rgba(229,72,77,.50); }
70% { box-shadow: 0 0 0 10px rgba(229,72,77,0); }
100% { box-shadow: 0 0 0 0 rgba(229,72,77,0); }
}
@media (prefers-reduced-motion: reduce){
aside.bg-n-background nav > ul > li.agos-tem-notificacao > a::before{ animation: none; }
}
/* =================================================================
"NOVO ATENDIMENTO" — sai da barra do topo e passa a ficar na
coluna da lista, na mesma linha do título e acima da busca,
encostado na borda direita da coluna.
================================================================= */
@media (min-width: 768px){
/* só existe na tela de atendimentos: em Notificações, Contatos etc.
ele ficava flutuando por cima do conteúdo da coluna da esquerda */
#app:not(:has(.conversations-list-wrap)) aside.bg-n-background div:has(> a.bg-n-button-color){
display: none !important;
}
#app:has(.conversations-list-wrap) aside.bg-n-background div:has(> a.bg-n-button-color){
position: fixed !important;
top: 73px !important;
left: auto !important;
right: calc(100% - 327px) !important;
width: auto !important;
z-index: 40 !important;
margin: 0 !important;
padding: 0 !important;
}
aside.bg-n-background div:has(> a.bg-n-button-color) button,
aside.bg-n-background div:has(> a.bg-n-button-color) button:not(:has(button)){
height: 34px !important;
min-height: 34px !important;
max-height: 34px !important;
padding: 0 14px !important;
font-size: 13px !important;
border-radius: 9px !important;
box-shadow: 0 2px 6px rgba(22,155,98,.28) !important;
}
aside.bg-n-background div:has(> a.bg-n-button-color) button svg,
aside.bg-n-background div:has(> a.bg-n-button-color) button [class*="i-lucide"]{
width: 15px !important; height: 15px !important;
}
/* a marca ocupa sozinha o começo da barra */
aside.bg-n-background > :first-child{ margin-right: 8px !important; }
}
/* resquícios da "árvore" do menu lateral dentro dos suspensos */
@media (min-width: 768px){
aside.bg-n-background nav ul ul li::before,
aside.bg-n-background nav ul ul li::after{ content: none !important; }
aside.bg-n-background nav ul ul ul{
border-left: 0 !important;
margin-inline-start: 0 !important;
padding-inline-start: 0 !important;
}
aside.bg-n-background nav > ul > li.agos-open > ul{ padding-bottom: 8px !important; }
}
/* =================================================================
LISTAS DE TERCEIRO NÍVEL (times e canais, dentro do suspenso)
Elas NÃO são um segundo cartão: são apenas uma lista simples
dentro do cartão que já está aberto. Sem isso herdavam fundo,
borda, sombra, rolagem e largura própria — era o traço solto,
a barra estranha e o quadrado branco no canto.
================================================================= */
@media (min-width: 768px){
aside.bg-n-background nav > ul > li > ul ul{
position: static !important;
display: block !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
max-height: none !important;
overflow: visible !important;
margin: 0 !important;
padding: 0 0 0 8px !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
z-index: auto !important;
inset: auto !important;
}
aside.bg-n-background nav > ul > li > ul ul li{
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
}
/* conectores em "L" da árvore do menu lateral (desenhados em ::before/::after
dos cabeçalhos de sub-seção e das sublistas). Dentro do suspenso viram
traços soltos no meio do cartão. */
@media (min-width: 768px){
aside.bg-n-background nav > ul > li > ul button::before,
aside.bg-n-background nav > ul > li > ul button::after,
aside.bg-n-background nav > ul > li > ul ul::before,
aside.bg-n-background nav > ul > li > ul ul::after,
aside.bg-n-background nav > ul > li > ul div::before,
aside.bg-n-background nav > ul > li > ul div::after{
content: none !important;
}
}
/* =================================================================
GRADE ÚNICA DO CARTÃO SUSPENSO
Medido antes: o texto começava em 4 posições diferentes (41, 25, 23
e 47px) e as alturas variavam entre 20, 32 e 34px — daí a sensação
de "tudo fora de alinhamento". Aqui todas as linhas passam a usar
a mesma grade: ícone em 17px, texto em 41px, linha de 34px.
================================================================= */
@media (min-width: 768px){
aside.bg-n-background nav > ul > li > ul{
min-width: 252px !important;
width: max-content !important;
max-width: 300px !important;
padding: 6px !important;
}
/* toda linha clicável do cartão, em qualquer nível */
aside.bg-n-background nav > ul > li > ul a,
aside.bg-n-background nav > ul > li > ul button{
display: flex !important;
align-items: center !important;
gap: 8px !important;
width: 100% !important;
height: 34px !important;
min-height: 34px !important;
padding: 0 10px !important;
margin: 0 !important;
border-radius: 8px !important;
font-size: 13px !important;
line-height: 1.2 !important;
box-sizing: border-box !important;
text-align: left !important;
}
/* ícone sempre no mesmo trilho */
aside.bg-n-background nav > ul > li > ul span[class*="i-lucide"]:not([class*="chevron"]),
aside.bg-n-background nav > ul > li > ul span[class*="i-ri"]{
width: 16px !important;
height: 16px !important;
flex: 0 0 16px !important;
margin: 0 !important;
}
/* rótulo ocupa o resto e trunca com reticências (antes esticava o cartão) */
aside.bg-n-background nav > ul > li > ul a > div,
aside.bg-n-background nav > ul > li > ul button > div{
flex: 1 1 auto !important;
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
display: block !important;
}
/* itens de terceiro nível não têm ícone: o texto entra no mesmo
trilho do texto dos demais, em vez de flutuar solto */
/* terceiro nível entra na MESMA grade (menu agrupado, sem escadinha) */
aside.bg-n-background nav > ul > li > ul > li:has(> ul) > ul,
aside.bg-n-background nav > ul > li > ul > li:has(> ul) > ul > div,
aside.bg-n-background nav > ul > li > ul > li:has(> ul) > ul li{
margin: 0 !important;
padding: 0 !important;
}
aside.bg-n-background nav > ul > li > ul ul a{
padding-left: 10px !important;
font-size: 12.5px !important;
}
/* cabeçalho da sub-seção zera o recuo herdado do menu lateral */
aside.bg-n-background nav > ul > li.agos-open > ul > li:has(> ul) > div,
aside.bg-n-background nav > ul > li > ul > li:has(> ul) > div{
padding: 0 !important;
margin: 8px 0 2px !important;
}
/* cabeçalho de sub-seção (Times, Canais) */
aside.bg-n-background nav > ul > li > ul > li:has(> ul) > div{
display: flex !important;
align-items: center !important;
gap: 2px !important;
margin: 6px 0 0 !important;
padding: 0 !important;
text-transform: none !important;
letter-spacing: 0 !important;
font-size: inherit !important;
}
aside.bg-n-background nav > ul > li > ul > li:has(> ul) > div > button:first-child{
flex: 1 1 auto !important;
padding-right: 6px !important;
text-transform: uppercase !important;
letter-spacing: .08em !important;
font-size: 10.5px !important;
font-weight: 700 !important;
color: #7C8CA5 !important;
}
/* bloco do contador + seta de expandir, à direita e sempre visível */
aside.bg-n-background nav > ul > li > ul > li:has(> ul) > div > div{
flex: 0 0 auto !important;
display: flex !important;
align-items: center !important;
gap: 2px !important;
}
aside.bg-n-background nav > ul > li > ul > li:has(> ul) > div > div button{
width: 24px !important;
height: 24px !important;
min-height: 24px !important;
padding: 0 !important;
justify-content: center !important;
border-radius: 6px !important;
opacity: .85;
}
aside.bg-n-background nav > ul > li > ul > li:has(> ul) > div > div button:hover{
background: rgba(255,255,255,.08) !important;
opacity: 1;
}
aside.bg-n-background nav > ul > li > ul span[class*="chevron"]{
width: 13px !important;
height: 13px !important;
flex: 0 0 13px !important;
}
}
/* item de terceiro nível sem ícone (times) ganha um espaçador da largura
de um ícone, para o texto cair no mesmo trilho dos que têm ícone */
@media (min-width: 768px){
aside.bg-n-background nav > ul > li > ul ul a:not(:has(> span[class*="size-4"]))::before{
content: "";
flex: 0 0 16px;
height: 16px;
}
}
/* respiro entre o ícone e o rótulo do cabeçalho de sub-seção */
@media (min-width: 768px){
aside.bg-n-background nav > ul > li > ul > li:has(> ul) > div > button:first-child{
gap: 8px !important;
}
aside.bg-n-background nav > ul > li > ul > li:has(> ul) > div > button:first-child > div{
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
}
}
/* =================================================================
CONTROLE DE ORDENAÇÃO DAS SUB-SEÇÕES (Times / Canais)
No menu lateral ele fica escondido até passar o mouse. Dentro do
suspenso, ao ser acionado, o painel dele é "teleportado" para o fim
da página com position:fixed e abria solto no canto superior
esquerdo da tela, calculado para o layout vertical antigo.
Some daqui; o expandir/recolher (a seta) continua funcionando.
================================================================= */
@media (min-width: 768px){
aside.bg-n-background nav > ul > li > ul > li:has(> ul) > div > div > div:first-child{
display: none !important;
}
}
/* =================================================================
CORREÇÕES DA AUDITORIA DO MENU
================================================================= */
@media (min-width: 768px){
/* (1) LINHA DE 1º NÍVEL — itens COM submenu são , sem submenu são
; os dois têm role="button". Antes só o recebia a caixa da
barra, e as linhas ficavam com raios e estados diferentes. */
aside.bg-n-background nav > ul > li > [role="button"]{
display: flex !important;
position: relative !important;
width: auto !important;
height: 32px !important;
padding: 4px 6px !important;
gap: 8px !important;
align-items: center !important;
justify-content: flex-start !important;
border-radius: 10px !important;
font-size: 13.5px !important;
font-weight: 500 !important;
cursor: pointer !important;
}
aside.bg-n-background nav > ul > li > div[role="button"]:hover,
aside.bg-n-background nav > ul > li.agos-open > div[role="button"]{
background: rgba(255,255,255,.06) !important;
}
aside.bg-n-background nav > ul > li > div[role="button"]:hover span,
aside.bg-n-background nav > ul > li.agos-open > div[role="button"] span{
color: #EAF1FB !important;
}
/* (2) PONTE SOBRE O VÃO — 12px invisíveis entre o item e o cartão, para
o menu não fechar enquanto o mouse desce. Fica no , nunca no
cartão (que tem overflow e recortaria). */
aside.bg-n-background nav > ul > li.agos-open::after{
content: "";
position: absolute;
top: 100%; left: 0; right: 0;
height: 12px;
z-index: 199;
}
/* (3) SUB-SEÇÕES: as folhas (times, canais) aparecem sempre, e o
recolher passa a ser a nossa classe .agos-sub-fechada. O controle
nativo depende do estado do menu LATERAL, que aqui é sempre
"recolhido" — por isso ele não conseguia mostrar nada. */
aside.bg-n-background nav > ul > li.agos-open > ul > li > ul li{
display: list-item !important;
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
}
aside.bg-n-background nav > ul > li.agos-open > ul > li.agos-sub-fechada > ul{
display: none !important;
}
aside.bg-n-background nav > ul > li > ul > li:has(> ul) > div > div > button{
display: flex !important;
width: 24px !important; height: 24px !important;
align-items: center !important; justify-content: center !important;
opacity: 1 !important;
}
aside.bg-n-background nav > ul > li > ul > li:has(> ul) > div > div > button span[class*="i-lucide"]{
width: 14px !important; height: 14px !important; flex: 0 0 14px !important;
background-color: #CFE0F6 !important;
transition: transform .15s ease;
}
aside.bg-n-background nav > ul > li > ul > li.agos-sub-fechada > div > div > button span[class*="i-lucide"]{
transform: rotate(180deg);
}
/* (4) a regra "> *{height:auto}" tinha especificidade maior e brigava
com a altura de 34px da grade; agora só alcança o que não é linha */
aside.bg-n-background nav > ul > li.agos-open > ul > li > :not(a):not(button){
height: auto !important;
}
/* (5) "nav svg{21px}" descia para dentro do cartão */
aside.bg-n-background nav > ul > li > ul svg{
width: 16px !important; height: 16px !important; flex: 0 0 16px !important;
}
}
/* =================================================================
MENSAGEM CITADA — o bloco de "resposta a" dentro do balão.
Estrutura que todo mundo reconhece do WhatsApp: barra de acento à
esquerda, nome de quem escreveu em destaque e a prévia embaixo.
Aqui em cores do sistema, sem imitar a marca do WhatsApp.
O acento muda conforme o balão: recebida, enviada ou nota interna.
================================================================= */
[data-agos-citacao="1"]{
--agos-cit-acento: #0B63F6;
--agos-cit-fundo: rgba(11,99,246,.06);
--agos-cit-texto: #5F6B7C;
position: relative;
display: block;
/* largura mínima para a citação não ficar espremida quando a resposta
é curta ("Oi") — é o que o WhatsApp faz: o balão acompanha a citação */
min-width: min(210px, 60vw);
margin: 0 0 6px !important;
padding: 8px 11px 8px 12px !important;
background: var(--agos-cit-fundo) !important;
border-radius: 7px !important;
overflow: hidden;
cursor: pointer;
transition: background-color .14s ease;
}
/* a barra de acento — em ::after porque o ::before desenha o NOME
(dois pseudo-elementos diferentes, senão um anula o outro) */
[data-agos-citacao="1"]::after{
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: var(--agos-cit-acento);
border-radius: 3px 0 0 3px;
}
/* nome de quem escreveu — desenhado a partir do atributo, sem inserir
nenhum elemento dentro do balão (o Vue reaproveita filhos por posição) */
[data-agos-citacao="1"][data-agos-cit-autor]::before{
content: attr(data-agos-cit-autor);
display: block;
margin-bottom: 2px;
font-size: 12.5px;
font-weight: 650;
line-height: 1.3;
letter-spacing: .1px;
/* !important: a tipografia do balão (.prose) define a cor do texto e
venceria a cor de acento do nome */
color: var(--agos-cit-acento) !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* prévia da mensagem citada */
[data-agos-citacao="1"] > div{
font-size: 12.5px !important;
line-height: 1.4 !important;
color: var(--agos-cit-texto) !important;
margin: 0 !important;
opacity: .92;
display: -webkit-box !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden !important;
}
[data-agos-citacao="1"] > div *{
color: inherit !important;
font-size: inherit !important;
margin: 0 !important;
}
[data-agos-citacao="1"]:hover{
background: color-mix(in srgb, var(--agos-cit-fundo) 60%, rgba(0,0,0,.05)) !important;
}
[data-agos-citacao="1"]:focus-visible{
outline: 2px solid var(--agos-cit-acento);
outline-offset: 1px;
}
/* variantes por tipo de balão */
[data-agos-cit-tipo="entrada"]{
--agos-cit-acento: #0B63F6;
--agos-cit-fundo: rgba(11,99,246,.06);
}
[data-agos-cit-tipo="saida"]{
--agos-cit-acento: #0754D8;
--agos-cit-fundo: rgba(255,255,255,.62);
--agos-cit-texto: #48566B;
}
[data-agos-cit-tipo="nota"]{
--agos-cit-acento: #B45309;
--agos-cit-fundo: rgba(180,83,9,.08);
--agos-cit-texto: #7C5312;
}
/* destaque momentâneo ao pular para a mensagem citada
(o desenho final está no bloco da timeline, item 12) */
.aura-conversation-timeline .agos-msg-destacada [data-bubble-name]{
transition: box-shadow .25s ease;
}
@media (prefers-reduced-motion: reduce){
.aura-conversation-timeline .agos-msg-destacada [data-bubble-name]{ transition: none; }
.aura-conversation-timeline [data-agos-citacao="1"]{ transition: none; }
}
/* =====================================================================
TIMELINE DA CONVERSA — especificação AGOS
Tudo abaixo vale SOMENTE dentro de .aura-conversation-timeline (classe
posta pelo agos-datas.js na área rolável das mensagens). Nenhuma regra
alcança cabeçalho, lista de atendimentos, menu, barra da direita ou
composer. Nenhum elemento é inserido no DOM do Vue: nome, hora e
etiqueta de dia são atributos desenhados por ::before/::after.
===================================================================== */
/* ---------- 1. fundo e coluna ---------- */
.aura-conversation-timeline{
background-color: #F3F3F3 !important;
background-image: none !important;
padding: 20px 24px 32px !important;
overflow-x: hidden !important;
}
/* ---------- 2. bolhas ---------- */
.aura-conversation-timeline [data-bubble-name]{
position: relative !important;
display: block !important;
/* largura pelo conteúdo, limitada a 62% — sem isto o balão encolhia
até uma letra por linha dentro do flex do Chatwoot */
width: fit-content !important;
max-width: 62% !important;
flex: 0 1 auto !important;
padding: 9px 13px !important;
border-radius: 7px !important;
border: 0 !important;
box-shadow: none !important;
font-size: 14px !important;
line-height: 1.4 !important;
font-weight: 400 !important;
white-space: normal;
}
/* quebra só o que é grande demais (link/palavra sem espaço) */
.aura-conversation-timeline [data-bubble-name] > div,
.aura-conversation-timeline [data-bubble-name] span.prose{
overflow-wrap: anywhere;
word-break: normal;
}
/* O invólucro do balão precisa ocupar a linha inteira: o "62%" é
calculado sobre o PAI, e o pai media só 250px — por isso as bolhas
encolhiam até uma letra por linha. Com o invólucro ocupando a linha,
o 62% passa a valer sobre a largura real da conversa.
ATENÇÃO: a linha da mensagem tem DOIS filhos — o bloco do balão e o
".context-menu-wrap" (menu de contexto, invisível). Dar 100% aos dois
fazia os dois pedirem a linha inteira e encolherem para 50% cada: era
exatamente por isso que o balão enviado parava no meio da tela em vez
de encostar à direita. Só o bloco do balão cresce. */
.aura-conversation-timeline .message-bubble-container > *:has([data-bubble-name]){
flex: 1 1 auto !important;
width: auto !important;
max-width: 100% !important;
min-width: 0 !important;
}
.aura-conversation-timeline .message-bubble-container > .context-menu-wrap{
flex: 0 0 auto !important;
width: auto !important;
min-width: 0 !important;
}
.aura-conversation-timeline [data-message-id] div:has(> [data-bubble-name]){
display: flex !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
flex: 1 1 auto !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.aura-conversation-timeline [data-message-id] div:has(> .right-bubble){
justify-content: flex-end !important;
}
.aura-conversation-timeline [data-message-id] div:has(> .left-bubble){
justify-content: flex-start !important;
}
/* recebida: cinza */
.aura-conversation-timeline .left-bubble:not([class*="amber"]),
.aura-conversation-timeline .left-bubble:not([class*="amber"]) *{
color: #303030 !important;
}
.aura-conversation-timeline .left-bubble:not([class*="amber"]){
background: #D9D9D9 !important;
}
/* enviada: verde-limão claro */
.aura-conversation-timeline .right-bubble:not([class*="amber"]),
.aura-conversation-timeline .right-bubble:not([class*="amber"]) *{
color: #303030 !important;
}
.aura-conversation-timeline .right-bubble:not([class*="amber"]){
background: #C9FFA8 !important;
padding-right: 30px !important; /* espaço reservado para os checks */
}
/* ---------- 3. a hora sai de dentro do balão (fica no cabeçalho) ---------- */
.aura-conversation-timeline [data-bubble-name] time{ display: none !important; }
/* ---------- 3b. confirmações de entrega ---------- */
.aura-conversation-timeline .right-bubble:not([class*="amber"]) > div:has(time){
position: absolute !important;
right: 9px;
bottom: 7px;
margin: 0 !important;
padding: 0 !important;
line-height: 1 !important;
}
/* O tique conta a verdade, como no WhatsApp:
- enviada .............. cinza
- entregue ............. cinza (o Chatwoot troca para dois tiques)
- lida ................. azul
- falhou ............... vermelho
Antes tudo ficava azul, e mensagem que só tinha saído parecia lida.
Quem informa a situação é o agos-datas.js, direto do dado da store. */
.aura-conversation-timeline [data-bubble-name] span[class*="i-lucide-check"]{
background-color: #8A8A8A !important;
width: 14px !important;
height: 14px !important;
}
.aura-conversation-timeline [data-agos-status="read"] [data-bubble-name] span[class*="i-lucide-check"]{
background-color: #4B83C3 !important;
}
.aura-conversation-timeline [data-agos-status="failed"] [data-bubble-name] span[class*="i-lucide-check"]{
background-color: #C0392B !important;
}
.aura-conversation-timeline [data-bubble-name] svg{ color: #8A8A8A !important; }
.aura-conversation-timeline [data-agos-status="read"] [data-bubble-name] svg{ color: #4B83C3 !important; }
/* recebida nunca mostra confirmação */
.aura-conversation-timeline .left-bubble > div:has(time){ display: none !important; }
/* ---------- 4. mensagem só com emoji ----------
Igual ao WhatsApp: até três emojis sozinhos aparecem grandes e sem
fundo. Quem marca é o agos-datas.js (só ele consegue ver o conteúdo
real da mensagem na store, sem depender do texto desenhado). */
.aura-conversation-timeline [data-bubble-name][data-agos-emoji]{
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
min-width: 0 !important;
}
.aura-conversation-timeline [data-bubble-name][data-agos-emoji] div,
.aura-conversation-timeline [data-bubble-name][data-agos-emoji] span.prose{
font-size: 40px !important;
line-height: 1.2 !important;
}
/* a confirmação de entrega volta para baixo do emoji, sem fundo */
.aura-conversation-timeline .right-bubble[data-agos-emoji]{
padding-right: 26px !important;
}
/* mensagem curtinha não fica estreita demais */
.aura-conversation-timeline [data-bubble-name]:not([data-agos-emoji]){
min-width: 44px;
}
/* ---------- 5. etiqueta do dia ----------
A etiqueta fica no primeiro bloco da linha (o script põe o atributo
lá) para não brigar com o ::before do cabeçalho de remetente. */
.aura-conversation-timeline [data-message-id]:has([data-agos-dia-label]){
margin-top: 46px !important;
}
.aura-conversation-timeline [data-agos-dia-label]{
position: relative;
}
.aura-conversation-timeline [data-agos-dia-label]::before{
content: attr(data-agos-dia-label);
position: absolute;
top: -34px;
left: 50%;
transform: translateX(-50%);
background: #E3EDF7;
color: #49657C;
font-size: 12px;
font-weight: 500;
letter-spacing: .02em;
line-height: 1.3;
padding: 6px 12px;
border-radius: 6px;
white-space: nowrap;
box-shadow: none;
pointer-events: none;
z-index: 1;
}
/* ---------- 6. linha de remetente e horário ----------
Dois pseudo-elementos: ::before é o NOME (negrito) e ::after é
"| horário" (peso normal). As larguras vêm de variáveis medidas em
JS, para os dois ficarem lado a lado sem inserir nenhum elemento. */
.aura-conversation-timeline [data-agos-grupo-label]{
position: relative;
margin-top: 22px !important;
}
.aura-conversation-timeline [data-agos-grupo-label]::before,
.aura-conversation-timeline [data-agos-grupo-label]::after{
position: absolute;
top: -18px;
font-size: 12px;
line-height: 1;
white-space: pre;
pointer-events: none;
}
.aura-conversation-timeline [data-agos-grupo-label]::before{
content: attr(data-agos-grupo-nome);
font-weight: 700;
color: #3D3D3D;
}
.aura-conversation-timeline [data-agos-grupo-label]::after{
content: attr(data-agos-grupo-hora);
font-weight: 400;
color: #676767;
}
/* Recuo do cabeçalho = largura da foto (34px) + o espaço até o balão.
Vale para os dois lados: do lado do cliente o espaço vem do padding da
linha, do lado do atendente vem da coluna da foto. */
.aura-conversation-timeline [data-agos-grupo-label]{ --agos-recuo: 42px; }
/* cliente: começa onde começam as bolhas */
.aura-conversation-timeline [data-agos-grupo-dir="entrada"]::before{ left: var(--agos-recuo); }
.aura-conversation-timeline [data-agos-grupo-dir="entrada"]::after{
left: calc(var(--agos-recuo) + var(--agos-nome-larg, 90px) + 8px);
}
/* atendente: termina alinhado com as bolhas (antes da foto) */
.aura-conversation-timeline [data-agos-grupo-dir="saida"]::after{ right: var(--agos-recuo); }
.aura-conversation-timeline [data-agos-grupo-dir="saida"]::before{
right: calc(var(--agos-recuo) + var(--agos-hora-larg, 56px) + 8px);
}
/* quando a mesma linha abre o dia E o grupo, cabem os dois: a tarja do
dia em cima (no primeiro bloco) e o nome logo abaixo (na linha) */
.aura-conversation-timeline [data-message-id][data-agos-grupo-label]:has([data-agos-dia-label]){
margin-top: 78px !important;
}
.aura-conversation-timeline [data-agos-grupo-label] [data-agos-dia-label]::before{
top: -56px;
}
/* ---------- 7. espaçamentos ---------- */
.aura-conversation-timeline [data-message-id]{ margin-bottom: 4px !important; }
/* ---------- 8. foto de quem escreveu ----------
A coluna da foto vem do Chatwoot com 24px fixos e a foto de 34px
transbordava por cima da borda. Alargamos a COLUNA (só aqui dentro),
para a foto caber inteira e o balão terminar exatamente onde termina
o horário do cabeçalho. Do lado do cliente essa coluna nem existe no
Chatwoot: quem abre o espaço é o padding da linha. */
.aura-conversation-timeline [class*="grid-cols-[1fr_24px]"]{
grid-template-columns: 1fr 34px !important;
}
.aura-conversation-timeline [data-agos-lado="entrada"]{
padding-left: 42px !important;
}
/* a foto nativa some: agora é UMA por bloco, dos dois lados, desenhada
na primeira mensagem do bloco (junto do nome) */
.aura-conversation-timeline [class*="grid-area:avatar"]{
visibility: hidden !important;
}
.aura-conversation-timeline [data-agos-foto]{ position: relative; }
.aura-conversation-timeline [data-agos-foto]::after{
content: attr(data-agos-foto);
position: absolute;
/* encostada embaixo: a foto fecha o bloco, junto do último balão */
bottom: 0;
width: 34px;
height: 34px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 600;
letter-spacing: .02em;
color: #FFFFFF;
background-color: #7C8B99;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
pointer-events: none;
z-index: 1;
}
.aura-conversation-timeline [data-agos-foto][data-agos-foto-lado="entrada"]::after{ left: -42px; }
.aura-conversation-timeline [data-agos-foto][data-agos-foto-lado="saida"]::after{
right: 0;
background-color: #3F3F3F;
}
/* quando o contato tem foto de verdade, ela entra no lugar das iniciais */
.aura-conversation-timeline [data-agos-foto][data-agos-foto-tem="1"]::after{
content: '';
background-image: var(--agos-foto);
background-color: #E3E7EB;
}
.aura-conversation-timeline [data-message-id] span[class*="avatar"],
.aura-conversation-timeline [data-message-id] span[class*="avatar"] > span,
.aura-conversation-timeline [data-message-id] span[role="img"]{
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
border-radius: 50% !important;
overflow: hidden !important;
}
.aura-conversation-timeline .right-bubble ~ * span[role="img"],
.aura-conversation-timeline [data-message-id]:has(.right-bubble) span[role="img"]{
background: #3F3F3F !important;
}
.aura-conversation-timeline [data-message-id]:has(.right-bubble) span[role="img"] span{
color: #FFFFFF !important;
font-size: 14px !important;
font-weight: 600 !important;
}
.aura-conversation-timeline [data-message-id] img{
object-fit: cover !important;
border-radius: 50% !important;
}
/* ---------- 9. eventos do sistema ----------
"Fulano assumiu o atendimento", "conversa resolvida"… tarja discreta
e centralizada, sem cara de mensagem. O script marca a linha com
data-agos-sistema (message_type 2), então nada aqui depende do texto. */
.aura-conversation-timeline [data-agos-sistema]{
justify-content: center !important;
margin: 10px 0 !important;
}
.aura-conversation-timeline .message-bubble-container[data-agos-sistema] > *:has([data-bubble-name]){
flex: 0 1 auto !important;
width: max-content !important; /* sem isto a tarja quebrava em duas linhas */
max-width: 100% !important;
justify-content: center !important;
}
.aura-conversation-timeline [data-agos-sistema] [data-bubble-name],
.aura-conversation-timeline [data-agos-sistema] [data-bubble-name] *{
color: #6E6E6E !important;
font-size: 12px !important;
line-height: 1.35 !important;
text-align: center !important;
}
.aura-conversation-timeline [data-agos-sistema] [data-bubble-name]{
background: #E7E7E7 !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 12px !important;
padding: 5px 12px !important;
min-width: 0 !important;
/* limite em px: uma porcentagem aqui virava conta circular com o
"max-content" do invólucro e a tarja quebrava em duas linhas */
max-width: 560px !important;
}
.aura-conversation-timeline li:not(:has([data-message-id])){
font-size: 12px !important;
color: #777777 !important;
text-align: center !important;
}
/* ---------- 10. observação interna: continua distinta ---------- */
.aura-conversation-timeline .right-bubble[class*="amber"],
.aura-conversation-timeline .left-bubble[class*="amber"]{
background: #FFF7E3 !important;
border-left: 4px solid #F59E0B !important;
padding-right: 30px !important;
}
/* ---------- 11. responsivo ---------- */
@media (max-width: 1180px){
.aura-conversation-timeline{ padding-left: 16px !important; padding-right: 16px !important; }
.aura-conversation-timeline [data-bubble-name]{ max-width: 72% !important; }
}
@media (max-width: 767px){
.aura-conversation-timeline [data-bubble-name]{ max-width: 82% !important; }
.aura-conversation-timeline [data-message-id] span[class*="avatar"],
.aura-conversation-timeline [data-message-id] span[role="img"]{
width: 30px !important; height: 30px !important; min-width: 30px !important;
}
.aura-conversation-timeline [class*="grid-cols-[1fr_24px]"]{
grid-template-columns: 1fr 30px !important;
}
.aura-conversation-timeline [data-agos-grupo-label]{ --agos-recuo: 38px; }
.aura-conversation-timeline [data-agos-lado="entrada"]{ padding-left: 38px !important; }
.aura-conversation-timeline [data-agos-foto]::after{
width: 30px; height: 30px; font-size: 11px;
}
.aura-conversation-timeline [data-agos-foto][data-agos-foto-lado="entrada"]::after{ left: -38px; }
}
/* ---------- 11a. mensagem excluída ----------
Em vez de sumir com o conteúdo, mostramos o que estava escrito, riscado,
e embaixo o aviso de que foi excluída (esse aviso é o próprio texto que
o Chatwoot coloca no lugar). Quando ninguém tinha visto a mensagem antes
de ela ser apagada, aparece só o aviso — não inventamos conteúdo. */
.aura-conversation-timeline [data-agos-excluida] [data-bubble-name]{
background: #ECECEC !important;
border-left: 3px solid #B9B9B9 !important;
}
.aura-conversation-timeline [data-agos-excluida] .right-bubble{
background: #E4EFDC !important;
}
/* o texto original, riscado, entra antes do aviso */
.aura-conversation-timeline [data-bubble-name][data-agos-excluida-texto]::before{
content: attr(data-agos-excluida-texto);
display: block;
margin-bottom: 4px;
color: #4A4A4A;
text-decoration: line-through;
text-decoration-color: #6F6F6F;
text-decoration-thickness: 1.5px;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
/* o aviso do Chatwoot vira uma nota discreta embaixo */
.aura-conversation-timeline [data-agos-excluida] [data-bubble-name] > div,
.aura-conversation-timeline [data-agos-excluida] [data-bubble-name] span.prose{
font-size: 12px !important;
font-style: italic !important;
color: #7B7B7B !important;
}
/* ---------- 11a-bis. mensagem editada ----------
O balão passa a mostrar o texto corrigido e ganha a marca "editada".
O conteúdo antigo continua no DOM (nada é removido), apenas escondido. */
.aura-conversation-timeline [data-bubble-name][data-agos-editado-texto]::before{
content: attr(data-agos-editado-texto);
display: block;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.aura-conversation-timeline [data-bubble-name][data-agos-editado-texto] > div:not(:has(time)):not([data-agos-citacao]){
display: none !important;
}
.aura-conversation-timeline [data-bubble-name][data-agos-editado-texto]::after{
content: 'editada';
display: block;
margin-top: 2px;
font-size: 11px;
font-style: italic;
color: #7B7B7B;
}
/* a linha crua que a Evolution escreve ("editado: ...") sai de cena */
.aura-conversation-timeline [data-agos-edicao-aviso]{ display: none !important; }
/* ---------- 11b. botão de responder (citar) ----------
Único elemento da casca que vive fora da timeline: ele acompanha o
mouse e por isso mora no , nunca dentro da lista do Vue. Só
aparece quando o mouse está sobre uma mensagem que pode ser citada. */
.agos-responder{
position: fixed;
z-index: 9998;
display: none;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
border: 1px solid #E1E5EA;
border-radius: 50%;
background: #FFFFFF;
color: #5B6B7B;
box-shadow: 0 2px 6px rgba(16, 24, 40, .14);
cursor: pointer;
transition: background-color .15s ease, color .15s ease;
}
.agos-responder[data-agos-visivel="1"]{ display: flex; }
/* enquanto o botão aciona o menu do Chatwoot por baixo dos panos, o menu
não aparece — antes ele piscava na tela por meio segundo */
html.agos-citando .menu-container{
visibility: hidden !important;
opacity: 0 !important;
}
/* lápis de editar: irmão do botão de responder, um pouco mais à esquerda */
.agos-editar{
position: fixed;
z-index: 9998;
display: none;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
border: 1px solid #E1E5EA;
border-radius: 50%;
background: #FFFFFF;
color: #5B6B7B;
box-shadow: 0 2px 6px rgba(16, 24, 40, .14);
cursor: pointer;
transition: background-color .15s ease, color .15s ease;
}
.agos-editar[data-agos-visivel="1"]{ display: flex; }
.agos-editar:hover{ background: #EEF3F9; color: #2F3E4E; }
.agos-editar:focus-visible{ outline: 2px solid #4B83C3; outline-offset: 2px; }
/* caixinha de edição */
.agos-editor{
position: fixed;
z-index: 10000;
display: none;
flex-direction: column;
gap: 8px;
padding: 10px;
border: 1px solid #DDE3EA;
border-radius: 10px;
background: #FFFFFF;
box-shadow: 0 12px 32px rgba(16, 24, 40, .18);
}
.agos-editor[data-agos-aberto="1"]{ display: flex; }
.agos-editor-texto{
width: 100%;
resize: vertical;
border: 1px solid #DDE3EA;
border-radius: 8px;
padding: 8px 10px;
font-size: 14px;
line-height: 1.4;
color: #182230;
font-family: inherit;
}
.agos-editor-texto:focus{ outline: 2px solid #4B83C3; outline-offset: 0; border-color: #4B83C3; }
.agos-editor-rodape{ display: flex; align-items: center; gap: 8px; }
.agos-editor-dica{ flex: 1; font-size: 11px; color: #8A94A6; }
.agos-editor-rodape button{
border-radius: 8px;
padding: 6px 12px;
font-size: 13px;
cursor: pointer;
border: 1px solid #DDE3EA;
background: #FFFFFF;
color: #47546A;
}
.agos-editor-salvar{
border-color: #169B62 !important;
background: #169B62 !important;
color: #FFFFFF !important;
}
.agos-editor-ocupado{ opacity: .6; pointer-events: none; }
.agos-aviso-bom{ border-left-color: #169B62 !important; }
.agos-aviso-citar{
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
z-index: 100000;
background: #FFFFFF;
border: 1px solid #E6E9EF;
border-left: 4px solid #C0392B;
border-radius: 10px;
padding: 12px 18px;
font-size: 13.5px;
color: #182230;
box-shadow: 0 8px 24px rgba(16, 24, 40, .14);
}
.agos-responder:hover{ background: #EEF3F9; color: #2F3E4E; }
.agos-responder:focus-visible{ outline: 2px solid #4B83C3; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce){
.agos-responder{ transition: none; }
}
/* ---------- 12. citação e destaque (mantidos) ---------- */
.aura-conversation-timeline .agos-msg-destacada [data-bubble-name]{
box-shadow: 0 0 0 2px rgba(75,131,195,.55) !important;
border-radius: 7px !important;
}
/* ---------- conexão do WhatsApp (só administrador) ----------
Botão discreto no topo, ao lado do sino, e um painel próprio. Tudo mora
no : nada é inserido no que o Vue controla. */
.agos-wpp-fundo{
position: fixed; inset: 0; z-index: 10001;
background: rgba(16,24,40,.45);
display: flex; align-items: center; justify-content: center;
}
.agos-wpp-caixa{
width: 420px; max-width: calc(100vw - 32px);
background: #FFFFFF; border-radius: 14px; overflow: hidden;
box-shadow: 0 20px 50px rgba(16,24,40,.28);
font-family: inherit;
}
.agos-wpp-caixa header{
display: flex; align-items: center; justify-content: space-between;
padding: 14px 16px; background: linear-gradient(100deg,#243345,#1B2632); color: #fff;
font-size: 14px; font-weight: 600;
}
.agos-wpp-x{ background: none; border: 0; color: #fff; font-size: 15px; cursor: pointer; opacity: .8; }
.agos-wpp-x:hover{ opacity: 1; }
.agos-wpp-corpo{ padding: 16px; }
.agos-wpp-estado{ display: flex; align-items: center; gap: 10px; font-size: 14px; color: #182230; }
.agos-wpp-estado .bolinha{ width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.agos-wpp-estado.ligado .bolinha{ background: #169B62; box-shadow: 0 0 0 4px rgba(22,155,98,.15); }
.agos-wpp-estado.desligado .bolinha{ background: #D92D4C; box-shadow: 0 0 0 4px rgba(217,45,76,.15); }
.agos-wpp-estado .detalhe{ font-size: 12.5px; color: #67748B; margin-top: 2px; }
.agos-wpp-qr{ margin-top: 14px; text-align: center; min-height: 8px; }
.agos-wpp-qr img{ width: 240px; height: 240px; border-radius: 10px; border: 1px solid #E6E9EF; }
.agos-wpp-codigo{ font-size: 12.5px; color: #47546A; margin-top: 8px; }
.agos-wpp-ok{ color: #169B62; font-size: 14px; font-weight: 600; padding: 18px 0; }
.agos-wpp-erro{ color: #C0392B; font-size: 13px; padding: 10px 0; }
.agos-wpp-carregando{ color: #67748B; font-size: 13px; padding: 18px 0; }
.agos-wpp-ajuda{ font-size: 12.5px; color: #67748B; margin-top: 14px; line-height: 1.5; }
.agos-wpp-caixa footer{ display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid #EDF0F4; }
.agos-wpp-conectar{
flex: 1; padding: 9px 12px; border: 0; border-radius: 9px;
background: #169B62; color: #fff; font-size: 13.5px; cursor: pointer; font-family: inherit;
}
.agos-wpp-desconectar{
padding: 9px 12px; border: 1px solid #E6E9EF; border-radius: 9px;
background: #fff; color: #C0392B; font-size: 13.5px; cursor: pointer; font-family: inherit;
}
html.agos-rail .agos-botao-whatsapp{ left: 16px; }
@media (prefers-reduced-motion: reduce){ .agos-botao-whatsapp{ transition: none; } }