#sb-chatbot {
    position: fixed !important;
    right: 25px !important;
    bottom: 25px !important;
    z-index: 999999 !important;
    font-family: Inter, Arial, sans-serif !important;
}


/* BUTTON */

#sb-chatbot .sb-chat-button {

    width: 60px !important;
    height: 60px !important;

    border: none !important;
    border-radius: 50% !important;

    background: #FF5C02 !important;

    color: #FFFFFF !important;

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

    cursor: pointer !important;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.20) !important;

    position: relative !important;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease !important;
}


#sb-chatbot .sb-chat-button:hover {

    transform: translateY(-2px) !important;

    box-shadow:
        0 14px 35px rgba(0, 0, 0, 0.25) !important;
}


/* NOTIFICATION */

#sb-chatbot .sb-notification-dot {

    position: absolute !important;

    width: 12px !important;
    height: 12px !important;

    background: #22C55E !important;

    border: 2px solid #FFFFFF !important;

    border-radius: 50% !important;

    top: 3px !important;
    right: 3px !important;
}


/* CHAT WINDOW */

#sb-chatbot .sb-chat-window {

    position: absolute !important;

    right: 0 !important;
    bottom: 72px !important;

    width: 390px !important;
    height: 590px !important;

    background: #FFFFFF !important;

    border: 1px solid #E5E5E5 !important;

    border-radius: 18px !important;

    overflow: hidden !important;

    display: flex !important;
    flex-direction: column !important;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.18) !important;

    opacity: 0 !important;

    visibility: hidden !important;

    pointer-events: none !important;

    transform:
        translateY(15px)
        scale(0.97) !important;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s ease !important;
}


#sb-chatbot .sb-chat-window.open {

    opacity: 1 !important;

    visibility: visible !important;

    pointer-events: auto !important;

    transform:
        translateY(0)
        scale(1) !important;
}


/* HEADER */

#sb-chatbot .sb-chat-header {

    height: 72px !important;

    min-height: 72px !important;

    padding:
        0 18px !important;

    background: #FF5C02 !important;

    color: #FFFFFF !important;

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;
}


#sb-chatbot .sb-chat-brand {

    display: flex !important;

    align-items: center !important;

    gap: 12px !important;
}


#sb-chatbot .sb-chat-logo {

    width: 42px !important;
    height: 42px !important;

    border-radius: 12px !important;

    background: #FFFFFF !important;

    color: #FF5C02 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    font-size: 14px !important;

    font-weight: 700 !important;
}


#sb-chatbot .sb-chat-title {

    font-size: 16px !important;

    font-weight: 700 !important;

    line-height: 1.2 !important;
}


#sb-chatbot .sb-chat-status {

    margin-top: 4px !important;

    font-size: 11px !important;

    opacity: 0.9 !important;

    display: flex !important;

    align-items: center !important;

    gap: 5px !important;
}


#sb-chatbot .sb-chat-status span {

    width: 7px !important;
    height: 7px !important;

    border-radius: 50% !important;

    background: #7CFF9A !important;
}


/* CLOSE */

#sb-chatbot .sb-close-chat {

    width: 34px !important;
    height: 34px !important;

    border: none !important;

    background: transparent !important;

    color: #FFFFFF !important;

    font-size: 28px !important;

    line-height: 1 !important;

    cursor: pointer !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;
}


/* MESSAGES */

#sb-chatbot .sb-chat-messages {

    flex: 1 !important;

    overflow-y: auto !important;

    padding: 18px !important;

    background: #F7F7F7 !important;
}


#sb-chatbot .sb-message {

    display: flex !important;

    margin-bottom: 14px !important;

    gap: 9px !important;
}


#sb-chatbot .sb-bot-message {

    justify-content: flex-start !important;
}


#sb-chatbot .sb-user-message {

    justify-content: flex-end !important;
}


#sb-chatbot .sb-avatar {

    width: 32px !important;
    height: 32px !important;

    min-width: 32px !important;

    border-radius: 50% !important;

    background: #FF5C02 !important;

    color: #FFFFFF !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    font-size: 10px !important;

    font-weight: 700 !important;
}


#sb-chatbot .sb-message-body {

    max-width: 78% !important;
}


