/* static/design/app-ui.css — Designsystem der MOREMEDIA App (Learning #8190).
   Alle Grundbausteine, die Chat und Aufgaben gemeinsam nutzen. Regeln in
   docs/app/DESIGNSYSTEM.md; Musterseite /app/design. Nur Tokens aus tokens.css,
   Maße in rem. Bereichs-CSS (chat.css, tasks.css) baut hierauf auf und definiert
   diese Bausteine NICHT neu – eine Änderung hier wirkt überall gleich.

   Wurzel: jedes Bedienfeld der App trägt die Klasse .mm-ui (Chat, Hülle, Musterseite). */

/* ── Grundlage ─────────────────────────────────── */
.mm-ui, .mm-ui * { box-sizing: border-box; }
.mm-ui { color: var(--tx-0); font-family: var(--font-ui); font-size: var(--t-base); line-height: 1.5; }
:where(.mm-ui) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:where(.mm-ui) p { margin: 0; }
.mm-ui input, .mm-ui textarea, .mm-ui select { font: inherit; color: var(--tx-0); }
/* iOS zoomt beim Antippen in Felder unter 1rem – deshalb am Handy mindestens 1rem */
@media (pointer: coarse) {
  .mm-ui input, .mm-ui textarea, .mm-ui select { font-size: 1rem; }
  html.mm-dynamic-type .mm-ui input, html.mm-dynamic-type .mm-ui textarea,
  html.mm-dynamic-type .mm-ui select { font-size: calc(1rem * max(1, var(--mm-type-scale, 1))); }
}
.mm-muted { color: var(--tx-2); }
/* Einrückung: EINE Inhaltskante je Seite (--mm-inset). Zeilen mit Hover-Fläche ragen um
   --mm-row-pad darüber hinaus, ihr Text steht trotzdem an der Kante. */
.mm-ui { --mm-inset: var(--sp-md); --mm-row-pad: var(--sp-2); }
/* Textgröße aus iOS (Dynamic Type, nur in der Hülle – app-ui.jsx initDynamicType setzt
   Klasse und Faktor). Skaliert nur die Schrift-Tokens, Abstände und Layout bleiben. */
html.mm-dynamic-type {
  --t-eyebrow: calc(0.625rem * var(--mm-type-scale, 1));
  --t-xs:   calc(0.6875rem * var(--mm-type-scale, 1));
  --t-sm:   calc(0.75rem * var(--mm-type-scale, 1));
  --t-body: calc(0.8125rem * var(--mm-type-scale, 1));
  --t-base: calc(0.875rem * var(--mm-type-scale, 1));
  --t-md:   calc(0.9375rem * var(--mm-type-scale, 1));
  --t-lg:   calc(1.0625rem * var(--mm-type-scale, 1));
  --t-xl:   calc(1.25rem * var(--mm-type-scale, 1));
  --t-2xl:  calc(1.625rem * var(--mm-type-scale, 1));
}


/* ── Symbole und Symbolknöpfe ──────────────────── */
.mm-icon { width: 1.15rem; height: 1.15rem; display: block; flex: none; }
.mm-iconbtn { display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: var(--r-md); color: var(--tx-1); }
@media (hover: hover) { .mm-iconbtn:hover { background: var(--ac-bg); } }
.mm-iconbtn--s { width: 1.75rem; height: 1.75rem; }
.mm-iconbtn.is-on { color: var(--wa); }
.mm-iconbtn:disabled { opacity: 0.35; cursor: default; }

/* ── Knöpfe ────────────────────────────────────── */
.mm-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-md); border: 1px solid var(--bdr-def); border-radius: var(--r-md); font-weight: 500;
  text-decoration: none; color: var(--tx-0); }
.mm-btn--primary { background: var(--tx-0); color: var(--bg-surface); border-color: var(--tx-0); }
.mm-btn--danger { color: var(--er); border-color: var(--er-bd); }
.mm-btn--link { padding: 0; border: 0; color: var(--inf); font-size: var(--t-sm); font-weight: 500; }
.mm-btn--block { display: flex; width: 100%; margin-top: var(--sp-md); padding: var(--sp-3); }
.mm-btn--s { padding: var(--sp-1) var(--sp-3); font-size: var(--t-sm); }
.mm-btn:disabled { opacity: 0.35; cursor: default; }

