/* anfr-postfach.css — Servicepostfach-Konversations-Workspace (Anfragen-Section).

   EIN Panel („Shell"): Kopfzeile (Lifecycle-Tabs + Meta-Icons) über drei Zonen,
   getrennt durch 1px-Divider statt Einzel-Boxen — Queue (links) · Konversation
   (mitte) · Kontext (rechts). Keine frei schwebende Toolbar mehr.

   Buttons kommen ausschließlich aus dem CTA-SSOT (primitives/button.css:
   .app-cta-btn + btn-sm/btn-xs/btn-outline/btn-ghost/btn-icononly). Hier NUR
   Layout/Position, KEINE lokalen Button-Optik-Redefinitionen.

   Verlauf + Composer stylen sich über domain/anfrage/anfr-conversation.css
   (geteilt mit dem Drawer). Tokens durchgehend, Mobile-Breakpoints. */

/* ── Shell: ein gerahmtes Panel, füllt das Section-Panel bis zur Unterkante,
   jede Zone scrollt intern. Höhe kommt aus der flex-Kette (lod-section →
   lod-section-panel → Host → Shell), NICHT aus einer starren calc()-Höhe — die
   verrechnete sich mit der echten Chrome-Höhe und ließ das Panel oben/unten
   danebenliegen („geht nicht bis ganz unten"). ── */
#anfr-postfach-host {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
}
.anfr-pf-shell {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--card-bg, #fff);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Kopfzeile: Tabs links (Filter INNERHALB des Postfachs), Meta-Icons rechts. */
.anfr-pf-shellhead {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: 0 var(--space-3);
  height: 52px;
  border-bottom: 1px solid var(--color-border);
}
.anfr-pf-tabs { display: inline-flex; align-items: stretch; gap: var(--space-1); height: 100%; }
.app-scope .anfr-pf-tab {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--space-1-5);
  padding: 0 var(--space-1); height: 100%;
  background: transparent; border: none;
  color: var(--color-text-muted);
  font-weight: var(--fw-medium); font-size: var(--fs-body);
  cursor: pointer;
  transition: color var(--motion-fast) var(--ease-enter);
}
.app-scope .anfr-pf-tab:hover { color: var(--lod-darkblue-900); }
.app-scope .anfr-pf-tab:focus-visible { outline: none; box-shadow: var(--lod-shadow-focus); border-radius: var(--radius-sm); }
.app-scope .anfr-pf-tab--active { color: var(--lod-darkblue-900); font-weight: var(--fw-semibold); }
/* Aktiv-Unterstrich (sitzt auf der Kopfzeilen-Divider-Linie). */
.app-scope .anfr-pf-tab--active::after {
  content: ''; position: absolute; left: var(--space-1); right: var(--space-1); bottom: -1px; height: 2px;
  background: var(--lod-turquoise); border-radius: 2px 2px 0 0;
}
.anfr-pf-tabbadge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--lod-darkblue); color: var(--lod-white);
  font-size: var(--fs-badge); font-weight: var(--fw-semibold); line-height: 1;
}
.anfr-pf-tab--active .anfr-pf-tabbadge { background: var(--lod-turquoise); color: var(--lod-darkblue-900); }
.anfr-pf-shellmeta { display: inline-flex; align-items: center; gap: var(--space-1); flex-shrink: 0; }

/* ── 3-Spalten-Cockpit unter der Kopfzeile. ── */
.anfr-pf-cockpit {
  flex: 1 1 auto; min-height: 0;
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr) minmax(268px, 320px);
}
/* Zonen-Divider + dezente Rail-Tönung: die beiden Seiten-Rails (Queue links,
   Kontext rechts) tragen einen Hauch Sekundär-Ton, die Konversation in der Mitte
   bleibt die weiße Inhaltsfläche — so lesen sich die drei Bereiche als klar
   getrennte Zonen (3-Pane-Mailclient), nicht als eine flache weiße Wand. */
.anfr-pf-listpane {
  border-right: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--bg-secondary, #f6f7f9) 45%, var(--card-bg, #fff));
}
.anfr-pf-context {
  border-left: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--bg-secondary, #f6f7f9) 45%, var(--card-bg, #fff));
}

/* ── Queue (links) ── */
.anfr-pf-listpane { display: flex; flex-direction: column; min-height: 0; }
/* Werkzeug-Zeile: trägt Suche (Default) ODER Bulk-Aktionen (Auswahl) — gleiche
   Höhe, damit der Morph keinen Layout-Sprung erzeugt. */
