/* ============================================================
   MIA GLOBAL
   ============================================================ */

#mia-asistente-global {

    position: fixed;

    right: 24px;
    bottom: 24px;

    z-index: 999999;

    font-family: inherit;
}


/* ============================================================
   GLOBO PRINCIPAL
   ============================================================ */

.mia-boton-global {

    position: relative;

    width: 68px;
    height: 68px;

    padding: 4px;

    border: 0;

    border-radius: 50%;

    cursor: pointer;

    background:
        conic-gradient(
            from 0deg,
            #7c3aed,
            #a855f7,
            #22c55e,
            #f59e0b,
            #ec4899,
            #7c3aed
        );

    box-shadow:
        0 8px 28px rgba(124, 58, 237, .30),
        0 0 35px rgba(168, 85, 247, .20);

    animation:
        mia-respiracion 3s ease-in-out infinite;

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


.mia-boton-global::before {

    content: "";

    position: absolute;

    inset: -4px;

    border-radius: 50%;

    background:
        conic-gradient(
            from 0deg,
            #7c3aed,
            #22c55e,
            #f59e0b,
            #ec4899,
            #7c3aed
        );

    filter: blur(7px);

    opacity: .42;

    z-index: -1;

    animation:
        mia-giro 5s linear infinite;
}


.mia-boton-global:hover {

    transform:
        scale(1.08);

    box-shadow:
        0 12px 35px rgba(124, 58, 237, .40),
        0 0 45px rgba(168, 85, 247, .30);
}


.mia-boton-global:active {

    transform:
        scale(.96);
}


/* ============================================================
   AVATAR
   ============================================================ */

.mia-avatar-global {

    width: 100%;
    height: 100%;

    display: flex;

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

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f3efff
        );

    color:
        #7c3aed;

    font-size: 25px;

    font-weight: 900;

    letter-spacing: -1px;

    box-shadow:
        inset 0 0 0 2px
        rgba(255,255,255,.9);
}


/* ============================================================
   ANIMACIONES
   ============================================================ */

@keyframes mia-respiracion {

    0%,
    100% {

        box-shadow:
            0 8px 28px rgba(124,58,237,.30),
            0 0 25px rgba(168,85,247,.16);
    }

    50% {

        box-shadow:
            0 10px 32px rgba(124,58,237,.40),
            0 0 42px rgba(168,85,247,.28);
    }
}


@keyframes mia-giro {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


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

.mia-panel-global {

    position: absolute;

    right: 0;

    bottom: 82px;

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

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

    display: flex;

    flex-direction: column;

    overflow: hidden;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

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

    transform-origin:
        bottom right;

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

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    border:
        1px solid rgba(124,58,237,.14);

    border-radius:
        24px;

    box-shadow:
        0 25px 70px rgba(15,23,42,.20),
        0 8px 30px rgba(124,58,237,.12);

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


.mia-panel-global.mia-abierto {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

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


/* ============================================================
   CABECERA
   ============================================================ */

.mia-cabecera-global {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 15px 16px;

    background:
        linear-gradient(
            135deg,
            rgba(124,58,237,.10),
            rgba(34,197,94,.05),
            rgba(245,158,11,.05)
        );

    border-bottom:
        1px solid rgba(15,23,42,.07);
}


.mia-identidad-global {

    display: flex;

    align-items: center;

    gap: 10px;
}


.mia-avatar-cabecera {

    width: 40px;
    height: 40px;

    display: flex;

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

    border-radius: 50%;

    color: #fff;

    font-weight: 900;

    background:
        linear-gradient(
            135deg,
            #7c3aed,
            #ec4899,
            #f59e0b
        );
}


.mia-identidad-global strong {

    display: block;

    color:
        #211a31;

    font-size:
        15px;
}


.mia-identidad-global span {

    display: block;

    margin-top: 2px;

    color:
        #81798d;

    font-size:
        11px;
}


.mia-cerrar-global {

    width: 34px;
    height: 34px;

    border: 0;

    border-radius: 50%;

    cursor: pointer;

    color:
        #6b6375;

    background:
        rgba(15,23,42,.06);

    font-size:
        22px;
}


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

.mia-mensajes-global {

    flex: 1;

    overflow-y: auto;

    padding:
        18px 15px;
}


.mia-mensaje-global {

    display: flex;

    margin-bottom: 12px;
}


.mia-asistente-global-mensaje {

    justify-content:
        flex-start;
}


.mia-usuario-global-mensaje {

    justify-content:
        flex-end;
}


.mia-burbuja-global {

    max-width: 84%;

    padding:
        11px 13px;

    border-radius:
        16px;

    font-size:
        14px;

    line-height:
        1.5;

    white-space:
        pre-wrap;

    overflow-wrap:
        anywhere;
}


.mia-asistente-global-mensaje
.mia-burbuja-global {

    color:
        #30283b;

    background:
        #f4f1fa;

    border-bottom-left-radius:
        5px;
}


.mia-usuario-global-mensaje
.mia-burbuja-global {

    color:
        #fff;

    background:
        linear-gradient(
            135deg,
            #7c3aed,
            #a855f7
        );

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


/* ============================================================
   PENSANDO
   ============================================================ */

.mia-escribiendo-global {

    display: none;

    padding:
        0 16px 8px;

    color:
        #81798d;

    font-size:
        11px;
}


.mia-escribiendo-global.mia-visible {

    display: block;
}


/* ============================================================
   FORMULARIO
   ============================================================ */

.mia-formulario-global {

    display: flex;

    align-items: flex-end;

    gap: 8px;

    padding: 12px;

    border-top:
        1px solid rgba(15,23,42,.07);

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


#mia-entrada-global {

    flex: 1;

    min-width: 0;

    max-height: 120px;

    resize: none;

    padding:
        11px 12px;

    border:
        1px solid #e5e0eb;

    border-radius:
        14px;

    outline: none;

    color:
        #282230;

    background:
        #fff;

    font:
        inherit;

    font-size:
        14px;
}


#mia-entrada-global:focus {

    border-color:
        #a855f7;

    box-shadow:
        0 0 0 3px
        rgba(168,85,247,.10);
}


#mia-enviar-global {

    width: 42px;
    height: 42px;

    flex:
        0 0 42px;

    border: 0;

    border-radius:
        13px;

    cursor: pointer;

    color:
        #fff;

    background:
        linear-gradient(
            135deg,
            #16a34a,
            #7c3aed
        );

    font-size:
        18px;
}


#mia-enviar-global:disabled {

    opacity: .55;

    cursor:
        not-allowed;
}


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

@media (max-width: 600px) {

    #mia-asistente-global {

        right: 14px;
        bottom: 14px;
    }


    .mia-boton-global {

        width: 60px;
        height: 60px;
    }


    .mia-panel-global {

        right: -2px;

        bottom: 74px;

        width:
            calc(100vw - 28px);

        height:
            calc(100vh - 100px);

        border-radius:
            20px;
    }
}