/* Bespoke row class ON PURPOSE — do NOT switch this to the shared .status-subtabs:
   review-visitor-analytics.js locates the Status "Editoren/Besucher" row via
   document.querySelector('.status-subtabs') (it assumes that class is unique). The Mails
   row sits earlier in the DOM, so reusing .status-subtabs here hijacks that handler and
   breaks the Status sub-tabs. This row just mirrors the shared sub-tab-row styling; the
   Empfangen/Gesendet buttons still use the shared .status-subtab class. */
.mail-inbox__tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; border-bottom: 1px solid var(--color-border); padding: 4px 12px 0; }
/* 🔴 Der ⟳ traegt seine FORM aus .review-panel__refresh-btn (css/features/review-panel.css) -- Symbolknopf
   --avm-control-h im Quadrat, --radius-md, weicher Umriss, dieselbe Bauart wie das ✕ der Fenster
   (docs/design-language.md §Listenkopf). Hier steht nur noch die LAGE am Zeilenende. Bis zum
   05.09.2026 war er nackt, 16px, ohne Trefferfeld -- die zweite von zwei Fassungen desselben Knopfs. */
.mail-inbox__refresh { margin-left: auto; }
.mail-inbox__pane { display: none; padding: 8px 12px 12px; }
/* The active pane is the desktop scroll region (mirrors .review-panel__list): it fills the
   space under the Mails tab row and scrolls its own content (message list + opened detail)
   instead of overflowing the fixed editor panel. On mobile it defers to the outer
   tab-panel scroll (media query at the bottom). */
.mail-inbox__pane.is-active { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
.mail-inbox__pane.is-active > * { flex: 0 0 auto; }
.mail-inbox__list { display: flex; flex-direction: column; gap: 6px; }
.mail-inbox__item { text-align: left; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-panel); padding: 8px 10px; cursor: pointer; appearance: none; -webkit-appearance: none; font: inherit; }
.mail-inbox__item:hover { border-color: var(--color-border-strong); }
.mail-inbox__item.is-highlighted { border-color: var(--color-success); box-shadow: 0 0 0 2px rgba(27, 175, 122, 0.28); }
.mail-inbox__item.is-open { border-color: var(--color-border-strong); background: var(--color-panel-muted); }
.mail-inbox__item.is-unread .mail-inbox__from { font-weight: 700; }
/* Inbox row = list entry + its row action. The entry is a <button>, so the trash button cannot
   sit inside it (a button inside a button is invalid HTML); this wrapper is what makes the pair
   legal. The inline detail card is inserted after the WRAPPER, not after the entry. */
.mail-inbox__row { display: flex; align-items: stretch; gap: 6px; }
.mail-inbox__row > .mail-inbox__item { flex: 1 1 auto; min-width: 0; }
.mail-inbox__row.is-busy { opacity: 0.55; }
/* Soft/outline, never filled: an action inside a LIST ROW is never the page's main action
   (AGENTS.md §12) — and this list is 40 rows long. Since 2026-08-15 there are TWO of them, and
   they share this look; only the hover tells them apart, because the danger tone belongs to the
   intent, not to the resting state of 40 rows.
   ⚠️ Order in the markup is archive left, trash right: the destructive action sits on the outside,
   not between the two other click targets. */
.mail-inbox__action { flex: 0 0 auto; width: 34px; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; font: inherit; line-height: 1; appearance: none; -webkit-appearance: none; border: 1px solid var(--color-button-soft-border); border-radius: var(--radius-md); background: var(--color-button-soft); color: var(--color-button-soft-text); }
.mail-inbox__action:disabled { cursor: default; opacity: 0.5; }
/* Strich-Icon statt Emoji (Owner 15.08.2026: „wirklich schön sind die buttons nicht"). `display:block`
   nimmt dem <svg> die Grundlinie seiner Textzeile — sonst sitzt es im Knopf ein paar Pixel zu tief. */
.mail-inbox__action svg { display: block; width: 15px; height: 15px; }
.mail-inbox__archive:hover { border-color: var(--color-border-strong); background: var(--color-button-soft-hover); }
.mail-inbox__trash:hover { border-color: var(--color-danger-soft-border); background: var(--color-danger-soft); color: var(--color-danger-soft-text); }
.mail-inbox__row-error { display: inline-block; margin-left: 6px; font-size: var(--font-size-caption); color: var(--color-danger); }
/* ⚠️ In a SENT row the entry is a <details> that grows to the whole message when opened, and the
   row stretches its children — the action would become a tall bar down the side of the text. It
   stays a button at the top there. The inbox rows keep stretching (that is the shipped look). */
