.message-mention-wrapper {
    position: relative;
}

.message-mention-suggestions {
    display: none;
    position: absolute;
    z-index: 1080;
    min-width: 280px;
    max-width: min(420px, 90vw);
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid rgba(24, 28, 33, .15);
    border-radius: .25rem;
    background: #fff;
    box-shadow: 0 .25rem .75rem rgba(24, 28, 33, .15);
}

.message-mention-suggestion {
    display: block;
    width: 100%;
    padding: .5rem .75rem;
    border: 0;
    border-bottom: 1px solid rgba(24, 28, 33, .08);
    background: #fff;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.message-mention-suggestion:last-child {
    border-bottom: 0;
}

.message-mention-suggestion:hover,
.message-mention-suggestion.active {
    background: #f1f3f5;
}

.message-mention-suggestion-name {
    display: block;
}

.message-body-text {
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.message-mention-text {
    font-weight: 700;
}