/* Justa Energia · tema do Chatwoot (v1, 05/11/2026). Carregado pelo DASHBOARD_SCRIPTS. Chatwoot 4.12.1.
   Desfazer: apagar o DASHBOARD_SCRIPTS (ou estes arquivos em /etc/easypanel/projects/justa/brand). */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&display=swap');

/* ---------- 1. a escala "blue" do Chatwoot vira o verde Justa (claro) ---------- */
:root {
  --blue-1: 250 254 251; --blue-2: 243 251 246; --blue-3: 228 246 235; --blue-4: 211 240 222;
  --blue-5: 192 232 207; --blue-6: 168 221 190; --blue-7: 136 206 166; --blue-8: 86 184 136;
  --blue-9: 0 130 76; --blue-10: 0 116 68; --blue-11: 0 110 63; --blue-12: 10 52 33;
  --solid-blue: 211 240 222; --solid-blue-2: 243 251 246;
  --text-blue: 0 72 42; --border-blue-strong: 0 98 58;
  --justa-verde: #00824C; --justa-verde-escuro: #00502F; --justa-amarelo: #FED141; --justa-lima: #A8CF3A;
}
/* (escuro) */
.dark, html.dark, .dark :root {
  --blue-1: 13 20 16; --blue-2: 16 27 21; --blue-3: 17 44 31; --blue-4: 16 58 40;
  --blue-5: 22 72 50; --blue-6: 30 87 61; --blue-7: 38 105 74; --blue-8: 45 126 88;
  --blue-9: 0 150 88; --blue-10: 24 163 101; --blue-11: 88 214 150; --blue-12: 182 241 205;
  --solid-blue: 16 58 40; --solid-blue-2: 16 27 21;
  --text-blue: 182 241 205; --border-blue-strong: 45 126 88;
}

/* títulos com a fonte da marca */
h1, h2, h3, .justa-titulo { font-family: 'Poppins', Inter, system-ui, sans-serif; letter-spacing: -0.01em; }

/* ---------- 2. detalhes do painel ---------- */
::selection { background: rgb(0 130 76 / .18); }
:focus-visible { outline-color: var(--justa-verde) !important; }
/* conversa selecionada na lista: filete verde e amarelo */
.conversation.active, [class*="conversation"][class*="active"] { box-shadow: inset 3px 0 0 var(--justa-verde); }
/* barra de rolagem discreta */
* { scrollbar-color: rgb(0 130 76 / .28) transparent; }
/* botões principais com leve brilho ao passar o mouse */
.bg-n-brand { transition: box-shadow .2s ease, transform .2s ease, filter .2s ease; }
.bg-n-brand:hover { box-shadow: 0 6px 18px -6px rgb(0 130 76 / .55); filter: saturate(1.08); }
/* faixa da marca no topo da barra lateral */
body.justa-app aside:first-of-type::before {
  content: ''; display: block; height: 3px; margin: 0 0 6px;
  background: linear-gradient(90deg, var(--justa-verde), var(--justa-lima), var(--justa-amarelo));
  border-radius: 0 0 3px 3px;
}
/* mensagens da assistente: balão com um toque verde */


/* ---------- 3. tela de login ---------- */
body.justa-login { background: #00341f; }
body.justa-login #app > div > main {
  position: relative; z-index: 1; background: transparent !important; min-height: 100vh;
  justify-content: center; padding-top: 40px; padding-bottom: 40px;
}
body.justa-login #app > div > main > section:first-child img { filter: brightness(0) invert(1); height: 44px; opacity: 0; animation: justa-sobe .9s .1s cubic-bezier(.2,.8,.2,1) forwards; }
body.justa-login #app > div > main > section:first-child h2 {
  color: #fff !important; font-weight: 600; font-size: 30px; margin-top: 22px; opacity: 0;
  animation: justa-sobe .9s .25s cubic-bezier(.2,.8,.2,1) forwards; text-shadow: 0 2px 24px rgb(0 0 0 / .25);
}
body.justa-login .justa-sub { color: rgb(255 255 255 / .78); text-align: center; margin-top: 8px; font-size: 15px; opacity: 0; animation: justa-sobe .9s .4s cubic-bezier(.2,.8,.2,1) forwards; }
body.justa-login .justa-sub b { color: var(--justa-amarelo); font-weight: 600; }
body.justa-login #app > div > main > section:nth-of-type(2) {
  background: rgb(255 255 255 / .94) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-radius: 20px !important; border: 1px solid rgb(255 255 255 / .6);
  box-shadow: 0 30px 80px -20px rgb(0 0 0 / .45), 0 0 0 1px rgb(0 130 76 / .08) !important;
  margin-top: 34px !important; opacity: 0; animation: justa-sobe 1s .45s cubic-bezier(.2,.8,.2,1) forwards; position: relative; overflow: hidden;
}
body.justa-login #app > div > main > section:nth-of-type(2)::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--justa-verde), var(--justa-lima), var(--justa-amarelo), var(--justa-lima), var(--justa-verde));
  background-size: 200% 100%; animation: justa-faixa 6s linear infinite;
}
body.justa-login form button[type="submit"], body.justa-login form > button:last-child {
  background: linear-gradient(135deg, #00a35f, var(--justa-verde) 55%, #006b3e) !important; color: #fff !important;
  height: 46px; border-radius: 12px !important; font-weight: 600; letter-spacing: .01em;
  box-shadow: 0 10px 24px -10px rgb(0 130 76 / .8); transition: transform .15s ease, box-shadow .2s ease;
}
body.justa-login form button[type="submit"]:hover, body.justa-login form > button:last-child:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -10px rgb(0 130 76 / .9); }
body.justa-login form input { height: 44px; border-radius: 10px !important; }
body.justa-login form input:focus { outline-color: var(--justa-verde) !important; box-shadow: 0 0 0 4px rgb(0 130 76 / .14) !important; }
body.justa-login form a { color: var(--justa-verde) !important; }

