/* =========================================================
   CODELAB CHATBOT
   FASE 10.1
========================================================= */

.codelab-chatbot {
    position: relative;

    z-index: 9999;
}


/* =========================================================
   LAUNCHER
========================================================= */

.chatbot-launcher {
    position: fixed;

    right: 24px;
    bottom: 24px;

    min-width: 58px;
    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding:
        0 20px;

    border: 0;

    border-radius: 999px;

    background:
        #12343b;

    color:
        #ffffff;

    box-shadow:
        0 16px 45px
        rgba(
            15,
            45,
            52,
            0.22
        );

    cursor: pointer;

    transition:
        transform 180ms ease,
        box-shadow 180ms ease;
}


.chatbot-launcher:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 20px 55px
        rgba(
            15,
            45,
            52,
            0.28
        );
}


.chatbot-launcher-icon {
    width: 28px;
    height: 28px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.4
        );

    border-radius: 50%;

    font-size: 1.1rem;

    font-weight: 300;
}


.chatbot-launcher-label {
    font-size: 0.75rem;

    font-weight: 600;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


/* =========================================================
   WINDOW
========================================================= */

.chatbot-window {
    position: fixed;

    right: 24px;
    bottom: 94px;

    width:
        min(
            390px,
            calc(100vw - 32px)
        );

    height:
        min(
            590px,
            calc(100vh - 130px)
        );

    display: flex;

    flex-direction: column;

    overflow: hidden;

    border:
        1px solid
        #dce6e6;

    border-radius:
        20px;

    background:
        #ffffff;

    box-shadow:
        0 30px 80px
        rgba(
            11,
            36,
            42,
            0.19
        );

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(15px)
        scale(0.98);

    transform-origin:
        bottom right;

    transition:
        opacity 180ms ease,
        visibility 180ms ease,
        transform 180ms ease;
}


.chatbot-window.is-open {
    opacity: 1;

    visibility: visible;

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


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

.chatbot-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding:
        20px;

    background:
        #12343b;

    color:
        #ffffff;
}


.chatbot-brand {
    display: flex;

    align-items: center;

    gap: 12px;
}


.chatbot-brand-mark {
    width: 38px;
    height: 38px;

    display: grid;

    place-items: center;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #1e6670,
            #2e9677
        );

    font-weight: 700;
}


.chatbot-brand span {
    display: block;

    margin-bottom: 3px;

    color:
        #7bd3c5;

    font-size:
        0.57rem;

    font-weight: 700;

    letter-spacing:
        0.14em;
}


.chatbot-brand strong {
    display: block;

    font-size:
        0.85rem;

    font-weight: 500;
}


.chatbot-close {
    width: 35px;
    height: 35px;

    border: 0;

    background:
        transparent;

    color:
        rgba(
            255,
            255,
            255,
            0.72
        );

    font-size:
        1.5rem;

    cursor: pointer;
}


/* =========================================================
   STATUS
========================================================= */

.chatbot-status {
    display: flex;

    align-items: center;

    gap: 8px;

    padding:
        10px 20px;

    border-bottom:
        1px solid
        #e5ecec;

    background:
        #f7fafa;

    color:
        #64787c;

    font-size:
        0.65rem;
}


.chatbot-status-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        #38a87b;
}


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

.chatbot-messages {
    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 14px;

    padding:
        22px;

    overflow-y: auto;

    overscroll-behavior:
        contain;
}


.chat-message {
    max-width: 86%;

    display: flex;

    flex-direction: column;
}


.chat-message-bot {
    align-self:
        flex-start;
}


.chat-message-user {
    align-self:
        flex-end;
}


.chat-message-author {
    margin-bottom: 6px;

    color:
        #218f83;

    font-size:
        0.55rem;

    font-weight: 700;

    letter-spacing:
        0.1em;
}


.chat-message-bubble {
    padding:
        12px 14px;

    border-radius:
        14px;

    font-size:
        0.81rem;

    line-height:
        1.55;
}


.chat-message-bot
.chat-message-bubble {
    border:
        1px solid
        #dfe8e8;

    border-bottom-left-radius:
        4px;

    background:
        #f6f9f9;

    color:
        #27464c;
}


