/* =====================================================
   SCRATTY CHATBOT
   SISTEMA ÚNICO
   RESPONSIVE FLUID
===================================================== */


/* =====================================================
   WIDGET
===================================================== */

#scratty-widget {

    position: fixed;

    right: 24px;
    bottom: 24px;

    width: 0;
    height: 0;

    z-index: 999999;

    font-family:
        var(--font-body),
        Inter,
        Arial,
        sans-serif;
}


/* =====================================================
   BOTÓN FLOTANTE
===================================================== */

.scratty-launcher {

    position: fixed;

    right: 24px;
    bottom: 24px;

    width: 82px;
    height: 82px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            rgba(0,220,255,.22),
            rgba(80,40,180,.14),
            #071525 72%
        );

    cursor: pointer;

    display: flex;

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

    z-index: 1000000;

    box-shadow:
        0 12px 35px rgba(0,0,0,.38),
        0 0 30px rgba(0,200,255,.20);

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

    animation:
        scrattyFloat 4s ease-in-out infinite;
}


.scratty-launcher:hover {

    box-shadow:
        0 16px 45px rgba(0,0,0,.42),
        0 0 45px rgba(0,200,255,.35);
}


.scratty-launcher:active {

    transform:
        scale(.96);
}


.scratty-launcher img {

    position: relative;

    width: 76px;
    height: 76px;

    object-fit: contain;

    z-index: 3;

    filter:
        drop-shadow(
            0 8px 14px rgba(0,0,0,.35)
        )
        drop-shadow(
            0 0 14px rgba(0,200,255,.25)
        );
}


/* =====================================================
   GLOW
===================================================== */

.scratty-launcher-glow {

    position: absolute;

    width: 100%;
    height: 100%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0,200,255,.28),
            rgba(139,61,255,.15),
            transparent 70%
        );

    filter:
        blur(9px);

    z-index: 1;

    animation:
        scrattyGlow 3s ease-in-out infinite;
}


/* =====================================================
   ONLINE
===================================================== */

.scratty-online-dot {

    position: absolute;

    right: 4px;
    bottom: 6px;

    width: 14px;
    height: 14px;

    border-radius: 50%;

    background:
        #4ade80;

    border:
        3px solid #071525;

    box-shadow:
        0 0 12px rgba(74,222,128,.9);

    z-index: 5;
}


/* =====================================================
   BOTÓN OCULTO
===================================================== */

.scratty-launcher.scratty-hidden,
.scratty-launcher.scratty-launcher-hidden,
.scratty-launcher.is-hidden {

    opacity:
        0;

    pointer-events:
        none;

    transform:
        scale(.70);
}


/* =====================================================
   VARIABLES DEL CHAT
===================================================== */

:root {

    --scratty-header-space:
        clamp(82px, 6vw, 112px);
}


/* =====================================================
   VENTANA DEL CHAT
===================================================== */