/* ── Avatar ────────────────────────────────────── */
.mm-avatar { flex: none; display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--r-full);
  background: var(--bg-ov); color: var(--tx-1); font-size: var(--t-xs); font-weight: 700; }
.mm-avatar--s { width: 1.4rem; height: 1.4rem; font-size: var(--t-eyebrow); }
.mm-avatar--l { width: 3.5rem; height: 3.5rem; font-size: var(--t-md); }
.mm-avatar--bot { background: var(--tx-0); color: var(--bg-surface); }
.mm-avatar--img { object-fit: cover; padding: 0; }
.mm-avatars { display: inline-flex; }
.mm-avatars .mm-avatar + .mm-avatar { margin-left: calc(-1 * var(--sp-1)); box-shadow: 0 0 0 1px var(--bg-surface); }
.mm-avatars__more { margin-left: var(--sp-1); font-size: var(--t-xs); color: var(--tx-2); }

/* ── Zähler, Marken, Chips ─────────────────────── */
/* Badge = Ungelesen/Handlung nötig (kräftig); Count = reine Anzahl (zurückhaltend) */
.mm-badge { display: inline-block; min-width: 1.25rem; height: 1.25rem; padding: 0 var(--sp-sm); border-radius: var(--r-full);
  background: var(--tx-0); color: var(--bg-surface); font-size: var(--t-xs); font-weight: 700; line-height: 1.25rem; text-align: center; }
.mm-badge--alert { background: var(--er); color: var(--bg-surface); }
.mm-badge--at { background: var(--inf); color: var(--bg-surface); white-space: nowrap; }
.mm-count { display: inline-block; min-width: 1.25rem; padding: 0 var(--sp-1); border-radius: var(--r-full); background: var(--bg-el);
  color: var(--tx-1); font-size: var(--t-xs); font-weight: 600; text-align: center; line-height: 1.5; }
.mm-tag { display: inline-block; padding: 0 var(--sp-1); border: 1px solid var(--bdr-str); border-radius: var(--r-xs);
  font-size: var(--t-eyebrow); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tx-2); }
.mm-tag--warn { border-color: var(--wa-bd); background: var(--wa-bg); color: var(--wa); }
.mm-tag--info { border-color: var(--inf-bd); background: var(--inf-bg); color: var(--inf); }
.mm-chip { display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-2-5);
  border: 1px solid var(--bdr-def); border-radius: var(--r-full); font-size: var(--t-sm); color: var(--tx-1); background: transparent; }
.mm-chip.is-on { background: var(--ac-bg); border-color: var(--bdr-str); color: var(--tx-0); font-weight: 500; }
.mm-chip--dashed { border-style: dashed; }
.mm-chip .mm-count { background: transparent; padding: 0; min-width: 0; color: var(--tx-2); }
.mm-chip__x { border: 0; background: none; color: var(--tx-2); padding: 0; font-size: var(--t-base); line-height: 1; }
/* Farbige Marke (Status, Department): Farbe über --tone */
.mm-pill { display: inline-flex; align-items: center; padding: 0 var(--sp-2); border-radius: var(--r-sm); background: var(--tone);
  color: var(--bg-surface); font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.6; white-space: nowrap; }
.mm-label { display: inline-flex; align-items: center; padding: 0 var(--sp-1); border-radius: var(--r-xs);
  background: color-mix(in srgb, var(--tone) 14%, transparent); color: var(--tone); font-size: var(--t-xs); font-weight: 600; }
.mm-statusdot { flex: none; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: var(--r-full);
  border: var(--sp-xs) solid var(--tone); background: transparent; color: var(--bg-surface); }
