mami/src/mami.css/message.css

.message {
    display: flex;
    margin: 0 4px
}

.message:hover .message__time {
    opacity: 1
}

.message__meta {
    display: inline-flex
}

.message__container {
    display: inline-flex;
    margin-left: 4px
}

.message__avatar {
    background: no-repeat center center / cover transparent;
    background-color: var(--theme-colour-message-avatar-background, #fff);
    height: 40px;
    width: 40px;
    border-radius: 5%;
    flex-shrink: 0;
    flex-grow: 0;
    margin: 0 4px;
    display: none;
    justify-content: center;
    align-items: center;
    font-size: 2em;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

.message__avatar--disabled {
    background: transparent !important
}

.message__avatar--disabled:before {
    content: "\f007"
}

.message__user {
    font-weight: 700;
    display: none
}

.message__time {
    font-size: .8em;
    width: 40px;
    margin-right: 8px;
    text-align: center;
    opacity: 0;
    hyphens: auto;
    transition: opacity .2s;
    color: var(--theme-colour-message-time-colour, #000);
}

.message__text {
    white-space: pre-wrap;
    word-wrap: normal;
    word-break: break-word;
    font-size: 1.2em
}

.message:last-child {
    margin-bottom: 8px
}

.message--first {
    margin-top: 8px
}

.message--first:not(:first-child) {
    border-top: 1px solid var(--theme-colour-message-separator, #000);
    padding-top: 8px;
}

.message--first .message__time {
    width: auto;
    margin: 0;
    opacity: 1;
}

.message--first .message__time:before {
    content: "\A0@\A0"
}

.message--first .message__container {
    display: block
}

.message--first .message__user,
.message--first .message__avatar {
    display: inline-flex
}

.message--first .message__user {
    white-space: pre-wrap;
    word-wrap: normal;
    word-break: break-word;
}

.message--user--1 .message__avatar {
    background: transparent !important
}

.message--user--1 .message__avatar:before {
    content: "\f069"
}

.message--user--1 .message__user {
    display: none
}

.message--user--1 .message__time:before {
    content: "" !important
}

.chat--compact .message {
    padding: 0 4px !important;
    margin: 0;
    border: 0 solid transparent !important
}

.chat--compact .message:nth-child(even) {
    background-color: var(--theme-colour-message-compact-alternate-background, #ddd);
}

.chat--compact .message__container {
    display: inline-flex !important;
    margin: 0
}

.chat--compact .message__meta {
    display: inline-flex;
    flex-shrink: 0
}

.chat--compact .message__avatar {
    display: none !important
}

.chat--compact .message__user {
    order: 2;
    display: block
}

.chat--compact .message__user:after {
    content: ":\A0";
    font-weight: 500;
    color: var(--theme-colour-main-colour, #000);
}

.chat--compact .message--highlight {
    background-color: var(--theme-colour-message-compact-highlight, #aaa) !important;
}

.chat--compact .message__time {
    order: 1;
    width: auto;
    margin: 0;
    opacity: 1
}

.chat--compact .message__time:before {
    content: "" !important
}

.chat--compact .message__time:after {
    content: "\A0"
}

.chat--compact .message__text {
    font-size: 1em
}

.chat--compact .message:last-child {
    margin-bottom: 0
}

.chat--compact .message--user--1 .message__user {
    display: none
}

.chat--compact .message--user--1 .message__text:before {
    content: "\A0*\A0";
    font-style: normal
}

.prevent-overflow .message {
    overflow: hidden;
}

.message-tiny .message__avatar {
    height: 20px;
    width: 20px;
}
.message-tiny.message--first:not(:first-child) {
    padding-top: 4px;
}
.message-tiny.message--first {
    margin-top: 4px;
}

.chat--compact .message-tiny .message-tiny-text {
    order: 3;
}
.chat--compact .message-tiny .message__user:after {
    content: "";
}
.chat--compact .message-tiny .message__user:after {
    content: "";
}
.chat--compact .message-tiny.message--first {
    margin-top: 0;
}

.chat:not(.chat--compact) .message-tiny-fix {
    margin-top: 8px !important;
}
.chat:not(.chat--compact) .message-big-fix {
    margin-top: 4px !important;
}

.avatar-filter-greyscale {
    filter: grayscale(100%);
}
.avatar-filter-invert {
    filter: invert(100%);
}