/* ══════════════════════════════════════════════════════════════════════════════
   VIMailView — E-Mail-Leseansicht (Namespace .mv-)
   Gehört zu public/mail-view.js. AUSSCHLIESSLICH Tokens (var(--…)) — keine
   Hex-Farben, keine rohen px-Schriftgrößen.

   Aufbau des Lesebereichs (Flex-Spalte, volle Höhe des Detailbereichs):
       .mv-head    Betreff · Absender · Empfänger · Datum · Aktionen   (fest)
       .mv-atts    Anhänge                                             (fest)
       .mv-body    Inhalt — nimmt den GESAMTEN Rest und scrollt selbst
   Der Mailtext liegt damit nie in einer zusätzlichen kleinen Scrollbox.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Hier stand eine Regel für `.mv` (Flex-Spalte über die volle Höhe). Kein
   einziges Element in der Anwendung trägt diese Klasse: VIMailView.render()
   schreibt Kopf, Anhänge und Inhalt DIREKT in den Wirt, und der Verlauf setzt
   die Klasse ausdrücklich NICHT (verlauf.js) — mail-view.css lädt nach
   verlauf.css und hätte sonst das `display: none` der gestapelten Ansicht
   überstimmt, sodass unter der Liste dauerhaft ein leerer Lesebereich stünde.
   Die Regel war also nicht nur wirkungslos, sondern eine Falle. Die
   Flex-Spalte des Lesebereichs steht in verlauf.css bei `.vl-detail`. */

/* ── Kopf ──────────────────────────────────────────────────────────────────── */
/* Der Kopf wird NIE beschnitten.
   Vorher stand hier `max-height: 40%; overflow-y: auto` — das kappte bei knapper
   Höhe die eigenen Aktionsknöpfe (sie ragten nur noch als abgerundete Stummel
   unter der Kante hervor), schnitt „Erfasst von" mitten im Wort ab und legte eine
   zweite Bildlaufleiste über den Rahmen. Begrenzt wird deshalb ausschließlich der
   Teil, der unbegrenzt wachsen KANN: die Empfängerliste (.mv-meta). Betreff,
   Kennzeichnung und Aktionen behalten immer ihre volle Höhe. */
.mv-head {
  flex: 0 0 auto;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-default);
  background: var(--color-surface);
}
/* Nur die Merkmalsliste ist gedeckelt — und zwar so, dass immer ganze Zeilen
   stehen bleiben, nie ein halb abgeschnittener Wert. */
.mv-meta {
  max-height: 132px;
  overflow-y: auto;
}
.mv-back {
  display: none;                       /* nur in der gestapelten Ansicht (mobil) */
  border: 0;
  background: none;
  padding: 0 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  cursor: pointer;
}
.mv-subject {
  margin: 0 0 var(--space-1);
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold, 600);
  line-height: 1.35;
  color: var(--text-primary);
  /* Vollständiger Betreff — bewusst KEIN Abschneiden (Zielbild §3). */
  overflow-wrap: anywhere;
}
.mv-fromline {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}
.mv-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold, 600);
}
/* Absenderzeile: Name UND Adresse, die Adresse eine Stufe leiser. Die Adresse
   stand vorher nur im `title` — sichtbar war allein „Max Mustermann", ohne jede
   Möglichkeit zu prüfen, aus welchem Postfach die Nachricht wirklich kam. */
.mv-fromwrap {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
}
.mv-fromname {
  font-size: var(--text-base);
  font-weight: var(--fw-medium, 500);
  color: var(--text-primary);
  min-width: 0;
  overflow-wrap: anywhere;
}
.mv-fromaddr {
  font-size: var(--text-sm);
  color: var(--text-muted);
  min-width: 0;
  overflow-wrap: anywhere;
}
.mv-chip {
  font-size: var(--text-xxs);
  border-radius: var(--radius-sm);
  padding: 1px var(--space-2);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  white-space: nowrap;
}
.mv-chip-high { border-color: var(--color-warning-border, var(--border-default)); color: var(--color-warning-ink, var(--text-secondary)); }
.mv-chip-low  { color: var(--text-muted); }

