/* === BOTÓN PRINCIPAL (Fallback - Flotante Solo) === */
#placeres-chat-toggle.placeres-chat-fallback {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    transition: all 0.3s ease;
    border: 2px solid #fff;
    overflow: visible; /* Permitir que el badge salga */
}
#placeres-chat-toggle.placeres-chat-fallback:hover { transform: scale(1.05); }


/* === BOTÓN INTEGRADO (Dentro de #floating-widget) === */
/* Usamos selectores muy específicos y !important para ignorar estilos del widget padre */
#floating-widget #placeres-chat-toggle.placeres-chat-integrated,
#placeres-chat-toggle.placeres-chat-integrated {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Forzar dimensiones exactas para que sea REDONDO */
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    max-width: 60px !important;
    max-height: 60px !important;
    
    border-radius: 50% !important;
    background: #fff !important; /* Fondo BLANCO para tu logo, ignorando el verde */
    
    box-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;
    margin: 5px 0 !important; /* Margen seguro */
    padding: 0 !important;
    border: 2px solid #fff !important;
    
    /* Evitar que el contenedor padre lo estire */
    flex: 0 0 auto !important; 
    
    cursor: pointer;
    overflow: visible !important; /* CLAVE: Para que se vea el numerito */
    z-index: 9999 !important;
}

#placeres-chat-toggle.placeres-chat-integrated:hover { transform: scale(1.05); }

/* Logo: Aseguramos que llene el botón y no se desplace */
.placeres-chat-logo { 
    width: 100% !important; 
    height: 100% !important; 
    object-fit: cover !important; 
    border-radius: 50% !important; 
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

/* === GLOW (Resplandor) === */
@keyframes placeres-pulse-fucsia {
    0% { box-shadow: 0 0 0 0 rgba(255, 0, 255, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(255, 0, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 0, 255, 0); }
}
.placeres-glow-active {
    animation: placeres-pulse-fucsia 2s infinite;
    border-color: #ff00ff !important;
}

/* === GLOBO PROACTIVO (Mensaje "Hola...") === */
.placeres-proactive-bubble {
    position: fixed;
    background: #fff;
    color: #000 !important;
    padding: 12px 16px;
    border-radius: 15px 15px 0 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    font-size: 14px;
    font-weight: 600;
    z-index: 10001;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.9);
    transition: all 0.4s;
    border: 1px solid #ddd;
    
    /* Por defecto */
    bottom: 95px;
    right: 20px;
    
    pointer-events: auto;
    cursor: pointer;
    line-height: 1.2;
}

.placeres-proactive-bubble.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* === BADGE DE NOTIFICACIÓN (Numerito) === */
#placeres-unread {
    position: absolute;
    /* Coordenadas negativas para que sobresalga */
    top: -5px !important; 
    right: -5px !important;
    left: auto !important;
    bottom: auto !important;
    
    /* Naranja fuerte para contrastar */
    background-color: #ff5722 !important; 
    color: #fff !important;
    
    border: 2px solid #fff !important;
    border-radius: 50% !important;
    min-width: 22px !important;
    height: 22px !important;
    padding: 0 4px !important;
    
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important;
    
    font-size: 11px !important; 
    font-weight: bold !important; 
    line-height: 1 !important;
    z-index: 20000 !important; /* Encima de todo */
    box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}

/* === VENTANA Y DEMÁS ESTILOS (Sin cambios) === */
.placeres-chat-window {
    position: fixed;
    width: 350px;
    height: 500px;
    max-height: 80vh;
    background: #ffffff !important;
    border-radius: 12px;
    box-shadow: 0 5px 30px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 10005;
    border: 1px solid #dcdcdc;
    font-family: sans-serif;
}

.placeres-chat-window-right { bottom: 95px; right: 20px; transform-origin: bottom right; }
.placeres-chat-window-left { bottom: 20px; left: 90px; transform-origin: bottom left; }

.placeres-chat-header {
    background-color: #f5f5f5 !important;
    border-bottom: 1px solid #e0e0e0;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.placeres-header-title { font-weight: bold; font-size: 16px; color: #000 !important; }
.placeres-header-subtitle { font-size: 13px; color: #666 !important; margin-top: 2px; }

.placeres-chat-close {
    cursor: pointer; opacity: 0.6; display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
}
.placeres-chat-close:hover { opacity: 1; background: rgba(0,0,0,0.05); }

.placeres-chat-messages {
    flex: 1; padding: 15px; overflow-y: auto; background-color: #fff;
    display: flex; flex-direction: column; gap: 10px;
}
.placeres-chat-welcome-text {
    text-align: center; color: #888; font-size: 13px; background: #f9f9f9;
    padding: 8px; border-radius: 8px; margin: 20px auto;
}

.placeres-message { max-width: 85%; display: flex; flex-direction: column; margin-bottom: 5px; }
.placeres-message-content {
    padding: 10px 14px; border-radius: 12px; font-size: 14px; line-height: 1.4;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.placeres-message-client { align-self: flex-end; }
.placeres-message-client .placeres-message-content { color: #fff !important; border-bottom-right-radius: 2px; }
.placeres-message-agent { align-self: flex-start; }
.placeres-message-agent .placeres-message-content {
    background-color: #f0f0f0 !important; color: #000 !important;
    border-bottom-left-radius: 2px; border: 1px solid #eee;
}
.placeres-message-time { font-size: 10px; color: #999; margin-top: 3px; margin-left: 2px; }

.placeres-chat-input-area {
    padding: 12px; background: #fff; border-top: 1px solid #eee;
    display: flex; align-items: flex-end; gap: 10px;
}
#placeres-chat-text {
    flex: 1; border: 1px solid #ccc; border-radius: 20px; padding: 10px 15px;
    resize: none; font-size: 14px; max-height: 80px; background: #fff; color: #000;
}
.placeres-chat-send { background: none; border: none; cursor: pointer; padding: 8px; color: #25D366; }
.placeres-chat-footer { text-align: center; font-size: 10px; color: #ccc; padding: 5px; background: #fff; }