/* ============================================================
   EMEU CONNECT — der Chat (JetMessenger) im Haus-Design
   Baustein emeu-chat-wache.php 0.3.1.
   Geladen nur im Reiter EMEU Connect (Filter emeu_chat_stil_laden fuer weitere Orte).
   Aufbau:
   1. Schalter des Bausteins (--emeu-connect-*): jede Zeile liest die Haus-Token der Kontext-Schicht und folgt damit dunkel und
   on-light von selbst. Hier aendert man den Chat allein, ohne die Haus-Werte anzufassen (Muster: --emeu-kasten-* der Produktseite).
   2. JetMessenger-Anschluss: seine eigenen Variablen (--jm-*) lesen nur die Schalter. Nicht angeschlossen sind Eingabe und
   Senden-Knopf — die zeichnen die Haus-Regeln fuer Felder (input[type=text]) und Knoepfe (core-elements.css), gemessen.
   3. Feste Farben, die JetMessenger ohne Variable schreibt (Grundtext #1d2327, Linie #e5e5e5, Fokus und Punkt #2271b1, Fehler).
   4. Schrift nach der Haus-Leiter (titel, name, neben, fuss, text).
   5. Kompakte Liste: zwei Zeilen je Gespraech (Name plus Zeit, darunter der Bezug), vorher 106 px, jetzt rund 56 px.
   6. Nachrichten: eigene rechts, fremde links, Blase hoechstens 85 Prozent breit.
   7. Anhang-Knopf rund (die Haus-Knopfregel machte ihn zur 50-px-Pille mit 24 px Polster).
   8. Suche und Filter (emeu-chat-wache.js), Filter-Knoepfe sind Haus-Chips (.emeu-chip).
   9. Konto-Karte breiter, nur wo der Chat steht.
   Spezifitaet: "body .jet-messenger-app ..." (mindestens 0,2,1) schlaegt JetMessengers einfache Klassen (0,1,0), gleich wo dessen
   Stil gedruckt wird (Block-Stile kommen bei klassischen Themes spaet).
   ============================================================ */

/* --- 1. Schalter --- */
.jet-messenger-app {
  --emeu-connect-text:          var(--color-body);
  --emeu-connect-kopf:          var(--color-headline);
  --emeu-connect-leise:         var(--color-muted);
  --emeu-connect-flaeche:       var(--color-bg-card);
  --emeu-connect-linie:         var(--color-border-subtle);
  --emeu-connect-rand:          var(--color-border);
  --emeu-connect-akzent:        var(--color-primary);
  --emeu-connect-fokus:         var(--color-focus-ring);
  --emeu-connect-fehler:        var(--color-error);
  --emeu-connect-blase-fremd:   var(--color-bg-card);
  --emeu-connect-blase-eigen:   color-mix(in srgb, var(--color-primary) 10%, var(--color-bg-card)); /* Signal mit Schleier wie der Rueckspiel-Chip */
  --emeu-connect-blase-radius:  12px;
  --emeu-connect-liste-breite:  300px;   /* 280 bis; mit 2 x 18 px Polster brach "Meine Unterhaltungen" um (244 px Inhalt), 300 = 264 px wie vorher */
  --emeu-connect-liste-polster: 24px 18px 18px 18px;
  --emeu-connect-text-polster:  24px 18px 18px 18px;
  --emeu-connect-spalten-abstand: 0;                   /* Trennlinie mittig zwischen den Polstern (Annahme, JetMessenger: 16px) */
  --emeu-connect-kopf-mindest:  320px;   /* Titelzeile: so viel Platz braucht "| Bezug  anschauen" neben dem Namen, sonst zweite Zeile */
  --emeu-connect-text-groesse:  var(--w-schrift-text-groesse, 14px);
  --emeu-connect-text-zeile:    var(--w-schrift-text-zeile, 20px);

  /* --- 2. JetMessenger-Anschluss --- */
  --jm-chats-bg:                     transparent;
  --jm-chats-border-color:           var(--emeu-connect-linie);
  --jm-chats-width:                  var(--emeu-connect-liste-breite);
  --jm-chats-padding:                var(--emeu-connect-liste-polster);   /* Liste, auch auf dem Telefon */
  --jm-chat-item-hover-bg:           var(--emeu-connect-flaeche);
  --jm-chat-item-hover-border-color: transparent;
  --jm-chat-item-hover-color:        inherit;
  --jm-chat-item-active-bg:          var(--emeu-connect-flaeche);
  --jm-messages-bg:                  transparent;
  --jm-messages-border-color:        var(--emeu-connect-linie);
  --jm-bubble-radius:                var(--emeu-connect-blase-radius);
  --jm-bubble-other-bg:              var(--emeu-connect-blase-fremd);
  --jm-bubble-other-color:           var(--emeu-connect-text);
  --jm-bubble-me-bg:                 var(--emeu-connect-blase-eigen);
  --jm-bubble-me-color:              var(--emeu-connect-kopf);
  --jm-attach-bg:                    transparent;
  --jm-attach-color:                 var(--color-icon);
  --jm-attach-border-color:          var(--emeu-connect-rand);
  --jm-chat-header-avatar-border-color: var(--emeu-connect-linie);
}

