/* ================================
   BPIC Assistant Chatbot
================================ */


.bpic-chatbot {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 9999;
    font-family: Arial, sans-serif;
}


/* Floating Button */

.chatbot-toggle {

    width: 60px;
    height: 60px;

    border-radius: 50%;
    border: none;

    background: #0b57d0;
    color: white;

    font-size: 28px;

    cursor: pointer;

    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25);

    transition: transform .2s;

}


.chatbot-toggle:hover {
    transform: scale(1.1);
}



/* Chat Window */

.chatbot-window {

    display: none;

    width: 350px;
    height: 500px;

    background: white;

    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 10px 40px rgba(0, 0, 0, .25);

    margin-bottom: 15px;

}



/* Header */

.chatbot-header {

    background: #0b57d0;

    color: white;

    padding: 18px;

    display: flex;

    justify-content: space-between;

    align-items: center;

}


.chatbot-header h3 {

    margin: 0;

    font-size: 18px;

}


.chatbot-header span {

    font-size: 12px;

    opacity: .8;

}



.chatbot-close {

    border: none;

    background: none;

    color: white;

    font-size: 20px;

    cursor: pointer;

}




/* Body */

.chatbot-body {

    height: 340px;

    padding: 15px;

    overflow-y: auto;

    background: #f7f9fc;

}



.bot-message {

    background: white;

    padding: 14px;

    border-radius: 12px;

    line-height: 1.5;

    font-size: 14px;

    box-shadow:
        0 2px 8px rgba(0, 0, 0, .08);

}



.bot-message ul {

    padding-left: 20px;

}




/* Quick Buttons */


.quick-options {

    display: flex;

    flex-direction: column;

    gap: 8px;

    margin-top: 15px;

}



.quick-options button {

    border: none;

    padding: 10px;

    border-radius: 10px;

    cursor: pointer;

    background: #e8f0fe;

    color: #0b57d0;

    text-align: left;

    transition: .2s;

}


.quick-options button:hover {

    background: #d2e3fc;

}




/* Input */


.chatbot-input {

    display: flex;

    border-top: 1px solid #ddd;

    padding: 10px;

}



.chatbot-input input {

    flex: 1;

    border: none;

    outline: none;

    padding: 10px;

    font-size: 14px;

}



.chatbot-input button {

    width: 40px;

    border: none;

    background: #0b57d0;

    color: white;

    border-radius: 10px;

    cursor: pointer;

}

/* =====================================
   BPIC Assistant Action Buttons
===================================== */


.chatbot-body button {

    border: none;

    background: #e8f0fe;

    color: #0b57d0;

    padding: 12px 18px;

    border-radius: 12px;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    margin: 6px 0;

    width: 100%;

    text-align: left;

    transition: all 0.25s ease;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

}



.chatbot-body button:hover {

    background: #0b57d0;

    color: white;

    transform: translateY(-2px);

    box-shadow:
        0 5px 15px rgba(11, 87, 208, 0.25);

}



/* Quick option buttons */

.quick-options button {

    display: flex;

    align-items: center;

    gap: 10px;

}



/* Bot response cards */

.bot-message {

    background: white;

    padding: 16px;

    border-radius: 16px;

    line-height: 1.6;

    font-size: 15px;

    color: #1f2937;

    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.08);

}



.bot-message ul {

    margin-top: 10px;

    padding-left: 20px;

}




/* Response action buttons */

.bot-message button {

    background: #0b57d0;

    color: white;

    text-align: center;

    margin-top: 12px;

}



.bot-message button:hover {

    background: #0845a5;

}





/* Better spacing between conversations */

.user-message {

    margin-left: 40px;

    margin-top: 12px;

    margin-bottom: 12px;

}





/* Smooth scrollbar */

.chatbot-body::-webkit-scrollbar {

    width: 6px;

}


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

    border-radius: 10px;

    background: #cbd5e1;

}


/* Mobile */

@media(max-width:500px) {


    .chatbot-window {

        width: 90vw;

        height: 70vh;

        right: 5vw;

    }


}