.messagesView {
  display: grid;
  gap: 18px;
}

.messagesList {
  display: grid;
  gap: 14px;
}

.messageCard {
  padding-top: 16px;
  padding-right: 18px;
  padding-bottom: 16px;
  padding-left: 18px;
  border: 1px solid var(--soft-border-color);
  border-radius: 12px;
  background: var(--overlay-panel-color);
}

.messageCard.is-unread {
  border-color: var(--default-theme-strong-yellow-light);
}

.messageCardHeader {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.messageSubject {
  font-size: var(--font-size-large);
  font-weight: var(--strong-font-weight);
}

.messageFrom {
  color: var(--main-text-color);
  font-size: var(--font-size-small);
  font-weight: var(--value-font-weight);
}

.messageEventName {
  color: var(--muted-text-color);
  font-size: var(--font-size-small);
  font-weight: var(--value-font-weight);
}

.messageMeta {
  color: var(--muted-text-color);
  font-size: var(--font-size-small);
}

.messageBody {
  margin-top: 12px;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  white-space: pre-wrap;
}

.messageActionRow {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.messageDesigneeState {
  margin-top: 12px;
  color: var(--muted-text-color);
  font-size: var(--font-size-small);
  font-weight: var(--value-font-weight);
}

.messageHideButton {
  border: 0;
  color: var(--default-theme-red);
  background: transparent;
}

.messageHideButton svg {
  width: 18px;
  height: 18px;
  display: block;
}

.messagesStatus,
.messagesEmptyState {
  margin: 0;
  color: var(--muted-text-color);
}