/* ==========================================================================
   Identidade visual Rei Sol Infraestrutura — sobreposição do tema Chatwoot

   Paleta extraída do sistema de gestão da própria empresa:
     brand         #be8c36   dourado
     brand-strong  #855b22   bronze
     brand-dark    #6b481f   marrom
     cream         #f4f1ea   fundo
     ink           #2a2520   texto

   COMO FUNCIONA
   O Chatwoot define os tokens em escalas de 12 tons (padrão Radix) dentro de
   :root (claro) e .dark (escuro). O destaque da interface é o --blue-9.
   Aqui a escala azul inteira vira dourada e os neutros são aquecidos.

   COMO REMOVER
   Apague a linha sub_filter do /etc/nginx/sites-available/chatwoot e recarregue
   o nginx. Nada no Chatwoot é alterado — esta folha é externa ao container.
   ========================================================================== */

:root {
  /* ---- destaque: azul -> dourado ---- */
  --blue-1:  253 251 247;
  --blue-2:  251 247 238;
  --blue-3:  247 240 224;
  --blue-4:  242 231 207;
  --blue-5:  236 220 187;
  --blue-6:  227 204 160;
  --blue-7:  215 183 126;
  --blue-8:  201 159  86;
  --blue-9:  190 140  54;   /* #be8c36 */
  --blue-10: 171 125  46;
  --blue-11: 133  91  34;   /* #855b22 */
  --blue-12:  74  50  22;

  /* ---- acento secundário: iris -> bronze ---- */
  --iris-1:  253 251 247;
  --iris-2:  250 245 236;
  --iris-3:  244 236 221;
  --iris-4:  237 225 203;
  --iris-5:  228 212 182;
  --iris-6:  216 196 158;
  --iris-7:  199 174 128;
  --iris-8:  176 145  90;
  --iris-9:  133  91  34;   /* #855b22 */
  --iris-10: 120  81  30;
  --iris-11: 107  72  31;   /* #6b481f */
  --iris-12:  58  39  17;

  /* ---- neutros aquecidos rumo ao creme ---- */
  --slate-1:  253 252 249;
  --slate-2:  250 248 242;
  --slate-3:  244 241 234;  /* #f4f1ea */
  --slate-4:  238 234 224;
  --slate-5:  230 225 212;
  --slate-6:  221 215 200;
  --slate-7:  207 200 182;
  --slate-8:  187 179 159;
  --slate-9:  141 134 117;
  --slate-10: 114 107  92;   /* escurecido: 129 122 106 dava contraste 4.26
                                sobre branco e 3.78 sobre o creme da pagina.
                                Este da 5.29 e 4.69. Vale para Pesquisar...,
                                Canais, Times e os contadores — o texto mais
                                frequente do painel. O gemeo do tema escuro
                                (linha ~106) ja tinha sido corrigido; este
                                ficou para tras porque so varri o escuro. */
  --slate-11:  95  88  75;
  --slate-12:  42  37  32;  /* #2a2520 */

  --border-weak:   233 228 217;
  --border-strong: 215 208 193;
}

.dark {
  /* ---- destaque: azul -> dourado (fundo escuro) ---- */
  --blue-1:   26  22  16;
  --blue-2:   33  28  20;
  --blue-3:   48  40  26;
  --blue-4:   62  51  31;
  --blue-5:   77  63  37;
  --blue-6:   97  79  46;
  --blue-7:  126 102  57;
  --blue-8:  163 130  68;
  --blue-9:  190 140  54;   /* o dourado permanece o destaque */
  --blue-10: 203 156  78;
  --blue-11: 222 184 120;
  --blue-12: 247 236 216;

  --iris-1:   24  20  15;
  --iris-2:   31  26  19;
  --iris-3:   45  37  25;
  --iris-4:   58  47  30;
  --iris-5:   72  58  35;
  --iris-6:   91  73  43;
  --iris-7:  118  94  54;
  --iris-8:  152 120  64;
  --iris-9:  168 118  52;
  --iris-10: 186 138  70;
  --iris-11: 214 176 116;
  --iris-12: 245 232 210;

  /* ---- neutros: cinza-azulado -> marrom quente ---- */
  --slate-1:   23  20  17;
  --slate-2:   30  26  22;
  --slate-3:   40  35  29;
  --slate-4:   47  41  34;
  --slate-5:   55  48  40;
  --slate-6:   64  56  47;
  --slate-7:   79  70  59;
  --slate-8:  104  93  79;
  --slate-9:  119 108  93;
  --slate-10: 158 148 133;   /* clareado: 133 122 106 dava contraste 3.34 no placeholder e 4.11 em "Canais" */
  --slate-11: 187 178 165;
  --slate-12: 244 241 234;  /* creme como texto */

  --border-weak:   44  38  32;
  --border-strong:  58  50  42;
}

/* O brasão tem traço fino: um respiro evita que encoste na borda */
img[src*="/brand-assets/logo"] {
  padding: 1px;
  object-fit: contain;
}

/* ==========================================================================
   Alinhamento com o Gestão Galpão e o Controle de Obras
   --------------------------------------------------------------------------
   Valores medidos no proprio sistema de gestao rodando
   (gestao.reisolinfraestrutura.com.br), nao estimados de captura de tela.
   Fonte da verdade: /opt/gestao-galpao/apps/suprimentos-web/src/index.css

                        gestao        chatwoot antes
     fonte              stack sistema  Inter
     acao principal     #855b22        #be8c36
     peso do botao      600            400
     cartao             raio 16px, borda 1px #ead7a6
     campo              raio  8px, borda 1px #ead7a6

   O QUE NAO TENTAMOS IGUALAR
   Layout. O gestao e um app de formularios centrados; o Chatwoot e um painel
   de tres colunas denso. Forcar as proporcoes de um no outro quebraria o
   atendimento para ganhar semelhanca de captura de tela. Igualamos a
   linguagem visual — cor, tipo, peso, cantos — nao a diagramacao.
   ========================================================================== */

/* ---- Tipografia -----------------------------------------------------------
   O Chatwoot embute a Inter. Os outros sistemas usam a pilha do sistema
   operacional, entao no Windows sai Segoe UI. Trocar a fonte e a mudanca de
   maior impacto visual por menor risco: nao mexe em medida nenhuma.
   `code/pre/kbd` ficam de fora — texto de codigo precisa de largura fixa. */
