/* ── Corrige texto "apagado" no Windows/Electron ─────────────────────────
   Investigado a fundo (CDP direto no app, descartando cor/opacidade/tema/
   DPI um por um): a cor do texto SEMPRE estava correta (confirmado via
   getComputedStyle), mas o desenho na tela saía visivelmente mais claro/
   fino do que deveria. Causa real: "-webkit-font-smoothing: antialiased"
   no CSS do próprio Chatwoot — essa propriedade foi pensada pro
   antialiasing do macOS; no Windows (especialmente sem aceleração de
   vídeo, como o app desktop usa) ela deixa o texto com traços mais finos
   e mais claros que o normal, virando "quase invisível" em textos grandes
   com peso leve (ex: o título "Entrar no Chatwoot" na tela de login). */
* {
  -webkit-font-smoothing: auto !important;
}


/* ── Hope Consultoria: reskin da cor de marca (azul → teal) ──────────────── */
/* O Chatwoot já tem uma paleta teal pronta internamente (Radix scale),
   só a cor de marca/ação principal usa a escala "blue". Substituímos essa
   escala inteira pela teal já existente — todo botão, link, estado ativo
   etc. que usava azul passa a usar o teal da Hope automaticamente. */
html:not(.dark) { color-scheme: light; }
html.dark { color-scheme: dark; }

:root {
  --blue-1: var(--teal-1);
  --blue-2: var(--teal-2);
  --blue-3: var(--teal-3);
  --blue-4: var(--teal-4);
  --blue-5: var(--teal-5);
  --blue-6: var(--teal-6);
  --blue-7: var(--teal-7);
  --blue-8: var(--teal-8);
  --blue-9: var(--teal-9);
  --blue-10: var(--teal-10);
  --blue-11: var(--teal-11);
  --blue-12: var(--teal-12);
  --text-blue: 13 61 56;
  --solid-blue: 204 243 234;
  --solid-blue-2: 250 254 253;
  --border-blue-strong: 0 133 115;
  --border-blue: 18, 165, 148, .5;
}

.dark {
  --blue-1: var(--teal-1);
  --blue-2: var(--teal-2);
  --blue-3: var(--teal-3);
  --blue-4: var(--teal-4);
  --blue-5: var(--teal-5);
  --blue-6: var(--teal-6);
  --blue-7: var(--teal-7);
  --blue-8: var(--teal-8);
  --blue-9: var(--teal-9);
  --blue-10: var(--teal-10);
  --blue-11: var(--teal-11);
  --blue-12: var(--teal-12);
  --text-blue: 173 240 221;
  --solid-blue: 2 59 55;
  --solid-blue-2: 17 28 27;
  --border-blue-strong: 11 216 182;
  --border-blue: 18, 165, 148, .5;
}

/* ── Toque "estilo WhatsApp" na área de conversa ─────────────────────────── */
:root { --hope-chat-bg: 236 234 226; }
.dark { --hope-chat-bg: 11 20 26; }

.conversation-panel,
.conversation-panel .messages-container {
  background-color: rgb(var(--hope-chat-bg)) !important;
}

/* Bolhas de mensagem enviada (nosso lado) com o verde clássico do WhatsApp */
.message-bubble-container.justify-end .message-text__wrap,
.message-bubble-container.justify-end .bubble {
  background-color: #d9fdd3 !important;
  border-radius: 10px !important;
}
.dark .message-bubble-container.justify-end .message-text__wrap,
.dark .message-bubble-container.justify-end .bubble {
  background-color: #005c4b !important;
  color: #e9edef !important;
}

/* ── Botão de alternar tema claro/escuro ─────────────────────────────────── */
.hope-theme-toggle {
  background: transparent;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 6px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 15px;
  margin-left: 6px;
}
.dark .hope-theme-toggle {
  border-color: rgba(255,255,255,.2);
  color: #fff;
}

/* ── Botões de ação da mensagem (responder/editar/apagar) ────────────────
   Antes eram bolinhas coloridas (verde/roxo/vermelho) grudadas na bolha —
   ficava poluído e destoava do resto da interface. Agora é um "chip"
   discreto neutro, que só ganha cor no hover de cada ação. */
.hope-msg-action-btn {
  background: rgba(17, 24, 28, .82);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .12);
  transition: background-color .12s ease, transform .12s ease;
}
.hope-msg-action-btn:hover {
  transform: translateY(-1px);
}
.hope-reply-btn:hover { background: #12a594; }
.hope-edit-btn:hover { background: #5e35b1; }
.hope-delete-btn:hover { background: #e53935; }