.mm-statusdot.is-done { background: var(--tone); }
.mm-statusdot .mm-icon { width: 0.8rem; height: 0.8rem; }
.mm-swatch { flex: none; width: 0.85rem; height: 0.85rem; border-radius: var(--r-full); background: var(--tone); }
.mm-progress { display: block; height: 0.4rem; border-radius: var(--r-full); background: var(--bg-el); overflow: hidden; }
.mm-progress__bar { display: block; height: 100%; border-radius: var(--r-full); background: var(--ok); }
.mm-progress.is-over .mm-progress__bar { background: var(--er); }
.mm-online { width: 0.5rem; height: 0.5rem; border-radius: var(--r-full); background: var(--tx-2); }
.mm-online--on { background: var(--ok); }

/* ── Seitenaufbau ──────────────────────────────── */
.mm-screen { display: flex; flex-direction: column; height: 100%; min-height: 0; min-width: 0; background: var(--bg-base); }
.mm-head { display: flex; align-items: center; gap: var(--sp-sm); padding: var(--sp-md);
  background: var(--bg-surface); border-bottom: 1px solid var(--bdr-def); }
.mm-app .mm-head { padding-top: calc(var(--sp-md) + env(safe-area-inset-top)); }
.mm-head__titles { flex: 1; min-width: 0; }
.mm-head__crumb { font-size: var(--t-xs); color: var(--tx-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-head__title { flex: 1; margin: 0; font-size: var(--t-lg); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-page { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: var(--sp-sm) var(--mm-inset) calc(var(--sp-2xl) + env(safe-area-inset-bottom)); }
.mm-page--narrow { padding-left: max(var(--mm-inset), calc((100% - 40rem) / 2)); padding-right: max(var(--mm-inset), calc((100% - 40rem) / 2)); }
.mm-section { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  margin: 0; padding: var(--sp-lg) 0 var(--sp-sm); font-size: var(--t-xs); font-weight: 500;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--tx-2); }
.mm-section__title { display: inline-flex; align-items: center; gap: var(--sp-2); }
.mm-section.is-alert { color: var(--er); }
.mm-hint { margin: var(--sp-sm) 0; color: var(--tx-2); font-size: var(--t-sm); }
.mm-empty { padding: var(--sp-2xl) var(--sp-lg); text-align: center; color: var(--tx-2); }
.mm-empty-line { padding: var(--sp-sm) 0; color: var(--tx-2); font-size: var(--t-sm); }
.mm-error { margin: var(--sp-sm) 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); background: var(--er-bg);
  border: 1px solid var(--er-bd); color: var(--er); font-size: var(--t-sm); }

/* ── Zeilen ────────────────────────────────────── */
/* Navigationszeile: Symbol · Text · Zähler/Pfeil (Seitenleisten, Übersichten) */
.mm-navrow { display: flex; align-items: center; gap: var(--sp-2-5); width: calc(100% + 2 * var(--mm-row-pad)); min-height: 2.75rem;
  margin: 0 calc(-1 * var(--mm-row-pad)); padding: 0 var(--mm-row-pad);
  border-radius: var(--r-md); color: var(--tx-1); font-size: var(--t-md); text-align: left; }
@media (hover: hover) { .mm-navrow:hover { background: var(--ac-bg); } }
.mm-navrow.is-active { background: var(--bg-el); color: var(--tx-0); }
.mm-navrow.is-strong { color: var(--tx-0); font-weight: 500; }
.mm-navrow__icon { display: grid; place-items: center; width: 1.4rem; color: var(--tx-2); flex: none; }
.mm-navrow__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-navrow__sub { display: flex; flex-wrap: wrap; gap: var(--sp-1); padding: 0 0 var(--sp-2) calc(1.4rem + var(--sp-2-5)); }
/* Karte: umrandete Fläche für Einträge (Tasks, Kommentare, Dashboard) */
.mm-card { background: var(--bg-surface); border: 1px solid var(--bdr-faint); border-radius: var(--r-md); }
.mm-card--pad { padding: var(--sp-2-5) var(--sp-3); }
.mm-card.is-interactive { cursor: pointer; }
@media (hover: hover) { .mm-card.is-interactive:hover { border-color: var(--bdr-str); } }
/* Auswahlzeile in Blättern und Menüs */
.mm-option { display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: 2.75rem; padding: var(--sp-2);
  border-radius: var(--r-md); text-align: left; }
.mm-option__label { flex: 1; min-width: 0; }
.mm-option.is-on { background: var(--ac-bg); font-weight: 500; }
.mm-option.is-danger { color: var(--er); }
@media (hover: hover) { .mm-option:hover { background: var(--ac-bg); } }
.mm-options { display: flex; flex-direction: column; margin: var(--sp-2) 0; }

/* ── Eingaben ──────────────────────────────────── */
.mm-input, .mm-textarea { width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--bdr-def); border-radius: var(--r-md);
  background: var(--bg-base); outline: none; }
