/* ════════════════════════════════════════════════════════════════════════════════
   VICore — Schwebender E-Mail-Composer (mcx-)
   ────────────────────────────────────────────────────────────────────────────────
   Kein Modal, kein Backdrop, kein Scroll-Lock: eine globale Fensterebene über der
   App. Nur die Fensterfläche fängt Eingaben ab (#mcx-layer ist pointer-events:none),
   der Hintergrund bleibt vollständig bedienbar.

   Regeln (CLAUDE.md §UI):
     • ausschließlich Design-Tokens (var(--…)) — keine Hex-Farben, keine rohen px
       außerhalb der wenigen Fenster-Geometriekonstanten (--mcx-*) unten
     • Bestands-Komponentenklassen (.btn/.modal/.card) werden NICHT überschrieben
     • Namespace mcx- (mc- ist im Energiemodul + Altcomposer belegt)
   ════════════════════════════════════════════════════════════════════════════════ */

:root {
  /* Fenstergeometrie (Vorgabe §2/§21) */
  --mcx-w:            760px;
  --mcx-h:            640px;
  --mcx-min-w:        560px;
  --mcx-min-h:        420px;
  --mcx-gap:          24px;   /* Abstand zum Viewport-Rand */
  --mcx-head-h:       50px;
  --mcx-cmd-h:        46px;
  --mcx-row-h:        40px;
  --mcx-label-w:      68px;
  --mcx-pad:          14px;
  --mcx-radius:       12px;
  --mcx-dock-w:       420px;
  /* Ebenen: Fenster < Popover < Snackbar(9500) < Toast(9999) < vi-confirm(12000) */
  --mcx-z-layer:      8000;
  --mcx-z-tray:       8900;
  --mcx-z-pop:        9200;
  --mcx-shadow:       0 18px 48px rgba(40, 30, 20, .20), 0 2px 8px rgba(40, 30, 20, .10);
  --mcx-shadow-flat:  0 6px 18px rgba(40, 30, 20, .12);
  --mcx-shadow-drag:  0 26px 64px rgba(40, 30, 20, .26);
  /* Zwei Schriftgrade, die die Skala des Design-Systems nicht führt und die die Vorgabe
     ausdrücklich verlangt (§4: Titel 18–20 px · Metazeilen kleiner als --text-xs).
     Als benannte Konstanten hier oben statt als rohe Werte in den Regeln. */
  --mcx-text-title:   1.125rem;   /* 18 px — Fenstertitel */
  --mcx-text-micro:   0.6875rem;  /* 11 px — Anlagen-Meta, Popover-Gruppen, Chips */
  /* Auf farbigen Flächen (Senden-Button, aktiver Chip) */
  --mcx-on-accent:    var(--brand-text-on-primary, #FFFFFF);
  --mcx-overlay-soft: rgba(0, 0, 0, .10);
}

/* ── Globale Fensterebene ─────────────────────────────────────────────────────
   inset:0 + pointer-events:none → der Layer selbst blockiert NICHTS. Nur die
   Fenster/Tray-Kinder setzen pointer-events wieder auf auto. */
#mcx-layer {
  position: fixed;
  inset: 0;
  z-index: var(--mcx-z-layer);
  pointer-events: none;
}
#mcx-layer[hidden] { display: none; }

