/* ==================================================
   ASK ALIEN WIDGET
   Version : 1.0
   Author : ChatGPT
================================================== */

:root{
    --aa-bg1:#111827;
    --aa-bg2:#1f2937;
    --aa-green:#86EFAC;
    --aa-yellow:#FACC15;
    --aa-white:#ffffff;
    --aa-radius:999px;
    --aa-shadow:0 15px 40px rgba(0,0,0,.28);
    --aa-speed:.35s ease;
}

/* Floating Widget */

#askAlienWidget{

    position:fixed;

    left:10px;

    bottom:20px;

    display:flex;

    align-items:center;

    gap:8px;

    padding:10px 14px;

    background:linear-gradient(135deg,var(--aa-bg1),var(--aa-bg2));

    border-radius:var(--aa-radius);

    cursor:pointer;

    user-select:none;

    z-index:999999;

    box-shadow:var(--aa-shadow);

    transition:all var(--aa-speed);

    font-family:Inter,Arial,sans-serif;

}

/* Hover */

#askAlienWidget:hover{

    transform:translateY(-4px);

    box-shadow:0 20px 45px rgba(0,0,0,.35);

}

/* Icon */

#askAlienWidget img{

    width:30px;

    height:30px;

    border-radius:50%;

    flex-shrink:0;

}

/* Text Wrapper */

#aaText{

    display:flex;

    flex-direction:column;

}

/* Title */

#aaTitle{

    color:#86EFAC;

    font-size:14px;

    font-weight:700;

    line-height:1.2;

    text-shadow:0 0 8px rgba(134,239,172,.25);

}

/* Subtitle */

#aaSubtitle{

    color:#FACC15;

    font-size:12px;

    font-weight:600;

    line-height:1.2;

}

/* Pulse Animation */

#askAlienWidget::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:999px;

    border:2px solid rgba(134,239,172,.35);

    animation:aaPulse 2.8s infinite;

    pointer-events:none;

}

@keyframes aaPulse{

    0%{

        transform:scale(1);

        opacity:1;

    }

    70%{

        transform:scale(1.08);

        opacity:0;

    }

    100%{

        opacity:0;

    }

}

/* Mobile */

@media(max-width:768px){

    #askAlienWidget{

        left:8px;

        bottom:16px;

        padding:9px 12px;

        gap:6px;

    }

    #askAlienWidget img{

        width:24px;

        height:24px;

    }

    #aaTitle{

        font-size:12px;

    }

    #aaSubtitle{

        font-size:11px;

    }

}