.mm-input:focus, .mm-textarea:focus { border-color: var(--bdr-str); }
.mm-textarea { resize: vertical; }
/* Unauffälliges Feld (Eigenschaften im Task): erst beim Bearbeiten umrandet */
.mm-input--quiet { width: auto; padding: var(--sp-1); border-color: transparent; background: transparent; }
.mm-input--quiet:focus { border-color: var(--bdr-def); background: var(--bg-surface); }
.mm-field { display: block; margin-bottom: var(--sp-md); }
.mm-field > span { display: block; margin-bottom: var(--sp-1); font-size: var(--t-sm); color: var(--tx-2); }
.mm-field input { width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--bdr-def); border-radius: var(--r-md); background: var(--bg-base); }
.mm-inline { display: flex; align-items: center; gap: var(--sp-2); }
.mm-inline > input { flex: 1; min-width: 0; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--bdr-def); border-radius: var(--r-md); background: var(--bg-base); }
.mm-inline--wrap { flex-wrap: wrap; margin-bottom: var(--sp-sm); }
.mm-search { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-md); padding: 0 var(--sp-3);
  border: 1px solid var(--bdr-def); border-radius: var(--r-md); background: var(--bg-base); color: var(--tx-2); }
.mm-search input { flex: 1; min-width: 0; padding: var(--sp-2) 0; border: 0; background: transparent; color: var(--tx-0); font-size: 1rem; outline: none; }
.mm-check { display: flex; align-items: center; gap: var(--sp-2-5); padding: var(--sp-2) 0; cursor: pointer; }
.mm-check input { width: 1.1rem; height: 1.1rem; accent-color: var(--tx-0); }
.mm-seg { display: flex; gap: var(--sp-1); padding: var(--sp-1); margin-bottom: var(--sp-md); background: var(--bg-el); border-radius: var(--r-md); }
.mm-seg button { flex: 1; display: grid; place-items: center; padding: var(--sp-2); border-radius: var(--r-sm); color: var(--tx-1); }
.mm-seg button.is-on { background: var(--bg-surface); color: var(--tx-0); font-weight: 700; }
.mm-seg--icons { margin: 0; padding: var(--sp-xs); gap: var(--sp-xs); }
.mm-seg--icons button { width: 2rem; height: 1.75rem; padding: 0; }
/* @-Vorschläge (MentionList) über dem Editor – Chat und Aufgaben */
.mm-suggest {
  position: absolute;
  left: var(--sp-sm);
  right: var(--sp-sm);
  bottom: calc(100% + var(--sp-xs));
  z-index: 5;
  display: flex;
  flex-direction: column;
  padding: var(--sp-xs);
  background: var(--bg-surface);
  border: 1px solid var(--bdr-def);
  border-radius: var(--r-md);
}
.mm-suggest button { display: flex; align-items: center; gap: var(--sp-2); min-height: 2.75rem; padding: 0 var(--sp-sm); border-radius: var(--r-sm); text-align: left; color: var(--tx-0); }
.mm-suggest button.is-sel { background: var(--bg-el); }
@media (hover: hover) { .mm-suggest button:hover { background: var(--bg-el); } }
.mm-suggest__at { width: 1.4rem; text-align: center; color: var(--inf); font-weight: 700; }
.mm-suggest__name { font-weight: 500; }
.mm-suggest__hint { margin-left: auto; font-size: var(--t-xs); color: var(--tx-2); }

