/* anfr-conversation.css — geteilte Konversations-Optik (Domain-SSOT Anfrage/Servicepostfach).

   Stylet den geteilten Verlauf-Renderer (anfr-mail-thread.js, `.anfr-conv-item…`)
   und den geteilten Composer (anfr-composer.js, `.anfr-conv-comp…`). Genutzt vom
   Postfach-Konversations-Workspace (Section) UND der Drawer-Kommunikations-
   Sektion — beide innerhalb `.app-scope`. Lädt im domain/*-Block (nach
   components/ + sections/), darf deren Deltas also überschreiben. Tokens
   durchgehend. */

/* ── Verlauf (Thread) ── */
.anfr-conv-thread { display: flex; flex-direction: column; gap: var(--space-3); }
.anfr-conv-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. */
.anfr-conv-thread--solo { gap: var(--space-2); }
.anfr-conv-solobody {
  font-size: var(--fs-body); line-height: 1.6; color: var(--color-text, #1f2733);
  white-space: pre-wrap; word-break: break-word;
}
.anfr-conv-thread--solo .anfr-conv-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. */
.anfr-conv-item {
  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);
}
.anfr-conv-item:hover { box-shadow: var(--shadow-sm); }
.anfr-conv-item--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));
}
.anfr-conv-item--note { background: var(--lod-amber-50); border-color: var(--lod-amber-200); }
/* Richtungs-Akzent links (schnelleres Scannen ein-/ausgehend/Notiz). */
.anfr-conv-item { border-left-width: 3px; border-left-color: var(--color-border); }
.anfr-conv-item--aus { border-left-color: var(--lod-turquoise); }
.anfr-conv-item--note { border-left-color: var(--lod-amber-500); }

