/* ============================
   General Styles
============================ */

/* CONTENEDOR GENERAL  ------->   */
.phone-wrapper{
    display:flex;
    justify-content:center;
    margin:0px 0; /* Agrega espacio externo arriba y abajo */
}

    /* MARCO DEL TELÉFONO -------->   */
    .phone-frame{
        width:330px;
        height:610px;
        background:#1c1c1e;
        border-radius:30px;
        padding:12px;
        box-shadow:0 7px 10px rgba(245, 245, 255,.40);
        position:relative;
    }

        /* NOTCH SUPERIOR -------->   */
        .phone-notch{
            width:150px;
            height:32px;
            background:#1c1c1e;
            border-radius:20px;
            position:absolute;
            top:2px;
            left:50%;
            transform:translateX(-50%);
            z-index:5;
        }

        /* PANTALLA -------->   */
        .phone-screen{
            width:100%;
            height:100%;
            background:#f2f2f7;
            border-radius:25px;
            overflow:hidden;
            display:flex;
            flex-direction:column;
        }


            /* AREA DEL CHAT COMPLETA -------->    */
            #chatbot-box{
                display:flex;
                flex-direction:column;
                width:308px;
                height:605px;
                border:1px solid #ddd;
                border-radius:12px;
                padding:8px;
                font-family:system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
                background:#fff;
            }


                /* ÁREA MENSAJES -------->  */
                #chatbot-messages{
                    max-height:508px;
                    height:490px;                    
                    overflow-y:auto;
                    margin-bottom:10px;
                }
                    .chat-msg{
                        margin:8px 0;
                        display:flex;
                    }
                    .chat-user{justify-content:flex-end}
                    .chat-bot{justify-content:flex-start}
                    .chat-bubble{
                        padding:8px 12px;
                        border-radius:18px;
                        max-width:80%;
                        font-size:14px;
                        color:#000000;  /* Color del texto en las burbujas de chat FFFFFF Blanco */
                        line-height:1.4;
                    }
                    .chat-user .chat-bubble{
                        background:#dcf8c6;
                    }
                    .chat-bot .chat-bubble{
                        background:#f1f1f1;
                    }

                /* ZONA INPUT  ------->              */
                .chatbot-input-wrapper{  
                    background:#fff;
                    padding:5px;
                    border-top:1px solid #ddd;
                    position:relative;
                }

                    #chatbot-prechat{
                        position:absolute;
                        max-height:330px;
                        height:320px;  
                        width:100%;
                        inset:0;
                        background:#fff;
                        z-index:10;

                        display:flex;
                        flex-direction:column;
                        gap:5px; /* Espacio entre campos */
                        padding:0px;
                        justify-content:center;
                        transform: translateY(-268px); /* 🔼 Si aumenta lo sube */
                    }

                        .chatbot-title{
                            text-align: center;
                            margin-bottom: 15px;
                        }

                        #chatbot-name,
                        #chatbot-phone,
                        #chatbot-email{
                            width:100%;
                            padding:8px 10px;
                            margin-bottom:6px;
                            border-radius:8px;
                            border:1px solid #ccc;
                            font-size:14px;
                            box-sizing:border-box; /* 🔥 CLAVE */
                        }

                        #chatbot-start{
                            height:55px;
                            padding:10px;
                            border:none;
                            border-radius:20px;
                            background:#25D366;
                            color:#fff;
                            font-weight:600;
                            cursor:pointer;
                        }


                        .chatbot-invalid{
                            border:1px solid #d93025 !important;
                            padding-right:90px; /* deja espacio para el mensaje */
                        }

                        /* Texto de error a la derecha */
                        .chatbot-error-inline{
                            position:absolute;
                            right:14px;
                            top:50%;
                            transform:translateY(-50%);
                            font-size:50%; /* 👈 50% más pequeño */
                            color:#d93025;
                            pointer-events:none;
                            white-space:nowrap;
                        }




                    /* Área de escritura */
                    .chatbot-input-row{
                        display:flex;
                        gap:8px;
                        align-items:center;
                    }

                        #chatbot-input{
                            flex:1;
                            padding:10px 14px;
                            border-radius:22px;

                            border:none;
                            outline:none;

                            font-size:14px;
                            line-height:20px;

                            height:42px;
                            max-height:160px;
                            resize:none;
                            overflow-y:hidden;

                            box-sizing:border-box;
                            background:#fff;

                            /* sombra MUY sutil */
                            box-shadow:0 0.5px 1.5px rgba(0,0,0,.35);
                            transition:box-shadow .2s ease;
                        }

                        /* Botón enviar */
                        #chatbot-send{
                            width:42px;
                            height:42px;
                            border-radius:50%;
                            border:none;
                            background:#25D366;
                            color:#fff;
                            cursor:pointer;
                            display:flex;
                            align-items:center;
                            justify-content:center;
                            font-size:18px;
                            transition:background .2s ease;
                        }

                        #chatbot-send:hover{
                            background:#1ebe5d;
                        }

                        #chatbot-send svg{
                            width:20px;
                            height:20px;
                            fill:#fff;
                        }



