/* komm-thread.css — Optik des geteilten Nachrichten-Verlaufs (Kernel).
 *
 * Gehört zu `js/components/activity/komm-thread.js` und ist mit ihm aus
 * `domain/anfrage/anfr-conversation.css` herausgelöst worden (2026-07-31). Der Grund
 * für den Umzug steht im Kopf der JS-Datei: den Verlauf brauchen jetzt ZWEI Module
 * (`anfragen` und `stammdaten`), und ein Stylesheet, das über `frontend.styles` eines
 * Moduls ausgeliefert wird, fehlt auf einem Stamp, der dieses Modul nicht gebucht hat.
 * Eine fehlende CSS-Datei wirft nichts — die Fläche rendert dann unstyled, mit
 * korrektem Inhalt, und sieht nach einem Layout-Bug aus statt nach einem
 * Auslieferungs-Fehler.
 *
 * In `anfr-conversation.css` bleibt der COMPOSER: er ist wirklich anfrage-spezifisch
 * (Antwort/Weiterleiten/Interne Notiz, Empfänger-Auflösung, Vorlagen) und hat keinen
 * zweiten Konsumenten.
 *
 * Lädt im components/-Block, also VOR sections/ und domain/ — beide dürfen Deltas
 * setzen. Tokens durchgehend (`check:css-tokens`). */

/* ── Verlauf ── */
.komm-thread { display: flex; flex-direction: column; gap: var(--space-3); }
.komm-thread-empty { color: var(--color-text-muted); font-size: var(--fs-body); padding: var(--space-4) 0; text-align: center; }

/* Solo-Modus (genau eine Mail, z.B. Postfach-Posteingang): nur Body + Anhänge,
   KEIN Karten-Kopf — Absender/Betreff/Zeit stehen bereits im Panel-Kopf. Das
   spart die 1:1-Wiederholung, die bei einer Einzelmail sonst 80% Deko wäre. */
