/*=========================================================
    ACSEC AI
    Version 2.0
=========================================================*/

#acsec-ai-launcher,
#acsec-chat{

    --primary:#641B28;

    --primary-dark:#49131C;

    --gold:#E8C77A;

    --background:#4B151F;

    --border:#75414B;

    --text:#FFFFFF;

    --placeholder:#C9B5B8;

}



/*=========================================================
    RESET
=========================================================*/

#acsec-ai-launcher,
#acsec-chat,
#acsec-chat *{

    box-sizing:border-box;

    font-family:
    "Poppins",
    sans-serif;

}



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

#acsec-ai-launcher{

    position:fixed;

    right:24px;

    bottom:24px;

    width:84px;

    height:84px;

    border-radius:50%;

    overflow:hidden;

    border:3px solid #E8C77A;

    background:#551722;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    box-shadow:

        0 18px 45px rgba(0,0,0,.45),

        0 0 25px rgba(232,199,122,.15);

    transition:.25s;

    z-index:999999;

}



#acsec-ai-launcher:hover{

    transform:scale(1.07);

    box-shadow:

        0 18px 45px rgba(0,0,0,.45),

        0 0 28px rgba(232,199,122,.25);

}



#acsec-ai-launcher img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    display:block;

    pointer-events:none;

}


/*=========================================================
    CHAT WINDOW
=========================================================*/

#acsec-chat{

    position:fixed;

    right:24px;

    bottom:115px;

    width:430px;

    height:620px;

    background:var(--background);

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

    border-radius:22px;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    opacity:0;

    visibility:hidden;

    transform:scale(.96) translateY(18px);

    transition:.25s;

    box-shadow:

        0 28px 70px rgba(0,0,0,.45),

        0 0 35px rgba(232,199,122,.05);

    z-index:999998;

}



#acsec-chat.open{

    opacity:1;

    visibility:visible;

    transform:

    scale(1)

    translateY(0);

}

#acsec-chat.open + #acsec-ai-launcher{

    opacity:0;

    pointer-events:none;

    transform:scale(.8);

}


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

#acsec-header{

    height:72px;

    display:flex;

    align-items:center;

    padding:0 26px;

    color:white;

    font-size:22px;

    font-weight:700;

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

    letter-spacing:.2px;

}


/*=========================================================
    BODY
=========================================================*/

#acsec-body{

    flex:1;

    overflow-y:auto;

    overflow-x:hidden;

    padding:22px;

    scrollbar-gutter:stable;


}


/*=========================================================
    SCROLLBAR
=========================================================*/

#acsec-body::-webkit-scrollbar{

    width:6px;

}

#acsec-body::-webkit-scrollbar-track{

    background:transparent;

}

#acsec-body::-webkit-scrollbar-thumb{

    background:#4C232B;

    border-radius:50px;

}

#acsec-body::-webkit-scrollbar-thumb:hover{

    background:#65404A;

}



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

#acsec-messages{

    display:flex;

    flex-direction:column;

    gap:22px;

}



/*=========================================================
    WELCOME MESSAGE
=========================================================*/

.acsec-welcome{

    color:white;

    font-size:20px;

    font-weight:500;

    line-height:1.6;

}



/*=========================================================
    USER MESSAGE
=========================================================*/

.acsec-user{

    align-self:flex-end;

    max-width:82%;

    background:#E8C77A;

    color:#2A0B10;

    padding:14px 18px;

    border-radius:18px 18px 4px 18px;

    font-size:15px;

    font-weight:500;

    line-height:1.65;

    word-break:break-word;

}



/*=========================================================
    AI MESSAGE
=========================================================*/

.acsec-ai{

    align-self:flex-start;

    max-width:90%;

    background:#61202B;

    color:white;

    padding:14px 18px;

    border-radius:18px 18px 18px 4px;

    font-size:15px;

    line-height:1.7;

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

    word-break:break-word;

}



/*=========================================================
    INPUT AREA
=========================================================*/

#acsec-input{

    min-height:82px;

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

    display:flex;

    align-items:flex-end;

    padding:18px;

    gap:12px;

}