/* Empfängerblock — ruhige Wertetabelle statt technischer Rohzeile.
   Die Beschriftungsspalte ist breit genug für „Erfasst von" und bricht NICHT um;
   mit den früheren 62 px wurde genau dieses Wort zweizeilig und dann beschnitten. */
.mv-meta { display: grid; gap: 2px; }
.mv-meta-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: var(--space-2); align-items: baseline; }
.mv-meta-k { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }
.mv-meta-v { font-size: var(--text-sm); color: var(--text-secondary); min-width: 0; }
.mv-meta-empty { color: var(--text-muted); }
.mv-addr { overflow-wrap: anywhere; }
.mv-addr + .mv-addr::before { content: ', '; color: var(--text-muted); }
.mv-more-recip {
  border: 0; background: none; padding: 0 0 0 var(--space-1);
  font-size: var(--text-xs); color: var(--text-secondary);
  text-decoration: underline; cursor: pointer;
}
.mv-recip-rest[hidden] { display: none; }

.mv-banner {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}
.mv-banner-fail {
  background: var(--color-danger-soft, var(--color-surface-sunken));
  color: var(--color-danger-ink, var(--text-primary));
}

/* ── Aktionen ──────────────────────────────────────────────────────────────── */
.mv-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.mv-act {
  border: 1px solid var(--border-default);
  background: var(--color-surface);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  padding: 5px var(--space-3);
  font-size: var(--text-sm);
  cursor: pointer;
}
.mv-act:hover { background: var(--color-surface-sunken); }
.mv-act-primary {
  background: var(--brand-primary, var(--color-forest));
  border-color: var(--brand-primary, var(--color-forest));
  color: var(--text-inverse);
}
.mv-act-primary:hover { filter: brightness(0.95); background: var(--brand-primary, var(--color-forest)); }

/* ── Anhänge ───────────────────────────────────────────────────────────────── */
.mv-atts {
  flex: none;
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border-default);
  background: var(--color-surface-sunken);
  /* Bis zu drei Anhänge stehen IMMER vollständig da — erst darüber scrollt der
     Kasten. Vorher galt nur „18 % der Lesefläche": schon der zweite Anhang wurde
     dadurch auf halber Höhe abgeschnitten und sah aus wie ein Darstellungsfehler. */
  max-height: max(20%, 170px);
  overflow-y: auto;
}
.mv-atts-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-1); }
.mv-atts-t { font-size: var(--text-xs); color: var(--text-muted); }
.mv-atts-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.mv-att {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  padding: 3px var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.mv-att-ico { flex: none; }
.mv-ftype {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 26px; padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--color-surface-sunken);
  color: var(--text-secondary);
  font-size: var(--text-xxs);
  font-weight: var(--fw-semibold, 600);
}
.mv-att-txt { min-width: 0; display: grid; gap: 0; line-height: 1.35; }
/* Dateiname vollständig lesbar — er darf umbrechen statt zu kürzen. */
.mv-att-name { font-size: var(--text-sm); color: var(--text-primary); overflow-wrap: anywhere; }
.mv-att-sub { font-size: var(--text-xs); color: var(--text-muted); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.mv-att-done { color: var(--color-success-ink, var(--text-secondary)); }
.mv-att-nofile { color: var(--text-muted); font-style: italic; }
.mv-att-acts { display: flex; flex-wrap: wrap; gap: var(--space-1); justify-content: flex-end; }
.mv-att-a {
  border: 1px solid transparent;
  background: none;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  padding: 3px var(--space-2);
  font-size: var(--text-xs);
  cursor: pointer;
  white-space: nowrap;
}
.mv-att-a:hover { background: var(--color-surface-sunken); border-color: var(--border-default); }
.mv-att-a-take { color: var(--color-forest); }

/* ── Inhalt ────────────────────────────────────────────────────────────────── */
/* Der Rahmen bekommt den GESAMTEN Rest der Höhe und scrollt selbst — der Mailtext
   sitzt nie in einer zusätzlichen 400-px-Box (Zielbild §9). */
/* Der Mailtext bekommt den Rest — und niemals weniger als diese Grundfläche.
   Genau daran krankte die Vorgängerlösung: der Text landete in einer 220-px-Box. */
.mv-body { flex: 1 1 auto; min-height: 200px; display: flex; flex-direction: column; }
.mv-frame {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  border: 0;
  background: var(--color-surface);
}
.mv-plain {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: var(--space-4);
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--text-primary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* Hinweis auf blockierte externe Bilder: eine leise Zeile, kein Warnbanner.
   Es ist eine Information, keine Störung — deshalb neutrale Fläche statt Bernstein. */
.mv-remote {
  flex: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-4);
  background: var(--color-surface-sunken);
  border-bottom: 1px solid var(--border-default);
  font-size: var(--text-xxs);
  line-height: 1.6;
}
.mv-remote-t { color: var(--text-muted); }
.mv-remote-b {
  border: 1px solid var(--border-default);
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  padding: 2px var(--space-2);
  font-size: var(--text-xs);
  cursor: pointer;
  white-space: nowrap;
}

/* ── Leerzustand ───────────────────────────────────────────────────────────── */
.mv-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-3); height: 100%; padding: var(--space-7) var(--space-5); text-align: center;
}
.mv-empty-i { width: 30px; height: 30px; color: var(--text-muted); opacity: .5; }
.mv-empty-t { font-size: var(--text-sm); color: var(--text-muted); }

