/* ------------------------------ conversation ------------------------------ */

.conversation {
  display: flex;
  align-items: center;
  padding: 16px;
  cursor: pointer;
  transition: 0.2s;
  position: relative;
}

.conversation.unseen .conversation-content,
.conversation.unseen .conversation-username {
  font-weight: 900;
}

.conversation:hover {
  background-color: var(--surface-border);
}

.conversation.selected {
  background-color: var(--surface-border);
}

.conversation-detail {
  overflow: hidden;
  margin-left: 15px;
}

.conversation-username {
  margin-bottom: 4px;
  font-weight: 600;
  font-size: 1rem;
}

.conversation-content {
  font-size: 0.875rem;
  color: var(--msg-message);
}

.conversation-message {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conversation-date {
  min-width: fit-content;
  font-size: 0.875rem;
  margin-left: 3px;
}

.conversation-unseen {
  margin-left: auto;
  background: var(--primary-color);
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  font-weight: 700;
  color: var(--primary-color-text);
  font-size: 0.75rem;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
}