/*
=========================================================
YAMA AHMADI — BLUE CHAT
CLEAN GLOBAL CHATBOT CSS

Controls ONLY:
- Yama AI Support launcher
- Chat panel
- Messages
- Quick actions
- Form
- Verification
- WhatsApp button
- Typing animation
- Back to top

DOES NOT CONTROL:
- Header
- Footer
- Hero
- Sections
- Page colors
- Page buttons
- Cards
=========================================================
*/


/* =========================================================
   CHATBOT WRAPPER
========================================================= */

.ya-chatbot{
    position:fixed;
    z-index:2147483000;

    right:max(
        18px,
        env(safe-area-inset-right)
    );

    bottom:max(
        18px,
        env(safe-area-inset-bottom)
    );

    left:auto;

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;
}


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

.ya-chat-launcher{
    position:relative;
    isolation:isolate;

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

    gap:10px;

    min-height:50px;

    padding:
        7px
        17px
        7px
        7px;

    border:
        1px solid
        rgba(126,190,255,.30);

    border-radius:999px;

    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            #0b2b4b,
            #174a7c
        );

    box-shadow:
        0 16px 42px
        rgba(7,24,42,.28);

    cursor:pointer;

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


.ya-chat-launcher:hover{
    transform:
        translateY(-3px);

    background:
        linear-gradient(
            135deg,
            #174a7c,
            #2f80ed
        );

    border-color:
        rgba(143,199,255,.55);

    box-shadow:
        0 22px 52px
        rgba(7,24,42,.35);
}


/* ONLINE INDICATOR */

.ya-chat-launcher::after{
    content:"";

    position:absolute;

    top:3px;
    left:38px;

    width:9px;
    height:9px;

    border:
        2px solid
        #07182a;

    border-radius:50%;

    background:#55d58c;

    box-shadow:
        0 0 0 4px
        rgba(85,213,140,.10),
        0 0 14px
        rgba(85,213,140,.45);

    animation:
        yaSupportOnline
        2.2s
        ease-in-out
        infinite;
}


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

.ya-chat-launcher-icon{
    display:grid;
    place-items:center;

    flex:0 0 38px;

    width:38px;
    height:38px;

    border-radius:50%;

    color:#174a7c;

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

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.92),
        0 8px 20px
        rgba(0,0,0,.12);

    font-size:16px;
}


.ya-chat-launcher-label{
    color:#ffffff;

    font-size:13px;
    font-weight:850;
    line-height:1.1;
}


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

.ya-chat-panel{
    position:absolute;

    z-index:2147483001;

    right:0;
    bottom:64px;
    left:auto;

    display:grid;

    grid-template-rows:
        auto
        3px
        minmax(0,1fr)
        auto
        auto
        auto;

    width:min(
        340px,
        calc(100vw - 24px)
    );

    height:min(
        430px,
        62dvh
    );

    max-height:430px;

    overflow:hidden;

    border:
        1px solid
        #d8e5f2;

    border-radius:18px;

    background:#ffffff;

    box-shadow:
        0 28px 80px
        rgba(7,24,42,.30);

    transform-origin:
        bottom right;
}


.ya-chat-panel[hidden]{
    display:none !important;
}


.ya-chat-panel:not([hidden]){
    animation:
        yaSupportPanelIn
        .28s
        cubic-bezier(.2,.8,.2,1)
        both;
}


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

.ya-chat-head{
    display:grid;

    grid-template-columns:
        38px
        minmax(0,1fr)
        34px;

    align-items:center;

    gap:9px;

    padding:
        10px
        11px;

    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            #07182a,
            #0b2b4b
        );

    box-shadow:
        0 12px 28px
        rgba(4,16,31,.12);
}


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

.ya-chat-avatar{
    display:grid;
    place-items:center;

    width:38px;
    height:38px;

    border:
        1px solid
        rgba(143,199,255,.20);

    border-radius:12px;

    color:#174a7c;

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

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.92),
        0 8px 20px
        rgba(0,0,0,.12);

    font-size:15px;
}


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

.ya-chat-head-copy{
    min-width:0;
}