/* Verweis-Chip #Task/#Kunde (RefChip, im Editor .mm-ref--edit) */
.mm-ref { display: inline-flex; align-items: center; gap: var(--sp-1); max-width: 100%; padding: 0 var(--sp-1);
  border: 1px solid var(--bdr-def); border-radius: var(--r-sm); background: var(--bg-el); color: var(--tx-0);
  font: inherit; font-size: 0.95em; line-height: 1.4; vertical-align: baseline; cursor: pointer; white-space: nowrap; }
.mm-ref .mm-icon { width: 0.85rem; height: 0.85rem; color: var(--tx-2); }
.mm-ref__dot { width: 0.6rem; height: 0.6rem; border-radius: var(--r-full); background: var(--tone); flex: none; }
.mm-ref__label { overflow: hidden; text-overflow: ellipsis; }
.mm-ref.is-gone { color: var(--tx-2); cursor: default; font-style: italic; }
.mm-ref.is-archived .mm-ref__label { text-decoration: line-through; color: var(--tx-2); }
.mm-ref--edit::before { content: ""; }

/* Rich-Text-Editor (RichEditor) */
.mm-editor { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--bdr-def); border-radius: var(--r-md);
  background: var(--bg-base); }
.mm-editor:focus-within { border-color: var(--bdr-str); }
.mm-editor__bar { display: flex; flex-wrap: wrap; gap: var(--sp-xs); padding: var(--sp-1); border-bottom: 1px solid var(--bdr-faint); }
.mm-editor__bar .mm-iconbtn.is-active { background: var(--ac-bg); color: var(--tx-0); }
.mm-editor__bar .mm-iconbtn:disabled { opacity: 0.35; }
.mm-editor__mount { min-width: 0; }
.mm-editor__content { min-height: 4.5rem; max-height: 60vh; overflow-y: auto; padding: var(--sp-2) var(--sp-3); outline: none;
  color: var(--tx-0); line-height: 1.5; overflow-wrap: anywhere; }
.mm-editor__content > * + * { margin-top: var(--sp-sm); }
.mm-editor__content p { margin: 0; color: inherit; }
.mm-editor__content ul, .mm-editor__content ol { margin: 0; padding-left: 1.3em; }
.mm-editor__content ul[data-type="taskList"] { list-style: none; padding-left: 0; }
.mm-editor__content ul[data-type="taskList"] li { display: flex; gap: var(--sp-2); align-items: flex-start; }
.mm-editor__content ul[data-type="taskList"] li > label { margin-top: var(--sp-xs); }
.mm-editor__content ul[data-type="taskList"] li > div { flex: 1; }
.mm-editor__content blockquote { margin: 0; padding-left: var(--sp-3); border-left: var(--sp-xs) solid var(--bdr-str); color: var(--tx-1); }
.mm-editor__content pre { margin: 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); background: var(--bg-el);
  font-family: var(--font-mono); font-size: var(--t-sm); white-space: pre-wrap; }
.mm-editor__content code { font-family: var(--font-mono); color: var(--tx-1); background: var(--bg-el); padding: 0 var(--sp-1); border-radius: var(--r-xs); }
.mm-editor__content pre code { background: none; padding: 0; color: var(--tx-0); }
.mm-editor__content h1, .mm-editor__content h2, .mm-editor__content h3 { margin: 0; font-weight: 700; line-height: 1.3; }
.mm-editor__content h1 { font-size: var(--t-lg); }
.mm-editor__content h2 { font-size: var(--t-md); }
.mm-editor__content h3 { font-size: var(--t-base); }
.mm-editor__content a { color: var(--inf); text-decoration: underline; }
.mm-editor__content p.is-editor-empty:first-child::before { content: attr(data-placeholder); float: left; height: 0;
  color: var(--tx-2); pointer-events: none; }
