/* =========================================================
   CONTRASTES - ASISTENTE WEB
   ========================================================= */

.chat-launcher {

    position: fixed;

    right: 24px;

    bottom: 24px;

    z-index: 3000;

    width: 60px;

    height: 60px;

    border: 0;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #073c7a,
            #0a68b7
        );

    color: #ffffff;

    font-size: 26px;

    cursor: pointer;

    box-shadow:
        0 14px 35px
        rgba(0, 38, 80, .30);

}


.chat-launcher:hover {

    transform:
        translateY(-2px);

}


.chat-window {

    position: fixed;

    right: 24px;

    bottom: 96px;

    z-index: 3000;

    width:
        min(
            410px,
            calc(100vw - 30px)
        );

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

    display: none;

    grid-template-rows:
        auto
        1fr
        auto;

    overflow: hidden;

    background: #ffffff;

    border:
        1px solid
        #dbe7f0;

    border-radius: 22px;

    box-shadow:
        0 24px 65px
        rgba(5, 40, 80, .28);

}


.chat-window.open {

    display: grid;

}


.chat-header {

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 18px;

    padding:
        17px
        19px;

    background:
        linear-gradient(
            135deg,
            #073c7a,
            #0a68b7
        );

    color: #ffffff;

}


.chat-header strong {

    display: block;

    font-size: 16px;

}


.chat-header span {

    display: block;

    margin-top: 3px;

    color: #dbeeff;

    font-size: 12px;

}


.chat-close {

    width: 36px;

    height: 36px;

    flex:
        0
        0
        36px;

    border: 0;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .10);

    color: #ffffff;

    font-size: 23px;

    line-height: 1;

    cursor: pointer;

}


.chat-messages {

    overflow-y: auto;

    padding: 18px;

    background:
        linear-gradient(
            180deg,
            #f7fafc,
            #f2f7fa
        );

}


.chat-message {

    max-width: 92%;

    margin-bottom: 13px;

    padding:
        13px
        15px;

    border-radius: 15px;

    font-size: 14px;

    line-height: 1.55;

}


.chat-message p {

    margin:
        8px
        0;

}


.chat-message.bot {

    background: #ffffff;

    color: #40566c;

    border:
        1px solid
        #dbe7f0;

    box-shadow:
        0 6px 18px
        rgba(8, 42, 80, .05);

}


.chat-message.bot strong {

    color: #073c7a;

}


.chat-message.user {

    margin-left: auto;

    background: #0a5fb7;

    color: #ffffff;

}


.chat-options {

    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin-top: 12px;

}


.chat-options-secondary {

    margin-top: 16px;

    padding-top: 12px;

    border-top:
        1px solid
        #e3ebf1;

}


.chat-options button {

    padding:
        7px
        10px;

    border:
        1px solid
        #c9dbe8;

    border-radius: 999px;

    background: #ffffff;

    color: #073c7a;

    font-size: 12px;

    font-weight: 800;

    cursor: pointer;

}


.chat-options button:hover {

    background: #073c7a;

    border-color: #073c7a;

    color: #ffffff;

}


.chat-links {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 7px;

    margin-top: 12px;

}


.chat-links a {

    color: #0a5fb7;

    text-decoration: none;

    font-weight: 900;

}


.chat-links a:hover {

    text-decoration: underline;

}


.chat-list {

    margin:
        8px
        0
        10px;

    padding-left: 20px;

}


.chat-list li {

    margin-bottom: 5px;

}


.chat-form {

    display: grid;

    grid-template-columns:
        1fr
        auto;

    gap: 8px;

    padding: 12px;

    background: #ffffff;

    border-top:
        1px solid
        #dbe7f0;

}


.chat-form input {

    min-width: 0;

    padding:
        11px
        12px;

    border:
        1px solid
        #cbdce8;

    border-radius: 10px;

    color: #10243a;

    font: inherit;

}


.chat-form input:focus {

    outline:
        3px solid
        rgba(19, 168, 216, .12);

    border-color: #13a8d8;

}


.chat-form button {

    border: 0;

    border-radius: 10px;

    padding:
        0
        15px;

    background: #84c900;

    color: #073c7a;

    font-weight: 900;

    cursor: pointer;

}


@media (max-width: 560px) {

    .chat-launcher {

        right: 14px;

        bottom: 14px;

    }


    .chat-window {

        right: 10px;

        bottom: 84px;

        width:
            calc(100vw - 20px);

        height:
            min(
                620px,
                calc(100vh - 105px)
            );

    }

}