/* =====================================================================
   Chatwoot con aspecto de WhatsApp (Servijaén)
   Se inyecta desde nginx (sub_filter) en chat.servijaen.com.
   Para quitarlo: borrar la línea sub_filter de la plantilla nginx "chatwoot".
   ===================================================================== */

/* --- Acento: del azul de Chatwoot al verde de WhatsApp (variables RGB de Chatwoot, modo claro) --- */
:root {
  --blue-9: 0 168 132;        /* #00a884 verde WhatsApp */
  --blue-10: 0 143 112;       /* hover */
  --solid-blue: 217 253 211;  /* #d9fdd3 burbuja saliente */
  --solid-blue-2: 241 253 239;
}

/* Chatwoot trae el azul de marca fijo en estas clases (no usa variables): se sustituyen por el verde */
.bg-n-brand { background-color: #00a884 !important; }
.text-n-brand { color: #00a884 !important; }
.border-n-brand { border-color: #00a884 !important; }
.bg-n-brand\/5 { background-color: rgba(0, 168, 132, .05) !important; }
.bg-n-brand\/10 { background-color: rgba(0, 168, 132, .1) !important; }
.bg-n-brand\/20 { background-color: rgba(0, 168, 132, .2) !important; }
.border-n-brand\/50 { border-color: rgba(0, 168, 132, .5) !important; }

/* Pestañas y contadores activos (texto, insignia y raya inferior) */
.text-n-blue-11, .text-n-blue-10, .text-n-blue-9 { color: #008069 !important; }
.bg-n-blue-3, .bg-n-blue-2 { background-color: #e3f9e9 !important; }
.bg-n-blue-4, .bg-n-blue-5 { background-color: #d1f4dc !important; }
.border-n-blue-9, .border-n-blue-10 { border-color: #00a884 !important; }
[class*="after:h-[2px]"].text-n-blue-11::after { background-color: #00a884 !important; }

/* --- Pestañas de Conversaciones: orden Todos, Mías, Sin asignar (en el DOM son Mías, Sin asignar, Todos) --- */
.conversations-list-wrap ul:has(> li:nth-child(3):last-child > a[class*="after:h-[2px]"]) > li:last-child { order: -1; }
.conversations-list-wrap ul:has(> li:nth-child(3):last-child > a[class*="after:h-[2px]"]) > li { margin-left: 0 !important; margin-right: 1rem !important; }

/* --- Zona de chat: fondo beige con trama sutil, como WhatsApp --- */
.conversation-panel {
  background-color: #efeae2 !important;
  background-image: radial-gradient(rgba(11, 20, 26, .055) 1px, transparent 1.2px);
  background-size: 20px 20px;
}

/* --- Burbujas --- */
.right-bubble,
[class*="left-bubble"] {
  color: #111b21 !important;
  font-size: 14.2px !important;
  line-height: 1.4 !important;
  padding: 6px 9px 7px !important;
  box-shadow: 0 1px .5px rgba(11, 20, 26, .13);
}
.right-bubble {                      /* mensajes nuestros */
  background-color: #d9fdd3 !important;
  border-radius: 8px 8px 2px 8px !important;
}
[class*="left-bubble"] {             /* mensajes del cliente */
  background-color: #ffffff !important;
  border-radius: 8px 8px 8px 2px !important;
}
.right-bubble a,
[class*="left-bubble"] a { color: #027eb5 !important; }
.right-bubble .prose p,
[class*="left-bubble"] .prose p { margin: 0 0 .45em !important; }
.right-bubble .prose p:last-child,
[class*="left-bubble"] .prose p:last-child { margin-bottom: 0 !important; }
.message-bubble-container { margin-bottom: 8px !important; }

/* --- Redondeo y suavidad general de la cabecera y la caja de respuesta --- */
.reply-box, [class*="reply-box"] {
  border-radius: 10px !important;
}

/* --- Lista de conversaciones: tarjeta activa/hover al estilo del panel de WhatsApp --- */
.conversations-list .conversation:hover { background-color: #f5f6f6 !important; }
.conversations-list .conversation.active,
.conversations-list .conversation[class*="active"] { background-color: #f0f2f5 !important; }