/* =====================================================
   BOTÓN DEL CHAT
   ===================================================== */

.chat-button {

    position: fixed;

    right: 90px;
    bottom: 90px;

    width: 100px;
    height: 100px;

    padding: 0;

    border: 2px solid rgba(243, 237, 226);

    border-radius: 50%;

    background: rgba(31, 113, 157, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);


    display: flex;

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

    cursor: pointer;

    overflow: hidden;

    box-shadow:
        0 10px 30px rgba(0,0,0,.28),
        0 0 0 6px rgba(31,113,157,.14);

    z-index: 9998;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}


/* =====================================================
   LOGO DEL BOTÓN
   ===================================================== */

.chat-button img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}


/* =====================================================
   HOVER DEL BOTÓN
   ===================================================== */

.chat-button:hover {

    transform:
        translateY(-4px)
        scale(1.04);

    background: rgba(160, 176, 184, 0.80);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);


    box-shadow:
        0 14px 35px rgba(0,0,0,.30),
        0 0 0 7px rgba(31,113,157,.17);
}


/* =====================================================
   VENTANA
   ===================================================== */

.chat-container {

    position: fixed;

    right: 24px;
    bottom: 124px;

    width: 360px;
    max-width: calc(100vw - 32px);

    height: 520px;
    max-height: calc(100vh - 140px);
    

    display: flex;

    flex-direction: column;

    background: rgba(255,255,255,.96);

    border: 1px solid rgba(31,92,123,.16);

    border-radius: 20px;

    overflow: hidden;

    box-shadow:
        0 18px 55px rgba(0,0,0,.20);

    backdrop-filter: blur(14px);

    z-index: 9999;

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(12px)
        scale(.97);

    transform-origin: bottom right;

    transition:
        opacity .25s ease,
        transform .25s ease,
        visibility .25s ease;
}


.chat-container.chat-open {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0)
        scale(1);
    
    align-items: justify;
}


/* =====================================================
   ENCABEZADO
   ===================================================== */

.chat-header {

    min-height: 68px;

    padding: 13px 16px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    background:
        linear-gradient(
            135deg,
            #155b80,
            #1f719d
        );

    color: white;
}


.chat-header-info {

    display: flex;

    align-items: center;

    gap: 10px;
}


.chat-header-info strong {

    display: block;

    font-size: 13px;

    line-height: 1.2;

    letter-spacing: .2px;
}


.chat-header-info small {

    display: block;

    margin-top: 3px;

    font-size: 14px;

    line-height: 1.2;

    opacity: .78;
}


.chat-status {

    width: 9px;
    height: 9px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #22e670;

    box-shadow:
        0 0 0 4px rgba(139,211,168,.14);
}


/* =====================================================
   BOTÓN CERRAR CHAT
   ===================================================== */

.close-button {

    width: 34px;
    height: 34px;

    border: none;

    background: transparent;

    color: white;

    font-size: 33px;

    line-height: 1;

    cursor: pointer;

    opacity: .8;

    border-radius: 50%;

    display: flex;

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

    transition:
        background .2s ease,
        opacity .2s ease;
}


.close-button:hover {

    background: rgba(255,255,255,.12);

    opacity: 1;
}


/* =====================================================
   MENSAJES
   ===================================================== */

.chat-messages {

    flex: 1;

    min-height: 0;

    padding: 16px;

    overflow-y: auto;

    background:
        linear-gradient(
            180deg,
            rgba(248,250,251,.95),
            rgba(242,246,248,.95)
        );
}


.chat-messages::-webkit-scrollbar {

    width: 5px;
}


.chat-messages::-webkit-scrollbar-thumb {

    background: rgba(31,92,123,.25);

    border-radius: 10px;
}


.message {

    width: fit-content;

    max-width: 84%;

    padding: 10px 13px;

    margin-bottom: 9px;

    border-radius: 14px;

    font-size: 13px;

    line-height: 1.5;

    word-wrap: break-word;
}


/* =====================================================
   MENSAJE DEL BOT
   ===================================================== */

.bot-message {

    background: rgba(255,255,255,.94);

    color: #33434c;

    border:
        1px solid rgba(31,92,123,.10);

    border-bottom-left-radius: 4px;

    box-shadow:
        0 3px 12px rgba(0,0,0,.04);

    white-space: pre-line;

    
}


/* =====================================================
   MENSAJE DEL USUARIO
   ===================================================== */

.user-message {

    margin-left: auto;

    background: #1f719d;

    color: white;

    border-bottom-right-radius: 4px;
}


/* =====================================================
   PREGUNTAS RÁPIDAS
   ===================================================== */

.quick-buttons {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    padding: 10px 13px;

    border-top:
        1px solid rgba(31,92,123,.10);

    background: rgba(255,255,255,.94);
}


.quick-buttons button {

    padding: 7px 11px;

    border:
        1px solid rgba(31,92,123,.28);

    border-radius: 20px;

    background: transparent;

    color: #1f719d;

    font-size: 15px;

    line-height: 1.2;

    cursor: pointer;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}


.quick-buttons button:hover {

    background: #1f719d;

    color: white;

    transform: translateY(-1px);
}


    /* =====================================================
    OPCIONES DE SERVICIO
    ===================================================== */
.chat-option {
    display: block;
    width: 100%;

    padding: 10px 13px;

    border: 1px solid rgba(31,92,123,.18);
    border-radius: 12px;

    background: rgba(255,255,255,.96);
    color: #33434c;

    font-size: 13px;
    line-height: 1.3;

    text-align: left;

    cursor: pointer;

    box-shadow:
        0 2px 8px rgba(0,0,0,.04);

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
    }