/* --- 3. Feste Farben --- */
body .jet-messenger-app {
  color: var(--emeu-connect-text);
}

/* --- Spalten: Liste und Nachrichten tragen ihr eigenes Polster, die Karte keines
   mehr (Abschnitt 9); dazwischen nur die Trennlinie der Liste. --- */
body .jet-messenger-app .jet-messenger,
body .jet-messenger-app.jet-messenger {
  gap: var(--emeu-connect-spalten-abstand);
}

body .jet-messenger-app .jet-messenger__main {
  padding: var(--emeu-connect-text-polster);
}

body .jet-messenger-app .jet-messenger__chat-item:focus-visible,
body .jet-messenger-app .jet-messenger__attach-button:focus-visible,
body .jet-messenger-app .jet-messenger__send-button:focus-visible,
body .jet-messenger-app .jet-messenger__back-button:focus-visible,
body .jet-messenger-app .jet-messenger__attachment-button:focus-visible,
body .jet-messenger-app .jet-messenger__preview-remove:focus-visible {
  outline: 2px solid var(--emeu-connect-fokus);
  outline-offset: 2px;
}

body .jet-messenger-app .jet-messenger__chat-unread-indicator {
  background: var(--emeu-connect-akzent);
}

body .jet-messenger-app .jet-messenger__error,
body .jet-messenger-app .jet-messenger__error--inline {
  color: var(--emeu-connect-fehler);
}

body .jet-messenger-app .jet-messenger__empty,
body .jet-messenger-app .jet-messenger__empty-state,
body .jet-messenger-app .jet-messenger__status,
body .jet-messenger-app .jet-messenger__notice {
  color: var(--emeu-connect-leise);
  opacity: 1;
}

body .jet-messenger-app .jet-messenger__attachment-error {
  background: var(--emeu-connect-flaeche);
  color: var(--emeu-connect-leise);
}

body .jet-messenger-app button.jet-messenger__preview-remove.jet-messenger__preview-remove {
  width: 20px;
  height: 20px;
  min-height: 0;
  padding: 0;
  background: var(--emeu-connect-flaeche);
  color: var(--emeu-connect-kopf);
  border: 1px solid var(--emeu-connect-rand);
}

/* --- 4. Schrift nach der Haus-Leiter --- */
body .jet-messenger-app .jet-messenger__header {
  margin-bottom: 12px;
}

body .jet-messenger-app .jet-messenger__header-title {
  margin: 0;
  font-size: var(--w-schrift-titel-groesse, 22px);
  line-height: var(--w-schrift-titel-zeile, 28px);
  font-weight: var(--w-schrift-betont, 600);
  color: var(--emeu-connect-kopf);
}

body .jet-messenger-app .jet-messenger__header-secondary {
  font-size: var(--w-schrift-neben-groesse, 13px);
  line-height: var(--w-schrift-neben-zeile, 18px);
  font-weight: var(--w-schrift-regulaer, 300);
  color: var(--emeu-connect-leise);
  opacity: 1;
}

/* --- 5. Kompakte Liste --- */
body .jet-messenger-app .jet-messenger__chat-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 8px;
  margin: 0 0 2px;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--radius-button, 8px);
  line-height: normal;
}

body .jet-messenger-app .jet-messenger__chat-item--active {
  box-shadow: inset 3px 0 0 var(--emeu-connect-akzent); /* wie der aktive Eintrag der Konto-Navigation */
}

body .jet-messenger-app .jet-messenger__chat-title-row {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  gap: 6px;
}

body .jet-messenger-app .jet-messenger__chat-title {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--w-schrift-name-groesse, 16px);
  line-height: var(--w-schrift-name-zeile, 20px);
  font-weight: var(--w-schrift-betont, 600);
  color: var(--emeu-connect-kopf);
}

