/* E-Mails – Posteingang als Tickets, Unterhaltung, Einstellungen. Nur Layout + Tokens, Bausteine aus public/ui. */
.mail-page{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-16);min-width:0}
/* Nie breiter als der Bildschirm: jedes Raster-/Flex-Kind darf schrumpfen (sonst wächst es auf das längste „Wort“), lange Links brechen um. */
.mail-page > *,.mail-thread > *,.mail-thread__main > *,.mail-thread__messages > *,.mail-message > *,.mail-message__head > *{min-width:0;max-width:100%}
.mail-page--list,.mail-page--settings{max-width:960px}
.mail-page .sw-pagehead{margin-bottom:0}

/* Liste – wie im Mail-Programm: Zeilen mit Trennlinie, Punkt für ungelesen, Kontakt + Zeit, Betreff, Vorschau */
.mail-page--list{gap:var(--space-10)}
.mail-list__summary{margin:0;font:var(--font-small);color:var(--text-secondary)}
.mail-list__chips{display:flex;gap:var(--space-6);min-width:0;max-width:100%;margin:0 calc(var(--space-4) * -1);padding:var(--space-4);overflow-x:auto;scrollbar-width:none}
.mail-list__chips::-webkit-scrollbar{display:none}
.mail-list__chips .sw-chip{flex:none;cursor:pointer}
.mail-list__filters{display:flex;flex-wrap:wrap;gap:var(--space-8);align-items:center}
.mail-list__filters .sw-input{flex:2 1 200px;min-width:0}
.mail-list__filters .sw-select{flex:1 1 150px;min-width:0}
.mail-list__filters .sw-input__help:empty{display:none}
.mail-list__error{margin:0;padding:var(--space-8) var(--space-12);border-radius:var(--radius-lg);background:var(--status-danger-soft);color:var(--status-danger);font:var(--font-small)}
.mail-rows{display:grid;grid-template-columns:minmax(0,1fr);margin:0;padding:0;list-style:none;border-radius:var(--radius-lg);background:var(--bg-surface);box-shadow:inset 0 0 0 1px var(--border-default);overflow:hidden}
.mail-rows > li{min-width:0}
.mail-rows > li + li .mail-row__body{box-shadow:inset 0 1px 0 var(--border-default)}
.mail-row{position:relative;display:grid;grid-template-columns:var(--space-8) auto minmax(0,1fr);align-items:start;gap:var(--space-10);padding:0 var(--space-14) 0 var(--space-6);color:inherit;text-decoration:none}
.mail-row:hover,.mail-row:focus-visible{background:var(--bg-surface-2);outline:none}
.mail-row__dot{align-self:start;width:var(--space-8);height:var(--space-8);margin-top:calc(var(--space-14) + var(--space-6));border-radius:var(--radius-pill);background:var(--brand-primary)}
.mail-row__dot.is-read{visibility:hidden}
.mail-row > .sw-avatar{margin-top:var(--space-12)}
.mail-row__body{display:grid;gap:var(--space-3);min-width:0;padding:var(--space-10) 0}
.mail-row__top{display:flex;align-items:baseline;gap:var(--space-6);min-width:0}
.mail-row__from{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:var(--font-body-semibold);color:var(--text-primary)}
.mail-row__count{flex:none;font:var(--font-small);color:var(--text-tertiary)}
.mail-row__top time{flex:none;font:var(--font-small);color:var(--text-secondary)}
.mail-row__subject{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:var(--font-body);color:var(--text-primary)}
.mail-row.is-unread .mail-row__subject{font:var(--font-body-medium)}
.mail-row__preview{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:break-word;font:var(--font-small);color:var(--text-secondary)}
.mail-row__tags{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-3)}
.mail-page--list .sw-pager{margin-top:var(--space-4)}

