/* ============================================================================
   Tema do Painel Vivo aplicado ao Chatwoot (Hub → Canais → Conversas).
   Paleta idêntica a SYSTEM/apps/panel/src/estilo.css: verde-mata #00432f,
   verde #006a50, verde-claro #12896a, cremes #fbf8f1/#f6f1e7/#f2ece1, borda
   #e4dcce, tinta marrom-café #3e2a20, âmbar #e0a62e, coral #e8631a, magenta
   #c0246b, canela #b5651a. Fontes Manrope (texto) e DM Serif Display (títulos).

   Como funciona: o Chatwoot v4 pinta quase tudo com variáveis RGB em :root
   (--slate-*, --blue-*, --solid-*, --surface-* …). Aqui essas variáveis são
   redefinidas — o mesmo bloco vale para .dark, para o app nunca ficar escuro
   mesmo se o color_scheme do usuário vier "dark". O azul da marca (#2781f6)
   é fixo no CSS compilado, por isso os seletores que o usam são sobrescritos
   um a um no fim do arquivo (gerados do dashboard-*.css da versão 4.17).

   Montado em /app/public/laila-tema.css e linkado no layout vueapp.html.erb.
   Remover o volume do compose desfaz tudo.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Manrope:wght@400;500;600;700;800&display=swap');

:root,
.dark,
body.dark,
html.dark {
  /* ---- neutros: cinza-azulado vira creme → café ---- */
  --slate-1: 252 250 245;
  --slate-2: 251 248 241;
  --slate-3: 246 241 231;
  --slate-4: 242 236 225;
  --slate-5: 235 227 213;
  --slate-6: 228 220 206;
  --slate-7: 217 208 192;
  --slate-8: 196 182 166;
  --slate-9: 156 138 125;
  --slate-10: 138 122 110;
  --slate-11: 106 83 71;
  --slate-12: 62 42 32;
  --gray-1: 252 250 245;
  --gray-2: 251 248 241;
  --gray-3: 246 241 231;
  --gray-4: 242 236 225;
  --gray-5: 235 227 213;
  --gray-6: 228 220 206;
  --gray-7: 217 208 192;
  --gray-8: 196 182 166;
  --gray-9: 156 138 125;
  --gray-10: 138 122 110;
  --gray-11: 106 83 71;
  --gray-12: 62 42 32;

  /* ---- azul (marca, links, seleção, ativo) vira verde ---- */
  --blue-1: 247 251 249;
  --blue-2: 240 250 245;
  --blue-3: 228 241 233;
  --blue-4: 211 232 220;
  --blue-5: 191 220 205;
  --blue-6: 167 196 183;
  --blue-7: 134 171 155;
  --blue-8: 90 154 131;
  --blue-9: 0 106 80;
  --blue-10: 0 90 68;
  --blue-11: 0 106 80;
  --blue-12: 0 67 47;

  /* ---- iris/violet (rótulos, notas) viram magenta / canela ---- */
  --iris-1: 255 251 253;
  --iris-2: 254 246 250;
  --iris-3: 252 233 242;
  --iris-4: 249 217 232;
  --iris-5: 244 198 220;
  --iris-6: 236 175 205;
  --iris-7: 224 146 186;
  --iris-8: 208 104 160;
  --iris-9: 192 36 107;
  --iris-10: 176 30 97;
  --iris-11: 158 29 87;
  --iris-12: 96 16 52;
  --violet-1: 255 251 247;
  --violet-2: 253 246 238;
  --violet-3: 250 235 219;
  --violet-4: 246 221 195;
  --violet-5: 240 204 168;
  --violet-6: 231 184 138;
  --violet-7: 219 159 103;
  --violet-8: 203 130 62;
  --violet-9: 181 101 26;
  --violet-10: 163 90 22;
  --violet-11: 138 76 18;
  --violet-12: 74 40 9;

  /* ---- âmbar (morno / pendente) na tonalidade dourada do painel ---- */
  --amber-1: 254 253 250;
  --amber-2: 253 249 236;
  --amber-3: 251 240 208;
  --amber-4: 249 231 178;
  --amber-5: 245 219 146;
  --amber-6: 238 205 118;
  --amber-7: 228 188 88;
  --amber-8: 214 166 52;
  --amber-9: 224 166 46;
  --amber-10: 206 150 34;
  --amber-11: 138 109 21;
  --amber-12: 74 55 12;

  /* ---- teal (sucesso, resolvido) = verde-claro ---- */
  --teal-1: 248 252 250;
  --teal-2: 240 250 245;
  --teal-3: 220 243 228;
  --teal-4: 198 234 214;
  --teal-5: 176 223 199;
  --teal-6: 150 208 183;
  --teal-7: 118 190 163;
  --teal-8: 78 168 138;
  --teal-9: 18 137 106;
  --teal-10: 14 122 94;
  --teal-11: 0 106 80;
  --teal-12: 10 55 42;

  /* ---- ruby (erro, urgente) puxado pro rosa-forte do painel ---- */
  --ruby-9: 200 48 78;
  --ruby-10: 184 40 70;
  --ruby-11: 158 29 87;
  --ruby-12: 96 16 52;

  /* ---- superfícies ---- */
  --background-color: 246 241 231;
  --surface-1: 251 248 241;
  --surface-2: 255 255 255;
  --surface-active: 255 255 255;
  --background-input-box: 62, 42, 32, .035;
  --text-blue: 0 67 47;
  --text-purple: 96 16 52;
  --text-amber: 74 55 12;
  --border-container: 241 235 224;
  --border-strong: 228 220 206;
  --border-weak: 241 235 224;
  --border-blue-strong: 0 106 80;
  --solid-1: 251 248 241;
  --solid-2: 252 250 245;
  --solid-3: 255 255 255;
  --solid-active: 255 255 255;
  --solid-amber: 250 236 205;
  --solid-blue: 228 241 233;
  --solid-blue-2: 247 251 249;
  --solid-iris: 252 233 242;
  --solid-purple: 250 235 219;
  --solid-red: 253 221 226;
  --solid-amber-button: 245 219 146;
  --card-color: 255 255 255;
  --overlay: 62, 42, 32, .18;
  --overlay-avatar: 255, 255, 255, .67;
  --button-color: 255 255 255;
  --button-hover-color: 255, 255, 255, .2;
  --label-background: 246 241 231;
  --label-border: 62, 42, 32, .06;
  --alpha-1: 228, 220, 206, .35;
  --alpha-2: 196, 182, 166, .22;
  --alpha-3: 251, 248, 241, .96;
  --black-alpha-1: 62, 42, 32, .12;
  --black-alpha-2: 62, 42, 32, .05;
  --border-blue: 0, 106, 80, .5;
  --white-alpha: 255, 255, 255, .8;
  --call-widget: 0, 67, 47, .96;
  --call-widget-border: 255, 255, 255, .12;
  --call-widget-text: 251, 248, 241, 1;
  --call-widget-sub-text: 167, 196, 183, 1;

  color-scheme: light;
}

