.chat-div {
        position: fixed;
        width: 30%;

        height: 80vh;
        right: 20px;
        bottom: 10%;
        border-radius: 25px;
        overflow: clip;
        z-index: 99999999;
    }

    .chat-div.collapsed {
        height: 100px;
        width: auto;
        overflow: clip;
        border: solid 2px white;
    }

    .chat-div.collapsed .chat-container {
        display: none;
    }

    .chat-div.collapsed .chat-title {
        display: none;
    }

    .chat-div.collapsed #toggle-chat {
        transform: rotate(180deg);
    }

    .min-button i {
        transition: transform .2s ease;
    }

    .chat-header {
        width: 100%;
        height: 100px;
        background: linear-gradient(145deg, #d22342, #b01e38);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        gap: 5%;

    }

    .send-button {
        background: linear-gradient(145deg, #d22342, #b01e38);
        border-radius: 9999px;
        color: white;
        border: none;
        aspect-ratio: 1;
        width: 36px;
        height: 36px;
        box-shadow: 2px 2px 4px 0 rgb(167 28 53 / 0.3);
    }

    .send-button:hover {
        box-shadow: inset 2px 2px 4px 0 rgb(110 18 34 / 0.7);
    }

    .send-button-icon {
        height: 18px;
        width: 18px;
    }

    .input-box {
        width: 100%;
        border: none;
        border: none;
        overflow: auto;
        outline: none;
        margin-left: 6px;

        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        color: #686868;

        resize: none;
        background: transparent;
        scrollbar-width: thin;
        scrollbar-color: #afada9;
    }

    .chat-photo {
        aspect-ratio: 1;
        width: 50px;
        background-color: white;
        background-image: url('../images/logo_ai.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 100%;

    }

    .chat-title {
        color: white;
    }

    .chat-container {
        background-color: white;
        height: calc(100% - 100px);
        display: flex;
        flex-direction: column;
        justify-content: end;
    }

    .chat-area {
        padding: 10px;
        box-sizing: border-box;
        color: #fff;
        background: white;
        box-shadow: 0 11px 22px 0 rgb(0 0 0 / 0.1);
        border: solid 1px rgba(20, 20, 20, 0.2);
        border-radius: 25px;
        margin: 10px;
        bottom: 0;
    }



    .message-system {
        align-items: center;
        max-width: 40vw;
        margin-bottom: 1rem;
        position: relative;
        padding: 8px;
        padding-right: 15px;
        padding-left: 15px;
        box-sizing: border-box;
        color: #373737;
        background: #ebe9e6;
        background-clip: padding-box;
        /* !importanté */
        border: solid 2px transparent;
        /* !importanté */
        border-radius: 1em;
        word-break: break-word;
        /* quebra palavras muito longas */
        overflow-wrap: anywhere;
        /* força quebra mesmo sem espaços */
        white-space: normal;
        /* permite múltiplas linhas */
    }

    .message-system::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        margin: -2px;
        /* !importanté */
        border-radius: inherit;
        /* !importanté */
        background: linear-gradient(-45deg, #595959, transparent);
    }

    .message-error {
        display: flex;
        align-items: center;
        max-width: 40vw;
        margin-bottom: 1rem;
        position: relative;
        padding: 8px;
        padding-right: 15px;
        padding-left: 15px;
        box-sizing: border-box;
        color: #373737;
        background: #f7c2c2;
        background-clip: padding-box;
        /* !importanté */
        border: solid 2px transparent;
        /* !importanté */
        border-radius: 1em;
        word-break: break-word;
        /* quebra palavras muito longas */
        overflow-wrap: anywhere;
        /* força quebra mesmo sem espaços */
        white-space: normal;
        /* permite múltiplas linhas */
    }

    .message-error::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        margin: -2px;
        /* !importanté */
        border-radius: inherit;
        /* !importanté */
        background: linear-gradient(-45deg, #860000, #c20909);
    }

    .message-box {
        width: 40vw;
        scrollbar-width: thin;
    }

    .message-user {
        display: flex;
        margin-bottom: 1rem;
        align-items: center;
        max-width: 40vw;
        position: relative;
        padding: 8px;
        padding-right: 15px;
        padding-left: 15px;
        box-sizing: border-box;
        color: #ffffff;
        background: #676664;
        background-clip: padding-box;
        /* !importanté */
        border: solid 2px transparent;
        /* !importanté */
        border-radius: 1em;
        word-break: break-word;
        /* quebra palavras muito longas */
        overflow-wrap: anywhere;
        /* força quebra mesmo sem espaços */
        white-space: normal;
        /* permite múltiplas linhas */
    }

    .message-user::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        margin: -2px;
        /* !importanté */
        border-radius: inherit;
        /* !importanté */
        background: linear-gradient(45deg, #000000, transparent);
    }

    .answer-box {
        overflow-y: scroll
    }

    .min-button {
        background: transparent;
        border: none;
        padding: 8px;
        border-radius: 8px;
    }

    .min-button:hover {
        background: #860000
    }

    textarea {
        min-height: 40px;
        line-height: 1.4;
        padding: 6px 10px;
        resize: none;
        /* opcional: desativa arrastar */
        box-sizing: border-box;
    }

    .chat-div.collapsed #toggle-chat-div {
        display: none !important;
    }

    .chat-div.collapsed:hover #toggle-chat-div {
        display: flex !important;
    }

    /*.floating {
        filter: drop-shadow(0 0 0.75px white);
    }*/




    @media (max-width: 768px) {
        .chat-div {
            height: 70vh;
            width: 100%;
            right: 0px;
            bottom: 00px;
            border-radius: 0 0 0 0;
        }

        .message-system,
        .message-user {
            max-width: fit-content;
        }

        .chat-div.collapsed {
            border-radius: 20px;
            bottom: 10%;
        }

        .chat-div.collapsed #toggle-chat-div {
            display: block !important;
        }

        .chat-header {
            border-top-left-radius: 0px;
            border-top-right-radius: 0px;
        }
    }