/* =====================================================
   VIITALCORE ASSIST
===================================================== */

.vc-assist {
    --assist-dark: var(--brand-dark, #07304b);
    --assist-blue: var(--brand-primary, #06a9da);

    position: fixed;

    right: 35px;
    bottom: 60px;

    z-index: 6000;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


/* =====================================================
   LAUNCHER
===================================================== */

.vc-assist__launcher {
    position: relative;

    width: 62px;    
    height: 62px;

    display: grid;
    place-items: center;

    color: #ffffff;

    background:
        #08a9dc;

    border: 0;

    border-radius: 50%;

    box-shadow:
        0 16px 38px
        rgba(8, 169, 220, 0.28);

    cursor: pointer;

    transition:
        background-color 0.25s ease,
        transform 0.28s ease,
        box-shadow 0.28s ease;
}


.vc-assist__launcher:hover {
    background:
        #0796c5;

    transform:
        translateY(-3px);

    box-shadow:
        0 20px 46px
        rgba(8, 169, 220, 0.36);
}


.vc-assist__launcher-icon {
    position: relative;

    z-index: 2;

    display: grid;
    place-items: center;

    font-size: 1.45rem;
}


.vc-assist__launcher-status {
    position: absolute;

    top: 5px;
    right: 5px;

    width: 10px;
    height: 10px;

    background: #35d68b;

    border:
        2px solid
        var(--assist-dark);

    border-radius: 50%;

    z-index: 3;
}


/* PULSO */

.vc-assist__launcher-pulse {
    position: absolute;

    inset: 0;

    border:
        1px solid
        rgba(8, 169, 220, 0.50);

    border-radius: 50%;

    animation:
        vcAssistPulse
        2.3s
        ease-out
        infinite;
}


@keyframes vcAssistPulse {

    0% {
        opacity: 0.8;
        transform: scale(1);
    }

    70% {
        opacity: 0;
        transform: scale(1.55);
    }

    100% {
        opacity: 0;
        transform: scale(1.55);
    }

}


/* =====================================================
   HINT
===================================================== */

.vc-assist__hint {
    position: absolute;

    right: 76px;
    bottom: 8px;

    width: max-content;

    padding:
        10px
        14px;

    display: flex;
    flex-direction: column;

    gap: 2px;

    background: #ffffff;

    border:
        1px solid
        rgba(7, 48, 75, 0.08);

    border-radius: 10px;

    box-shadow:
        0 12px 30px
        rgba(7, 48, 75, 0.12);

    opacity: 0;

    visibility: hidden;

    transform:
        translateX(8px);

    transition:
        opacity 0.3s ease,
        transform 0.3s ease,
        visibility 0.3s ease;

    pointer-events: none;
}


.vc-assist__hint.is-visible {
    opacity: 1;

    visibility: visible;

    transform:
        translateX(0);
}


.vc-assist__hint strong {
    color:
        var(--assist-dark);

    font-size: 0.72rem;
}


.vc-assist__hint span {
    color: #708692;

    font-size: 0.64rem;
}


/* =====================================================
   PANEL
===================================================== */

.vc-assist__panel {
    padding: 0 !important;
    margin: 0 !important;

    position: absolute;

    right: 0;
    bottom: 78px;

    width:
        min(390px, calc(100vw - 32px));

    height:
        min(650px, calc(100vh - 120px));

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: #ffffff;

    border:
        1px solid
        rgba(7, 48, 75, 0.09);

    border-radius: 18px;

    box-shadow:
        0 28px 70px
        rgba(7, 48, 75, 0.22);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform:
        translateY(18px)
        scale(0.97);

    transform-origin:
        right bottom;

    transition:
        opacity 0.28s ease,
        transform 0.28s ease,
        visibility 0.28s ease;
}

.vc-assist__panel {
    position: absolute;

    right: 78px;
    bottom: 0;

    width:
        min(390px, calc(100vw - 120px));

    height:
        min(650px, calc(100vh - 50px));

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: #ffffff;

    border:
        1px solid
        rgba(7, 48, 75, 0.09);

    border-radius: 18px;

    box-shadow:
        0 28px 70px
        rgba(7, 48, 75, 0.22);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform:
        translateX(18px)
        scale(0.97);

    transform-origin:
        right bottom;

    transition:
        opacity 0.28s ease,
        transform 0.28s ease,
        visibility 0.28s ease;
}


.vc-assist__panel.is-open {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;

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


/* =====================================================
   HEADER
===================================================== */

.vc-assist__header {
    min-height: 76px;

    padding:
        13px
        14px
        13px
        16px;

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

    gap: 15px;

    color: #ffffff;

    background:
        linear-gradient(
            125deg,
            var(--assist-dark),
            #0b4968
        );
}


.vc-assist__identity {
    display: flex;
    align-items: center;

    gap: 11px;
}


.vc-assist__avatar {
    position: relative;

    width: 43px;
    height: 43px;

    flex:
        0
        0
        43px;

    display: grid;
    place-items: center;

    color:
        var(--assist-blue);

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

    border:
        1px solid
        rgba(255, 255, 255, 0.12);

    border-radius: 11px;

    font-size: 1.15rem;
}


.vc-assist__avatar span {
    position: absolute;

    right: -2px;
    bottom: -2px;

    width: 9px;
    height: 9px;

    background: #35d68b;

    border:
        2px solid
        var(--assist-dark);

    border-radius: 50%;
}


.vc-assist__name {
    display: flex;
    align-items: center;

    gap: 6px;

    color: #ffffff;

    font-size: 0.78rem;
    font-weight: 750;
}


.vc-assist__name > span {
    padding:
        2px
        5px;

    color:
        var(--assist-blue);

    background:
        rgba(6, 169, 218, 0.12);

    border:
        1px solid
        rgba(6, 169, 218, 0.20);

    border-radius: 5px;

    font-size: 0.47rem;
    font-weight: 800;
}


.vc-assist__availability {
    margin-top: 4px;

    display: flex;
    align-items: center;

    gap: 5px;

    color:
        rgba(255, 255, 255, 0.57);

    font-size: 0.57rem;
}


.vc-assist__availability > span {
    width: 5px;
    height: 5px;

    background: #35d68b;

    border-radius: 50%;
}


/* HEADER BUTTONS */

.vc-assist__header-actions {
    display: flex;

    gap: 4px;
}


.vc-assist__header-button {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    color:
        rgba(255, 255, 255, 0.68);

    background: transparent;

    border: 0;

    border-radius: 8px;

    cursor: pointer;

    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}


.vc-assist__header-button:hover {
    color: #ffffff;

    background:
        rgba(255, 255, 255, 0.08);
}


/* =====================================================
   CONTEXTO
===================================================== */

.vc-assist__context {
    min-height: 35px;

    padding:
        8px
        16px;

    display: flex;
    align-items: center;

    gap: 7px;

    color: #607885;

    background:
        rgba(6, 169, 218, 0.045);

    border-bottom:
        1px solid
        rgba(7, 48, 75, 0.06);

    font-size: 0.59rem;
}


.vc-assist__context i {
    color:
        var(--assist-blue);
}


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

.vc-assist__messages {
    flex: 1;

    padding:
        18px
        15px
        12px;

    display: flex;
    flex-direction: column;

    gap: 12px;

    overflow-y: auto;

    overscroll-behavior: contain;

    scrollbar-width: thin;

    scrollbar-color:
        rgba(7, 48, 75, 0.15)
        transparent;
}


.vc-assist__message {
    max-width: 84%;

    display: flex;
    flex-direction: column;

    gap: 4px;

    animation:
        vcAssistMessageIn
        0.28s
        ease
        both;
}


@keyframes vcAssistMessageIn {

    from {
        opacity: 0;
        transform:
            translateY(7px);
    }

    to {
        opacity: 1;
        transform:
            translateY(0);
    }

}


.vc-assist__message--assistant {
    align-self:
        flex-start;
}


.vc-assist__message--user {
    align-self:
        flex-end;
}


.vc-assist__bubble {
    padding:
        11px
        13px;

    font-size: 0.72rem;

    line-height: 1.6;

    white-space: pre-wrap;

    overflow-wrap: anywhere;
}


.vc-assist__message--assistant
.vc-assist__bubble {
    color: #496370;

    background:
        #f3f7f9;

    border:
        1px solid
        rgba(7, 48, 75, 0.055);

    border-radius:
        4px
        12px
        12px
        12px;
}


.vc-assist__message--user
.vc-assist__bubble {
    color: #ffffff;

    background:
        var(--assist-dark);

    border-radius:
        12px
        4px
        12px
        12px;
}


.vc-assist__message-label {
    padding:
        0
        3px;

    color: #9aaab2;

    font-size: 0.49rem;
}


/* =====================================================
   ESCRIBIENDO
===================================================== */

.vc-assist__typing {
    width: fit-content;

    padding:
        12px
        14px;

    display: flex;

    gap: 4px;

    background:
        #f3f7f9;

    border-radius:
        4px
        12px
        12px
        12px;
}


.vc-assist__typing span {
    width: 5px;
    height: 5px;

    background: #8fa3ad;

    border-radius: 50%;

    animation:
        vcAssistTyping
        1.15s
        ease-in-out
        infinite;
}


.vc-assist__typing span:nth-child(2) {
    animation-delay: 0.15s;
}


.vc-assist__typing span:nth-child(3) {
    animation-delay: 0.3s;
}


@keyframes vcAssistTyping {

    0%,
    60%,
    100% {
        opacity: 0.35;
        transform:
            translateY(0);
    }

    30% {
        opacity: 1;
        transform:
            translateY(-3px);
    }

}


/* =====================================================
   SUGERENCIAS
===================================================== */

.vc-assist__suggestions {
    padding:
        0
        14px
        10px;

    display: flex;

    gap: 6px;

    overflow-x: auto;

    scrollbar-width: none;
}


.vc-assist__suggestions::-webkit-scrollbar {
    display: none;
}


.vc-assist__suggestion {
    flex:
        0
        0
        auto;

    min-height: 31px;

    padding:
        0
        10px;

    color: #58717e;

    background: #ffffff;

    border:
        1px solid
        rgba(7, 48, 75, 0.10);

    border-radius: 8px;

    font: inherit;

    font-size: 0.59rem;
    font-weight: 650;

    cursor: pointer;

    transition:
        color 0.22s ease,
        border-color 0.22s ease,
        background-color 0.22s ease;
}


.vc-assist__suggestion:hover {
    color:
        var(--assist-blue);

    border-color:
        rgba(6, 169, 218, 0.25);

    background:
        rgba(6, 169, 218, 0.035);
}


/* =====================================================
   ACCIONES
===================================================== */

.vc-assist__actions {
    padding:
        9px
        14px;

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 7px;

    border-top:
        1px solid
        rgba(7, 48, 75, 0.055);
}


.vc-assist__action {
    min-height: 37px;

    padding:
        0
        9px;

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

    gap: 7px;

    color:
        var(--assist-dark);

    background:
        #ffffff;

    border:
        1px solid
        rgba(7, 48, 75, 0.09);

    border-radius: 8px;

    font: inherit;

    font-size: 0.59rem;
    font-weight: 700;

    text-decoration: none;

    cursor: pointer;

    transition:
        color 0.22s ease,
        border-color 0.22s ease,
        background-color 0.22s ease;
}


.vc-assist__action:hover {
    color:
        var(--assist-blue);

    border-color:
        rgba(6, 169, 218, 0.24);

    background:
        rgba(6, 169, 218, 0.035);
}


/* =====================================================
   COMPOSER
===================================================== */

.vc-assist__composer {
    padding:
        8px
        14px
        10px;
}


.vc-assist__input-wrapper {
    min-height: 48px;

    padding:
        7px
        7px
        7px
        12px;

    display: flex;
    align-items: flex-end;

    gap: 8px;

    background:
        #f5f8fa;

    border:
        1px solid
        rgba(7, 48, 75, 0.09);

    border-radius: 11px;

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


.vc-assist__input-wrapper:focus-within {
    background: #ffffff;

    border-color:
        rgba(6, 169, 218, 0.35);

    box-shadow:
        0
        0
        0
        3px
        rgba(6, 169, 218, 0.055);
}


.vc-assist__input-wrapper textarea {
    width: 100%;

    max-height: 90px;

    padding:
        6px
        0;

    resize: none;

    color:
        var(--assist-dark);

    background: transparent;

    border: 0;
    outline: 0;

    font: inherit;

    font-size: 0.7rem;

    line-height: 1.45;
}


.vc-assist__input-wrapper textarea::placeholder {
    color: #9aabb3;
}


/* ENVIAR */

.vc-assist__send {
    width: 35px;
    height: 35px;

    flex:
        0
        0
        35px;

    display: grid;
    place-items: center;

    color: #ffffff;

    background:
        var(--assist-dark);

    border: 0;

    border-radius: 8px;

    cursor: pointer;

    transition:
        background-color 0.22s ease,
        transform 0.22s ease;
}


.vc-assist__send:hover {
    background:
        var(--assist-blue);

    transform:
        translateY(-1px);
}


.vc-assist__send:disabled {
    opacity: 0.45;

    cursor: wait;

    transform: none;
}


/* =====================================================
   FOOTER
===================================================== */

.vc-assist__footer {
    min-height: 31px;

    padding:
        7px
        14px
        9px;

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

    gap: 6px;

    color: #97a8b0;

    font-size: 0.49rem;

    text-align: center;
}


.vc-assist__footer i {
    color:
        var(--assist-blue);
}


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

@media (max-width: 600px) {

    .vc-assist {
        right: 14px;
        bottom: 15px;
    }


    .vc-assist__panel {
        position: fixed;

        left: 12px;
        right: 12px;
        bottom: 88px;

        width: auto;

        height:
            min(640px, calc(100dvh - 110px));
    }


    .vc-assist__hint {
        display: none;
    }


    .vc-assist__launcher {
        width: 57px;
        height: 57px;
    }

}


/* =====================================================
   REDUCIR MOVIMIENTO
===================================================== */

@media (prefers-reduced-motion: reduce) {

    .vc-assist *,
    .vc-assist *::before,
    .vc-assist *::after {
        animation:
            none !important;

        transition:
            none !important;
    }

}

.vc-assist__launcher-icon i {
    font-size: 1.65rem;
    line-height: 1;
}

@media (max-width: 600px) {

    .vc-assist {
        right: 14px;
        bottom: 15px;
    }


    .vc-assist__panel {
        position: fixed;

        left: 12px;
        right: 12px;
        bottom: 88px;

        width: auto;

        height:
            min(640px, calc(100dvh - 110px));
    }

}

@media (max-width: 576px) {
    .vc-assist__header {
        padding: 16px;
    }

    .vc-assist__header-bot {
        width: 46px;
        height: 46px;
        border-radius: 14px;
    }

    .vc-assist__header-bot i {
        font-size: 20px;
    }

    .vc-assist__header-topline h3 {
        font-size: 16px;
    }

    .vc-assist__header-status {
        font-size: 12px;
    }

    .vc-assist__icon-btn {
        width: 34px;
        height: 34px;
    }
}

.vc-assist__avatar i {
    font-size: 1.35rem;
    line-height: 1;
}


/* =====================================================
   POSICIÓN VIITALCORE ASSIST
   SOBRE EL BOTÓN DE WHATSAPP
===================================================== */

/* ESCRITORIO */

.vc-assist {
    right: 48px !important;
    left: auto !important;

    /*
       WhatsApp:
       bottom: 58px
       tamaño: 62px
       separación: 16px

       58 + 62 + 16 = 136px
    */
    bottom: 165px !important;
}


/* =====================================================
   TABLET / MÓVIL
===================================================== */

@media (max-width: 768px) {

    .vc-assist {
        right: 18px !important;
        left: auto !important;

        /*
           WhatsApp:
           bottom: 18px
           tamaño: 56px
           separación: 14px
        */
        bottom: 88px !important;
    }


    /*
       El panel también debe subir porque ahora
       el launcher está más arriba.
    */

    .vc-assist__panel {
        position: fixed !important;

        left: 12px !important;
        right: 12px !important;

        bottom: 158px !important;

        width: auto !important;

        height:
            min(
                610px,
                calc(100dvh - 180px)
            ) !important;
    }

}


/* =====================================================
   MÓVILES PEQUEÑOS
===================================================== */

@media (max-width: 480px) {

    .vc-assist {
        right: 14px !important;
        left: auto !important;

        /*
           WhatsApp:
           bottom: 14px
           tamaño: 52px
           separación: 14px
        */
        bottom: 80px !important;
    }


    .vc-assist__panel {
        left: 10px !important;
        right: 10px !important;

        bottom: 148px !important;

        height:
            min(
                600px,
                calc(100dvh - 170px)
            ) !important;
    }

}

/* =====================================================
   AJUSTE POSICIÓN PANEL VIITALCORE ASSIST
   MOVER HACIA ABAJO SIN CAMBIAR SU TAMAÑO
===================================================== */

.vc-assist {
    --vc-assist-panel-offset: 110px;
}

.vc-assist
.vc-assist__panel {
    transform:
        translateY(calc(var(--vc-assist-panel-offset) + 18px))
        scale(.97)
        !important;
}

.vc-assist
.vc-assist__panel.is-open {
    transform:
        translateY(var(--vc-assist-panel-offset))
        scale(1)
        !important;
}

@media (max-width: 768px) {
    .vc-assist {
        --vc-assist-panel-offset: 75px;
    }

    .vc-assist
    .vc-assist__panel {
        transform:
            translateY(calc(var(--vc-assist-panel-offset) + 18px))
            scale(.97)
            !important;
    }

    .vc-assist
    .vc-assist__panel.is-open {
        transform:
            translateY(var(--vc-assist-panel-offset))
            scale(1)
            !important;
    }
}

@media (max-width: 480px) {
    .vc-assist {
        --vc-assist-panel-offset: 55px;
    }
}