/* Messages (modules/messages): a conversation as bubbles, the viewer's own on the right in pale blue. */

.messages {
  display: grid;
  gap: var(--sp-4);
}

.messages__item {
  display: grid;
  justify-items: start;
  gap: var(--sp-1);
  max-width: 85%;
}

.messages__item--own {
  justify-items: end;
  justify-self: end;
}

.messages__meta {
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}

.messages__body {
  padding: var(--sp-3) var(--sp-4);
  overflow-wrap: anywhere; /* a long web address must not push the bubble wider than the screen */
  background-color: var(--c-panel);
  border: var(--border-1) solid var(--c-line);
  border-radius: var(--radius-2);
}

.messages__item--own .messages__body {
  background-color: var(--c-accent);
  border-color: var(--c-accent-border);
}

.messages__form {
  margin-top: var(--sp-6);
}

.messages__text {
  min-height: var(--sp-32);
}