/* ===================================

   FLOATING CHAT BUTTON

=================================== */

#adc-chat-toggle {

    position: fixed;

    right: 20px;

    bottom: 20px;

    width: 60px;

    height: 60px;

    background-color: #0c2d48;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    z-index: 99998;

    transition: transform 0.2s ease;

    animation: glow 4s infinite;
    
}

#adc-chat-toggle.light-on-dark {
    
    background-color: #ffffff;

}


#adc-chat-toggle.dark-on-light {
    
    background-color: #0c2d48;

}

#adc-chat-toggle::after,
#adc-chat-toggle::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid #0c2d48;
    border-radius: 50%;
    animation: ping 1.5s infinite;
}

#adc-chat-toggle.light-on-dark::after,
#adc-chat-toggle.light-on-dark::before {
    border: 2px solid #fff;
}



#adc-chat-toggle::before {
    animation-delay: 0.3s;
}



#adc-chat-toggle:hover {

    transform: scale(1.05);

}



#adc-chat-toggle img {

    width: 36px;

    height: 36px;

    border-radius: 50%;

}



/* ===================================

   CHATBOT WINDOW

=================================== */

#adc-chatbot {

    position: fixed;

    bottom: 90px;

    right: 20px;

    width: 400px;

    max-width: calc(100vw - 40px);

    max-height: 600px;

    border-radius: 24px;

    box-shadow: 0 8px 32px rgba(0,0,0,0.12);

    z-index: 99999;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    background: #fff;

}



.adc-hidden {

    display: none !important;

}



/* ===================================

   HEADER

=================================== */

.adc-header {

    background: linear-gradient(135deg, #2D66B1, #11162B);

    padding: 18px 20px;

    color: #fff;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.adc-header-left {

    display: flex;

    gap: 12px;

    align-items: center;

}



.adc-avatar {

    width: 44px;

    height: 44px;

    border-radius: 50%;

}



.adc-title {

    font-weight: 700;

    font-size: 16px;

    margin-bottom: 2px;

    letter-spacing: 0.2px;

}



.adc-status {

    font-size: 13px;

    opacity: 0.95;

    font-weight: 400;

}



.adc-header-actions {

    cursor: pointer;

    font-size: 22px;

    color: #fff;

    width: 32px;

    height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 8px;

    transition: background 0.2s ease;

    line-height: 1;

}



.adc-header-actions:hover {

    background: rgba(255,255,255,0.15);

}



/* ===================================

   MESSAGES CONTAINER

=================================== */

#adc-messages {

    padding: 24px 20px;

    overflow-y: auto;

    height: 400px;

    background: #fff;

    flex: 1;

}



#adc-messages::-webkit-scrollbar {

    width: 6px;

}



#adc-messages::-webkit-scrollbar-track {

    background: transparent;

}



#adc-messages::-webkit-scrollbar-thumb {

    background: #d1d5db;

    border-radius: 3px;

}



/* ===================================

   MESSAGE BUBBLES

=================================== */

.adc-message {

    display: flex;

    gap: 12px;

    margin-bottom: 20px;

    align-items: flex-start;

}



.adc-message img {

    width: 36px;

    height: 36px;

    border-radius: 50%;

    flex-shrink: 0;

}



.adc-message.bot .bubble {

    background: linear-gradient(135deg, #2D66B1, #11162B);

    color: #ffffff;

    padding: 14px 18px;

    border-radius: 18px 18px 18px 4px;

    max-width: 280px;

    line-height: 1.6;

    font-size: 14.5px;

    font-weight: 400;

}



.adc-message.user {

    flex-direction: row-reverse;

}



.adc-message.user .bubble {

    background: #f0f4f8;

    color: #1a202c;

    padding: 14px 18px;

    border-radius: 18px 18px 4px 18px;

    max-width: 280px;

    line-height: 1.6;

    font-size: 14.5px;

    font-weight: 400;

}



/* Typing indicator */

.adc-message.typing .bubble {

    padding: 14px 22px;

    font-size: 24px;

    letter-spacing: 3px;

}



/* ===================================

   QUICK ACTIONS BUTTONS

=================================== */

.adc-quick-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 16px;

    padding-left: 48px;

}



.adc-quick-actions button {

    background: #fff;

    border: 1.5px solid #3b82f6;

    color: #3b82f6;

    padding: 5px 15px;

    border-radius: 24px;

    font-size: 14px;

    cursor: pointer;

    transition: all 0.2s ease;

    font-weight: 500;

    white-space: nowrap;

}



.adc-quick-actions button:hover {

    background: #3b82f6;

    color: #fff;

    border-color: #3b82f6;

    transform: translateY(-1px);

    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);

}



/* ===================================

   INPUT AREA

=================================== */

.adc-input {

    padding: 20px;

    border-top: 1px solid #e5e7eb;

    display: flex;

    gap: 12px;

    background: #fff;

    align-items: center;

}



.adc-input input {

    flex: 1;

    border-radius: 28px;

    border: 1.5px solid #d1d5db;

    padding: 13px 20px;

    font-size: 14px;

    outline: none;

    transition: all 0.2s ease;

    background: #fff;

    color: #374151;

}



.adc-input input:focus {

    border-color: #3b82f6;

    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);

}



.adc-input input::placeholder {

    color: #9ca3af;

    font-weight: 400;

}



.adc-input button {

    width: 48px;

    height: 48px;

    border-radius: 50%;

    background: #3b82f6;

    color: #fff;

    border: none;

    font-size: 20px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.2s ease;

    flex-shrink: 0;

    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);

}



.adc-input button:hover {

    background: #2563eb;

    transform: scale(1.05);

    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);

}



.adc-input button:active {

    transform: scale(0.95);

}

.adc-product-link {
    color: #14c9ff;
    text-decoration: none;
    transition: all 0.3s ease;
}
.adc-product-link:hover {
    text-decoration: underline;
    color: #14c9ff;
}

/* ===================================

   RESPONSIVE

=================================== */

@media (max-width: 480px) {

    #adc-chatbot {

        width: calc(100vw - 40px);

        bottom: 90px;

        right: 20px;

    }

    

    .adc-message.bot .bubble,

    .adc-message.user .bubble {

        max-width: calc(100vw - 140px);

    }

}



@keyframes glow{
    0%, 100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
        box-shadow: 0 0px 12px #004074;
    }

    25% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
        box-shadow: 0 0px 24px #004074;
    }
    50% {
        border-radius: 50% 60% 30% 60% / 30% 60% 70% 40%;
        box-shadow: 0 0px 36px #004074;
    }
    75% {
        border-radius: 60% 40% 60% 30% / 70% 30% 50% 60%;
        box-shadow: 0 0px 24px #004074;
    }
}

@keyframes ping{
    75%, 100% {
        transform: scale(1.5);
        opacity: 0;
    }
}