.mm-editor__loading { padding: var(--sp-2) var(--sp-3); color: var(--tx-2); white-space: pre-wrap; }
/* kompakt (Chat-Eingabe): Leiste nur beim Schreiben, Feld wächst bis ~10rem */
.mm-editor--compact { border-radius: var(--r-lg); }
.mm-editor--compact .mm-editor__bar { display: none; }
.mm-editor--compact:focus-within .mm-editor__bar { display: flex; }
.mm-editor--compact .mm-editor__content { min-height: 2.5rem; max-height: 10rem; padding: var(--sp-2) var(--sp-md); }
.mm-editor--none .mm-editor__content { min-height: 2.5rem; }
@media (pointer: coarse) {
  .mm-editor__content { font-size: 1rem; }
  html.mm-dynamic-type .mm-editor__content { font-size: calc(1rem * max(1, var(--mm-type-scale, 1))); }
}

/* Markdown-Anzeige (renderMarkdown): Nachricht, Beschreibung, Kommentar, .md-Vorschau */
.mm-md__p { margin: 0; color: inherit; line-height: inherit; }
/* Text-Links (ohne eigene Klasse, z. B. aus Markdown) – Knöpfe/Anhänge/Symbole haben Klassen */
.mm-ui a:not([class]) { color: var(--inf); text-decoration: underline; text-underline-offset: 0.15em; }
.mm-md__p + *, * + .mm-md__p, .mm-md__list + *, * + .mm-md__list, .mm-md__pre + *, .mm-md__quote + * { margin-top: var(--sp-sm); }
.mm-md__h { margin: var(--sp-sm) 0 0; font-weight: 700; line-height: 1.3; color: var(--tx-0); }
.mm-md__h:first-child { margin-top: 0; }
.mm-md__h1 { font-size: var(--t-lg); }
.mm-md__h2 { font-size: var(--t-md); }
.mm-md__h3 { font-size: var(--t-base); }
.mm-md__list { margin: 0; padding-left: 1.3em; white-space: normal; }
.mm-md__list li + li { margin-top: var(--sp-xs); }
.mm-md__list li.is-nested { margin-left: 1.3em; }
.mm-md__list--task { list-style: none; padding-left: 0; }
.mm-md__list li.is-task { display: flex; gap: var(--sp-2); align-items: baseline; }
.mm-md__list li.is-task input { margin: 0; accent-color: var(--ok); }
.mm-md__list li.is-done > span { color: var(--tx-2); text-decoration: line-through; }
.mm-md__quote { margin: 0; padding-left: var(--sp-3); border-left: var(--sp-xs) solid var(--bdr-str); color: var(--tx-1); }
.mm-md__pre { margin: 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); background: var(--bg-el); overflow-x: auto;
  white-space: pre; font-size: var(--t-sm); }
.mm-md__pre code { color: var(--tx-0); background: none; padding: 0; }
.mm-md__hr { margin: var(--sp-sm) 0; border: 0; border-top: 1px solid var(--bdr-def); }
.mm-mark { background: var(--wa-bg); color: var(--tx-0); box-shadow: 0 0 0 1px var(--wa-bd); border-radius: var(--r-sm); }

/* ── Blatt (Dialog von unten), Menü, Hinweis ───── */
.mm-sheet-bg { position: fixed; inset: 0; z-index: 20; display: flex; align-items: flex-end; justify-content: center; background: var(--bdr-str); }
.mm-sheet { width: 100%; max-width: 30rem; max-height: 85dvh; display: flex; flex-direction: column; background: var(--bg-surface);
  border-radius: var(--r-lg) var(--r-lg) 0 0; padding-bottom: env(safe-area-inset-bottom); }
