/* ===========================================================================
   Messenger — Etappe 2 (Frontend-Geruest)
   ---------------------------------------------------------------------------
   Alle Werte stammen aus Messenger.dc.html. Der Prototyp arbeitet mit
   Inline-Styles; hier stehen sie als Klassen mit msg-Praefix, damit sich
   nichts mit den anderen Modulen beisst.

   Keine neuen Farben — nur die Tokens aus dem Handoff-README.
   =========================================================================== */

/* ── Grundgeruest ──────────────────────────────────────────────────────────
   Der Bestand gibt jeder Seite mit

       .page { display:none; padding:16px; max-width:680px; margin:0 auto }

   eine schmale, mittige Spalte und KEINE Hoehe. Fuer ein dreispaltiges
   Layout mit zwei eigenen Scrollbereichen passt beides nicht:

   * max-width haette den Messenger auf 680px gequetscht. Dieselbe Ausnahme
     braucht schon das Aufgaben-Board (#page-aufgaben in aufgaben.css).

   * Ohne Hoehe waere flex:1 im Inneren auf 0px zusammengefallen und die
     Seite bliebe leer. .main-wrap ist ein Spalten-Flexcontainer mit
     min-height:100vh, darin sitzt der 52px hohe header — flex:1 holt also
     genau die Resthoehe. min-height:0 muss dazu, sonst wachsen die
     Scrollbereiche ueber den Rand hinaus, statt zu scrollen. */
/* !important ist hier Absicht, kein Notnagel: .page ist eine generische
   Regel fuer schmale Formularseiten, und der erste Versuch ohne !important
   hat sich in der laufenden Anwendung nicht durchgesetzt. Statt weiter zu
   raten, welche Regel dazwischenfunkt, wird die Ausnahme hier eindeutig
   gemacht. */
#page-messenger {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}
/* Bewusst block, nicht flex. Mit flex haengt die Breite von .msg-wrap
   davon ab, wie sich das Flex-Item verhaelt — und genau das hat sich in
   der laufenden Anwendung nicht so ergeben wie erwartet (volle Hoehe,
   aber nur rund 600px Breite). Ein Block-Container mit einem Kind auf
   width:100% laesst dafuer keinen Spielraum. */
#page-messenger.active {
  display: block !important;
}

/* Die Hoehe steht hier fest statt sie ueber flex:1 von den Eltern zu
   erben. Das war die zweite Fehlerquelle: greift irgendwo in der Kette
   .main-wrap -> #page-messenger das Flex-Verhalten nicht, faellt ein
   flex:1 auf 0px zusammen und die Seite ist leer. 100vh minus der 52px
   hohen Kopfleiste ist unabhaengig davon richtig. */
.msg-wrap {
  width: 100%;
  height: calc(100vh - 52px);
  min-width: 0;
  display: flex;
  min-height: 0;
  background: #F4F6FA;
}

/* ── Chatliste (264px) ─────────────────────────────────────────────────── */
.msg-liste {
  width: 264px;
  flex-shrink: 0;
  background: #fff;
  border-right: 0.5px solid #e0dfd7;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.msg-liste-kopf {
  padding: 10px 12px;
  border-bottom: 0.5px solid #f0efe8;
  display: flex;
  gap: 7px;
  flex-shrink: 0;
}

