/* Comunic v1 no Chatwoot 4.18: troca o azul do Chatwoot (#2781F6, "39 129 246") pelo azul da marca #0057D9
   (botões, links, seleção, foco). Incluído em toda página HTML por infra/chatwoot/bot_marca.rb.
   As regras abaixo da escala foram geradas a partir do CSS do Chatwoot 4.18: ao atualizar o Chatwoot,
   gerar de novo (procurar "39 129 246" nas folhas de estilo da tela) e conferir no navegador. */
html:root {
  --blue-7: 153 187 240;
  --blue-8: 92 145 230;
  --blue-9: 0 87 217;
  --blue-10: 0 69 173;
  --blue-11: 0 74 184;
}

/* Topo do menu lateral: logo "C comunic" no lugar do símbolo e, embaixo, o nome da empresa (conta) pequeno.
   Estrutura do Chatwoot 4.18: [ícone] [traço] [botão com o nome da conta]. */
:root aside section > div:has(> div > img[src*="logo_thumbnail"]) { flex-wrap: wrap; row-gap: 2px; padding-top: 6px; }
:root aside section > div:has(> div > img[src*="logo_thumbnail"]) > div:has(> img[src*="logo_thumbnail"]) {
  width: 120px; height: 24px; background: url("/marca/logo.svg") left center / contain no-repeat; }
html.dark aside section > div:has(> div > img[src*="logo_thumbnail"]) > div:has(> img[src*="logo_thumbnail"]) {
  background-image: url("/marca/logo_dark.svg"); }