#sb-chatbot .sb-bubble {

    padding: 12px 14px !important;

    border-radius: 14px !important;

    font-size: 14px !important;

    line-height: 1.55 !important;

    word-wrap: break-word !important;
}


#sb-chatbot .sb-bot-message .sb-bubble {

    background: #FFFFFF !important;

    color: #222222 !important;

    border:
        1px solid #E7E7E7 !important;

    border-top-left-radius: 5px !important;
}


#sb-chatbot .sb-user-message .sb-bubble {

    background: #FF5C02 !important;

    color: #FFFFFF !important;

    border-top-right-radius: 5px !important;
}


/* QUICK OPTIONS */

#sb-chatbot .sb-quick-options {

    display: flex !important;

    flex-wrap: wrap !important;

    gap: 7px !important;

    margin-top: 10px !important;
}


#sb-chatbot .sb-quick-options button {

    border:
        1px solid #FF5C02 !important;

    background: #FFFFFF !important;

    color: #FF5C02 !important;

    border-radius: 20px !important;

    padding:
        8px 11px !important;

    font-size: 11px !important;

    cursor: pointer !important;

    transition:
        all 0.2s ease !important;
}


#sb-chatbot .sb-quick-options button:hover {

    background: #FF5C02 !important;

    color: #FFFFFF !important;
}


/* TYPING */

#sb-chatbot .sb-typing {

    display: none !important;

    align-items: center !important;

    gap: 9px !important;

    padding:
        0 18px 10px !important;

    background: #F7F7F7 !important;
}


#sb-chatbot .sb-typing.show {

    display: flex !important;
}


#sb-chatbot .sb-typing-bubble {

    display: flex !important;

    gap: 4px !important;

    padding:
        11px 13px !important;

    background: #FFFFFF !important;

    border:
        1px solid #E7E7E7 !important;

    border-radius: 14px !important;
}


#sb-chatbot .sb-typing-bubble span {

    width: 6px !important;
    height: 6px !important;

    background: #999999 !important;

    border-radius: 50% !important;

    animation:
        sbTyping 1.2s infinite !important;
}


#sb-chatbot .sb-typing-bubble span:nth-child(2) {

    animation-delay: 0.15s !important;
}


#sb-chatbot .sb-typing-bubble span:nth-child(3) {

    animation-delay: 0.3s !important;
}


@keyframes sbTyping {

    0%,
    60%,
    100% {

        opacity: 0.3;

        transform: translateY(0);

    }

    30% {

        opacity: 1;

        transform: translateY(-3px);

    }

}


/* INPUT */

#sb-chatbot .sb-input-area {

    padding: 12px !important;

    background: #FFFFFF !important;

    border-top:
        1px solid #E7E7E7 !important;
}


#sb-chatbot #sb-chat-form {

    display: flex !important;

    align-items: center !important;

    gap: 8px !important;
}


#sb-chatbot #sb-chat-input {

    flex: 1 !important;

    width: 100% !important;

    height: 44px !important;

    border:
        1px solid #DDDDDD !important;

    border-radius: 12px !important;

    outline: none !important;

    padding:
        0 13px !important;

    font-size: 13px !important;

    color: #222222 !important;

    background: #FFFFFF !important;

    box-sizing: border-box !important;
}


#sb-chatbot #sb-chat-input:focus {

    border-color:
        #FF5C02 !important;
}


#sb-chatbot #sb-send-button {

    width: 44px !important;
    height: 44px !important;

    min-width: 44px !important;

    border: none !important;

    border-radius: 12px !important;

    background: #FF5C02 !important;

    color: #FFFFFF !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    cursor: pointer !important;
}


#sb-chatbot .sb-powered {

    text-align: center !important;

    margin-top: 7px !important;

    font-size: 9px !important;

    color: #999999 !important;
}


/* MOBILE */

@media (max-width: 600px) {

    #sb-chatbot {

        right: 15px !important;

        bottom: 15px !important;

    }


    #sb-chatbot .sb-chat-window {

        position: fixed !important;

        right: 10px !important;

        left: 10px !important;

        bottom: 85px !important;

        width: auto !important;

        height:
            calc(100vh - 110px) !important;

        max-height: 650px !important;

        border-radius: 16px !important;

    }

}