/* ── Fenster ────────────────────────────────────────────────────────────────── */
.mcx-win {
  position: fixed;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  min-width: var(--mcx-min-w);
  min-height: var(--mcx-min-h);
  max-width: 92vw;
  max-height: 92vh;
  background: var(--color-surface, #fff);
  border: 1px solid var(--gray-300);
  border-radius: var(--mcx-radius);
  box-shadow: var(--mcx-shadow);
  overflow: hidden;
  font-family: var(--font-body);
  color: var(--gray-900);
  animation: mcxWinIn .16s cubic-bezier(.2, .7, .3, 1);
}
@keyframes mcxWinIn { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mcx-win { animation: none; } }

.mcx-win.is-dragging,
.mcx-win.is-resizing { transition: none; user-select: none; }
.mcx-win.is-dragging { box-shadow: var(--mcx-shadow-drag); }
.mcx-win.is-minimized { display: none; }

/* Maximiert / angedockt: Geometrie kommt aus der Klasse, nicht aus Inline-Styles */
.mcx-win.is-maximized {
  inset: var(--mcx-gap) !important;
  width: auto !important;
  height: auto !important;
  max-width: none;
  max-height: none;
}
.mcx-win.is-docked-right,
.mcx-win.is-docked-left {
  top: 0 !important;
  bottom: 0 !important;
  height: auto !important;
  max-height: none;
  border-radius: 0;
}
.mcx-win.is-docked-right { right: 0 !important; left: auto !important; }
.mcx-win.is-docked-left  { left: 0 !important;  right: auto !important; }

/* Angedockt heißt: die App gibt den Platz WIRKLICH frei — sonst wäre Andocken nur ein
   Overlay. <body> ist der Flex-Container (Sidebar + <main>), border-box ist global gesetzt,
   daher schiebt ein Innenabstand die gesamte Anwendung sauber zur Seite.
   Den Zahlenwert setzt mcxApplyDockSpace() inline (berechnete Fensterbreite). Die
   Fensterebene selbst ist position:fixed und bleibt dadurch bündig am Bildschirmrand.

   BEWUSST OHNE transition: eine animierte Änderung des Body-Innenabstands würde die
   gesamte Anwendung (Sidebar, Tabellen, Diagramme) über die Dauer hinweg neu umbrechen —
   teuer und unruhig. Das Andocken sitzt sofort. */
body.mcx-docked-right,
body.mcx-docked-left { /* Zustandsmarker für Fremdmodule; Geometrie kommt inline */ }

/* Aktives Fenster hebt sich dezent ab (kein Farbrahmen — nur Tiefe) */
.mcx-win.is-inactive { box-shadow: var(--mcx-shadow-flat); }
.mcx-win.is-inactive .mcx-head { background: var(--gray-100); }

/* ── Titelleiste (Drag-Bereich) ──────────────────────────────────────────────── */
.mcx-head {
  flex: 0 0 auto;
  min-height: var(--mcx-head-h);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  /* Vorgabe §21: Kopf ~50 px. Titel (18 px) + Kontextzeile (12 px) tragen bereits ~39 px,
     daher schmale vertikale Innenabstände — sonst wächst der Kopf auf ~56 px. */
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-4);
  border-bottom: 1px solid var(--gray-300);
  background: var(--color-surface, #fff);
  cursor: grab;
  user-select: none;
}
.mcx-win.is-dragging .mcx-head { cursor: grabbing; }
.mcx-win.is-maximized .mcx-head,
.mcx-win.is-docked-left .mcx-head,
.mcx-win.is-docked-right .mcx-head { cursor: default; }

.mcx-head-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mcx-title {
  font-size: var(--mcx-text-title);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Vorgangskontext: Nummer bleibt IMMER sichtbar, nur der Titel kürzt (§5) */
.mcx-ctx {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  min-width: 0;
  font-size: var(--text-xs);
  line-height: var(--lh-snug);
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: var(--gray-700);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  max-width: 100%;
}
.mcx-ctx:hover .mcx-ctx-title,
.mcx-ctx:hover .mcx-ctx-no { color: var(--color-sage); text-decoration: underline; }
.mcx-ctx:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.mcx-ctx-no    { flex: 0 0 auto; font-weight: var(--fw-semibold); color: var(--color-sage); font-variant-numeric: tabular-nums; }
.mcx-ctx-sep   { flex: 0 0 auto; color: var(--gray-500); }
.mcx-ctx-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gray-700); }
.mcx-ctx-none  { color: var(--gray-500); }

/* Fenstersteuerung — Buttons dürfen kein Drag auslösen (JS prüft [data-mcx-nodrag]) */
.mcx-winbtns { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; }
.mcx-winbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--gray-700);
  cursor: pointer;
  padding: 0;
}
.mcx-winbtn:hover { background: var(--gray-100); color: var(--gray-900); }
.mcx-winbtn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.mcx-winbtn-close:hover { background: var(--color-danger-soft); color: var(--color-danger-ink); }
.mcx-winbtn svg { width: 15px; height: 15px; display: block; }