.chat-message-user
.chat-message-bubble {
    border-bottom-right-radius:
        4px;

    background:
        #12343b;

    color:
        #ffffff;
}


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

.chat-message-link {
    display: inline-flex;

    margin-top: 10px;

    color:
        #137d72;

    font-size:
        0.72rem;

    font-weight: 700;
}


/* =========================================================
   QUICK ACTIONS
========================================================= */

.chatbot-quick-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin-top: 3px;
}


.chatbot-quick-actions button {
    padding:
        8px 11px;

    border:
        1px solid
        #d6e2e2;

    border-radius:
        999px;

    background:
        #ffffff;

    color:
        #34565c;

    font-size:
        0.66rem;

    cursor: pointer;

    transition:
        border-color 150ms ease,
        background 150ms ease;
}


.chatbot-quick-actions button:hover {
    border-color:
        #258478;

    background:
        #f2f8f7;
}


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

.chatbot-typing {
    align-self:
        flex-start;

    margin:
        0 22px 10px;

    padding:
        10px 13px;

    border-radius:
        14px;

    background:
        #f2f6f6;
}


.chatbot-typing span {
    width: 5px;
    height: 5px;

    display: inline-block;

    margin:
        0 2px;

    border-radius: 50%;

    background:
        #789094;

    animation:
        chatbotTyping
        1s
        infinite;
}


.chatbot-typing span:nth-child(2) {
    animation-delay:
        0.15s;
}


.chatbot-typing span:nth-child(3) {
    animation-delay:
        0.3s;
}


@keyframes chatbotTyping {

    0%,
    60%,
    100% {
        transform:
            translateY(0);

        opacity:
            0.45;
    }

    30% {
        transform:
            translateY(-4px);

        opacity:
            1;
    }

}


/* =========================================================
   FORM
========================================================= */

.chatbot-form {
    display: grid;

    grid-template-columns:
        1fr 46px;

    gap: 8px;

    padding:
        14px;

    border-top:
        1px solid
        #e0e8e8;

    background:
        #ffffff;
}


.chatbot-form input {
    width: 100%;

    min-width: 0;

    height: 46px;

    padding:
        0 14px;

    border:
        1px solid
        #d9e3e3;

    border-radius:
        10px;

    outline: none;

    background:
        #f9fbfb;

    color:
        #183b42;

    font: inherit;

    font-size:
        0.78rem;
}


.chatbot-form input:focus {
    border-color:
        #278d80;

    background:
        #ffffff;
}


.chatbot-form button {
    width: 46px;
    height: 46px;

    border: 0;

    border-radius:
        10px;

    background:
        #12343b;

    color:
        #ffffff;

    font-size:
        1.15rem;

    cursor: pointer;
}


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

.chatbot-footer {
    padding:
        0 15px 13px;

    background:
        #ffffff;

    color:
        #91a0a2;

    text-align: center;

    font-size:
        0.54rem;
}


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

.chat-message-error
.chat-message-bubble {
    border-color:
        #edd2d2;

    background:
        #fff5f5;

    color:
        #924e4e;
}


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

@media (max-width: 600px) {

    .chatbot-launcher {
        right: 16px;
        bottom: 16px;

        min-width: 54px;
        height: 54px;

        padding:
            0 16px;
    }


    .chatbot-window {
        right: 10px;
        left: 10px;
        bottom: 80px;

        width: auto;

        height:
            min(
                680px,
                calc(100dvh - 100px)
            );

        border-radius:
            18px;

        transform-origin:
            bottom center;
    }


    .chatbot-messages {
        padding:
            18px;
    }

}


@media (max-width: 420px) {

    .chatbot-window {
        top: 10px;
        bottom: 10px;

        height: auto;
    }


    .chatbot-launcher-label {
        display: none;
    }


    .chatbot-launcher {
        width: 56px;

        padding: 0;
    }

}

/* =========================================================
   FASE 10.4 — COMMERCIAL FLOW
========================================================= */

.chat-message-text {
    white-space: pre-line;
}


.chatbot-dynamic-actions {
    max-width: 92%;

    margin-bottom: 5px;
}


.chatbot-dynamic-actions button:disabled {
    opacity: 0.45;

    cursor: default;

    pointer-events: none;
}