.chat {
    background-color: var(--c-boxes);
    color: var(--c-text);
    padding: 1em;
    height: 28em;
    border-radius: 1em;
    width: 50%;
}

.chat .title-bar {
    font-size: 2em;
}

.chat .messages {
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    max-height: 19.5em;
}

.chat .messages div {
    display: flex;
    flex-direction: column;
}

.chat .messages div sub {
    font-size: 0.8em;
    color: rgb(176, 176, 176);
    margin-top: 0.5em;
}

.chat .messages div p {
    padding: 0.5em;
    width: 95%;
    margin-bottom: 0.5em;
    margin-left: 0.5em;
    margin-right: 0.5em;
    color: black;
    background-color: rgb(156, 156, 156);
}

.messages::-webkit-scrollbar {
    background-color: var(--c-boxes);
    width: 0.2em;
}

/* Track */
.messages::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px var(--c-lines);
    border-radius: 0.2em;
}

/* Handle */
.messages::-webkit-scrollbar-thumb {
    background: var(--c-text);
    border-radius: 0.2em;
}

/* Handle on hover */
.messages::-webkit-scrollbar-thumb:hover {
    background: var(--c-background-light);
}

.chat .send-box {
    margin-top: 1em;
    display: flex;
    flex-direction: row;
}

.chat .send-box button {
    border: none;
    background-color: transparent;
    color: white;
    cursor: pointer;
    font-size: 1.5em;
    margin: 0 0.5em;
}
.chat .send-box input{
    padding: 0.5em;
    width: -webkit-fill-available;
}

@media only screen and (max-width: 990px) {
    .chat {
        margin: 0;
        width: auto;
    }
}