:root aside section div > img[src*="logo_thumbnail"] { visibility: hidden; }
:root aside section > div:has(> div > img[src*="logo_thumbnail"]) > div.w-px { display: none; }
:root aside section > div:has(> div > img[src*="logo_thumbnail"]) > div:has(> #sidebar-account-switcher) { flex-basis: 100%; margin: 0; }
:root #sidebar-account-switcher { padding: 0 2px; height: auto; }
:root #sidebar-account-switcher > span { font-size: 12px; line-height: 16px; font-weight: 500; color: rgb(var(--slate-11)); }
:root .banner.primary[data-v-dd067508] { background-color: rgb(0, 87, 217); }
@supports (color: rgb(0 0 0 / 0)) and (top: var(--f)) { :root .banner.primary[data-v-dd067508] { background-color: rgb(0 87 217 / var(--tw-bg-opacity, 1)); } }
html.dark { --blue-9: 0 87 217; --border-blue: 0, 87, 217, .5; }
:root .border-n-brand { border-top-color: rgb(0, 87, 217); border-right-color: rgb(0, 87, 217); border-bottom-color: rgb(0, 87, 217); border-left-color: rgb(0, 87, 217); }
:root .border-n-brand\/50 { border-top-color: rgba(0, 87, 217, 0.5); border-right-color: rgba(0, 87, 217, 0.5); border-bottom-color: rgba(0, 87, 217, 0.5); border-left-color: rgba(0, 87, 217, 0.5); }
:root .border-t-n-brand { border-top-color: rgb(0, 87, 217); }
@supports (color: rgb(0 0 0 / 0)) and (top: var(--f)) { :root .border-t-n-brand { border-top-color: rgb(0 87 217 / var(--tw-border-opacity, 1)); } }
:root .bg-\[\#2781F6\] { background-color: rgb(0, 87, 217); }
@supports (color: rgb(0 0 0 / 0)) and (top: var(--f)) { :root .bg-\[\#2781F6\] { background-color: rgb(0 87 217 / var(--tw-bg-opacity, 1)); } }
:root .bg-n-brand { background-color: rgb(0, 87, 217); }
@supports (color: rgb(0 0 0 / 0)) and (top: var(--f)) { :root .bg-n-brand { background-color: rgb(0 87 217 / var(--tw-bg-opacity, 1)); } }
:root .bg-n-brand\/10 { background-color: rgba(0, 87, 217, 0.1); }
:root .bg-n-brand\/20 { background-color: rgba(0, 87, 217, 0.2); }
:root .bg-n-brand\/5 { background-color: rgba(0, 87, 217, 0.05); }
:root .from-n-brand\/15 { --tw-gradient-from: rgb(0 87 217 / .15) var(--tw-gradient-from-position); --tw-gradient-to: rgb(0 87 217 / 0) var(--tw-gradient-to-position); }
:root .text-n-brand { color: rgb(0, 87, 217); }
@supports (color: rgb(0 0 0 / 0)) and (top: var(--f)) { :root .text-n-brand { color: rgb(0 87 217 / var(--tw-text-opacity, 1)); } }
:root .\!outline-n-brand { outline-color: rgb(0, 87, 217) !important; }
:root .outline-n-brand { outline-color: rgb(0, 87, 217); }
:root .ring-n-brand { --tw-ring-color: rgb(0 87 217 / var(--tw-ring-opacity, 1)); }
:root p a { color: rgb(0, 87, 217); }
@supports (color: rgb(0 0 0 / 0)) and (top: var(--f)) { :root p a { color: rgb(0 87 217 / var(--tw-text-opacity, 1)); } }
:root p a:is(.dark *) { color: rgb(0, 87, 217); }
@supports (color: rgb(0 0 0 / 0)) and (top: var(--f)) { :root p a:is(.dark *) { color: rgb(0 87 217 / var(--tw-text-opacity, 1)); } }
:root input[type]:not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="color"]):not([type="image"]):not([type="hidden"]):not(.reset-base):not(.no-margin):focus { outline-color: rgb(0, 87, 217); }
:root input[type]:not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="color"]):not([type="image"]):not([type="hidden"]):not(.reset-base):not(.no-margin):focus:is(.dark *) { outline-color: rgb(0, 87, 217); }
:root select:focus { outline-color: rgb(0, 87, 217); }
:root select:focus:is(.dark *) { outline-color: rgb(0, 87, 217); }
:root textarea:focus { outline-color: rgb(0, 87, 217); }
:root textarea:focus:is(.dark *) { outline-color: rgb(0, 87, 217); }
:root .before\:\!border-t-n-brand::before { border-top-color: rgb(0, 87, 217) !important; }
@supports (color: rgb(0 0 0 / 0)) and (top: var(--f)) { :root .before\:\!border-t-n-brand::before { border-top-color: rgb(0 87 217 / var(--tw-border-opacity, 1)) !important; } }
:root .before\:bg-n-brand::before { background-color: rgb(0, 87, 217); }
@supports (color: rgb(0 0 0 / 0)) and (top: var(--f)) { :root .before\:bg-n-brand::before { background-color: rgb(0 87 217 / var(--tw-bg-opacity, 1)); } }
:root .after\:bg-n-brand::after { background-color: rgb(0, 87, 217); }
@supports (color: rgb(0 0 0 / 0)) and (top: var(--f)) { :root .after\:bg-n-brand::after { background-color: rgb(0 87 217 / var(--tw-bg-opacity, 1)); } }
:root .checked\:border-n-brand:checked { border-top-color: rgb(0, 87, 217); border-right-color: rgb(0, 87, 217); border-bottom-color: rgb(0, 87, 217); border-left-color: rgb(0, 87, 217); }
:root .checked\:bg-n-brand:checked { background-color: rgb(0, 87, 217); }
@supports (color: rgb(0 0 0 / 0)) and (top: var(--f)) { :root .checked\:bg-n-brand:checked { background-color: rgb(0 87 217 / var(--tw-bg-opacity, 1)); } }
:root .indeterminate\:border-n-brand:indeterminate { border-top-color: rgb(0, 87, 217); border-right-color: rgb(0, 87, 217); border-bottom-color: rgb(0, 87, 217); border-left-color: rgb(0, 87, 217); }
:root .indeterminate\:bg-n-brand:indeterminate { background-color: rgb(0, 87, 217); }
@supports (color: rgb(0 0 0 / 0)) and (top: var(--f)) { :root .indeterminate\:bg-n-brand:indeterminate { background-color: rgb(0 87 217 / var(--tw-bg-opacity, 1)); } }
:root .focus-within\:outline-n-brand:focus-within { outline-color: rgb(0, 87, 217); }
:root .focus-within\:ring-n-brand:focus-within { --tw-ring-color: rgb(0 87 217 / var(--tw-ring-opacity, 1)); }
:root .hover\:border-n-brand:hover { border-top-color: rgb(0, 87, 217); border-right-color: rgb(0, 87, 217); border-bottom-color: rgb(0, 87, 217); border-left-color: rgb(0, 87, 217); }
:root .hover\:bg-n-brand\/10:hover { background-color: rgba(0, 87, 217, 0.1); }
:root .hover\:bg-n-brand\/80:hover { background-color: rgba(0, 87, 217, 0.8); }
:root .hover\:text-n-brand:hover { color: rgb(0, 87, 217); }
@supports (color: rgb(0 0 0 / 0)) and (top: var(--f)) { :root .hover\:text-n-brand:hover { color: rgb(0 87 217 / var(--tw-text-opacity, 1)); } }
:root .focus\:border-n-brand:focus { border-top-color: rgb(0, 87, 217); border-right-color: rgb(0, 87, 217); border-bottom-color: rgb(0, 87, 217); border-left-color: rgb(0, 87, 217); }
:root .focus\:outline-n-brand:focus { outline-color: rgb(0, 87, 217); }
:root .focus\:ring-n-brand:focus { --tw-ring-color: rgb(0 87 217 / var(--tw-ring-opacity, 1)); }
:root .focus-visible\:border-n-brand:focus-visible { border-top-color: rgb(0, 87, 217); border-right-color: rgb(0, 87, 217); border-bottom-color: rgb(0, 87, 217); border-left-color: rgb(0, 87, 217); }
:root .focus-visible\:bg-n-brand\/20:focus-visible { background-color: rgba(0, 87, 217, 0.2); }
:root .focus-visible\:outline-n-brand:focus-visible { outline-color: rgb(0, 87, 217); }
:root .focus-visible\:ring-n-brand:focus-visible { --tw-ring-color: rgb(0 87 217 / var(--tw-ring-opacity, 1)); }
:root .hover\:enabled\:bg-n-brand\/20:enabled:hover { background-color: rgba(0, 87, 217, 0.2); }
:root .group:focus-within .group-focus-within\:text-n-brand { color: rgb(0, 87, 217); }
@supports (color: rgb(0 0 0 / 0)) and (top: var(--f)) { :root .group:focus-within .group-focus-within\:text-n-brand { color: rgb(0 87 217 / var(--tw-text-opacity, 1)); } }
:root .group:hover .group-hover\:bg-n-brand { background-color: rgb(0, 87, 217); }
@supports (color: rgb(0 0 0 / 0)) and (top: var(--f)) { :root .group:hover .group-hover\:bg-n-brand { background-color: rgb(0 87 217 / var(--tw-bg-opacity, 1)); } }
:root .group:hover .group-hover\:text-n-brand { color: rgb(0, 87, 217); }
@supports (color: rgb(0 0 0 / 0)) and (top: var(--f)) { :root .group:hover .group-hover\:text-n-brand { color: rgb(0 87 217 / var(--tw-text-opacity, 1)); } }
:root .has-\[\:focus\]\:outline-n-brand:has(:focus) { outline-color: rgb(0, 87, 217); }
:root .prose-a\:text-n-brand :is(:where(a):not(:where([class~="not-prose"], [class~="not-prose"] *))) { color: rgb(0, 87, 217); }
@supports (color: rgb(0 0 0 / 0)) and (top: var(--f)) { :root .prose-a\:text-n-brand :is(:where(a):not(:where([class~="not-prose"], [class~="not-prose"] *))) { color: rgb(0 87 217 / var(--tw-text-opacity, 1)); } }
:root .prose-strong\:text-n-brand :is(:where(strong):not(:where([class~="not-prose"], [class~="not-prose"] *))) { color: rgb(0, 87, 217); }
@supports (color: rgb(0 0 0 / 0)) and (top: var(--f)) { :root .prose-strong\:text-n-brand :is(:where(strong):not(:where([class~="not-prose"], [class~="not-prose"] *))) { color: rgb(0 87 217 / var(--tw-text-opacity, 1)); } }
:root .dark\:border-n-brand:is(.dark *) { border-top-color: rgb(0, 87, 217); border-right-color: rgb(0, 87, 217); border-bottom-color: rgb(0, 87, 217); border-left-color: rgb(0, 87, 217); }
:root .dark\:bg-n-brand\/10:is(.dark *) { background-color: rgba(0, 87, 217, 0.1); }
:root .dark\:\!outline-n-brand:is(.dark *) { outline-color: rgb(0, 87, 217) !important; }
:root .dark\:ring-n-brand:is(.dark *) { --tw-ring-color: rgb(0 87 217 / var(--tw-ring-opacity, 1)); }
:root .dark\:checked\:border-n-brand:checked:is(.dark *) { border-top-color: rgb(0, 87, 217); border-right-color: rgb(0, 87, 217); border-bottom-color: rgb(0, 87, 217); border-left-color: rgb(0, 87, 217); }
:root .dark\:checked\:bg-n-brand:checked:is(.dark *) { background-color: rgb(0, 87, 217); }
@supports (color: rgb(0 0 0 / 0)) and (top: var(--f)) { :root .dark\:checked\:bg-n-brand:checked:is(.dark *) { background-color: rgb(0 87 217 / var(--tw-bg-opacity, 1)); } }
:root .dark\:focus-within\:outline-n-brand:focus-within:is(.dark *) { outline-color: rgb(0, 87, 217); }
:root .dark\:hover\:text-n-brand:hover:is(.dark *) { color: rgb(0, 87, 217); }
@supports (color: rgb(0 0 0 / 0)) and (top: var(--f)) { :root .dark\:hover\:text-n-brand:hover:is(.dark *) { color: rgb(0 87 217 / var(--tw-text-opacity, 1)); } }
:root .dark\:focus\:outline-n-brand:focus:is(.dark *) { outline-color: rgb(0, 87, 217); }
:root .dark\:has-\[\:focus\]\:outline-n-brand:has(:focus):is(.dark *) { outline-color: rgb(0, 87, 217); }
:root .ProseMirror-prompt .ProseMirror-prompt-buttons button[type="submit"] { background-color: rgb(0, 87, 217); }
@supports (color: rgb(0 0 0 / 0)) and (top: var(--f)) { :root .ProseMirror-prompt .ProseMirror-prompt-buttons button[type="submit"] { background-color: rgb(0 87 217 / var(--tw-bg-opacity, 1)); } }
:root .ProseMirror-prompt .ProseMirror-prompt-buttons button[type="submit"]:hover { background-color: rgba(0, 87, 217, 0.9); }
:root .widget-wrapper[data-v-7dfaf3f3] { --border-blue: 0, 87, 217, .5; }
:root .dark .widget-wrapper[data-v-7dfaf3f3] { --border-blue: 0, 87, 217, .5; }
:root .menu[data-v-60cefcf4]:hover { background-color: rgb(0, 87, 217); }
@supports (color: rgb(0 0 0 / 0)) and (top: var(--f)) { :root .menu[data-v-60cefcf4]:hover { background-color: rgb(0 87 217 / var(--tw-bg-opacity, 1)); } }
:root .search-input[data-v-69e77a2c]:focus { border-top-color: rgb(0, 87, 217); border-right-color: rgb(0, 87, 217); border-bottom-color: rgb(0, 87, 217); border-left-color: rgb(0, 87, 217); }