.mm-sheet__head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-md) var(--sp-md) var(--sp-sm) var(--sp-lg); }
.mm-sheet__head h2 { margin: 0; font-size: var(--t-lg); font-weight: 700; }
.mm-sheet__body { overflow-y: auto; padding: 0 var(--sp-lg) var(--sp-lg); }
@media (min-width: 48rem) {
  .mm-sheet-bg { align-items: center; }
  .mm-sheet { border-radius: var(--r-lg); }
}
.mm-menu { position: absolute; z-index: 5; top: 100%; right: 0; min-width: 13rem; padding: var(--sp-1); background: var(--bg-surface);
  border: 1px solid var(--bdr-str); border-radius: var(--r-md); box-shadow: 0 0.5rem 1.5rem var(--bdr-def); }
.mm-menu button { display: block; width: 100%; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); text-align: left; }
@media (hover: hover) { .mm-menu button:hover { background: var(--ac-bg); } }
.mm-menu button.is-on { font-weight: 700; }
.mm-menu button.is-danger { color: var(--er); }
.mm-menu__react { display: flex; gap: var(--sp-1); padding: var(--sp-xs); border-bottom: 1px solid var(--bdr-faint); }
.mm-menu__react button { padding: var(--sp-1); border-radius: var(--r-md); font-size: var(--t-lg); }
.mm-menu__react button.is-mine { background: var(--ac-bg); }
.mm-menu__sep { margin: var(--sp-1) 0; border: 0; border-top: 1px solid var(--bdr-faint); }
.mm-toast { position: absolute; z-index: 30; left: 50%; top: calc(var(--sp-md) + env(safe-area-inset-top)); transform: translateX(-50%);
  max-width: 90%; padding: var(--sp-2) var(--sp-md); background: var(--er-bg); color: var(--er); border: 1px solid var(--er-bd);
  border-radius: var(--r-md); font-size: var(--t-sm); cursor: pointer; }
.mm-toast--info { background: var(--tx-0); color: var(--bg-surface); border-color: var(--tx-0); }

/* ── Anhänge (Chat und Aufgaben) und Bildansicht ── */
.mm-att__file {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  max-width: 100%;
  padding: var(--sp-xs) var(--sp-sm);
  border: 1px solid var(--bdr-def);
  border-radius: var(--r-md);
  background: var(--bg-el);
  color: var(--tx-0);
  font-size: var(--t-sm);
  text-decoration: none;
}
.mm-att__doc { display: flex; flex-direction: column; gap: var(--sp-xs); flex-basis: 100%; min-width: 0; }
.mm-att__doc > .mm-att__file { align-self: flex-start; }
.mm-att__preview { position: relative; white-space: normal; }
.mm-att__preview.is-clipped .mm-att__previewbody { max-height: 12rem; overflow: hidden;
  mask-image: linear-gradient(to bottom, black 70%, transparent); -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent); }
.mm-att__x { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; margin-left: var(--sp-xs); border-radius: var(--r-full);
  color: var(--tx-2); }
.mm-att__x .mm-icon { width: 0.8rem; height: 0.8rem; }
.mm-att__wrap { position: relative; display: inline-block; }
.mm-att__wrap > .mm-att__x { position: absolute; top: var(--sp-1); right: var(--sp-1); margin: 0; background: var(--bg-surface); }
.mm-att { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-xs); margin-top: var(--sp-xs); }
.mm-att__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14rem; }
.mm-att__size { color: var(--tx-2); font-size: var(--t-xs); white-space: nowrap; }
.mm-att__file.is-gone { color: var(--tx-2); font-style: italic; }
.mm-att__img { display: block; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--bdr-faint); }
.mm-att__img img { display: block; max-width: min(16rem, 70vw); max-height: 16rem; object-fit: cover; }
.mm-lightbox { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; background: var(--bg-base); padding-top: env(safe-area-inset-top); }
.mm-lightbox__bar { display: flex; align-items: center; gap: var(--sp-sm); padding: var(--sp-sm) var(--sp-md); border-bottom: 1px solid var(--bdr-faint); }
.mm-lightbox__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.mm-lightbox__stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: auto; padding: var(--sp-md); }
.mm-lightbox__stage img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; }
.mm-lightbox__stage.is-zoomed { align-items: flex-start; justify-content: flex-start; }
.mm-lightbox__stage.is-zoomed img { max-width: none; max-height: none; width: 200%; cursor: zoom-out; }