/* ── Befehlsleiste ──────────────────────────────────────────────────────────── */
.mcx-cmd {
  flex: 0 0 auto;
  min-height: var(--mcx-cmd-h);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  /* Vorgabe §21: Befehlsleiste 44–48 px. Der Senden-Button ist 34 px hoch → 4 px Luft. */
  padding: var(--space-1) var(--mcx-pad);
  border-bottom: 1px solid var(--gray-300);
  background: var(--color-surface, #fff);
  overflow: hidden;
}
.mcx-send {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-width: 96px; height: 34px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-forest);
  border-radius: var(--radius-md);
  background: var(--color-forest);
  color: var(--mcx-on-accent);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  white-space: nowrap;
}
.mcx-send:hover:not(:disabled) { background: var(--color-forest-hover); border-color: var(--color-forest-hover); }
.mcx-send:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.mcx-send:disabled { opacity: .55; cursor: not-allowed; }
.mcx-send svg { width: 15px; height: 15px; flex: 0 0 auto; }
.mcx-send.is-busy .mcx-send-ico { animation: mcxSpin .9s linear infinite; }
@keyframes mcxSpin { to { transform: rotate(360deg); } }

.mcx-cmd-sep { flex: 0 0 auto; width: 1px; height: 20px; background: var(--gray-300); margin: 0 var(--space-1); }
.mcx-cmd-spacer { flex: 1 1 auto; min-width: 0; }

.mcx-cbtn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 32px;
  padding: 0 var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--gray-700);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  cursor: pointer;
  /* Nie über den Rand: einzeilig kürzen statt umbrechen (Projektregel „kein Textüberlauf").
     min-width:0 ist nötig, damit der Flex-Kindtext überhaupt schrumpfen darf. */
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.mcx-cbtn-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mcx-cbtn:hover { background: var(--gray-100); color: var(--gray-900); }
.mcx-cbtn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.mcx-cbtn[aria-expanded="true"], .mcx-cbtn.is-on { background: var(--color-sage-soft); color: var(--color-sage-hover); }
.mcx-cbtn svg { width: 15px; height: 15px; flex: 0 0 auto; }
/* Enge Fenster: Beschriftungen ausblenden, Icons + Tooltip bleiben (§6) */
.mcx-win.is-narrow .mcx-cbtn-label { display: none; }
.mcx-win.is-narrow .mcx-cbtn { padding: 0 var(--space-2); }

/* ── Adressbereich ──────────────────────────────────────────────────────────── */
.mcx-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-surface, #fff);
}
.mcx-warn {
  flex: 0 0 auto;
  margin: var(--space-2) var(--mcx-pad) 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-sm);
  background: var(--color-warning-soft);
  color: var(--color-warning-ink);
  font-size: var(--text-xs);
}
.mcx-fields { flex: 0 0 auto; padding: 0 var(--mcx-pad); }
.mcx-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  min-height: var(--mcx-row-h);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--gray-300);
}
.mcx-row[hidden] { display: none; }
.mcx-row:focus-within { background: var(--color-cream); }
.mcx-lbl {
  flex: 0 0 var(--mcx-label-w);
  padding-top: 9px;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--gray-500);
  line-height: var(--lh-snug);
}
.mcx-field { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); padding: 4px 0; cursor: text; }

/* Von-Zeile */
.mcx-from-text { padding: 6px 0; font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--gray-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mcx-from-select {
  max-width: 100%;
  height: 30px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--gray-900);
  padding: 0 var(--space-1);
  cursor: pointer;
}
.mcx-from-select:hover { border-color: var(--gray-300); background: var(--color-surface, #fff); }
.mcx-from-select:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Empfänger-Chips */
.mcx-chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  max-width: 100%;
  height: 24px;
  padding: 0 var(--space-1) 0 var(--space-2);
  border: 1px solid var(--color-sage-soft);
  border-radius: var(--vi-r-pill, 999px);
  background: var(--color-sage-soft);
  color: var(--color-sage-hover);
  font-size: var(--text-xs);
  cursor: default;
}
.mcx-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.mcx-chip.is-focus { background: var(--color-sage); color: var(--mcx-on-accent); border-color: var(--color-sage); }
.mcx-chip-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* Fehler NIE nur farbig: zusätzlich Warnsymbol + title (§19) */
.mcx-chip.is-bad {
  background: var(--color-danger-soft);
  color: var(--color-danger-ink);
  border-color: var(--color-danger);
  border-style: dashed;
}
.mcx-chip-warn { flex: 0 0 auto; font-weight: var(--fw-bold); }
.mcx-chip-x {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  border: none; background: none; padding: 0;
  border-radius: var(--vi-r-pill, 999px);
  color: inherit; cursor: pointer; font-size: var(--text-xs); line-height: 1;
}
.mcx-chip-x:hover { background: var(--mcx-overlay-soft); }
.mcx-chip-x:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.mcx-recip-input {
  flex: 1 1 140px;
  min-width: 110px;
  height: 26px;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--gray-900);
  padding: 0;
}
.mcx-recip-input::placeholder { color: var(--gray-500); }

