/* Stufe 4 – E-Mail senden/empfangen (wird von index.html nach app.css geladen). Alle Klassen mit „m4-“. */

/* ---------- E-Mail schreiben */
.m4-modal.modal-wide { width: min(940px, 100%); }
.m4-compose { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 18px; align-items: start; }
.m4-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.m4-note { padding: 11px 14px; }
.m4-fields { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.m4-row { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 12px; border-top: 1px solid var(--line-2); }
.m4-row:first-child { border-top: 0; }
.m4-row > span { flex: 0 0 58px; font-size: 13px; color: var(--ink-3); }
.m4-row input, .m4-row select { flex: 1; min-width: 0; height: 40px; border: 0; background: transparent; font: inherit; font-size: 14px; color: var(--ink); outline: none; padding: 0; }
.m4-row select { cursor: pointer; }
.m4-row:focus-within { box-shadow: inset 3px 0 0 var(--brand); }
.m4-inline { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.m4-body { width: 100%; min-height: 220px; padding: 12px 13px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); font: inherit; font-size: 14px; line-height: 1.55; color: var(--ink); resize: vertical; outline: none; }
.m4-body:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.m4-link { border: 0; background: none; padding: 0; color: var(--brand); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.m4-link:hover { text-decoration: underline; }
.m4-err { font-size: 12.5px; color: var(--danger); margin: -4px 2px 0; }
.m4-small { font-size: 12.5px; }

.m4-reply { display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 12px; border-radius: var(--r); background: color-mix(in srgb, var(--mail-in) 10%, var(--surface)); color: var(--ink-2); font-size: 13px; }
.m4-reply .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m4-chip-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 30px; padding: 0 11px; border: 1px dashed var(--line); border-radius: 15px; background: var(--surface-2); color: var(--ink-2); font: inherit; font-size: 12.5px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m4-chip-btn:hover { border-color: var(--brand); color: var(--brand-ink); }
.m4-x { display: inline-grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 7px; background: transparent; color: var(--ink-3); cursor: pointer; flex: none; }
.m4-x:hover { background: var(--surface-3); color: var(--ink); }

.m4-sig { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.m4-check { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--ink-2); cursor: pointer; }
.m4-check input { width: 16px; height: 16px; accent-color: var(--brand); }
.m4-sig-pre { flex-basis: 100%; margin: 0; padding: 9px 12px; border-left: 3px solid var(--line); background: var(--surface-2); border-radius: 0 8px 8px 0; font: inherit; font-size: 13px; line-height: 1.5; color: var(--ink-2); white-space: pre-wrap; }

.m4-atts { border: 1px solid var(--line-2); border-radius: var(--r); padding: 10px 12px; background: var(--surface-2); }
.m4-atts-head { display: flex; align-items: center; gap: 7px; font-size: 13.5px; }
.m4-atts-head .muted { margin-left: auto; font-size: 12.5px; }
.m4-doclist { display: flex; flex-direction: column; margin-top: 6px; max-height: 190px; overflow: auto; }
.m4-doc { display: flex; align-items: center; gap: 9px; padding: 6px 0; border-top: 1px solid var(--line-2); cursor: pointer; font-size: 13.5px; }
.m4-doc:first-child { border-top: 0; }
.m4-doc input { width: 16px; height: 16px; accent-color: var(--brand); flex: none; }
.m4-doc .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.m4-doc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m4-doc .sub { font-size: 12px; color: var(--ink-3); }
.m4-doc.off { cursor: default; opacity: .6; }
.m4-atts .m4-small { margin-top: 4px; }

.m4-alert { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border-radius: var(--r); background: var(--faellig-bg); color: var(--faellig); font-size: 13.5px; line-height: 1.45; }
.m4-alert .icon { flex: none; margin-top: 1px; }

.m4-side { position: sticky; top: 0; border: 1px solid var(--line-2); border-radius: var(--r); padding: 10px 12px; background: var(--surface-2); }
.m4-side > summary { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; list-style: none; }
.m4-side > summary::-webkit-details-marker { display: none; }
.m4-side > summary .count { color: var(--ink-3); font-weight: 500; }
.m4-side .mini-list { margin-top: 6px; }
.m4-tpl { flex: 1; justify-content: flex-start; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; gap: 6px; }
.m4-tpl .m4-tpl-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.m4-tpl .m4-tpl-sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ink-3); font-weight: 400; font-size: 12px; }
.m4-tpl-warn { flex: none; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 1px 6px; border-radius: 4px; background: var(--faellig-bg); color: var(--faellig); }
.m4-tpl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 8px; }
.m4-tpl-list { max-width: 640px; }
.m4-tpl-body { width: 100%; min-height: 200px; resize: vertical; font: inherit; line-height: 1.5; }
.m4-ph { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.m4-ph-chip { height: 28px; padding: 0 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font: inherit; font-size: 12.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; cursor: pointer; }
.m4-ph-chip:hover { border-color: var(--brand); color: var(--brand); }
@media (max-width: 860px) { .m4-tpl-body { font-size: 16px; } }
.m4-side .m4-small { margin-top: 8px; }

/* ---------- Einstellungen → E-Mail */
.m4-settings .panel-head h3 .icon { color: var(--ink-3); }
.m4-sub { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.m4-sub:first-child { padding-top: 0; border-top: 0; }
.m4-sub h4 { font-size: 13.5px; font-weight: 600; }
.m4-sub > .muted.m4-small { margin-top: -4px; }
.m4-sig-edit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.m4-sig-preview { display: flex; flex-direction: column; gap: 5px; }
.m4-sig-preview .m4-sig-pre { min-height: 84px; }
.m4-sig-box { display: flex; flex-direction: column; gap: 10px; padding-bottom: 2px; }
.m4-sig-box .m4-sig-pre { min-height: 84px; }
.m4-sig-logo { display: block; max-width: 100%; height: auto; margin-left: 15px; }
.m4-logo-edit { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: var(--r); }
.m4-range { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); }
.m4-range input { flex: 1; accent-color: var(--brand); }
.m4-state { display: flex; gap: 10px; align-items: flex-start; padding: 10px 13px; border-radius: var(--r); font-size: 13px; line-height: 1.45; }
.m4-state.warn { background: var(--neu-bg); color: var(--neu); }
.m4-state .icon { flex: none; margin-top: 1px; }
.m4-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--closed-dot); }
.m4-dot.ok { background: var(--bearb-dot); box-shadow: 0 0 0 3px var(--bearb-bg); }
.m4-dot.warn { background: var(--neu-dot); box-shadow: 0 0 0 3px var(--neu-bg); }
.m4-chip { height: 22px; font-size: 12px; background: var(--bearb-bg); color: var(--bearb); }
.m4-settings code, .m4-compose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; padding: 1px 5px; border-radius: 5px; background: var(--surface-3); color: var(--ink-2); word-break: break-all; }
.m4-guide { border-top: 1px solid var(--line-2); padding-top: 12px; font-size: 13.5px; }
.m4-guide > summary { display: flex; align-items: center; gap: 7px; cursor: pointer; font-weight: 600; color: var(--ink-2); list-style: none; }
.m4-guide > summary::-webkit-details-marker { display: none; }
.m4-guide ol { margin: 10px 0 8px 20px; display: flex; flex-direction: column; gap: 7px; line-height: 1.5; color: var(--ink-2); }