.ya-chat-head-copy strong{
    display:block;

    overflow:hidden;

    color:#ffffff;

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

    letter-spacing:-.01em;

    white-space:nowrap;
    text-overflow:ellipsis;
}


.ya-chat-head-copy > span{
    display:block;

    margin-top:2px;

    color:#c7d9eb;

    font-size:10.5px;
    line-height:1.3;
}


.ya-chat-head-copy .fa-circle{
    margin-right:3px;

    color:#66d19e;

    font-size:6px;

    vertical-align:2px;
}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.ya-chat-close{
    display:grid;
    place-items:center;

    width:34px;
    height:34px;

    margin:0;
    padding:0;

    border:0;

    border-radius:11px;

    color:#ffffff;

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

    cursor:pointer;

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


.ya-chat-close:hover{
    transform:rotate(4deg);

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


/* =========================================================
   PROGRESS
========================================================= */

.ya-chat-progress{
    height:3px;

    overflow:hidden;

    background:#e9f0f7;
}


.ya-chat-progress span{
    display:block;

    width:0;
    height:100%;

    background:
        linear-gradient(
            90deg,
            #2f80ed,
            #8fc7ff
        );

    transition:
        width .3s ease;
}


/* =========================================================
   MESSAGES
========================================================= */

.ya-chat-messages{
    min-height:0;

    overflow-y:auto;
    overflow-x:hidden;

    padding:10px;

    background:
        linear-gradient(
            180deg,
            #f7faff,
            #ffffff
        );

    scrollbar-width:thin;

    -webkit-overflow-scrolling:touch;
}


.ya-chat-msg,
.ya-chat-message{
    max-width:90%;

    margin:
        0
        0
        8px;

    padding:
        8px
        10px;

    border-radius:15px;

    font-size:12.5px;
    line-height:1.42;

    white-space:pre-wrap;

    overflow-wrap:anywhere;
}


.ya-chat-msg.bot,
.ya-chat-message.bot{
    margin-right:auto;

    color:#173a5e;

    background:#edf5fd;

    border:
        1px solid
        #d9e8f6;

    border-bottom-left-radius:5px;

    box-shadow:
        0 5px 16px
        rgba(23,74,124,.055);
}


.ya-chat-msg.user,
.ya-chat-message.user{
    margin-left:auto;

    color:#ffffff;

    background:#174a7c;

    border-bottom-right-radius:5px;

    box-shadow:
        0 7px 18px
        rgba(23,74,124,.15);
}


.ya-chat-msg.system,
.ya-chat-message.system{
    max-width:100%;

    margin:
        9px
        auto;

    padding:4px;

    color:#6b7c91;

    background:transparent;

    font-size:11px;
    text-align:center;
}


/* =========================================================
   QUICK ACTIONS
========================================================= */

.ya-chat-quick{
    display:flex;

    gap:6px;

    max-width:100%;

    overflow-x:auto;

    padding:
        6px
        9px;

    border-top:
        1px solid
        #edf1f5;

    background:#ffffff;

    -webkit-overflow-scrolling:touch;
}


.ya-chat-quick:empty{
    display:none;
}


.ya-chat-chip,
.ya-chat-quick button{
    flex:
        0
        0
        auto;

    padding:
        6px
        9px;

    border:
        1px solid
        #cfe0f2;

    border-radius:999px;

    color:#174a7c;

    background:#f7fbff;

    font-size:10.5px;
    line-height:1.2;
    font-weight:750;

    cursor:pointer;

    white-space:nowrap;

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


.ya-chat-chip:hover,
.ya-chat-quick button:hover{
    transform:
        translateY(-2px);

    background:#eaf4ff;

    border-color:#8fc7ff;

    box-shadow:
        0 7px 16px
        rgba(23,74,124,.09);
}


/* =========================================================
   FORM
========================================================= */

.ya-chat-form{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        40px;

    gap:7px;

    padding:
        7px
        9px;

    border-top:
        1px solid
        #edf1f5;

    background:#ffffff;
}


.ya-chat-form input{
    min-width:0;
    height:40px;

    padding:
        0
        12px;

    border:
        1px solid
        #d6e2ee;

    border-radius:13px;

    color:#173a5e;

    background:#fbfdff;

    font-size:13px;

    outline:none;

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


.ya-chat-form input:focus{
    border-color:#6aaaf0;

    box-shadow:
        0 0 0 3px
        rgba(47,128,237,.10);
}


.ya-chat-form input:disabled{
    opacity:.72;

    cursor:wait;
}


.ya-chat-form button{
    display:grid;
    place-items:center;

    width:40px;
    height:40px;

    margin:0;
    padding:0;

    border:0;

    border-radius:12px;

    color:#ffffff;

    background:#174a7c;

    cursor:pointer;

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


.ya-chat-form button:hover{
    transform:
        translateY(-2px);

    background:#2f80ed;
}


/* HONEYPOT */

.ya-chat-hp{
    position:absolute !important;

    left:-10000px !important;

    width:1px !important;
    height:1px !important;

    opacity:0 !important;
}


/* =========================================================
   VERIFICATION
========================================================= */

.ya-chat-verify{
    padding:
        10px
        12px;

    border-top:
        1px solid
        #e7eef5;

    background:#f8fbff;
}


.ya-chat-verify[hidden]{
    display:none !important;
}


.ya-chat-verify p{
    margin:
        0
        0
        7px !important;

    color:#173a5e;

    font-size:12px;
    line-height:1.3;
    font-weight:800;
}


.ya-chat-verify-row{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    gap:8px;
}


.ya-chat-verify input{
    min-width:0;
    height:38px;

    padding:
        0
        10px;

    border:
        1px solid
        #cfddeb;

    border-radius:10px;

    background:#ffffff;
}


.ya-chat-verify button{
    min-height:38px;

    padding:
        0
        13px;

    border:0;

    border-radius:10px;

    color:#ffffff;

    background:#174a7c;

    font-size:12px;
    font-weight:800;

    cursor:pointer;
}


.ya-chat-verify small{
    display:block;

    margin-top:6px;

    color:#6b7c91;

    font-size:10.5px;
}


/* =========================================================
   FOOT
========================================================= */

.ya-chat-foot{
    display:flex;

    justify-content:space-between;

    gap:12px;

    padding:
        5px
        9px;

    border-top:
        1px solid
        #edf1f5;

    color:#718096;

    background:#f8fafc;

    font-size:8.8px;
    line-height:1.25;
}


.ya-chat-foot > span:first-child{
    max-width:78%;
}


.ya-chat-foot i{
    color:#2f80ed;
}


/* =========================================================
   WHATSAPP BUTTON
========================================================= */

.ya-chat-whatsapp{
    display:inline-flex;

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

    gap:8px;

    width:100%;

    margin-top:7px;

    padding:
        10px
        12px;

    border:0;

    border-radius:12px;

    color:#ffffff !important;

    background:#1f8f5f;

    box-shadow:
        0 10px 24px
        rgba(31,143,95,.20);

    font-weight:850;

    text-decoration:none !important;

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


.ya-chat-whatsapp:hover{
    transform:
        translateY(-2px);

    color:#ffffff !important;

    background:#18764e;

    box-shadow:
        0 15px 30px
        rgba(31,143,95,.27);
}


/* =========================================================
   MESSAGE LIMIT
========================================================= */

.ya-chat-limit{
    opacity:.55;

    pointer-events:none;
}


/* =========================================================
   CHATGPT-LIKE TYPING
========================================================= */

.ya-chat-typing{
    display:flex !important;

    align-items:center;

    gap:5px;

    width:max-content;

    min-width:46px;

    padding:
        10px
        12px !important;
}


.ya-chat-typing span{
    width:6px;
    height:6px;

    border-radius:50%;

    background:#5d7fa3;

    animation:
        yaChatThink
        1.05s
        infinite
        ease-in-out;
}


.ya-chat-typing span:nth-child(2){
    animation-delay:.14s;
}


.ya-chat-typing span:nth-child(3){
    animation-delay:.28s;
}


/* =========================================================
   BACK TO TOP
========================================================= */

.ya-back-top{
    position:fixed;

    z-index:2147482000;

    left:18px;
    right:auto;

    bottom:max(
        22px,
        env(safe-area-inset-bottom)
    );

    display:grid;

    place-items:center;

    width:46px;
    height:46px;

    visibility:hidden;

    opacity:0;

    border:
        1px solid
        rgba(143,199,255,.34);

    border-radius:50%;

    color:#8fc7ff;

    background:
        rgba(5,22,40,.94);

    box-shadow:
        0 14px 36px
        rgba(7,24,42,.26);

    cursor:pointer;

    transform:
        translateY(12px);

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


.ya-back-top.is-visible{
    visibility:visible;

    opacity:1;

    transform:
        translateY(0);
}


.ya-back-top.is-footer{
    bottom:88px;
}


.ya-back-top:hover{
    transform:
        translateY(-4px);

    color:#ffffff;

    background:#2f80ed;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes yaSupportOnline{

    0%,
    100%{
        transform:
            scale(1);

        opacity:1;
    }

    50%{
        transform:
            scale(.78);

        opacity:.62;
    }
}


@keyframes yaSupportPanelIn{

    from{
        opacity:0;

        transform:
            translateY(12px)
            scale(.975);
    }

    to{
        opacity:1;

        transform:none;
    }
}


@keyframes yaChatThink{

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

        opacity:.45;
    }

    30%{
        transform:
            translateY(-4px);

        opacity:1;
    }
}


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

@media(max-width:782px){

    .ya-chatbot{
        right:max(
            12px,
            env(safe-area-inset-right)
        );

        bottom:max(
            14px,
            env(safe-area-inset-bottom)
        );
    }


    .ya-chat-launcher{
        min-height:46px;

        padding:
            6px
            13px
            6px
            6px;
    }


    .ya-chat-launcher-icon{
        width:36px;
        height:36px;

        flex-basis:36px;
    }


    .ya-chat-launcher-label{
        font-size:12px;
    }


    .ya-chat-panel{
        position:fixed;

        top:auto;
        left:auto;

        right:max(
            12px,
            env(safe-area-inset-right)
        );

        bottom:max(
            72px,
            calc(
                env(safe-area-inset-bottom)
                + 66px
            )
        );

        width:min(
            326px,
            calc(100vw - 24px)
        );

        height:min(
            390px,
            56dvh
        );

        max-height:390px;

        border-radius:18px;
    }


    .ya-chat-form input{
        font-size:16px;
    }


    .ya-back-top{
        left:12px;

        bottom:max(
            16px,
            env(safe-area-inset-bottom)
        );
    }


    .ya-back-top.is-footer{
        bottom:92px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:440px){

    .ya-chatbot{
        right:max(
            10px,
            env(safe-area-inset-right)
        );
    }


    .ya-chat-launcher{
        width:50px;
        height:50px;

        min-height:50px;

        padding:6px;
    }


    .ya-chat-launcher-label{
        display:none;
    }


    .ya-chat-launcher-icon{
        width:36px;
        height:36px;
    }


    .ya-chat-launcher::after{
        left:36px;
    }


    .ya-chat-panel{
        left:14px;
        right:14px;

        width:auto;

        height:min(
            325px,
            47dvh
        );

        max-height:325px;
    }


    .ya-chat-msg,
    .ya-chat-message{
        max-width:92%;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media(max-width:390px){

    .ya-chat-panel{
        left:10px;
        right:10px;

        width:auto;

        height:min(
            305px,
            45dvh
        );

        max-height:305px;
    }


    .ya-chat-head{
        padding:
            8px
            9px;
    }


    .ya-chat-messages{
        padding:
            8px;
    }
}


/* =========================================================
   TOUCH DEVICES
========================================================= */

@media(hover:none){

    .ya-chat-launcher:hover,
    .ya-chat-chip:hover,
    .ya-chat-quick button:hover,
    .ya-chat-whatsapp:hover{
        transform:none;
    }
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.ya-chatbot button:focus-visible,
.ya-chatbot a:focus-visible,
.ya-chatbot input:focus-visible,
.ya-back-top:focus-visible{
    outline:
        3px solid
        #8fc7ff;

    outline-offset:
        3px;
}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .ya-chatbot *,
    .ya-chatbot *::before,
    .ya-chatbot *::after,
    .ya-back-top{
        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;
    }


    .ya-chat-typing span{
        opacity:.75;
    }
}