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

#dbb-ai-btn{

    position:fixed;
    right:15px;
    bottom:15px;

    width:60px;
    height:60px;

    border-radius:50%;

    background:linear-gradient(135deg,#2563eb,#7c3aed);

    color:#fff;

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

    font-size:28px;

    cursor:pointer;

    z-index:99999;

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

}

/* =========================================
CHAT BOX
========================================= */

#dbb-ai-chat{

    position:fixed;

    right:15px;
    bottom:2px;

    width:350px;
    height:460px;

    background:#ffffff;

    border-radius:22px;

    overflow:hidden;

    display:none;
    flex-direction:column;

    z-index:99999;

    box-shadow:0 15px 45px rgba(0,0,0,0.2);

    border:1px solid #e5e7eb;
}

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

#dbb-ai-header{

    background:linear-gradient(135deg,#2563eb,#7c3aed);

    color:#fff;

    padding:14px 18px;

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

    font-size:16px;
    font-weight:600;
}

#dbb-ai-header span{

    cursor:pointer;
    font-size:18px;
}

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

#dbb-ai-messages{

    flex:1;

    overflow-y:auto;

    padding:15px;

    background:#f8fafc;

    display:flex;
    flex-direction:column;
}

/* USER MESSAGE */

.user{

    background:#2563eb;

    color:#ffffff !important;

    padding:12px 14px;

    border-radius:16px;

    max-width:85%;

    margin-left:auto;

    margin-bottom:12px;

    font-size:14px;

    line-height:1.5;

    word-break:break-word;
}

/* BOT MESSAGE */

.bot{

    background:#ffffff;

    color:#111827 !important;

    padding:12px 14px;

    border-radius:16px;

    border:1px solid #e5e7eb;

    max-width:85%;

    margin-bottom:12px;

    font-size:14px;

    line-height:1.6;

    word-break:break-word;
}

/* =========================================
QUICK BUTTONS
========================================= */

#quick-ai-actions{

    display:flex;

    gap:8px;

    padding:10px 12px;

    overflow-x:auto;

    background:#fff;

    border-top:1px solid #eee;
}

#quick-ai-actions button{

    border:none;

    background:#eef2ff;

    color:#111827;

    padding:8px 14px;

    border-radius:30px;

    cursor:pointer;

    font-size:13px;

    white-space:nowrap;

    flex-shrink:0;
}

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

#dbb-ai-input-box{

    display:flex;

    gap:10px;

    padding:12px;

    background:#fff;

    border-top:1px solid #eee;
}

#dbb-ai-input{

    flex:1;

    height:45px;

    border:1px solid #d1d5db;

    border-radius:12px;

    padding:0 14px;

    outline:none;

    font-size:14px;

    color:#111827;

    background:#fff;
}

#dbb-ai-input::placeholder{

    color:#6b7280;
}

#dbb-ai-input-box button{

    border:none;

    background:#2563eb;

    color:#fff;

    border-radius:12px;

    padding:0 18px;

    cursor:pointer;

    font-size:14px;

    min-width:75px;
}

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

#dbb-ai-messages::-webkit-scrollbar{

    width:6px;
}

#dbb-ai-messages::-webkit-scrollbar-thumb{

    background:#cbd5e1;

    border-radius:20px;
}

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

@media(max-width:480px){

    #dbb-ai-chat{

        width:95%;
        height:68vh;

        right:2.5%;
        bottom:70px;

        border-radius:20px;
    }

    #dbb-ai-btn{

        width:58px;
        height:58px;

        font-size:26px;
    }

    #dbb-ai-input{

        font-size:13px;
    }

}