.scratty-chat {

    position: fixed;

    top:
        var(--scratty-header-space);

    right:
        24px;

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

    height:
        calc(
            100dvh
            - var(--scratty-header-space)
            - 24px
        );

    max-height:
        calc(
            100dvh
            - var(--scratty-header-space)
            - 24px
        );

    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;

    background:
        linear-gradient(
            145deg,
            rgba(15,23,42,.985),
            rgba(5,10,22,.995)
        );

    border:
        1px solid rgba(0,200,255,.20);

    border-radius:
        22px;

    box-shadow:
        0 30px 80px rgba(0,0,0,.50),
        0 0 50px rgba(0,200,255,.12);

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transform:
        translateY(-12px)
        scale(.96);

    transform-origin:
        top right;

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


.scratty-chat.is-open,
.scratty-chat.scratty-chat-open {

    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;

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


/* =====================================================
   HEADER DEL CHAT
===================================================== */

.chat-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    padding:
        12px 14px;

    min-height:
        68px;

    flex-shrink:
        0;

    border-bottom:
        1px solid rgba(255,255,255,.08);

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


.chat-header-info {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    min-width:
        0;
}


.chat-avatar {

    width:
        43px;

    height:
        43px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(0,200,255,.18),
            rgba(139,61,255,.10)
        );

    border:
        1px solid rgba(0,200,255,.25);
}


.chat-avatar img {

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;
}


.chat-header-info strong {

    display:
        block;

    color:
        var(--text);

    font-family:
        var(--font-heading),
        "Space Grotesk",
        sans-serif;

    font-size:
        1rem;
}


.chat-header-info span {

    display:
        block;

    margin-top:
        2px;

    color:
        var(--text-muted);

    font-size:
        .72rem;
}


.chat-header-right {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}


.chat-status {

    display:
        flex;

    align-items:
        center;

    gap:
        6px;

    color:
        #4ade80;

    font-size:
        .70rem;

    font-weight:
        600;

    white-space:
        nowrap;
}


.chat-status span {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #4ade80;

    box-shadow:
        0 0 10px rgba(74,222,128,.8);
}


.chat-close {

    width:
        32px;

    height:
        32px;

    flex-shrink:
        0;

    padding:
        0;

    border:
        0;

    border-radius:
        50%;

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

    color:
        rgba(255,255,255,.78);

    font-size:
        1.35rem;

    line-height:
        1;

    cursor:
        pointer;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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


.chat-close:hover {

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

    transform:
        rotate(90deg);
}


/* =====================================================
   CUERPO DEL CHAT
===================================================== */

.chat-body {

    flex:
        1;

    min-height:
        0;

    padding:
        18px 16px 14px;

    overflow-y:
        auto;

    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;

    scrollbar-width:
        thin;

    scrollbar-color:
        rgba(0,200,255,.28)
        transparent;
}


.chat-body::-webkit-scrollbar {

    width:
        5px;
}


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

    background:
        rgba(0,200,255,.28);

    border-radius:
        999px;
}


/* =====================================================
   MENSAJE INICIAL
===================================================== */

.chat-body > .chat-message:first-child {

    margin-top:
        0;
}


.chat-body > .chat-message:first-child
.message-bubble {

    padding:
        13px 15px;

    line-height:
        1.55;
}


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

.chat-message {

    display:
        flex;

    align-items:
        flex-end;

    gap:
        8px;

    max-width:
        92%;

    animation:
        scrattyMessage .25s ease;
}


.chat-message.user {

    align-self:
        flex-end;

    flex-direction:
        row-reverse;
}


.message-avatar {

    width:
        29px;

    height:
        29px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    border-radius:
        50%;

    background:
        rgba(0,200,255,.08);
}


.message-avatar img {

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;
}


.chat-message.user .message-avatar {

    display:
        none;
}


.message-content {

    min-width:
        0;

    max-width:
        100%;
}


.message-bubble {

    padding:
        10px 13px;

    border-radius:
        15px;

    font-size:
        .88rem;

    line-height:
        1.5;

    white-space:
        pre-line;

    overflow-wrap:
        anywhere;
}


.chat-message.bot .message-bubble {

    color:
        var(--text);

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

    border:
        1px solid rgba(255,255,255,.07);

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


.chat-message.user .message-bubble {

    color:
        white;

    background:
        var(--gradient);

    border-bottom-right-radius:
        5px;

    box-shadow:
        0 8px 25px rgba(0,200,255,.12);
}


/* =====================================================
   OPCIONES
===================================================== */

.chat-options {

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

    padding:
        4px 15px 12px;

    flex-shrink:
        0;
}


.chat-option {

    width:
        fit-content;

    max-width:
        100%;

    padding:
        9px 13px;

    border:
        1px solid rgba(0,200,255,.24);

    border-radius:
        999px;

    background:
        rgba(0,200,255,.045);

    color:
        var(--text);

    font-family:
        inherit;

    font-size:
        .76rem;

    font-weight:
        600;

    cursor:
        pointer;

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


.chat-option:hover {

    background:
        rgba(0,200,255,.13);

    border-color:
        rgba(0,200,255,.48);

    transform:
        translateY(-1px);
}


.chat-option:disabled {

    opacity:
        .5;

    pointer-events:
        none;
}


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

.chat-form {

    position:
        relative;

    z-index:
        10;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        12px;

    min-height:
        68px;

    flex-shrink:
        0;

    border-top:
        1px solid rgba(255,255,255,.07);

    background:
        rgba(5,10,22,.96);
}


.chat-form input {

    flex:
        1;

    min-width:
        0;

    width:
        100%;

    height:
        44px;

    padding:
        0 13px;

    border:
        1px solid rgba(255,255,255,.08);

    border-radius:
        13px;

    outline:
        none;

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

    color:
        var(--text);

    font-family:
        inherit;

    font-size:
        .86rem;
}


.chat-form input::placeholder {

    color:
        rgba(255,255,255,.40);
}


.chat-form input:focus {

    border-color:
        rgba(0,200,255,.40);

    box-shadow:
        0 0 0 3px rgba(0,200,255,.07);
}


.chat-form button {

    position:
        relative;

    z-index:
        20;

    width:
        44px;

    height:
        44px;

    min-width:
        44px;

    flex-shrink:
        0;

    border:
        0;

    border-radius:
        13px;

    background:
        var(--gradient);

    color:
        white;

    font-size:
        1.05rem;

    cursor:
        pointer;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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


.chat-form button:hover {

    transform:
        translateY(-2px);
}


.chat-form button:disabled {

    opacity:
        .5;

    cursor:
        not-allowed;
}


/* =====================================================
   TYPING
===================================================== */

.typing-bubble {

    display:
        flex;

    align-items:
        center;

    gap:
        5px;

    min-width:
        55px;
}


.typing-bubble span {

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        var(--primary);

    animation:
        scrattyTyping 1s infinite ease-in-out;
}


.typing-bubble span:nth-child(2) {

    animation-delay:
        .15s;
}


.typing-bubble span:nth-child(3) {

    animation-delay:
        .30s;
}


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

@keyframes scrattyFloat {

    0%,
    100% {

        transform:
            translateY(0);
    }

    50% {

        transform:
            translateY(-7px);
    }
}


@keyframes scrattyGlow {

    0%,
    100% {

        transform:
            scale(.92);

        opacity:
            .60;
    }

    50% {

        transform:
            scale(1.08);

        opacity:
            1;
    }
}


@keyframes scrattyMessage {

    from {

        opacity:
            0;

        transform:
            translateY(6px);
    }

    to {

        opacity:
            1;

        transform:
            translateY(0);
    }
}


@keyframes scrattyTyping {

    0%,
    60%,
    100% {

        transform:
            translateY(0);

        opacity:
            .45;
    }

    30% {

        transform:
            translateY(-4px);

        opacity:
            1;
    }
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 768px) {

    .scratty-launcher {

        right:
            18px;

        bottom:
            18px;

        width:
            74px;

        height:
            74px;
    }


    .scratty-launcher img {

        width:
            68px;

        height:
            68px;
    }


    :root {

        --scratty-header-space:
            88px;
    }


    .scratty-chat {

        right:
            14px;

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

        height:
            calc(
                100dvh
                - var(--scratty-header-space)
                - 18px
            );

        max-width:
            calc(100vw - 28px);

        max-height:
            calc(
                100dvh
                - var(--scratty-header-space)
                - 18px
            );

        border-radius:
            21px;
    }
}


/* =====================================================
   TELÉFONOS
===================================================== */

@media (max-width: 480px) {

    .scratty-launcher {

        right:
            12px;

        bottom:
            12px;

        width:
            66px;

        height:
            66px;
    }


    .scratty-launcher img {

        width:
            61px;

        height:
            61px;
    }


    :root {

        --scratty-header-space:
            82px;
    }


    .scratty-chat {

        top:
            var(--scratty-header-space);

        left:
            10px;

        right:
            10px;

        bottom:
            auto;

        width:
            auto;

        max-width:
            none;

        height:
            calc(
                100dvh
                - var(--scratty-header-space)
                - 12px
            );

        max-height:
            calc(
                100dvh
                - var(--scratty-header-space)
                - 12px
            );

        border-radius:
            20px;
    }


    .chat-header {

        padding:
            10px 12px;

        min-height:
            62px;
    }


    .chat-body {

        padding:
            14px 12px 10px;

        gap:
            10px;
    }


    .message-bubble {

        font-size:
            .85rem;
    }


    .chat-options {

        gap:
            6px;

        padding:
            3px 12px 9px;
    }


    .chat-option {

        font-size:
            .72rem;

        padding:
            8px 10px;
    }


    .chat-form {

        padding:
            9px;

        min-height:
            62px;
    }


    .chat-form input {

        height:
            42px;

        font-size:
            .84rem;
    }


    .chat-form button {

        width:
            42px;

        min-width:
            42px;

        height:
            42px;
    }
}


/* =====================================================
   TELÉFONOS MUY PEQUEÑOS
===================================================== */

@media (max-width: 360px) {

    .scratty-launcher {

        width:
            62px;

        height:
            62px;

        right:
            10px;

        bottom:
            10px;
    }


    .scratty-launcher img {

        width:
            57px;

        height:
            57px;
    }


    .scratty-chat {

        left:
            7px;

        right:
            7px;
    }


    .chat-header-right {

        gap:
            6px;
    }


    .chat-status {

        font-size:
            .64rem;
    }


    .chat-close {

        width:
            30px;

        height:
            30px;
    }
}


/* =====================================================
   PANTALLAS BAJAS
===================================================== */

@media (max-height: 700px) {

    .scratty-chat {

        height:
            calc(
                100dvh
                - var(--scratty-header-space)
                - 14px
            );

        max-height:
            calc(
                100dvh
                - var(--scratty-header-space)
                - 14px
            );
    }


    .chat-header {

        min-height:
            58px;

        padding:
            9px 12px;
    }


    .chat-avatar {

        width:
            38px;

        height:
            38px;
    }


    .chat-body {

        padding:
            12px;

        gap:
            8px;
    }


    .chat-options {

        gap:
            5px;

        padding:
            2px 12px 8px;
    }


    .chat-option {

        padding:
            7px 10px;
    }


    .chat-form {

        min-height:
            58px;

        padding:
            8px;
    }
}


/* =====================================================
   PANTALLAS MUY BAJAS
===================================================== */

@media (max-height: 560px) {

    .scratty-chat {

        top:
            70px;

        height:
            calc(100dvh - 82px);

        max-height:
            calc(100dvh - 82px);
    }


    .chat-header {

        min-height:
            52px;
    }


    .chat-avatar {

        width:
            34px;

        height:
            34px;
    }


    .chat-body {

        padding:
            9px 11px;

        gap:
            7px;
    }


    .chat-options {

        gap:
            4px;

        padding:
            2px 10px 6px;
    }


    .chat-option {

        padding:
            6px 9px;

        font-size:
            .70rem;
    }


    .chat-form {

        min-height:
            54px;

        padding:
            6px;
    }


    .chat-form input,
    .chat-form button {

        height:
            40px;
    }


    .chat-form button {

        width:
            40px;

        min-width:
            40px;
    }
}


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

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

    .scratty-launcher,
    .scratty-launcher-glow,
    .chat-message {

        animation:
            none;
    }

}