/* Atendente: menu estreito só com ícones, como no WhatsApp Web (o nome aparece ao passar o mouse, pelo title do
   próprio Chatwoot). html.cm-atendente / html.cm-gestor vêm de marca/comunic.js, conforme o papel na conta.
   O gestor fica com o menu completo. */
html.cm-atendente aside .cursor-col-resize { display: none; }
/* Só o necessário ao atendente (Caixa de entrada, Conversas, Contatos). O Chatwoot já bloqueia o acesso pelo papel;
   aqui só some o atalho dos itens que sobram. */
html.cm-atendente aside nav > ul > li:has(> div > a[href*="/captain"]),
html.cm-atendente aside nav > ul > li:has(> div > a[href*="/companies"]),
html.cm-atendente aside nav > ul > li:has(> div > a[href*="/reports"]),
html.cm-atendente aside nav > ul > li:has(> div > a[href*="/campaigns"]),
html.cm-atendente aside nav > ul > li:has(> div > a[href*="/portals"]),
html.cm-atendente aside nav > ul > li:has(> div > a[href*="/settings"]) { display: none; }
html.cm-atendente aside nav > ul > li > div > a { width: 2.75rem; height: 2.75rem; }
html.cm-atendente aside nav > ul > li > div > a > * { width: 1.25rem; height: 1.25rem; }
html.cm-atendente:not(.dark) aside nav > ul > li > div > a.bg-n-alpha-2 { background-color: #eaf2ff; color: #0057d9; }