/*=========================================================
    INPUT
=========================================================*/

#acsec-message{

    flex:1;

    background:#43131B;

    color:white;

    border:none;

    outline:none;

    border-radius:14px;

    padding:14px 16px;

    font-size:15px;

    font-family:inherit;

    resize:none;

    overflow-y:hidden;

    min-height:52px;

    max-height:130px;

    line-height:1.6;

    height:52px;

    box-sizing:border-box;

    white-space:pre-wrap;

}


#acsec-message::placeholder{

    color:var(--placeholder);

}



/*=========================================================
    SEND BUTTON
=========================================================*/

#acsec-send{

    width:46px;

    height:46px;

    border-radius:50%;

    border:none;

    background:#6A2430;

    color:white;

    font-size:20px;

    cursor:pointer;

    transition:.25s;

}



#acsec-send:hover{

    background:#7A2D3C;

    transform:scale(1.08);

}



/*=========================================================
    REMOVE INPUT OUTLINE
=========================================================*/

#acsec-message:focus{

    outline:none;

}



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

@media (max-width:768px){

    /* Chat window */

    #acsec-chat{

        width:100vw;

        height:100dvh;

        right:0;

        bottom:0;

        border-radius:0;

        border:none;

    }

    /* Header */

    #acsec-header{

        padding:0 20px;

        font-size:20px;

    }

    /* Messages */

    #acsec-body{

        padding:18px;

    }

    .acsec-user,
    .acsec-ai{

        max-width:92%;

        font-size:15px;

    }

    /* Input */

    #acsec-input{

        padding:14px;

    }

    #acsec-message{

        font-size:16px;

    }

    #acsec-send{

        width:52px;

        height:52px;

        font-size:22px;

        flex-shrink:0;

    }

    /* Floating launcher */

    #acsec-ai-launcher{

        right:18px;

        bottom:18px;

        width:72px;

        height:72px;

    }

}

/*=========================================================
    WELCOME
=========================================================*/

#acsec-welcome{

    color:white;

    font-size:20px;

    font-weight:500;

    padding-bottom:22px;

}



/*=========================================================
    DIVIDER
=========================================================*/

#acsec-divider{

    height:1px;

    background:var(--border);

    margin-bottom:22px;

}
/*=========================================================
    CONVERSATION
=========================================================*/

#acsec-messages{

    display:flex;

    flex-direction:column;

    gap:18px;

    overflow:visible;

    flex:1;

}



/*=========================================================
    USER
=========================================================*/

.acsec-user{

    align-self:flex-end;

    max-width:90%;

    background:#5B111B;

    color:white;

    padding:12px 18px;

    border-radius:18px 18px 4px 18px;

    font-size:15px;

    line-height:1.6;

    word-break:break-word;

}



/*=========================================================
    AI
=========================================================*/

.acsec-ai{

    align-self:flex-start;

    max-width:80%;

    color:white;

    font-size:15px;

    line-height:1.7;

    word-break:break-word;

}



/*=========================================================
    FADE ANIMATION
=========================================================*/