/* fundo animado: ondas da logo */
#justa-fundo { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background: radial-gradient(1200px 700px at 15% 10%, #00a35f 0%, transparent 60%),
              radial-gradient(900px 600px at 90% 90%, #1e6b2f 0%, transparent 60%),
              linear-gradient(160deg, #005a35 0%, #00341f 55%, #002315 100%); }
#justa-fundo svg { position: absolute; left: 0; width: 200%; height: 100%; }
#justa-fundo .o1 { bottom: 0; animation: justa-onda 26s linear infinite; opacity: .7; }
#justa-fundo .o2 { bottom: 0; animation: justa-onda 38s linear infinite reverse; opacity: .5; }
#justa-fundo .o3 { bottom: 0; animation: justa-onda 52s linear infinite; opacity: .3; }
#justa-fundo .brilho { position: absolute; width: 520px; height: 520px; border-radius: 50%; right: -120px; top: -140px;
  background: radial-gradient(circle, rgb(254 209 65 / .35), transparent 65%); filter: blur(10px); animation: justa-pulso 9s ease-in-out infinite; }
#justa-rodape { position: fixed; bottom: 18px; left: 0; right: 0; text-align: center; z-index: 2; color: rgb(255 255 255 / .55);
  font: 500 12.5px Inter, system-ui, sans-serif; letter-spacing: .02em; }

@keyframes justa-sobe { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes justa-onda { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes justa-faixa { to { background-position: -200% 0; } }
@keyframes justa-pulso { 0%, 100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.12); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  #justa-fundo *, body.justa-login * { animation: none !important; opacity: 1 !important; transform: none !important; }
}
@media (max-width: 640px) {
  body.justa-login #app > div > main > section:first-child h2 { font-size: 24px; }
  #justa-rodape { display: none; }
  body.justa-login #app > div > main > section:nth-of-type(2) { margin-left: 16px !important; margin-right: 16px !important; padding: 28px !important; }
}

/* ---------- 4. conversa: balões com a cor da marca ---------- */
.right-bubble.bg-n-solid-iris { background-color: rgb(var(--solid-blue)) !important; }
.dark .right-bubble.bg-n-solid-iris { background-color: rgb(16 58 40) !important; }
body.justa-app .right-bubble.justa-msg-bot { box-shadow: inset 0 0 0 1px rgb(0 130 76 / .22); }
/* tela vazia com a marca */
.justa-vazio img { width: 96px !important; height: 96px !important; opacity: .95; animation: justa-flutua 5s ease-in-out infinite; }
.justa-vazio .justa-vazio-titulo { font-family: 'Poppins', Inter, sans-serif; font-weight: 600; font-size: 18px; color: rgb(var(--slate-12)); margin-top: 14px; }
.justa-vazio .justa-vazio-texto { color: rgb(var(--slate-11)); font-size: 14px; margin-top: 4px; max-width: 360px; text-align: center; }
@keyframes justa-flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ---------- 5. login sempre legível (mesmo com o navegador em modo escuro) ---------- */
body.justa-login #app > div > main > section:nth-of-type(2) { color-scheme: light; }
body.justa-login form label, body.justa-login form label * { color: #1f2a24 !important; font-weight: 600; }
body.justa-login form label a { color: var(--justa-verde) !important; }
body.justa-login form input {
  color: #111 !important; -webkit-text-fill-color: #111 !important; caret-color: var(--justa-verde);
  background: #fff !important; outline: 1px solid #d5dfd9 !important; font-size: 15px;
}
body.justa-login form input::placeholder { color: #8a948f !important; -webkit-text-fill-color: #8a948f !important; opacity: 1; }
body.justa-login form input:-webkit-autofill, body.justa-login form input:-webkit-autofill:hover, body.justa-login form input:-webkit-autofill:focus {
  -webkit-text-fill-color: #111 !important; -webkit-box-shadow: 0 0 0 1000px #fff inset !important; transition: background-color 9999s ease-out 0s;
}
body.justa-login form input:focus { outline: 2px solid var(--justa-verde) !important; }
body.justa-login form button:not(:last-child) svg, body.justa-login form .absolute svg { color: #5b6660 !important; }