/* ==========================================================================
   Tema Nyverse para o Chatwoot (central.nyverse.com.br)
   Injetado pelo nginx (sub_filter), FORA do código do Chatwoot:
   atualizar a imagem do Chatwoot não apaga este tema.

   O Chatwoot 4.x pinta a interface com escalas em variáveis RGB
   (--blue-1..12 = cor da marca, --slate-1..12 = cinzas, superfícies).
   Aqui trocamos só os valores. Paleta oficial Nyverse:
   Void Black #06080B · Graphite #111827 · Sprint Green #14F195
   Signal Cyan #00E5FF · Cloud White #F5F7FF · Slate Text #A8B3CF
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Sora:wght@600;700&display=swap");

/* ---------- Modo claro ---------- */
:root {
  /* Escala da marca: verde Nyverse (o 11 escuro garante contraste em fundo branco) */
  --blue-1: 247 254 251;
  --blue-2: 237 253 246;
  --blue-3: 214 250 234;
  --blue-4: 190 246 221;
  --blue-5: 160 240 204;
  --blue-6: 124 231 183;
  --blue-7: 78 218 156;
  --blue-8: 34 200 128;
  --blue-9: 20 241 149;
  --blue-10: 16 214 132;
  --blue-11: 5 120 74;
  --blue-12: 3 60 38;
  --text-blue: 3 60 38;
  --border-blue-strong: 5 120 74;
  --solid-blue: 214 250 234;
  --solid-blue-2: 247 254 251;
  --border-blue: 20, 241, 149, .5;

  /* Cinzas com o azul-grafite da marca */
  --slate-1: 252 252 254;
  --slate-2: 247 248 252;
  --slate-3: 240 242 248;
  --slate-4: 231 234 243;
  --slate-5: 222 226 237;
  --slate-6: 212 217 230;
  --slate-7: 196 202 219;
  --slate-8: 168 179 207;
  --slate-9: 120 131 158;
  --slate-10: 104 115 142;
  --slate-11: 71 82 105;
  --slate-12: 17 24 39;
  --background-color: 245 247 255;
}

/* ---------- Modo escuro (o padrão da central) ---------- */
.dark {
  --blue-1: 6 16 13;
  --blue-2: 8 24 18;
  --blue-3: 8 40 29;
  --blue-4: 8 54 38;
  --blue-5: 10 70 49;
  --blue-6: 13 90 62;
  --blue-7: 16 116 80;
  --blue-8: 18 150 102;
  --blue-9: 20 241 149;
  --blue-10: 16 214 132;
  --blue-11: 20 241 149;
  --blue-12: 200 255 232;
  --text-blue: 200 255 232;
  --border-blue-strong: 20 241 149;
  --solid-blue: 8 50 36;
  --solid-blue-2: 11 16 21;
  --border-blue: 20, 241, 149, .45;

  /* Superfícies: Void Black e Graphite */
  --slate-1: 6 8 11;
  --slate-2: 11 14 19;
  --slate-3: 17 24 39;
  --slate-4: 22 30 46;
  --slate-5: 28 37 55;
  --slate-6: 36 46 66;
  --slate-7: 48 60 82;
  --slate-8: 70 84 108;
  --slate-9: 100 112 138;
  --slate-10: 120 132 158;
  --slate-11: 168 179 207;
  --slate-12: 245 247 255;

  --background-color: 6 8 11;
  --surface-1: 9 12 16;
  --surface-2: 12 16 22;
  --surface-active: 24 32 48;
  --solid-1: 12 16 22;
  --solid-2: 17 24 39;
  --solid-3: 24 32 48;
  --solid-active: 30 41 59;
  --card-color: 12 16 22;
  --button-color: 17 24 39;
  --label-background: 17 24 39;
  --border-strong: 30 41 59;
  --border-weak: 22 30 46;
  --alpha-1: 17, 24, 39, .8;
  --alpha-3: 9, 12, 16, .95;
  --call-widget: 9, 12, 16, .95;
}

/* Botão principal: verde claro pede texto escuro (branco sobre #14F195 não passa em contraste) */
.bg-n-brand,
.bg-n-brand.text-white,
.bg-n-brand .text-white,
.bg-n-brand svg {
  color: #06080B !important;
}
.bg-n-brand:hover { filter: brightness(1.06); }

/* Títulos com a fonte de marca; o texto corrido segue Inter, que o Chatwoot já usa */
h1, h2, .text-2xl, .text-3xl {
  font-family: "Sora", Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: -0.01em;
}

/* Foco visível na cor da marca (acessibilidade no teclado) */
:focus-visible {
  outline-color: #14F195 !important;
}

/* Seleção de texto */
::selection {
  background: rgba(20, 241, 149, .28);
}