@keyframes acsecFade{

    from{

        opacity:0;

        transform:translateY(10px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.acsec-user,
.acsec-ai{

    animation:acsecFade .22s ease;

}

.typing span{

    display:inline-block;

    width:8px;

    height:8px;

    margin:0 2px;

    background:white;

    border-radius:50%;

    animation:typingBounce 1s infinite;

}

.typing span:nth-child(2){

    animation-delay:.15s;

}

.typing span:nth-child(3){

    animation-delay:.3s;

}

@keyframes typingBounce{

    0%,80%,100%{

        transform:translateY(0);

        opacity:.35;

    }

    40%{

        transform:translateY(-6px);

        opacity:1;

    }

}
/*=========================================================
    MARKDOWN
=========================================================*/

.acsec-ai h1,
.acsec-ai h2,
.acsec-ai h3,
.acsec-ai h4{

    color:#E8C77A;

    margin:18px 0 12px;

    font-weight:700;

    line-height:1.3;

}

.acsec-ai h1{

    font-size:28px;

}

.acsec-ai h2{

    font-size:24px;

}

.acsec-ai h3{

    font-size:20px;

}

.acsec-ai p{

    margin:10px 0;

    line-height:1.75;

}

.acsec-ai ul,
.acsec-ai ol{

    margin:12px 0;

    padding-left:24px;

}

.acsec-ai li{

    margin:8px 0;

}

.acsec-ai strong{

    color:#E8C77A;

    font-weight:700;

}

.acsec-ai em{

    font-style:italic;

}

.acsec-ai a{

    color:#E8C77A;

    text-decoration:none;

}

.acsec-ai a:hover{

    text-decoration:underline;

}

.acsec-ai code{

    background:#341018;

    padding:3px 7px;

    border-radius:6px;

    font-family:Consolas, monospace;

    color:#FFD98A;

    font-size:14px;

}

.acsec-ai pre{

    background:#341018;

    padding:16px;

    border-radius:12px;

    overflow-x:auto;

    margin:16px 0;

}

.acsec-ai pre code{

    background:none;

    padding:0;

}

.acsec-ai blockquote{

    border-left:4px solid #E8C77A;

    margin:18px 0;

    padding-left:18px;

    color:#D9D9D9;

    font-style:italic;

}

.acsec-ai table{

    width:100%;

    border-collapse:collapse;

    margin:18px 0;

}

.acsec-ai th{

    background:#5B111B;

    color:#E8C77A;

    padding:10px;

    text-align:left;

}

.acsec-ai td{

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

    padding:10px;

}

.chatbot-body a,
.chatbot-body a:link,
.chatbot-body a:visited,
.chatbot-body a:hover,
.chatbot-body a:active {

    color: #d8b26e !important;

    text-decoration: none !important;

    font-weight: 600;

}

.chatbot-body a:hover {

    color: #f5d58a !important;

    text-decoration: underline !important;

}

/* Website embed additions */
#acsec-header{
    justify-content:space-between;
    gap:14px;
}

#acsec-header-title{
    display:flex;
    align-items:center;
    gap:11px;
    min-width:0;
}

#acsec-header-title img{
    width:38px;
    height:38px;
    border-radius:50%;
    object-fit:cover;
    border:1px solid rgba(232,199,122,.45);
    flex-shrink:0;
}

#acsec-header-copy{
    display:flex;
    flex-direction:column;
    min-width:0;
    line-height:1.1;
}

#acsec-header-copy strong{
    color:#fff;
    font-size:18px;
    white-space:nowrap;
}

#acsec-header-copy span{
    margin-top:4px;
    color:#D8C4C7;
    font-size:11px;
    font-weight:500;
    white-space:nowrap;
}

#acsec-close{
    width:40px;
    height:40px;
    flex:0 0 40px;
    display:grid;
    place-items:center;
    border:1px solid rgba(232,199,122,.25);
    border-radius:50%;
    background:rgba(42,11,16,.38);
    color:#fff;
    font-size:27px;
    line-height:1;
    cursor:pointer;
    transition:.2s ease;
}

#acsec-close:hover,
#acsec-close:focus-visible{
    color:var(--gold);
    border-color:rgba(232,199,122,.65);
    background:rgba(42,11,16,.68);
    outline:none;
}

#acsec-ai-launcher{
    padding:0;
}

#acsec-ai-launcher:focus-visible{
    outline:3px solid var(--gold);
    outline-offset:4px;
}

#acsec-chat[aria-hidden="true"]{
    pointer-events:none;
}

#acsec-chat[aria-hidden="false"]{
    pointer-events:auto;
}

@media (max-width:768px){
    #acsec-header{
        padding-top:env(safe-area-inset-top);
        min-height:calc(72px + env(safe-area-inset-top));
    }

    #acsec-input{
        padding-bottom:calc(14px + env(safe-area-inset-bottom));
    }

    #acsec-ai-launcher{
        right:18px;
        bottom:calc(18px + env(safe-area-inset-bottom));
    }
}