#chat {
    background: #e5e5e5;
    display: none;
    position: fixed;
    z-index: 2;
    right: 16px;
    bottom: 60px;
    height: calc(100vh - 48px - 48px);
    width: 400px;
}

@media (max-width: 429px) {
    #chat {
        width: 340px;
    }
}

.messageOut {
    border-radius: 5px;
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 8px;
    padding-bottom: 8px;
    background: white;
    color: #5b5b5b;
    font-size: small;
}

.messageIn {
    border-radius: 5px;
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 8px;
    padding-bottom: 8px;
    background: #260a43;
    color: #c4cded;
    font-size: small;
}

.talk-bubble {
    /* background: red; */
    /* margin: 40px; */
    /* display: inline-block; */
    position: relative;
    height: auto;
}

.tri-right.btm-right:after {
    /* background: red; */
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: auto;
    right: 0px;
    bottom: -10px;
    border: 12px solid;
    border-color: rgb(255, 255, 255) rgb(255, 255, 255) transparent transparent;
}

.tri-left.btm-left:after {
    /* background: red; */
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    right: auto;
    left: 0px;
    bottom: -14px;
    border: 12px solid;
    border-color: #232c4b transparent transparent #232c4b;
}

#chat-body {
    height: 100%;
    overflow-y: auto;
}

.messageIn {
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 8px;
    padding-bottom: 8px;
    background-color: #260a43;
    /* Color de fondo */
    color: white;
    /* Texto en blanco */
    padding: 10px;
    border-radius: 15px;
    word-wrap: break-word;
}

/* Burbuja del chatbot */
.talk-bubble.tri-left.btm-left {
    position: relative;
    background-color: #260a43;
    color: white;
    padding: 5px;
    border-radius: 6px;
    max-width: 100%;
    word-wrap: break-word;
}

/* Triángulo de la burbuja del chatbot */
.talk-bubble.tri-left.btm-left::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 0px;
    /* Ajusta la posición del triángulo */
    width: 11px;
    height: 12px;
    border-style: solid;
    border-width: 12px 12px 0 0;
    /* Ajusta el tamaño del triángulo */
    border-color: #260a43 transparent transparent transparent;
}