/*
 * 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.
 */

/*
 * Liste und Verlauf teilen sich die Höhe des Hauptbereichs. Untereinander
 * (schmale Fenster) bekommt die Liste eine Höchsthöhe und der Verlauf den
 * Rest; nebeneinander bleibt die Aufteilung 1/3 zu 2/3 bzw. 1/4 zu 3/4.
 */
.messenger-view .messenger-list-column {
  flex: 0 0 auto;
  max-height: 16rem;
  min-height: 0;
}

.messenger-view .messenger-thread-column {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

@media (min-width: 992px) {
  .messenger-view .messenger-list-column {
    flex-basis: calc(100% / 3);
    max-height: none;
  }
}

@media (min-width: 1400px) {
  .messenger-view .messenger-list-column {
    flex-basis: 25%;
  }
}

.messenger-view .messenger-messages {
  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;
}

/* Trefferliste im Fenster "Mit Kontakt verknüpfen". */
.messenger-contact-results {
  max-height: 20rem;
}

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