/* ============================================================
   TANDA CHAT WHATSAPP - Tema visual estilo WhatsApp
   Sobrescribe los estilos base del chat (.cx-*) para darle un
   look más cercano a WhatsApp, manteniendo la paleta Manolito
   (rojo bordó para mensajes propios).

   Mejoras:
   - Background del área de mensajes con patrón sutil
   - Burbujas con cola triangular tipo WhatsApp
   - Hora y checks dentro de la burbuja abajo a la derecha
   - Animación suave al recibir mensaje (slide-in)
   - Header tipo WhatsApp con avatar circular
   - Input con border radius pill
   ============================================================ */

/* Background del área de mensajes con patrón */
.cx-msgs {
    background:
        linear-gradient(rgba(15, 17, 22, 0.96), rgba(15, 17, 22, 0.96)),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><g fill='%23ffffff' fill-opacity='0.025'><circle cx='40' cy='40' r='2'/><circle cx='10' cy='10' r='1.5'/><circle cx='70' cy='30' r='1.5'/><circle cx='20' cy='60' r='1.5'/><circle cx='60' cy='70' r='1.5'/></g></svg>") !important;
    background-size: cover, 80px 80px !important;
    padding: 14px 16px !important;
}

/* Burbujas: efecto "cola" tipo WhatsApp */
.cx-bubble {
    border-radius: 12px !important;
    border-top-left-radius: 4px !important;
    padding: 8px 12px 6px !important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4) !important;
    position: relative !important;
}

/* Cola del mensaje del otro (izquierda) */
.cx-msg:not(.cx-msg-out) .cx-bubble::before {
    content: '';
    position: absolute;
    top: 0;
    left: -8px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 8px 8px 0;
    border-color: transparent var(--mn-bg-2, #1c2028) transparent transparent;
    filter: drop-shadow(-1px 1px 0 rgba(0, 0, 0, 0.15));
}

/* Cola del mensaje mío (derecha) */
.cx-msg-out .cx-bubble {
    border-top-left-radius: 12px !important;
    border-top-right-radius: 4px !important;
}
.cx-msg-out .cx-bubble::after {
    content: '';
    position: absolute;
    top: 0;
    right: -8px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 8px 8px;
    border-color: transparent transparent transparent #c8102e;
    filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.15));
}

/* Hora dentro de la burbuja abajo a la derecha */
.cx-meta {
    font-size: 10.5px !important;
    color: rgba(255, 255, 255, 0.55) !important;
    margin-left: 10px !important;
    float: right !important;
    margin-top: 2px !important;
    margin-bottom: -2px !important;
    line-height: 1.2 !important;
    display: inline-flex !important;
    align-items: center;
    gap: 3px;
}
.cx-msg-out .cx-meta {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Check único = enviado, doble check = entregado, doble check azul = leído */
.cx-checks {
    font-size: 12px !important;
    line-height: 1 !important;
    margin-left: 2px;
}
.cx-checks.is-read {
    color: #34b7f1 !important;  /* azul WhatsApp */
    text-shadow: 0 0 1px rgba(52, 183, 241, 0.3);
}

/* Animación slide-in al recibir mensaje */
.cx-msg {
    animation: cxMsgIn 200ms ease-out;
}
@keyframes cxMsgIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Avatar circular más prominente */
.cx-avatar {
    border: 2px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* Lista de conversaciones - hover más suave */
.cx-row {
    transition: background 120ms ease !important;
    border-radius: 10px !important;
    margin: 2px 6px !important;
    padding: 8px 10px !important;
}
.cx-row:hover {
    background: rgba(255, 255, 255, 0.04) !important;
}
.cx-row.is-sel {
    background: rgba(200, 16, 46, 0.18) !important;
    box-shadow: inset 3px 0 0 #c8102e !important;
}

/* Online dot tipo WhatsApp - más visible */
.cx-online-dot {
    background: #25d366 !important;  /* verde WhatsApp */
    box-shadow: 0 0 0 2px var(--mn-bg-1, #0f1116), 0 0 6px rgba(37, 211, 102, 0.6) !important;
}

/* Input estilo WhatsApp con border-radius pill */
.cx-input-area textarea,
.cx-input-area input[type="text"] {
    border-radius: 22px !important;
    padding: 10px 16px !important;
    background: var(--mn-bg-2, #1c2028) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    transition: border-color 120ms ease !important;
}
.cx-input-area textarea:focus,
.cx-input-area input[type="text"]:focus {
    border-color: rgba(200, 16, 46, 0.55) !important;
    outline: none !important;
}

/* Botón de enviar - circular tipo WhatsApp */
.cx-btn-enviar {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    background: linear-gradient(135deg, #c8102e, #8a0a1f) !important;
    color: #fff !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 2px 6px rgba(200, 16, 46, 0.5) !important;
    transition: transform 100ms ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    flex-shrink: 0;
}
.cx-btn-enviar:hover { transform: scale(1.05); }
.cx-btn-enviar:active { transform: scale(0.95); }

/* Header del chat - tipo WhatsApp */
.cx-chat-head,
.cx-header,
.cx-conv-head {
    background: linear-gradient(135deg, rgba(200, 16, 46, 0.15), rgba(0, 0, 0, 0.2)) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 10px 14px !important;
}

/* Reply preview con borde naranja (mantener) */
.cx-reply {
    background: rgba(0, 0, 0, 0.25) !important;
    border-left: 3px solid #f5a623 !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
    margin: -2px -4px 6px !important;
}

/* Badges no-leídos tipo WhatsApp - circular verde */
.cx-tab-badge,
.cx-row-badge,
.cx-msg-badge {
    background: #25d366 !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 1px 7px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    min-width: 18px !important;
    text-align: center !important;
    box-shadow: 0 1px 3px rgba(37, 211, 102, 0.4) !important;
}

/* Reacciones más bonitas */
.cx-reacciones,
.cx-reactions {
    display: inline-flex;
    gap: 3px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 12px;
    margin-top: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Typing indicator (si existe) */
.cx-typing {
    color: #25d366 !important;
    font-style: italic;
    font-size: 12px;
    padding: 4px 8px;
}

/* Mobile - mejorar layout */
@media (max-width: 760px) {
    .cx-msgs {
        padding: 8px 10px !important;
    }
    .cx-bubble-wrap {
        max-width: 82% !important;
    }
    .cx-bubble {
        font-size: 14px !important;
        padding: 8px 11px 5px !important;
    }
    .cx-input-area {
        padding: 8px 10px !important;
    }
    .cx-input-area textarea,
    .cx-input-area input[type="text"] {
        font-size: 16px !important;  /* evita zoom iOS */
    }
}

/* ChatDock (mini-chats flotantes) - también con tema WhatsApp */
.chd-window {
    border-radius: 12px 12px 0 0 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.chd-head {
    background: linear-gradient(135deg, #c8102e, #8a0a1f) !important;
    border-radius: 11px 11px 0 0 !important;
    padding: 8px 12px !important;
}
.chd-msgs {
    background:
        linear-gradient(rgba(15, 17, 22, 0.96), rgba(15, 17, 22, 0.96)),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><g fill='%23ffffff' fill-opacity='0.025'><circle cx='40' cy='40' r='2'/><circle cx='10' cy='10' r='1.5'/></g></svg>") !important;
}