/* Styling */

[type="text"] {
    background-color:rgb(253, 247, 203);
    width: 100%;
}

.inputs, .history, [type="text"], [type="submit"] {
    font-size: 8px;
    font-family: monospace;
}

.history {
    background-color: rgb(253, 247, 203);
}

/* Disposition */

.chat {
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

.chat > * {
    width: 90%;
}

.inputs, .history {
    display: flex;
} 

.inputs {
    flex-direction: row;
}


.history {
    max-height: 60%;
    flex-shrink: 1;
    white-space: wrap;
}

.history > div {
    flex-shrink: 2;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column-reverse;
    flex: 1;
    margin: 1em;
    scrollbar-width: thin;
}

.comment {
    display: flex;
}

.user {
    font-weight: bold;
    margin-right: 0.5em;
}

.message {
    word-wrap: break-word;
    text-align: justify;
}