/* ============================================================
   Casa da Mente — Skin WhatsApp Web para Chatwoot v4.16.2
   Revisar antes de qualquer upgrade do Chatwoot
   ============================================================ */

/* 1. TIPOGRAFIA — pilha do WhatsApp Web no Windows */
body, #app {
  font-family: 'Segoe UI', Helvetica, Arial, sans-serif !important;
}

/* 2. AREA DE DIGITACAO */
.ProseMirror-woot-style { min-height: 36px !important; }

/* 3. TAMANHO DO TEXTO DAS MENSAGENS */
[id^="message"] p {
  font-size: .8125rem !important;
  line-height: 1.45 !important;
  margin-top: .35em !important;
  margin-bottom: .35em !important;
}
[id^="message"] p:first-child { margin-top: 0 !important; }
[id^="message"] p:last-child  { margin-bottom: 0 !important; }

/* 4. LAYOUT DA CAIXA DE RESPOSTA — tabs a direita dos icones */
.reply-box {
  display: grid !important;
  grid-template-rows: 1fr auto;
  grid-template-columns: 1fr auto;
}
.reply-box__top {
  grid-row: 1 !important;
  grid-column: 1 / -1 !important;
  margin-top: 0 !important;
}
.reply-box > div:last-child {
  grid-row: 2 !important;
  grid-column: 1 !important;
  padding: 2px 6px !important;
}
.reply-box > div:first-child {
  grid-row: 2 !important;
  grid-column: 2 !important;
  height: 2rem !important;
  min-height: 2rem !important;
  align-self: center;
  padding: 0 8px !important;
}

/* 5. FUNDO DA AREA DE CONVERSA — bege WhatsApp com textura de pontos */
.conversation-panel {
  background-color: #eae6df !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2260%22 height=%2260%22 viewBox=%220 0 60 60%22%3E%3Cg fill=%22%23d9d3c8%22 fill-opacity=%220.35%22%3E%3Ccircle cx=%2210%22 cy=%2210%22 r=%221.2%22/%3E%3Ccircle cx=%2240%22 cy=%2225%22 r=%221.2%22/%3E%3Ccircle cx=%2222%22 cy=%2248%22 r=%221.2%22/%3E%3Ccircle cx=%2252%22 cy=%2252%22 r=%221.2%22/%3E%3C/g%3E%3C/svg%3E") !important;
}

/* 6. BOLHAS — enviadas (equipe): verde WhatsApp */
.right-bubble {
  background-color: #d9fdd3 !important;
  color: #111b21 !important;
  border-radius: 7.5px !important;
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, .13) !important;
}

/* 6. BOLHAS — recebidas (paciente): branco */
.left-bubble {
  background-color: #ffffff !important;
  color: #111b21 !important;
  border-radius: 7.5px !important;
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, .13) !important;
}

/* Timestamp: cinza exato do WhatsApp */
.right-bubble .text-n-slate-11,
.left-bubble  .text-n-slate-11 { color: #667781 !important; }

/* Timestamp: margem compacta */
.right-bubble .mt-2,
.left-bubble  .mt-2 { margin-top: 2px !important; }

/* Links dentro das bolhas */
.right-bubble a, .left-bubble a { color: #027eb5 !important; }

/* 7. COR DE MARCA — teal WhatsApp substitui azul Chatwoot */
.bg-n-brand                  { background-color: #00a884 !important; }
.text-n-brand                { color: #008069 !important; }
.border-n-brand,
.outline-n-brand             { border-color: #00a884 !important; outline-color: #00a884 !important; }
.hover\:bg-n-brand:hover     { background-color: #008069 !important; }