/*
 * Messenger-Modul.
 *
 * Das Layout folgt dem Postfach: Liste links, Verlauf rechts. Die Blasen
 * nutzen die Bootstrap-Farbvariablen, damit heller und dunkler Modus ohne
 * eigene Farbwerte funktionieren.
 */

.messenger-view .messenger-conversations {
  min-height: 12rem;
  max-height: calc(100vh - 14rem);
}

.messenger-view .messenger-messages {
  min-height: 16rem;
  max-height: calc(100vh - 20rem);
  background-color: var(--bs-tertiary-bg);
}

.messenger-bubble {
  max-width: 75%;
  border-radius: 0.75rem;
  padding: 0.5rem 0.75rem;
}

.messenger-bubble-in {
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-bottom-left-radius: 0.25rem;
}

.messenger-bubble-out {
  background-color: var(--bs-primary-bg-subtle);
  border: 1px solid var(--bs-primary-border-subtle);
  border-bottom-right-radius: 0.25rem;
}

.messenger-bubble-failed {
  border-color: var(--bs-danger);
}

.messenger-bubble-text {
  white-space: pre-wrap;
  word-break: break-word;
}

.messenger-bubble-meta {
  margin-top: 0.25rem;
  text-align: right;
}

.messenger-provider-icon {
  width: 1.5rem;
  text-align: center;
  flex-shrink: 0;
}

/* Farbpunkt der E-Mail-Tag-Auswahl im Messengerdienste-Tab der Benutzer. */
.messenger-tag-dot {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  margin-right: 0.25rem;
  vertical-align: baseline;
}