/* ── Ablagedialog ──────────────────────────────────────────────────────────── */
.mv-fd-grp { margin-bottom: var(--space-4); }
.mv-fd-lbl { display: block; font-size: var(--text-xs); color: var(--text-muted); margin-bottom: var(--space-1); }
.mv-fd-val { font-size: var(--text-sm); color: var(--text-primary); }
.mv-fd-files { display: grid; gap: var(--space-1); }
.mv-fd-file {
  display: flex; justify-content: space-between; gap: var(--space-3);
  font-size: var(--text-sm); color: var(--text-primary);
  padding: var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow-wrap: anywhere;
}
.mv-fd-size { color: var(--text-muted); font-size: var(--text-xs); white-space: nowrap; }
.mv-fd-note { margin: 0; font-size: var(--text-xs); color: var(--text-muted); line-height: 1.5; }

/* ── Gestapelte Ansicht (Tablet/Mobil) ─────────────────────────────────────── */
/* Auf schmalen Geräten scrollt die NACHRICHT ALS GANZES — so, wie man es von
   jedem Mailprogramm am Telefon kennt. Kopf und Anhänge werden also nicht
   festgehalten (dafür ist der Platz zu knapp, der Text bliebe sonst ein
   170-px-Streifen), sondern wandern mit. Der Inhaltsrahmen bekommt dafür eine
   großzügige Grundhöhe, damit übliche Mails ohne zweites Scrollen hineinpassen. */
@media (max-width: 900px) {
  .mv-back { display: inline-block; }
  .mv-head { padding: var(--space-3); max-height: none; overflow: visible; }
  .mv-atts { padding: var(--space-2) var(--space-3); max-height: none; }
  .mv-body { min-height: 0; }
  .mv-frame { min-height: 78vh; }
  .mv-plain { overflow: visible; }
  .mv-meta-row { grid-template-columns: 52px minmax(0, 1fr); }
  .mv-att { grid-template-columns: auto minmax(0, 1fr); }
  .mv-att-acts { grid-column: 1 / -1; justify-content: flex-start; }
  /* Aktionen mobil groß genug zum Treffen. */
  .mv-act, .mv-att-a { min-height: 32px; }
}