.anfr-pf-listtools {
  display: flex; align-items: center; gap: var(--space-1-5);
  min-height: 48px; padding: var(--space-1-5) var(--space-2);
  border-bottom: 1px solid var(--color-border-light);
}
.anfr-pf-listtools[data-selecting="1"] {
  background: color-mix(in srgb, var(--lod-turquoise) 10%, var(--card-bg, #fff));
}
/* Suchfeld als eigenständige Pille (weiße Fläche auf der getönten Queue-Rail),
   Icon + Eingabe darin — wirkt als bewusstes Feld statt als loser Rand-Input. */
.anfr-pf-searchbox {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: var(--space-1-5);
  padding: var(--space-1) var(--space-2);
  background: var(--card-bg, #fff);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--motion-fast) var(--ease-enter), box-shadow var(--motion-fast) var(--ease-enter);
}
.anfr-pf-searchbox:focus-within {
  border-color: var(--lod-turquoise);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--lod-turquoise) 25%, transparent);
}
.anfr-pf-searchico { flex-shrink: 0; opacity: .5; display: inline-flex; }
.anfr-pf-searchico img { width: 16px; height: 16px; }
.anfr-pf-search {
  flex: 1 1 auto; min-width: 0; border: none; background: transparent;
  font-size: var(--fs-body); padding: 0; outline: none;
  color: var(--color-text, #1f2733);
}
.anfr-pf-selectall { flex-shrink: 0; display: flex; align-items: center; padding: 0 var(--space-1); }
.anfr-pf-selectall input { cursor: pointer; margin: 0; width: 16px; height: 16px; accent-color: var(--lod-turquoise); }
.anfr-pf-bulkcount { flex: 1 1 auto; font-weight: var(--fw-semibold); color: var(--lod-darkblue-900); font-size: var(--fs-caption); white-space: nowrap; }
.anfr-pf-bulkactions { display: inline-flex; align-items: center; gap: var(--space-1); flex-shrink: 0; }

/* Zuständigkeits-Lens (Meine · Unbeansprucht · Alle) — nur Posteingang, oberhalb der
   Werkzeugzeile. Segmented-Control-Muster wie der Composer-Modus-Umschalter. */
.anfr-pf-lens { padding: var(--space-2-5) var(--space-2) var(--space-1); }
.anfr-pf-lens:empty { display: none; }
.anfr-pf-lensseg { display: flex; gap: 2px; padding: 3px; background: var(--bg-secondary, #f6f7f9); border-radius: var(--radius-lg); }
.app-scope .anfr-pf-lensbtn {
  flex: 1 1 0; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
  padding: var(--space-1) var(--space-1-5);
  border: none; background: transparent; border-radius: var(--radius-md); cursor: pointer;
  color: var(--color-text-muted); font-size: var(--fs-caption); font-weight: var(--fw-medium);
  transition: color var(--motion-fast) var(--ease-enter), background var(--motion-fast) var(--ease-enter);
}
.app-scope .anfr-pf-lensbtn:hover { color: var(--lod-darkblue-900); }
.app-scope .anfr-pf-lensbtn:focus-visible { outline: none; box-shadow: var(--lod-shadow-focus); }
.app-scope .anfr-pf-lensbtn--active { background: var(--card-bg); color: var(--lod-darkblue-900); font-weight: var(--fw-semibold); box-shadow: var(--shadow-sm); }
.anfr-pf-lenslabel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anfr-pf-lenscount {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--lod-darkblue) 10%, transparent);
  color: var(--color-text-muted); font-size: var(--fs-caption); font-weight: var(--fw-semibold);
}
.anfr-pf-lensbtn--active .anfr-pf-lenscount { background: color-mix(in srgb, var(--lod-turquoise) 22%, var(--card-bg)); color: var(--lod-darkblue-900); }

.anfr-pf-rows { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
/* Leer-/Kein-Treffer-Zustand: mittig statt bar oben in der Ecke (der frühere
   Text-in-der-Ecke war der „Windows-95"-Eindruck). */
.anfr-pf-noresults {
  height: 100%; min-height: 200px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-2); padding: var(--space-6) var(--space-4);
  color: var(--color-text-muted); font-size: var(--fs-body); text-align: center;
}
.anfr-pf-noresults .ui-ico img { width: 32px; height: 32px; opacity: .3; }
/* Fuß der Queue (z.B. „Nur die letzten 2 Wochen" im Verarbeitet-Modus). */
.anfr-pf-listfoot {
  padding: var(--space-2-5) var(--space-3) var(--space-4);
  color: var(--color-text-muted); font-size: var(--fs-caption); text-align: center;
}

.anfr-pf-group {
  position: sticky; top: 0; z-index: 1;
  padding: var(--space-2) var(--space-3) var(--space-1);
  background: color-mix(in srgb, var(--bg-secondary, #f6f7f9) 92%, transparent);
  backdrop-filter: blur(4px);
  color: var(--color-text-muted);
  font-size: var(--fs-caption); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: .04em;
}

.anfr-pf-row {
  display: flex; gap: var(--space-2); align-items: flex-start;
  padding: var(--space-2-5) var(--space-3);
  border-left: 2px solid transparent;
  border-bottom: 1px solid var(--color-border-light);
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-enter);
}
.anfr-pf-row:hover { background: var(--bg-secondary, #f6f7f9); }
.anfr-pf-row--selected { background: color-mix(in srgb, var(--lod-turquoise) 14%, #fff); border-left-color: var(--lod-turquoise); }
.anfr-pf-row--selected:hover { background: color-mix(in srgb, var(--lod-turquoise) 20%, #fff); }
.anfr-pf-row--checked { background: color-mix(in srgb, var(--lod-turquoise) 8%, #fff); }
.anfr-pf-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--lod-turquoise); }

.anfr-pf-rowbody { min-width: 0; flex: 1 1 auto; }
.anfr-pf-rowline1 { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.anfr-pf-rowsender {
  min-width: 0; font-weight: var(--fw-semibold); color: var(--lod-darkblue-900);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.anfr-pf-rowtime { flex-shrink: 0; color: var(--color-text-muted); font-size: var(--fs-caption); white-space: nowrap; }
/* Dringlichkeit dosiert: nur überfällig (≥8h) färbt die Zeit — kein gelber
   Zwischenton, keine zusätzliche Vollkante (M7, gegen Signal-Inflation). */
.anfr-pf-rowtime--overdue { color: var(--lod-danger); font-weight: var(--fw-semibold); }
.anfr-pf-row--overdue { border-left-color: color-mix(in srgb, var(--lod-danger) 55%, transparent); }
.anfr-pf-row--overdue.anfr-pf-row--selected { border-left-color: var(--lod-turquoise); }
.anfr-pf-rowsubject { margin-top: 1px; font-size: var(--fs-body); color: var(--color-text, #1f2733); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anfr-pf-rowsnippet { margin-top: 1px; color: var(--color-text-muted); font-size: var(--fs-caption); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Zeilen-Scent (Posteingang): Zeit + Kunde-Signal als rechte Meta-Gruppe, damit der
   Absender links weiter sauber ellipsed. Kunde-Chip zeigt Bestandskunde + offene Fälle. */
.anfr-pf-rowline1meta { display: inline-flex; align-items: baseline; gap: var(--space-1-5); flex-shrink: 0; }
.anfr-pf-rowcust {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0 var(--space-1-5); height: 16px; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--lod-success) 14%, var(--card-bg)); color: var(--lod-success-700);
  font-size: var(--fs-badge); font-weight: var(--fw-semibold); white-space: nowrap;
}
.anfr-pf-rowcustdot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.anfr-pf-rowcustn { margin-left: 2px; padding-left: 4px; border-left: 1px solid color-mix(in srgb, var(--lod-success-700) 30%, transparent); }

/* Checkbox (Mehrfachauswahl) — feste Spalte, erscheint auf Hover / wenn gewählt. */
.anfr-pf-rowcheck {
  flex-shrink: 0; width: 18px; align-self: center;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity var(--motion-fast) var(--ease-enter);
}
.anfr-pf-row:hover .anfr-pf-rowcheck,
.anfr-pf-row--checked .anfr-pf-rowcheck { opacity: 1; }
.anfr-pf-rowcheck input { cursor: pointer; margin: 0; width: 16px; height: 16px; accent-color: var(--lod-turquoise); }
/* Touch: kein Hover → Bulk-Select-Checkbox dauerhaft sichtbar + größere Tap-Fläche. */
@media (hover: none) {
  .anfr-pf-rowcheck { opacity: 1; }
  .anfr-pf-rowcheck input { width: 22px; height: 22px; }
}

/* Hover-Schnellaktion rechts — Optik kommt aus dem CTA-SSOT
   (app-cta-btn btn-xs btn-ghost btn-icononly), hier NUR Position + Opacity-Reveal. */
.anfr-pf-rowquick { align-self: center; opacity: 0; transition: opacity var(--motion-fast) var(--ease-enter); }
.anfr-pf-row:hover .anfr-pf-rowquick { opacity: .7; }
.anfr-pf-row .anfr-pf-rowquick:hover { opacity: 1; }
.anfr-pf-rowquick img { width: 16px; height: 16px; }

/* Avatar (deterministische Absender-Farbe, Hue aus JS). */
.anfr-pf-avatar {
  flex-shrink: 0; width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  /* Ruhiger Ton (geringere Sättigung) — Avatare konkurrieren nicht mit Status-/SLA-Farben. */
  background: hsl(var(--avatar-h, 210) 32% 48%);
  color: var(--lod-white); font-weight: var(--fw-semibold); font-size: var(--fs-caption);
}
.anfr-pf-avatar--sm { width: 32px; height: 32px; font-size: var(--fs-badge); align-self: center; }

.anfr-pf-rowbadge {
  margin-left: var(--space-1-5); padding: 0 6px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--lod-turquoise) 16%, #fff);
  color: var(--lod-darkblue-900); font-size: var(--fs-badge); font-weight: var(--fw-semibold); vertical-align: middle;
}
.anfr-pf-rowbadge--muted { background: var(--bg-secondary, #f6f7f9); color: var(--color-text-muted); }
/* Claim-Marker in der Queue-Zeile (Initialen des Bearbeiters). */
.anfr-pf-rowclaim {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 4px; margin-left: var(--space-1-5);
  border-radius: var(--radius-pill); vertical-align: middle;
  background: color-mix(in srgb, var(--lod-success) 16%, #fff); color: var(--lod-success-700);
  font-size: var(--fs-caption); font-weight: var(--fw-semibold);
}

/* ── Konversation (mitte) ── */
.anfr-pf-convpane { min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.anfr-pf-conv { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.anfr-pf-convhead {
  flex-shrink: 0;
  padding: var(--space-4) var(--space-5) var(--space-3);
  border-bottom: 1px solid var(--color-border-light);
}
.anfr-pf-convheadtop { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.anfr-pf-convsubject { margin: 0; font-size: var(--font-size-lg); font-weight: var(--fw-semibold); line-height: 1.3; color: var(--lod-darkblue-900); min-width: 0; }
.anfr-pf-presence { flex-shrink: 0; }
/* EINE Meta-Zeile (Avatar/Absender/Zeit) — die Solo-Mail darunter zeigt nur
   noch den Body, nichts doppelt sich (M3). */
.anfr-pf-convfrom { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2-5); }
.anfr-pf-convfrominfo { min-width: 0; display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.anfr-pf-convsender { font-weight: var(--fw-semibold); color: var(--lod-darkblue-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.anfr-pf-convwhen { color: var(--color-text-muted); font-size: var(--fs-caption); white-space: nowrap; }
.anfr-pf-convwhen--overdue { color: var(--lod-danger); font-weight: var(--fw-medium); }
.anfr-pf-convscroll { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding: var(--space-4) var(--space-5); }
/* Composer als unten verankerter Fuß (wie Outlook/Gmail): der Verlauf scrollt
   darüber, die Antwort-Affordanz sitzt immer an der Unterkante — kein im
   Weißraum schwebender Launcher bei kurzen Mails. Wächst beim Öffnen nach oben,
   deckelt bei langem Composer (interner Scroll), damit der Kopf nie wegrutscht. */
.anfr-pf-convdock {
  flex-shrink: 0; max-height: 62%; overflow-y: auto;
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-border);
  background: var(--card-bg, #fff);
}
.anfr-pf-convdock:empty { display: none; }
.anfr-pf-viewnote { color: var(--color-text-muted); font-size: var(--fs-caption); }

/* Aktionsleiste am Inhalt (eine Primär-Aktion gefüllt, Rest quiet). */
.anfr-pf-convactions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); }
.anfr-pf-claimchip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 0 var(--space-2); height: 32px; border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--lod-success) 14%, #fff); color: var(--lod-success-700);
  font-size: var(--fs-caption); font-weight: var(--fw-medium);
}
.anfr-pf-claimdot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* Composer-Launcher (schlanke Button-Leiste; Klick öffnet den vollen Composer). */
.anfr-pf-replybar { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.anfr-pf-empty {
  height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-2); color: var(--color-text-muted); text-align: center; padding: var(--space-5);
}
.anfr-pf-empty .ui-ico img { width: 40px; height: 40px; opacity: .35; }
.anfr-pf-empty p { margin: 0; }

/* Soft-Reload / Verlauf-Ladehinweis. */
.anfr-pf-listloading {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-4); color: var(--color-text-muted); font-size: var(--fs-body);
}
.anfr-pf-listloading .ui-ico img { width: 16px; height: 16px; opacity: .6; animation: anfr-pf-spin 1.2s linear infinite; }
@keyframes anfr-pf-spin { to { transform: rotate(360deg); } }

/* ── Kontext (rechts) ── */
.anfr-pf-context {
  min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-4);
}
.anfr-pf-ctxsection { display: flex; flex-direction: column; gap: var(--space-2); }
.anfr-pf-ctxsection:empty { display: none; }
.anfr-pf-ctxtitle {
  color: var(--color-text-muted); font-size: var(--fs-caption); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: .04em;
}
.anfr-pf-ctxloading { color: var(--color-text-muted); font-size: var(--fs-caption); }

/* Überfällig-Signal (Posteingang, nur wenn tatsächlich überfällig). */
.anfr-pf-agesignal {
  align-self: stretch;
  display: inline-flex; align-items: center; gap: var(--space-1-5);
  padding: var(--space-1-5) var(--space-2-5); border-radius: var(--radius-md);
  font-size: var(--fs-caption); font-weight: var(--fw-medium);
}
.anfr-pf-agedot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.anfr-pf-agesignal--overdue { background: color-mix(in srgb, var(--lod-danger) 12%, #fff); color: var(--lod-danger); }

.anfr-pf-ctxlabel { color: var(--color-text-muted); font-size: var(--fs-caption); }
.anfr-pf-ctxticket { font-weight: var(--fw-semibold); color: var(--lod-darkblue-900); font-size: var(--fs-section); }

/* Eigenschaften-Zeile (Status/Zuständig/Prio + Einordnung) — Label oben,
   Wert als volle klickbare Zeile (gleiches Muster im Posteingang + Verarbeitet). */
.anfr-pf-prop { display: flex; flex-direction: column; gap: 3px; }
.anfr-pf-proplabel { color: var(--color-text-muted); font-size: var(--fs-caption); }
.app-scope .anfr-pf-propval {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  width: 100%; box-sizing: border-box;
  padding: var(--space-1-5) 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-body); font-weight: var(--fw-medium); cursor: pointer;
}
.app-scope .anfr-pf-propval:hover { background: var(--bg-secondary, #f6f7f9); border-color: var(--color-border-hover); }
.app-scope .anfr-pf-propval:focus-visible { outline: none; box-shadow: var(--lod-shadow-focus); border-color: var(--lod-turquoise); }
.anfr-pf-propvaltext { display: inline-flex; align-items: center; gap: var(--space-1-5); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anfr-pf-propcaret { flex-shrink: 0; display: inline-flex; }
.anfr-pf-propcaret img { width: 14px; height: 14px; opacity: .55; }
.anfr-pf-statusdot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--lod-turquoise); }
.anfr-pf-statusdot--active { background: var(--lod-turquoise); }
.anfr-pf-statusdot--done { background: var(--lod-success); }
.anfr-pf-statusdot--muted { background: var(--color-text-muted); }

/* Absender-/Kunde-Chip. */
.anfr-pf-chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 3px var(--space-2); border-radius: var(--radius-pill);
  font-size: var(--fs-caption); font-weight: var(--fw-medium);
  background: var(--bg-secondary, #f6f7f9); color: var(--color-text-muted);
  max-width: 100%; overflow: hidden;
}
.anfr-pf-chipdot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.anfr-pf-chip--known { background: color-mix(in srgb, var(--lod-success) 14%, #fff); color: var(--lod-success-700); }
.anfr-pf-chip--customer { background: color-mix(in srgb, var(--lod-darkblue) 12%, #fff); color: var(--lod-darkblue); }
.anfr-pf-chip--unknown { background: var(--bg-secondary, #f6f7f9); color: var(--color-text-muted); }
.anfr-pf-chip--click, .anfr-pf-chip--link { cursor: pointer; }
.anfr-pf-chip--click:hover { box-shadow: 0 0 0 1px currentColor inset; }
.anfr-pf-chip--link {
  margin-top: var(--space-1);
  background: var(--bg-secondary, #f6f7f9); color: var(--lod-darkblue-900);
}
.anfr-pf-chip--link:hover { background: color-mix(in srgb, var(--lod-darkblue) 10%, #fff); }
.anfr-pf-chip--link .ui-ico img { width: 13px; height: 13px; }

.anfr-pf-verworfen-note { display: inline-flex; align-items: center; gap: var(--space-1-5); color: var(--color-text-muted); font-size: var(--fs-body); }
.anfr-pf-verworfen-note .ui-ico img { width: 18px; height: 18px; opacity: .6; }

/* Offene Anfragen des Absenders (Kontext + „Zuordnen"). */
.anfr-pf-openanfragen:empty { display: none; }
.anfr-pf-oabox {
  padding: var(--space-3);
  background: color-mix(in srgb, var(--lod-turquoise) 5%, var(--card-bg, #fff));
  border: 1px solid var(--color-border-light); border-radius: var(--radius-md);
}
.anfr-pf-oahead {
  display: flex; align-items: center; gap: var(--space-1-5); margin-bottom: var(--space-2);
  color: var(--color-text-muted); font-size: var(--fs-caption); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: .04em;
}
.anfr-pf-oahead .ui-ico img { width: 15px; height: 15px; opacity: .7; }
.anfr-pf-oarow { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) 0; border-top: 1px solid var(--color-border-light); flex-wrap: wrap; }
.anfr-pf-oarow:first-of-type { border-top: 0; }
.anfr-pf-oainfo { display: flex; align-items: center; gap: var(--space-2); min-width: 0; flex-wrap: wrap; }
.anfr-pf-oatn { font-weight: var(--fw-semibold); color: var(--lod-darkblue-900); font-size: var(--fs-caption); }
.anfr-pf-oatitle { color: var(--color-text, #1f2733); font-size: var(--fs-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
.anfr-pf-oastatus { padding: 1px var(--space-2); border-radius: var(--radius-pill); background: var(--bg-secondary, #f6f7f9); color: var(--color-text-muted); font-size: var(--fs-badge); font-weight: var(--fw-medium); }
.anfr-pf-oainfo--click { cursor: pointer; border-radius: var(--radius-md); }
.anfr-pf-oainfo--click:hover .anfr-pf-oatitle { text-decoration: underline; }

/* ── Notebook (1000–1399px): 3 Spalten bleiben, nur etwas schmaler. Die
   Kontext-Spalte bleibt ein echter rechter Streifen (kein Umbruch in eine
   horizontale Zeile — das wirkte gedrängt). ── */
@media (max-width: 1399px) {
  .anfr-pf-cockpit { grid-template-columns: minmax(256px, 300px) minmax(0, 1fr) minmax(240px, 284px); }
}

/* ── Tablet/Mobile (<1000px): gestapelt, Panes begrenzt. Touch-Targets ≥38px. ── */
@media (max-width: 999px) {
  /* Gestapelt: Host nicht mehr strecken, Shell wächst mit dem Inhalt. */
  #anfr-postfach-host { display: block; }
  .anfr-pf-shell { flex: 0 0 auto; height: auto; min-height: 0; }
  .anfr-pf-cockpit { grid-template-columns: 1fr; }
  .anfr-pf-listpane { border-right: none; border-bottom: 1px solid var(--color-border); }
  .anfr-pf-context { border-left: none; border-top: 1px solid var(--color-border); }
  .anfr-pf-rows { max-height: 340px; }
  .anfr-pf-convpane { min-height: 460px; }
  /* Touch-Bump der Schnellaktion kommt aus dem CTA-SSOT (btn-xs → 38px). */
}

/* ── Mobile (<600px): Panes höher atmen lassen (kleinere Screens brauchen mehr
   Lesefläche pro Zone), Kopfzeile/Konversation großzügiger. Kein Horizontal-
   Overflow (Mittelspalte ist minmax(0,1fr), alle Zeilen ellipsen). ── */
@media (max-width: 599px) {
  .anfr-pf-shellhead { height: auto; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-2) var(--space-2-5); }
  .anfr-pf-rows { max-height: 300px; }
  .anfr-pf-convpane { min-height: 420px; }
  .anfr-pf-convhead { padding: var(--space-3) var(--space-3) var(--space-2-5); }
  .anfr-pf-convscroll { padding: var(--space-3); }
  .anfr-pf-convdock { padding: var(--space-2-5) var(--space-3); max-height: 70%; }
  .anfr-pf-context { padding: var(--space-3); }
  /* Betreff etwas kompakter, damit lange Betreffs nicht 3-zeilig brechen. */
  .anfr-pf-convsubject { font-size: var(--fs-section); }
}