body .jet-messenger-app .jet-messenger__chat-time {
  grid-column: 2;
  grid-row: 1;
  white-space: nowrap;
  font-size: var(--w-schrift-fuss-groesse, 12px);
  line-height: var(--w-schrift-fuss-zeile, 16px);
  font-weight: var(--w-schrift-regulaer, 300);
  color: var(--emeu-connect-leise);
  opacity: 1;
}

body .jet-messenger-app .jet-messenger__chat-item--unread .jet-messenger__chat-time {
  color: var(--emeu-connect-kopf);
}

body .jet-messenger-app .jet-messenger__chat-label {
  grid-column: 1 / -1;
  min-width: 0;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--w-schrift-neben-groesse, 13px);
  line-height: var(--w-schrift-neben-zeile, 18px);
  font-weight: var(--w-schrift-regulaer, 300);
  color: var(--emeu-connect-leise);
}

/* Seit 0.3.1 ohne Link; die zwei Regeln gelten nur noch, wenn der Filter
   emeu_chat_liste_ohne_link den Link zurueckholt. */
body .jet-messenger-app .jet-messenger__chat-label a {
  color: inherit;
  text-decoration: none;
}

body .jet-messenger-app .jet-messenger__chat-label a:hover {
  color: var(--emeu-connect-kopf);
  text-decoration: underline;
}

body .jet-messenger-app .jet-messenger__chat-meta {
  grid-column: 1 / -1;
  font-size: var(--w-schrift-fuss-groesse, 12px);
  line-height: var(--w-schrift-fuss-zeile, 16px);
  color: var(--emeu-connect-leise);
  opacity: 1;
}

/* --- 6. Nachrichten --- */
body .jet-messenger-app .jet-messenger__message {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

body .jet-messenger-app .jet-messenger__message--mine {
  align-items: flex-end;
}

body .jet-messenger-app .jet-messenger__message-author {
  margin: 0 4px 4px;
  font-size: var(--w-schrift-fuss-groesse, 12px);
  line-height: var(--w-schrift-fuss-zeile, 16px);
  font-weight: var(--w-schrift-regulaer, 300);
  color: var(--emeu-connect-leise);
  opacity: 1;
}

body .jet-messenger-app .jet-messenger__message-body {
  max-width: 85%;
  padding: 10px 14px;
  font-size: var(--emeu-connect-text-groesse);
  line-height: var(--emeu-connect-text-zeile);
  font-weight: var(--w-schrift-regulaer, 300);
}

body .jet-messenger-app .jet-messenger__message-attachments {
  width: min(85%, 480px);
}

/* --- 7. Anhang-Knopf rund (0,2,2 schlaegt die Haus-Knopfregel 0,1,2) --- */
body .jet-messenger-app button.jet-messenger__attach-button {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--jm-attach-border-color);
  background: var(--jm-attach-bg);
  color: var(--jm-attach-color);
}

body .jet-messenger-app button.jet-messenger__attach-button:hover {
  border-color: var(--emeu-connect-leise);
  background: transparent;
  color: var(--emeu-connect-kopf);
}

/* --- 8. Suche und Filter (Kasten aus emeu-chat-wache.js zwischen Ueberschrift und Liste) --- */
body .jet-messenger-app .emeu-connect-suche {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
}

body .jet-messenger-app .emeu-connect-suche[hidden],
body .jet-messenger-app .emeu-connect-suche__leer[hidden],
body .jet-messenger-app [data-emeu-verborgen] {
  display: none;
}

body .jet-messenger-app input.emeu-connect-suche__feld {
  min-height: 40px;
  padding: 8px 12px;
  font-size: var(--w-schrift-feld-groesse, 14px);
  line-height: var(--w-schrift-feld-zeile, 18px);
  font-weight: var(--w-schrift-regulaer, 300);
}

body .jet-messenger-app .emeu-connect-suche__filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body .jet-messenger-app .emeu-connect-suche__leer {
  margin: 0;
  font-size: var(--w-schrift-neben-groesse, 13px);
  line-height: var(--w-schrift-neben-zeile, 18px);
  color: var(--emeu-connect-leise);
}

/* Telefon (JetMessengers Umbruch 768 px): Linie unter der Liste (dort #e5e5e5 fest) und die Liste selbst. JetMessenger gibt ihr
   height 0 plus flex 1 1 auto; neben der Nachrichten-Spalte streckt die Zeile sie, allein auf dem Telefon bleibt sie 0 px hoch
   gemessen mit und ohne diesen Stil gleich: kein Gespraech sichtbar. Hier bekommt sie ihre natuerliche Hoehe, hoechstens 70vh. */