/* ---------- Handy */
@media (max-width: 860px) {
  .m4-compose { grid-template-columns: 1fr; gap: 12px; }
  .m4-side { position: static; order: -1; padding: 8px 12px; }
  .m4-row > span { flex-basis: 50px; }
  .m4-row input, .m4-row select { font-size: 16px; } /* kein Zoom auf iOS */
  .m4-body { font-size: 16px; min-height: 180px; }
  .m4-sig-edit { grid-template-columns: 1fr; }
  .m4-doclist { max-height: 160px; }
}

/* Integration: Antworten-Knopf und nicht übertragene Anhänge im Verlauf */
.tl-reply { margin-top: 10px; }
.att.att-skipped { background: transparent; border: 1px dashed var(--line); color: var(--ink-3, var(--muted)); cursor: default; }
.att.att-skipped em { font-style: normal; font-size: 11.5px; opacity: .8; white-space: nowrap; }
.m4-chip-btn { max-width: 100%; min-width: 0; display: block; line-height: 28px; flex: none; } /* Ellipsis geht nur ohne Flex; nicht zusammendrücken */
.m4-chip-btn svg { display: inline-block; vertical-align: -2px; margin-right: 6px; }

/* Handy: Hinweise oben einblenden, damit sie keine Knöpfe in Fenstern oder Tabellen verdecken */
@media (max-width: 860px) {
  .toasts { top: calc(8px + env(safe-area-inset-top)); bottom: auto; }
}

/* Handy: Filter der Leadliste umbrechen statt seitlich abgeschnitten */
@media (max-width: 860px) {
  .list-sheet .filters { flex-wrap: wrap; overflow: visible; }
  .list-sheet .filters > * { flex: 1 1 140px; min-width: 0; }
  .list-sheet .filters .select { width: 100%; }
}

/* Postausgang: E-Mail wartet auf das Postfach-Skript / ist fehlgeschlagen */
.tl-state { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: 11.5px; font-weight: 500; vertical-align: 2px; }
.tl-state.wait { background: var(--neu-bg, #FDF1B7); color: #8A5A00; }
.tl-state-err { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0; padding: 8px 10px; border-radius: 10px; background: var(--faellig-bg, #FCE6E3); color: var(--faellig, #B5322A); font-size: 13px; }

/* Datenschutz: Datenauskunft und vollständiges Löschen */
.pv-busy { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.pv-busy .muted { font-size: 13px; overflow-wrap: anywhere; }
.pv-ok { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r); background: color-mix(in srgb, var(--bearb, #0F8A68) 10%, var(--surface)); overflow-wrap: anywhere; }
.pv-ok > .icon { color: var(--bearb, #0F8A68); flex: none; margin-top: 1px; }
.pv-ok .muted { font-size: 13px; margin-top: 4px; }
.pv-small { font-size: 12.5px; margin: 0; }
.pv-list { margin: 6px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.pv-list.del li::marker { color: var(--danger); }
.pv-list.keep li::marker { color: var(--bearb, #0F8A68); }
.pv-confirm { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r); background: var(--faellig-bg); color: var(--ink); font-size: 13.5px; line-height: 1.45; cursor: pointer; }
.pv-confirm input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--danger); flex: none; }