body,
button, input, textarea, select,
h1, h2, h3, h4, h5, h6,
label, a, span, div, p, li, td, th {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

code, pre, kbd, samp, .font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

/* ---- Acao principal -------------------------------------------------------
   No gestao o botao "Entrar" e bronze (#855b22), nao o dourado da marca
   (#be8c36) — o dourado fica para o brasao e detalhes. `bg-n-brand` e a
   classe que o Chatwoot poe em todo botao solido de acao.

   So o FUNDO muda. `text-n-brand` e `outline-n-brand` (links, foco, aba ativa)
   continuam no dourado, que e onde ele funciona melhor sobre creme. */
.bg-n-brand {
  background-color: #855b22;
}

button.bg-n-brand,
a.bg-n-brand,
.bg-n-brand button {
  font-weight: 600;
}

/* ---- Bordas ---------------------------------------------------------------
   O gestao contorna cartao e campo com ouro-200 (#ead7a6). Aplicar isso a
   TODA borda do Chatwoot deixaria o painel riscado de dourado — ele tem muito
   mais divisorias que um formulario de login. Entao: ouro-200 cheio nas
   bordas fortes (que delimitam superficie), e uma versao diluida nas fracas
   (que apenas separam linhas de lista). */
:root {
  --border-weak:   238 231 213;   /* ouro-200 diluido no creme */
  --border-strong: 234 215 166;   /* #ead7a6 — o mesmo do cartao da gestao */
}

/* ---- Cantos ---------------------------------------------------------------
   Superficie 16px, controle 8px — a mesma proporcao do gestao. Restrito a
   dialogos e cartoes: sair arredondando tudo esbarraria em avatares e
   distintivos, que sao redondos de proposito. */
/* `[role='dialog']` saiu daqui em 26/08/2026. Nesta versao do Chatwoot a
   funcao marca POPOVER e GAVETA, nao cartao de modal: EmojiPicker.vue,
   EmojiIconPicker.vue, ReportDrilldownDrawer.vue e
   AssistantDrilldownDrawer.vue. O modal de verdade usa .modal-container
   (Modal.vue). Arredondar por role dava anel duplo no seletor de emoji. */
.modal-container,
.card {
  border-radius: 16px;
}

/* ---- Barra lateral --------------------------------------------------------
   Medido no Controle de Obras (obras.reisolinfraestrutura.com.br):

     item          14px, peso 500, raio 8px, gap 8px
     item ativo    fundo #f5ead0 (ouro-100), texto #4e3417 (ouro-900)
     item inativo  ink a 70%
     icone         18px, traco 2

   O Chatwoot marca o item ativo com `bg-n-alpha-2`, um cinza translucido.
   E ai que mora a diferenca: a pilha dourada e a assinatura visual da barra
   dos outros sistemas.

   POR QUE PRENDER NO a[href^="/app/accounts/"]
   `bg-n-alpha-2` tambem aparece fora da barra (campo de busca, estados de
   hover em lista). Sem a amarra pelo endereco, a pilula dourada vazaria para
   lugares onde ela nao significa "voce esta aqui". */
a[href^="/app/accounts/"][title] {
  font-weight: 500;
}

a[href^="/app/accounts/"].bg-n-alpha-2 {
  background-color: #f5ead0;
  background-image: none;   /* o Chatwoot poe um gradiente no hover */
}

a[href^="/app/accounts/"].bg-n-alpha-2,
a[href^="/app/accounts/"].bg-n-alpha-2 span,
a[href^="/app/accounts/"].bg-n-alpha-2 svg {
  color: #4e3417;
}

/* ---- Cabecalho da barra lateral -------------------------------------------
   Medido no Controle de Obras:

                         obras          chatwoot antes
     brasao              29x29          16x16  (classe size-4)
     nome da empresa     13px peso 600  14px peso 500
     cor do nome         #6b481f        #2a2520

   O brasao a 16px ficava com menos da metade do tamanho e sumia ao lado do
   texto — era a diferenca que saltava aos olhos entre os dois sistemas.

   POR QUE O :has() E NAO A CLASSE DIRETA
   O contorno de 24px e `size-6`, classe utilitaria que o Chatwoot usa em
   dezenas de avatares e distintivos. Mexer nela direto incharia todos.
   Prendendo pelo `:has(> img[src*="/brand-assets/logo"])`, so cresce o
   de fato embrulha o nosso brasao.

   SOBRE O !important DO TEXTO
   O span do nome carrega tres classes utilitarias (text-sm font-medium
   text-n-slate-12) — especificidade 0,3,0, acima do seletor estrutural que
   temos aqui. Sem o !important a regra perde em silencio. Nas outras nao e
   preciso: `img[src*=...]` ja ganha de `.size-4`. */
img[src*="/brand-assets/logo"] {
  width: 29px;
  height: 29px;
}

div:has(> img[src*="/brand-assets/logo"]) {
  width: 29px;
  height: 29px;
}

div:has(> div > img[src*="/brand-assets/logo"]) button span {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #6b481f !important;
}

/* ---- Painel Super Admin ---------------------------------------------------
   O /super_admin e outra aplicacao dentro do mesmo dominio: Rails com
   Administrate, folha propria (superadmin-*.css), classes proprias. Os tokens
   Radix que pintam o painel de atendimento nao chegam nele — por isso ele
   continuava azul depois de tudo.

   O que ele usa e a escala `woot-*`. Ela existe SO aqui: o painel de
   atendimento usa `n-*`. Entao dava para sobrescrever sem escopo nenhum,
   sem risco de vazar para o outro lado.

   POR QUE NAO UM CURINGA
   Seria tentador escrever [class*="bg-woot-"] e acabar. Mas `bg-woot-25` e
   fundo de pagina quase branco e `bg-woot-500` e botao solido: mapear os
   dois para a mesma cor pintaria a tela de login inteira de bronze. Cada
   degrau precisa do seu par na escala de ouro.

     woot-25  -> ouro-50   #fbf7ee    woot-500 -> ouro-700 #855b22
     woot-50  -> ouro-100  #f5ead0    woot-600 -> ouro-800 #6b481f
     woot-100 -> ouro-200  #ead7a6    woot-700 -> ouro-900 #4e3417

   O LOGO
   Vem de /brand-assets/logo.svg, servido pelo nginx a partir de
   /var/www/reisol-brand/brand-assets/ (SVG de verdade, com o brasao PNG
   embutido em data URI). Esse caminho e usado so pelo super admin —
   confirmado: zero ocorrencias em / e em /app/login.
   --------------------------------------------------------------------------- */

/* fundos claros: telas e faixas */
.bg-woot-25  { background-color: #fbf7ee; }
.bg-woot-50  { background-color: #f5ead0; }
.bg-woot-100 { background-color: #ead7a6; }

/* fundos solidos: botoes e destaques */
.bg-woot-500 { background-color: #855b22; }
.bg-woot-600 { background-color: #6b481f; }
.bg-woot-700 { background-color: #4e3417; }

.hover\:bg-woot-500:hover { background-color: #855b22; }
.hover\:bg-woot-600:hover { background-color: #6b481f; }
.hover\:bg-woot-700:hover { background-color: #4e3417; }

/* texto: links e item de menu ativo */
.text-woot-500 { color: #855b22; }
.text-woot-600 { color: #6b481f; }
.text-woot-700 { color: #4e3417; }

.hover\:text-woot-500:hover { color: #855b22; }
.hover\:text-woot-600:hover { color: #6b481f; }

/* bordas, aneis de foco e contornos */
.border-woot-500      { border-color: #855b22; }
.ring-woot-500        { --tw-ring-color: #855b22; }
.focus\:ring-woot-500:focus              { --tw-ring-color: #855b22; }
.focus-visible\:outline-woot-500:focus-visible { outline-color: #855b22; }
.focus-visible\:outline-woot-600:focus-visible { outline-color: #6b481f; }

/* Titulo da tela de login ("Howdy, admin"). Preso ao formulario do super
   admin para nao alcancar h2 de outra pagina qualquer. */
body:has(form.new_super_admin) h2 {
  color: #6b481f;
}

/* ---- Super Admin: os botoes ----------------------------------------------
   Alem da escala `woot-*`, o painel carrega uma folha antiga
   (application-<hash>.css, do Administrate) que pinta botao com azul escrito
   direto na regra:

       button:not(.reset-base), input[type="button"]:not(.reset-base) { ... }

   POR QUE ESTAS REGRAS SAO PRESAS AO body:has()
   Aquele seletor e generico: vale para QUALQUER <button>. Este arquivo
   tambem carrega no painel de atendimento, entao copia-lo sem escopo
   pintaria todo botao de la de bronze — inclusive os que precisam ser
   neutros. A ancora e o link de logout, que so existe dentro do super admin.

   A tela de login nao tem esse link (ninguem esta logado ainda), por isso o
   segundo grupo, preso ao formulario dela.
   --------------------------------------------------------------------------- */
body:has(a[href*="/super_admin/logout"]) a.button,
body:has(a[href*="/super_admin/logout"]) .button,
body:has(a[href*="/super_admin/logout"]) button:not(.reset-base),
body:has(a[href*="/super_admin/logout"]) input[type="submit"],
body:has(form.new_super_admin) button,
body:has(form.new_super_admin) input[type="submit"] {
  background-color: #855b22;
  border-color: #855b22;
}

body:has(a[href*="/super_admin/logout"]) a.button:hover,
body:has(a[href*="/super_admin/logout"]) .button:hover,
body:has(a[href*="/super_admin/logout"]) button:not(.reset-base):hover,
body:has(form.new_super_admin) button:hover {
  background-color: #6b481f;
  border-color: #6b481f;
}

/* "Destroy" continua vermelho: e acao destrutiva e a cor faz parte do aviso.
   Uniformizar tudo em bronze aqui seria trocar seguranca por estetica. */
body:has(a[href*="/super_admin/logout"]) a.button--destructive,
body:has(a[href*="/super_admin/logout"]) .text-red-500,
body:has(a[href*="/super_admin/logout"]) [class*="text-red"] {
  color: inherit;
}

/* ---- Botao de assinatura da caixa de resposta -----------------------------
   Esconde o interruptor que insere "--" e o nome no RODAPE do rascunho.

   POR QUE ELE PRECISA SAIR
   A assinatura desta instalacao e montada no SERVIDOR, no envio
   (config/initializers/zz_assinatura_topo.rb), e sai como "*Nome:*" na
   primeira linha. Este botao so controla o rodape que o EDITOR desenha.

   Com ele visivel, o atendente tem um botao que:
     - liga um rodape que o servidor remove antes de enviar
     - faz a caixa mostrar um formato diferente do que o cliente recebe

   Ou seja: um controle que nao controla nada e ainda confunde. Ja aconteceu
   duas vezes nesta instalacao — desliguei pela configuracao, alguem clicou
   aqui e o rodape voltou.

   ESCONDER NAO E O MESMO QUE DESLIGAR
   A preferencia continua existindo em ui_settings; isto so tira o gatilho da
   mao de quem nao tem motivo para usar. Se um dia a assinatura no topo for
   removida, apague esta regra e o botao volta a fazer sentido.

   ANCORA
   `i-ph-signature` e o nome do icone (Phosphor), nao a posicao na barra.
   Sobrevive a reordenacao dos botoes; so quebra se trocarem o icone, e ai
   quebra visivelmente — o botao reaparece, nao some outra coisa junto.
   --------------------------------------------------------------------------- */
button:has(> .i-ph-signature) {
  display: none;
}

/* ---- Tela de login do Super Admin ----------------------------------------
   (o marcador acima e o que o script de publicacao procura para substituir
    este bloco inteiro; nao renomeie sem ajustar la)

   Vale para AS DUAS telas de entrada, que por sorte tem a mesma estrutura:

       /app/login            painel de atendimento (Vue)
       /super_admin/sign_in  console administrativo (Rails + Administrate)

   Reproduz a tela do Controle de Obras: brasao grande, nome do sistema e
   subtitulo DENTRO de um cartao unico.

     cartao    branco, raio 16px, borda 1px #ead7a6, 384px
     brasao    88px de altura, centralizado, no topo do cartao
     titulo    #6b481f, 18px, peso 600
     subtitulo #6f675a, 13px, peso 400
     campo     raio 8px, borda 1px #ead7a6
     botao     #855b22, raio 8px, peso 600
     fundo     #f4f1ea

   O PROBLEMA: O BRASAO ESTA FORA DO CARTAO
       main
         section.max-w-5xl      brasao + titulo   <- irmao, nao filho
         section.bg-white       formulario        <- o cartao original

   CSS nao remaneja elemento de lugar. Em vez de tentar, as duas sections
   viram METADES da mesma superficie: a de cima com cantos arredondados so no
   topo e sem borda inferior, a de baixo o inverso. Coladas, leem como um
   cartao unico — que e o que o usuario ve. Conferido: folga de 0px entre
   elas e mesma largura.

   A SOMBRA SO CAI PARA BAIXO, de proposito. Sombra sem deslocamento vertical
   desenharia uma linha na emenda. Com deslocamento positivo, a sombra da
   metade de cima fica atras da de baixo (que e opaca e pintada depois, entao
   cobre), e so a de baixo projeta para fora.

   AS DUAS ANCORAS
     body:has(form.new_super_admin)   so existe no console administrativo
     main[class*="bg-n-brand/5"]      so existe nas telas de auth do painel
   Este arquivo carrega em TODAS as paginas. Sem elas, regras como `section`,
   `h2` ou `input` pegariam o painel inteiro.
   --------------------------------------------------------------------------- */

body:has(form.new_super_admin) main,
main[class*="bg-n-brand/5"] {
  /* O !important e necessario, nao e preguica: o tema-marca.css e gerado e
     declara .bg-n-brand\/5 com !important, carregando DEPOIS deste arquivo.
     Sem isto a tela de entrada do painel fica com um lavado dourado e a do
     super admin fica creme — as duas deveriam ser iguais. */
  background-color: #f4f1ea !important;
  justify-content: center;
  padding-top: 0;
  padding-bottom: 0;
}

/* ---------- metade de cima: brasao + titulo ---------- */
body:has(form.new_super_admin) section:not(:has(form)),
main[class*="bg-n-brand/5"] section:not(:has(form)) {
  background-color: #ffffff;
  border: 1px solid #ead7a6;
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  padding: 32px 32px 0;
  max-width: 384px;
  width: 100%;
  margin: 0 auto;
  box-shadow: 0 8px 24px -14px rgba(42, 37, 32, 0.18);
}

body:has(form.new_super_admin) img[src*="/brand-assets/"],
main[class*="bg-n-brand/5"] img[src*="/brand-assets/"] {
  height: 88px;
  width: auto;
  margin: 0 auto 10px;
}

body:has(form.new_super_admin) section:not(:has(form)) :is(h1, h2, h3),
main[class*="bg-n-brand/5"] section:not(:has(form)) :is(h1, h2, h3) {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.45px;
  color: #6b481f;
  line-height: 1.3;
  text-align: center;
}

/* O subtitulo nao existe no HTML do Chatwoot. Como e texto decorativo — a
   informacao real ja esta no titulo e nos rotulos —, cabe num pseudo-elemento
   sem prejudicar quem usa leitor de tela. */
body:has(form.new_super_admin) section:not(:has(form)) :is(h1, h2, h3)::after,
main[class*="bg-n-brand/5"] section:not(:has(form)) :is(h1, h2, h3)::after {
  content: 'Acesse com suas credenciais';
  display: block;
  margin-top: 3px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  color: #6f675a;
}

/* O "👋" do console vem colado no titulo. O sub_filter embrulha o que sobra
   num <span class="sa-emoji"> sem fechar — o proprio parser de HTML fecha no
   </h2>. Assim da para esconder so o emoji, que a tela de referencia nao tem. */
.sa-emoji {
  display: none;
}

/* ---------- metade de baixo: o formulario ---------- */
body:has(form.new_super_admin) section:has(form),
main[class*="bg-n-brand/5"] section:has(form) {
  background-color: #ffffff;
  border: 1px solid #ead7a6;
  border-top: 0;
  border-radius: 0 0 16px 16px;
  padding: 22px 32px 32px;
  max-width: 384px;
  width: 100%;
  margin: 0 auto;
  box-shadow: 0 8px 24px -14px rgba(42, 37, 32, 0.18);
}

/* o agrupador interno nao pode virar uma segunda superficie */
body:has(form.new_super_admin) section:has(form) > div,
main[class*="bg-n-brand/5"] section:has(form) > div {
  background-color: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  max-width: none;
  box-shadow: none;
}

body:has(form.new_super_admin) section:has(form) label,
main[class*="bg-n-brand/5"] section:has(form) label {
  font-size: 13px;
  font-weight: 500;
  color: #2a2520;
}

body:has(form.new_super_admin) section:has(form) input:not([type='hidden']),
main[class*="bg-n-brand/5"] section:has(form) input:not([type='hidden']) {
  border: 1px solid #ead7a6;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 14px;
  background-color: #ffffff;
  color: #2a2520;
  box-shadow: none;
  /* o padrao usa `ring-1 ring-inset`, um anel desenhado por fora da borda,
     que brigaria com a borda dourada. Zerado. */
  --tw-ring-shadow: 0 0 #0000;
}

body:has(form.new_super_admin) section:has(form) input:not([type='hidden']):focus,
main[class*="bg-n-brand/5"] section:has(form) input:not([type='hidden']):focus {
  border-color: #be8c36;
  outline: 2px solid rgba(190, 140, 54, 0.25);
  outline-offset: 0;
}

body:has(form.new_super_admin) section:has(form) button[type='submit'],
main[class*="bg-n-brand/5"] section:has(form) button[type='submit'] {
  background-color: #855b22;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: none;
}

body:has(form.new_super_admin) section:has(form) button[type='submit']:hover,
main[class*="bg-n-brand/5"] section:has(form) button[type='submit']:hover {
  background-color: #6b481f;
}

/* "Esqueceu-se da sua senha?" fica no dourado da marca, nao no bronze do
   botao: e link secundario e nao deve competir com a acao principal. */
main[class*="bg-n-brand/5"] section:has(form) a {
  color: #855b22;   /* bronze: ouro-500 dava 3.00 sobre branco */
  font-size: 13px;
}

/* ---- Preenchimento automatico do Chrome ----------------------------------
   O Chrome pinta campo preenchido pelo gerenciador de senhas de azul-claro,
   por regra de agente de usuario que ignora `background-color`. Fica um
   retangulo azul no meio de uma interface creme e dourada — foi o que
   aparecia nas duas telas de login.

   A sombra interna de 1000px e a unica forma de cobrir. Precisa de
   !important para vencer a regra do navegador.

   SO NO TEMA CLARO
   No escuro, forcar fundo branco criaria o problema inverso: caixa branca
   sobre painel escuro. Como o `.dark` e aplicado na raiz, o
   `html:not(.dark)` deixa o modo escuro com o comportamento padrao.
   --------------------------------------------------------------------------- */
html:not(.dark) input:-webkit-autofill,
html:not(.dark) input:-webkit-autofill:hover,
html:not(.dark) input:-webkit-autofill:focus,
html:not(.dark) input:-webkit-autofill:active,
html:not(.dark) textarea:-webkit-autofill,
html:not(.dark) select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: #2a2520 !important;
  caret-color: #2a2520;
}

/* ---- Menu do console administrativo --------------------------------------
   Alinha a barra do /super_admin com a do painel de atendimento, que segue o
   Controle de Obras. Medido nas duas, nao estimado:

                        painel      console antes
     largura da barra   183px       224px
     item padding       4px 6px     6px 8px
     item fonte         14px / 500  14px / 400
     item ativo         #f5ead0 / #4e3417
     brasao no topo     29px        40px
     nome no topo       13px / 600  14px / 400

   ANCORA: o CONTAINER da barra, nao o endereco dos links.
   Tentei primeiro `a[href^="/super_admin/"]` e metade dos itens ficou de fora:
   Painel, Configuracoes, Saude da instancia, Diagnostico de push e Sair usam
   URL ABSOLUTA, que nao comeca com barra. `div.w-56.border-r` e a barra
   inteira — conferido: 26 links, nenhum de tabela, entao Edit/Destroy das
   listagens nao sao afetados.
   --------------------------------------------------------------------------- */


/* ---------- cabecalho ---------- */
/* o padrao usa py-6 (24px em cima e embaixo), quase o triplo do painel */
.w-56.border-r .border-b {
  margin-left: 6px;
  margin-right: 6px;
  margin-bottom: 6px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.w-56.border-r img {
  height: 29px;
  width: auto;
}

/* `.text-sm` tambem veste os rotulos do menu — por isso a regra passa pelo
   `.border-b`, que so o cabecalho tem. Sem isso, os itens do menu virariam
   bronze em negrito. */
.w-56.border-r .border-b .text-sm {
  font-size: 13px;
  font-weight: 600;
  color: #6b481f;
  line-height: 1.25;
}

.w-56.border-r .border-b .text-xs {
  font-size: 11px;
  color: #6f675a;
}

/* ---------- itens ---------- */
.w-56.border-r li {
  padding-left: 6px;
  padding-right: 6px;
  margin-bottom: 2px;
}

.w-56.border-r li a {
  padding: 4px 6px;
  margin-left: 0;
}

.w-56.border-r a {
  font-size: 14px;
  font-weight: 500;
  /* o mesmo neutro quente do painel, nao o cinza-azulado do padrao */
  color: #5f584b;
}

.w-56.border-r a span {
  font-size: 14px;
  font-weight: 500;
}

.w-56.border-r a:hover {
  background-color: #faf6ec;
  color: #855b22;
}

/* ativo: a pilula dourada e a assinatura visual da barra nos outros sistemas */
.w-56.border-r a.bg-slate-25 {
  background-color: #f5ead0;
}

.w-56.border-r a.bg-slate-25,
.w-56.border-r a.bg-slate-25 span,
.w-56.border-r a.bg-slate-25 svg {
  color: #4e3417;
}

/* ---- As duas barras laterais, no padrao do Controle de Obras -------------
   Medido em obras.reisolinfraestrutura.com.br:

       div.bg-cream     #f4f1ea    a pagina
         aside          #ffffff    borda-direita 1px #ead7a6, SEM sombra
           nav          transparente, padding 16px 6px
       divisor do cabecalho: 1px #f5ead0 (mais claro que a borda lateral)

   O CHATWOOT FAZ O INVERSO, e era isso que destoava: barra cinza (#f7f7f7)
   sobre conteudo branco. Aqui a barra e branca e a pagina e creme — a
   separacao vem do contraste de fundo, nao de uma linha forte.

   A borda lateral e mais escura que o divisor de proposito: uma separa
   sistemas (barra x conteudo), a outra so agrupa dentro da barra.
   --------------------------------------------------------------------------- */

/* ---------- painel de atendimento ---------- */
aside.bg-n-background {
  background-color: #ffffff;
  border-right: 1px solid #ead7a6;
}

/* ---------- console administrativo ---------- */
.w-56.border-r {
  /* 173px e a largura do aside do Controle de Obras. Os 183px que eu tinha
     posto vieram de medir o elemento INTERNO do painel, por engano. */
  width: 190px;
  background-color: #ffffff;
  border-right: 1px solid #ead7a6;
}

.w-56.border-r .border-b {
  border-bottom-color: #f5ead0;
}

/* ---------- a pagina atras: creme, como no Controle de Obras ----------
   E o contraste com o creme que separa a barra do conteudo. Sem isso,
   barra branca ao lado de conteudo branco vira uma superficie so, e a
   borda dourada tem que fazer sozinha um trabalho que nao e dela. */

/* console: o irmao imediato da barra */
.w-56.border-r + main {
  background-color: #f4f1ea;
}

/* painel: o container externo. O `:not(aside)` e essencial — a mesma classe
   veste a barra, que acabou de virar branca logo acima. */
div.bg-n-background:not(aside) {
  background-color: #f4f1ea;
}

/* ---- Linguagem visual do Controle de Obras -------------------------------
   Medido em obras.reisolinfraestrutura.com.br, nao estimado:

     pagina             #f4f1ea creme
     barra lateral      #ffffff, borda-direita 1px #ead7a6, sem sombra
     superficie/cartao  #ffffff, raio 12px, borda 1px #ead7a6, sem sombra
     cabecalho de tabela 10px / 600, #6b481f, padding 10px 8px
     linha de tabela    12px / 400, #2a2520
     item de menu ativo #f5ead0 / #4e3417
     acao principal     #855b22, raio 8px, peso 600
     campo              raio 8px, borda 1px #ead7a6

   O QUE NAO DA PARA REPLICAR
   O LAYOUT. O Controle de Obras e um sistema de listas e formularios; o
   Chatwoot e um painel de conversas de tres colunas. CSS troca aparencia,
   nao rearranja a arvore de componentes de uma aplicacao. O que se replica
   aqui e a linguagem — cor, tipo, cantos, superficie —, que e o que faz
   dois sistemas parecerem da mesma casa.

   A ASSINATURA MAIS FORTE, e a que faltava: o cabecalho de tabela e MENOR
   que o conteudo (10px contra 12px) e dourado. E o oposto do padrao do
   Chatwoot, onde o cabecalho e do mesmo tamanho e cinza-azulado.
   --------------------------------------------------------------------------- */

/* ---------- console: a listagem vira cartao ---------- */
.w-56.border-r + main .main-content__body {
  background-color: #ffffff;
  border: 1px solid #ead7a6;
  border-radius: 12px;
  margin: 14px 16px 16px;
  padding: 4px 14px 12px;
}

/* ---------------------------------------------------------------------------
   A TABELA DA TELA DE EQUIPE NAO E UMA TABELA DO PAINEL.

   As regras abaixo desenham as tabelas das telas de Configuracoes do Chatwoot
   no estilo do Controle de Obras. So que a tela de Equipe, quando embutida,
   entra como filha direta do mesmo <main> (login.js faz main.appendChild), e
   virava alvo delas: `.w-56.border-r + main th` tem especificidade (0,2,2) e
   ganha de `.rs-equipe th`, que e (0,1,1). O cabecalho da tabela saia com 10px
   e cor de link em vez do cinza da propria tela, e as linhas ganhavam um hover
   creme que a tela nao previu.

   `:not(:has(.rs-equipe))` desliga o conjunto inteiro quando a tela de Equipe
   esta dentro daquele <main>. E uma pergunta so, no lugar certo: "este main e
   o da Equipe?". A alternativa seria repetir os valores de equipe.css aqui,
   que e como dois arquivos comecam a divergir.
   --------------------------------------------------------------------------- */
.w-56.border-r + main:not(:has(.rs-equipe)) th {
  font-size: 10px;
  font-weight: 600;
  color: #6b481f;
  padding: 10px 8px;
  letter-spacing: 0.02em;
}

.w-56.border-r + main:not(:has(.rs-equipe)) th a {
  color: #6b481f;
  font-size: 10px;
  font-weight: 600;
}

.w-56.border-r + main:not(:has(.rs-equipe)) td {
  font-size: 12px;
  color: #2a2520;
  padding: 10px 8px;
}

/* linha sob cada registro, discreta como no Controle de Obras */
.w-56.border-r + main:not(:has(.rs-equipe)) tbody tr {
  border-bottom: 1px solid #f5ead0;
}

.w-56.border-r + main:not(:has(.rs-equipe)) tbody tr:last-child {
  border-bottom: 0;
}

.w-56.border-r + main:not(:has(.rs-equipe)) tbody tr:hover {
  background-color: #fbf7ee;
}

/* o cabecalho da pagina (titulo + busca + botao) fica FORA do cartao,
   direto sobre o creme — e assim no Controle de Obras */
.w-56.border-r + main .main-content__header {
  padding: 16px 16px 0;
  border: 0;
}

/* ---------- painel: superficies no mesmo raio ---------- */
/* 12px e o raio de cartao do Controle de Obras; o Chatwoot usa 8px.
   Este bloco anulava o de 16px la em cima — os dois miravam o mesmo par
   de seletores. Fica so este, com o valor que vale. */
.modal-container {
  border-radius: 12px;
  border: 1px solid #ead7a6;
}

/* ---- Logo horizontal nas telas de entrada --------------------------------
   Copiada do proprio Controle de Obras:
       /opt/controle-obras/apps/web/dist/brand/logo-horizontal.png
   1081x453, fundo transparente, proporcao 2.39:1.

   POR QUE SO NAS TELAS DE ENTRADA
   Na barra lateral (200px) a marca deitada fica espremida, e ela diz "Rei Sol
   Infraestrutura" — perderia o "Assistencia" que distingue este sistema dos
   outros dois. Marca completa na porta de entrada, brasao no uso diario: e o
   que o proprio obras faz.

   `content: url()` troca a imagem renderizada sem mexer no src. CSS nao altera
   atributo, mas substitui o conteudo do <img> — e assim nao dependemos de
   editar o HTML do Chatwoot.

   ATENCAO AO CACHE: o ?v= aqui e manual. O atualizar-marca.sh carimba o CSS,
   mas nao os enderecos DENTRO dele. Se trocar a logo, suba o numero.
   --------------------------------------------------------------------------- */
body:has(form.new_super_admin) img[src*="/brand-assets/"],
main[class*="bg-n-brand/5"] img[src*="/brand-assets/"] {
  content: url("/brand/logo-horizontal.png?v=2");
  height: auto;
  width: 200px;
  margin: 0 auto 12px;
}

/* ==========================================================================
   MODO ESCURO — desfaz as superficies claras
   --------------------------------------------------------------------------
   O PROBLEMA QUE ISTO CORRIGE
   As regras de superficie acima (barra branca, pagina creme, cartao branco)
   foram escritas sem escopo de tema. No escuro elas pintavam fundo CLARO
   enquanto o texto continuava o do tema escuro. Medido antes da correcao:

       item do menu    texto rgb(187,178,165) sobre BRANCO   contraste 2.09
       nome no rodape  texto rgb(244,241,234) sobre BRANCO   contraste 1.13

   O minimo da norma (WCAG AA) e 4.5 para texto normal. 1.13 e texto
   invisivel. Isso nao era questao de gosto — era o painel inutilizavel para
   quem usa o modo escuro, que costuma ser quem precisa dele.

   A MARCA DE TEMA FICA NO <body>, NAO NO <html>
   `body.dark` — conferido no navegador. Guardas escritos como
   `html:not(.dark)` nunca funcionam: o html nao recebe essa classe, entao a
   condicao e sempre verdadeira. Foi o erro da regra de preenchimento
   automatico, corrigida aqui embaixo.

   POR QUE UM BLOCO NOVO EM VEZ DE REESCREVER O QUE JA HAVIA
   `body.dark X` tem especificidade maior que `X`, entao vence sem precisar
   mexer em cada regra clara. Menos risco de quebrar o tema claro, que esta
   funcionando.

   A PALETA ESCURA mantem o ouro como acento, mas invertido: no claro o
   destaque e ouro-100 com texto ouro-900; no escuro e ouro-900 com texto
   ouro-300. Mesma ideia, contraste na direcao certa.
   ========================================================================== */

/* ---------- superficies ---------- */
body.dark aside.bg-n-background,
body.dark .w-56.border-r {
  background-color: #1e1a16;
  border-right-color: #4e3417;
}

body.dark div.bg-n-background:not(aside),
body.dark .w-56.border-r + main {
  background-color: #171411;
}

body.dark .w-56.border-r + main .main-content__body {
  background-color: #282320;
  border-color: #4e3417;
}

body.dark .w-56.border-r .border-b {
  border-bottom-color: #4e3417;
}

/* ---------- item de menu ativo: ouro invertido ---------- */
body.dark a[href^="/app/accounts/"].bg-n-alpha-2,
body.dark .w-56.border-r a.bg-slate-25 {
  background-color: #4e3417;
}

body.dark a[href^="/app/accounts/"].bg-n-alpha-2,
body.dark a[href^="/app/accounts/"].bg-n-alpha-2 span,
body.dark a[href^="/app/accounts/"].bg-n-alpha-2 svg,
body.dark .w-56.border-r a.bg-slate-25,
body.dark .w-56.border-r a.bg-slate-25 span,
body.dark .w-56.border-r a.bg-slate-25 svg {
  color: #dec078;
}

/* ---------- itens inativos e cabecalho da barra ---------- */
body.dark .w-56.border-r a {
  color: #bbb2a5;
}

body.dark .w-56.border-r a:hover {
  background-color: #282320;
  color: #dec078;
}

body.dark .w-56.border-r .border-b .text-sm,
body.dark div:has(> div > img[src*="/brand-assets/logo"]) button span {
  color: #dec078;
}

body.dark .w-56.border-r .border-b .text-xs {
  color: #b8a894;
}

/* ---------- tabelas ---------- */
body.dark .w-56.border-r + main:not(:has(.rs-equipe)) th,
body.dark .w-56.border-r + main:not(:has(.rs-equipe)) th a {
  color: #dec078;
}

body.dark .w-56.border-r + main:not(:has(.rs-equipe)) td {
  color: #f4f1ea;
}

body.dark .w-56.border-r + main:not(:has(.rs-equipe)) tbody tr {
  border-bottom-color: #3a3128;
}

body.dark .w-56.border-r + main:not(:has(.rs-equipe)) tbody tr:hover {
  background-color: #2f2924;
}

/* ---------- telas de entrada ----------
   A MARCA DE TEMA NAO FICA NO MESMO ELEMENTO NOS DOIS APLICATIVOS:
     painel de atendimento   themeHelper.js:11  -> document.body
     telas de entrada (v3)   v3/App.vue:18      -> document.documentElement

   Escrever `body.dark` aqui errava nos DOIS sentidos ao mesmo tempo: nao
   alcancava as telas de entrada, que marcam o <html>, e alcancava o PAINEL
   INTEIRO, onde `body.dark :is(h1,h2,h3)` dourava todo titulo de dialogo,
   de filtro e de secao. Uma regra escrita para uma tela pintando o sistema
   todo.

   Por isso cada regra abaixo carrega DUAS ancoras: o tema no elemento certo
   E o container que so existe na tela de entrada. O comentario mais acima
   neste arquivo, que afirma que a marca fica no <body>, vale so para o
   painel — esta corrigido la tambem. */
html.dark main[class*="bg-n-brand/5"],
body:has(form.new_super_admin).dark main {
  background-color: #171411;
}

html.dark main[class*="bg-n-brand/5"] section:not(:has(form)),
html.dark main[class*="bg-n-brand/5"] section:has(form),
body:has(form.new_super_admin).dark section {
  background-color: #1e1a16;
  border-color: #4e3417;
}

html.dark main[class*="bg-n-brand/5"] section:has(form) label,
body:has(form.new_super_admin).dark section:has(form) label {
  color: #f4f1ea;
}

html.dark main[class*="bg-n-brand/5"] section:has(form) input:not([type=hidden]),
body:has(form.new_super_admin).dark section:has(form) input:not([type=hidden]) {
  background-color: #282320;
  border-color: #4e3417;
  color: #f4f1ea;
}

html.dark main[class*="bg-n-brand/5"] :is(h1, h2, h3),
body:has(form.new_super_admin).dark :is(h1, h2, h3) {
  color: #dec078;
}

html.dark main[class*="bg-n-brand/5"] :is(h1, h2, h3)::after,
body:has(form.new_super_admin).dark :is(h1, h2, h3)::after {
  color: #b8a894;
}

/* ---------- preenchimento automatico ----------
   A regra clara usa `html:not(.dark)`, que nunca exclui nada porque a marca
   de tema esta no body. Este bloco corrige de fato. */
/* mesmo cuidado: o painel marca o body, as telas de entrada marcam o html */
body.dark input:-webkit-autofill,
html.dark input:-webkit-autofill,
body.dark input:-webkit-autofill:hover,
html.dark input:-webkit-autofill:hover,
body.dark input:-webkit-autofill:focus,
body.dark input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #282320 inset !important;
  box-shadow: 0 0 0 1000px #282320 inset !important;
  -webkit-text-fill-color: #f4f1ea !important;
  caret-color: #f4f1ea;
}

/* O nome no topo da barra resistiu ao bloco escuro: a regra clara dele usa
   !important (precisou, para vencer tres classes utilitarias do Chatwoot), e
   !important so perde para outro !important. Medido: contraste 2.12 — texto
   ouro-800 sobre fundo escuro, ilegivel. */
body.dark div:has(> div > img[src*="/brand-assets/logo"]) button span {
  color: #dec078 !important;
}

/* ==========================================================================
   A MARCA DEITADA NA BARRA LATERAL
   ==========================================================================

   POR QUE AQUI, E NAO NA TELA DE ENTRADA
   O Controle de Obras usa DUAS marcas, cada uma num lugar so:
       brasao         96px   tela de entrada        LoginPage.tsx  h-24
       marca deitada  44px   faixa fixa do sistema  AppLayout.tsx  h-11
   A tela de entrada daqui ja segue a primeira regra — brasao a 88px sobre
   "Entrar no Assistencia" — entao nao se mexe nela. O que faltava era a
   segunda: a barra lateral e a moldura permanente deste sistema, o mesmo
   papel que a faixa de cima cumpre no Obras.

   AS DUAS VARIANTES, E POR QUE SAO DUAS
   61% dos pixels da marca sao o texto. No arquivo original esse texto e
   #6b481f, que sobre a barra escura (#1e1a16) da contraste 1,84 — sumiria.
   Por isso existe logo-horizontal-clara.png, com o texto em #fefcff
   (contraste 15,9). Ela foi reconstruida a partir do arquivo de fonte branca
   da marca, que veio em 194x81: as duas artes tem a mesma silhueta (100% dos
   pixels de alfa coincidem) e as seis cores do brasao sao identicas nas duas,
   entao so o texto muda. A conferencia da reconstrucao contra o arquivo
   original deu desvio mediano de 3/255. O Obras fez a operacao inversa —
   tingiu o arquivo de fonte branca para escuro — e documentou isso no
   AppLayout.tsx.

   O NOME AO LADO SAI
   A marca ja escreve "Rei Sol Infraestrutura". Manter o texto ao lado repete
   a mesma frase duas vezes dentro de 190px, e nao ha largura para as duas: a
   marca ocupa 105px e o texto sozinho pede ~140px. A setinha de trocar de
   conta continua visivel e o botao continua clicavel, entao a funcao fica.

   TAMANHO
   2,39:1. A 44px de altura sao 105px de largura, dentro dos 190px da barra.

   O ?v= E NECESSARIO
   /brand/ e servido com expires 7d. Sem carimbo, trocar a imagem depois fica
   invisivel por ate uma semana para quem ja abriu o painel. O carimbo do
   arquivo CSS nao vale para as URLs de dentro dele.
   ========================================================================== */

/* ---- painel de atendimento ---------------------------------------------
   A caixa e `size-6` (24px) com o brasao `size-4` (16px) dentro. Precisa
   soltar as duas: sem isto a marca deitada transborda uma caixa de 24px e
   monta em cima do divisor e do nome. */
aside div.size-6:has(> img[src*="/brand-assets/logo"]) {
  width: 105px;
  height: 44px;
  place-content: center start;
}

aside div.size-6 > img[src*="/brand-assets/logo"] {
  content: url("/brand/logo-horizontal.png?v=2");
  width: 105px;
  height: 44px;
  padding: 0;
}

body.dark aside div.size-6 > img[src*="/brand-assets/logo"] {
  content: url("/brand/logo-horizontal-clara.png?v=1");
}

/* o divisor imediatamente depois da marca, e o nome repetido.
   Preso ao irmao seguinte, e nao a `.w-px` solta: essa classe aparece em
   varios divisores da barra, e apagar todos deixaria a lista sem separacao. */
aside div.size-6:has(> img[src*="/brand-assets/logo"]) + div.w-px {
  display: none;
}

aside #sidebar-account-switcher > span.truncate {
  display: none;
}

/* ---- console administrativo --------------------------------------------
   Markup diferente: `<a><img class="h-10" src=".../logo_thumbnail.svg"></a>`
   direto dentro da barra, sem caixa envolvente e sem nome ao lado. */
.w-56.border-r img[src*="/brand-assets/logo"] {
  content: url("/brand/logo-horizontal.png?v=2");
  width: 105px;
  height: 44px;
  padding: 0;
}

body.dark .w-56.border-r img[src*="/brand-assets/logo"] {
  content: url("/brand/logo-horizontal-clara.png?v=1");
}

/* A barra recolhida continua com o brasao: ali a caixa e quadrada (size-7) e
   uma marca 2,39:1 nao cabe. O seletor acima nao a alcanca porque naquele
   estado a imagem e filha direta do botao, sem a caixa `size-6`. */

/* ---- respiro em volta da marca ------------------------------------------
   A linha do cabecalho e um flex que se ajusta ao filho mais alto. Com a
   marca de 44px ela virou exatamente 44px: a logo encostava no topo da barra.
   O Controle de Obras poe a mesma marca de 44px dentro de uma faixa de 64px
   (h-11 em h-16), ou seja 10px de cada lado. E essa proporcao que se copia.

   Preso pelo :has() ao filho que embrulha a nossa marca, e nao pela classe
   `flex gap-2 items-center min-w-0 px-2` — que e utilitaria e reaparece na
   linha da busca logo abaixo, que nao deve crescer. */
aside div:has(> div.size-6 > img[src*="/brand-assets/logo"]) {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* ---- o botao de trocar de conta, quando nao ha o que trocar --------------
   Ao esconder o nome repetido ao lado da marca, o botao ficou sem conteudo
   visivel e colapsou para 111x8px: uma faixa clicavel de 8px de altura, sem
   rotulo, logo abaixo da logo. Com uma conta so, o Chatwoot nem renderiza a
   setinha, entao o botao nao faz nada — sai da arvore inteiro.

   O :not(:has(...)) e o que preserva a funcao: no dia em que houver uma
   segunda conta, a setinha aparece, esta regra deixa de casar, e o botao
   volta sozinho. */
aside #sidebar-account-switcher:not(:has([class*="chevron"])) {
  display: none;
}

/* ==========================================================================
   Páginas de erro 404, 422 e 500

   Elas já recebiam o CSS da marca — os quatro links injetados aparecem no
   HTML servido das três. Só que não adiantava: o <style> interno delas usa
   classes próprias (.page, .btn, .error-number, .description, .help) que o
   tema nunca mencionou. Resultado: erro de URL caía numa tela azul Chatwoot
   no meio de um sistema creme e dourado.

   Âncora em body:has(.error-number): existe só nessas três páginas, e ganha
   do <style> interno por especificidade sem precisar de !important.
   ========================================================================== */
body:has(.error-number) {
  background: #f4f1ea;
}

body:has(.error-number) .page {
  background: #f4f1ea;
}

body:has(.error-number) .error-number {
  background: linear-gradient(180deg, #cda552 0%, #855b22 100%);
  background-clip: text;
  -webkit-background-clip: text;
}

body:has(.error-number) h1 {
  color: #4e3417;
}

body:has(.error-number) .description {
  color: #2a2520;
}

body:has(.error-number) .help {
  color: #726b5c;
}

body:has(.error-number) .divider {
  background: #ead7a6;
}

body:has(.error-number) .btn {
  background: #855b22;
  border-radius: 8px;
  font-weight: 600;
}

body:has(.error-number) .btn:hover {
  background: #6b481f;
}

/* ==========================================================================
   Telas de senha: "Esqueceu a senha?" e redefinição

   O resto das telas de entrada é ancorado em `main[class*="bg-n-brand/5"]`, e
   um comentário mais acima neste arquivo afirmava que essa classe só existe
   nas telas de auth. A afirmação está errada de duas maneiras: existe também
   fora delas, e estas duas telas NÃO têm <main> nem <section> — o envoltório
   é um <div> e o cartão é o próprio <form>. Por isso elas escapavam de tudo:
   fundo dourado lavado, cartão sem borda com raio de 8px, campos sem contorno.

   A âncora `:has(> form)` é o que impede a regra de vazar: pega só o
   envoltório que embrulha um formulário diretamente, e não qualquer elemento
   que carregue a classe utilitária.
   ========================================================================== */
div[class*="bg-n-brand/5"]:has(> form) {
  /* !important porque o tema-marca.css declara .bg-n-brand\/5 com !important
     e carrega depois deste arquivo */
  background-color: #f4f1ea !important;
}

div[class*="bg-n-brand/5"]:has(> form) > form {
  background-color: #ffffff;
  border: 1px solid #ead7a6;
  border-radius: 16px;
  box-shadow: none;
}

div[class*="bg-n-brand/5"]:has(> form) > form label {
  color: #6b481f;
  font-weight: 600;
}

div[class*="bg-n-brand/5"]:has(> form) > form input:not([type='hidden']) {
  border: 1px solid #ead7a6;
  border-radius: 8px;
}

/* ---- as mesmas telas no tema escuro ----
   Estas são do aplicativo v3, que marca o <html> — não o <body>. */
html.dark div[class*="bg-n-brand/5"]:has(> form) {
  background-color: #171411 !important;
}

html.dark div[class*="bg-n-brand/5"]:has(> form) > form {
  background-color: #1e1a16;
  border-color: #4e3417;
}

html.dark div[class*="bg-n-brand/5"]:has(> form) > form label {
  color: #f4f1ea;
}

html.dark div[class*="bg-n-brand/5"]:has(> form) > form input:not([type='hidden']) {
  background-color: #282320;
  border-color: #4e3417;
  color: #f4f1ea;
}


/* ---- link das telas de entrada no tema escuro ----
   O bronze que resolve no claro da 2.90 sobre o fundo escuro. Cada tema leva
   o tom que funciona nele. Marcador no <html>, que e o que o v3 usa. */
html.dark main[class*="bg-n-brand/5"] section:has(form) a,
html.dark div[class*="bg-n-brand/5"]:has(> form) a {
  color: #dec078;
}

/* ==========================================================================
   A CONVERSA COM A GRAMÁTICA DO WHATSAPP

   POR QUE SÓ AQUI
   O WhatsApp só tem metáfora para o fio da conversa. Ele não diz nada sobre
   barra de caixas de entrada, árvore de configurações ou relatórios — e é por
   isso que a identidade Rei Sol continua valendo em todo o resto. A
   familiaridade que se compra aqui é a que paga: balão à direita é meu, à
   esquerda é dele, hora dentro do balão, tiquinho embaixo.

   O QUE O CHATWOOT JÁ FAZIA, e não precisou de nada
     - alinhamento por orientação (.left-bubble / .right-bubble)
     - canto inferior quadrado, que é a aproximação do rabinho
     - hora e status DENTRO do balão (MessageMeta)
     - um tique enviado, dois entregue, dois azuis lido
     - resposta com citação
   Ou seja: faltava cor e acabamento, não estrutura.

   O TIQUINHO AZUL FICA AZUL
   É o único sinal do WhatsApp que as pessoas leem sem pensar. Trocar por
   dourado seria coerência de marca comprada com perda de reconhecimento — o
   oposto do que este trabalho quer. Fidelidade ganha aqui.

   NOTA PRIVADA CONTINUA ÂMBAR, e isso não é estética
   Nota privada é interna; mensagem de saída vai para o cliente. Se as duas
   ficarem parecidas, alguém manda para o cliente o que era recado interno.
   A diferença de cor é uma trava de segurança.
   ========================================================================== */

/* ---------- balão de saída: o "verde" do WhatsApp, em ouro ---------- */
.right-bubble {
  background-color: #f5ead0 !important;
  color: #2a2520 !important;
}

/* ---------- balão de entrada: branco, como no WhatsApp ---------- */
.left-bubble {
  background-color: #ffffff !important;
  color: #2a2520 !important;
  box-shadow: 0 1px 1px rgba(74, 58, 34, 0.10);
}

/* a hora e o tiquinho dentro do balão ficam discretos, como lá */
.right-bubble time,
.left-bubble time {
  color: #7a6a58;
  font-size: 11px;
}

/* ---------- o papel de parede atrás do fio ----------
   O WhatsApp tem os rabiscos; aqui é uma textura de pontos no creme da casa.
   Discreta de propósito: ela existe para separar o fio da conversa do resto
   da tela, não para chamar atenção. */
.conversation-panel,
[class*="messages-list"] {
  background-color: #f4f1ea;
  background-image: radial-gradient(rgba(133, 91, 34, 0.055) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* ---------- os mesmos balões no tema escuro ----------
   O WhatsApp escuro usa verde-petróleo na saída e cinza-azulado na entrada.
   O equivalente aqui é ouro-900 e a superfície escura da casa. */
body.dark .right-bubble {
  background-color: #4e3417 !important;
  color: #ece2d2 !important;
}

body.dark .left-bubble {
  background-color: #1e1a16 !important;
  color: #ece2d2 !important;
  box-shadow: none;
}

body.dark .right-bubble time,
body.dark .left-bubble time {
  /* #a89880 dava 4.09 sobre o balao de saida #4e3417 — abaixo do minimo de 4.5.
     Este da 4.96 sobre a saida e 7.47 sobre a entrada. A hora e pequena (11px),
     entao vale o criterio de texto normal, nao o de texto grande. */
  color: #b8a894;
}

body.dark .conversation-panel,
body.dark [class*="messages-list"] {
  background-color: #16120e;
  background-image: radial-gradient(rgba(222, 192, 120, 0.05) 1px, transparent 1px);
}

/* ---------------------------------------------------------------------------
   BARRA DE BUSCA NO TOPO DA LISTA DE CONVERSAS

   Montada pelo login.js logo abaixo do titulo da lista, no lugar da busca que
   ficava na barra lateral. E um <button> que finge ser campo: clicar abre a
   paleta de busca do proprio Chatwoot, a mesma do Ctrl+K.

   Cores tiradas da paleta ja medida deste tema: #6f675a da 5,58 sobre branco,
   e #b8a894 da 7,23 sobre #211d19. Nao inventar tom novo aqui sem medir.
--------------------------------------------------------------------------- */
#reisol-busca-lista {
  display: flex !important;
  align-items: center;
  gap: 8px;
  width: calc(100% - 16px);
  margin: 2px 8px 10px;
  padding: 7px 10px;
  border: 1px solid #ead7a6;
  border-radius: 8px;
  background: #ffffff;
  color: #6f675a;
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
#reisol-busca-lista:hover { border-color: #be8c36; }
#reisol-busca-lista:focus-visible { outline: 2px solid #855b22; outline-offset: -1px; }

/* lupa, texto e atalho */
#reisol-busca-lista > span:nth-child(1) { font-size: 17px; line-height: 1; color: #6f675a; }
#reisol-busca-lista > span:nth-child(2) { flex: 1 1 auto; }
#reisol-busca-lista > span:nth-child(3) {
  flex: 0 0 auto;
  font-size: 11px;
  letter-spacing: .04em;
  border: 1px solid #e2dccd;
  border-radius: 4px;
  padding: 1px 5px;
  color: #6f675a;
}

body.dark #reisol-busca-lista {
  background: #211d19;
  border-color: #3b332b;
  color: #b8a894;
}
body.dark #reisol-busca-lista:hover { border-color: #dec078; }
body.dark #reisol-busca-lista:focus-visible { outline-color: #dec078; }
body.dark #reisol-busca-lista > span:nth-child(1),
body.dark #reisol-busca-lista > span:nth-child(3) { color: #b8a894; }
body.dark #reisol-busca-lista > span:nth-child(3) { border-color: #544738; }

/* ==========================================================================
   PROCURAR DENTRO DA CONVERSA

   A lupa fica ao lado do "Resolver", no cabecalho da conversa, e abre um
   painel que lista todas as vezes em que a palavra aparece NAQUELA conversa.
   Quem monta tudo isso e o bloco correspondente do login.js.

   O `top` do painel NAO esta aqui de proposito: e medido pelo JS, porque a
   altura do cabecalho muda conforme a largura da tela (nome e botoes lado a
   lado ou empilhados). Ver o comentario da funcao `encaixar`.
   ========================================================================== */

/* ---- a lupa no cabecalho ---- */
.rs-busca-abrir {
  position: relative;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #6f675a;
  cursor: pointer;
}
.rs-busca-abrir:hover { background: rgba(133, 91, 34, .10); color: #855b22; }
.rs-busca-abrir:focus-visible { outline: 2px solid #855b22; outline-offset: 1px; }
body.dark .rs-busca-abrir { color: #b8a894; }
body.dark .rs-busca-abrir:hover { background: rgba(222, 192, 120, .14); color: #dec078; }
body.dark .rs-busca-abrir:focus-visible { outline-color: #dec078; }

/* A lupa e desenhada com um circulo e um cabo, e nao com um emoji nem uma
   imagem: emoji muda de forma e de tamanho conforme o sistema operacional e
   um arquivo de imagem seria mais uma coisa para servir e versionar. */
.rs-busca-abrir::before {
  content: '';
  position: absolute;
  top: 9px; left: 9px;
  width: 11px; height: 11px;
  border: 2px solid currentColor;
  border-radius: 50%;
}
.rs-busca-abrir::after {
  content: '';
  position: absolute;
  top: 19px; left: 18px;
  width: 7px; height: 2px;
  background: currentColor;
  border-radius: 1px;
  transform: rotate(45deg);
  transform-origin: left center;
}

/* ---- o painel ---- */
/* `absolute` dentro do .conversation-details-wrap, que ja e `relative` — o
   painel acompanha a area da conversa e nao cobre a barra lateral nem a lista.
   z-index alto o bastante para passar por cima das mensagens, e baixo o
   bastante para nao competir com a paleta do Ctrl+K. */
.rs-busca {
  position: absolute;
  inset-inline-end: 14px;
  z-index: 40;
  width: 380px;
  max-width: calc(100% - 28px);
  /* Nao passa da metade de baixo da tela: o painel e uma ajuda para achar a
     mensagem, e cobrir a conversa inteira esconderia justamente o que se
     quer olhar depois de clicar. */
  max-height: 58%;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #ead7a6;
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(42, 37, 32, .18);
  overflow: hidden;
}
body.dark .rs-busca {
  background: #282320;
  border-color: #544738;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .45);
}

.rs-busca-topo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px 10px 12px;
  border-bottom: 1px solid #ece2d2;
}
body.dark .rs-busca-topo { border-bottom-color: #3b332b; }

.rs-busca-campo {
  flex: 1 1 auto;
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  font: inherit;
  font-size: 14px;
  color: #2a2520;
  background: #f4f1ea;
  border: 1px solid #ece2d2;
  border-radius: 8px;
}
.rs-busca-campo:focus { outline: 2px solid #855b22; outline-offset: -1px; }
body.dark .rs-busca-campo {
  color: #f0ebe2; background: #211d19; border-color: #3b332b;
}
body.dark .rs-busca-campo:focus { outline-color: #dec078; }

/* Fecha: dois tracos cruzados, mesmo motivo da lupa acima. */
.rs-busca-fechar {
  position: relative;
  flex: 0 0 auto;
  width: 30px; height: 30px;
  padding: 0; border: 0; border-radius: 8px;
  background: transparent; color: #6f675a; cursor: pointer;
}
.rs-busca-fechar:hover { background: rgba(133, 91, 34, .10); color: #855b22; }
body.dark .rs-busca-fechar { color: #b8a894; }
body.dark .rs-busca-fechar:hover { background: rgba(222, 192, 120, .14); color: #dec078; }
.rs-busca-fechar::before,
.rs-busca-fechar::after {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 13px; height: 2px;
  background: currentColor; border-radius: 1px;
}
.rs-busca-fechar::before { transform: translate(-50%, -50%) rotate(45deg); }
.rs-busca-fechar::after { transform: translate(-50%, -50%) rotate(-45deg); }

.rs-busca-resumo {
  padding: 9px 12px;
  font-size: 12.5px;
  color: #6f675a;
  border-bottom: 1px solid #ece2d2;
}
body.dark .rs-busca-resumo { color: #b8a894; border-bottom-color: #3b332b; }

.rs-busca-lista {
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Cada achado e um <button> de largura inteira, e nao uma <div> com clique:
   assim ele entra na navegacao por Tab e responde ao Enter sem codigo extra. */
.rs-busca-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  font: inherit;
}
.rs-busca-item:hover { background: #f5ead0; border-color: #ead7a6; }
.rs-busca-item:focus-visible { outline: 2px solid #855b22; outline-offset: -2px; }
body.dark .rs-busca-item:hover { background: #4e3417; border-color: #544738; }
body.dark .rs-busca-item:focus-visible { outline-color: #dec078; }

.rs-busca-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11.5px;
  color: #6f675a;
  margin-bottom: 3px;
}
body.dark .rs-busca-meta { color: #b8a894; }
.rs-busca-quem { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-busca-quando { flex: 0 0 auto; }

/* Tres linhas no maximo: mensagem longa ocuparia o painel inteiro e caberiam
   dois resultados na tela. O trecho ja vem recortado em volta da palavra
   procurada pelo JS, entao o que se ve e sempre a parte que interessa. */
.rs-busca-texto {
  font-size: 13px;
  line-height: 1.4;
  color: #2a2520;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.dark .rs-busca-texto { color: #f0ebe2; }

.rs-busca-marca {
  background: #ead7a6;
  color: #2a2520;
  border-radius: 3px;
  padding: 0 1px;
}
body.dark .rs-busca-marca { background: #6b481f; color: #f0ebe2; }

.rs-busca-mais {
  margin: 4px 4px 2px;
  padding: 7px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #855b22;
  background: transparent;
  border: 1px solid #ead7a6;
  border-radius: 8px;
  cursor: pointer;
}
.rs-busca-mais:hover { background: #f5ead0; }
body.dark .rs-busca-mais { color: #dec078; border-color: #544738; }
body.dark .rs-busca-mais:hover { background: #4e3417; }

/* ---- o pisca da mensagem encontrada ----
   Depois de rolar ate ela, a mensagem precisa se identificar. Numa conversa
   com 34 avisos de conexao iguais, chegar no lugar certo sem saber qual das
   linhas era e o mesmo que nao ter chegado.
   A animacao dura 2,4s e some sozinha — marca permanente sujaria a conversa. */
@keyframes rs-msg-pisca {
  0%   { background-color: rgba(234, 215, 166, .85); }
  70%  { background-color: rgba(234, 215, 166, .55); }
  100% { background-color: transparent; }
}
.rs-msg-achada {
  animation: rs-msg-pisca 2.4s ease-out forwards;
  border-radius: 10px;
}
body.dark .rs-msg-achada { animation-name: rs-msg-pisca-escuro; }
@keyframes rs-msg-pisca-escuro {
  0%   { background-color: rgba(107, 72, 31, .9); }
  70%  { background-color: rgba(107, 72, 31, .6); }
  100% { background-color: transparent; }
}

/* No celular o painel ocupa a largura toda: 380px numa tela de 375 deixaria
   o resultado colado nas duas bordas. */
@media (max-width: 620px) {
  .rs-busca {
    inset-inline: 8px;
    width: auto;
    max-width: none;
    max-height: 64%;
  }
}

/* ==========================================================================
   COLUNA ÚNICA — a barra de navegação deixa de existir

   O QUE MUDA
   Antes eram três colunas: navegação | lista de conversas | conversa aberta.
   Agora são duas: a lista sobe para a esquerda, com a logo em cima e o perfil
   embaixo, e a conversa ocupa o resto. É o formato do WhatsApp Web.

   COMO, SEM ARRASTAR NADA NO HTML
   A logo, o perfil e a lista vivem em lugares diferentes da página — a logo e
   o perfil dentro do `aside`, a lista dentro do `main`. Movê-los para o mesmo
   pai seria mexer no DOM que o Vue governa, e um redesenho dele apagaria o
   arranjo (ou daria erro ao tentar atualizar um nó que não está mais onde ele
   deixou).

   Em vez disso, o contêiner que abriga os dois vira uma GRADE, e os
   intermediários (`aside`, `main`, a `section`) viram `display: contents`.
   `contents` faz a caixa do elemento desaparecer mas mantém os filhos na
   página — eles sobem para a grade do avô e podem ser posicionados lá. Nada
   muda de lugar no HTML: só o desenho muda.

   O PREÇO DO `contents`, e como está pago
   Um elemento com `display: contents` perde a própria caixa e, com ela, o
   fundo e a borda. O `aside` pintava o fundo da coluna inteira; sem caixa,
   ele não pinta mais nada. Por isso o fundo é repintado abaixo, na logo e no
   perfil — senão a coluna ficaria com três tons diferentes empilhados.

   PARA VOLTAR ATRÁS: apague esta seção inteira. O `aside` volta a ser uma
   coluna com o menu dentro, e as três colunas retornam.
   ========================================================================== */

div.flex.flex-grow.overflow-hidden {
  display: grid;
  /* A largura da primeira coluna é a mesma que a lista já tinha, para a
     mudança não mexer no espaço da conversa. minmax(0,1fr) na segunda: sem o
     zero no mínimo, uma mensagem longa empurraria a coluna e a lista
     encolheria.

     A TERCEIRA COLUNA é o painel de contato, e ela precisa existir mesmo
     quando ele está fechado. Ele só aparece no HTML com uma conversa aberta:
     sem uma coluna reservada, ele nascia sem lugar e o navegador o jogava na
     primeira célula livre — em cima da lista, empurrando logo, busca, abas e
     perfil para um amontoado no alto. `auto` resolve os dois estados: mede o
     painel quando existe e vale zero quando não existe. */
  /* clamp, e não largura fixa: em janela restaurada ou encolhida a coluna da
     esquerda aperta em vez de espremer a conversa a nada. Nada muda de lugar
     — só a proporção.

     Alargada em 03/09/2026, a pedido: era clamp(240, 26vw, 340). Os 40px a
     mais no teto saem da conversa, e é uma troca consciente — a coluna agora
     carrega a árvore INTEIRA junto das conversas, então o nome de quem
     escreveu tinha de brigar por espaço com o recuo do galho. A conversa
     perde 40px de 1100 e não sente; a coluna ganha uma palavra por linha. */
  grid-template-columns: clamp(264px, 28vw, 380px) minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

/* O painel de contato (Ações da conversa, Notas, Anexos), à direita de tudo. */
div.flex.flex-grow.overflow-hidden > main > section > div[class*="bg-n-surface-2"] {
  grid-column: 3;
  grid-row: 1 / -1;
}

/* O `aside` PRECISA do caminho completo, e não do seletor curto `aside`.
   Ele carrega a classe `flex` do Chatwoot, que é `.flex{display:flex}` —
   especificidade (0,1,0). Um `aside` sozinho vale (0,0,1) e PERDE: o
   `contents` era ignorado, o aside continuava sendo uma caixa flex, e logo e
   perfil ficavam empilhados juntos no alto da coluna enquanto a lista descia
   para baixo dos dois. O sintoma parecia ordem errada; a causa era o elemento
   nunca ter virado `contents`.
   `main` e `section` não têm esse problema — mas levam o mesmo prefixo para
   ficar claro que os três são o mesmo arranjo, e para não casarem em outra
   parte da página. */
div.flex.flex-grow.overflow-hidden > aside,
div.flex.flex-grow.overflow-hidden > main,
div.flex.flex-grow.overflow-hidden > main > section {
  display: contents;
}

/* O menu de navegação e a alça de arrastar somem de vez: o menu virou o
   seletor no título da lista, e a alça não tem mais coluna para redimensionar.
   O <nav> continua no HTML de propósito — é dele que o seletor tira os
   endereços para navegar sem recarregar a página. */
aside > nav,
aside > div[class*="cursor-col-resize"] {
  display: none !important;
}

/* ==========================================================================
   O PREÇO ESCONDIDO DO `contents`: A PALETA DO CTRL+K VIROU UMA CÉLULA

   Este foi o defeito mais caro desta leva, e ninguém o veria olhando o CSS.

   `<ninja-keys>` é a paleta de comandos do Ctrl+K. Ela mora dentro do `main`
   e, enquanto o `main` era uma caixa comum, ficava lá quietinha, sem tamanho.
   Com `main` virando `display: contents`, ela deixou de ter o `main` como pai
   de layout e subiu para a GRADE — como qualquer outro filho. Sem coluna nem
   linha declaradas, o navegador a encaixou na primeira célula livre: coluna 2,
   linha 1. Medido: 542x92 pixels, invisível (não pinta nada), z-index 9999 e
   recebendo clique.

   Ou seja: uma placa de vidro de 92px de altura atravessada no ALTO DA
   CONVERSA — exatamente onde ficam os botões do cabeçalho. Conferido com
   elementFromPoint, quem recebia o clique era ela, e não o botão:

     "Resolver"  ·  "Procurar nesta conversa"  ·  o número da conversa
     a setinha ao lado de Resolver  ·  "Baixar" (anexo)

   Todos existiam, todos estavam desenhados no lugar certo, e nenhum
   respondia. É a explicação de "tem vários botões que não fazem o que deviam
   fazer" — não eram vários defeitos, era um só.

   Já havia um remendo para isto, mas só valia com a janela de Configurações
   aberta (procure por `reisol-config-aberta ... ninja-keys` mais abaixo):
   descobriu-se o sintoma naquele contexto e tratou-se só ali.

   A CORREÇÃO É TIRÁ-LA DA GRADE, e não desligar o clique dela: `absolute`
   faz o elemento sair do fluxo, então a grade para de lhe reservar célula, e
   tamanho zero garante que não sobre nem um pixel de superfície. O Ctrl+K
   continua inteiro porque o que ele mostra é o `.modal` do shadow DOM, que é
   `position: fixed` — conferido — e portanto não depende da caixa do
   hospedeiro para cobrir a tela.
   ========================================================================== */
div.flex.flex-grow.overflow-hidden > main > ninja-keys {
  position: absolute;
  width: 0;
  height: 0;
}

/* A logo, em cima. O respiro imita o que o `aside` dava, já que a caixa dele
   não existe mais.

   `first-of-type`/`last-of-type` e NÃO `nth-child`. Isto quebrou de verdade em
   02/09/2026: os seletores eram `nth-child(1)` e `nth-child(3)`, e bastou o
   próprio botão da seta ser inserido dentro do `aside` para o perfil virar o
   4º filho e perder o lugar na grade — ele sumia para fora da tela e a logo
   esticava por 840px, ocupando a coluna inteira. `nth-child` conta TUDO;
   `of-type` conta só as <section>, que são exatamente duas: a logo e o
   perfil. Acrescentar qualquer elemento no aside deixa de importar. */
div.flex.flex-grow.overflow-hidden > aside > section:first-of-type {
  grid-column: 1;
  grid-row: 1;
  background: #f4f1ea;

  /* A LINHA EMBAIXO DO LOGO SAI — 04/09/2026.
     Nao era borda: nem o Chatwoot nem nos desenhavamos uma ali. Era FRESTA.
     O `aside` tem `display: contents`, entao nao tem caixa nem fundo; a faixa
     do logo e a lista sao duas celulas pintadas da grade, e o `mb-4` que o
     Chatwoot poe na section abre 16px entre elas por onde aparece o fundo do
     aplicativo, num tom diferente dos dois vizinhos. Faixa de outro tom entre
     duas iguais le como linha.

     Margem e transparente por definicao — nao ha como pinta-la. Entao ela vira
     padding, que a propria faixa pinta: os 2px que ja havia mais os 16 do
     `mb-4` = 18. A altura embaixo do logo continua a mesma; so deixa de ser
     buraco. */
  margin-bottom: 0 !important;
  padding: 6px 8px 18px;
  /* Logo centralizado na faixa, a pedido em 03/09/2026. Medido antes: a
     imagem tem 105px numa faixa de 380, encostada a esquerda com 16px de um
     lado e 259 do outro — lida como desalinhamento, nao como alinhamento a
     esquerda. Agora 138 de cada lado.

     `justify-items` e nao `margin: auto` na imagem: a faixa e uma GRADE (o
     `display:grid` acima), e justify-items centraliza o conteudo de cada
     celula sem que a regra precise saber quantos filhos ha nem qual deles e o
     logo. Se um dia voltar o nome da conta ao lado, ele centraliza junto. */
  justify-items: center;
}

/* A lista, no meio. `width:auto` anula a largura fixa que ela trazia de
   quando era uma coluna solta no flex — agora quem manda é a grade. */
.conversations-list-wrap {
  grid-column: 1;
  grid-row: 2;
  width: auto !important;
  min-width: 0 !important;
  /* O creme da marca, o mesmo do logo em cima e do perfil embaixo: a coluna
     vira uma peca so. Antes a lista era rgb(20,21,23) no escuro — um cinza
     AZULADO — entre dois blocos marrons. `!important` porque a largura logo
     acima ja precisou dele: a classe utilitaria do Chatwoot que pinta esta
     div tem a mesma especificidade e vem depois na cascata. */
  background: #f4f1ea !important;
  /* A divisa que faltava. Medido antes: coluna e painel com o mesmo
     rgb(254,254,254) e border-right 0 — nada separava os dois. */
  border-inline-end: 1px solid #e6ddcb !important;
}
body.dark .conversations-list-wrap {
  background: #1e1a16 !important;
  border-inline-end-color: #3b332b !important;
}

/* O perfil, embaixo, com os atalhos de tema, Análises e Configurações. */
div.flex.flex-grow.overflow-hidden > aside > section:last-of-type {
  grid-column: 1;
  grid-row: 3;
  background: #f4f1ea;
}

/* --------------------------------------------------------------------------
   TELAS QUE NÃO TÊM LISTA DE CONVERSAS (Contatos, Relatórios, Configurações)

   Nelas o Chatwoot não desenha a `.conversations-list-wrap`, e a coluna 1
   ficava sem o item do meio: a logo esticava para preencher a altura toda e o
   conteúdo da tela ficava espremido só na coluna 2, com metade da tela vazia.

   Aqui o conteúdo passa a ocupar a largura inteira, entre a logo e o perfil —
   que continuam em cima e embaixo, no lugar de sempre. O `:has()` pergunta
   justamente o que interessa: "esta tela tem lista?". Sem ela, espalha.
   -------------------------------------------------------------------------- */
div.flex.flex-grow.overflow-hidden:not(:has(.conversations-list-wrap)) {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

/* A coluna avulsa ocupa o lugar da lista: mesma coluna, mesma linha. É ela
   que mantém a navegação à vista em Contatos e Relatórios — sem isso, entrar
   naquelas telas era entrar num beco sem saída. */
/* O caminho completo é obrigatório: mais acima há uma regra para as "sobras"
   do <main> (`> main > div`) que manda tudo para a coluna 2, linha 1. Ela é
   mais específica que um `.rs-coluna-avulsa` solto, e por causa disso a coluna
   nascia em cima do conteúdo, do lado errado. Medido: col 2 / row 1 quando o
   pedido era col 1 / row 2. */
div.flex.flex-grow.overflow-hidden > main > .rs-coluna-avulsa {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: #f4f1ea;
  border-inline-end: 1px solid #e6ddcb;
}

/* Mesma altura e mesma linha de baixo do cabeçalho da lista de conversas
   (3.25rem, borda inferior). É o que faz a coluna parecer a mesma ao trocar
   de tela, em vez de a navegação pular para o topo. */
.rs-avulsa-topo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: 3.25rem;
  padding: 0 12px;
  border-bottom: 1px solid #ece2d2;
}
.rs-avulsa-titulo {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: #2a2520;
}
body.dark .rs-avulsa-topo { border-bottom-color: #3b332b; }
body.dark .rs-avulsa-titulo { color: #f0ebe2; }

/* Havia aqui um `.rs-arv-separador` — a linha que separava os relatórios das
   telas de conversa quando as duas listas conviviam nesta coluna. Não
   convivem mais: Análises abre como janela, com o próprio menu. Removido em
   03/09/2026, sem uso desde então. */
body.dark div.flex.flex-grow.overflow-hidden > main > .rs-coluna-avulsa {
  background: #1e1a16;
  border-inline-end-color: #3b332b;
}

/* O conteúdo da tela vai para a DIREITA, onde ficam as conversas — e não mais
   para a largura toda. Ocupando tudo, ele passava por cima da coluna e a
   navegação sumia embaixo dele.

   `grid-row: 1 / -1` — DE CIMA A BAIXO, e não só a linha do meio.

   Com `grid-row: 2` ele ficava preso à faixa central da grade, e as outras
   duas linhas (a da logo, em cima, e a do perfil, embaixo) apareciam do lado
   direito como duas tarjas cor de creme. Contatos virava um quadrado branco
   com moldura, encolhido, enquanto a tela de conversa ocupa a altura inteira.
   Duas telas irmãs com formatos diferentes.

   Agora as duas ocupam tudo: em cima e embaixo vai até a borda. */
div.flex.flex-grow.overflow-hidden:not(:has(.conversations-list-wrap)) > main > div:not([class*="fixed"]):not(.rs-coluna-avulsa) {
  grid-column: 2 / -1;
  grid-row: 1 / -1;
}

/* A conversa ocupa a coluna da direita inteira, de cima a baixo. */
.conversation-details-wrap {
  grid-column: 2;
  grid-row: 1 / -1;
}

/* Sobras do `main` que subiram junto com o `contents`: o botão flutuante de
   celular e a paleta do Ctrl+K. Os dois já se posicionam sozinhos (fixed ou
   overlay); aqui só se garante que não reservem uma célula da grade e
   empurrem o resto. */
div.flex.flex-grow.overflow-hidden > main > div,
div.flex.flex-grow.overflow-hidden > main > ninja-keys {
  grid-column: 2;
  grid-row: 1;
}

/* O fundo do modo escuro precisa dos MESMOS seletores das regras claras acima.
   Ficou para trás quando elas trocaram `nth-child` por `of-type`: o fundo
   creme continuava valendo e, no tema escuro, a logo e o perfil viravam duas
   faixas claras no meio de uma tela preta. Regra de fundo sempre em par —
   claro e escuro com a mesma âncora, ou um dos dois fica órfão. */
body.dark div.flex.flex-grow.overflow-hidden > aside > section:first-of-type,
body.dark div.flex.flex-grow.overflow-hidden > aside > section:last-of-type {
  background: #1e1a16;
}

/* --------------------------------------------------------------------------
   NO CELULAR A COLUNA ÚNICA SAI DE CENA.

   Medido em 375px de largura: as colunas ficavam 340px para a lista e 35px
   para a conversa — larga demais para uma, inútil para a outra. E não adianta
   apertar a primeira: com uma coluna só, lista e conversa disputariam o mesmo
   espaço, e quem decide isso hoje são as classes do próprio Chatwoot, que eu
   estaria sobrescrevendo no escuro.

   Abaixo de 900px, então, tudo isto é desfeito e o layout volta ao do
   Chatwoot — que já é responsivo: ele esconde a barra lateral atrás de um
   botão e troca lista por conversa conforme você navega. A barra de navegação
   volta a existir aí, e é a forma de circular no celular.

   Só o `display` precisa voltar: sem caixa (contents), as regras de grid dos
   filhos não têm efeito nenhum e podem ficar onde estão.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   NÃO EXISTE MAIS MUDANÇA DE LAYOUT POR TAMANHO DE JANELA.

   Havia aqui uma regra que, abaixo de 900px, desmontava a grade e devolvia o
   layout de três colunas do Chatwoot. A intenção era proteger o celular; o
   efeito foi outro: maximizar e restaurar a janela no computador trocava a
   tela inteira de forma. O que estava numa posição pulava para outra, o perfil
   subia, e parecia defeito — porque, para quem usa, é.

   Agora a forma é uma só, em qualquer largura. O que muda é apenas a LARGURA
   da coluna da esquerda, e suavemente: o `clamp` da grade lá em cima deixa
   ela encolher de 340px até 240px conforme a janela aperta, sem nada mudar de
   lugar.
   -------------------------------------------------------------------------- */

/* O rótulo da busca em UMA linha.
   Medido: "Pesquisar conversas, grupos e contatos" pede 239px e o campo
   oferece 235 — quatro pixels de diferença, e o texto quebrava em duas
   linhas, engordando o campo de 36 para 56px de altura. Meio ponto a menos na
   fonte resolve com folga, e é preferível a encurtar a frase: "e contatos" é
   justamente a parte que ninguém sabia que existia. */
#reisol-busca-lista > span:nth-child(2) {
  white-space: nowrap;
  font-size: 13px;
}

/* AQUI VIVIA O MENU SUSPENSO DE TELAS — removido em 03/09/2026.

   Eram cinco famílias de estilo (`.rs-seta-telas`, `.rs-menu-telas`,
   `.rs-menu-solto`, `.rs-menu-item`, `.rs-menu-atual`), 80 linhas, e nenhuma
   delas casava com nada há dias: o código que montava aquele menu saiu quando
   a navegação virou árvore, e o estilo ficou. Conferido por varredura — os
   nomes não aparecem em nenhum arquivo de JavaScript.

   Duas tentativas de menu suspenso morreram no caminho até a árvore atual: o
   primeiro no título da lista, o segundo como camada. Os dois foram recusados
   pela mesma razão, dita por ele: "não quero esse checklist". Fica o
   registro, para ninguém propor um terceiro.

*/
/* ==========================================================================
   RODAPÉ DA BARRA DA ESQUERDA — Relatórios e Configurações

   As medidas abaixo (32px de altura, o recuo) foram tiradas dos itens nativos
   da barra, para os botões novos não parecerem colados de outro sistema. Se o
   Chatwoot mudar as dele, estes ficam ligeiramente diferentes — é o preço de
   não depender das classes utilitárias, que mudam de nome a cada versão e
   quebrariam calado.

   Havia aqui também o estilo de um bloco de filtros na barra (.rs-filtro*),
   removido em 02/09/2026 junto com o código que o montava: aqueles filtros
   voltaram para o topo da lista de conversas, que é onde sempre estiveram.
   ========================================================================== */

/* Linha separadora em cima e não embaixo: separa os atalhos do menu que
   rola, e mantém eles colados no perfil — que é o bloco fixo do rodapé. */
/* Linha separadora em cima e não embaixo: separa os atalhos do menu que
   rola, e mantém eles colados no perfil — que é o bloco fixo do rodapé. */
.rs-rodape {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 6px 4px 4px;
  border-top: 1px solid rgba(133, 91, 34, .16);
}
body.dark .rs-rodape { border-top-color: rgba(222, 192, 120, .14); }

.rs-rodape-botao {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #6f675a;
  cursor: pointer;
}
.rs-rodape-botao svg { width: 17px; height: 17px; }
.rs-rodape-botao:hover { background: rgba(133, 91, 34, .10); color: #855b22; }
.rs-rodape-botao:focus-visible { outline: 2px solid #855b22; outline-offset: 1px; }

/* Sair só fica vermelho ao passar o dedo em cima. Em repouso ele é igual aos
   vizinhos de propósito: um ícone vermelho parado no rodapé parece aviso de
   erro, e o rodapé é lugar de ficar quieto. O vermelho aparece na hora em que
   ele importa — quando a mão está indo clicar. */
.rs-rodape-sair:hover { background: rgba(163, 52, 31, .10); color: #a3341f; }
.rs-rodape-sair:focus-visible { outline-color: #a3341f; }
body.dark .rs-rodape-sair:hover { background: rgba(240, 160, 140, .14); color: #f0a08c; }
body.dark .rs-rodape-botao { color: #b8a894; }
body.dark .rs-rodape-botao:hover { background: rgba(222, 192, 120, .14); color: #dec078; }
body.dark .rs-rodape-botao:focus-visible { outline-color: #dec078; }

/* ==========================================================================
   CONFIGURAÇÕES NUMA TELA SÓ

   A janela tem duas partes que vivem em lugares diferentes do HTML:
     - a MOLDURA (fundo escuro, menu de categorias, botão de fechar), que o
       login.js desenha e é filha do <body>;
     - o CONTEÚDO, que é a tela de configuração do próprio Chatwoot e continua
       exatamente onde o Vue a deixou.

   As duas se encontram por COORDENADA: a moldura ocupa uma área definida
   abaixo, e o conteúdo é posicionado com `fixed` nas mesmas medidas, na parte
   da direita. Por isso as medidas aparecem repetidas — se mudar uma, mude a
   outra, ou o conteúdo desencontra da moldura.
   ========================================================================== */

/* As medidas da janela, num lugar só. */
:root {
  /* MEDIDO em 02/09/2026, tela de 1920x889: a faixa do logo vai de y=4 a
     y=76, e 4vh dava 36px. A janela de Configuracoes comecava DENTRO do logo
     e o cortava ao meio — a imagem vai de x=16 a x=121, e o menu lateral
     comecava em x=77.

     `max()` e nao um valor fixo: em tela alta 4vh passa de 84 e a janela
     ganha o respiro proporcional de sempre; em tela baixa o piso de 84px
     garante que ela sempre comece ABAIXO da faixa do logo (76px + 8 de
     folga). Amarrar so ao vh traria o defeito de volta em telas curtas, que
     e onde ele apareceu. */
  --rs-config-margem-v: max(4vh, 84px);
  --rs-config-margem-h: 4vw;
  --rs-config-menu: 250px;
}

.rs-config-fundo {
  position: fixed;
  inset: 0;
  z-index: 9990;
  background: rgba(20, 16, 12, .55);
}

/* A moldura: um retângulo claro atrás de tudo, para o conteúdo emoldurado não
   ficar boiando sobre o painel. */
.rs-config-fundo::before {
  content: '';
  position: fixed;
  inset: var(--rs-config-margem-v) var(--rs-config-margem-h);
  background: #ffffff;
  border: 1px solid #ead7a6;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(42, 37, 32, .3);
}
body.dark .rs-config-fundo::before {
  background: #282320;
  border-color: #544738;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}

/* ---- o menu de categorias, à esquerda ---- */
/* ITENS DE ADMINISTRADOR NA JANELA DE CONFIGURACOES.

   Medido em 02/09/2026 na sessao do Eduardo (atendente): dos 16 itens
   navegaveis do menu, 11 voltavam para /dashboard sem aviso nenhum —
   Conta, Equipe, Caixas de Entrada, Etiquetas, Modelos, Times, Automacao,
   Robos, Atributos, Integracoes e Fluxo de Conversa. O 12o, "Administracao",
   abre o console de super admin. Sobravam funcionando: Meu perfil,
   Aparencia, Atalhos do teclado, Respostas Prontas, Macros e Encerrar sessao.

   O gate e por CSS de proposito, e ancorado na AUSENCIA da marca: enquanto o
   papel nao resolveu, `html` nao tem `reisol-e-admin` e os itens ficam
   escondidos. Errar para o lado de esconder e o certo aqui — um item que
   aparece um instante depois e um detalhe; um item que o atendente clica e
   nao leva a lugar nenhum e o defeito que estamos consertando.

   A marca vem de /api/v1/profile (bloco do rodape), nao do palpite de DOM do
   dashboard-scripts.html. Ver o comentario grande la. */
html:not(.reisol-e-admin) .rs-config-item[data-rs-so-admin="1"] {
  display: none !important;
}

/* FORA DO ATENDENTE — decisao de produto, nao limitacao tecnica.

   Pedido do dono em 10/09/2026: a janela de configuracoes do atendente fica
   so com o perfil. Atalhos do teclado, Respostas Prontas e Macros ABREM e
   funcionam para ele; sairam porque nao e ali que se trabalha. Encerrar
   sessao saiu por outro motivo: virou botao no rodape, ao lado da
   engrenagem, que e onde a mao procura. */
html:not(.reisol-e-admin) .rs-config-item[data-rs-fora-atendente="1"] {
  display: none !important;
}

/* Um grupo que ficou sem nenhum item visivel some junto com o titulo, senao
   sobra um cabecalho "A Assistencia" pairando sobre o vazio. Vale para as
   duas razoes de esconder: depois do pedido de 10/09 os grupos "A Assistencia"
   e "Avancado" ficam vazios inteiros na visao do atendente. */
html:not(.reisol-e-admin) .rs-config-grupo:not(:has(.rs-config-item:not([data-rs-so-admin="1"]):not([data-rs-fora-atendente="1"]))) {
  display: none !important;
}

.rs-config-lado {
  position: fixed;
  top: var(--rs-config-margem-v);
  bottom: var(--rs-config-margem-v);
  inset-inline-start: var(--rs-config-margem-h);
  width: var(--rs-config-menu);
  z-index: 2;
  overflow-y: auto;
  padding: 16px 10px 18px;
  background: #f4f1ea;
  border-inline-end: 1px solid #ece2d2;
  border-start-start-radius: 14px;
  border-end-start-radius: 14px;
}
body.dark .rs-config-lado {
  background: #1e1a16;
  border-inline-end-color: #3b332b;
}

/* ==========================================================================
   A BARRA DE ROLAGEM DA JANELA DE CONFIGURAÇÕES

   Medida em 10/09/2026, na sessão do atendente: 15 px de largura,
   `scrollbar-width: auto`, `scrollbar-color: auto` — ou seja, a barra NATIVA
   do Windows, cinza, com setinha em cima e embaixo, encostada na borda
   arredondada da janela. Ao lado de uma janela de cantos redondos e paleta
   creme, ela parece defeito, e é a primeira coisa que a vista pega.

   Não é exclusividade do atendente: a barra é a mesma para o administrador. O
   que muda é que a página do perfil tem 3.656 px de altura, então para quem só
   tem o perfil ela está SEMPRE lá, ocupando a lateral inteira.

   Só o painel que rola recebe o estilo. Pintar a barra do documento todo
   mexeria em telas que não são minhas.
   ========================================================================== */
html.reisol-config-aberta div.flex.flex-grow.overflow-hidden > main div[class*="overflow-auto"] {
  scrollbar-width: thin;
  scrollbar-color: #cfc6b4 transparent;
}
html.reisol-config-aberta div.flex.flex-grow.overflow-hidden > main div[class*="overflow-auto"]::-webkit-scrollbar {
  width: 10px;
}
html.reisol-config-aberta div.flex.flex-grow.overflow-hidden > main div[class*="overflow-auto"]::-webkit-scrollbar-track {
  background: transparent;
}
html.reisol-config-aberta div.flex.flex-grow.overflow-hidden > main div[class*="overflow-auto"]::-webkit-scrollbar-thumb {
  background: #d8d0c0;
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
}
html.reisol-config-aberta div.flex.flex-grow.overflow-hidden > main div[class*="overflow-auto"]::-webkit-scrollbar-thumb:hover {
  background: #b8ac96;
  background-clip: content-box;
}

body.dark div.flex.flex-grow.overflow-hidden > main div[class*="overflow-auto"] {
  scrollbar-color: #4a4038 transparent;
}
body.dark div.flex.flex-grow.overflow-hidden > main div[class*="overflow-auto"]::-webkit-scrollbar-thumb {
  background: #443b32;
  background-clip: content-box;
}
body.dark div.flex.flex-grow.overflow-hidden > main div[class*="overflow-auto"]::-webkit-scrollbar-thumb:hover {
  background: #5c5044;
  background-clip: content-box;
}

/* A lateral também rola, e o índice do perfil a deixou mais alta — antes dele
   ela raramente estourava, agora estoura sempre. Mesma barra fina, para não
   trocar a nativa de um lado pela nativa do outro. */
.rs-config-lado {
  scrollbar-width: thin;
  scrollbar-color: #cfc6b4 transparent;
}
.rs-config-lado::-webkit-scrollbar { width: 10px; }
.rs-config-lado::-webkit-scrollbar-track { background: transparent; }
.rs-config-lado::-webkit-scrollbar-thumb {
  background: #d8d0c0;
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
}
.rs-config-lado::-webkit-scrollbar-thumb:hover {
  background: #b8ac96;
  background-clip: content-box;
}
body.dark .rs-config-lado { scrollbar-color: #4a4038 transparent; }
body.dark .rs-config-lado::-webkit-scrollbar-thumb {
  background: #443b32;
  background-clip: content-box;
}
body.dark .rs-config-lado::-webkit-scrollbar-thumb:hover {
  background: #5c5044;
  background-clip: content-box;
}

/* Secoes do perfil que o atendente nao ve: Assinatura, Sessoes Ativas e Token
   de acesso. Quem marca a <section> e o bloco do indice no login.js, lendo o
   titulo; aqui so se apaga o que ele marcou.

   O gate e a AUSENCIA de `reisol-e-admin`, igual ao resto: enquanto o papel
   nao resolveu, esconder e o lado certo de errar. */
html:not(.reisol-e-admin) [data-rs-secao-fora-atendente="1"] {
  display: none !important;
}

/* ---- o índice do perfil, no lugar do menu, para o atendente ---- */

/* O índice é subordinado ao cabeçalho "Você" que já está acima dele, então
   entra sem título próprio e com um fio à esquerda — a mesma leitura de uma
   lista aninhada, sem gastar mais uma linha de cabeçalho na largura do menu. */
.rs-perfil-indice {
  margin-inline-start: 8px;
  padding-inline-start: 8px;
  border-inline-start: 1px solid #e2dccd;
}

.rs-perfil-indice-item {
  font-size: 13px;
  opacity: .82;
}
.rs-perfil-indice-item:hover { opacity: 1; }

/* A seção em que a leitura está ganha peso e a cor da casa. O fundo fica de
   fora de propósito: o item ativo do menu de cima já usa fundo, e dois fundos
   acesos ao mesmo tempo brigariam pela atenção. */
.rs-perfil-indice-item.rs-perfil-indice-ativo {
  opacity: 1;
  font-weight: 650;
  color: #855b22;
}

body.dark .rs-perfil-indice { border-inline-start-color: #3b332b; }
body.dark .rs-perfil-indice-item.rs-perfil-indice-ativo { color: #dec078; }

.rs-config-topo {
  padding: 0 8px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #6f675a;
}
body.dark .rs-config-topo { color: #b8a894; }

.rs-config-grupo { margin-bottom: 14px; }

.rs-config-grupo-titulo {
  padding: 6px 8px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  /* #6f675a, e não o #8d8675 de antes.

     TODA a família de texto apagado deste arquivo era #8d8675, e ela não
     passava no contraste mínimo. Medido em 03/09/2026 com a fórmula da WCAG:
     #8d8675 sobre o creme #f4f1ea dá razão 3,21, e o mínimo para texto
     pequeno é 4,5. Isto pegava os títulos de seção do menu (11px), o
     "Mostrar mais", os contadores da árvore, os rótulos da busca — tudo o que
     é escrito pequeno de propósito para não competir com o conteúdo.

     #6f675a dá 4,95 sobre o mesmo creme: passa, e não é tom novo — já era
     usado nos filtros da árvore, então a paleta não cresceu.

     No ESCURO a mesma cor não serve: #8d8675 sobre o fundo da janela dava
     4,29, também abaixo do mínimo, e escurecer pioraria. Lá vale #b8a894,
     que dá entre 6,7 e 7,5 conforme o fundo. */
  color: #6f675a;
}
body.dark .rs-config-grupo-titulo { color: #b8a894; }

.rs-config-item {
  display: block;
  width: 100%;
  padding: 7px 10px;
  margin-bottom: 1px;
  text-align: left;
  font: inherit;
  font-size: 14px;
  color: #2a2520;
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
}
.rs-config-item:hover { background: rgba(133, 91, 34, .10); }
.rs-config-item:focus-visible { outline: 2px solid #855b22; outline-offset: -2px; }
.rs-config-item-ativo,
.rs-config-item-ativo:hover {
  background: #f5ead0;
  color: #855b22;
  font-weight: 650;
}
.rs-config-perigo { color: #a3341f; }
.rs-config-perigo:hover { background: rgba(163, 52, 31, .10); }
body.dark .rs-config-item { color: #f0ebe2; }
body.dark .rs-config-item:hover { background: rgba(222, 192, 120, .12); }
body.dark .rs-config-item-ativo,
body.dark .rs-config-item-ativo:hover { background: #4e3417; color: #dec078; }
body.dark .rs-config-perigo { color: #f0a08c; }
body.dark .rs-config-perigo:hover { background: rgba(240, 160, 140, .12); }

.rs-config-aviso {
  margin: 10px 6px 0;
  padding: 9px 10px;
  font-size: 12.5px;
  line-height: 1.4;
  color: #a3341f;
  background: rgba(163, 52, 31, .08);
  border: 1px solid #a3341f;
  border-radius: 8px;
}
body.dark .rs-config-aviso { color: #f0a08c; border-color: #f0a08c; }
.rs-config-aviso.rs-oculto { display: none; }

/* ---- fechar ---- */
.rs-config-fechar {
  position: fixed;
  top: calc(var(--rs-config-margem-v) + 12px);
  inset-inline-end: calc(var(--rs-config-margem-h) + 12px);
  /* z-index acima de tudo, inclusive da janela. Com o valor antigo (4) o
     botão existia, estava no lugar e mesmo assim não dava para clicar nem
     enxergar: a paleta do Ctrl+K (<ninja-keys>) é um elemento invisível que
     ocupa a área toda e ficava por cima. Conferido com elementFromPoint —
     quem respondia no ponto do X era ela, não ele. */
  z-index: 9995;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #6f675a;
  cursor: pointer;
}
/* Fundo e contorno próprios, e não só o ícone: o X fica sobre o conteúdo da
   configuração, que é branco. Um traço fino cinza sobre branco some — foi o
   que aconteceu na primeira versão, e um botão de fechar que não se enxerga
   é o mesmo que não existir. */
.rs-config-fechar {
  background: #f4f1ea;
  border: 1px solid #ece2d2;
}
body.dark .rs-config-fechar { background: #1e1a16; border-color: #3b332b; }
.rs-config-fechar:hover { background: rgba(133, 91, 34, .12); color: #855b22; }
.rs-config-fechar:focus-visible { outline: 2px solid #855b22; outline-offset: 1px; }
body.dark .rs-config-fechar { color: #b8a894; }
body.dark .rs-config-fechar:hover { background: rgba(222, 192, 120, .16); color: #dec078; }
.rs-config-fechar::before,
.rs-config-fechar::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 15px; height: 2px;
  background: currentColor;
  border-radius: 1px;
}
.rs-config-fechar::before { transform: translate(-50%, -50%) rotate(45deg); }
.rs-config-fechar::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* ---- o conteúdo do Chatwoot, emoldurado ----
   As mesmas medidas da moldura, descontando o menu. O conteúdo continua sendo
   o do painel — só passa a ocupar esta área em vez da tela inteira. */
html.reisol-config-aberta div.flex.flex-grow.overflow-hidden > main > div:not([class*="fixed"]) {
  position: fixed;
  top: var(--rs-config-margem-v);
  bottom: var(--rs-config-margem-v);
  inset-inline-start: calc(var(--rs-config-margem-h) + var(--rs-config-menu));
  inset-inline-end: var(--rs-config-margem-h);
  /* width/height AUTO, e com !important.
     A tela de configuração carrega `w-full h-full` do Chatwoot — 100% da
     largura e da altura. Num elemento `fixed`, isso vence o `right` e o
     `bottom`: ele encostava no canto de cima e esquerdo certos e depois
     esticava 1400x900, passando por baixo da moldura e vazando pela direita.
     Com `auto`, quem define o tamanho voltam a ser as quatro coordenadas —
     e é o que o mantém dentro da janela, com os cantos arredondados
     aparecendo de verdade. */
  width: auto !important;
  height: auto !important;
  z-index: 9992;
  overflow: auto;
  padding: 46px 4px 4px;
  border-start-end-radius: 14px;
  border-end-end-radius: 14px;
}

/* O respiro de 46px no topo é para o conteúdo não passar por baixo do X. */

/* Enquanto a janela está aberta, o painel atrás continua desenhado (a coluna
   da esquerda, a lista) — é o que dá a sensação de estar POR CIMA, e não de
   ter trocado de tela. Só não pode receber clique. */
html.reisol-config-aberta div.flex.flex-grow.overflow-hidden > aside {
  pointer-events: none;
}

/* A paleta do Ctrl+K é um elemento invisível que se espalha pela área toda e
   engole cliques. Com a janela de configurações aberta, ela não tem o que
   fazer ali — e sem esta linha era ela quem recebia o clique do X e dos
   cantos da janela. Volta ao normal assim que a janela fecha. */
html.reisol-config-aberta div.flex.flex-grow.overflow-hidden > main > ninja-keys {
  pointer-events: none;
}

/* ---- os números dos relatórios podem quebrar de linha ----

   Os cartões de Análises põem os indicadores lado a lado numa linha que não
   quebra. Isso foi desenhado para a tela inteira; dentro da janela a área é
   menor, e medido em 800px de navegador os quatro indicadores de "Conversas
   Abertas" pediam 240px dentro de 238 — os rótulos entravam uns nos outros e
   saía "Não atendidasatribuídas". No cartão ao lado virava "DispoOnívpeaDdesco".

   Deixar quebrar resolve sem mexer em largura nenhuma: onde havia espaço,
   nada muda; onde não havia, os indicadores passam a ocupar duas linhas em
   vez de se sobreporem. Escopo preso à janela — fora dela o relatório continua
   exatamente como o Chatwoot desenha.

   O `min-width` nos filhos é o que faz a quebra acontecer de verdade: eles
   vêm com `flex-1 min-w-0`, e `min-w-0` autoriza encolher abaixo do próprio
   texto. Com essa autorização, `flex-wrap` não tem efeito nenhum — em vez de
   pular para a linha de baixo, eles espremem e o texto vaza. Um piso de
   largura tira a saída do "espremer" e sobra a de quebrar. */
html.reisol-config-aberta .card-body {
  flex-wrap: wrap;
  gap: 6px 16px;
}
html.reisol-config-aberta .card-body > * {
  min-width: 6rem;
}

/* A dupla de cartões do topo ("Conversas Abertas" e "Status do agente") segue
   a mesma lógica: 65% e 35% de uma tela inteira são confortáveis; 35% da área
   da janela dava 156px, e o título "Status do agente" já não cabia. Abaixo de
   ~34rem eles passam um debaixo do outro, cada um com a largura toda. */
html.reisol-config-aberta div:has(> .conversation-metric) {
  flex-wrap: wrap;
}
html.reisol-config-aberta div:has(> .conversation-metric) > * {
  min-width: 17rem;
}

/* ---- o painel próprio (Aparência) ---- */
.rs-config-proprio {
  display: none;
  position: fixed;
  top: var(--rs-config-margem-v);
  bottom: var(--rs-config-margem-v);
  inset-inline-start: calc(var(--rs-config-margem-h) + var(--rs-config-menu));
  inset-inline-end: var(--rs-config-margem-h);
  z-index: 9993;
  overflow: auto;
  padding: 46px 24px 24px;
  background: #ffffff;
  border-start-end-radius: 14px;
  border-end-end-radius: 14px;
}
body.dark .rs-config-proprio { background: #282320; }
.rs-config-mostrando-proprio .rs-config-proprio { display: block; }

/* Com a Aparência aberta, a tela do Chatwoot sai da frente. Ela continua
   carregada (o endereço não mudou), só não é desenhada — e é isso que deixa o
   painel próprio aparecer, já que ele vive numa camada mais baixa que ela. */
html.reisol-config-proprio div.flex.flex-grow.overflow-hidden > main > div:not([class*="fixed"]) {
  display: none !important;
}

.rs-config-conteudo-proprio h2 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 650;
  color: #2a2520;
}
body.dark .rs-config-conteudo-proprio h2 { color: #f0ebe2; }
.rs-config-dica {
  margin: 0 0 18px;
  font-size: 13.5px;
  color: #6f675a;
}
body.dark .rs-config-dica { color: #b8a894; }

.rs-config-temas { display: flex; gap: 10px; }
.rs-config-tema {
  padding: 10px 20px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #2a2520;
  background: #f4f1ea;
  border: 1px solid #ece2d2;
  border-radius: 10px;
  cursor: pointer;
}
.rs-config-tema:hover { border-color: #855b22; }
.rs-config-tema-ativo {
  background: #f5ead0;
  border-color: #855b22;
  color: #855b22;
}
body.dark .rs-config-tema { color: #f0ebe2; background: #211d19; border-color: #3b332b; }
body.dark .rs-config-tema-ativo { background: #4e3417; border-color: #dec078; color: #dec078; }

/* No celular a janela toma a tela toda e o menu vira uma faixa no topo: 250px
   de menu numa tela de 375 não deixariam nada para o conteúdo. */
@media (max-width: 760px) {
  :root {
    --rs-config-margem-v: 0px;
    --rs-config-margem-h: 0px;
    --rs-config-menu: 0px;
  }
  .rs-config-lado {
    inset-inline: 0;
    width: auto;
    bottom: auto;
    height: 152px;
    border-inline-end: 0;
    border-bottom: 1px solid #ece2d2;
    border-radius: 0;
  }
  .rs-config-fundo::before { border-radius: 0; border: 0; }
  html.reisol-config-aberta div.flex.flex-grow.overflow-hidden > main > div:not([class*="fixed"]),
  .rs-config-proprio {
    top: 152px;
    border-radius: 0;
    padding-top: 12px;
  }
  .rs-config-fechar { top: 8px; inset-inline-end: 8px; }
}

/* ==========================================================================
   A ÁRVORE, E O GALHO QUE ABRE POR DENTRO

   As cinco telas ficam sempre à vista, e a que está aberta recebe as
   conversas DENTRO dela. Não há menu suspenso: pedido assim em 03/09/2026,
   com a razão dita em uma frase — "não quero esse checklist".

   `display: contents` na caixa da árvore é o que permite isso sem arrastar
   nada no HTML: os cinco botões sobem para a mesma caixa flex da lista de
   conversas e viram irmãos dela, e aí o `order` (escrito pelo login.js)
   decide quem vem antes de quem. O porquê inteiro está lá, em A ÁRVORE ABRE
   NO PRÓPRIO GALHO.
   ========================================================================== */

/* Preso a `.conversations-list-wrap >` de propósito. Solto, o seletor de id
   (1,0,0) vencia `.rs-arvore-solta` (0,1,0) e a coluna avulsa também virava
   `contents` — e num elemento sem caixa, margem não existe: o recuo de 44px
   que alinha a árvore de Contatos com a das conversas era simplesmente
   ignorado, sem erro nenhum, e os itens continuavam pulando. */
.conversations-list-wrap > #reisol-arvore {
  display: contents;
}

/* Em Contatos e Relatórios não há lista nesta coluna, então não há galho para
   abrir: ali a árvore é uma caixa comum, com as cinco telas empilhadas.

   O recuo de 44px no topo é o TAMANHO EXATO da barra de pesquisa das outras
   telas (34px de altura, 6 de margem em cima, 4 embaixo — medido). Ela não
   existe aqui: a pesquisa da coluna procura conversa, e em Contatos o próprio
   Chatwoot já põe uma busca de contatos no meio da tela.

   Sem esse espaço reservado, a árvore começava 44px mais alto em Contatos, e
   os cinco itens pulavam para cima ao entrar e para baixo ao sair. A barra da
   esquerda tem de ser a mesma em qualquer tela — se não pela mesma coisa
   ocupando o lugar, então pelo mesmo vazio. */
.rs-arvore-solta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 8px 8px;
  /* 38 e não 44: os 6px que faltam são o `padding-top` desta própria caixa,
     que a versão em `contents` não tem. Conferido item a item — as duas
     árvores nascem em y=192. */
  /* ERA 38px, PARA ALINHAR COM A ARVORE DAS CONVERSAS — 04/09/2026 saiu.
     Nas telas com lista, a arvore comeca abaixo da barra de pesquisa, e este
     recuo fazia a de Contatos comecar na mesma altura: trocar de tela nao
     mexia o menu de lugar. O preco era um vao vazio em Contatos e Relatorios,
     onde nao ha barra nenhuma para ocupa-lo — e o dono leu isso como defeito,
     que e o que decide. O menu passa a subir ao entrar em Contatos.
     Para voltar atras: `margin-top: 38px`. */
  margin-top: 0;
}

.conversations-list-wrap > div:first-child > div:first-child {
  min-width: 0;
  flex: 1 1 auto;
  justify-content: flex-start;
}

/* ==========================================================================
   O LUGAR DA BARRA DE PESQUISA FICA GUARDADO ANTES DELA CHEGAR

   Medido ao trocar de Contatos para Não atendidas, com carimbo de tempo:

     91 ms .... a árvore nasce
     273 ms ... a barra de pesquisa nasce

   São 182ms em que a coluna existe SEM a barra. Quando ela finalmente chega,
   empurra tudo o que está embaixo 44px para baixo, de uma vez. Esse era o
   segundo salto da troca — o que fazia a animação parecer que "travava e
   ficava no meio": ela terminava certinho no lugar previsto, e então a barra
   nascia e mudava o lugar previsto.

   Animar em cima disso seria remendo. A causa é a coluna mudar de altura
   depois de pronta, e a cura é não mudar: um vazio da altura exata da barra
   (34px de campo + 6 de margem em cima + 4 embaixo) segura o lugar desde o
   primeiro quadro e sai de cena no instante em que a barra de verdade entra.

   `order: 1` põe o vazio na mesma posição da barra — logo abaixo do
   cabeçalho, antes da árvore. */
.conversations-list-wrap::before {
  content: '';
  order: 1;
  flex: 0 0 auto;
  height: 44px;
}
.conversations-list-wrap:has(#reisol-busca-coluna)::before {
  display: none;
}

/* ==========================================================================
   NADA NASCE NA FRENTE DA FILA

   `order` vale ZERO por padrão, e zero é a primeira posição. Todo elemento
   que o Vue cria dentro da coluna — o aviso de lista vazia, a lista, um
   carregando — aparece portanto NO TOPO, colado no cabeçalho, até o login.js
   numerá-lo. Medido: 129ms de um bloco de 55px empurrando a árvore inteira
   para baixo, e depois sumindo de lá.

   O login.js agora numera na mesma volta em que o elemento nasce (ver O
   VIGIA SÓ PARA A COLUNA), então essa janela deixou de existir. Esta regra é
   o cinto de segurança: se por qualquer motivo o número demorar, o recém-
   chegado espera no FIM da coluna, onde há espaço vazio, em vez de entrar
   empurrando quem já estava.

   O cabeçalho é a exceção — ele é o primeiro no HTML e tem de continuar
   sendo o primeiro na tela mesmo antes de qualquer numeração. */
.conversations-list-wrap > * {
  order: 90;
}
.conversations-list-wrap > *:first-child {
  order: 0;
}

/* O QUE NUNCA MUDA DE LUGAR É NUMERADO AQUI, e não pelo JavaScript.

   A barra de pesquisa é sempre a segunda; os cinco itens da árvore são
   sempre 10, 20, 30, 40 e 50. Escrever isso no CSS tem duas vantagens sobre
   escrever no JavaScript: vale desde o primeiro quadro em que o elemento
   existe — não há intervalo nenhum entre nascer e ficar no lugar — e são
   cinco escritas a menos no DOM em cada passagem, ou seja, menos mutação
   para o observador acordar à toa.

   Sobra para o JavaScript só o que de fato varia: qual galho está aberto e o
   que cai dentro dele. */
.conversations-list-wrap > #reisol-busca-coluna,
.conversations-list-wrap > #reisol-busca-lista {
  order: 1;
}

.rs-arv-item[data-rs-galho="0"] { order: 10; }
.rs-arv-item[data-rs-galho="1"] { order: 20; }
.rs-arv-item[data-rs-galho="2"] { order: 30; }
.rs-arv-item[data-rs-galho="3"] { order: 40; }
.rs-arv-item[data-rs-galho="4"] { order: 50; }

/* ---- o conteúdo do galho aberto ----

   O recuo e o fio à esquerda são o que fazem as conversas serem lidas como
   parte do item, e não como um bloco solto que por acaso está embaixo dele.
   É o mesmo fio dos filhos da árvore antiga, agora aplicado ao que o Vue
   desenha.

   `flex: 1 1 auto` com `min-height: 0` na lista: ela cresce para ocupar o que
   sobra da coluna, e os itens que vêm depois (Menções, Não atendidas,
   Contatos) descem para o pé — a árvore continua inteira, de cima a baixo. */
.conversations-list-wrap > .rs-galho-conteudo {
  /* 16px no total, e não mais: cada pixel de recuo sai da largura do nome de
     quem está conversando. Com 28px, "Eduardo Vinícius" já virava "Eduard...".
     O fio faz o trabalho de mostrar o aninhamento; o recuo grande só custa. */
  margin-inline-start: 12px;
  padding-inline-start: 4px;
  /* O fio é DOURADO, e não cinza: ele desce do item aceso, e ler a mesma cor
     nos dois é o que faz o bloco parecer sair do item em vez de estar
     apenas embaixo dele. Era esta a "junção" que não colava. */
  border-inline-start: 2px solid #e2cfa5;
}
body.dark .conversations-list-wrap > .rs-galho-conteudo {
  border-inline-start-color: #6b5426;
}

/* ---- a troca de galho, com movimento ----

   Sem isto, clicar em Grupos trocava o conteúdo num piscar seco: o bloco
   antigo sumia e o novo aparecia pronto, no mesmo quadro. O olho lê isso
   como travamento, não como troca.

   A entrada vem de cima, do lado do item que foi clicado, e ABRE: começa
   ligeiramente achatada contra o item (`scaleY .96`, com a origem no topo) e
   cresce até o tamanho certo. É o que dá a sensação de expandir em vez de
   aparecer — pedido em 03/09/2026, depois de a primeira versão (só esmaecer e
   descer 6px, em 0,18s) continuar sendo lida como salto.

   0,3s com a curva `(.22,.8,.28,1)`: sai rápido e chega devagar, que é como
   as coisas param no mundo real. Os itens da árvore usam ESTA MESMA duração e
   curva ao deslizar, e é a igualdade que amarra a troca num movimento só.

   Quem reinicia a animação a cada tela é o login.js, trocando a classe. */
@keyframes rs-galho-abrindo {
  from {
    opacity: 0;
    transform: translateY(-10px) scaleY(.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* `backwards`, e NUNCA `both`.

   Com `both` o elemento fica preso no PRIMEIRO quadro da animação enquanto
   ela não roda — e ela não roda quando a aba está em segundo plano, quando a
   máquina engasga, ou em qualquer pausa do relógio de animação do navegador.
   O primeiro quadro é `opacity: 0`: a lista de conversas some, e não volta.
   Visto aqui: as abas e a lista apagadas depois de trocar de tela, esperando
   um relógio que não andava.

   Com `backwards` o estado final é o natural do CSS — visível. Se a animação
   não rodar, não há animação e pronto; ninguém fica com a tela em branco. */
.conversations-list-wrap > .rs-galho-entrando {
  transform-origin: top center;
  animation: rs-galho-abrindo .3s cubic-bezier(.22, .8, .28, 1) backwards;
}

/* Quem prefere o computador sem animação nenhuma continua sem. */
@media (prefers-reduced-motion: reduce) {
  .conversations-list-wrap > .rs-galho-entrando { animation: none; }
}

/* A lista rola dentro do galho, e não a coluna inteira.

   `flex: 0 1 auto` — cresce só até onde tem conversa, e encolhe (rolando por
   dentro) quando tem mais do que cabe. Com `1 1 auto` ela engolia todo o
   espaço que sobrava, e num galho de uma conversa só ficava um vão em branco
   de meia tela entre ela e o próximo item da árvore. */
.conversations-list-wrap > .rs-galho-conteudo[class*="overflow-y-auto"] {
  flex: 0 1 auto;
  min-height: 0;
}

/* A CAIXA VAZIA DEBAIXO DO AVISO PERDE O FIO.

   Sem conversa nenhuma, o Chatwoot ainda desenha a caixa da lista — medida:
   24px de altura, sem nada dentro. Com o fio do galho descendo por ela,
   virava um retângulo vazio pendurado embaixo de "Nenhum grupo com conversa
   aberta": a sobra de desenho que foi apontada.

   ESCONDER A CAIXA NÃO SERVE, e isto custou uma tentativa: a lista é
   virtualizada (`contain: size style` no filho) — ela só desenha as linhas
   depois de saber a própria altura. Com `display: none` ela nunca ganha
   altura, nunca desenha, e a conversa que existia SOME. Medido: "Não
   atribuídas 1" no cabeçalho e zero linhas na lista.

   Então só o fio sai. Os 24px continuam lá, agora invisíveis, e a lista
   continua podendo se medir e desenhar quando a primeira conversa chegar. */
.conversations-list-wrap > .rs-galho-conteudo[class*="overflow-y-auto"]:not(:has(.conversation)) {
  border-inline-start-color: transparent;
}

/* ==========================================================================
   GALHO VAZIO NÃO DEIXA BURACO

   Apontado em 08/09/2026, em Menções no tema escuro. O galho aberto e sem
   conversa deixava um vão entre o item aceso e o seguinte. Medido: 4px entre
   dois itens quaisquer, e 28px logo abaixo do aceso — sete vezes. Sobrava a
   caixa da lista, que fica com 24px de altura mesmo sem nada dentro (e a
   mensagem de vazio já não aparece, por decisão anterior).

   POR QUE A CONDIÇÃO É O AVISO DE VAZIO, E NÃO "não tem conversa"

   Já tentei `:not(:has(.conversation))` com `display:none` aqui, e QUEBROU: a
   lista é virtualizada — ela só desenha as linhas depois de saber a própria
   altura. Sem altura, nunca desenha, e a conversa que existia SUMIA da tela.
   Medido na época: "Não atribuídas 1" no cabeçalho e zero linhas na lista.

   O `<p>` de vazio é outro sinal, e é confiável: o Chatwoot só o desenha
   depois de concluir que não há nada. Enquanto carrega, ele não existe — e a
   caixa mantém a altura de que precisa para se medir. Conferido nas quatro
   telas:

     Menções e Sistema (0 conversas)  -> aviso presente, caixa de 24px
     Conversas (2) e Grupos (1)       -> aviso ausente, caixa de 184 e 148px

   Ou seja: a regra só fecha a caixa quando é certo que não há o que desenhar. */
.conversations-list-wrap:has(> p.rs-galho-conteudo)
  > div.rs-galho-conteudo[class*="overflow-y-auto"] {
  display: none;
}

/* O aviso de lista vazia dentro do galho: alinhado à esquerda, junto do fio,
   em vez de centralizado no meio de uma faixa larga. */
.conversations-list-wrap > p.rs-galho-conteudo {
  justify-content: flex-start !important;
  padding: 10px 8px 14px !important;
  overflow: visible !important;
  font-size: 13px;
  color: #6f675a;
}
body.dark .conversations-list-wrap > p.rs-galho-conteudo { color: #b8a894; }

/* ==========================================================================
   O BOTÃO QUE NÃO FAZIA NADA

   O terceiro ícone do cabeçalho da lista (a seta →|) é o "recolher a barra
   lateral" de fábrica do Chatwoot. Ele encolhe o <aside>, e nesta instalação
   o <aside> é `display: contents` — largura zero, sem caixa própria — porque
   a navegação virou coluna única. Conferido clicando: a seta troca de lado e
   nada mais muda na tela.

   Um botão que responde ao clique e não muda nada é pior que um botão
   ausente: a pessoa conclui que o sistema travou. Ele sai, e de quebra
   devolve 28px de largura ao nome da tela.
   ========================================================================== */
.conversations-list-wrap > div:first-child button[class*="ltr:rotate-0"] {
  display: none !important;
}

/* ==========================================================================
   O PAINEL DE FILTROS: O TEXTO SAÍA POR BAIXO DOS BOTÕES

   "Apply filters" cabe numa linha; "Aplicar filtros" não. Os três botões do
   rodapé daquele painel têm altura fixa de fábrica, então o rótulo traduzido
   quebrava em duas linhas e a segunda vazava por baixo da borda — dava para
   ler "filtros" solto, fora do botão. Vale para "Adicionar filtro" e
   "Limpar filtros" pelo mesmo motivo.

   Medido: os três pedem 36px de conteúdo dentro de 32px de caixa; todos os
   outros botões do painel pedem exatamente os 32 que têm. Por isso a regra é
   "pode crescer" (`height:auto` com `min-height` de 2rem) e não uma altura
   nova: quem já cabia não muda de tamanho, e só os três traduzidos crescem.
   ========================================================================== */
#conversationFilterTeleportTarget button {
  height: auto !important;
  min-height: 2rem;
  padding-block: .3rem !important;
  line-height: 1.2 !important;
  text-align: center;
}

/* ==========================================================================
   A TABELA DE ATALHOS DO TECLADO, EM DUAS COLUNAS QUE NÃO CABIAM

   Ela é uma grade de duas colunas fixas, e cada linha traz `min-w-[25rem]` —
   400px de largura mínima. Medido: as colunas ficaram com 270px cada, e as
   linhas de 400px vazaram por cima da coluna vizinha. O resultado era
   "Alternar Modal" escrito por cima de "Resolver e ir para o próximo", com as
   teclas embaralhadas entre os dois.

   `auto-fit` com o mesmo piso de 25rem resolve pela raiz: onde couberem duas
   colunas de 400px, ficam duas; onde não couber, fica uma, e nada se
   sobrepõe. Não é um valor novo inventado — é o `min-w` que a própria tabela
   já declara, agora respeitado também pela grade.
   ========================================================================== */
div.modal-container div.grid.grid-cols-2:has(> div[class*="min-w-[25rem]"]) {
  grid-template-columns: repeat(auto-fit, minmax(min(25rem, 100%), 1fr));
}

.rs-arv-item {
  /* `flex: 0 0 auto` e não `display:block`: dentro da lista de conversas os
     botões são itens de uma caixa flex em coluna (a árvore é
     `display: contents`), e sem isto eles esticavam ou encolhiam junto com
     ela. Na coluna avulsa, que é flex também, vale o mesmo. */
  flex: 0 0 auto;
  display: block;
  /* Margem em vez de padding no pai: o pai não tem mais caixa própria.

     12px DE MARGEM, E NÃO 8: é a borda da coluna.

     Medido em 08/09/2026, tomando a lateral da coluna como zero: a caixa da
     pesquisa começa em 12 e termina em 13; o item da árvore começava em 8 e
     terminava em 9. Quatro pixels a mais de cada lado — e como o item aceso
     tem fundo, esses quatro pixels viravam um retângulo VISIVELMENTE mais
     largo que a barra de pesquisa logo acima. Dois blocos empilhados com
     bordas diferentes é o tipo de coisa que se nota sem saber o que se está
     notando.

     O padding cai de 11 para 7 na mesma medida: o texto continua começando
     exatamente onde começava (19px da borda), então nada se move na leitura —
     só o realce encolhe para caber no alinhamento da coluna. */
  margin: 2px 12px;
  padding: 9px 7px;
  text-align: left;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #2a2520;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  /* Duas transições, e a de `transform` é a que importa: é ela que o login.js
     usa para levar cada item do lugar antigo até o novo quando o galho troca
     (ver OS ITENS DA ÁRVORE DESLIZAM). A curva é a mesma da entrada do
     conteúdo — sai rápido, chega devagar —, e é essa igualdade que faz a
     troca inteira parecer um movimento só, e não três coisas soltas
     acontecendo por perto. */
  transition:
    transform .3s cubic-bezier(.22, .8, .28, 1),
    background-color .2s ease,
    color .2s ease;
}
.rs-arv-item[data-rs-galho="0"] { margin-top: 4px; }
/* O último item encosta no rodapé da coluna quando o galho aberto é o de
   cima; um respiro embaixo evita que ele fique colado no perfil. */
.rs-arv-item:last-of-type { margin-bottom: 6px; }
.rs-arvore-solta .rs-arv-item { margin-inline: 0; }
.rs-arv-item:hover { background: rgba(133, 91, 34, .09); }
.rs-arv-item:focus-visible { outline: 2px solid #855b22; outline-offset: -2px; }
body.dark .rs-arv-item { color: #f0ebe2; }
body.dark .rs-arv-item:hover { background: rgba(222, 192, 120, .12); }

/* AQUI VIVIAM OS FILTROS DENTRO DA ÁRVORE — removidos em 03/09/2026.

   Quatro famílias (`.rs-arv-filhos`, `.rs-arv-soltos`, `.rs-arv-filtro`,
   `.rs-arv-conta`), 55 linhas, nenhuma casando com nada. Elas vestiam
   "Minhas / Todos / Não atribuídas" quando esses filtros eram filhos de cada
   tela na árvore. Aquilo foi desfeito a pedido em 02/09/2026 — o filtro
   voltou para o topo da lista, junto do que ele filtra — e o estilo ficou
   órfão.

   Havia também uma razão de fundo para desfazer: o Chatwoot não combina
   pasta com atribuição, então dentro de Conversas e Grupos aqueles filtros
   não valiam nada. Está registrado no login.js, em TELAS.

*/

/* O que está aberto agora usa fundo, e não só cor: na coluna estreita, texto
   dourado sobre fundo claro não se destaca o suficiente para o olho achar de
   relance. */
.rs-arv-atual,
.rs-arv-atual:hover {
  background: #f5ead0;
  color: #855b22;
  font-weight: 650;
}
body.dark .rs-arv-atual,
body.dark .rs-arv-atual:hover { background: #4e3417; color: #dec078; }

/* ==========================================================================
   PESQUISA NA PRÓPRIA COLUNA

   O campo fica onde a barra de pesquisa já estava; os resultados ocupam o
   lugar da lista de conversas enquanto houver texto, e devolvem a lista
   quando o campo esvazia.
   ========================================================================== */

/* ==========================================================================
   O MENU DO SEU NOME ABRE JÁ ENXUTO

   Ele mostra só Disponibilidade e "Marcar offline automaticamente". As outras
   cinco linhas — Atalhos, Perfil, Tema, Administração e Encerrar sessão —
   mudaram para a tela de Configurações.

   POR QUE ISTO É CSS E NÃO CÓDIGO
   Estava em código antes, e o efeito era o menu abrir com as sete linhas e
   encolher no instante seguinte, na frente da pessoa. Folha de estilo é
   aplicada antes de a tela ser pintada: o menu já nasce do tamanho certo.

   A tentativa anterior em CSS falhou porque escondia `li.n-dropdown-item`, e a
   Disponibilidade também é um. A âncora certa é o CONTÊINER: a disponibilidade
   vive numa `div.n-dropdown-section`, e os cinco itens são divs sem classe
   nenhuma. Guardar a seção e esconder o resto separa os dois sem depender de
   texto nem de contagem de posição.

   ESCONDIDO, NUNCA REMOVIDO: a tela de Configurações aciona "Atalhos do
   teclado" e "Encerrar sessão" clicando nestes itens, que são o único lugar
   onde essas ações existem.
   ========================================================================== */
/* Ancorado na classe do <ul> DE FORA. Há dois uls aninhados aqui: o do menu e
   outro dentro da própria seção de disponibilidade. Um seletor solto de `ul`
   pegava os dois — escondia os cinco itens certos e, junto, o conteúdo da
   disponibilidade, deixando o menu com 18px de altura e nada dentro. */
div.flex.flex-grow.overflow-hidden > aside > section:last-of-type
  ul[class*="bg-n-alpha"] > div:not(.n-dropdown-section) {
  display: none !important;
}

/* A barra antiga sai de cena — o campo abaixo faz o papel dela.
   Precisa ser aqui e com `!important`: ela já tinha uma regra `!important`
   própria, mais acima neste arquivo, e o `display:none` que o JS colocava no
   elemento era ignorado. Ficavam as duas barras, uma embaixo da outra.
   Continua no HTML porque o atalho Ctrl+K ainda passa por ela. */
#reisol-busca-lista {
  display: none !important;
}

.rs-busca-col {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 12px 4px;
  padding: 0 10px;
  height: 34px;
  background: #fefefe;
  border: 1px solid #e0d5bd;
  border-radius: 9px;
}
.rs-busca-col:focus-within { border-color: #855b22; }
body.dark .rs-busca-col { background: #141518; border-color: #3b332b; }
body.dark .rs-busca-col:focus-within { border-color: #dec078; }

/* A lupa desenhada, e não escrita: um caractere de lupa muda de forma e de
   tamanho conforme a fonte instalada. */
.rs-busca-col-lupa {
  position: relative;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: #6f675a;
}
.rs-busca-col-lupa::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 10px; height: 10px;
  border: 1.6px solid currentColor;
  border-radius: 50%;
}
.rs-busca-col-lupa::after {
  content: '';
  position: absolute;
  top: 9px; left: 8px;
  width: 6px; height: 1.6px;
  background: currentColor;
  border-radius: 1px;
  transform: rotate(45deg);
  transform-origin: left center;
}
body.dark .rs-busca-col-lupa { color: #b8a894; }

/* Tudo com !important porque o Chatwoot tem estilo GLOBAL para campo de
   busca — medido no elemento: fundo cinza próprio, 40px de altura, 16px de
   margem embaixo e 8/12px de recheio. Sem zerar, o campo aparecia como uma
   caixa dentro da caixa, mais alta que a barra que o contém. */
.rs-busca-col-campo {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  font: inherit !important;
  font-size: 13px !important;
  color: #2a2520 !important;
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}
body.dark .rs-busca-col-campo { color: #f0ebe2 !important; }
/* O X que o próprio navegador põe em input[type=search] — some, porque já há
   um botão de limpar do lado, e os dois juntos confundem. */
.rs-busca-col-campo::-webkit-search-cancel-button { display: none; }
.rs-busca-col-campo::placeholder { color: #6f675a; }
body.dark .rs-busca-col-campo { color: #f0ebe2; }
body.dark .rs-busca-col-campo::placeholder { color: #b8a894; }

/* O X de limpar só existe quando há o que limpar. */
.rs-busca-col-limpar {
  display: none;
  position: relative;
  flex: 0 0 auto;
  width: 20px; height: 20px;
  padding: 0; border: 0; border-radius: 5px;
  background: transparent; color: #6f675a; cursor: pointer;
}
.rs-tem-texto .rs-busca-col-limpar { display: block; }
.rs-busca-col-limpar:hover { background: rgba(133, 91, 34, .12); color: #855b22; }
.rs-busca-col-limpar::before,
.rs-busca-col-limpar::after {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 10px; height: 1.6px;
  background: currentColor; border-radius: 1px;
}
.rs-busca-col-limpar::before { transform: translate(-50%, -50%) rotate(45deg); }
.rs-busca-col-limpar::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* ---- os resultados ----
   Enquanto há pesquisa, a árvore e a lista de conversas saem de cena. Manter
   as duas visíveis empurraria os resultados para fora da tela justamente
   quando eles são o que interessa. */
/* A árvore NÃO entra nesta regra: ela é a navegação e tem de continuar à
   vista durante a pesquisa — quem some com a navegação deixa a pessoa sem
   saber onde está.

   As ABAS entram. "Minhas · Todos · Não atribuídas" filtram a lista de
   conversas da tela; os resultados da pesquisa não passam por elas — vêm da
   busca da conta inteira, incluindo grupos, contatos e o texto das mensagens.
   Deixá-las acesas em cima dos resultados dizia uma mentira ("estes 5 são os
   não atribuídos") e ainda comia 85px de altura no exato momento em que o
   que importa é a resposta. */
.conversations-list-wrap.rs-buscando > div[class*="overflow-y-auto"],
.conversations-list-wrap.rs-buscando > div:has(> ul[class*="min-w-[6.25rem]"]) {
  display: none;
}

.rs-busca-col-resultados {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 8px 10px;
}

.rs-busca-col-secao {
  padding: 10px 6px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #6f675a;
}

.rs-busca-col-aviso {
  padding: 16px 8px;
  font-size: 13px;
  color: #6f675a;
  text-align: center;
}
body.dark .rs-busca-col-aviso { color: #b8a894; }

.rs-busca-col-item {
  display: block;
  width: 100%;
  padding: 7px 8px;
  text-align: left;
  font: inherit;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.rs-busca-col-item:hover { background: rgba(133, 91, 34, .09); }
.rs-busca-col-item:focus-visible { outline: 2px solid #855b22; outline-offset: -2px; }
body.dark .rs-busca-col-item:hover { background: rgba(222, 192, 120, .12); }

.rs-busca-col-nome {
  font-size: 13.5px;
  font-weight: 600;
  color: #2a2520;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.dark .rs-busca-col-nome { color: #f0ebe2; }

/* Duas linhas no máximo: o trecho já vem recortado em volta do que se
   procurou, e uma mensagem longa empurraria os outros resultados para fora. */
.rs-busca-col-sub {
  font-size: 12.5px;
  line-height: 1.35;
  color: #6f675a;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.dark .rs-busca-col-sub { color: #b8a894; }


/* ==========================================================================
   O QUE O CHAO CREME DA LISTA OBRIGA A RECALIBRAR

   Trocar o fundo da lista de conversas nao e so trocar uma cor: tudo que era
   calibrado contra o cinza do Chatwoot passa a ser lido contra o creme da
   marca. Cada valor abaixo foi medido no navegador, antes e depois, nos dois
   temas.
   ========================================================================== */

/* O SEPARADOR DOS CARTOES.
   Medido antes, no tema claro: `border-bottom: 1px rgb(254,254,254)` sobre um
   fundo rgb(254,254,254) — razao 1,00, a cor exata do fundo. E nem era um
   valor so: dois cartoes da mesma lista usavam rgb(254,254,254) e os outros
   dois rgb(244,241,234). Metade da lista tinha um fio invisivel e a outra
   metade nao tinha fio nenhum. Agora e um token so, com contraste de 1,12. */
.conversations-list-wrap .conversation {
  border-bottom-color: #e6ddcb !important;
}
body.dark .conversations-list-wrap .conversation {
  border-bottom-color: #3b332b !important;
}

/* A CONVERSA SELECIONADA.
   O destaque do Chatwoot e um veu cinza, `rgba(215,215,215,.22)`. Sobre
   branco ele escurece o suficiente para se ver; sobre creme, quase nao mexe:
   medido, razao de luminancia 1,05 entre o cartao selecionado e um cartao
   comum — na pratica, invisivel. Passa a ser o dourado da marca, que sobe
   para 1,24 no claro e 1,32 no escuro. O `hover` fica na metade do caminho,
   para os dois estados nao se confundirem. */
.conversations-list-wrap .conversation:hover {
  background-color: rgba(133, 91, 34, .07) !important;
}
.conversations-list-wrap .conversation.active {
  background-color: rgba(133, 91, 34, .16) !important;
}
body.dark .conversations-list-wrap .conversation:hover {
  background-color: rgba(222, 192, 120, .06) !important;
}
body.dark .conversations-list-wrap .conversation.active {
  background-color: rgba(222, 192, 120, .13) !important;
}

/* O TEXTO APAGADO — contadores das abas e carimbo de tempo.
   `text-n-slate-10` e rgb(114,107,92). Sobre branco passava; sobre creme caiu
   para 4,45 (minimo 4,5), e sobre o cartao SELECIONADO, que e mais quente
   ainda, para 4,31. #5f5849 foi escolhido por conta: da 5,12 no pior chao
   (o cartao selecionado) e 5,94 no cartao comum, sem escurecer a ponto de
   competir com o texto principal.

   So `text-n-slate-10`. `text-n-slate-11` foi tentado junto e ACLAROU a
   previa da mensagem, derrubando-a de 4,7 para 4,31 — a medicao antes/depois
   pegou. Corrigir uma cor sem medir a vizinha e como isto acaba. */
.conversations-list-wrap .text-n-slate-10 {
  color: #5f5849 !important;
}
body.dark .conversations-list-wrap .text-n-slate-10 {
  color: #a89d8c !important;
}


/* ==========================================================================
   A PAGINA DE PERFIL COM A CARA DA CASA

   O conteudo dentro da janela de Configuracoes e a tela crua do Chatwoot:
   secoes separadas por um fio, titulo cinza, campos de outra familia. Aqui ela
   passa a usar o mesmo tijolo da tela de Equipe — cartao, titulo de 15px,
   descricao fraca, campo de borda suave.

   Os valores sao os tokens de /var/www/reisol-equipe/equipe.css (linhas 23-41),
   copiados e nao reinventados: e o que faz as duas telas parecerem a mesma
   casa. Se aqueles mudarem, estes tem de mudar junto.

   Escopo: so dentro da janela (`html.reisol-config-aberta`). Fora dela estas
   classes do Tailwind aparecem em outras telas com outro desenho, e mexer
   nelas ali seria estrago.
   ========================================================================== */

html.reisol-config-aberta main .grid.max-w-2xl {
  --p-cartao: #ffffff;
  --p-borda: #e2dccd;
  --p-borda-forte: #cfc5ad;
  --p-texto: #2a2520;
  --p-fraco: #6f675a;
  --p-bronze: #855b22;
  --p-campo: #ffffff;
  --p-principal-texto: #ffffff;
}
/* `html.x body.dark` e nao `body.dark html.x`: a marca da janela vai no
   <html> e a do tema escuro no <body>, entao a ordem no seletor tem de
   seguir a ordem da arvore. Escrito ao contrario, o seletor nunca casa e o
   tema escuro fica sem tokens — o mesmo tipo de regra orfa que deixou a
   coluna de Contatos branca no escuro. */
html.reisol-config-aberta body.dark main .grid.max-w-2xl {
  --p-cartao: #282320;
  --p-borda: #3b332b;
  --p-borda-forte: #544738;
  --p-texto: #f0ebe2;
  --p-fraco: #b8a894;
  --p-bronze: #dec078;
  --p-campo: #211d19;
  --p-principal-texto: #1e1a16;
}

/* Cada secao vira um cartao. O `border-t` do Chatwoot sai: com cartao, o fio
   entre secoes vira uma linha solta no meio do respiro. */
html.reisol-config-aberta main .grid.max-w-2xl > section {
  background: var(--p-cartao);
  border: 1px solid var(--p-borda) !important;
  border-radius: 12px;
  padding: 20px !important;
  margin-bottom: 20px;
  gap: 16px;
}

/* Titulo e descricao da secao, na medida da tela de Equipe. */
html.reisol-config-aberta main .grid.max-w-2xl > section h4 {
  font-size: 15px;
  font-weight: 650;
  letter-spacing: 0;
  color: var(--p-texto);
  margin: 0;
}
html.reisol-config-aberta main .grid.max-w-2xl > section header p {
  color: var(--p-fraco);
  font-size: 13.5px;
  margin-top: 4px;
}

/* O rotulo de cada ajuste e a linha de explicacao abaixo dele. */
html.reisol-config-aberta main .grid.max-w-2xl > section label {
  color: var(--p-texto);
  font-size: 14px;
  font-weight: 550;
}
html.reisol-config-aberta main .grid.max-w-2xl > section label + p {
  color: var(--p-fraco);
  font-size: 13px;
  line-height: 1.45;
}

/* Campos: lista suspensa, texto e area de texto na mesma familia. O raio de 9
   e o mesmo do resto do painel; 12 fica so no cartao, para o cartao continuar
   sendo o recipiente e o campo o conteudo. */
html.reisol-config-aberta main .grid.max-w-2xl > section select,
html.reisol-config-aberta main .grid.max-w-2xl > section input[type="text"],
html.reisol-config-aberta main .grid.max-w-2xl > section input[type="email"],
html.reisol-config-aberta main .grid.max-w-2xl > section input[type="password"],
html.reisol-config-aberta main .grid.max-w-2xl > section textarea {
  background: var(--p-campo) !important;
  border: 1px solid var(--p-borda-forte) !important;
  border-radius: 9px !important;
  color: var(--p-texto) !important;
  font-size: 14px;
}
html.reisol-config-aberta main .grid.max-w-2xl > section select:focus-visible,
html.reisol-config-aberta main .grid.max-w-2xl > section input:focus-visible,
html.reisol-config-aberta main .grid.max-w-2xl > section textarea:focus-visible {
  outline: 2px solid var(--p-bronze) !important;
  outline-offset: -1px;
  border-color: var(--p-bronze) !important;
}

/* O botao de acao de cada secao, no bronze da marca — o mesmo "Atualizar o
   Perfil" que ja e bronze, mas agora igual ao "Criar acesso" da tela de
   Equipe, em vez de dois marrons parecidos e diferentes. */
html.reisol-config-aberta main .grid.max-w-2xl > section button[type="submit"],
html.reisol-config-aberta main .grid.max-w-2xl > section button.button--primary {
  background: var(--p-bronze) !important;
  color: var(--p-principal-texto) !important;
  border-radius: 9px !important;
  font-weight: 600;
}

/* Os dois distintivos da secao "Sessoes Ativas" sao cor nativa do Chatwoot e ja
   falhavam antes deste bloco — medido no tema claro: "Sessao atual" em
   rgb(0,133,115) dava 4,10 e "Revogar" em rgb(202,36,77) dava 4,26, contra o
   minimo de 4,5. Ficam aqui porque estao dentro da secao que passou a ser
   cartao: deixar duas falhas dentro do que acabei de arrumar seria entregar
   pela metade. Escurecidos so o suficiente; a familia de cor nao muda. */
/* PAR CLARO/ESCURO COM A MESMA ANCORA. A primeira versao disto escureceu as
   duas cores sem escopo de tema, e o escuro despencou para 1,98 e 2,13 — texto
   escuro sobre fundo escuro. E o mesmo erro que deixou a coluna de Contatos
   branca: regra de cor tem de vir aos pares, e os pares tem de ser medidos nos
   dois temas antes de publicar. */
html.reisol-config-aberta body:not(.dark) main .grid.max-w-2xl > section .text-n-teal-11 {
  color: #00614F !important;
}
html.reisol-config-aberta body:not(.dark) main .grid.max-w-2xl > section [class*="text-n-ruby"] {
  color: #A11730 !important;
}
html.reisol-config-aberta body.dark main .grid.max-w-2xl > section .text-n-teal-11 {
  color: #5FD3BC !important;
}
html.reisol-config-aberta body.dark main .grid.max-w-2xl > section [class*="text-n-ruby"] {
  color: #F79AAC !important;
}

/* ==========================================================================
   O CABEÇALHO DA CONVERSA É CLICÁVEL, E TEM DE PARECER

   Um alvo de clique que não muda nada ao passar o mouse é um alvo escondido.
   O realce é o mínimo para dizer "isto aqui abre", sem virar botão dentro do
   cabeçalho — o nome continua sendo o nome.
   ========================================================================== */
.rs-nome-abre-contato {
  padding: 4px 8px;
  margin-inline-start: -8px;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color .16s ease;
}
.rs-nome-abre-contato:hover { background: rgba(133, 91, 34, .08); }
.rs-nome-abre-contato:focus-visible {
  outline: 2px solid #855b22;
  outline-offset: -2px;
}
body.dark .rs-nome-abre-contato:hover { background: rgba(222, 192, 120, .12); }

/* ==========================================================================
   O PAINEL DO CONTATO, MAIS CURTO

   Ele nasce dimensionado para uma tela inteira de suporte: avatar de 48px,
   respiros de 16px, títulos de seção do mesmo tamanho do nome da pessoa. Numa
   coluna lateral isso empurra "Ações da conversa" e os arquivos para baixo da
   dobra — e são eles que se abre o painel para ver.

   Nada é escondido aqui: só apertado. Tudo que existia continua existindo, e
   mais coisa cabe sem rolar.
   ========================================================================== */
.conversation-sidebar-wrap [data-v-ada99d0f].p-4,
div[class*="bg-n-surface-2"] > div > div[data-v-ada99d0f].p-4 {
  padding: 12px 14px !important;
}

/* O avatar de 48 vira 40: continua reconhecível e devolve 8px de altura. */
div[class*="bg-n-surface-2"] [data-v-ada99d0f] span[style*="width: 48px"] {
  width: 40px !important;
  height: 40px !important;
}

/* O cabeçalho "Contatos" com o X: 48px de faixa para uma palavra. */
div[class*="bg-n-surface-2"] div[data-v-ada99d0f].h-12 {
  height: 2.25rem !important;
  padding-block: 0 !important;
}

/* Os títulos das seções recolhíveis ("Ações da conversa", "Atributos",
   "Arquivos"): menos respiro entre uma e outra. */
div[class*="bg-n-surface-2"] .conversation--actions,
div[class*="bg-n-surface-2"] details,
div[class*="bg-n-surface-2"] section {
  margin-block: 0 !important;
}

/* ==========================================================================
   O BOTÃO REDONDO DO BONEQUINHO SAI DE CENA

   Ele era o único jeito de abrir o painel do contato: um círculo encostado na
   borda direita da conversa, sem rótulo, que ninguém procurava. Desde que
   clicar no NOME da conversa passou a abrir o mesmo painel — o gesto de
   qualquer aplicativo de mensagem —, ele virou um segundo caminho para o
   mesmo lugar, ocupando um canto da tela.

   ESCONDIDO, E NÃO APAGADO. A diferença importa: é ESTE botão que o clique no
   nome aciona (ver O NOME NO TOPO DA CONVERSA no login.js). Quem sabe abrir o
   painel, com qual largura e lembrando do estado, é o Vue; o atalho do nome
   só chama o botão dele. Arrancar o botão do HTML mataria o atalho junto.

   `display: none` não atrapalha: `.click()` por programa funciona em elemento
   escondido — é o que já permite ao rodapé acionar itens do menu do perfil
   que também estão escondidos.
   ========================================================================== */
.conversation-details-wrap button:has(> [class*="i-ph-user-bold"]) {
  display: none !important;
}


/* ==========================================================================
   A FAIXA DE ABAS SAI DE DENTRO DO GALHO

   Pedido em 03/09/2026. O galho aberto mostrava "Minhas / Todos / Nao
   atribuidas" antes das conversas, e o filtro ativo era "Minhas" — que nesta
   operacao e sempre zero, porque ninguem assume conversa. O galho dizia "Nada
   esperando atendimento" com tres conversas do lado, escondidas pelo filtro.

   Com a arvore fazendo a navegacao, o filtro por atribuicao deixou de ter
   papel: cada galho mostra o que existe naquela tela, e ponto.

   `display: none` e nao "escondido visualmente": foi conferido que
   `getComputedStyle(aba, '::after')` — o unico sinal de qual aba esta ativa,
   ja que as tres sao identicas no HTML — CONTINUA respondendo com a faixa em
   `display:none`. E o `login.js` depende disso para forcar "Todos" e nao
   deixar o filtro preso. Se um dia a deteccao parar de funcionar, o sintoma
   sera galho vazio, e a causa e esta linha.
   ========================================================================== */
.conversations-list-wrap > div:has(ul[class*="6.25rem"]) {
  display: none !important;
}

/* A mensagem de vazio do galho sai junto, a pedido: galho sem conversa fica
   simplesmente vazio. Ela ja tem classe propria — `rs-galho-conteudo` — posta
   pelo bloco da arvore, entao o seletor nao depende do texto nem da posicao. */
.conversations-list-wrap > p.rs-galho-conteudo {
  display: none !important;
}

/* ==========================================================================
   A CITAÇÃO DE RESPOSTA  —  04/09/2026
   --------------------------------------------------------------------------
   O Chatwoot já respondia citando: o menu do botão direito (ou o "..." que
   aparece ao passar o mouse) tem "Responder mensagem", a citação é clicável e
   pula para a original, e a caixa desta conta — Channel::Api — está na lista
   de canais com o recurso ligado. O que faltava era do lado de fora: o
   Evolution acha a mensagem citada por um vínculo que estava vazio em 1108 de
   1120 linhas, então a citação aparecia no painel e NÃO ia para o grupo. Isso
   foi preenchido no banco; aqui é só o desenho.

   O desenho importava porque a citação vinha como um cinza translúcido sem
   borda: dentro de um balão colorido ela quase some, e citação que não se lê
   de relance não serve para nada. No WhatsApp ela tem barra colorida à
   esquerda e fundo levemente distinto — é isso que está reproduzido.

   POR QUE currentColor E NÃO COR FIXA NO FUNDO
   São quatro fundos de balão: entrada e saída, cada um em claro e escuro
   (#ffffff, #f5ead0, #1e1a16, #4e3417). Uma cor fixa acertaria um e erraria
   os outros três. `currentColor` é a cor do texto do balão, que por definição
   contrasta com o fundo daquele balão — então o mesmo 7% funciona nos quatro.
   Medido, texto sobre o tingido: 13.31, 11.15, 11.41 e 7.50:1.

   A BARRA é cor fixa da casa, porque ela é o sinal e precisa ser reconhecível:
   marrom no claro, ouro no escuro. Medida sobre os quatro balões: 5.97, 4.99,
   9.81 e 6.52:1.
   ========================================================================== */

/* ---------- a citação dentro do balão ----------
   O gancho é o único bloco do fio que tem `.prose-bubble` como filho direto;
   por isso o :has, e não a classe utilitária sozinha, que é genérica. */
.bg-n-alpha-black1:has(> .prose-bubble) {
  background: color-mix(in srgb, currentColor 7%, transparent) !important;
  border-left: 3px solid #855b22;
  border-radius: 3px 8px 8px 3px;
  padding-left: 9px;
}

body.dark .bg-n-alpha-black1:has(> .prose-bubble) {
  border-left-color: #dec078;
}

/* ---------- a prévia no campo de digitação ----------
   Quando se está escrevendo a resposta, a mensagem citada aparece acima do
   campo. Recebe a mesma barra para que as duas leituras — a que se escreve e
   a que já foi enviada — sejam a mesma coisa aos olhos. */
.reply-editor {
  background: color-mix(in srgb, currentColor 7%, transparent) !important;
  border-left: 3px solid #855b22;
  border-radius: 3px 6px 6px 3px;
}

body.dark .reply-editor {
  border-left-color: #dec078;
}

/* A setinha de "respondendo a" ganha a cor da barra, para o olho ligar as
   duas coisas sem precisar ler. */
.reply-editor .icon {
  color: #855b22;
}

body.dark .reply-editor .icon {
  color: #dec078;
}

/* O item "Sistema" da coluna esquerda so existe para administrador.
   Mesmo par que o menu de configuracoes ja usa: o login.js marca o <html>
   com reisol-e-admin depois de ler /api/v1/profile, e quem nao tem a marca
   nao ve o item. Vale repetir onde esta escrito: isto ESCONDE, nao bloqueia
   — a razao de ser suficiente aqui esta no comentario do login.js. */
html:not(.reisol-e-admin) .rs-arv-item[data-rs-so-admin="1"] {
  display: none !important;
}

/* ==========================================================================
   NOVA CONVERSA — O BOTAO E A JANELA  —  04/09/2026

   O "+" mora dentro da nossa barra de pesquisa da coluna (.rs-busca-col), a
   direita. Nao no cabecalho do Chatwoot: aquele markup ja quebrou aqui.

   Cores: as mesmas quatro superficies dos baloes, para a janela nao parecer
   de outro sistema. Contraste medido no par:
     claro  — texto #2a2520 sobre #ffffff = 15,3:1; sub #6f675a sobre #ffffff = 5,6:1
     escuro — texto #ece2d2 sobre #1e1a16 = 12,6:1; sub #b8a894 sobre #1e1a16 = 7,5:1
   ========================================================================== */

/* ---------- o botao ---------- */
/* O "+" ESTAVA FORA DO CENTRO, E A CULPA ERA DE UM `padding` QUE NÃO É NOSSO.

   Medido no elemento em 14/09/2026: `padding: 4px 10px`, vindo do estilo
   global de `button` do Chatwoot — esta regra nunca o zerou. Num botão de
   26px com `box-sizing: border-box`, esses 10px de cada lado deixam SEIS
   pixels de caixa para um glifo de 18px. O "+" transbordava, e `justify-content:
   center` centrava uma caixa que já não continha o desenho: o resultado era um
   sinal deslocado, e não um sinal centrado.

   `padding: 0` é o conserto de verdade. Sem ele, mexer no tamanho só mudaria
   o quanto o "+" escapa.

   E DIMINUIU: 22px num campo de busca de 34px, contra os 26px de antes. O
   botão é ação secundária ao lado da busca, que é o que a pessoa vem fazer
   nessa barra — ocupar quatro quintos da altura dela dava peso de igual.
   Sobram 6px acima e abaixo, o mesmo respiro da lupa do outro lado.

   A margem saiu junto: `.rs-busca-col` já separa os filhos com `gap: 8px`, e
   os 6px de margem viravam 14px só deste lado — desalinhado dos demais. */
.rs-chat-mais {
  flex: 0 0 auto;
  /* `!important` nas quatro que decidem o desenho, pelo mesmo motivo que o
     campo de busca logo acima já usa: o Chatwoot tem estilo GLOBAL para
     `button`, e foi ele que pôs o `padding: 4px 10px` aqui. Sem a marca, quem
     ganha depende da ordem em que as folhas carregam — e isso muda a cada
     atualização do painel. */
  width: 22px !important;
  height: 22px !important;
  padding: 0 !important;
  border: 0;
  border-radius: 7px;
  background: #855b22;
  color: #fff;
  font-size: 16px !important;
  /* O EIXO VERTICAL DO "+" PRECISA DE CORREÇÃO ÓPTICA, e não de mais centragem.

     O flex já centra a CAIXA do texto com precisão. O que fica fora do meio é
     a TINTA: o "+" é desenhado sobre o eixo matemático da fonte, que não
     coincide com o meio da caixa de linha — sobra folga em cima e falta
     embaixo, e o olho lê isso como um sinal caído.

     Por isso `line-height: 1` (a caixa mais justa possível, para a folga ser
     pequena) mais 1px de subida. Um pixel é o passo certo num botão de 22:
     dois já aparecem como erro para o outro lado.

     O recheio de baixo é o jeito certo de fazer isso. Com `align-items:
     center`, o flex centra dentro da ÁREA DE CONTEÚDO: tirando 3px dela por
     baixo, o "+" sobe 1px e o botão continua com os mesmos 22px, porque
     `box-sizing` é `border-box`. Um `transform` moveria o botão inteiro
     dentro da barra de busca — o contrário do que se quer. */
  line-height: 1;
  padding-bottom: 3px !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rs-chat-mais:hover { background: #6b481f; }
.rs-chat-mais:focus-visible { outline: 2px solid #855b22; outline-offset: 2px; }
body.dark .rs-chat-mais { background: #dec078; color: #2a2520; }
body.dark .rs-chat-mais:hover { background: #ead7a6; }

/* ---------- a janela ---------- */
.rs-chat-fundo {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(42, 37, 32, .45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 8vh;
}
body.dark .rs-chat-fundo { background: rgba(0, 0, 0, .6); }

.rs-chat-caixa {
  width: min(420px, 92vw);
  max-height: 74vh;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  color: #2a2520;
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(74, 58, 34, .28);
  overflow: hidden;
}
body.dark .rs-chat-caixa {
  background: #1e1a16;
  color: #ece2d2;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .55);
}

.rs-chat-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 8px;
}
.rs-chat-titulo { margin: 0; font-size: 16px; font-weight: 600; }
.rs-chat-x {
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.rs-chat-x:hover { color: #855b22; }
body.dark .rs-chat-x:hover { color: #dec078; }

.rs-chat-busca {
  margin: 0 14px 8px;
  padding: 8px 10px;
  font-size: 14px;
  color: inherit;
  background: #f4f1ea;
  border: 1px solid #e6ddcb;
  border-radius: 8px;
  outline: none;
}
.rs-chat-busca:focus { border-color: #855b22; }
body.dark .rs-chat-busca {
  background: #16120e;
  border-color: #3b332b;
}
body.dark .rs-chat-busca:focus { border-color: #dec078; }

.rs-chat-aviso {
  min-height: 16px;
  padding: 0 14px;
  font-size: 12px;
  color: #6f675a;
}
body.dark .rs-chat-aviso { color: #b8a894; }

.rs-chat-lista {
  overflow-y: auto;
  padding: 4px 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rs-chat-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  text-align: start;
  cursor: pointer;
}
.rs-chat-item:hover { background: rgba(133, 91, 34, .09); }
.rs-chat-item:focus-visible { outline: 2px solid #855b22; outline-offset: -2px; }
body.dark .rs-chat-item:hover { background: rgba(222, 192, 120, .12); }

.rs-chat-nome { font-size: 14px; font-weight: 500; }
.rs-chat-sub { font-size: 12px; color: #6f675a; }
body.dark .rs-chat-sub { color: #b8a894; }

/* A linha do numero a mao fica destacada, como o "Novo contato" do WhatsApp. */
.rs-chat-novo {
  background: rgba(133, 91, 34, .07);
  border: 1px dashed #d8c9a8;
}
body.dark .rs-chat-novo {
  background: rgba(222, 192, 120, .09);
  border-color: #5a4a2c;
}

.rs-chat-vazio {
  padding: 14px 10px;
  font-size: 13px;
  color: #6f675a;
}
body.dark .rs-chat-vazio { color: #b8a894; }

/* O item "Adicionar contato" do menu "⋮" da tela de Contatos, escondido: o
   botao grande ao lado faz a mesma coisa desde 04/09/2026, e duas portas para
   a mesma sala e a redundancia que o dono apontou. Escondido e NAO removido de
   proposito — o clique do botao grande passa por dentro deste item, e um
   elemento com `display:none` continua aceitando clique programatico. */
.rs-menu-adicionar {
  display: none !important;
}

/* O PAINEL DO MENU, ESCONDIDO ENQUANTO SERVE DE CAMINHO — 08/09/2026.

   A regra que estava aqui exigia .absolute.z-50 dentro de .relative, mais
   dois seletores de rede. Medido na tela viva: ela NAO CASAVA COM NADA. O
   painel do menu tem classe bg-n-alpha-3 backdrop-blur ... absolute, SEM
   z-50; e os .absolute.z-50 que existem na pagina (as listas de pais do
   formulario) nao tem pai .relative — 15 de 15 com paiRelative falso. Era
   peso morto desde que nasceu, e eu a citei duas vezes como se estivesse
   funcionando. Quem sempre escondeu o menu foi o JavaScript, sozinho.

   No lugar dela, um atributo que E NOSSO. O JavaScript o poe no painel no
   instante em que ele entra no DOM; nada que o Vue aplique depois ganha de
   um !important ancorado em atributo proprio. E nao depende de classe
   utilitaria, que muda a cada atualizacao do Chatwoot. */
[data-rs-oculto] {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* CAMPOS QUE O DONO MANDOU TIRAR DO FORMULARIO DE CRIAR CONTATO — 08/09/2026.
   e-mail, cidade, pais, biografia e o bloco de redes sociais. Ficam nome,
   sobrenome, telefone e empresa, que e o que esta operacao usa.
   display e nao visibility: aqui o campo tem de SAIR da grade, senao fica o
   buraco. (No menu de tres pontinhos e o contrario: la usamos visibility
   justamente para o elemento continuar existindo e medindo.)
   Quem poe a marca e o JavaScript, e so no dialogo de CRIACAO — a edicao
   continua com todos os campos, para nao esconder dado ja gravado. */
[data-rs-fora] {
  display: none !important;
}
/* ==========================================================================
   AS TELAS VAZIAS FICAM ESCONDIDAS ATÉ SE PEDIR

   Seis telas de Configurações e duas de Análises abrem para uma sala vazia
   nesta operação — contado pela API: Respostas Prontas 0, Modelos 0,
   Automação 0, Macros 0, Robôs 0, Atributos 0. Elas não somem do sistema; só
   deixam de ocupar a primeira leitura do menu.

   O interruptor é uma linha, não um item: se tivesse a cara dos outros,
   viraria uma nona tela na lista que se quer encurtar.
   ========================================================================== */
.rs-config-grupo:not(.rs-config-com-avancado) .rs-config-item[data-rs-avancado="1"] {
  display: none !important;
}

.rs-config-mais {
  display: block;
  width: 100%;
  margin-top: 2px;
  padding: 5px 12px;
  text-align: left;
  font: inherit;
  font-size: 12.5px;
  color: #6f675a;
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  transition: color .16s ease, background-color .16s ease;
}
.rs-config-mais:hover { color: #855b22; background: rgba(133, 91, 34, .07); }
.rs-config-mais:focus-visible { outline: 2px solid #855b22; outline-offset: -2px; }
body.dark .rs-config-mais { color: #b8a894; }
body.dark .rs-config-mais:hover { color: #dec078; background: rgba(222, 192, 120, .1); }

/* Um grupo cujos itens visíveis são todos de administrador esconde o
   interruptor junto — senão o atendente vê "Mostrar mais 6" e, ao abrir, seis
   itens que o gate de papel também esconde. Um botão que abre o vazio. */
html:not(.reisol-e-admin) .rs-config-grupo:not(:has(.rs-config-item[data-rs-avancado="1"]:not([data-rs-so-admin="1"]))) .rs-config-mais {
  display: none !important;
}

/* ==========================================================================
   O BOTÃO DE LIGAR, NO CABEÇALHO DA CONVERSA

   Fica à esquerda do "Resolver", com o mesmo tamanho e o mesmo redondo dos
   outros ícones do cabeçalho — ele é mais uma ação da conversa, não um
   destaque. O verde é o único ponto fora da paleta da casa, e é de propósito:
   é a cor que a mão já associa a "chamar", em qualquer aplicativo de mensagem.
   ========================================================================== */
.rs-ligar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-inline-end: 6px;
  padding: 0;
  color: #1d7a4c;
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}
.rs-ligar svg { width: 17px; height: 17px; }
.rs-ligar:hover { background: rgba(29, 122, 76, .12); }
.rs-ligar:focus-visible { outline: 2px solid #1d7a4c; outline-offset: -2px; }
.rs-ligar:active { transform: scale(.95); }

body.dark .rs-ligar { color: #5fcf95; }
body.dark .rs-ligar:hover { background: rgba(95, 207, 149, .16); }

/* ==========================================================================
   O CARTÃO DO BOTÃO DE LIGAR

   Aparece duas vezes na vida de uma chamada: antes, para escolher entre avisar
   e discar direto; e depois, para dizer como foi. É o mesmo cartão porque é a
   mesma tarefa — separar em duas telas faria a segunda parecer opcional, e é
   ela que salva o registro no painel.

   Fica em `position: fixed` porque o cabeçalho da conversa tem `overflow`
   escondido em mais de um antepassado: colocado dentro dele, o cartão nasceria
   cortado pela metade.
   ========================================================================== */
.rs-ligar-cartao {
  position: fixed;
  z-index: 60;
  width: 274px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #fff;
  border: 1px solid #e2dccd;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(42, 37, 32, .07), 0 16px 40px -20px rgba(42, 37, 32, .5);
  animation: rs-ligar-cartao-entra .16s cubic-bezier(.22, .8, .28, 1) backwards;
}

@keyframes rs-ligar-cartao-entra {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}

.rs-ligar-titulo {
  font-size: 14px;
  font-weight: 650;
  color: #2a2520;
  padding: 2px 6px 0;
}

.rs-ligar-sub {
  font-size: 12px;
  line-height: 1.45;
  color: #6f675a;
  padding: 0 6px 8px;
}

.rs-ligar-opcao {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 8px 9px;
  text-align: start;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color .14s ease;
}
.rs-ligar-opcao:hover { background: #f4f1ea; }
.rs-ligar-opcao:focus-visible { outline: 2px solid #855b22; outline-offset: -2px; }

.rs-ligar-opcao-rotulo { font-size: 13.5px; font-weight: 550; color: #2a2520; }
.rs-ligar-opcao-ajuda  { font-size: 11.5px; line-height: 1.4; color: #6f675a; }

/* A opção recomendada ganha peso, não cor: o verde já está no botão que abriu
   este cartão, e repeti-lo aqui faria a tela inteira pedir atenção. */
.rs-ligar-opcao-forte { background: #f7f4ec; }
.rs-ligar-opcao-forte .rs-ligar-opcao-rotulo { color: #1d7a4c; font-weight: 650; }
.rs-ligar-opcao-forte:hover { background: #eef4ef; }

body.dark .rs-ligar-cartao { background: #282320; border-color: #3b332b; }
body.dark .rs-ligar-titulo { color: #f0ebe2; }
body.dark .rs-ligar-sub,
body.dark .rs-ligar-opcao-ajuda { color: #b8a894; }
body.dark .rs-ligar-opcao-rotulo { color: #f0ebe2; }
body.dark .rs-ligar-opcao:hover { background: #322b25; }
body.dark .rs-ligar-opcao-forte { background: #2b2a24; }
body.dark .rs-ligar-opcao-forte .rs-ligar-opcao-rotulo { color: #5fcf95; }
body.dark .rs-ligar-opcao-forte:hover { background: #2f322b; }

@media (prefers-reduced-motion: reduce) {
  .rs-ligar-cartao { animation: none; }
}

/* ==========================================================================
   O MOVIMENTO DA CONVERSA — INSPIRADO NO WHATSAPP

   Três coisas, e nenhuma delas chama atenção para si: elas existem para o olho
   acompanhar o que mudou, não para enfeitar. O porquê de cada regra está no
   login.js, em A MENSAGEM QUE CHEGA ENTRA NA TELA.
   ========================================================================== */

/* ---- 1. o balão que chega ----
   Sobe 10px, cresce de 96% e clareia, em 0,22s. Curto: mensagem é para ser
   lida, não assistida. A curva sai rápido e chega devagar, que é como as
   coisas param no mundo real.

   `backwards`, NUNCA `both`: com `both` o balão fica preso no primeiro quadro
   enquanto a animação não roda — e o primeiro quadro é invisível. Com a aba em
   segundo plano, a mensagem sumiria. Isso já aconteceu neste arquivo. */
@keyframes rs-balao-sobe-dele {
  from { opacity: 0; transform: translate(-8px, 10px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
@keyframes rs-balao-sobe-meu {
  from { opacity: 0; transform: translate(8px, 10px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

.rs-balao-entrando.rs-balao-dele {
  transform-origin: left bottom;
  animation: rs-balao-sobe-dele .22s cubic-bezier(.22, .8, .28, 1) backwards;
}
.rs-balao-entrando.rs-balao-meu {
  transform-origin: right bottom;
  animation: rs-balao-sobe-meu .22s cubic-bezier(.22, .8, .28, 1) backwards;
}

/* ---- 2. a linha da lista de conversas ----
   Ela já muda de fundo ao passar o mouse e ao ser escolhida, mas trocava de
   cor num piscar. Uma transição curta faz o realce acompanhar o ponteiro em
   vez de saltar atrás dele. Só cor: nada de mover a linha, que atrapalharia
   quem está mirando o clique. */
.conversations-list-wrap .conversation {
  transition: background-color .15s ease, border-color .15s ease;
}

/* ---- 3. o cabeçalho da conversa ao trocar ----
   Trocar de conversa troca o nome, o número e os botões de uma vez. Um
   esmaecer curto costura as duas telas, e é o mesmo tempo do balão. */
@keyframes rs-conversa-troca {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.conversation-details-wrap > div:first-child {
  animation: rs-conversa-troca .18s ease-out backwards;
}

/* Quem configurou o computador para não animar continua sem animação. */
@media (prefers-reduced-motion: reduce) {
  .rs-balao-entrando.rs-balao-dele,
  .rs-balao-entrando.rs-balao-meu,
  .conversation-details-wrap > div:first-child {
    animation: none;
  }
  .conversations-list-wrap .conversation { transition: none; }
}

/* ==========================================================================
   A INICIAL DO AVATAR PRECISAVA DE UM TOM A MAIS

   As cores do avatar são geradas pelo Chatwoot a partir do nome, e uma das
   famílias não passava no contraste mínimo. Medido em 08/09/2026, no tema
   claro:

     A  (verde)    #008573 sobre #ccf3ea .... 3,82   reprova (mínimo 4,5)
     EV (azul)     #4747c2 sobre #ebebfe .... 6,05   passa
     L  (laranja)  #99543a sobre #ffe0bb .... 4,51   passa raspando

   Escurecer a letra em 15% resolve a família reprovada sem inventar cor
   nenhuma — a matiz continua a mesma, e o avatar continua reconhecível pela
   cor, que é a função dele:

     A ..... 3,82 -> 4,97      EV .... 6,05 -> 7,49      L ..... 4,51 -> 5,75

   SÓ NO TEMA CLARO. No escuro a relação se inverte: o avatar vira letra clara
   (#0bd8b6) sobre fundo escuro (#023b37), e escurecer a letra ANDARIA PARA O
   LADO ERRADO, aproximando as duas.

   O filtro vai no <span> de dentro, que carrega só a letra — no de fora ele
   pegaria o fundo junto e o ganho seria zero. */
body:not(.dark) span[role="img"] > span.select-none {
  filter: brightness(.85);
}

/* ==========================================================================
   LINHA CAIDA: A TELA DE AVISO, A FAIXA E A CAPA DO ENVIO — 08/09/2026

   Vermelho de propósito, e só aqui. O resto do tema é areia e dourado; usar a
   mesma paleta neste aviso faria dele mais um enfeite. Quando ele aparece,
   alguém precisa parar o que está fazendo.

   A capa do envio usa `position: absolute` sobre a `.reply-box`, que já é
   `relative` no Chatwoot — conferido na tela viva antes de escrever. Ela cobre
   o clique; o Enter é barrado por ouvinte de captura no JavaScript, porque
   tecla não passa por cima de elemento nenhum.
   ========================================================================== */

.rs-aviso-linha {
  position: fixed;
  inset: 0;
  z-index: 2147483000;              /* acima de qualquer diálogo do Chatwoot */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(12, 8, 6, 0.72);
  backdrop-filter: blur(3px);
}

.rs-aviso-caixa {
  max-width: 460px;
  width: 100%;
  background: #fff;
  color: #1c1917;
  border-radius: 16px;
  padding: 26px 26px 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.rs-aviso-marca {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-bottom: 14px;
  background: #fee2e2;
  position: relative;
}
.rs-aviso-marca::after {
  content: "!";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 700;
  color: #b91c1c;
}

.rs-aviso-caixa h2 {
  margin: 0 0 10px;
  font-size: 19px;
  line-height: 1.25;
  color: #b91c1c;
}

.rs-aviso-caixa p { margin: 0 0 10px; }

.rs-aviso-rodape {
  color: #57534e;
  font-size: 13.5px;
  border-top: 1px solid #eee7dd;
  padding-top: 12px;
  margin-top: 14px !important;
}

.rs-aviso-botao {
  margin-top: 6px;
  width: 100%;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  border: 0;
  border-radius: 10px;
  padding: 11px 18px;
  background: #b91c1c;
  color: #fff;
}
.rs-aviso-botao:hover { background: #991b1b; }

/* A faixa fica no TOPO. Ela e `fixed`, entao nao empurra nada — o receio
   de empurrar a lista valia para elemento no fluxo, nao para este. No
   rodape ela ficava em cima da propria capa de envio: dois avisos
   vermelhos no mesmo lugar, e o de baixo escondia parte do de cima. */
.rs-faixa-linha {
  position: fixed;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  z-index: 2147482000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border-radius: 999px;
  background: #b91c1c;
  color: #fff;
  font: 600 13.5px/1.2 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
}
.rs-faixa-linha button {
  font: inherit;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: transparent;
  color: #fff;
  border-radius: 999px;
  padding: 4px 10px;
}
.rs-faixa-linha button:hover { background: rgba(255, 255, 255, 0.15); }

.rs-capa-envio {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  border-radius: 12px;
  background: rgba(254, 226, 226, 0.94);
  color: #7f1d1d;
  font: 14px/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  cursor: not-allowed;
}
body.dark .rs-capa-envio {
  background: rgba(59, 22, 22, 0.94);
  color: #fca5a5;
}

/* Cinto: mesmo que a capa demore um quadro para nascer, o conteúdo da caixa
   já não recebe ponteiro enquanto a linha estiver caída. */
html.rs-linha-caida .reply-box > *:not(.rs-capa-envio) {
  pointer-events: none !important;
}


/* ATALHOS DE RODAPÉ QUE SÓ O ADMINISTRADOR VÊ — 08/09/2026.

   O dono apontou o ícone de QR e pediu que só aparecesse para ADM. Ele já
   não era CRIADO para quem não é — o portão está no JavaScript, e é ele que
   vale. Esta regra é o segundo cinto, no mesmo padrão que Configurações e a
   árvore já usam: enquanto o papel não resolve, `html` não tem
   `reisol-e-admin` e o item fica escondido, então não pisca antes de a
   resposta chegar.

   Vale também para Relatórios, que é soAdmin pelo mesmo motivo.

   APARÊNCIA, NÃO PERMISSÃO. Esconder ícone não protege nada sozinho: quem
   barra o pareamento é o nginx, com auth_request contra /webhooks, cuja
   política exige administrador. Medido: sem sessão, 401. */
html:not(.reisol-e-admin) .rs-rodape-botao[data-rs-so-admin="1"] {
  display: none !important;
}


/* O BOTÃO DE BAIXAR CONVERSA — 08/09/2026.
   Fica no cabeçalho da conversa, à esquerda do "Resolver". Discreto de
   propósito: é uma ação de arquivo, não do atendimento. Quando está
   trabalhando ele desabilita e o próprio `title` vira o andamento — não há
   barra de progresso porque a operação é de segundos, e uma barra falsa
   informa menos que o número de mensagens já reunidas. */
.rs-baixar-conversa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--rs-icone, #57534e);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.rs-baixar-conversa:hover:not(:disabled) {
  background: rgba(138, 106, 59, .12);
  color: #8a6a3b;
}
.rs-baixar-conversa:disabled {
  opacity: .5;
  cursor: progress;
}
body.dark .rs-baixar-conversa { color: #b8a894; }
body.dark .rs-baixar-conversa:hover:not(:disabled) {
  background: rgba(201, 162, 39, .16);
  color: #c9a227;
}


/* O CARTAO DA LISTA, MAIS BAIXO — 08/09/2026.
   Medido antes: 92px por cartao, dos quais 20 eram a etiqueta que repete o
   nome da propria tela ("grupo" na tela Grupos) e 24 eram respiro. Numa lista
   de 446px cabiam 4,8 cartoes; na janela do dono, 3.
   A etiqueta redundante e escondida com `display:none` — precisa SAIR da
   linha, senao fica o buraco. Quem a marca e o JavaScript, comparando o texto
   dela com o rotulo da rota: outra etiqueta, que informa, continua a vista.
   O respiro cai de 12 para 8; a previa e o titulo ficam como estao, porque
   encolher fonte troca legibilidade por contagem. */
[data-rs-etiqueta-repetida] {
  display: none !important;
}
[data-rs-cartao] {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}


/* ==========================================================================
   A COLUNA DA ESQUERDA DEVOLVE A ALTURA PARA A LISTA — 09/09/2026

   MEDIDO NA TELA DO DONO, janela de 1536x730 pixels de CSS (monitor de 1920
   com dpr 1,25). Cada faixa horizontal da coluna, de cima para baixo:

     logo Rei Sol ................  92px
     cabecalho "Conversas/Abertas"   52px
     barra de pesquisa ...........  48px
     os cinco itens da arvore .... 211px   (5 x 43: caixa de 39 + 4 de margem)
     LISTA DE CONVERSAS .......... 221px
     rodape (icones + usuario) ... 100px
                                   -----
                                    730px

   Ou seja: 509px de moldura para 221px de lista. A moldura ficava com 70% da
   coluna. E o item mais caro dela era a propria navegacao — 211px, quase o
   tamanho da lista inteira, gastos para mostrar cinco palavras.

   Com o cartao de 65px, cabiam 3,4 conversas. E exatamente a queixa: "so
   aparece 3 conversas por vez". A correcao anterior encolheu o CARTAO, que
   era o alvo errado — o ladrao de espaco nao era o conteudo, era a moldura.

   E como toda essa moldura e de altura FIXA, quem tem tela menor nao perde
   proporcionalmente: perde tudo do mesmo lado. Num notebook de 1366x768, com
   ~660px de pagina util, sobravam 151px — DOIS cartoes. Por isso a reclamacao
   veio de quem trabalha no notebook.

   A CURA: a arvore deixa de ser pilha e vira UMA LINHA de cinco abas.
   Navegacao e informacao curta e de largura — e largura e o que sobra nesta
   coluna (380px) enquanto altura e o que falta. Os mesmos cinco destinos
   passam de 211px para 36px.

   MEDIDO DEPOIS, na mesma janela: a lista foi de 221px para 424px (+92%), de
   3,4 para 6,5 conversas visiveis. No notebook, de 2 para 6.

   POR QUE ABA E NAO ICONE NUMA COLUNA LATERAL: icone economizaria os 36px
   restantes, mas custaria o rotulo — e a queixa dele foi que a tela esta
   "muito ruim pra visualizar, muito pequeno". Trocar cinco palavras legiveis
   por cinco desenhos a decorar seria responder ao pedido com o contrario dele.
   Os 36px sao o preco de continuar dizendo o nome das coisas.
   ========================================================================== */

/* A arvore vira caixa de verdade. Ela era `display: contents` para que os
   cinco botoes fossem filhos diretos do flex da coluna e pudessem ser
   intercalados com a lista pela propriedade `order` — o desenho de arvore, em
   que o conteudo cai debaixo do galho aberto. Numa linha nao ha galho aberto
   nem conteudo intercalado: ha um lugar so, no topo, e a linha inteira fica
   nele. Por isso a caixa volta a existir.

   `order: 0` a poe ANTES do cabecalho, que e o primeiro filho no HTML e por
   isso tinha `order: 0` por regra propria. A ordem de leitura passa a ser a
   hierarquia real: em que parte do sistema estou (abas), depois que filtro
   estou vendo (cabecalho), depois a busca, depois a lista.

   O seletor precisa do id: `.conversations-list-wrap > *:first-child` vale
   (0,1,0) e venceria uma regra de classe. */
.conversations-list-wrap > #reisol-arvore {
  display: flex !important;
  flex-direction: row;
  order: 0 !important;
  flex: 0 0 auto;
  gap: 2px;
  padding: 2px 10px 4px;
  align-items: stretch;
}

/* O cabecalho e a busca descem uma casa cada. */
.conversations-list-wrap > div:first-child { order: 1 !important; }
.conversations-list-wrap > #reisol-busca-coluna,
.conversations-list-wrap > #reisol-busca-lista { order: 2 !important; }
.conversations-list-wrap::before { order: 2 !important; }

/* Em Contatos e Relatorios a arvore e uma caixa solta, sem lista na coluna.
   Ela recebe o MESMO desenho — a barra da esquerda tem de ser a mesma em
   qualquer tela. */
.rs-arvore-solta {
  display: flex !important;
  flex-direction: row !important;
  gap: 2px;
  padding: 2px 10px 4px;
  margin-top: 0 !important;
}

/* O item deixa de ser linha e vira aba.

   `flex: 1 1 0` divide a largura em cinco partes iguais: 380px de coluna
   menos 20 de recuo e 8 de vaos dao 70px por aba. A palavra mais longa e
   "Contatos"; a 12px ela mede 52px e cabe com folga. Foi medido nas cinco —
   nenhuma trunca.

   `transform: none !important` desliga a animacao de deslize. Ela existia
   para levar cada item do lugar antigo ao novo quando o galho trocava; numa
   linha fixa os itens nao mudam de lugar, entao o calculo devolveria zero e a
   animacao seria um passo vazio. Desligar e mais honesto que deixar rodando
   um movimento que nao acontece — e evita que uma sobra de `style.transform`
   escrita pelo JavaScript empurre uma aba para fora da linha. */
#reisol-arvore .rs-arv-item,
.rs-arvore-solta .rs-arv-item {
  flex: 1 1 0 !important;
  min-width: 0;
  margin: 0 !important;
  padding: 6px 2px !important;
  font-size: 12px !important;
  font-weight: 600;
  text-align: center !important;
  /* `pre-line` e nao `nowrap` — 14/09/2026.

     "Minhas conversas" nao cabe nos 70px de uma aba, e com `nowrap` mais
     `ellipsis` ela virava "Minhas c...". O nome dessa tela traz uma quebra de
     verdade (um \n no texto, em TELAS), e `pre-line` e o unico valor que a
     desenha mantendo o resto do comportamento.

     As outras quatro nao mudam: `pre-line` so quebra onde ha \n explicito ou
     quando o texto estoura a caixa, e "Contatos", a mais longa delas, mede
     52px numa caixa de 70.

     `ellipsis` saiu junto porque nao tem mais o que fazer: sem `nowrap` o
     texto passa a quebrar em vez de estourar, e reticencia em texto que
     quebra nao aparece. */
  white-space: pre-line;
  line-height: 1.2;
  /* NÃO PONHA `display` AQUI. Custou uma regressão em 14/09/2026.

     A primeira versão trazia `display: flex !important` para centrar as duas
     linhas. Só que este seletor tem um ID (`#reisol-arvore`), e o que esconde
     as telas de administrador —
     `html:not(.reisol-e-admin) .rs-arv-item[data-rs-so-admin="1"]` — tem três
     classes e nenhum ID. Entre dois `!important`, quem tem ID ganha: o
     atendente passou a ver a aba "Sistema".

     Duas linhas não precisam de flex. O recheio é simétrico, o texto é
     centrado, e `line-height` cuida do resto. */
  border-radius: 7px;
  transform: none !important;
}

/* ONDE EU ESTOU.

   Na pilha isso nao precisava ser dito: o conteudo aparecia FISICAMENTE
   debaixo do item aberto, e a posicao era a resposta. Numa linha essa pista
   desaparece — as cinco abas ficam lado a lado e o conteudo vem embaixo de
   todas. Sem um destaque explicito, a barra passaria a nao responder "em que
   tela eu estou", que e a unica pergunta que ela existe para responder.

   O fundo sozinho nao basta: ele e o mesmo recurso do `:hover`, e as duas
   coisas se confundiriam com o ponteiro em cima. O fio de 2px embaixo e o que
   separa "estou aqui" de "posso ir aqui" — e nao depende de cor para ser
   percebido, o que serve a quem nao distingue bem os tons.

   A classe e posta pelo login.js (`ehAtual`, que compara a rota). Conferido
   nas cinco telas: cada uma acende a sua, e o caminho /label/... continua
   contendo a rota mesmo com uma conversa aberta, entao o destaque nao apaga
   ao clicar numa conversa. */
#reisol-arvore .rs-arv-item.rs-arv-atual,
.rs-arvore-solta .rs-arv-item.rs-arv-atual {
  background: rgba(133, 91, 34, .14) !important;
  color: #5c3e14 !important;
  box-shadow: inset 0 -2px 0 #855b22;
}
body.dark #reisol-arvore .rs-arv-item.rs-arv-atual,
body.dark .rs-arvore-solta .rs-arv-item.rs-arv-atual {
  background: rgba(222, 192, 120, .16) !important;
  color: #dec078 !important;
  box-shadow: inset 0 -2px 0 #dec078;
}

/* O NOME DA TELA DEIXA DE APARECER DUAS VEZES.

   Com a aba dizendo "Conversas", o `h1` do cabecalho logo abaixo dizia
   "Conversas" de novo, a 36px de distancia. Duas vezes a mesma palavra, uma
   embaixo da outra, e o cabecalho inteiro custava 52px por causa dela.

   Some o `h1` e fica o que a linha tem de proprio: a etiqueta do filtro
   ("Abertas") e os botoes de filtrar e ordenar. A linha cai para 36px.

   O `h1` continua no HTML — so nao e desenhado. O `renomearTituloDeRotulo()`
   do login.js segue escrevendo nele sem erro, e quem usa leitor de tela
   continua ouvindo o titulo da tela. */
.conversations-list-wrap > div:first-child {
  height: 36px !important;
}
.conversations-list-wrap > div:first-child h1 {
  display: none !important;
}

/* O mesmo em Contatos e Relatorios: `.rs-avulsa-topo` era uma faixa de 52px
   que continha um `h1` escrito "Contatos" — a mesma palavra da aba acesa.
   Antes ela tambem servia de calco, alinhando a arvore com a altura do
   cabecalho das outras telas; com as abas no topo esse calco passou a
   EMPURRAR a linha 52px para baixo, e as abas pulavam ao entrar em Contatos.
   Medido: y=114 em Contatos contra y=62 nas outras. Sem ela, y=62 nas cinco. */
.rs-coluna-avulsa > .rs-avulsa-topo {
  display: none !important;
}

/* A LOGO OCUPAVA 92px DE UMA COLUNA DE 730.

   E a marca da casa e fica, mas 92px e altura de cabecalho de site, nao de
   barra lateral de ferramenta de trabalho.

   PRIMEIRA TENTATIVA, ERRADA, e vale ficar registrada: eu escrevi
   `height: 56px` na propria faixa. A altura obedeceu — e o conteudo nao.
   Medido depois de gravar: a faixa dizia 56px e o `scrollHeight` dela dizia
   70px, com `overflow: visible`. Ou seja, a marca continuava com o tamanho de
   antes e passou a TRANSBORDAR por cima da linha de abas, em vez de encolher.
   Nao aparecia como erro em lugar nenhum: dois elementos ocupando o mesmo
   lugar e a caixa mentindo a altura.

   A licao e velha e eu tropecei nela de novo: mandar a CAIXA encolher nao
   encolhe o que esta dentro. Quem tinha de diminuir era a marca.

   Agora cada peca cede um pouco: o recuo da faixa (10/18 para 2/6), a moldura
   da marca (44 para 38) e a imagem (36 para 34). A faixa fecha em 50px por
   consequencia, e `height: auto` deixa isso acontecer em vez de impor.
   MEDIDO: 50px de altura para 50px de conteudo — nao transborda.

   `width: auto` e `height: auto` na imagem pelo mesmo motivo da midia: com a
   largura presa, o teto de altura seria ignorado. */
aside > section:first-child {
  height: auto !important;
  padding-top: 2px !important;
  padding-bottom: 6px !important;
  row-gap: 0 !important;
}
aside > section:first-child > div.flex.gap-2 {
  padding-top: 2px !important;
  padding-bottom: 3px !important;
}
aside > section:first-child div.grid {
  height: 38px !important;
}
aside > section:first-child img {
  max-height: 34px !important;
  width: auto !important;
  height: auto !important;
}


/* ==========================================================================
   A NOTA NA BOLHA DE REACAO — 10/09/2026

   O Chatwoot transforma cada reacao numa mensagem propria, com o emoji como
   conteudo. A nota entra DENTRO dessa bolha, embaixo do emoji, e diz quem
   reagiu e a que.

   A versao anterior colava um selo no balao da mensagem ORIGINAL, como o
   WhatsApp. O dono trocou — "eu quero na propria msg de reacao, nao na msg
   original". Cada reacao aparecia duas vezes, a bolha solta e o selo, e entre
   as duas ele ficou com a que ja esta no fluxo da conversa.

   O trecho da mensagem citada ganha "overflow-wrap: anywhere" porque pode vir
   de um texto sem espacos — um link, ou um codigo de site como
   DTB01861-RJNITE6. Sem isso ele estouraria a largura do balao em vez de
   quebrar.

   O contraste destas quatro cores foi medido DEPOIS de subir, na tela, nos
   dois temas — os valores estao registrados junto de cada uma abaixo. Nao os
   escrevi antes de medir de proposito: ja gravei neste arquivo uma afirmacao
   que eu supunha e que o teste desmentiu.
   ========================================================================== */
.rs-reacao-nota {
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid rgba(133, 91, 34, .18);
  font-size: 11px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
body.dark .rs-reacao-nota { border-top-color: rgba(222, 192, 120, .18); }

.rs-reacao-quem {
  font-weight: 700;
  color: #625644;   /* medido: 7,16 sobre o balao claro */
}
body.dark .rs-reacao-quem { color: #b9ad99; }   /* 7,82 no escuro */

.rs-reacao-verbo { color: #6f6455; }            /* 5,79 no claro */
body.dark .rs-reacao-verbo { color: #a99d8a; }  /* 6,49 no escuro */

.rs-reacao-trecho {
  color: #6f6455;   /* 5,79 no claro */
  font-style: italic;
}
body.dark .rs-reacao-trecho { color: #a99d8a; }   /* 6,49 no escuro */

/* O recibo do clique: diz que a reacao SAIU, nao que chegou. Some sozinho em
   1,8s — quem confirma a chegada e a bolha, que vem em segundos. */
.rs-reacao-recibo {
  position: fixed;
  z-index: 70;
  padding: 4px 10px;
  border-radius: 999px;
  background: #855b22;
  color: #fff;
  font-size: 12px;
  line-height: 1.3;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .2);
  pointer-events: none;
}
body.dark .rs-reacao-recibo { background: #dec078; color: #1e1a16; }


/* ==========================================================================
   O BOTAO DE REAGIR E A BARRA DE EMOJI — 10/09/2026

   Os dois sao UM SO cada, e o login.js os move para dentro do balao sob o
   mouse. Ficam escondidos ate ter um alvo — quem marca e `data-rs-visivel`.

   `position: absolute` ancorado no balao, e NAO `fixed` ancorado na janela.
   Esta foi a terceira tentativa e a primeira certa; as duas anteriores
   calculavam a posicao a partir de `getBoundingClientRect()`, e por isso
   precisavam recalcular a cada rolagem, a cada redesenho do Vue, a cada
   mudanca de janela. Cada coisa que se mexia e que eu nao previa virava um
   botao pairando no vazio — o dono fotografou tres vezes.

   Sendo filho do balao, ele anda junto de graca. O navegador ja faz isso
   melhor do que eu faria em JavaScript, e nao ha laco nenhum rodando.

   O balao precisa ser a referencia de posicionamento; por isso o
   `position: relative` nele. E o unico efeito colateral dessa linha — ela
   nao muda desenho nenhum, so declara quem e a ancora. */
[id^="message"] [class*="grid-area:bubble"] > div {
  position: relative;
}

.rs-reagir-botao,
.rs-reagir-barra {
  position: absolute;
  z-index: 60;
  display: none;
}
.rs-reagir-botao[data-rs-visivel],
.rs-reagir-barra[data-rs-visivel] { display: flex; }

/* De fora do balao, do lado em que ha espaco: mensagem que chegou tem espaco
   a direita, mensagem que saiu tem a esquerda. */
.rs-reagir-botao { top: 2px; }
.rs-reagir-botao[data-rs-lado="direita"]  { left: calc(100% + 8px); }
.rs-reagir-botao[data-rs-lado="esquerda"] { right: calc(100% + 8px); }

/* A barra abre para CIMA: as mensagens novas ficam embaixo, e abrindo para
   baixo ela taparia justamente a mensagem seguinte. */
.rs-reagir-barra { bottom: calc(100% + 6px); }
.rs-reagir-barra[data-rs-lado="direita"]  { left: 0; }
.rs-reagir-barra[data-rs-lado="esquerda"] { right: 0; }

.rs-reagir-botao {
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 13px;
  line-height: 1;
  border: 0;
  border-radius: 999px;
  background: #efe9dc;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .16);
  cursor: pointer;
  opacity: .75;
  transition: opacity .12s ease, transform .12s ease;
}
.rs-reagir-botao:hover { opacity: 1; transform: scale(1.08); }
.rs-reagir-botao:focus-visible { outline: 2px solid #855b22; outline-offset: 2px; }
body.dark .rs-reagir-botao { background: #322b23; }

.rs-reagir-barra {
  gap: 2px;
  padding: 5px 7px;
  border-radius: 999px;
  background: #fffdf8;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
}
body.dark .rs-reagir-barra { background: #2a241d; }

.rs-reagir-emoji {
  width: 30px;
  height: 30px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: transform .12s ease, background-color .12s ease;
}
.rs-reagir-emoji:hover { transform: scale(1.22); background: rgba(133, 91, 34, .10); }
.rs-reagir-emoji:focus-visible { outline: 2px solid #855b22; outline-offset: -2px; }
body.dark .rs-reagir-emoji:hover { background: rgba(222, 192, 120, .14); }

.rs-reacao-aviso {
  position: fixed;
  z-index: 70;
  max-width: 260px;
  padding: 6px 10px;
  border-radius: 8px;
  background: #7a2e2e;
  color: #fff;
  font-size: 12px;
  line-height: 1.35;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
}


/* ==========================================================================
   O CRACHA DE NAO LIDAS NA ABA — 10/09/2026

   O numero vem do login.js, que escreve `data-rs-nao-lidas` no botao. Aqui ele
   so e desenhado. Ver o bloco O CRACHA DAS ABAS no login.js para de onde sai a
   contagem e por que nao veio do contador nativo do Chatwoot.

   ONDE COUBE, e por que nao coube em outro lugar. Medido:
     - a aba tem 70px de largura (352 uteis divididos por cinco);
     - "Conversas", a maior, mede 58px a 12px de fonte.
   Sobram 12px. Um cracha de dois caracteres precisa de 16 mais um respiro —
   nao cabe DENTRO da linha do texto. As saidas seriam encolher a fonte, que e
   o oposto do que ele pediu ("esta muito pequeno"), ou deixar cada aba com a
   largura do proprio rotulo, que faria as abas MUDAREM DE LARGURA toda vez que
   um numero aparecesse ou sumisse — alvo de clique que se mexe sozinho.

   Entao o cracha sai da linha: fica pendurado no canto superior direito, fora
   da caixa da aba. Custa 4px no recuo de cima da fila (2 para 6), e nao custa
   nada na largura. A fila passa de 36px para 40px.

   O PRECO: para o cracha aparecer fora da caixa, a aba perde
   `overflow: hidden` — e com ele o `text-overflow: ellipsis`. Se um rotulo
   crescer, ele passa a transbordar em vez de virar reticencias. E aceitavel
   porque os cinco rotulos sao nossos, fixos, e foram medidos um a um: nenhum
   chega perto dos 70px. Se algum dia entrar um rotulo maior, isto aqui e o
   lugar que quebra primeiro.

   ATE 9 mostra o numero; acima disso, "9+". Nao e economia de espaco: e a
   mesma convencao que o Chatwoot ja usa no cartao da conversa, e dois lugares
   que dizem a mesma coisa devem dizer do mesmo jeito. De quebra, o cracha
   nunca passa de dois caracteres — a largura nao surpreende.

   O anel da cor do fundo separa o cracha da aba vizinha quando os dois estao
   acesos. Ele muda com o tema, entao esta declarado nos dois.

   CONTRASTE, calculado: branco sobre #855b22 da 5,68; #1e1a16 sobre #dec078 da
   10,0. O minimo para texto pequeno e 4,5.
   ========================================================================== */
.conversations-list-wrap > #reisol-arvore,
.rs-arvore-solta {
  padding-top: 6px !important;
}

#reisol-arvore .rs-arv-item,
.rs-arvore-solta .rs-arv-item {
  position: relative;
  overflow: visible;
}

#reisol-arvore .rs-arv-item[data-rs-nao-lidas]::after,
.rs-arvore-solta .rs-arv-item[data-rs-nao-lidas]::after {
  content: attr(data-rs-nao-lidas);
  position: absolute;
  top: -5px;
  right: -3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: 999px;
  background: #855b22;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  letter-spacing: 0;
  box-shadow: 0 0 0 2px #f4f1ea;
  pointer-events: none;
}
body.dark #reisol-arvore .rs-arv-item[data-rs-nao-lidas]::after,
body.dark .rs-arvore-solta .rs-arv-item[data-rs-nao-lidas]::after {
  background: #dec078;
  color: #1e1a16;
  box-shadow: 0 0 0 2px #1e1a16;
}


/* ==========================================================================
   O RODAPE DA COLUNA VIRA UMA LINHA SO — 09/09/2026

   MEDIDO: 100px, em duas faixas empilhadas que faziam a MESMA coisa — dizer
   quem esta logado e dar acesso ao que nao e conversa:

     barra dos quatro icones .... 43px  (6+4 de recuo + botao de 32)
     cartao do usuario .......... 53px  (6+6 de recuo + linha de 40)
     vao entre as duas ........... 4px

   Encolher os recuos das duas devolvia 16px. Medido, e pouco: o que custa
   caro nao e a folga, e o fato de serem DUAS linhas de largura inteira numa
   coluna de 380px, cada uma usando um terco da largura e sobrando o resto.

   Numa linha so: o nome fica na esquerda, os quatro icones na direita, e o
   rodape cai para 45px. Sao 55px devolvidos a lista — mais que o dobro do que
   a arrumacao de recuo dava.

   AS DUAS ARMADILHAS, as duas medidas antes de gravar:

   1. `.rs-rodape` tem largura propria de 140px (quatro botoes de 32 mais tres
      vaos de 4). Na primeira tentativa ela esticou para 372px e empurrou o
      cartao do usuario para largura ZERO — o nome sumiu inteiro, sem erro
      nenhum. `width: max-content` a prende no tamanho do conteudo e o cartao
      fica com os 230px que sobram.
   2. O `border-top` da barra de icones fazia sentido quando ela era uma faixa
      atravessando a coluna; numa linha ele viraria um fio no meio do rodape,
      separando o nome dos icones sem motivo. Sai dali e vai para a `section`,
      que agora e a faixa inteira.

   O e-mail sai de cena. Ele ficava embaixo do nome, permanentemente, para
   responder "quem esta logado" — e o nome ja responde isso. Numa linha so,
   manter os dois obrigaria o cartao a ter duas linhas de texto e devolveria a
   altura que se foi buscar.

   MEDIDO DEPOIS: rodape 45px, cartao 230px de largura, nome "Eduardo
   Fernandes" inteiro sem cortar, icones 140px encostados na direita, sem
   sobreposicao entre os dois.
   ========================================================================== */
aside > section:last-of-type {
  flex-direction: row !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 2px 4px !important;
  border-top: 1px solid rgba(133, 91, 34, .12);
}
body.dark aside > section:last-of-type {
  border-top-color: rgba(222, 192, 120, .14);
}
aside > section:last-of-type > div.px-1 {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  order: 0 !important;
  padding: 0 !important;
}
#reisol-rodape-atalhos.rs-rodape {
  width: max-content !important;
  flex: 0 0 auto !important;
  order: 1 !important;
  padding: 0 !important;
  border-top: 0 !important;
  justify-content: flex-end !important;
}
/* o e-mail, embaixo do nome */
aside > section:last-of-type .text-xs.truncate {
  display: none !important;
}


/* ==========================================================================
   A MIDIA PARA DE OCUPAR A CONVERSA INTEIRA — 09/09/2026

   MEDIDO, na mesma janela de 1536x730:
     a lista de mensagens tem 445px de altura;
     UMA foto media 488x488, e o balao em volta dela, 512x536.

   Uma mensagem so era 20% MAIOR que a janela inteira onde ela devia caber.
   Nao dava para ver a foto e a resposta ao mesmo tempo; rolar a conversa
   virou rolar uma foto.

   A CAUSA, medida e nao suposta: `max-height` valia `none`. Nao havia teto
   nenhum. A imagem usava o tamanho natural do arquivo (512x512 neste caso),
   encolhido apenas pela largura maxima do balao. Foto de celular moderno tem
   3000px de altura — o unico motivo de nao ter ficado pior e que a largura do
   balao a segurava antes.

   260px e pouco mais da metade da lista de mensagens: cabem duas mensagens
   com foto na tela ao mesmo tempo, e a foto continua grande o bastante para
   se reconhecer o que e. Quem quiser ver maior tem os dois botoes que o
   Chatwoot ja desenha no canto da imagem — ampliar e baixar. Eles ficam onde
   estavam: estao ancorados no `div.relative.group` que envolve a imagem, e
   esse div encolhe junto.

   `width: auto` e `height: auto` NAO sao enfeite. A imagem vem com
   width="512" height="512" no HTML; sem soltar as duas, o navegador usa a
   proporcao declarada e o teto de altura e ignorado. Medido: com `max-height`
   sozinho, nada muda.

   MEDIDO DEPOIS: imagem 260x260, balao 308px (era 536).
   ========================================================================== */
/* O `:not([class*="w-full"])` NAO e enfeite — foi o dono que achou o defeito.

   O Chatwoot tem DOIS jeitos de desenhar anexo, e eu so tinha visto um. Alem
   da imagem grande e solta, ha uma GRADE de miniaturas: o anexo entra num
   `div.size-[72px]` e a imagem leva `object-cover w-full h-full` para
   preencher o quadrado. Medido na conversa 19: as 16 fotos estao todas assim.

   A minha regra, escrita olhando so o primeiro caso, atropelava o segundo:
   `width:auto` e `height:auto` desmanchavam o `w-full h-full` e
   `object-fit:contain` desmanchava o `object-cover`. Resultado: a miniatura
   deixava de preencher o quadrado de 72 e virava uma tira de 72x54 com faixa
   vazia em cima e embaixo. Ficou pior do que estava.

   Conferido desligando as minhas regras: a foto continuava com 72px de
   largura. Ou seja, o TAMANHO da miniatura e decisao do Chatwoot, nao minha —
   eu so tinha estragado o preenchimento dela.

   A marca `w-full` e o que separa os dois casos: so a imagem de grade a tem.
   A imagem grande e solta nao leva classe de tamanho nenhuma. */
[id^="message"] img:not([class*="avatar"]):not([class*="w-full"]),
[id^="message"] video {
  max-height: 260px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* A MINIATURA DE 72px E PEQUENA DEMAIS PARA FOTO DE OBRA — 10/09/2026.

   72px e o tamanho de um icone. Nas conversas de grupo o que chega o dia
   inteiro e foto de canteiro: fundacao, torre, caminhao. A 72px nao da para
   dizer se a foto e da obra certa, e o unico jeito de saber e abrir uma por
   uma. Medido na conversa 19: 16 fotos, todas ilegiveis nesse tamanho.

   150px e o meio termo: cabe mais de uma na largura do balao, mostra o que a
   foto tem, e continua longe do problema oposto — os 488px que ocupavam a
   conversa inteira e que renderam a queixa de ontem.

   O quadrado e o `object-cover` sao do Chatwoot e ficam: uma grade de fotos
   com alturas diferentes e mais dificil de varrer com o olho do que uma
   grade regular. O corte custa as bordas da foto; quem precisa do inteiro
   clica e abre. */
[id^="message"] div[class*="size-[72px]"] {
  width: 150px !important;
  height: 150px !important;
}


/* ==========================================================================
   A CAIXA DE ESCREVER PARA DE PEDIR UM TERCO DA CONVERSA — 09/09/2026

   MEDIDO: 229px de altura, com a caixa VAZIA. Repartidos assim:

     linha das abas (Responder / Mensagem Privada) ....  52px
     area de digitacao ................................ 120px
     linha dos botoes (emoji, anexo, microfone, Enviar)  56px
     borda .............................................. 1px

   Os 120px do meio sao cinco linhas e meia de texto reservadas para uma caixa
   onde nao ha nada escrito. Numa conversa que tem 445px de mensagens, isso e
   um terco da tela guardado para o que ainda nao foi digitado.

   DE ONDE VEM: o Chatwoot escreve `--editor-height: 120px` como estilo EM
   LINHA no `.resizable-editor-wrapper`, e a altura sai de
   `clamp(--editor-min-allowed, --editor-height, --editor-max-allowed)`.
   O minimo que ele proprio admite e 80px — e esse o piso, e e onde paramos.
   Nao ha nada disso guardado no navegador: conferido, o localStorage nao tem
   chave de altura. Ou seja, os 120px sao o padrao dele, nao uma escolha de
   alguem daqui que eu estaria desfazendo.

   `!important` e necessario porque o valor esta EM LINHA. Uma declaracao
   `!important` de folha de estilo vence estilo em linha sem `!important` —
   e a unica forma de alcancar isso sem escrever JavaScript.

   O QUE ISSO CUSTA: existe uma alca de arrastar acima da caixa (`h-4`, logo
   acima da borda) que permite puxa-la para cima. Com o `!important`, arrastar
   deixa de ter efeito. Para escrever texto longo sobra o botao de expandir,
   no canto direito da linha das abas, que abre a caixa em tela cheia.
   Se o arrastar fizer falta, trocar `!important` por uma escrita do login.js
   no proprio estilo em linha devolve as duas coisas.

   AGORA A PARTE QUE EU TINHA ESCRITO ERRADO AQUI, e que o teste pegou.

   Eu havia afirmado neste comentario que "a caixa cresce sozinha conforme se
   digita". Nao cresce. A altura sai de
   `clamp(--editor-min-allowed, --editor-height, --editor-max-allowed)`, e
   `clamp` de um valor fixo e um valor fixo: com `--editor-height` travado em
   80px, 80px e a altura em qualquer situacao.

   MEDIDO, digitando 825 caracteres de verdade na caixa: o conteudo passou a
   medir 112px, a caixa continuou com 80px e o texto passou a ROLAR por
   dentro. Quem escrevesse uma mensagem longa veria tres linhas e meia por
   vez, com o comeco do proprio texto fora de vista. Isso e pior que o
   problema que se foi consertar.

   A CURA: soltar a altura e limitar pelas pontas. `height: auto` faz a caixa
   acompanhar o texto; `min-height: 80px` mantem o ganho quando ela esta
   vazia, que e a queixa original; `max-height: 200px` impede que uma mensagem
   muito longa engula a conversa de novo — passou disso, ai sim rola por
   dentro.

   MEDIDO DEPOIS, os tres estados:
     vazia ................... 165px  (era 229)
     com 825 caracteres ...... 197px  (cresceu, sem rolagem interna)
     no teto ................. 285px  (so quando se escreve muito)

   O `min-height` precisa vencer o `clamp`, que e mais especifico por vir de
   `.resizable-editor-wrapper .resizable-editor-body`. Por isso a regra repete
   os dois niveis em vez de mirar so a classe de baixo.

   As outras duas linhas so perdem folga: 52 para 40 e o recuo dos botoes de
   12 para 6. Nenhum botao muda de tamanho — 32px de altura, acima do minimo
   de 24 que a acessibilidade pede para alvo de clique em ponteiro fino.
   ========================================================================== */
.resizable-editor-wrapper {
  --editor-height: 80px !important;
}
.resizable-editor-wrapper .resizable-editor-body {
  height: auto !important;
  min-height: 80px !important;
  max-height: 200px !important;
}
.reply-box > div:first-child {
  height: 40px !important;
}
.reply-box > div:last-child {
  padding: 6px 12px !important;
}

/* ==========================================================================
   O PAINEL DE FILTRAR CONVERSAS, MINIMALISTA — 14/09/2026

   Pedido do dono: "faça um sistema de filtro baseado em listas suspensas com
   box minimalista".

   POR QUE ISTO É CSS, E NÃO UM PAINEL NOVO ESCRITO POR NÓS

   Tentei o painel próprio primeiro, e medi por que não serve. Alcancei o
   miolo do Chatwoot pelo elemento de montagem — o mesmo caminho que a árvore
   usa para navegar — e disparei `fetchFilteredConversations` com três filtros
   diferentes: status aberta, responsável Igor, status resolvida. Os três
   devolveram a MESMA lista. O pedido vai, os dados entram no depósito, e a
   tela não muda: ela desenha do estado interno do componente, que não escuta
   ninguém de fora.

   Restava dirigir o painel dele por baixo, clicando. Funciona — é assim que a
   aba "Minhas conversas" força o filtro — mas aqui seria clicar dentro de
   listas aninhadas cuja estrutura muda a cada atualização do Chatwoot, e
   quebraria em silêncio.

   E os dados fecharam a questão: a conta tem UMA etiqueta ("grupo") e UMA
   caixa de entrada. Um painel nosso com listas de etiqueta e caixa teria uma
   opção em cada — a árvore já faz esse papel melhor.

   Então o que sobra, e é o que o pedido quer de verdade: o painel nativo já
   TEM listas suspensas e já faz operadores e combinações. Falta ser
   minimalista. Mexer só no desenho mantém tudo funcionando e não cria nada
   que possa quebrar.

   O QUE MUDA, medido no painel de 750x234:
     - largura de 750 para 470: as linhas têm quatro controles curtos, e 750px
       deixava metade da caixa vazia
     - recheio de 24 para 16, vãos de 24 para 12
     - o título perde o peso de cabeçalho e vira etiqueta de canto
     - os controles ficam com o desenho da casa, e não com o cinza de fábrica
   ========================================================================== */
#conversationFilterTeleportTarget div.z-40 {
  width: 470px !important;
  max-width: calc(100vw - 32px) !important;
  padding: 16px !important;
  gap: 12px !important;
  border-radius: 12px;
  border-color: #e2dccd !important;
  background: #fff !important;
  /* O desfoque de fundo de fábrica custa caro para desenhar e some debaixo de
     um fundo opaco. Sem ele o painel abre sem o engasgo do primeiro quadro. */
  backdrop-filter: none !important;
  box-shadow: 0 2px 8px rgba(42, 37, 32, .06), 0 20px 48px -24px rgba(42, 37, 32, .45) !important;
}

/* O título vira etiqueta: o painel já está ancorado no botão de filtro, e
   quem o abriu sabe o que é. Peso de cabeçalho ali só rouba altura. */
#conversationFilterTeleportTarget h3 {
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6f675a !important;
}

/* As linhas de filtro, mais juntas. */
#conversationFilterTeleportTarget ul { gap: 8px !important; }
#conversationFilterTeleportTarget li > div { gap: 6px !important; }

/* Os controles: mais baixos, com a borda da casa em vez do cinza de fábrica.
   A regra de altura automática continua valendo (ver o bloco acima, dos três
   rótulos traduzidos que quebravam em duas linhas) — aqui só se aperta o
   recheio lateral e se troca a cor. */
#conversationFilterTeleportTarget button {
  min-height: 28px !important;
  padding-inline: 8px !important;
  font-size: 12.5px !important;
  border-radius: 7px !important;
}

#conversationFilterTeleportTarget li button {
  background: #f7f4ec !important;
  color: #2a2520 !important;
}
#conversationFilterTeleportTarget li button:hover { background: #efe9dc !important; }

/* "Aplicar filtros" é o único que decide alguma coisa, e fica com a cor da
   casa. "Limpar filtros" e "Adicionar filtro" viram texto: são saídas, não
   destinos, e três botões sólidos lado a lado disputam a mesma atenção.

   `ul ~ div` E NÃO `> div > div:last-child`, e isso custou uma passagem:
   entre o alvo do teleporte e o painel existe um INVÓLUCRO, então contar
   filhos a partir do alvo erra de nível. Pior, aquele seletor tinha
   especificidade maior que a da regra dos botões claros logo acima — os dois
   com `!important` — e pintou de marrom TODOS os controles das linhas.
   Medido: doze botões, doze em rgb(133,91,34).

   `ul ~ div` é o rodapé por definição: o único div irmão que vem depois da
   lista de filtros. Não conta níveis e não depende do invólucro. */
#conversationFilterTeleportTarget ul ~ div button:last-child {
  background: #855b22 !important;
  color: #fff !important;
}
#conversationFilterTeleportTarget ul ~ div button:last-child:hover {
  background: #6b481f !important;
}

body.dark #conversationFilterTeleportTarget div.z-40 {
  background: #282320 !important;
  border-color: #3b332b !important;
}
body.dark #conversationFilterTeleportTarget h3 { color: #b8a894 !important; }
body.dark #conversationFilterTeleportTarget li button {
  background: #322b25 !important;
  color: #f0ebe2 !important;
}
body.dark #conversationFilterTeleportTarget li button:hover { background: #3b332b !important; }
body.dark #conversationFilterTeleportTarget ul ~ div button:last-child {
  background: #dec078 !important;
  color: #2a2520 !important;
}

/* ==========================================================================
   AS LINHAS PODADAS DO MENU DE CLIQUE DIREITO — 14/09/2026

   Quem marca as linhas e o bloco do login.js, lendo o texto de cada uma; aqui
   so se apaga o que ele marcou. O motivo de cada poda esta escrito la.

   O gate de administrador e a AUSENCIA de `reisol-e-admin`, igual ao resto do
   arquivo: enquanto o papel nao resolveu, esconder e o lado certo de errar.
   ========================================================================== */
[data-rs-menu-fora="1"] {
  display: none !important;
}
html:not(.reisol-e-admin) [data-rs-menu-admin="1"] {
  display: none !important;
}

/* ==========================================================================
   O QUE SAIU DA CAIXA DE RESPOSTA E DO CABECALHO — 14/09/2026

   Tres marcacoes a caneta do dono sobre a tela de producao.

   1. O INTERRUPTOR "RESPONDER / MENSAGEM PRIVADA". Quem marca e o bloco do
      login.js, porque so o texto distingue e CSS nao le texto. Sai o botao
      inteiro, e nao metade dele: os dois rotulos sao filhos do MESMO botao, e
      esconder um deixaria um interruptor de uma posicao so.

   2. O BOTAO DE IA da caixa. Este da para mirar sem JavaScript: ele tem icone
      proprio. O seletor pede um filho DIRETO com aquele icone para nao pegar
      qualquer botao que venha a ter a mesma faisca dentro.

   3. O BOTAO DE LIGAR do cabecalho sai pelo proprio bloco dele, no login.js,
      com um interruptor no topo -- ver LIGAR_LIGADO la. Nao e CSS: manter um
      bloco montando um botao que nunca aparece e desperdicio, e apagar o
      bloco perderia o que ele ensina sobre o wa.me e o codigo do pais.
   ========================================================================== */
[data-rs-caixa-fora="1"] {
  display: none !important;
}

.reply-box button:has(> span.i-ph-sparkle-fill) {
  display: none !important;
}