.mail-inbox__sent + .mail-inbox__action { align-self: flex-start; min-height: 34px; }
/* Section heading inside the archive pane: grouped by heading + divider, never by a framed box
   (AGENTS.md §12). This is the house form for a section title — Versalien, gesperrt, Akzentbraun —
   the same one .label-edit-section-title (region-sync.css) and .wiki-sync-case-section__title
   (review-panel.css) carry. ⚠️ Third copy of that recipe; if a fourth appears, it wants a shared
   component instead, like the list row got on 2026-08-14. */
.mail-inbox__section { margin: 14px 0 6px; padding-top: 10px; border-top: 1px solid var(--color-divider); font-size: var(--font-size-caption); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-brown); }
.mail-inbox__pane > .mail-inbox__section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.mail-inbox__from { color: var(--color-text-strong); }
.mail-inbox__subject { color: var(--color-text-muted); }
.mail-inbox__meta { color: var(--color-text-muted); font-size: 12px; }
.mail-inbox__badge { display: inline-block; margin-left: 6px; font-size: 11px; color: var(--color-success); cursor: pointer; }
.mail-inbox__badge:hover { text-decoration: underline; }
/* Sent entries are <details>: collapsed they stay a readable one-entry summary (recipient,
   subject, date, sender, first line), expanded they show the full text. The browser's own
   disclosure triangle is removed so the entry lines up with an inbox row next door. */
.mail-inbox__sent { cursor: default; }
/* Hier stand bis zum 12.08.2026 ein `display: block` als GEGENregel: `political-territory-wiki-tree.css`
   setzte `details > summary { display: flex }` klassenlos, und die Zeile legte Adressat, Betreff, Datum
   und Vorschau NEBENeinander (Commit b57210e0). Die Ursache ist behoben -- die Baum-Regel haengt jetzt an
   `.tree-node` --, also traegt das <summary> wieder den Vorgabewert und die Gegenregel ist weg.
   `list-style: none` bleibt und ist gewollt: der Eintrag soll buendig neben einer Posteingangszeile
   stehen, ohne Aufklapp-Dreieck davor. */
.mail-inbox__sent > summary { cursor: pointer; list-style: none; }
.mail-inbox__sent > summary::-webkit-details-marker { display: none; }
.mail-inbox__sent[open] > summary { margin-bottom: 6px; }
.mail-inbox__sent[open] { border-color: var(--color-border-strong); background: var(--color-panel-muted); }
.mail-inbox__preview { color: var(--color-text-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Once open, the full text is right below — the teaser would only repeat its first line. */
.mail-inbox__sent[open] .mail-inbox__preview { display: none; }
/* Inline detail card that expands directly under the clicked list entry (accordion). */
.mail-inbox__detail { border: 1px solid var(--color-border-strong); border-radius: 8px; background: var(--color-panel); padding: 10px 12px; }
.mail-inbox__body { white-space: pre-wrap; word-break: break-word; color: var(--color-text); }
.mail-inbox__reply { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.mail-inbox__reply textarea { width: 100%; min-height: 90px; font: inherit; padding: 8px; border: 1px solid var(--color-border-strong); border-radius: 8px; resize: vertical; }
.mail-inbox__reply-actions { display: flex; gap: 8px; align-items: center; }
.mail-inbox__status { color: var(--color-text-muted); font-size: 12px; }
.mail-inbox__images { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mail-inbox__thumb { max-width: 120px; max-height: 120px; object-fit: cover; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-panel); cursor: zoom-in; }
.mail-inbox__lightbox { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(20, 14, 8, 0.82); cursor: zoom-out; }
.mail-inbox__lightbox img { max-width: 92vw; max-height: 92vh; object-fit: contain; border-radius: 6px; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5); }

@media (max-width: 520px) {
	/* Mobile: the outer .wiki-sync-panel__tab-panel.is-active is the SINGLE scroll container
	   (nested scroll breaks touch scrolling — see review-panel.css), so the pane must not
	   scroll itself; it grows to natural height and the whole panel scrolls as one. */
	.mail-inbox__pane.is-active { flex: 0 0 auto; overflow: visible; }
}