/* ==========================================================================
   Cor da marca gravada FIXA pelo Chatwoot (#2781F6) nas classes n-brand.
   Bloco GERADO a partir das 14 folhas de estilo do Chatwoot 4.16.2
   (manifesto do Vite), trocando só a cor. Se uma atualização trouxer
   classe nova com o azul, é regerar este bloco com o mesmo script.
   ========================================================================== */
.unread-wrap .clear-button[data-v-4f260fa6]{color:rgb(20, 241, 149) !important}
.banner.primary[data-v-658da868]{background-color:rgb(20, 241, 149) !important}
.border-n-brand:not([class*="dark:border-"]){border-color:rgb(20, 241, 149) !important}
html:not(.dark) .border-n-brand{border-color:rgb(20, 241, 149) !important}
.border-n-brand\/50:not([class*="dark:border-"]){border-color:rgba(20, 241, 149, 0.5) !important}
html:not(.dark) .border-n-brand\/50{border-color:rgba(20, 241, 149, 0.5) !important}
.border-t-n-brand:not([class*="dark:border-"]){border-top-color:rgb(20, 241, 149) !important}
html:not(.dark) .border-t-n-brand{border-top-color:rgb(20, 241, 149) !important}
.bg-\[\#2781F6\]:not([class*="dark:bg-"]){background-color:rgb(20, 241, 149) !important}
html:not(.dark) .bg-\[\#2781F6\]{background-color:rgb(20, 241, 149) !important}
.bg-n-brand:not([class*="dark:bg-"]){background-color:rgb(20, 241, 149) !important}
html:not(.dark) .bg-n-brand{background-color:rgb(20, 241, 149) !important}
.bg-n-brand\/10:not([class*="dark:bg-"]){background-color:rgba(20, 241, 149, 0.1) !important}
html:not(.dark) .bg-n-brand\/10{background-color:rgba(20, 241, 149, 0.1) !important}
.bg-n-brand\/20:not([class*="dark:bg-"]){background-color:rgba(20, 241, 149, 0.2) !important}
html:not(.dark) .bg-n-brand\/20{background-color:rgba(20, 241, 149, 0.2) !important}
.bg-n-brand\/5:not([class*="dark:bg-"]){background-color:rgba(20, 241, 149, 0.05) !important}
html:not(.dark) .bg-n-brand\/5{background-color:rgba(20, 241, 149, 0.05) !important}
.text-n-brand:not([class*="dark:text-"]){color:rgb(20, 241, 149) !important}
html:not(.dark) .text-n-brand{color:rgb(20, 241, 149) !important}
.\!outline-n-brand:not([class*="dark:outline-"]){outline-color:rgb(20, 241, 149) !important}
html:not(.dark) .\!outline-n-brand{outline-color:rgb(20, 241, 149) !important}
.outline-n-brand:not([class*="dark:outline-"]){outline-color:rgb(20, 241, 149) !important}
html:not(.dark) .outline-n-brand{outline-color:rgb(20, 241, 149) !important}
p a{color:rgb(20, 241, 149) !important}
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(20, 241, 149) !important}
select:focus, textarea:focus{outline-color:rgb(20, 241, 149) !important}
.before\:\!border-t-n-brand::before{border-top-color:rgb(20, 241, 149) !important}
.before\:bg-n-brand::before{background-color:rgb(20, 241, 149) !important}
.after\:bg-n-brand::after{background-color:rgb(20, 241, 149) !important}
.checked\:border-n-brand:checked{border-color:rgb(20, 241, 149) !important}
.checked\:bg-n-brand:checked{background-color:rgb(20, 241, 149) !important}
.indeterminate\:border-n-brand:indeterminate{border-color:rgb(20, 241, 149) !important}
.indeterminate\:bg-n-brand:indeterminate{background-color:rgb(20, 241, 149) !important}
.focus-within\:outline-n-brand:focus-within{outline-color:rgb(20, 241, 149) !important}
.hover\:border-n-brand:hover{border-color:rgb(20, 241, 149) !important}
.hover\:bg-n-brand\/10:hover{background-color:rgba(20, 241, 149, 0.1) !important}
.hover\:bg-n-brand\/80:hover{background-color:rgba(20, 241, 149, 0.8) !important}
.hover\:text-n-brand:hover{color:rgb(20, 241, 149) !important}
.focus\:border-n-brand:focus{border-color:rgb(20, 241, 149) !important}
.focus\:outline-n-brand:focus{outline-color:rgb(20, 241, 149) !important}
.focus-visible\:bg-n-brand\/20:focus-visible{background-color:rgba(20, 241, 149, 0.2) !important}
.focus-visible\:outline-n-brand:focus-visible{outline-color:rgb(20, 241, 149) !important}
.hover\:enabled\:bg-n-brand\/20:enabled:hover{background-color:rgba(20, 241, 149, 0.2) !important}
.group:focus-within .group-focus-within\:text-n-brand{color:rgb(20, 241, 149) !important}
.group:hover .group-hover\:bg-n-brand{background-color:rgb(20, 241, 149) !important}
.group:hover .group-hover\:text-n-brand{color:rgb(20, 241, 149) !important}
.has-\[\:focus\]\:outline-n-brand:has(:focus){outline-color:rgb(20, 241, 149) !important}
.prose-strong\:text-n-brand :is(:where(strong):not(:where([class~="not-prose"], [class~="not-prose"] *))){color:rgb(20, 241, 149) !important}
.dark\:border-n-brand:is(.dark *){border-color:rgb(20, 241, 149) !important}
.dark\:bg-n-brand\/10:is(.dark *){background-color:rgba(20, 241, 149, 0.1) !important}
.dark\:\!outline-n-brand:is(.dark *){outline-color:rgb(20, 241, 149) !important}
.dark\:checked\:border-n-brand:checked:is(.dark *){border-color:rgb(20, 241, 149) !important}
.dark\:checked\:bg-n-brand:checked:is(.dark *){background-color:rgb(20, 241, 149) !important}
.dark\:focus-within\:outline-n-brand:focus-within:is(.dark *){outline-color:rgb(20, 241, 149) !important}
.dark\:hover\:text-n-brand:hover:is(.dark *){color:rgb(20, 241, 149) !important}
.dark\:focus\:outline-n-brand:focus:is(.dark *){outline-color:rgb(20, 241, 149) !important}
.dark\:has-\[\:focus\]\:outline-n-brand:has(:focus):is(.dark *){outline-color:rgb(20, 241, 149) !important}
.ProseMirror-prompt .ProseMirror-prompt-buttons button[type="submit"]{background-color:rgb(20, 241, 149) !important}
.ProseMirror-prompt .ProseMirror-prompt-buttons button[type="submit"]:hover{background-color:rgba(20, 241, 149, 0.9) !important}
.menu[data-v-60cefcf4]:hover{background-color:rgb(20, 241, 149) !important}
.search-input[data-v-69e77a2c]:focus{border-color:rgb(20, 241, 149) !important}
.notification--unread-indicator[data-v-577256f2]{background-color:rgb(20, 241, 149) !important}
.text-link:not([class*="dark:text-"]){color:rgb(20, 241, 149) !important}
html:not(.dark) .text-link{color:rgb(20, 241, 149) !important}
.chat-bubble > a{color:rgb(20, 241, 149) !important}
.chat-bubble.agent .link{color:rgb(20, 241, 149) !important}
input:not(.reset-base):focus, textarea:not(.reset-base):focus, select:not(.reset-base):focus{outline-color:rgb(20, 241, 149) !important}
.button{border-color:rgb(20, 241, 149) !important;background-color:rgb(20, 241, 149) !important}
.button:focus, .button:hover, .button:active, .button.active{border-color:rgb(20, 241, 149) !important}
.file .icon-wrap[data-v-7ea48b19], .file .download[data-v-7ea48b19]{color:rgb(20, 241, 149) !important}
.option[data-v-74ee74cc]{border-color:rgb(20, 241, 149) !important}
.email-input-group input[data-v-c0f153df]:focus{outline-color:rgb(20, 241, 149) !important}
.customer-satisfaction .feedback-form input[data-v-b42a988a]:focus{outline-color:rgb(20, 241, 149) !important}

/* ---------- Contraste (acessibilidade) ---------- */
/* Fundo verde claro pede texto escuro em todo lugar que o Chatwoot punha texto branco */
.button, .button *,
.banner.primary[data-v-658da868], .banner.primary[data-v-658da868] *,
.menu[data-v-60cefcf4]:hover, .menu[data-v-60cefcf4]:hover *,
.ProseMirror-prompt .ProseMirror-prompt-buttons button[type="submit"],
.checked\:bg-n-brand:checked {
  color: #06080B !important;
}
/* No modo claro (e no widget do site do cliente, que é claro) texto verde vira verde escuro */
html:not(.dark) .text-link,
html:not(.dark) p a,
html:not(.dark) .text-n-brand,
html:not(.dark) .hover\:text-n-brand:hover,
html:not(.dark) .chat-bubble > a,
html:not(.dark) .chat-bubble.agent .link,
html:not(.dark) .unread-wrap .clear-button[data-v-4f260fa6],
html:not(.dark) .file .icon-wrap[data-v-7ea48b19],
html:not(.dark) .file .download[data-v-7ea48b19] {
  color: #05784A !important;
}