/* Aktionen rechts in der Empfängerzeile: Adressbuch-Auswahl + Cc/Bcc-Umschalter */
.mcx-row-acts { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-1); padding-top: 5px; }
.mcx-pickbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: var(--color-surface, #fff);
  color: var(--gray-700);
  cursor: pointer;
  padding: 0;
}
.mcx-pickbtn:hover { background: var(--color-sage-soft); border-color: var(--color-sage-soft); color: var(--color-sage-hover); }
.mcx-pickbtn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.mcx-pickbtn[aria-expanded="true"] { background: var(--color-sage-soft); border-color: var(--color-sage); color: var(--color-sage-hover); }
.mcx-pickbtn svg { width: 15px; height: 15px; display: block; }
.mcx-linkbtn {
  border: none; background: none; padding: 2px var(--space-1);
  border-radius: var(--radius-sm);
  color: var(--gray-500);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  cursor: pointer;
}
.mcx-linkbtn:hover { color: var(--color-sage); text-decoration: underline; }
.mcx-linkbtn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.mcx-linkbtn.is-on { color: var(--color-sage); font-weight: var(--fw-semibold); }

/* Betreff — volle Breite, einzeilig, vollständig editierbar (§8) */
.mcx-subject {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 30px;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--gray-900);
  padding: 0;
  text-overflow: ellipsis;
}
.mcx-subject::placeholder { color: var(--gray-500); font-weight: var(--fw-normal); }

