* {
    box-sizing: border-box;
}


/* =========================================================
   CHATBOT BUTTON
========================================================= */

.chatbot-launcher {

    position: fixed;

    right: 25px;
    bottom: 25px;

    width: 60px;
    height: 60px;

    border: none;

    border-radius: 50%;

    background: #1d4ed8;

    color: #ffffff;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 26px;

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

    z-index: 999999;

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


.chatbot-launcher:hover {

    transform: scale(1.06);

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


/* =========================================================
   CHATBOT CONTAINER
========================================================= */

.chatbot-container {

    position: fixed;

    right: 25px;
    bottom: 95px;

    width: 380px;

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

    height: 580px;

    max-height:
        calc(100vh - 120px);

    background:
        #ffffff;

    border-radius:
        14px;

    box-shadow:
        0 15px 50px rgba(0, 0, 0, 0.20);

    overflow:
        hidden;

    display:
        none;

    flex-direction:
        column;

    z-index:
        999998;

    border:
        1px solid #e5e7eb;
}


/*
 * Open state
 */

.chatbot-container.active {

    display:
        flex;
}


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

.chatbot-header {

    min-height:
        70px;

    padding:
        12px 15px;

    background:
        #1d4ed8;

    color:
        #ffffff;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;
}


.chatbot-header-left {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    min-width:
        0;
}


/* =========================================================
   BOT AVATAR
========================================================= */

.chatbot-avatar {

    width:
        42px;

    height:
        42px;

    min-width:
        42px;

    border-radius:
        50%;

    background:
        #ffffff;

    color:
        #1d4ed8;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        21px;

    font-weight:
        600;
}


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

.chatbot-header-info {

    min-width:
        0;
}


.chatbot-title {

    font-size:
        16px;

    font-weight:
        700;

    line-height:
        1.2;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;
}


.chatbot-status {

    margin-top:
        4px;

    font-size:
        12px;

    opacity:
        0.90;

    display:
        flex;

    align-items:
        center;

    gap:
        5px;
}


.chatbot-status-dot {

    width:
        7px;

    height:
        7px;

    background:
        #22c55e;

    border-radius:
        50%;
}


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

.chatbot-header-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        4px;
}


.chatbot-header-button {

    width:
        34px;

    height:
        34px;

    border:
        none;

    background:
        transparent;

    color:
        #ffffff;

    cursor:
        pointer;

    border-radius:
        6px;

    font-size:
        17px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


.chatbot-header-button:hover {

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


/* =========================================================
   CHAT MESSAGES AREA
========================================================= */

.chatbot-messages {

    flex:
        1;

    overflow-y:
        auto;

    padding:
        18px 15px;

    background:
        #f8fafc;

    scroll-behavior:
        smooth;
}


/*
 * Scrollbar
 */

.chatbot-messages::-webkit-scrollbar {

    width:
        6px;
}


.chatbot-messages::-webkit-scrollbar-track {

    background:
        transparent;
}


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

    background:
        #cbd5e1;

    border-radius:
        10px;
}


/* =========================================================
   MESSAGE ROW
========================================================= */

.chatbot-message {

    display:
        flex;

    margin-bottom:
        14px;
}


.chatbot-message.user {

    justify-content:
        flex-end;
}


.chatbot-message.bot {

    justify-content:
        flex-start;
}


/* =========================================================
   MESSAGE BUBBLE
========================================================= */

.chatbot-bubble {

    max-width:
        82%;

    padding:
        11px 13px;

    border-radius:
        12px;

    font-size:
        14px;

    line-height:
        1.55;

    word-wrap:
        break-word;

    overflow-wrap:
        anywhere;
}


.chatbot-message.bot
.chatbot-bubble {

    background:
        #ffffff;

    color:
        #1f2937;

    border:
        1px solid #e5e7eb;

    border-bottom-left-radius:
        4px;
}


.chatbot-message.user
.chatbot-bubble {

    background:
        #1d4ed8;

    color:
        #ffffff;

    border-bottom-right-radius:
        4px;
}


/* =========================================================
   MESSAGE LINKS
========================================================= */

.chatbot-bubble a {

    color:
        #1d4ed8;

    text-decoration:
        underline;

    font-weight:
        500;
}


.chatbot-message.user
.chatbot-bubble a {

    color:
        #ffffff;
}


/* =========================================================
   BOT MESSAGE MARKDOWN
========================================================= */

.chatbot-bubble p {

    margin:
        0 0 8px;
}


.chatbot-bubble p:last-child {

    margin-bottom:
        0;
}


.chatbot-bubble ul {

    margin:
        7px 0 7px 18px;

    padding:
        0;
}


.chatbot-bubble ol {

    margin:
        7px 0 7px 18px;

    padding:
        0;
}


.chatbot-bubble li {

    margin-bottom:
        4px;
}


.chatbot-bubble strong {

    font-weight:
        700;
}


/* =========================================================
   SOURCE LINKS
========================================================= */

.chatbot-sources {

    margin-top:
        10px;

    padding-top:
        8px;

    border-top:
        1px solid #e5e7eb;
}


.chatbot-sources-title {

    font-size:
        11px;

    font-weight:
        700;

    color:
        #64748b;

    margin-bottom:
        5px;
}


.chatbot-source-link {

    display:
        block;

    font-size:
        12px;

    margin-bottom:
        4px;

    color:
        #1d4ed8;

    text-decoration:
        none;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;
}


.chatbot-source-link:hover {

    text-decoration:
        underline;
}


/* =========================================================
   TYPING INDICATOR
========================================================= */

.chatbot-typing {

    display:
        none;

    margin-bottom:
        14px;
}


.chatbot-typing.active {

    display:
        flex;
}


.chatbot-typing-bubble {

    background:
        #ffffff;

    border:
        1px solid #e5e7eb;

    padding:
        11px 14px;

    border-radius:
        12px;

    border-bottom-left-radius:
        4px;
}


.chatbot-typing-dots {

    display:
        flex;

    align-items:
        center;

    gap:
        4px;
}


.chatbot-typing-dot {

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        #64748b;

    animation:
        chatbotTyping 1.2s infinite ease-in-out;
}


.chatbot-typing-dot:nth-child(2) {

    animation-delay:
        0.15s;
}


.chatbot-typing-dot:nth-child(3) {

    animation-delay:
        0.30s;
}


@keyframes chatbotTyping {

    0%,
    60%,
    100% {

        transform:
            translateY(0);

        opacity:
            0.4;
    }

    30% {

        transform:
            translateY(-4px);

        opacity:
            1;
    }
}


/* =========================================================
   SUGGESTED QUESTIONS
========================================================= */

.chatbot-suggestions {

    display:
        flex;

    gap:
        7px;

    overflow-x:
        auto;

    padding:
        0 15px 10px;

    background:
        #f8fafc;
}


.chatbot-suggestions::-webkit-scrollbar {

    height:
        3px;
}


.chatbot-suggestion {

    flex:
        0 0 auto;

    padding:
        7px 10px;

    border:
        1px solid #cbd5e1;

    background:
        #ffffff;

    color:
        #334155;

    border-radius:
        20px;

    font-size:
        12px;

    cursor:
        pointer;

    white-space:
        nowrap;

    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}


.chatbot-suggestion:hover {

    background:
        #eff6ff;

    border-color:
        #93c5fd;
}


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

.chatbot-input-area {

    padding:
        10px 12px;

    background:
        #ffffff;

    border-top:
        1px solid #e5e7eb;
}


.chatbot-input-wrapper {

    display:
        flex;

    align-items:
        flex-end;

    gap:
        8px;

    border:
        1px solid #cbd5e1;

    border-radius:
        10px;

    padding:
        6px 7px 6px 10px;

    background:
        #ffffff;
}


.chatbot-input-wrapper:focus-within {

    border-color:
        #1d4ed8;

    box-shadow:
        0 0 0 2px rgba(29, 78, 216, 0.10);
}


/* =========================================================
   TEXT INPUT
========================================================= */

.chatbot-input {

    flex:
        1;

    border:
        none;

    outline:
        none;

    resize:
        none;

    background:
        transparent;

    font-family:
        inherit;

    font-size:
        14px;

    line-height:
        1.4;

    min-height:
        22px;

    max-height:
        100px;

    padding:
        4px 0;
}


.chatbot-input::placeholder {

    color:
        #94a3b8;
}


/* =========================================================
   SEND BUTTON
========================================================= */

.chatbot-send {

    width:
        38px;

    height:
        38px;

    min-width:
        38px;

    border:
        none;

    border-radius:
        8px;

    background:
        #1d4ed8;

    color:
        #ffffff;

    cursor:
        pointer;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        17px;
}


.chatbot-send:hover {

    background:
        #1e40af;
}


.chatbot-send:disabled {

    opacity:
        0.5;

    cursor:
        not-allowed;
}


/* =========================================================
   FOOTER
========================================================= */

.chatbot-footer {

    text-align:
        center;

    padding:
        5px 10px 8px;

    font-size:
        10px;

    color:
        #94a3b8;

    background:
        #ffffff;
}


/* =========================================================
   ERROR MESSAGE
========================================================= */

.chatbot-error {

    margin:
        0 0 14px;

    padding:
        10px 12px;

    border-radius:
        8px;

    background:
        #fef2f2;

    border:
        1px solid #fecaca;

    color:
        #b91c1c;

    font-size:
        13px;

    line-height:
        1.4;
}


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

@media (
    max-width: 600px
) {

    .chatbot-launcher {

        right:
            15px;

        bottom:
            15px;

        width:
            56px;

        height:
            56px;
    }


    .chatbot-container {

        right:
            10px;

        left:
            10px;

        bottom:
            80px;

        width:
            auto;

        max-width:
            none;

        height:
            calc(100vh - 100px);

        max-height:
            none;

        border-radius:
            12px;
    }


    .chatbot-bubble {

        max-width:
            88%;
    }


    .chatbot-header {

        min-height:
            64px;
    }
}


/* =========================================================
   VERY SMALL SCREENS
========================================================= */

@media (
    max-width: 380px
) {

    .chatbot-container {

        right:
            0;

        left:
            0;

        bottom:
            0;

        height:
            100vh;

        border-radius:
            0;
    }


    .chatbot-launcher {

        right:
            12px;

        bottom:
            12px;
    }
}