.msg-suche {
  flex: 1;
  height: 32px;
  padding: 0 11px;
  font-size: 12.5px;
  border: 0.5px solid #e0dfd7;
  border-radius: 8px;
  background: #fafaf8;
  outline: none;
  color: #1a1a18;
  min-width: 0;
}
.msg-suche:focus { border-color: #C7DEF7; }

.msg-neu-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: #3F96FE;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.msg-neu-btn:hover { background: #0A67EA; }

.msg-liste-body { flex: 1; overflow-y: auto; min-height: 0; }

.msg-sek {
  font-size: 10px;
  font-weight: 500;
  color: #aaa;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 11px 14px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.msg-sek-plus {
  border: none;
  background: transparent;
  color: #3F96FE;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
}
.msg-sek-plus:hover { color: #0A67EA; }

.msg-zeile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  cursor: pointer;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
}
.msg-zeile:hover { background: #f7f9fc; }
.msg-zeile.aktiv { background: #EBF4FF; }

/* display:block ist hier Pflicht, nicht Kosmetik: die Zeile ist ein
   <button> und darf deshalb nur Inline-Elemente enthalten. Ohne die
   Umschaltung stehen Name und Vorschau in derselben Zeile nebeneinander
   ("Dominik BochniaNoch keine Nachricht") statt untereinander. */
.msg-zeile-mitte { display: block; flex: 1; min-width: 0; }
.msg-zeile-name {
  display: block;
  font-size: 12.5px;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg-zeile-name.ungelesen { font-weight: 600; }
.msg-zeile-letzte {
  display: block;
  font-size: 11px;
  color: #888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
.msg-zeile-rechts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
}
.msg-zeile-zeit { font-size: 9.5px; color: #aaa; }
.msg-pill {
  background: #3F96FE;
  color: #fff;
  font-size: 9.5px;
  font-weight: 600;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.msg-leer {
  padding: 18px 14px;
  font-size: 11.5px;
  color: #aaa;
  line-height: 1.5;
}

/* ── Avatare ───────────────────────────────────────────────────────────────
   Die Palette rotiert; welche Farbe jemand bekommt, entscheidet die user_id,
   damit dieselbe Person ueberall gleich aussieht. */
.msg-av {
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  flex-shrink: 0;
  position: relative;
}
.msg-av-34 { width: 34px; height: 34px; font-size: 11px; }
.msg-av-36 { width: 36px; height: 36px; font-size: 11px; }
.msg-av-26 { width: 26px; height: 26px; font-size: 9px; }
/* 22px: Mitglieder-Chips in der Gruppeninfo und die @-Auswahlliste */
.msg-av-22 { width: 22px; height: 22px; font-size: 9px; }
.msg-av-22 .msg-dot { width: 8px; height: 8px; border-width: 1.5px; }

.msg-av-p0 { background: #EBF4FF; color: #185FA5; }
.msg-av-p1 { background: #EAF3DE; color: #3B6D11; }
.msg-av-p2 { background: #FAEEDA; color: #854F0B; }
.msg-av-p3 { background: #FCEBEB; color: #A32D2D; }
.msg-av-p4 { background: #f0efe8; color: #666; }

/* Anwesenheitspunkt. Die Farbe kommt spaeter aus der Zeiterfassung
   (Etappe 6); bis dahin steht er auf "unbekannt". */
.msg-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: #c4c3bb;
}
.msg-av-36 .msg-dot { width: 11px; height: 11px; }
.msg-dot.online { background: #3B6D11; }
.msg-dot.pause { background: #EF9F27; }
.msg-dot.weg { background: #c4c3bb; }

/* ── Verlaufsspalte ────────────────────────────────────────────────────── */
.msg-haupt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #F4F6FA;
  min-height: 0;
}

.msg-kopf {
  background: #fff;
  border-bottom: 0.5px solid #e0dfd7;
  padding: 9px 16px;
  display: flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0;
}
.msg-kopf-name { font-size: 13.5px; font-weight: 600; color: #1a1a18; }
.msg-kopf-sub { font-size: 11px; color: #888; margin-top: 1px; }
.msg-kopf-btns { margin-left: auto; display: flex; gap: 6px; }

.msg-kbtn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 0.5px solid #e0dfd7;
  background: #fff;
  color: #888;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.msg-kbtn:hover { background: #f5f4f0; }
.msg-kbtn.blau {
  border-color: #85B7EB;
  background: #EBF4FF;
  color: #185FA5;
}
.msg-kbtn.blau:hover { background: #3F96FE; border-color: #3F96FE; color: #fff; }

/* Loeschen im Kopf: zurueckhaltend grau, erst beim Zeigen wird die
   Tragweite rot — wie der Loeschknopf in der Gruppeninfo. */
.msg-kbtn.rot:hover { background: #FCEBEB; border-color: #F09595; color: #A32D2D; }

/* ── Sendungslink in der Blase ──────────────────────────────────────────────
   Blau, unterstrichen mit #C7DEF7 (Design) — nur echte Pakete werden so
   dargestellt, alles andere bleibt Text. */
.msg-sendung {
  border: none;
  background: transparent;
  padding: 0;
  font-size: 12.5px;
  font-family: inherit;
  color: #185FA5;
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: #C7DEF7;
  text-underline-offset: 2px;
}
.msg-sendung:hover { color: #0A67EA; }

/* ── Sendungs-Drawer ────────────────────────────────────────────────────────
   Rechts, fest, 460px, Schatten nach links (Design). Liegt ueber dem Chat;
   beim Chatwechsel wird er geschlossen. */
.msg-sd {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(460px, 100%);
  background: #fff;
  border-left: 0.5px solid #e0dfd7;
  box-shadow: -8px 0 24px rgba(26, 26, 24, .12);
  z-index: 920;
  display: flex;
  flex-direction: column;
  padding: 16px 18px 0;
}
.msg-sd-kopf { display: flex; align-items: center; gap: 8px; }
.msg-sd-pills { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; }
.msg-sd-pill {
  font-size: 10px;
  font-weight: 600;
  color: #185FA5;
  background: #EBF4FF;
  border: 0.5px solid #C7DEF7;
  border-radius: 20px;
  padding: 2px 9px;
}
.msg-sd-pill.warn { color: #854F0B; background: #FAEEDA; border-color: #EF9F27; }
.msg-sd-titel {
  margin-top: 10px;
  font-size: 17px;
  font-weight: 600;
  color: #1a1a18;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.msg-sd-sub { font-size: 11px; color: #888; margin-top: 2px; }
.msg-sd-mitte { flex: 1; overflow-y: auto; min-height: 0; padding: 14px 0; }
.msg-sd-zeile {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 0.5px solid #f0efe8;
  font-size: 12.5px;
}
.msg-sd-zeile span { color: #888; flex-shrink: 0; }
.msg-sd-zeile strong { font-weight: 600; color: #1a1a18; text-align: right; overflow-wrap: anywhere; }

.msg-sd-punkt { display: flex; gap: 9px; padding: 6px 0; align-items: flex-start; }
.msg-sd-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}
.msg-sd-ptext { font-size: 12px; color: #1a1a18; line-height: 1.4; min-width: 0; }
.msg-sd-pzeit { display: block; font-size: 10px; color: #aaa; margin-top: 1px; }

.msg-sd-fuss {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 0 16px;
  border-top: 0.5px solid #e0dfd7;
  flex-shrink: 0;
}

/* ── Angepinnte Nachricht ───────────────────────────────────────────────────
   Orange Leiste unter dem Kopf (bzw. unter der Gruppeninfo-Leiste, wenn
   die offen ist). Werte aus Messenger.dc.html: #FAEEDA auf #EF9F27-Kante,
   Text #854F0B, Urheber #a98047. Eine Nachricht je Gruppe. */
.msg-pinleiste {
  background: #FAEEDA;
  border-bottom: 0.5px solid #EF9F27;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
}
.msg-pin-icon { font-size: 12px; flex-shrink: 0; }
.msg-pin-text {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: #854F0B;
  line-height: 1.4;
  /* lange Nachrichten: eine Zeile, Rest gekappt — die Leiste soll den
     Verlauf nicht verdraengen */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg-pin-text strong { font-weight: 600; }
.msg-pin-von { color: #a98047; }
.msg-pin-x {
  border: none;
  background: transparent;
  color: #a98047;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  flex-shrink: 0;
}
.msg-pin-x:hover { color: #A32D2D; }

/* ── Nachrichtenstrom ──────────────────────────────────────────────────── */
.msg-strom {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-height: 0;
}

.msg-tag {
  align-self: center;
  font-size: 10px;
  color: #aaa;
  padding: 2px 0;
}

/* "Neu ab hier" */
.msg-trenner {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 2px 0;
}
.msg-trenner-linie { flex: 1; height: 0.5px; background: #F09595; }
.msg-trenner-pill {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: #A32D2D;
  background: #FCEBEB;
  border-radius: 20px;
  padding: 2px 9px;
  white-space: nowrap;
}

.msg-reihe { display: flex; flex-direction: column; gap: 9px; }
.msg-reihe.links { align-items: flex-start; }
.msg-reihe.rechts { align-items: flex-end; }

.msg-block { display: flex; gap: 9px; max-width: 78%; }
.msg-block.eigen { flex-direction: row-reverse; }

.msg-inhalt { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.msg-absender { font-size: 10px; color: #aaa; }

.msg-blase {
  background: #fff;
  border: 0.5px solid #e0dfd7;
  border-radius: 12px;
  border-top-left-radius: 4px;
  padding: 8px 12px;
  font-size: 12.5px;
  line-height: 1.45;
  color: #1a1a18;
  overflow-wrap: anywhere;
}
.msg-blase.eigen {
  background: #EBF4FF;
  border-color: #C7DEF7;
  border-top-left-radius: 12px;
  border-top-right-radius: 4px;
}
.msg-blase.geloescht {
  background: #fafaf8;
  border-color: #e0dfd7;
  color: #aaa;
  font-style: italic;
}

.msg-bearbeitet { font-size: 9.5px; color: #aaa; margin-left: 6px; }

.msg-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: #aaa;
}
.msg-meta.rechts { justify-content: flex-end; }

.msg-mbtn {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  border: 0.5px solid #e0dfd7;
  background: #fff;
  color: #888;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
}
.msg-mbtn:hover { background: #EBF4FF; border-color: #3F96FE; color: #3F96FE; }
.msg-mbtn.loeschen:hover { background: #FCEBEB; border-color: #F09595; color: #A32D2D; }

/* Status-i: rund, klappt die Notiz in-flow auf */
.msg-ibtn {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 9px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  border: 0.5px solid #e0dfd7;
  background: #fff;
  color: #888;
}
.msg-ibtn:hover { border-color: #3F96FE; }
.msg-ibtn.warn { border-color: #EF9F27; background: #FAEEDA; color: #854F0B; }
.msg-ibtn.zu { border-color: #e0dfd7; background: #f0efe8; color: #888; }

/* Die Notiz klappt IN-FLOW auf. Absolut positioniert wuerde sie im
   Scrollcontainer abgeschnitten — deshalb bewusst als normales Element. */
.msg-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 11px;
  background: #fff;
  border: 0.5px solid #e0dfd7;
  border-radius: 8px;
  padding: 7px 10px;
  color: #666;
  line-height: 1.45;
}
.msg-note.warn { border-color: #EF9F27; color: #854F0B; }

/* ── Gruppeninfo-Leiste ─────────────────────────────────────────────────────
   Klappt in-flow unter dem Kopf auf, nicht überlagernd — sonst würde sie im
   Scrollbereich abgeschnitten. */
.msg-gruppeninfo {
  background: #fff;
  border-bottom: 0.5px solid #e0dfd7;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex-shrink: 0;
}
.msg-gi-kopf { display: flex; align-items: center; gap: 8px; }
.msg-gi-titel {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: #888;
}
.msg-gi-sub { font-size: 11px; color: #aaa; }
.msg-gi-liste { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.msg-mitglied {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0.5px solid #e0dfd7;
  border-radius: 20px;
  padding: 3px 10px 3px 4px;
  font-size: 12.5px;
  color: #1a1a18;
  background: #fafaf8;
}
.msg-mitglied .msg-dot { border-color: #fafaf8; }
.msg-adminpill {
  font-size: 9.5px;
  font-weight: 600;
  color: #185FA5;
  background: #EBF4FF;
  border-radius: 20px;
  padding: 1px 6px;
}
.msg-kbtn.aktiv { background: #EBF4FF; border-color: #C7DEF7; color: #185FA5; }

/* ── Erwähnungen ───────────────────────────────────────────────────────── */
.msg-mention { color: #185FA5; font-weight: 500; }
.msg-mention.ich { background: #EBF4FF; border-radius: 4px; padding: 0 3px; }

/* Auswahlliste beim Tippen von @ */
.msg-mentionbox {
  display: flex;
  flex-direction: column;
  border: 0.5px solid #C7DEF7;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  max-height: 200px;
  overflow-y: auto;
}
.msg-mentionzeile {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  text-align: left;
}
.msg-mentionzeile:hover { background: #EBF4FF; }

/* ── Gruppendialog ─────────────────────────────────────────────────────── */
.msg-dlg.breit { max-width: 460px; }
.msg-person.gewaehlt { background: #EBF4FF; border-color: #C7DEF7; }
.msg-haken {
  margin-left: auto;
  color: #3F96FE;
  font-weight: 600;
  flex-shrink: 0;
  width: 14px;
  text-align: center;
}
.msg-zaehler { margin-right: auto; font-size: 11.5px; color: #888; align-self: center; }
.msg-btn.primaer {
  background: #3F96FE;
  border-color: #3F96FE;
  color: #fff;
  font-weight: 500;
}
.msg-btn.primaer:hover { background: #0A67EA; border-color: #0A67EA; }

/* Loeschen sieht anders aus als der Rest - aber nicht schreiend rot, solange
   niemand drauf zeigt. Erst beim Hover wird die Tragweite deutlich. */
.msg-btn.gefahr { color: #A32D2D; border-color: #F09595; }
.msg-btn.gefahr:hover { background: #FCEBEB; border-color: #A32D2D; }

/* ── Papierkorb-Eintrag ─────────────────────────────────────────────────────
   Sitzt in der Papierkorb-Seite des Bestands, nicht im Messenger — deshalb
   ohne dessen Layoutregeln, aber in derselben Kartenoptik wie die
   Ticket-Einträge daneben. */
.msg-trash {
  background: #fff;
  border: 0.5px solid #e0dfd7;
  border-left: 3px solid #B4B2A9;
  border-radius: 10px;
  padding: 11px 14px;
  margin-bottom: 8px;
}
.msg-trash-kopf {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 3px;
}
.msg-trash-name { font-size: 13px; font-weight: 600; color: #1a1a18; }
.msg-trash-datum { font-size: 10px; color: #A32D2D; white-space: nowrap; }
.msg-trash-zeile { font-size: 11.5px; color: #888; }
.msg-trash-fuss { display: flex; gap: 6px; margin-top: 9px; }

/* ── Anhang unter der Blase ────────────────────────────────────────────── */
.msg-anhang {
  display: flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  border: 0.5px solid #e0dfd7;
  border-radius: 10px;
  padding: 8px 11px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  max-width: 100%;
}
.msg-anhang:hover { background: #f7f9fc; border-color: #C7DEF7; }

.msg-anhang-icon {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 600;
  flex-shrink: 0;
  font-family: ui-monospace, Menlo, monospace;
}
.msg-anhang-icon.foto { background: #EBF4FF; color: #185FA5; }
.msg-anhang-icon.pdf { background: #FCEBEB; color: #A32D2D; }

.msg-anhang-mitte { display: block; min-width: 0; }
.msg-anhang-name {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  color: #1a1a18;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg-anhang-groesse { display: block; font-size: 10px; color: #888; }

/* ── Aufgaben-Rückbezug in der Blase ───────────────────────────────────── */
.msg-aufgabe {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  background: #fff;
  border: 0.5px solid #C7DEF7;
  border-radius: 20px;
  padding: 3px 11px 3px 8px;
  font-size: 11px;
  cursor: pointer;
  color: #185FA5;
  font-family: inherit;
}
.msg-aufgabe:hover { background: #EBF4FF; }
.msg-aufgabe.fertig { border-color: #97C459; color: #3B6D11; }
.msg-aufgabe.fertig:hover { background: #EAF3DE; }
.msg-aufgabe strong { font-weight: 600; }

.msg-aufgabe-icon {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #EBF4FF;
  color: #185FA5;
}
.msg-aufgabe.fertig .msg-aufgabe-icon { background: #EAF3DE; color: #3B6D11; }

/* ── Aufgabe verfolgen (Kurzansicht für Chat-Teilnehmer) ───────────────── */
.msg-verf-titel {
  font-size: 13.5px;
  font-weight: 600;
  color: #1a1a18;
  line-height: 1.4;
  margin-bottom: 14px;
}
.msg-verf-zeile {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 0.5px solid #f0efe8;
  font-size: 12.5px;
}
.msg-verf-zeile span { color: #888; }
.msg-verf-zeile strong { font-weight: 600; color: #1a1a18; text-align: right; }
.msg-verf-block { margin-top: 14px; }
.msg-verf-lbl {
  font-size: 10px;
  font-weight: 500;
  color: #888;
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 6px;
}
.msg-verf-leer { font-size: 12px; color: #aaa; }

.msg-verf-notiz {
  background: #fafaf8;
  border: 0.5px solid #e0dfd7;
  border-radius: 8px;
  padding: 7px 10px;
  margin-bottom: 6px;
}
.msg-verf-notiz-kopf { font-size: 10px; color: #aaa; margin-bottom: 3px; }
.msg-verf-notiz-text {
  font-size: 12.5px;
  color: #1a1a18;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.msg-verf-datei {
  display: flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  border: 0.5px solid #e0dfd7;
  border-radius: 8px;
  padding: 7px 10px;
  margin-bottom: 6px;
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.msg-verf-datei:hover { background: #f7f9fc; border-color: #C7DEF7; }

.msg-verf-hinweis {
  margin-top: 14px;
  font-size: 11.5px;
  color: #666;
  line-height: 1.5;
  background: #fafaf8;
  border: 0.5px solid #e0dfd7;
  border-radius: 8px;
  padding: 8px 11px;
}

/* ── Dialog "Aufgabe aus Chat" ─────────────────────────────────────────── */
.msg-herkunft {
  background: #EBF4FF;
  border: 0.5px solid #C7DEF7;
  border-radius: 10px;
  padding: 9px 12px;
  margin-bottom: 12px;
}
.msg-herkunft-kopf {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: #185FA5;
  margin-bottom: 4px;
}
.msg-herkunft-zitat {
  font-size: 12px;
  color: #1a1a18;
  line-height: 1.45;
  font-style: italic;
  /* Lange Nachrichten dürfen den Dialog nicht sprengen — der Auszug reicht
     zum Wiedererkennen. */
  max-height: 66px;
  overflow: hidden;
}

.msg-feldlabel {
  display: block;
  font-size: 10px;
  font-weight: 500;
  color: #888;
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 4px;
}

.msg-textarea {
  width: 100%;
  padding: 8px 11px;
  font-size: 12.5px;
  font-family: inherit;
  border: 0.5px solid #e0dfd7;
  border-radius: 8px;
  background: #fafaf8;
  outline: none;
  color: #1a1a18;
  resize: vertical;
  margin-bottom: 10px;
  line-height: 1.45;
}
.msg-textarea:focus { border-color: #C7DEF7; }

.msg-fristzeile { display: flex; gap: 8px; margin-bottom: 12px; }
.msg-kennz { display: flex; gap: 16px; }
.msg-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: #1a1a18;
  cursor: pointer;
}

/* ── Anhang-Auswahl über der Eingabe ───────────────────────────────────── */
.msg-anhangzone { display: flex; flex-direction: column; gap: 9px; }

.msg-kacheln { display: flex; gap: 8px; }
.msg-kachel {
  flex: 1;
  border: 1.5px dashed #C7DEF7;
  border-radius: 10px;
  background: #F5FAFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 14px;
  color: #185FA5;
  gap: 5px;
  font: inherit;
  font-size: 11px;
  font-weight: 500;
}
.msg-kachel:hover { background: #EBF4FF; border-color: #3F96FE; }

.msg-qrblock {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 0.5px solid #e0dfd7;
  border-radius: 12px;
  background: #fafaf8;
}
.msg-qrbild {
  width: 96px;
  height: 96px;
  flex-shrink: 0;
  background: #fff;
  border: 0.5px solid #e0dfd7;
  border-radius: 8px;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Der Generator liefert ein SVG ohne feste Groesse — erst diese Regel
   macht es sichtbar. */
.msg-qrbild svg, .msg-qrbild img, .msg-qrbild canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.msg-qrtext { font-size: 12px; color: #666; line-height: 1.55; }
.msg-qrstand { margin-top: 6px; color: #185FA5; font-weight: 500; }

.msg-gewaehlt { display: flex; flex-wrap: wrap; gap: 6px; }
.msg-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0.5px solid #e0dfd7;
  border-radius: 20px;
  padding: 3px 6px 3px 11px;
  font-size: 11.5px;
  background: #fff;
  max-width: 220px;
}
.msg-chip-x {
  border: none;
  background: transparent;
  color: #aaa;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0 3px;
}
.msg-chip-x:hover { color: #A32D2D; }

/* ── Lightbox für Anhänge ──────────────────────────────────────────────────
   Bewusst ein eigenes Fenster im Modul statt eines neuen Tabs: ein Klick auf
   ein Foto soll es zeigen, nicht herunterladen. Speichern geht über den
   Knopf im Kopf. */
.msg-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 24, .78);
  z-index: 950;
  display: flex;
  flex-direction: column;
  padding: 20px;
  gap: 12px;
}
.msg-lightbox-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-size: 13px;
  flex-shrink: 0;
}
.msg-lightbox-kopf .msg-x { color: #fff; margin-left: 0; }
.msg-lightbox-kopf .msg-btn { margin-left: auto; text-decoration: none; }
.msg-lightbox-mitte {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.msg-lightbox-mitte img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
}
.msg-lightbox-mitte iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 8px;
  background: #fff;
}

/* ── Eingabezeile ──────────────────────────────────────────────────────── */
.msg-fuss {
  background: #fff;
  border-top: 0.5px solid #e0dfd7;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex-shrink: 0;
}
.msg-fuss-zeile { display: flex; align-items: center; gap: 8px; }

.msg-plus {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  border: 0.5px solid #e0dfd7;
  background: #fff;
  color: #888;
}
.msg-plus:hover { background: #EBF4FF; border-color: #3F96FE; color: #3F96FE; }
.msg-plus.aktiv { background: #EBF4FF; border-color: #3F96FE; color: #3F96FE; }

.msg-eingabe {
  flex: 1;
  height: 38px;
  padding: 0 13px;
  font-size: 13px;
  border: 0.5px solid #e0dfd7;
  border-radius: 10px;
  background: #fafaf8;
  outline: none;
  color: #1a1a18;
  min-width: 0;
}
.msg-eingabe:focus { border-color: #C7DEF7; }

.msg-senden {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: none;
  background: #3F96FE;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.msg-senden:hover { background: #0A67EA; }
.msg-senden:disabled { background: #c4c3bb; cursor: default; }

/* Anwesenheits-Hinweis ueber der Eingabe (Etappe 6 fuellt ihn) */
.msg-hinweis {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11.5px;
  border-radius: 8px;
  padding: 7px 11px;
  line-height: 1.45;
}
.msg-hinweis.pause { background: #FAEEDA; border: 0.5px solid #EF9F27; color: #854F0B; }
.msg-hinweis.weg { background: #f5f4f0; border: 0.5px solid #e0dfd7; color: #666; }

/* ── Leerzustand ───────────────────────────────────────────────────────── */
.msg-nix {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #aaa;
  font-size: 12.5px;
  text-align: center;
  padding: 24px;
}
.msg-nix strong { font-size: 13.5px; font-weight: 600; color: #888; }

/* ── Dialog "Neuer Chat" ───────────────────────────────────────────────── */
.msg-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 24, .42);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 900;
  padding: 20px;
}

/* Feste Höhe statt „so hoch wie der Inhalt": In allen drei Dialogen steht
   eine Personenliste, die sich beim Tippen in der Suche verkürzt. Mit
   mitwachsender Höhe sprang der Dialog bei jedem Buchstaben — unruhig und
   irritierend. Jetzt bleibt der Rahmen stehen und nur die Liste scrollt.
   max-height greift auf kleinen Bildschirmen. */
.msg-dlg {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 400px;
  height: 520px;
  max-height: calc(100vh - 140px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(26, 26, 24, .18);
}
.msg-dlg-kopf {
  padding: 14px 18px;
  border-bottom: 0.5px solid #e0dfd7;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
}
.msg-dlg-titel { font-size: 14px; font-weight: 600; color: #1a1a18; }
.msg-dlg-mitte { flex: 1; overflow-y: auto; padding: 14px 18px; min-height: 0; }
.msg-dlg-fuss {
  padding: 12px 18px;
  border-top: 0.5px solid #e0dfd7;
  background: #fafaf8;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.msg-x {
  margin-left: auto;
  border: none;
  background: transparent;
  color: #aaa;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.msg-x:hover { color: #A32D2D; }

.msg-btn {
  padding: 7px 14px;
  border-radius: 8px;
  border: 0.5px solid #e0dfd7;
  background: #fff;
  color: #666;
  font-size: 12.5px;
  cursor: pointer;
}
.msg-btn:hover { background: #f5f4f0; }

/* i-Panel: klappt in-flow auf, nie absolut (Clipping im Scrollcontainer) */
/* Das kursive i sitzt nicht von selbst mittig: die Schräglage schiebt die
   Glyphe nach rechts, und ihre Oberlänge (der Punkt) macht sie oben
   schwerer als unten. flex zentriert die Textbox, nicht das, was man sieht.
   Deshalb der kleine Ausgleich per padding — 1px zurück nach links, 1px
   nach unten. Die Textbox bleibt dabei 16x16. */
.msg-i {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 0.5px solid #e0dfd7;
  background: #fff;
  color: #888;
  font-size: 10px;
  font-style: italic;
  font-weight: 600;
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 1px 1px 0 0;
  box-sizing: border-box;
  flex-shrink: 0;
}
.msg-i:hover, .msg-i.offen { background: #EBF4FF; border-color: #3F96FE; color: #3F96FE; }

.msg-i-panel {
  background: #fff;
  border: 0.5px solid #C7DEF7;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.msg-i-titel {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #3F96FE;
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}
.msg-i-liste { margin: 0; padding: 0; list-style: none; }
.msg-i-liste li {
  display: flex;
  gap: 7px;
  font-size: 11.5px;
  color: #666;
  line-height: 1.5;
  margin-top: 4px;
}
.msg-i-liste li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #3F96FE;
  flex-shrink: 0;
  margin-top: 6px;
}

/* Personenliste im Dialog */
.msg-person {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 9px;
  border-radius: 10px;
  cursor: pointer;
  border: 0.5px solid transparent;
  background: transparent;
  width: 100%;
  text-align: left;
  font: inherit;
}
.msg-person:hover { background: #f7f9fc; }
/* Gleiche Lage wie in der Chatliste: <button>, also Spans, also braucht
   es display:block, damit Name und Status untereinander stehen. */
.msg-person-mitte { display: block; flex: 1; min-width: 0; }
.msg-person-name {
  display: block;
  font-size: 12.5px;
  color: #1a1a18;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg-person-sub { display: block; font-size: 10.5px; color: #888; margin-top: 1px; }
.msg-rolle {
  margin-left: auto;
  font-size: 9.5px;
  color: #666;
  background: #f0efe8;
  border-radius: 20px;
  padding: 2px 8px;
  flex-shrink: 0;
}

/* Bestellauskunft (19.08.2026) - Mengen- und Preisspalte der
   Positionsliste. Feste Breiten, damit die Zahlen untereinander
   stehen; der Rest der Zeile nutzt die vorhandenen msg-sd-Klassen. */
.msg-ba-menge {
  flex: 0 0 58px;
  font-size: 12px;
  font-weight: 600;
  color: #1a1a18;
}
.msg-ba-preis {
  flex: 0 0 92px;
  text-align: right;
  font-size: 12px;
  color: #555;
  white-space: nowrap;
}
.msg-sd-addr {
  font-size: 13px;
  line-height: 1.5;
  color: #1a1a18;
}

/* Der Bestellknopf sitzt neben dem Plus und soll genauso aussehen.
   Eigene Regel nur fuer die Farbe, damit die beiden unterscheidbar
   bleiben. */
#msg-bestellung { color: #6b6b66; }
#msg-bestellung:hover { color: #1a1a18; }