/* Unterhaltung – wie eine geöffnete Mail: Avatar, Absender, „An: …“, Zeit; Betreff groß */
.mail-thread{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,340px);gap:var(--space-16);align-items:start}
.mail-thread__main{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-12);min-width:0}
.mail-thread__side{position:sticky;top:var(--shell-sticky-top,var(--space-16));display:grid;gap:var(--space-12)}
.mail-ticket{border-radius:var(--radius-lg);background:var(--bg-surface);box-shadow:inset 0 0 0 1px var(--border-default)}
.mail-ticket__summary{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:var(--space-8) var(--space-10);min-width:0;padding:var(--space-12) var(--space-14);cursor:pointer;list-style:none}
.mail-ticket__summary::-webkit-details-marker{display:none}
.mail-ticket__contact{display:grid;gap:var(--space-3);min-width:0;overflow-wrap:break-word;font:var(--font-body);color:var(--text-primary)}
.mail-ticket__label,.mail-ticket__email{font:var(--font-small);color:var(--text-secondary)}
.mail-ticket__toggle{display:inline-flex;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-8);border-radius:var(--radius-pill);background:var(--bg-surface-2);font:var(--font-small-semibold);color:var(--text-brand)}
.mail-ticket__toggle .sw-icon{transition:transform .15s}
.mail-ticket[open] .mail-ticket__toggle .sw-icon{transform:rotate(180deg)}
.mail-ticket__summary:hover .mail-ticket__toggle{background:var(--brand-soft)}
.mail-ticket__facts{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:var(--space-4)}
.mail-ticket__body{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-8);padding:0 var(--space-14) var(--space-12)}
.mail-ticket__body > *{min-width:0}
.mail-ticket__actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:var(--space-8)}
.mail-thread__messages{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-10)}
.mail-message{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-12);padding:var(--space-14);border-radius:var(--radius-lg);background:var(--bg-surface);box-shadow:inset 0 0 0 1px var(--border-default);min-width:0}
.mail-message.is-out{background:var(--bg-surface-2)}
.mail-message__head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:var(--space-10);padding-bottom:var(--space-12);box-shadow:inset 0 -1px 0 var(--border-default)}
.mail-message__who{display:grid;gap:var(--space-3);min-width:0}
.mail-message__who strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:var(--font-body-semibold);color:var(--text-primary)}
.mail-message__to{min-width:0;font:var(--font-small);color:var(--text-secondary)}
.mail-message__to summary{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;list-style:none}
.mail-message__to summary::-webkit-details-marker{display:none}
.mail-message__to > span{display:block;margin-top:var(--space-4);overflow-wrap:break-word}
.mail-message__head time{font:var(--font-small);color:var(--text-secondary);white-space:nowrap}
.mail-message__subject{margin:0;overflow-wrap:break-word;font:var(--font-h2);color:var(--text-primary)}
.mail-message__text{white-space:pre-wrap;overflow-wrap:break-word;font:var(--font-body);color:var(--text-primary)}
.mail-message__frame{min-width:0;overflow:hidden;border-radius:var(--radius-lg);background:var(--bg-surface-2)}
.mail-message__iframe{display:block;width:100%;min-height:120px;border:0;border-radius:var(--radius-lg)}
.mail-message__loading{margin:0;padding:var(--space-12);font:var(--font-small);color:var(--text-secondary)}
.mail-message__link{color:var(--text-brand);text-decoration:underline}
.mail-message__more summary{cursor:pointer;font:var(--font-small-semibold);color:var(--text-brand)}
.mail-message__files{display:flex;flex-wrap:wrap;gap:var(--space-6)}
.mail-drafts__list{display:grid;margin:0;padding:0;list-style:none}
.mail-draft{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-8) var(--space-12);padding:var(--space-10) 0;box-shadow:inset 0 -1px 0 var(--border-default)}
.mail-draft:last-child{box-shadow:none}
.mail-draft__text{display:grid;gap:var(--space-4);flex:1 1 240px;min-width:0}
.mail-draft__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-6);font:var(--font-small);color:var(--text-secondary)}
.mail-draft__text p{margin:0;overflow-wrap:break-word;font:var(--font-small);color:var(--text-primary)}
.mail-draft__actions{display:flex;flex-wrap:wrap;gap:var(--space-6)}
/* Weitere Aktionen: Dropdown am Knopf (Desktop), Aktionsblatt (iPhone) */
.mail-menu{position:relative;display:inline-flex}
.mail-menu__list{position:absolute;z-index:30;top:calc(100% + var(--space-6));right:0;min-width:240px}
.mail-actions-list{box-shadow:none;background:transparent;padding:0}
/* Antworten-Fenster: groß, Textfeld füllt den Platz */
.mail-sig p{margin:0 0 var(--space-10)}
.mail-sig p:last-child{margin-bottom:0}
.mail-sig a{color:inherit}
.mail-sig__accent{color:var(--brand-primary)}
.mail-compose__signature{display:grid;gap:var(--space-6);padding:var(--space-10) var(--space-12);border-radius:var(--radius-lg);background:var(--bg-surface-2);font:var(--font-small);color:var(--text-primary)}
.mail-compose__note{font:var(--font-tiny);color:var(--text-secondary)}
.mail-compose__swibbly{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-8)}
.mail-compose__swibbly .sw-input{flex:1 1 240px;min-width:0}
.mail-compose__swibbly .sw-input__help:empty{display:none}
.mail-compose__status{flex-basis:100%;margin:0;font:var(--font-small);color:var(--text-secondary)}
.mail-compose__status:empty{display:none}