@media (max-width: 768px) {
  body .jet-messenger-app .jet-messenger__sidebar {
    border-bottom-color: var(--emeu-connect-linie);
  }

  body .jet-messenger-app .jet-messenger__chat-list {
    flex: 0 1 auto;
    height: auto;
    max-height: 70vh;
  }
}

/* --- 9. Konto-Karte breiter und ohne Polster, nur wo der Chat steht (0,5,1 gegen 0,4,1 in woo/emeu-woo.css, auch gegen dessen
   Telefon-Polster 1023/600 px). Polster 0: (a), die Spalten polstern selbst. --- */
body.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) > .woocommerce-MyAccount-content:has(.jet-messenger-app) {
  --emeu-connect-karte-breite: 920px;
  max-width: var(--emeu-connect-karte-breite);
  padding: 0;
}

/* --- 10. Titelzeile ueber dem Gespraech: "Name | Art", am Zeilenende "anschauen" mit Symbol. Den Knoten
   .emeu-connect-kopf haengt emeu-chat-wache.js an JetMessengers Kopf (flex, Abstand 10 px); die Ueberschrift (h2) bleibt React.
   Reicht die Zeile nicht (Telefon), rutscht der Bezug in eine zweite Zeile, ohne Trennstrich. --- */
body .jet-messenger-app .jet-messenger__conversation > .jet-messenger__header {
  flex-wrap: wrap;
  row-gap: 4px;
}

body .jet-messenger-app .jet-messenger__conversation > .jet-messenger__header > div:not(.emeu-connect-kopf) {
  flex: 0 1 auto;
  min-width: 0;
}

body .jet-messenger-app .jet-messenger__conversation .jet-messenger__header-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Feste Grundbreite (nicht die Inhaltsbreite): passt der Bezug samt Link nicht mehr neben den Namen, rutscht er in die zweite Zeile
   unabhaengig von der Schriftgroesse dort, sonst pendelte die Zeile (gemessen: langer Name liess dem Bezug 97 px). */
body .jet-messenger-app .emeu-connect-kopf {
  display: flex;
  flex: 1 1 var(--emeu-connect-kopf-mindest, 320px);
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

body .jet-messenger-app .emeu-connect-kopf__art {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  font-size: var(--w-schrift-titel-groesse, 22px);
  line-height: var(--w-schrift-titel-zeile, 28px);
  font-weight: var(--w-schrift-regulaer, 300);
  color: var(--emeu-connect-text);
}

body .jet-messenger-app .emeu-connect-kopf__trenner {
  color: var(--emeu-connect-leise);
}

body .jet-messenger-app .emeu-connect-kopf__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Der Link ist eine ruhige Pille mit eigener Klickflaeche (mindestens 32 px hoch) — die Lehre aus der Liste: kleine Ziele trifft man
   daneben. Farben aus den Schaltern, Fokus wie die Liste. */
body .jet-messenger-app a.emeu-connect-kopf__link {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid var(--emeu-connect-rand);
  border-radius: 999px;
  font-size: var(--w-schrift-text-groesse, 14px);
  line-height: var(--w-schrift-text-zeile, 20px);
  font-weight: var(--w-schrift-betont, 600);
  color: var(--emeu-connect-kopf);
  text-decoration: none;
  white-space: nowrap;
}

body .jet-messenger-app a.emeu-connect-kopf__link:hover {
  border-color: var(--emeu-connect-akzent);
  color: var(--emeu-connect-akzent);
}

body .jet-messenger-app a.emeu-connect-kopf__link:focus-visible {
  outline: 2px solid var(--emeu-connect-fokus);
  outline-offset: 2px;
}

body .jet-messenger-app a.emeu-connect-kopf__link[hidden] {
  display: none;
}

body .jet-messenger-app .emeu-connect-kopf__symbol {
  display: inline-flex;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
}

body .jet-messenger-app .emeu-connect-kopf__symbol svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* In der zweiten Zeile (das Skript setzt .ist-umgebrochen, wenn der Knoten unter der Ueberschrift steht): Bezug in Namens-Groesse als
   Unterzeile, ohne Trennstrich. */
body .jet-messenger-app .emeu-connect-kopf.ist-umgebrochen .emeu-connect-kopf__art {
  font-size: var(--w-schrift-name-groesse, 16px);
  line-height: var(--w-schrift-name-zeile, 20px);
}

body .jet-messenger-app .emeu-connect-kopf.ist-umgebrochen .emeu-connect-kopf__trenner {
  display: none;
}