/*----------------*/
/* improved for chat text box */
textarea {
    border: 1px dashed #888;
    border-radius: 5px;
    width: 100%;
    overflow: auto;
    background: #f7f7f7;
    height: 37px;
}

/* improved for speech bubbles */
.received, .sent {
    position: relative;
    font-family: arial;
    font-size: 1.1em;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}

.received:after, .sent:after {
    content: '';
    border: 20px solid transparent;
    position: absolute;
    margin-top: -30px;
}

.sent {
    background: #429ac1;
    color: #fff;
    margin-left: 22%;
    margin-right: 7%;
    top: 50%;
    text-align: left;
}

.received {
    background: #9ddfa0;
    color: #000;
    margin-left: 10%;
    margin-right: 15%;
}

.sent:after {
    border-left-color: #429ac1;
    border-right: 0;
    right: -20px;
}

.received:after {
    border-right-color: #9ddfa0;
    border-left: 0;
    left: -20px;
}

/* div within bubble for name */
.user {
    font-size: 0.8em;
    font-weight: bold;
    color: #000;
}

.msg {
    width: 120px; /* Definisci una larghezza fissa per lo spazio */
    word-wrap: break-word; /* Permette di andare a capo dentro il contenitore */
    hyphens: auto; /* Aggiunge trattini per separare le parole, se possibile */
}



.input-container {
    display: flex;
    align-items: center; /* Allinea gli elementi verticalmente al centro */
    gap: 10px; /* Spaziatura tra gli elementi */
}

.textarea {
    resize: none; /* Impedisce il ridimensionamento del textarea */
    flex-grow: 1; /* Permette al textarea di occupare tutto lo spazio disponibile */   
}

.button {
    flex-shrink: 0; /* Impedisce al pulsante di ridursi troppo */
}