/* === Ondas externas === */
.leads-ai-wave{
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(253, 126, 20, 0.45);  /* rgba(108, 92, 231, 0.35); */
    z-index: -1;
    animation: leadsWave 2.5s infinite;
}

.leads-ai-wave:nth-child(1){
    animation-delay: 0s;
}

.leads-ai-wave:nth-child(2){
    animation-delay: .6s;
}

.leads-ai-wave:nth-child(3){
    animation-delay: 1.2s;
}

@keyframes leadsWave{
    0%{
        transform: scale(1);
        opacity: .6;
    }
    70%{
        transform: scale(1.8);
        opacity: 0;
    }
    100%{
        opacity: 0;
    }
}

/* === LEADS BOTON + BURBUJA === */
.leads-ai-button {
    position: fixed;
    right: 25px; /* ← muévelo a la izquierda aumentando este valor, ej: 50px */
    bottom: -100px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    overflow: visible;

    background: linear-gradient(135deg, #fd7e14, #fd7e54);
    color: #fff;
    font-size: 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    /*transition:all .3s ease;*/
    animation:leadsPulse 2.8s infinite;

    box-shadow: 
        0 10px 25px rgba(253, 126, 20, 0.35),
        0 4px 10px rgba(0, 0, 0, 0.15);

    transition: 
        bottom 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.25s ease,
        box-shadow 0.25s ease,
        opacity 0.3s ease;

    z-index: 9999;
}

@keyframes leadsPulse{
    0%{transform:scale(1)}
    50%{transform:scale(1.07)}
    100%{transform:scale(1)}
}

.leads-ai-button.show {
    bottom: 20px; /* ← súbelo aumentando este valor, ej: 50px */
}

.leads-ai-button.hide {
    opacity: 0;
    pointer-events: none;
}

/* OVERLAY */
.leads-ai-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.0);
    opacity:0;
    visibility:hidden;
    transition:.3s;
    z-index:9998;
}

.leads-ai-overlay.show{
    opacity:1;
    visibility:visible;
}
    
    /* == ZONA BURBUJA == */
    #leads-ai-bubble {
        position: fixed;
        bottom: 95px; /* ← sube este valor la misma diferencia que subiste el botón */
        right: 25px; /* ← iguala este valor al right del botón */
        background: #fff;
        color: #222;
        padding: 12px 16px;
        border-radius: 16px 16px 4px 16px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.15);
        font-size: 14px; /* ← auméntalo, ej: 16px o 17px */
        line-height: 1.4;
        max-width: 220px;
        z-index: 9998;
        opacity: 0;
        transform: translateY(8px) scale(0.95);
        transition: opacity 0.3s ease, transform 0.3s ease;
        pointer-events: none;
    }
    #leads-ai-bubble.show {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }
    #leads-ai-bubble-close {
        position: absolute;
        top: 6px;
        right: 8px;
        background: none;
        border: none;
        font-size: 14px;
        color: #999;
        cursor: pointer;
        line-height: 1;
        padding: 0;
    }
    #leads-ai-bubble-close:hover { color: #333; }
    /* Colita de la burbuja */
    #leads-ai-bubble::after {
        content: '';
        position: absolute;
        bottom: -8px;
        right: 18px;
        border-width: 8px 8px 0 0;
        border-style: solid;
        border-color: #fff transparent transparent transparent;
        filter: drop-shadow(0 2px 2px rgba(0,0,0,0.08));
    }

/* MODAL */
.leads-ai-modal{
    position:fixed;
    bottom:100px;
    right:25px;
    width:360px;
    height:650px;
    background: none;   /* #fff; Blanco solido o transparent; */
    border-radius:20px;
    /*box-shadow:0 20px 60px rgba(0,0,0,.3);*/
    transform:scale(.8);
    opacity:0;
    visibility:hidden;
    transition:.3s ease;
    display:flex;
    flex-direction:column;
    z-index:9999;
}


.leads-ai-modal.show{
    transform:scale(1);
    opacity:1;
    visibility:visible;
}

.leads-ai-body{
    flex:1;
    overflow:hidden;
}

#leads-ai-close{
    position: absolute;
    top: 13px;
    right: 17px;
    z-index: 10;
    background: transparent;
    border: none;
    font-size: 18px;
    cursor: pointer;
}
.leads-ai-close:hover{
    transform: scale(1.1);
}

@media (max-width: 768px) {
    .leads-ai-modal{
        top: 0%;
        left: 0%;
        bottom: auto;
        right: auto;
    }
}