.chat-option:hover {
    background: #1f719d;
    border-color: #1f719d;
    color: white;

    transform: translateY(-1px);

    box-shadow:
        0 4px 12px rgba(0,0,0,.10);
    }

.chat-option:active {
    transform: translateY(0);
    }



/* =====================================================
   INPUT
   ===================================================== */

.chat-input {

    display: flex;

    gap: 10px;

    padding: 12px 13px;

    background: white;

    border-top:
        1px solid rgba(31,92,123,.10);
}


.chat-input input {

    flex: 1;

    min-width: 0;

    height: 42px;

    padding:
        0 14px;

    border:
        1px solid rgba(31,92,123,.20);

    border-radius: 22px;

    outline: none;

    background: #fafcfd;

    color: #33434c;

    font-size: 13px;

    transition:
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}


.chat-input input:focus {

    border-color: #1f719d;

    background: white;

    box-shadow:
        0 0 0 3px rgba(31,113,157,.08);
}


.chat-input button {

    width: 42px;
    height: 42px;

    flex-shrink: 0;

    border: none;

    border-radius: 50%;

    background: #1f719d;

    color: white;

    font-size: 24px;

    cursor: pointer;

    transition:
        transform .2s ease,
        background .2s ease;
}


.chat-input button:hover {

    background: #155b80;

    transform: translateX(2px);
}

 

/* =====================================================
   TARJETA DE INVITACIÓN
   ===================================================== */

.chat-hint {

    position: fixed;

    right: 80px;

    bottom: 195px;

    width: 270px;

    padding: 17px 52px 17px 18px;

    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);


    border: 1px solid rgba(53, 79, 92, 0.12);

    border-radius: 16px;

    color: #33434c;

    box-shadow:
        0 12px 35px rgba(0,0,0,.18);

    z-index: 9997;

    cursor: pointer;

    animation:
        chatHintIn .45s ease both;

    transition:
        opacity .25s ease,
        transform .25s ease,
        box-shadow .2s ease;
}

/* =====================================================
   PUNTA DE LA TARJETA
   ===================================================== */

.chat-hint::after {
    content: "";
    position: absolute;
    right: 30px;
    bottom: -8px;
    width: 15px;
    height: 15px;

    background: rgba(255, 255, 255, 0.78);

    border-right: 1px solid rgba(31,92,123,.12);
    border-bottom: 1px solid rgba(31,92,123,.12);

    transform: rotate(45deg);
}


/* =====================================================
   HOVER TARJETA
   ===================================================== */

.chat-hint:hover {

    transform: translateY(-2px);

    box-shadow:
        0 15px 38px rgba(0,0,0,.21);
}


/* =====================================================
   TÍTULO TARJETA
   ===================================================== */

.chat-hint strong {

    display: block;

    margin-bottom: 5px;

    color: #155b80;

    font-size: 15px;

    line-height: 1.25;
}


/* =====================================================
   TEXTO TARJETA
   ===================================================== */

.chat-hint span {

    display: block;

    color: #66747c;

    font-size: 12.5px;

    line-height: 1.45;
}


/* =====================================================
   BOTÓN CERRAR TARJETA
   ===================================================== */

.chat-hint-close {

    position: absolute;

    top: 8px;
    right: 9px;

    width: 23px;
    height: 23px;

    border: none;

    border-radius: 50%;

    background: transparent;

    color: #8a969c;

    font-size: 16px;

    line-height: 1;

    cursor: pointer;

    display: flex;

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

    transition:
        background .2s ease,
        color .2s ease;
}


.chat-hint-close:hover {

    background: rgba(31,92,123,.08);

    color: #155b80;
}


/* =====================================================
   ANIMACIÓN TARJETA
   ===================================================== */

@keyframes chatHintIn {

    from {

        opacity: 0;

        transform:
            translateY(10px)
            scale(.96);
    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


/* =====================================================
   OCULTAR TARJETA
   ===================================================== */

.chat-hint.hidden {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform:
        translateY(8px)
        scale(.96);
}


/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 600px) {

    .chat-button {

        right: 18px;

        bottom: 18px;

        width: 70px;

        height: 70px;
    }


    .chat-button img {

        width: 100%;

        height: 100%;

        object-fit: cover;
    }


    .chat-container {

        right: 10px;

        bottom: 98px;

        width: calc(100vw - 20px);

        height: min(600px, calc(100vh - 115px));

        max-height: calc(100vh - 115px);

        border-radius: 17px;
    }


    .chat-header {

        min-height: 64px;

        padding: 12px 14px;
    }


    .chat-messages {

        padding: 14px;
    }


    .message {

        max-width: 88%;

        font-size: 13px;
    }


    .chat-hint {

        right: 18px;

        bottom: 102px;

        width: 225px;

        padding:
            13px 36px 13px 14px;
    }


    .chat-hint strong {

        font-size: 13px;
    }


    .chat-hint span {

        font-size: 11px;
    }
}


/* =====================================================
   PANTALLAS MUY PEQUEÑAS
   ===================================================== */

@media (max-width: 380px) {

    .chat-button {

        right: 14px;

        bottom: 14px;

        width: 64px;

        height: 64px;
    }


    .chat-container {

        right: 6px;

        bottom: 86px;

        width: calc(100vw - 12px);

        height: calc(100vh - 98px);

        border-radius: 15px;
    }


    .quick-buttons {

        padding: 8px 10px;
    }


    .chat-input {

        padding: 8px;
    }


    .chat-hint {

        right: 14px;

        bottom: 92px;

        width: 210px;
    }
}