/* ── Formatierleiste ────────────────────────────────────────────────────────── */
.mcx-fmt {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  padding: var(--space-1) var(--mcx-pad);
  border-bottom: 1px solid var(--gray-300);
  background: var(--color-cream);
}
.mcx-fmt[hidden] { display: none; }
.mcx-fbtn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 28px;
  padding: 0 var(--space-1);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--gray-700);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  cursor: pointer;
}
.mcx-fbtn:hover { background: var(--color-surface, #fff); border-color: var(--gray-300); }
.mcx-fbtn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.mcx-fbtn.is-on { background: var(--color-sage-soft); color: var(--color-sage-hover); }
.mcx-fbtn svg { width: 14px; height: 14px; }
.mcx-fmt-sep { width: 1px; height: 16px; background: var(--gray-300); margin: 0 var(--space-1); }

/* ── Editor — EINZIGER vertikaler Hauptscrollbereich (§9) ───────────────────── */
/* position: relative — der Bild-Auswahlrahmen (.mcx-imgsel) liegt AUSSERHALB des
   contenteditable und wird an dieser Fläche ausgerichtet (§22). */
.mcx-editor-wrap { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.mcx-editor {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-3) var(--mcx-pad);
  outline: none;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  color: var(--gray-900);
  word-break: break-word;
  overflow-wrap: anywhere;
}
.mcx-editor:focus { outline: none; }
.mcx-editor p { margin: 0 0 var(--space-2); }
.mcx-editor ul, .mcx-editor ol { margin: 0 0 var(--space-2); padding-left: var(--space-5); }
.mcx-editor a { color: var(--color-sage); }
.mcx-editor img { max-width: 100%; height: auto; cursor: pointer; }
/* Tabellen tragen ihre Optik im Inline-Stil — sie muss beim Empfänger ankommen. Hier
   werden BEWUSST keine Rahmen ergänzt: eine Linie, die nur im Composer existiert,
   fehlte in der gesendeten Nachricht und wäre eine Zusage, die niemand einlöst. */
.mcx-editor table { max-width: 100%; }
.mcx-editor td > p:last-child, .mcx-editor th > p:last-child { margin-bottom: 0; }

/* Bildauswahl & Skalieren (§22). Der Rahmen ist reine Anzeige (pointer-events: none),
   nur die vier Griffe nehmen Zeigereingaben an. */
.mcx-imgsel { position: absolute; z-index: 2; pointer-events: none; outline: 1px solid var(--color-sage); }
.mcx-imgsel[hidden] { display: none; }
.mcx-imgsel.is-off { visibility: hidden; }
.mcx-imgh {
  position: absolute; width: 10px; height: 10px;
  border: 1px solid var(--color-surface, #fff);
  border-radius: 2px;
  background: var(--color-sage);
  pointer-events: auto;
  touch-action: none;
}
.mcx-imgsize {
  position: absolute; right: 0; bottom: -20px;
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--gray-900);
  color: var(--color-surface, #fff);
  font-size: var(--text-xxs);
  line-height: 18px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .12s ease;
}
.mcx-imgsel.is-resizing .mcx-imgsize { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .mcx-imgsize { transition: none; } }
/* Signatur: Bestandteil des Editors, optisch zurückhaltend (§9) */
/* Signatur: Absatzabstände wie im Original. Word/Outlook gibt jedem Absatz margin:0 mit und
   erzeugt die Lücken über LEERE Absätze. Ohne diese Regel erbt jeder Absatz den Abstand von
   `.mcx-editor p` — die Signatur läuft auseinander, und der Zeilenabstand allein hilft nicht,
   weil die Lücken aus den Absatzrändern kommen. Gleiche Regel in settings.css (.sig-body). */
.mcx-editor .mcx-sig { color: var(--gray-700); font-size: var(--text-xs); line-height: 1; }
.mcx-editor .mcx-sig p,
.mcx-editor .mcx-sig div,
.mcx-editor .mcx-sig ul,
.mcx-editor .mcx-sig ol,
.mcx-editor .mcx-sig li { margin: 0; }
.mcx-editor .mcx-sig-rule { border: none; border-top: 1px solid var(--gray-300); margin: var(--space-3) 0 var(--space-2); max-width: 220px; }
/* Zitierter Ursprungstext */
.mcx-editor .mcx-quote { color: var(--gray-700); border-left: 2px solid var(--gray-300); padding-left: var(--space-3); margin-top: var(--space-3); }
.mcx-editor .mcx-quote-head { color: var(--gray-500); font-size: var(--text-xs); }

/* Drag-&-Drop-Zone über dem gesamten Fenster (§11) */
.mcx-drop {
  position: absolute; inset: 0;
  z-index: 5;
  display: none;
  align-items: center; justify-content: center;
  background: var(--color-sage-soft);
  border: 2px dashed var(--color-sage);
  border-radius: var(--mcx-radius);
  color: var(--color-sage-hover);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  pointer-events: none;
}
.mcx-win.is-dropping .mcx-drop { display: flex; }

/* ── Anlagen ────────────────────────────────────────────────────────────────── */
.mcx-atts {
  flex: 0 0 auto;
  max-height: 132px;
  overflow-y: auto;
  padding: var(--space-2) var(--mcx-pad);
  border-top: 1px solid var(--gray-300);
  background: var(--color-cream);
}
.mcx-atts[hidden] { display: none; }
.mcx-atts-head {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--gray-700);
  margin-bottom: var(--space-1);
}
.mcx-atts-list { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.mcx-att {
  display: inline-flex; align-items: center; gap: var(--space-2);
  max-width: 100%;
  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-2);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: var(--color-surface, #fff);
  font-size: var(--text-xs);
  color: var(--gray-900);
}
.mcx-att.is-error { border-color: var(--color-danger); background: var(--color-danger-soft); color: var(--color-danger-ink); }
.mcx-att.is-uploading { border-style: dashed; }
.mcx-att-ico { flex: 0 0 auto; width: 16px; height: 16px; color: var(--gray-500); }
.mcx-att-main { min-width: 0; display: flex; flex-direction: column; gap: 0; }
.mcx-att-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.mcx-att-meta { font-size: var(--mcx-text-micro); color: var(--gray-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.mcx-att.is-error .mcx-att-meta { color: var(--color-danger-ink); }
.mcx-att-bar { flex: 0 0 48px; height: 3px; border-radius: 2px; background: var(--gray-300); overflow: hidden; }
.mcx-att-bar > span { display: block; height: 100%; background: var(--color-sage); }
.mcx-att-x {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  border: none; background: none; padding: 0;
  border-radius: var(--radius-sm);
  color: var(--gray-500); cursor: pointer; font-size: var(--text-xs);
}
.mcx-att-x:hover { background: var(--gray-100); color: var(--gray-900); }
.mcx-att-x:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ── Statuszeile (ersetzt die alte Fußleiste, §12) ──────────────────────────── */
.mcx-status {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 28px;
  padding: var(--space-1) var(--mcx-pad);
  border-top: 1px solid var(--gray-300);
  background: var(--color-surface, #fff);
  font-size: var(--text-xs);
  color: var(--gray-500);
}
.mcx-status-txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcx-status.is-error .mcx-status-txt { color: var(--color-danger-ink); font-weight: var(--fw-medium); }
.mcx-status.is-busy  .mcx-status-txt { color: var(--gray-700); }
.mcx-status-dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--gray-300); }
.mcx-status.is-saved .mcx-status-dot { background: var(--color-success); }
.mcx-status.is-busy  .mcx-status-dot { background: var(--color-warning); }
.mcx-status.is-error .mcx-status-dot { background: var(--color-danger); }

/* Fehlermeldung im Fenster (nicht nur farbig — mit Symbol) */
.mcx-err {
  flex: 0 0 auto;
  display: flex; align-items: flex-start; gap: var(--space-2);
  margin: 0 var(--mcx-pad) var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-sm);
  background: var(--color-danger-soft);
  color: var(--color-danger-ink);
  font-size: var(--text-xs);
}
.mcx-err[hidden] { display: none; }
.mcx-err-ico { flex: 0 0 auto; font-weight: var(--fw-bold); }

/* ── Resize-Griffe (alle Seiten + Ecken, §2) ────────────────────────────────── */
.mcx-rz { position: absolute; z-index: 4; }
.mcx-win.is-maximized .mcx-rz,
.mcx-win.is-docked-left .mcx-rz-n, .mcx-win.is-docked-left .mcx-rz-s,
.mcx-win.is-docked-left .mcx-rz-w, .mcx-win.is-docked-left .mcx-rz-nw,
.mcx-win.is-docked-left .mcx-rz-ne, .mcx-win.is-docked-left .mcx-rz-sw, .mcx-win.is-docked-left .mcx-rz-se,
.mcx-win.is-docked-right .mcx-rz-n, .mcx-win.is-docked-right .mcx-rz-s,
.mcx-win.is-docked-right .mcx-rz-e, .mcx-win.is-docked-right .mcx-rz-nw,
.mcx-win.is-docked-right .mcx-rz-ne, .mcx-win.is-docked-right .mcx-rz-sw, .mcx-win.is-docked-right .mcx-rz-se { display: none; }

/* ── Entwurfsleiste minimierter Fenster (§3) ────────────────────────────────── */
#mcx-tray {
  position: fixed;
  right: var(--mcx-gap);
  bottom: var(--mcx-gap);
  z-index: var(--mcx-z-tray);
  pointer-events: auto;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: var(--space-2);
  max-width: min(92vw, 520px);
}
#mcx-tray[hidden] { display: none; }
.mcx-trayitem {
  display: flex; align-items: center; gap: var(--space-2);
  max-width: 100%;
  height: 38px;
  padding: 0 var(--space-1) 0 var(--space-3);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  background: var(--color-surface, #fff);
  box-shadow: var(--mcx-shadow-flat);
}
.mcx-trayitem-btn {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: var(--space-2);
  border: none; background: none; padding: 0;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--gray-900);
  cursor: pointer;
  text-align: left;
}
.mcx-trayitem-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.mcx-trayitem-ico { flex: 0 0 auto; width: 16px; height: 16px; color: var(--color-sage); }
.mcx-trayitem-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 280px; }
.mcx-trayitem-x {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border: none; background: none; padding: 0;
  border-radius: var(--radius-sm);
  color: var(--gray-500); cursor: pointer;
}
.mcx-trayitem-x:hover { background: var(--gray-100); color: var(--gray-900); }
.mcx-trayitem-x:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* Antwort-WV-Snackbar liegt ebenfalls unten rechts → über der Entwurfsleiste anheben */
body.mcx-tray-open .fu-snack { bottom: calc(var(--mcx-gap) + 52px); }

/* ── Popover (Autocomplete, Vorlagen, Signatur, Dokumente, Menü) ────────────── */
#mcx-pop-layer { position: fixed; inset: 0; z-index: var(--mcx-z-pop); pointer-events: none; }
#mcx-pop-layer[hidden] { display: none; }
.mcx-pop {
  position: absolute;
  pointer-events: auto;
  min-width: 260px;
  max-width: min(92vw, 480px);
  max-height: min(70vh, 420px);
  display: flex;
  flex-direction: column;
  background: var(--color-surface, #fff);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  box-shadow: var(--mcx-shadow);
  overflow: hidden;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--gray-900);
}
.mcx-pop-wide { min-width: 420px; }
.mcx-pop-head { flex: 0 0 auto; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--gray-300); }
.mcx-pop-title { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--gray-700); }
.mcx-pop-search {
  width: 100%;
  height: 32px;
  margin-top: var(--space-1);
  padding: 0 var(--space-2);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: var(--color-surface, #fff);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--gray-900);
}
.mcx-pop-search:focus { outline: none; border-color: var(--color-sage); box-shadow: var(--focus-ring); }
.mcx-pop-tabs { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-2); }
.mcx-pop-tab {
  height: 26px; padding: 0 var(--space-2);
  border: 1px solid var(--gray-300); border-radius: var(--vi-r-pill, 999px);
  background: transparent; color: var(--gray-700);
  font-family: var(--font-body); font-size: var(--mcx-text-micro); cursor: pointer;
  white-space: nowrap;
}
.mcx-pop-tab:hover { background: var(--gray-100); }
.mcx-pop-tab.is-on { background: var(--color-sage-soft); border-color: var(--color-sage-soft); color: var(--color-sage-hover); font-weight: var(--fw-semibold); }
.mcx-pop-tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.mcx-pop-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--space-1); }
.mcx-pop-group {
  padding: var(--space-2) var(--space-2) var(--space-1);
  font-size: var(--mcx-text-micro); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--gray-500);
}
.mcx-pop-empty, .mcx-pop-hint { padding: var(--space-3); color: var(--gray-500); font-size: var(--text-xs); }
.mcx-pop-row {
  display: flex; align-items: center; gap: var(--space-2);
  width: 100%;
  padding: var(--space-2);
  border: none; background: none;
  border-radius: var(--radius-sm);
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--gray-900);
  cursor: pointer;
}
.mcx-pop-row:hover, .mcx-pop-row.is-active { background: var(--color-sage-soft); }
.mcx-pop-row:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.mcx-pop-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mcx-pop-row-t { font-weight: var(--fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcx-pop-row-s { font-size: var(--text-xs); color: var(--gray-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcx-pop-row-tag {
  flex: 0 0 auto;
  padding: 1px var(--space-2);
  border-radius: var(--vi-r-pill, 999px);
  background: var(--gray-100);
  color: var(--gray-700);
  font-size: var(--mcx-text-micro);
  white-space: nowrap;
}
.mcx-pop-row-check { flex: 0 0 auto; }
.mcx-pop-foot {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--gray-300);
  background: var(--color-cream);
  font-size: var(--text-xs);
  color: var(--gray-500);
}
.mcx-pop-colors { display: grid; grid-template-columns: repeat(7, 20px); gap: var(--space-1); padding: var(--space-2); }
.mcx-pop-color { width: 20px; height: 20px; border: 1px solid var(--gray-300); border-radius: var(--radius-sm); cursor: pointer; padding: 0; }
.mcx-pop-color:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.mcx-pop-menu-item {
  display: flex; align-items: center; gap: var(--space-2);
  width: 100%; padding: var(--space-2) var(--space-3);
  border: none; background: none; border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: var(--text-sm); color: var(--gray-900);
  text-align: left; cursor: pointer;
}
.mcx-pop-menu-item:hover { background: var(--gray-100); }
.mcx-pop-menu-item:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.mcx-pop-menu-item.is-danger { color: var(--color-danger-ink); }
.mcx-pop-menu-item.is-danger:hover { background: var(--color-danger-soft); }
.mcx-pop-menu-sep { height: 1px; background: var(--gray-300); margin: var(--space-1) 0; }

/* Auswahlraster „Tabelle einfügen" (§23) */
.mcx-tgrid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  padding: var(--space-2) var(--space-2) 0;
}
.mcx-tgrid-c {
  height: 18px;
  padding: 0;
  border: 1px solid var(--gray-300);
  border-radius: 2px;
  background: var(--color-surface, #fff);
  cursor: pointer;
}
.mcx-tgrid-c.is-on { background: var(--color-sage-soft); border-color: var(--color-sage); }
.mcx-tgrid-c:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.mcx-tgrid-lbl {
  padding: var(--space-1) var(--space-2) var(--space-2);
  text-align: center;
  font-size: var(--text-xs);
  color: var(--gray-500);
  font-variant-numeric: tabular-nums;
}
.mcx-pop-prev {
  margin: var(--space-1) var(--space-2) var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: var(--color-cream);
  font-size: var(--text-xs);
  color: var(--gray-700);
  max-height: 110px;
  overflow: auto;
}

/* ── Kleine Bildschirme / Tablet: maximiert statt Miniaturfenster (§18) ─────── */
@media (max-width: 1100px) {
  .mcx-win {
    inset: var(--space-2) !important;
    width: auto !important;
    height: auto !important;
    max-width: none;
    max-height: none;
  }
  .mcx-win .mcx-rz { display: none; }
  .mcx-head { cursor: default; }
  /* Das Fenster füllt hier ohnehin den Bildschirm → Maximieren und Andocken wären wirkungslos.
     Nicht wirksame Schaltflächen werden nicht angezeigt (statt sie ins Leere laufen zu lassen). */
  .mcx-winbtn-max, .mcx-winbtn-dock { display: none; }
}

/* ── Mobil: Vollbildansicht (§18) ───────────────────────────────────────────── */
@media (max-width: 767px) {
  #mcx-layer { z-index: 9400; }   /* über der mobilen Schale */
  .mcx-win {
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0;
    min-height: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .mcx-win .mcx-rz { display: none; }
  .mcx-winbtn-max, .mcx-winbtn-dock { display: none; }
  .mcx-head { padding-top: calc(var(--space-2) + env(safe-area-inset-top, 0px)); cursor: default; }
  .mcx-title { font-size: var(--text-base); }
  .mcx-cmd { overflow-x: auto; overflow-y: hidden; }
  .mcx-cbtn-label { display: none; }
  /* Vereinfachen ja, wegnehmen nein (§37): die Formatierleiste bricht nicht auf drei
     Zeilen um (das fräße die halbe Schreibfläche), sondern bleibt einzeilig und lässt
     sich seitlich schieben. Jede Funktion bleibt erreichbar. */
  .mcx-fmt { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .mcx-fmt::-webkit-scrollbar { display: none; }
  .mcx-fbtn { flex: 0 0 auto; min-width: 34px; height: 34px; }
  .mcx-fmt-sep { flex: 0 0 auto; }
  /* Fingerbedienung: größere Griffe am Bild */
  .mcx-imgh { width: 14px; height: 14px; }
  .mcx-tgrid-c { height: 24px; }
  .mcx-lbl { flex-basis: 52px; }
  #mcx-tray { left: var(--space-2); right: var(--space-2); bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px)); max-width: none; }
  .mcx-trayitem-t { max-width: none; }
  .mcx-pop { max-width: 94vw; }
  .mcx-pop-wide { min-width: 0; }
}

/* Sehr flache Fenster (kleine Bildschirmhöhen): Anlagenbereich schrumpfen */
@media (max-height: 620px) {
  .mcx-atts { max-height: 84px; }
  .mcx-editor { padding-top: var(--space-2); padding-bottom: var(--space-2); }
}

/* ── Dokumentwahl: Ordner des Vorgangs (§27) ─────────────────────────────────
   Die Gliederung ordnet, sie soll nicht dominieren: kleine, ruhige Überschrift
   mit Anzahl, ein Dreieck als Zustand. Kein Rahmen je Gruppe — sonst entsteht
   die verbotene Karte in der Karte. */
.mcx-pop-grp + .mcx-pop-grp { margin-top: var(--space-2, 8px); }
.mcx-pop-grp-h {
  display: flex; align-items: center; gap: var(--space-2, 8px); width: 100%;
  appearance: none; border: 0; background: none; cursor: pointer; text-align: left;
  padding: var(--space-1, 4px) var(--space-2, 8px);
  color: var(--gray-500, #5F6B66);
  font: var(--fw-semibold, 600) var(--text-xs, 12px)/1.4 var(--font-body);
}
.mcx-pop-grp-h:hover { color: var(--gray-900, #141A17); }
.mcx-pop-grp-c {
  width: 0; height: 0; flex: 0 0 auto;
  border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transform: rotate(90deg); transition: transform var(--transition, 150ms ease);
}
.mcx-pop-grp.is-collapsed .mcx-pop-grp-c { transform: rotate(0deg); }
.mcx-pop-grp-n { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcx-pop-grp-z { flex: 0 0 auto; font-variant-numeric: tabular-nums; opacity: .75; }
.mcx-pop-grp.is-collapsed .mcx-pop-grp-b { display: none; }