/* ── Reaktionen ────────────────────────────────── */
.mm-reactions { display: flex; flex-wrap: wrap; gap: var(--sp-xs); margin-top: var(--sp-xs); }
.mm-reaction { display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-sm);
  border: 1px solid var(--bdr-def); border-radius: var(--r-lg); background: var(--bg-surface); font-size: var(--t-sm); line-height: 1.2; }
.mm-reaction.is-mine { border-color: var(--inf); background: var(--ac-bg); }
.mm-reaction__count { color: var(--tx-1); font-weight: 600; font-size: var(--t-xs); }
.mm-reaction--add { opacity: 0.5; }

/* ── App-Hülle: Leiste Start · Tasks · Chat · Profil (E36) ── */
.mm-app { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100%; background: var(--bg-base); }
.mm-app__main { position: relative; min-height: 0; min-width: 0; overflow: hidden; }
.mm-app__pane { height: 100%; min-height: 0; }
.mm-app__pane.is-hidden { display: none; }
.mm-tabbar { display: flex; justify-content: space-around; background: var(--bg-surface); border-top: 1px solid var(--bdr-def);
  padding: var(--sp-1) var(--sp-2) calc(var(--sp-1) + env(safe-area-inset-bottom)); }
.mm-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--sp-xs); padding: var(--sp-1) 0;
  color: var(--tx-2); font-size: var(--t-eyebrow); font-weight: 500; }
.mm-tab.is-on { color: var(--tx-0); }
.mm-tab__icon { position: relative; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; }
.mm-tab__icon .mm-icon { width: 1.4rem; height: 1.4rem; }
.mm-tab.is-on .mm-avatar { box-shadow: 0 0 0 1px var(--bg-surface), 0 0 0 var(--sp-xs) var(--tx-0); }
.mm-tab__icon .mm-badge { position: absolute; top: calc(-1 * var(--sp-1)); left: 60%; min-width: 1.1rem; height: 1.1rem;
  padding: 0 var(--sp-1); font-size: var(--t-eyebrow); line-height: 1.1rem; }
/* Im Channel, Task oder einer Liste (Vollbild): Leiste weg, wie in iOS-Apps üblich */
@media (max-width: 47.99rem) {
  .mm-app.is-deep .mm-tabbar { display: none; }
}
@media (min-width: 48rem) {
  .mm-app { grid-template-columns: 4.75rem minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .mm-tabbar { grid-column: 1; grid-row: 1; flex-direction: column; justify-content: flex-start; gap: var(--sp-2);
    border-top: 0; border-right: 1px solid var(--bdr-def); padding: var(--sp-md) var(--sp-1); }
  .mm-tab { flex: none; }
  .mm-app__main { grid-column: 2; grid-row: 1; }
}

/* Unsichtbares Hilfsfeld, das die iOS-Tastatur beim Öffnen eines Threads offen hält (primeKeyboard) */
.mm-kb-prime { position: fixed; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0;
  font-size: 1rem; pointer-events: none; }

/* ── Musterseite /app/design ───────────────────── */
.mm-showcase-root { height: 100%; }
.mm-showcase .mm-page { max-width: 56rem; margin: 0 auto; width: 100%; }
.mm-demo { padding: var(--sp-md); margin-bottom: var(--sp-2); border: 1px dashed var(--bdr-def); border-radius: var(--r-md); }
.mm-demo__name { margin-bottom: var(--sp-2); font-family: var(--font-mono); font-size: var(--t-xs); color: var(--tx-2); }
.mm-demo__body { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.mm-demo__body > .mm-search, .mm-demo__body > .mm-seg, .mm-demo__body > .mm-field, .mm-demo__body > .mm-textarea,
.mm-demo__body > .mm-inline, .mm-demo__body > .mm-btn--block { flex-basis: 100%; }
.mm-demo__pair { display: inline-flex; align-items: center; gap: var(--sp-1); }