/* ===============================
   BCCP AI Assistant
   Premium Chatbot CSS v2
==================================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

/*=============================
Launcher
==============================*/

#chat-launcher{

position:fixed;

right:22px;
bottom:22px;

width:74px;
height:74px;

border-radius:50%;

background:#ffffff;

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

cursor:pointer;

box-shadow:
0 10px 30px rgba(0,0,0,.20);

border:5px solid #e8f5ff;

transition:.25s;

z-index:99999;

}

#chat-launcher:hover{

transform:scale(1.08);

}

.launcher-circle{

width:58px;
height:58px;

border-radius:50%;

background:linear-gradient(
135deg,
#1c62d7,
#0c8df0
);

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

font-size:32px;

color:white;

}

.launcher-icon{

    font-size:24px;

    line-height:1;

}

.launcher-text{

    margin-top:3px;

    text-align:center;

}

.bccp{

    font-size:13px;

    font-weight:700;

}

.ai{

    font-size:10px;

    letter-spacing:2px;

}


/*=============================
Container
==============================*/

.chat-container{

    width:420px;

    height:calc(100vh - 120px);

    max-height:700px;

    position:fixed;

    right:20px;

    top:95px;

    bottom:auto;

    background:#f7f9fd;

    border-radius:22px;

    overflow:hidden;

    display:none;

    flex-direction:column;

    box-shadow:0 25px 70px rgba(0,0,0,.22);

    animation:popup .25s ease;

    z-index:999999;

}

.chat-container.open{
    display:flex;
}

@keyframes popup{

from{

transform:translateY(25px) scale(.95);

opacity:0;

}

to{

transform:translateY(0) scale(1);

opacity:1;

}

}

/*=============================
Header
==============================*/

.chat-header{

    background:
    linear-gradient(90deg,#0066CC,#0B5ED7);

    color:white;

    padding:12px 16px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.chat-brand{

    display:flex;

    align-items:center;

    gap:12px;

}

.chat-logo{

    width:46px;

    height:46px;

    border-radius:50%;

    background:#8BC53F;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:24px;

}

.assistant-title{

    font-size:18px;

    font-weight:700;

    line-height:1.2;

}

.assistant-subtitle{

    font-size:12px;

    opacity:.9;

    margin-top:2px;

}

.header-icons{

    display:flex;

    gap:15px;

    font-size:20px;

}

.header-icons span{

    cursor:pointer;

    transition:.3s;

}

.header-icons span:hover{

    color:#ffe082;

}

/*=============================
Body
==============================*/

.chat-body{

    flex:1;

    overflow-y:auto;

    padding:16px;

    background:#f7f9fd;

}

/* Scroll */

.chat-body::-webkit-scrollbar{

    width:5px;

}

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

    background:#c9c9c9;

    border-radius:20px;

}

/*=============================
Welcome Card
==============================*/

.welcome-card{

    background:white;

    padding:24px;

    border-radius:20px;

    box-shadow:

    0 10px 25px rgba(0,0,0,.07);

    margin-bottom:25px;

}

.welcome-card h2{

    font-size:25px;

    line-height:1.35;

    background:
    linear-gradient(90deg,#0072BC,#00A651);

    -webkit-background-clip:text;
    background-clip:text;

    -webkit-text-fill-color:transparent;

    margin-bottom:18px;

}

.welcome-card p{

    color:#666;

    font-size:15px;

    line-height:1.7;

}

/*=============================
Quick Buttons
==============================*/

.quick-actions{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-top:20px;

}

.quick-actions button{

    width:165px;

    height:54px;

    border-radius:28px;

    border:2px solid #8BC53F;

    background:white;

    color:#333;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.quick-actions button:hover{

    background:#8BC53F;

    color:white;

    transform:translateY(-2px);

}

/*=============================
Messages
==============================*/

/* =============================
   BOT MESSAGE - FIXED
   ============================= */

#chatContainer .bot-message {
    display: block;

    width: fit-content !important;
    max-width: 90% !important;

    height: auto !important;
    min-height: 0 !important;

    background: #ffffff;

    padding: 10px 14px;

    border-radius: 15px;

    margin: 0 0 12px 0;

    box-shadow: 0 5px 14px rgba(0,0,0,.06);

    color: #444;

    font-size: 14px;
    line-height: 1.5;

    word-break: break-word;
    white-space: normal;

    box-sizing: border-box;
}

.user-message{

    background:#0B5ED7;

    color:white;

    padding:8px 12px;

    border-radius:15px;

    margin:10px 0 12px auto;
    width:fit-content;
    word-wrap:break-word;


    line-height:1.5;

}

/*=============================
Footer
==============================*/

.chat-footer{

    background:white;

    border-top:1px solid #ececec;

    display:flex;

    align-items:center;

    gap:10px;

    padding:15px;

}

.chat-footer input{

    flex:1;

    height:52px;

    border-radius:30px;

    border:1px solid #ddd;

    padding:0 18px;

    outline:none;

    font-size:15px;

}

.chat-footer input:focus{

    border-color:#0B5ED7;

}

.chat-footer button{

    width:52px;

    height:52px;

    border:none;

    border-radius:50%;

    background:#0B5ED7;

    color:white;

    font-size:22px;

    cursor:pointer;

    transition:.25s;

}

.chat-footer button:hover{

    background:#084fae;

}

/*=============================
Suggestion Buttons
==============================*/

.bot-message button{

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

    width:auto;
    min-width:unset;
    max-width:fit-content;

    margin:6px 6px 0 0;

    padding:8px 14px;

    border:1px solid #d7e3ff;
    border-radius:20px;

    background:#f7faff;
    color:#1d4ed8;

    font-size:13px;
    font-weight:600;

    cursor:pointer;

    transition:.25s;
}

.bot-message button:hover{

    background:#1d4ed8;
    color:white;

}

/*=============================
Responsive
==============================*/

@media(max-width:500px){

.chat-container{

    width:100%;

    height:100%;

    top:0;

    right:0;

    bottom:0;

    max-height:none;

    border-radius:0;

}

#chat-launcher{

position:fixed;
right:15px;

bottom:15px;
z-index:1000000;

}

}

.bot-avatar{

width:48px;
height:48px;

border-radius:50%;

background:#8bc34a;

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

font-size:26px;

margin-right:14px;

}

.welcome-box{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    padding:20px;

}

.welcome-logo{

    font-size:48px;

    margin-bottom:12px;

}

.quick-actions button{

border:2px solid #7cb342;

background:white;

color:#5b8d17;

border-radius:30px;

padding:12px 18px;

font-size:15px;

font-weight:600;

transition:.25s;

}

.quick-actions button:hover{

background:#7cb342;

color:white;

}
.chat-suggestions{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-top:12px;

}

.chat-chip{

    border:1px solid #d7e3ff;

    background:#f7faff;

    color:#1d4ed8;

    padding:8px 14px;

    border-radius:20px;

    cursor:pointer;

    transition:.25s;

    font-size:13px;

    font-weight:500;

}

.chat-chip:hover{

    background:#1d4ed8;

    color:#fff;

    transform:translateY(-1px);

}