/*
DigitalLinks AI Chatbot
Frontend Styles
Version: 1.0.0
*/


#dl-ai-chatbot-root {

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

}


/* Floating Button */

.dl-chatbot-button {

    position: fixed;

    right: 25px;

    bottom: 25px;

    width: 60px;

    height: 60px;

    border-radius: 50%;

    border: none;

    background: #0274be;

    color: #ffffff;

    font-size: 28px;

    cursor: pointer;

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

    z-index: 999999;
padding: 12px 12px 12px 12px;
}



/* Chat Window */

.dl-chatbot-window {

    position: fixed;

    right: 25px;

    bottom: 95px;

    width: 360px;

    height: 520px;

    background: #ffffff;

    border-radius: 18px;

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

    display: none;

    flex-direction: column;

    overflow: hidden;

    z-index: 999999;

}



/* Header */

.dl-chatbot-header {

    background: #0274be;

    color:white;

    padding:16px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-size:16px;

}


.dl-chatbot-close {

    cursor:pointer;

    font-size:24px;

}




/* Messages */

.dl-chatbot-messages {

    flex:1;

    padding:15px;

    overflow-y:auto;

    background:#f8fafc;

}



.dl-message {

    max-width:80%;

    padding:10px 14px;

    margin-bottom:12px;

    border-radius:12px;

    font-size:14px;

    line-height:1.5;

}



.dl-ai-message {

    background:#ffffff;

    color:#1f2937;

    border:1px solid #e5e7eb;

    margin-right:auto;

}



.dl-user-message {

    background:#0274be;

    color:white;

    margin-left:auto;

}




/* Input Area */

.dl-chatbot-input {

    display:flex;

    padding:12px;

    border-top:1px solid #e5e7eb;

    background:white;

}



#dl-chatbot-input {

    flex:1;

    padding:12px;

    border:1px solid #d1d5db;

    border-radius:8px;

    outline:none;

}



#dl-chatbot-send {

    margin-left:8px;

    padding:0 18px;

    border:none;

    border-radius:8px;

    background:#0274be;

    color:white;

    cursor:pointer;

}





/* Mobile */

@media(max-width:600px){


    .dl-chatbot-window {

        right:10px;

        left:10px;

        bottom:85px;

        width:auto;

        height:75vh;

    }


    .dl-chatbot-button {

        right:20px;

        bottom:20px;

    }


}