/* ---- tipografia do painel ---- */
html, body, #app, input, textarea, select, button {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
body { color: #3e2a20; }
h1, h2, .page-title, .text-2xl, .text-xl {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400 !important;
  letter-spacing: .1px;
}

/* ---- fundo do app: creme do painel, sem aurora/vidro ---- */
html, body, #app, .app-wrapper { background: #f6f1e7 !important; }

/* balão da mensagem enviada = bolha verde-clara do painel;
   a recebida fica branca sobre o creme */
.right .bubble, .message.right .bubble { background: #dcf3e4 !important; color: #3e2a20 !important; }

/* ---- rolagem no desenho do painel ---- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #d9d2c6; border-radius: 10px; border: 3px solid #f6f1e7; }
::-webkit-scrollbar-track { background: transparent; }

/* ---- badge 🎯 anúncio do overlay do Hub, na paleta ---- */
.conversation .gc-ad-badge {
  background: rgba(224, 166, 46, .18) !important;
  color: #8a6d15 !important;
  box-shadow: inset 0 0 0 1px rgba(224, 166, 46, .45) !important;
}

/* ============================================================================
   Azul fixo (#2781f6 / #5b5bd6 / #6e56cf) do CSS compilado → verde / magenta /
   canela. Gerado a partir de dashboard-CdCzxnFM.css (Chatwoot v4.17.0-ce).
   ========================================================================== */
.banner.primary[data-v-dd067508]{background-color:#006a50 !important}
.border-n-brand{border-color:#006a50 !important}
.border-t-n-brand{border-top-color:#006a50 !important}
.bg-\[\#2781F6\]{background-color:#006a50 !important}
.bg-n-blue-9{background-color:#006a50 !important}
.bg-n-brand{background-color:#006a50 !important}
.bg-n-iris-9{background-color:#c0246b !important}
.bg-violet-500{background-color:#b5651a !important}
.fill-n-blue-9{fill:#006a50 !important}
.fill-n-violet-9{fill:#b5651a !important}
.\!text-n-iris-9{color:#c0246b!important}
.text-n-blue-9{color:#006a50 !important}
.text-n-brand{color:#006a50 !important}
.text-n-iris-9{color:#c0246b !important}
.text-n-violet-9{color:#b5651a !important}
.\!outline-n-brand{outline-color:#006a50!important}
.outline-n-blue-9{outline-color:#006a50 !important}
.outline-n-brand{outline-color:#006a50 !important}
p a{color:#006a50 !important}
p a:is(.dark *){color:#006a50 !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:#006a50 !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:is(.dark *){outline-color:#006a50 !important}
select:focus{outline-color:#006a50 !important}
select:focus:is(.dark *){outline-color:#006a50 !important}
textarea:focus{outline-color:#006a50 !important}
textarea:focus:is(.dark *){outline-color:#006a50 !important}
.before\:\!border-t-n-brand:before{border-top-color:#006a50!important}
.before\:bg-n-brand:before{background-color:#006a50 !important}
.after\:bg-n-brand:after{background-color:#006a50 !important}
.checked\:border-n-brand:checked{border-color:#006a50 !important}
.checked\:bg-n-brand:checked{background-color:#006a50 !important}
.indeterminate\:border-n-brand:indeterminate{border-color:#006a50 !important}
.indeterminate\:bg-n-brand:indeterminate{background-color:#006a50 !important}
.focus-within\:outline-n-brand:focus-within{outline-color:#006a50 !important}
.hover\:border-n-brand:hover{border-color:#006a50 !important}
.hover\:text-n-brand:hover{color:#006a50 !important}
.focus\:border-n-brand:focus{border-color:#006a50 !important}
.focus\:outline-n-blue-9:focus{outline-color:#006a50 !important}
.focus\:outline-n-brand:focus{outline-color:#006a50 !important}
.focus-visible\:outline-n-brand:focus-visible{outline-color:#006a50 !important}
.hover\:enabled\:border-n-blue-9:enabled:hover{border-color:#006a50 !important}
.group:focus-within .group-focus-within\:text-n-brand{color:#006a50 !important}
.group:hover .group-hover\:bg-n-brand{background-color:#006a50 !important}
.has-\[\:focus\]\:outline-n-brand:has(:focus){outline-color:#006a50 !important}
.prose-a\:text-n-brand :is(:where(a):not(:where([class~=not-prose],[class~=not-prose] *))){color:#006a50 !important}
.prose-strong\:text-n-brand :is(:where(strong):not(:where([class~=not-prose],[class~=not-prose] *))){color:#006a50 !important}
.dark\:border-n-brand:is(.dark *){border-color:#006a50 !important}
.dark\:\!outline-n-brand:is(.dark *){outline-color:#006a50!important}
.dark\:checked\:border-n-brand:checked:is(.dark *){border-color:#006a50 !important}
.dark\:checked\:bg-n-brand:checked:is(.dark *){background-color:#006a50 !important}
.dark\:focus-within\:outline-n-brand:focus-within:is(.dark *){outline-color:#006a50 !important}
.dark\:hover\:text-n-brand:hover:is(.dark *){color:#006a50 !important}
.dark\:focus\:outline-n-brand:focus:is(.dark *){outline-color:#006a50 !important}
.dark\:has-\[\:focus\]\:outline-n-brand:has(:focus):is(.dark *){outline-color:#006a50 !important}
.ProseMirror-prompt .ProseMirror-prompt-buttons button[type=submit]{background-color:#006a50 !important}
.menu[data-v-60cefcf4]:hover{background-color:#006a50 !important}
.search-input[data-v-69e77a2c]:focus{border-color:#006a50 !important}
/* hover do botão primário: verde-claro, como no painel */
.bg-n-brand:hover, .hover\:bg-n-brand:hover, .group:hover .group-hover\:bg-n-brand:hover { background-color:#12896a !important }

/* ============================================================================
   Barra lateral = sidebar do painel: verde-mata, texto verde-fumo, item ativo
   verde-claro com texto creme. Só a <aside> principal (a árvore é
   #app > div > div > aside); o painel de contato da conversa não é tocado.
   ========================================================================== */
#app > div > div > aside { background: #00432f !important; }
#app > div > div > aside *,
#app > div > div > aside .border-n-weak,
#app > div > div > aside .border-n-strong { border-color: rgba(255, 255, 255, .10) !important; }
#app > div > div > aside .bg-n-strong { background: rgba(255, 255, 255, .18) !important; }
#app > div > div > aside,
#app > div > div > aside .text-n-slate-12,
#app > div > div > aside .text-n-slate-11,
#app > div > div > aside .text-n-slate-10,
#app > div > div > aside .text-n-slate-9,
#app > div > div > aside .\!text-n-slate-11,
#app > div > div > aside a,
#app > div > div > aside button,
#app > div > div > aside span { color: #a7c4b7 !important; }
#app > div > div > aside .font-medium,
#app > div > div > aside .text-n-slate-12.font-medium,
#app > div > div > aside #sidebar-account-switcher span { color: #fbf8f1 !important; }
/* item ativo */
#app > div > div > aside a.active,
#app > div > div > aside a.router-link-exact-active,
#app > div > div > aside a.active *,
#app > div > div > aside a.router-link-exact-active * {
  background-color: #12896a !important; color: #fbf8f1 !important;
}
#app > div > div > aside a.active *, #app > div > div > aside a.router-link-exact-active * { background-color: transparent !important; }
/* fundos translúcidos (hover, chips, contadores) sobre o verde */
#app > div > div > aside .bg-n-alpha-1,
#app > div > div > aside .bg-n-alpha-2,
#app > div > div > aside .bg-n-alpha-3,
#app > div > div > aside .bg-n-slate-3,
#app > div > div > aside .bg-n-slate-4,
#app > div > div > aside [class*="bg-n-solid"],
#app > div > div > aside .bg-n-background,
#app > div > div > aside .bg-n-surface-1,
#app > div > div > aside .bg-n-surface-2 { background-color: rgba(255, 255, 255, .10) !important; }
#app > div > div > aside a:not(.active):hover,
#app > div > div > aside button:hover,
#app > div > div > aside [class*="hover:bg-gradient"]:hover,
#app > div > div > aside .hover\:bg-n-alpha-2:hover,
#app > div > div > aside .hover\:bg-n-alpha-1:hover { background: rgba(255, 255, 255, .08) !important; background-image: none !important; }
/* busca da barra lateral: campo escuro com texto creme */
#app > div > div > aside input,
#app > div > div > aside [role="combobox"] {
  background: rgba(255, 255, 255, .10) !important; color: #fbf8f1 !important;
  border-color: rgba(255, 255, 255, .12) !important; outline-color: rgba(255, 255, 255, .25) !important;
}
#app > div > div > aside input::placeholder { color: #6d9282 !important; }
/* degradê do rodapé usa o fundo do app — aqui tem que sumir no verde */
#app > div > div > aside .from-n-background {
  --tw-gradient-from: #00432f var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(0, 67, 47, 0) var(--tw-gradient-to-position) !important;
}
/* listas suspensas abertas dentro da barra (troca de conta, menu do perfil) */
#app > div > div > aside [role="listbox"],
#app > div > div > aside [role="menu"],
#app > div > div > aside [class*="shadow"] { background-color: #00432f !important; }
#app > div > div > aside .before\:bg-n-slate-4:before { background-color: rgba(255, 255, 255, .18) !important; }

/* ilustração azul do estado vazio ("selecione uma conversa") puxada pro verde */
main img[src*="no-chat"], main img[src*="empty"] { filter: hue-rotate(-55deg) saturate(.8); }