.anfr-conv-head { display: flex; align-items: flex-start; gap: var(--space-2); cursor: pointer; }
.anfr-conv-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;
}
.anfr-conv-avatar--note { background: var(--lod-amber-500); }
.anfr-conv-avatar--note img { width: 18px; height: 18px; filter: brightness(0) invert(1); }
.anfr-conv-meta { min-width: 0; flex: 1 1 auto; }
.anfr-conv-metatop { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.anfr-conv-name { font-weight: var(--fw-semibold); color: var(--lod-darkblue-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.anfr-conv-when { flex-shrink: 0; color: var(--color-text-muted); font-size: var(--fs-caption); white-space: nowrap; }
.anfr-conv-metasub { display: flex; align-items: center; gap: var(--space-2); margin-top: 2px; min-width: 0; }
.anfr-conv-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);
}
.anfr-conv-dir--out { background: color-mix(in srgb, var(--lod-turquoise) 18%, #fff); color: var(--lod-turquoise-700, #70B1B6); }
.anfr-conv-dir--note { background: color-mix(in srgb, var(--lod-amber-500) 22%, #fff); color: var(--lod-amber-700); }
.anfr-conv-subject { color: var(--color-text-muted); font-size: var(--fs-caption); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* Body: eingeklappt 3 Zeilen, Kopf-Klick klappt auf. Unter dem Avatar eingerückt. */
.anfr-conv-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;
}
.anfr-conv-item--open .anfr-conv-body { display: block; -webkit-line-clamp: unset; overflow: visible; white-space: pre-wrap; }

/* Anhänge (Download-Chips). */
.anfr-conv-atts { display: flex; flex-wrap: wrap; gap: var(--space-1-5); margin-top: var(--space-2); padding-left: calc(34px + var(--space-2)); }
.anfr-conv-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;
}
.anfr-conv-att:hover { background: var(--bg-secondary, #f6f7f9); border-color: var(--color-border-hover); }
.anfr-conv-att .ui-ico img { width: 14px; height: 14px; opacity: .7; }
.anfr-conv-attname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anfr-conv-attsize { color: var(--color-text-muted); flex-shrink: 0; }
.anfr-conv-attdl img { width: 13px; height: 13px; }

/* ── Composer ── */
.anfr-conv-composer { display: flex; flex-direction: column; gap: var(--space-2-5); }

/* Modus-Umschalter (Antwort / Weiterleiten / Interne Notiz). Nur bei >1 Modus —
   im Postfach wählt der Launcher den Modus, dann rendert der Composer keinen. */
.anfr-conv-compmodes {
  display: inline-flex; gap: 2px; padding: 3px; align-self: flex-start;
  background: var(--bg-secondary, #f6f7f9); border-radius: var(--radius-lg);
}
.app-scope .anfr-conv-compmode {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-1) var(--space-2-5);
  border: none; background: transparent; border-radius: var(--radius-md);
  color: var(--color-text-muted); font-weight: var(--fw-medium); font-size: var(--fs-caption);
  cursor: pointer;
}
.app-scope .anfr-conv-compmode .ui-ico img { width: 15px; height: 15px; opacity: .7; }
.app-scope .anfr-conv-compmode:hover { color: var(--lod-darkblue-900); }
.app-scope .anfr-conv-compmode:focus-visible { outline: none; box-shadow: var(--lod-shadow-focus); }
.app-scope .anfr-conv-compmode--active {
  background: var(--card-bg, #fff); color: var(--lod-darkblue-900);
  font-weight: var(--fw-semibold); box-shadow: var(--shadow-sm);
}

/* Kompakte Empfänger/Betreff-Meta-Zeile (Antwort, eingeklappt) — beide sind
   korrekt vorbelegt, „Ändern" klappt die echten Felder auf (Ruhe-Prinzip). */
.app-scope .anfr-conv-compmeta {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  width: 100%; box-sizing: border-box;
  padding: var(--space-2) var(--space-2-5);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--bg-secondary, #f6f7f9); color: var(--color-text, #1f2733);
  font-size: var(--fs-caption); text-align: left; cursor: pointer;
}
.app-scope .anfr-conv-compmeta:hover { border-color: var(--color-border-hover); background: var(--card-bg, #fff); }
.app-scope .anfr-conv-compmeta:focus-visible { outline: none; box-shadow: var(--lod-shadow-focus); border-color: var(--lod-turquoise); }
.anfr-conv-compmeta-line { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anfr-conv-compmeta-line strong { color: var(--lod-darkblue-900); font-weight: var(--fw-semibold); }
.anfr-conv-compmeta-sep { margin: 0 var(--space-1-5); opacity: .5; }
.anfr-conv-compmeta-edit { flex-shrink: 0; color: var(--lod-darkblue); font-weight: var(--fw-medium); }

/* An/Cc/Bcc/Betreff-Zeilen. */
.anfr-conv-comprow { display: flex; align-items: center; gap: var(--space-2); }
.anfr-conv-complabel { flex-shrink: 0; width: 52px; color: var(--color-text-muted); font-size: var(--fs-caption); }
.app-scope .anfr-conv-compto,
.app-scope .anfr-conv-compcc,
.app-scope .anfr-conv-compbcc,
.app-scope .anfr-conv-compsubject,
.app-scope .anfr-conv-compbody {
  width: 100%; box-sizing: border-box; flex: 1 1 auto; min-width: 0;
  padding: var(--space-2) var(--space-2-5);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--card-bg, #fff); color: var(--color-text, #1f2733);
  font-size: var(--fs-body); font-family: inherit;
}
.app-scope .anfr-conv-compbody { resize: vertical; min-height: 120px; line-height: 1.55; }
.app-scope .anfr-conv-compto:focus,
.app-scope .anfr-conv-compcc:focus,
.app-scope .anfr-conv-compbcc:focus,
.app-scope .anfr-conv-compsubject:focus,
.app-scope .anfr-conv-compbody:focus {
  outline: none; border-color: var(--lod-turquoise);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--lod-turquoise) 30%, transparent);
}
.anfr-conv-ccwrap { display: flex; flex-direction: column; gap: var(--space-2); }
/* Reply-Empfänger löst das Backend auf (Drawer) — statischer Hinweis statt An-Feld. */
.anfr-conv-autoto { flex: 1 1 auto; color: var(--color-text, #1f2733); font-size: var(--fs-body); }
.app-scope .anfr-conv-ccbtn {
  flex-shrink: 0; border: none; background: transparent; cursor: pointer;
  color: var(--lod-darkblue); font-size: var(--fs-caption); font-weight: var(--fw-medium);
  padding: var(--space-1) var(--space-1-5); border-radius: var(--radius-sm);
}
.app-scope .anfr-conv-ccbtn:hover { background: var(--bg-secondary, #f6f7f9); }
.app-scope .anfr-conv-ccbtn:focus-visible { outline: none; box-shadow: var(--lod-shadow-focus); }

/* Notiz-Hinweis (nur intern). */
.anfr-conv-notehint {
  display: flex; align-items: center; gap: var(--space-1-5);
  padding: var(--space-1-5) var(--space-2-5); border-radius: var(--radius-md);
  background: var(--lod-amber-50); color: var(--lod-amber-700);
  font-size: var(--fs-caption); font-weight: var(--fw-medium);
}
.anfr-conv-notehint .ui-ico img { width: 15px; height: 15px; }

/* Werkzeuge (Vorlage/Anhang/Zitieren) sitzen leise rechts in der Fußzeile,
   nicht mehr als eigene Button-Reihe über dem Text. */
.anfr-conv-comptools { display: inline-flex; gap: var(--space-1); align-items: center; margin-left: auto; }
.anfr-conv-comptools:empty { display: none; }

/* Datei-Chips (vor dem Senden). */
.anfr-conv-compfilechips { display: flex; flex-wrap: wrap; gap: var(--space-1-5); }
.anfr-conv-compfilechips:empty { display: none; }
.anfr-conv-compfile {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 2px var(--space-1-5) 2px var(--space-1); border-radius: var(--radius-md);
  background: var(--bg-secondary, #f6f7f9); border: 1px solid var(--color-border-light);
  font-size: var(--fs-caption); color: var(--lod-darkblue-900); max-width: 240px;
}
.anfr-conv-compfile .ui-ico img { width: 13px; height: 13px; opacity: .7; }
.anfr-conv-compfilesize { color: var(--color-text-muted); }
.anfr-conv-compfilex {
  border: none; background: transparent; cursor: pointer; color: var(--color-text-muted);
  font-size: 13px; line-height: 1; padding: 0 2px; margin-left: 2px;
}
.anfr-conv-compfilex:hover { color: var(--lod-danger); }
/* Fußzeile: Senden (primär) + Abbrechen links, Werkzeuge rechts. Button-Optik
   kommt vollständig aus dem CTA-SSOT (primitives/button.css) — hier NUR Layout. */
.anfr-conv-compactions { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-1); }
/* „Ursprüngliche Nachricht zitieren"-Umschalter (nur Antwort, in den Werkzeugen). */
.anfr-conv-quotetoggle { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-caption); color: var(--color-text-muted); cursor: pointer; white-space: nowrap; padding-left: var(--space-1); }
.anfr-conv-quotetoggle input { margin: 0; cursor: pointer; accent-color: var(--lod-turquoise); }