.komm-thread--solo { gap: var(--space-2); }
.komm-thread-solobody {
  font-size: var(--fs-body); line-height: 1.6; color: var(--color-text, #1f2733);
  white-space: pre-wrap; word-break: break-word;
}
.komm-thread--solo .komm-msg-atts { padding-left: 0; margin-top: var(--space-3); }

/* Eine Nachricht = Karte mit Avatar-Kopf (liest sich als Konversation, nicht als Kasten).
   Eingang neutral (weiß), Antwort türkis-getönt, interne Notiz amber. */
.komm-msg {
  padding: var(--space-2-5) var(--space-3);
  background: var(--card-bg, #fff);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  transition: box-shadow var(--motion-fast) var(--ease-enter);
}
.komm-msg:hover { box-shadow: var(--shadow-sm); }
.komm-msg--aus {
  background: color-mix(in srgb, var(--lod-turquoise) 6%, var(--card-bg, #fff));
  border-color: color-mix(in srgb, var(--lod-turquoise) 22%, var(--color-border-light));
}
.komm-msg--note { background: var(--lod-amber-50); border-color: var(--lod-amber-200); }
/* Richtungs-Akzent links (schnelleres Scannen ein-/ausgehend/Notiz). */
.komm-msg { border-left-width: 3px; border-left-color: var(--color-border); }
.komm-msg--aus { border-left-color: var(--lod-turquoise); }
.komm-msg--note { border-left-color: var(--lod-amber-500); }

.komm-msg-head { display: flex; align-items: flex-start; gap: var(--space-2); cursor: pointer; }
/* Eine redigierte Zeile ist NICHT aufklappbar — dann darf der Kopf auch nicht wie ein
   Umschalter aussehen. Der Renderer lässt `data-komm-toggle` weg, das hier ist die
   sichtbare Hälfte derselben Aussage. */
.komm-msg--stumm .komm-msg-head { cursor: default; }
.komm-msg-avatar {
  flex-shrink: 0; width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: hsl(var(--avatar-h, 210) 32% 48%);
  color: var(--lod-white); font-weight: var(--fw-semibold); font-size: 12px;
}
.komm-msg-avatar--note { background: var(--lod-amber-500); }
.komm-msg-avatar--note img { width: 18px; height: 18px; filter: brightness(0) invert(1); }
.komm-msg-meta { min-width: 0; flex: 1 1 auto; }
.komm-msg-metatop { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.komm-msg-name { font-weight: var(--fw-semibold); color: var(--lod-darkblue-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.komm-msg-when { flex-shrink: 0; color: var(--color-text-muted); font-size: var(--fs-caption); white-space: nowrap; }
.komm-msg-metasub { display: flex; align-items: center; gap: var(--space-2); margin-top: 2px; min-width: 0; }
.komm-msg-dir {
  flex-shrink: 0; padding: 1px var(--space-1-5); border-radius: var(--radius-pill);
  font-size: 10px; font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .04em;
  background: var(--bg-secondary, #f6f7f9); color: var(--color-text-muted);
}
.komm-msg-dir--out { background: color-mix(in srgb, var(--lod-turquoise) 18%, #fff); color: var(--lod-turquoise-700, #70B1B6); }
.komm-msg-dir--note { background: color-mix(in srgb, var(--lod-amber-500) 22%, #fff); color: var(--lod-amber-700); }
.komm-msg-subject { color: var(--color-text-muted); font-size: var(--fs-caption); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* Marken-Pillen (Zuordnungsart, Konfidenz, „Archiv"). Sie geben nach, bevor der
   Betreff es tut: die Herkunft einer Zuordnung ist Zusatzinformation, der Betreff
   sagt, worum es geht. */
.komm-msg-marken { display: inline-flex; flex-shrink: 1; gap: var(--space-1); min-width: 0; overflow: hidden; }
.komm-msg-marken .pill { flex-shrink: 0; }

/* Body: eingeklappt 3 Zeilen, Kopf-Klick klappt auf. Unter dem Avatar eingerückt. */
.komm-msg-body {
  margin-top: var(--space-2); padding-left: calc(34px + var(--space-2));
  font-size: var(--fs-body); line-height: 1.55; color: var(--color-text, #1f2733);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.komm-msg--open .komm-msg-body { display: block; -webkit-line-clamp: unset; overflow: visible; white-space: pre-wrap; }

/* Hinweis STATT Body — die redigierte Zeile. Bewusst als ruhige, kursive Zeile und
   nicht als Warn-Kasten: dass der Inhalt im Postfach eines Kollegen bleibt, ist eine
   Entscheidung des Unternehmens, kein Defekt. In Orange gelesen provoziert es eine
   Support-Anfrage (dieselbe Tonart-Überlegung wie beim abgeschalteten
   Tenant-Schalter im Outlook-Pane). */
.komm-msg-hinweis {
  margin-top: var(--space-2); padding-left: calc(34px + var(--space-2));
  font-size: var(--fs-caption); font-style: italic; color: var(--color-text-muted);
}

/* Herkunft: „über Kontakt Max Meier" — warum diese Zeile hier steht, und ihr Drill. */
.komm-msg-herkunft {
  margin-top: var(--space-1-5); padding-left: calc(34px + var(--space-2));
  font-size: var(--fs-caption); color: var(--color-text-muted);
}
.komm-msg-herkunft a { color: var(--lod-darkblue); text-decoration: none; }
.komm-msg-herkunft a:hover { text-decoration: underline; }

/* Anhänge (Download-Chips). */
.komm-msg-atts { display: flex; flex-wrap: wrap; gap: var(--space-1-5); margin-top: var(--space-2); padding-left: calc(34px + var(--space-2)); }
.komm-msg-att {
  display: inline-flex; align-items: center; gap: var(--space-1);
  max-width: 260px; padding: 2px var(--space-2);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--card-bg, #fff); color: var(--lod-darkblue-900);
  font-size: var(--fs-caption); text-decoration: none;
}
.komm-msg-att:hover { background: var(--bg-secondary, #f6f7f9); border-color: var(--color-border-hover); }
.komm-msg-att .ui-ico img { width: 14px; height: 14px; opacity: .7; }
/* .komm-msg-attname kuerzt ueber die Utility `.truncate` (base.css). */
.komm-msg-attsize { color: var(--color-text-muted); flex-shrink: 0; }
.komm-msg-attdl img { width: 13px; height: 13px; }

/* Anhang-ANZAHL ohne Download: die Firmen-Zeitachse weiß, dass etwas dranhängt, kann
   die Bytes aber nicht holen (keine Graph-Message-Id in `lod_kommunikation`, und der
   Anhang liegt im Postfach eines anderen Menschen). Bewusst kein Chip-Rahmen — er
   sähe klickbar aus. */
.komm-msg-attinfo { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-text-muted); font-size: var(--fs-caption); }
.komm-msg-attinfo .ui-ico img { width: 14px; height: 14px; opacity: .6; }

/* „liegt im Kundenordner" — Bestätigung, nicht Warnung: in Erfolgs-Ton, damit die Zeile
   beim Überfliegen sagt „erledigt" und niemand die Datei zweimal ablegt. */
.komm-msg-attablage { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--lod-success-700); font-size: var(--fs-caption); }
.komm-msg-attablage .ui-ico img { width: 14px; height: 14px; opacity: .75; }

/* Ablegen-Knopf: leise, im Zeilen-Fluss. Er steht nur da, wo er auch tragen kann
   (eigenes Postfach + Graph-Id vorhanden) — deshalb braucht er keine Erklärung. */
.app-scope .komm-msg-attlegen {
  border: 1px dashed var(--color-border); border-radius: var(--radius-md);
  background: transparent; color: var(--lod-darkblue);
  padding: 1px var(--space-1-5); font-size: var(--fs-caption); font-weight: var(--fw-medium); cursor: pointer;
}
.app-scope .komm-msg-attlegen:hover { background: var(--bg-secondary, #f6f7f9); border-color: var(--color-border-hover); }
.app-scope .komm-msg-attlegen:focus-visible { outline: none; box-shadow: var(--lod-shadow-focus); }

/* ── Volltext (aufgeklappt) ──────────────────────────────────────────────────
   Fremdes Mail-HTML, serverseitig bereinigt UND von jeder Remote-Quelle befreit.
   `overflow-x: auto` ist Pflicht, nicht Politur: Newsletter bringen Tabellen mit
   fixen Breiten von 600–800px mit, und in einem 720px-Drawer schiebt das sonst die
   ganze Fläche waagerecht. */
.komm-msg-volltext {
  margin-top: var(--space-2); padding-left: calc(34px + var(--space-2));
  font-size: var(--fs-body); line-height: 1.55; color: var(--color-text, #1f2733);
  overflow-x: auto;
}
.komm-msg-volltext:empty { display: none; }
/* Fremdes Markup bringt eigene Breiten mit — der Deckel gehört uns. */
.komm-msg-volltext table { max-width: 100%; }
.komm-msg-volltext img { max-width: 100%; height: auto; }
/* Der Grund für ein zerlegtes Layout — benannt statt stillschweigend. Denselben Hinweis
   zeigen Outlook und Gmail an derselben Stelle, die Nutzer kennen ihn. */
.komm-msg-blockiert {
  margin-top: var(--space-2); padding: var(--space-1-5) var(--space-2);
  border-radius: var(--radius-md); background: var(--bg-secondary, #f6f7f9);
  color: var(--color-text-muted); font-size: var(--fs-caption);
}

/* Aktions-Link („In Outlook öffnen") — nur, wenn er wirklich trägt. */
.komm-msg-aktion { margin-top: var(--space-1-5); padding-left: calc(34px + var(--space-2)); font-size: var(--fs-caption); }
.komm-msg-aktion a { color: var(--lod-darkblue); text-decoration: none; }
.komm-msg-aktion a:hover { text-decoration: underline; }