#mail-compose.sw-dialog{width:min(880px,100%);height:min(92vh,900px)}
#mail-compose .sw-dialog__body{display:flex;flex-direction:column;min-height:0}
.mail-compose{display:flex;flex:1;flex-direction:column;gap:var(--space-10);min-height:0}
.mail-compose__fields{display:grid;gap:var(--space-8)}
.mail-compose__fields .sw-input__help:empty{display:none}
.mail-compose .sw-richtext{flex:1;grid-template-rows:auto auto minmax(0,1fr);min-height:0}
.mail-compose .sw-richtext__area{min-height:200px}
.mail-signature__preview [data-mail-signature-preview]{margin-top:var(--space-6);font:var(--font-small);color:var(--text-primary)}
.mail-reply__readonly{margin:0;font:var(--font-small);color:var(--text-secondary)}
.mail-swibbly__summary{margin:0;font:var(--font-small);color:var(--text-primary)}
.mail-swibbly__badges{display:flex;flex-wrap:wrap;gap:var(--space-6);margin-top:var(--space-8)}
.mail-swibbly__badges:empty{display:none}
.mail-swibbly__suggestion{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-6);margin-top:var(--space-10);padding-top:var(--space-10);box-shadow:inset 0 1px 0 var(--border-default)}
.mail-swibbly__suggestion p{flex:1 1 100%;margin:0;font:var(--font-small)}
.mail-swibbly__actions{display:flex;flex-wrap:wrap;gap:var(--space-6);margin-top:var(--space-12)}

/* Einstellungen */
.mail-accounts{display:grid;gap:var(--space-8);margin:0;padding:0;list-style:none}
.mail-account{display:flex;flex-wrap:wrap;gap:var(--space-8);align-items:center;justify-content:space-between;padding:var(--space-10) 0;box-shadow:inset 0 -1px 0 var(--border-default)}
.mail-account:last-child{box-shadow:none}
.mail-account__text{display:grid;gap:var(--space-3);min-width:0;font:var(--font-small);color:var(--text-secondary)}
.mail-account__text strong{font:var(--font-body-semibold);color:var(--text-primary)}
.mail-account__error{color:var(--status-danger)}
.mail-account__actions{display:flex;flex-wrap:wrap;gap:var(--space-6)}
.mail-account-form{display:grid;gap:var(--space-10)}
.mail-account-form__row{display:grid;grid-template-columns:minmax(0,1fr) 96px;gap:var(--space-8)}
.mail-account-form__access{display:grid;gap:var(--space-6);margin:0;padding:0;border:0}
.mail-account-form__access legend{margin-bottom:var(--space-6);font:var(--font-small-semibold);color:var(--text-secondary)}
.mail-account-form__person{display:flex;align-items:center;gap:var(--space-8);min-height:36px;font:var(--font-small);color:var(--text-primary)}
.mail-signature{display:grid;gap:var(--space-12)}
.mail-signature__fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-10)}
.mail-signature__preview{padding:var(--space-10) var(--space-12);border-radius:var(--radius-lg);background:var(--bg-surface-2)}
.mail-signature__preview > span{font:var(--font-tiny);color:var(--text-secondary)}
.mail-signature > .sw-btn,.mail-matchers > .sw-btn,.mail-sender > .sw-btn{justify-self:start}
.mail-signature__note{margin:0;font:var(--font-small);color:var(--text-secondary)}
.mail-sender{display:grid;gap:var(--space-10);max-width:480px}
.mail-matchers{display:grid;gap:var(--space-10)}

@media (max-width:1023px){
  .mail-thread{grid-template-columns:minmax(0,1fr)}
  .mail-thread__side{position:static}
}
@media (max-width:600px){
  .mail-ticket__body{grid-template-columns:minmax(0,1fr)}
  .mail-signature__fields{grid-template-columns:minmax(0,1fr)}
}
[data-mail-region="drafts"]:empty{display:none}