:root {
  --paper: #f1f4f6;
  --surface: #ffffff;
  --ink: #16202b;
  --muted: #5d6b7a;
  --rule: #dbe2e8;
  --accent: #0e6e6a;
  --accent-soft: #dcebea;
  --unread: #a8590b;
  --danger: #9b2c23;

  /* Drei Stufen, die sich auseinanderhalten lassen: Weiß, Streifen, Überfahren.
     Der Streifen liegt 1,135 über Weiß – deutlich sichtbar, ohne die Liste zu
     zerschneiden. Das Überfahren muss darunter liegen, nicht daneben: läge es
     auf gleicher Höhe, verschwände die Rückmeldung auf gestreiften Zeilen. */
  --zebra: #f1f4f7;
  --row-hover: #e6ebf1;

  /* Schrift auf farbigen Flächen. Im dunklen Modus werden Akzent und Warnfarbe
     hell, dann braucht es dunkle Schrift – weiß käme dort nur auf 2,5:1. */
  --on-accent: #ffffff;
  --on-danger: #ffffff;

  --ui: "Avenir Next", "Segoe UI", Inter, system-ui, sans-serif;
  --read: Charter, "Iowan Old Style", "Source Serif 4", Georgia, serif;

  --rail-w: 15rem;
  --list-w: 23rem;

  /* Abstandsskala. Vorher standen 0.15 bis 1.4rem wild nebeneinander; eine
     kleine Reihe gibt der Oberfläche einen gemeinsamen Takt. */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;

  /* Ebenen an einer Stelle. Ein positioniertes Element mit z-index liegt immer
     über einem mit z-index:auto – ohne diese Skala deckte der klebende
     Listenkopf den Dialog ab, und der Toast verschwand unter beidem. */
  --z-settings: 5;
  --z-sticky: 1;
  --z-modal: 10;
  --z-ctxmenu: 15;
  --z-toast: 20;
}

/*
 * Das hidden-Attribut muss jede display-Regel schlagen. Ohne !important gewinnt
 * jede Klasse aus diesem Stylesheet gegen das [hidden] des Browser-Stylesheets –
 * .login, .app, .compose und .attachments wären dann dauerhaft sichtbar,
 * übereinandergestapelt, und jedes el.hidden = true im JavaScript bliebe wirkungslos.
 */
[hidden] { display: none !important; }

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #131a21;
    --surface: #1a222b;
    --ink: #e4eaef;
    --muted: #93a3b2;
    --rule: #2b3641;
    --accent: #4bb3ac;
    --accent-soft: #1d3336;
    --unread: #d99b4a;
    --danger: #d8776c;
    --on-accent: #06211f;
    --on-danger: #2a0f0c;
    /* Im Dunkeln hebt der Streifen an, statt aufzuhellen – gleicher Abstand. */
    --zebra: #1e2731;
    --row-hover: #28323e;
  }
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.3rem 0.7rem;
}

button:hover { border-color: var(--accent); }

button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

button.primary:hover { filter: brightness(1.08); }

button.danger { color: var(--danger); }

button.link {
  background: none;
  border: none;
  padding: 0;
  color: var(--muted);
  text-decoration: underline;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

input[type="text"], input[type="password"], input[type="search"], textarea, select {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.35rem 0.5rem;
  width: 100%;
}

kbd {
  font-family: var(--ui);
  font-size: 0.85em;
  border: 1px solid var(--rule);
  border-bottom-width: 2px;
  border-radius: 3px;
  padding: 0 0.3em;
}

.hint { color: var(--muted); font-size: 0.85rem; }

/* ----------------------------------------------------------- Anmeldung */

.login {
  display: grid;
  place-items: center;
  height: 100%;
  padding: 1rem;
}

.login-box {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 2rem;
  width: min(24rem, 100%);
  display: grid;
  gap: 0.6rem;
}

.login-box h1 { margin: 0; font-size: 1.4rem; font-weight: 600; }
.login-box p { margin: 0; color: var(--muted); font-size: 0.9rem; }
.login-box label { font-size: 0.85rem; color: var(--muted); margin-top: 0.5rem; }
.login-box button { margin-top: 0.5rem; background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.login-error { color: var(--danger) !important; }

/* -------------------------------------------------------------- Layout */

.app {
  display: grid;
  grid-template-columns: var(--rail-w) var(--list-w) minmax(0, 1fr);
  height: 100%;
}

.list-pane, .reader {
  min-height: 0;
  overflow: auto;
}

/* Die Spalte selbst scrollt nicht – sonst wanderte der Fuß mit den Ordnern
   aus dem Bild. Gescrollt wird nur die Ordnerliste darin. */
.rail {
  min-height: 0;
  overflow: hidden;
}

.rail {
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  padding: 0.9rem;
  gap: 0.9rem;
}

.rail-head { display: grid; gap: 0.6rem; flex: 0 0 auto; }

.account {
  font-size: 0.85rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.folders {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  display: grid;
  align-content: start;
  gap: 1px;
}

.folders button {
  width: 100%;
  background: none;
  border: none;
  border-radius: 4px;
  padding: 0.3rem 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.2rem;
  text-align: left;
}

.folders button:hover { background: var(--accent-soft); }

.folders button[aria-current="true"] {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.folders .count { color: var(--unread); font-variant-numeric: tabular-nums; }

.rail-foot {
  /* Bleibt unten stehen, egal wie viele Ordner darüber liegen. */
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--muted);
  border-top: 1px solid var(--rule);
  padding-top: 0.6rem;
}

/* ---------------------------------------------------------------- Liste */

.list-pane {
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  background: var(--surface);
}

.list-head {
  position: sticky;
  top: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  padding: var(--s3);
  display: grid;
  gap: var(--s2);
  z-index: var(--z-sticky);
}

.list-head h2 { margin: 0; font-size: 1.05rem; font-weight: 600; }

/* Suche, Filter und Neu laden in einer Zeile: spart drei Zeilen Höhe, und
   die gewinnt die Nachrichtenliste. */
.list-controls {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
}

.list-controls input[type="search"] { flex: 1 1 100%; min-width: 0; }

.toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.toggle input { width: auto; }

.list-controls .icon { flex: none; font-size: 0.85rem; }
.toggle { flex: none; white-space: nowrap; }

.messages {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}

.messages li {
  border-bottom: 1px solid var(--rule);
  border-left: 3px solid transparent;
  padding: var(--s3) var(--s3);
  cursor: pointer;
  display: grid;
  gap: 0.15rem;
}

.messages li { transition: background 120ms ease; }
.messages li:hover { background: var(--row-hover); }

.messages li[aria-selected="true"] {
  border-left-color: var(--accent);
  background: var(--accent-soft);
}

.messages .row {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--muted);
}

/* Der Absender füllt die Zeile, das Datum wird nach rechts geschoben. Mit
   space-between verteilten sich Klappknopf, Zähler, Absender und Datum
   gleichmäßig – der Absender landete dann in der Mitte. */
.messages .from {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.messages .date { flex: none; margin-left: auto; font-variant-numeric: tabular-nums; }

.messages .subject {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.messages li.unread .subject { font-weight: 600; }
.messages li.unread .from { color: var(--unread); }

/* Fettschrift und Farbe allein tragen die Auskunft „ungelesen" schlecht:
   das eine geht im Überfliegen unter, das andere bei Farbschwäche. */
.messages li.unread .from::before {
  content: "";
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--unread);
  margin-right: var(--s1);
  vertical-align: 0.05em;
}

.messages .marks { color: var(--muted); font-size: 0.8rem; }

.list-foot { padding: 0.9rem; }
.list-foot button { width: 100%; }

/* ----------------------------------------------------------- Leseansicht */

.reader {
  background: var(--surface);
  padding: var(--s5) 1.75rem 4rem;
}

.empty { color: var(--muted); max-width: 34ch; margin-top: 3rem; }

.reader-head { border-bottom: 1px solid var(--rule); padding-bottom: var(--s4); }

.reader-head h2 {
  margin: 0 0 0.8rem;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.25;
  max-width: 40ch;
}

.reader-meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.15rem var(--s3);
  margin: 0;
  font-size: 0.88rem;
  max-width: 52ch;
}

.reader-meta dt { color: var(--muted); }
.reader-meta dd { margin: 0; overflow-wrap: anywhere; }

.reader-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  align-items: center;
  margin-top: var(--s4);
}

.reader-actions button, .reader-actions select { font-size: 0.88rem; }
.reader-actions select {
  width: auto;
  max-width: 14rem;
  text-overflow: ellipsis;
}

.attachments {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.attachments a {
  display: inline-block;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.25rem 0.6rem;
  font-size: 0.85rem;
  color: var(--accent);
  text-decoration: none;
}

.attachments a:hover { border-color: var(--accent); }

.body {
  font-family: var(--read);
  font-size: 1.02rem;
  line-height: 1.62;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-width: 68ch;
  margin-top: 1.4rem;
}

.body .quote { color: var(--muted); }

/* ------------------------------------------------------------- Verfassen */

.compose {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgb(16 24 32 / 0.45);
  display: grid;
  place-items: center;
  padding: 1rem;
}

.compose-box {
  background: var(--surface);
  border-radius: 6px;
  border: 1px solid var(--rule);
  padding: 1.2rem;
  width: min(44rem, 100%);
  max-height: 90vh;
  overflow: auto;
  display: grid;
  gap: 0.3rem;
}

.compose-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.6rem;
  position: sticky;
  top: -1.2rem;
  background: var(--surface);
  padding: 1.2rem 0 0.6rem;
  margin-top: -1.2rem;
}

.compose-head h2 { margin: 0; font-size: 1.1rem; font-weight: 600; }

.compose-box label { font-size: 0.82rem; color: var(--muted); margin-top: 0.5rem; }

.compose-box textarea {
  font-family: var(--read);
  line-height: 1.55;
  resize: vertical;
  min-height: 8rem;
  height: clamp(8rem, 38vh, 22rem);
}

.compose-bottom {
  position: sticky;
  bottom: -1.2rem;
  background: var(--surface);
  border-top: 1px solid var(--rule);
  margin: 0.8rem -1.2rem -1.2rem;
  padding: 0.7rem 1.2rem 1.2rem;
}

.compose-foot {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 0.6rem;
}

/* Schiebt Senden nach rechts, egal wie viel davor steht. */
.compose-foot #compose-send { margin-left: auto; }
.compose-foot .hint { font-size: 0.8rem; }

/* ----------------------------------------------------------------- Toast */

.toast {
  position: fixed;
  z-index: var(--z-toast);
  bottom: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--paper);
  border-radius: 5px;
  padding: 0.55rem 1rem;
  font-size: 0.9rem;
  max-width: 90vw;
}

.toast.error { background: var(--danger); color: var(--on-danger); }

/* ------------------------------------------------------------ Schmal/Mobil */

.back { display: none; }

@media (max-width: 60rem) {
  .app { grid-template-columns: 1fr; }

  .rail, .list-pane, .reader { display: none; }

  .app[data-view="folders"] .rail,
  .app[data-view="list"] .list-pane,
  .app[data-view="reader"] .reader { display: flex; }

  .app[data-view="reader"] .reader { display: block; }

  .back {
    display: inline-block;
    margin-bottom: 0.8rem;
    background: none;
    border: none;
    color: var(--accent);
    padding: 0;
  }

  .reader { padding: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* --------------------------------------------------------- Rechtsklick-Menü */

.ctxmenu {
  position: fixed;
  z-index: var(--z-ctxmenu);
  min-width: 15rem;
  padding: 0.3rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgb(16 24 32 / 0.18);
  display: grid;
  gap: 0.1rem;
}

.ctxmenu button {
  text-align: left;
  border: 0;
  background: none;
  padding: 0.45rem 0.6rem;
  border-radius: 4px;
  font-size: 0.88rem;
  width: 100%;
}

.ctxmenu button:hover { background: var(--accent-soft); }
.ctxmenu .ctx-title {
  padding: 0.35rem 0.6rem;
  font-size: 0.78rem;
  color: var(--muted);
  border-bottom: 1px solid var(--rule);
  margin-bottom: 0.2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Vor MCP verborgen: in der Weboberfläche weiterhin sichtbar, nur markiert. */
.mcp-hidden { opacity: 0.62; }

.mcp-badge {
  font-size: 0.7rem;
  color: var(--muted);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0 0.3rem;
  margin-left: 0.4rem;
  white-space: nowrap;
}

.ctxmenu .ctx-back { color: var(--muted); font-size: 0.82rem; }
.ctxmenu .ctx-sep {
  height: 1px;
  background: var(--rule);
  margin: 0.25rem 0.3rem;
}

/* ------------------------------------------------------------- Anhänge */

.attach-btn {
  border: 1px solid var(--rule);
  border-radius: 5px;
  padding: 0.35rem 0.7rem;
  font-size: 0.85rem;
  cursor: pointer;
  margin: 0;
  color: var(--ink);
}

.attach-btn:hover { border-color: var(--accent); }

.attach-list {
  list-style: none;
  margin: 0;
  max-height: 7rem;
  overflow: auto;
  padding: 0;
  display: grid;
  gap: 0.3rem;
}

.attach-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  border: 1px solid var(--rule);
  border-radius: 5px;
  padding: 0.35rem 0.6rem;
}

.attach-list .size { color: var(--muted); margin-left: auto; white-space: nowrap; }
.attach-list button {
  border: 0;
  background: none;
  color: var(--danger);
  padding: 0 0.2rem;
  font-size: 0.85rem;
}
.attach-list .over { color: var(--danger); }

/* -------------------------------------------------------- Einstellungen */

.rail-foot .gear {
  border: 0;
  background: none;
  padding: 0.2rem;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
}

.rail-foot .gear:hover { color: var(--accent); background: var(--accent-soft); }

.settings {
  position: fixed;
  inset: 0;
  z-index: var(--z-settings);
  background: var(--paper);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.4rem;
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
}

.settings-head h2 { margin: 0; font-size: 1.05rem; font-weight: 600; }

/* Schmale Spalte nur für die Überschriften, breite für die Einstellungen. */
.settings-body {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  min-height: 0;
}

.settings-nav {
  border-right: 1px solid var(--rule);
  background: var(--surface);
  padding: 0.8rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  overflow: auto;
}

/* Schiebt das Schließen an den unteren Rand, egal wie viele Kategorien es gibt. */
.settings-close {
  margin-top: auto;
  padding-top: 0.8rem;
  border: 0;
  border-top: 1px solid var(--rule);
  background: none;
  text-align: left;
  padding-left: 0.7rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.settings-close:hover { color: var(--accent); }

.settings-tab {
  border: 0;
  background: none;
  text-align: left;
  padding: 0.5rem 0.7rem;
  border-radius: 5px;
  font-size: 0.92rem;
  color: var(--ink);
}

.settings-tab:hover { background: var(--accent-soft); }
.settings-tab[aria-current="true"] {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.settings-panes { overflow: auto; padding: 1.4rem 1.8rem 3rem; }
.settings-pane { max-width: 46rem; }
.settings-pane h3 { margin: 0 0 0.6rem; font-size: 1.15rem; font-weight: 600; }
.settings-pane .hint { display: block; margin: 0.5rem 0; line-height: 1.5; }
.settings-pane code {
  font-size: 0.85em;
  background: var(--accent-soft);
  padding: 0.05rem 0.3rem;
  border-radius: 3px;
}

.grid2 {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem 0.9rem;
  margin: 1rem 0;
}

.grid2 label { font-size: 0.88rem; color: var(--muted); margin: 0; }
.grid2 input[readonly] { background: var(--paper); color: var(--muted); }

.settings-actions {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.settings-actions .primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

#s-result.ok { color: var(--accent); }
#s-result.error { color: var(--danger); }

.hidden-list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.hidden-list li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  border: 1px solid var(--rule);
  border-radius: 5px;
  padding: 0.45rem 0.7rem;
  font-size: 0.88rem;
}

.hidden-list .kind {
  font-size: 0.72rem;
  color: var(--muted);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0 0.3rem;
  white-space: nowrap;
}

.hidden-list .value { color: var(--muted); margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hidden-list button { border: 0; background: none; color: var(--danger); padding: 0 0.2rem; }

@media (max-width: 60rem) {
  .settings-body { grid-template-columns: 9rem minmax(0, 1fr); }
  .grid2 { grid-template-columns: 1fr; gap: 0.25rem; }
  .grid2 label { margin-top: 0.5rem; }
}

.settings-pane h4 {
  margin: 1.6rem 0 0.3rem;
  font-size: 0.95rem;
  font-weight: 600;
}

.login-box .link { margin-top: 0.4rem; font-size: 0.85rem; }
.login-box #login-totp-row { display: contents; }

.login-box #setup-token-row { display: contents; }

.login-box #setup-email-row { display: contents; }

/* ------------------------------------------------- Optionen mit Erklärung */

.optlist { display: grid; gap: 0.1rem; margin: 1rem 0; }

.opt {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr) auto;
  gap: 0.2rem 0.7rem;
  align-items: start;
  padding: 0.7rem 0.2rem;
  border-bottom: 1px solid var(--rule);
}

.opt:last-child { border-bottom: 0; }
.opt .opt-name { font-size: 0.92rem; font-weight: 600; grid-column: 2; }
.opt .opt-env {
  grid-column: 3;
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
  padding-top: 0.15rem;
}
.opt .opt-hint {
  grid-column: 2 / -1;
  font-size: 0.83rem;
  color: var(--muted);
  line-height: 1.5;
  margin-top: 0.15rem;
}
.opt .opt-control { grid-column: 1; padding-top: 0.15rem; }
.opt .opt-control input[type="checkbox"] { margin: 0; }
.opt .opt-value { grid-column: 2 / -1; margin-top: 0.35rem; max-width: 22rem; }
.opt .opt-value input { width: 100%; }
.opt.changed { background: var(--accent-soft); border-radius: 5px; }
.opt .opt-restart { color: var(--unread); font-size: 0.78rem; }
.opt-readonly .opt-name { grid-column: 1 / 3; }

/*
 * Antworten sitzen eingerückt und tragen ein kleines ↳ vor dem Absender.
 *
 * Vorher lief dort eine senkrechte Linie über die volle Zeilenhöhe – die las
 * sich wie ein Trenner statt wie eine Verbindung, und seit der graue Streifen
 * den ganzen Verlauf hinterlegt, sagte sie ohnehin dasselbe ein zweites Mal.
 *
 * Das Zeichen sitzt an .row und nicht an .from: dort trägt ::before schon den
 * Punkt für ungelesene Nachrichten.
 */
.messages li.reply .row::before {
  content: "↳";
  flex: none;
  color: var(--muted);
  opacity: 0.55;
  font-size: 0.85rem;
  line-height: 1;
}

/* ---------------------------------------------------------- Schlagwörter */

.tags { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }

.tag {
  font-size: 0.72rem;
  line-height: 1.5;
  padding: 0 0.4rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  white-space: nowrap;
}

/* Thunderbirds fünf Farben, damit dieselbe Markierung wiedererkennbar bleibt. */
.tag[data-label="$label1"] { color: #b3261e; }
.tag[data-label="$label2"] { color: #a35a00; }
.tag[data-label="$label3"] { color: #2b6b34; }
.tag[data-label="$label4"] { color: #1b5fa8; }
.tag[data-label="$label5"] { color: #6b3fa0; }

@media (prefers-color-scheme: dark) {
  .tag[data-label="$label1"] { color: #f3877e; }
  .tag[data-label="$label2"] { color: #e0a353; }
  .tag[data-label="$label3"] { color: #7dc487; }
  .tag[data-label="$label4"] { color: #7fb3e8; }
  .tag[data-label="$label5"] { color: #b79ae0; }
}

.selbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  padding: var(--s2) var(--s3);
  background: var(--accent-soft);
  border-bottom: 1px solid var(--rule);
  font-size: 0.85rem;
}

.selbar button { font-size: 0.82rem; padding: 0.2rem 0.5rem; }
.selbar #selbar-count { margin-right: auto; color: var(--accent); font-weight: 600; }

/* Ausgewählt, aber nicht geöffnet: erkennbar, ohne mit der offenen Nachricht
   verwechselt zu werden. */
.messages li.picked { background: var(--accent-soft); }
.messages li.picked::after {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 3px;
  background: var(--accent);
  opacity: 0.55;
}
.messages li { position: relative; }

#msg-tags { margin-top: var(--s2); }
.messages .tags { margin-top: 0.2rem; }

/* Jede zweite Wurzelnachricht bekommt einen Streifen. Die Regeln stehen
   bewusst hier unten und nennen den Zustand ausdrücklich: sonst entschiede
   die Reihenfolge im Stylesheet darüber, ob das Überfahren noch durchkommt. */
.messages li.alt { background: var(--zebra); }
.messages li.alt:hover { background: var(--row-hover); }

/* Auswahl und geöffnete Nachricht schlagen den Streifen. */
.messages li.alt.picked,
.messages li.alt[aria-selected="true"] { background: var(--accent-soft); }

/* Eingabefeld im Rechtsklickmenü, für neue Schlagwörter. */
.ctxmenu .ctx-input {
  display: flex;
  gap: 0.3rem;
  padding: 0.3rem 0.6rem 0.4rem;
}

.ctxmenu .ctx-input input {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.85rem;
  padding: 0.2rem 0.4rem;
}

.ctxmenu .ctx-input button {
  width: auto;
  flex: none;
  border: 1px solid var(--rule);
  font-size: 0.8rem;
  padding: 0.2rem 0.5rem;
}

/* Klappknopf am Verlauf. Bewusst schmal und still – er soll die Zeile nicht
   beherrschen, aber groß genug zum Treffen sein. */
.messages .twist {
  border: 0;
  background: none;
  /* Große genug zum Treffen, ohne die Zeile zu beherrschen. */
  padding: 0;
  width: 1.4rem;
  height: 1.4rem;
  margin: -0.3rem 0 -0.3rem -0.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: var(--muted);
  flex: none;
}

.messages .twist:hover {
  color: var(--accent);
  background: var(--accent-soft);
}

/* Eingeklappt zeigt der Haken nach rechts. */
.messages .twist svg { transition: transform 120ms ease; }
.messages .twist svg.zu { transform: rotate(-90deg); }

.messages .twist-count {
  flex: none;
  font-size: 0.72rem;
  color: var(--muted);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0 0.35rem;
  margin-right: 0.2rem;
}


/* ------------------------------------------------ Ordnerbaum */

/* Der Platz wird immer freigehalten, damit die Namen nicht springen. */
.folders .twist {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 14px;
  height: 18px;
  border-radius: 4px;
  color: var(--muted);
}
.folders .twist:not(.leer):hover {
  background: var(--row-hover);
  color: var(--ink);
}
.folders .twist svg {
  transition: transform 0.12s ease;
}
.folders .twist svg.zu {
  transform: rotate(-90deg);
}
.folders .fname {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ------------------------------------------------ Rückfrage */

dialog.confirm {
  max-width: 28rem;
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 12px 40px rgb(0 0 0 / 0.22);
}
dialog.confirm::backdrop {
  background: rgb(0 0 0 / 0.35);
}
dialog.confirm h2 {
  margin: 0 0 var(--s2);
  font-size: 1.05rem;
}
dialog.confirm p {
  margin: 0 0 var(--s4);
  color: var(--muted);
  line-height: 1.5;
}
.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--s2);
}

/* Im Bestätigungsfenster gefüllt statt nur farbig: der Knopf soll die
   Tragweite zeigen, nicht wie ein gewöhnlicher Eintrag aussehen. */
dialog.confirm button.danger {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--on-danger);
}
dialog.confirm button.danger:hover { filter: brightness(1.08); }

.folders-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s3) var(--s3) var(--s1);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.icon-btn {
  width: 22px;
  height: 22px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--muted);
  border-radius: 5px;
}
.icon-btn:hover {
  background: var(--row-hover);
  color: var(--ink);
}

/* Standardordner: kein Abstand nach unten, die Überschrift trennt bereits. */
/* Die Standardordner behalten ihre Höhe – sie schrumpfen nicht, weil unten
   viele Ordner liegen. Erst wenn sie selbst mehr als knapp die Hälfte der
   Spalte beanspruchen (etwa weil im Papierkorb viele Ordner liegen), scrollen
   sie in sich. */
.folders.special {
  flex: 0 0 auto;
  max-height: 45%;
  overflow-y: auto;
}

.ficon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 16px;
  color: var(--muted);
}
.folders button[aria-current="true"] .ficon { color: var(--accent); }

/* Die Zahl steht rechts, egal wie lang der Name ist. */
.folders .count { margin-left: auto; padding-left: 0.4rem; }

/* Der Rechtsklick soll auch unter dem letzten Ordner noch greifen. */
/* Die eigentliche Ablage nimmt den übrigen Platz und scrollt darin.
   min-height: 0 ist nötig, weil ein Flex-Element sonst nicht unter die Höhe
   seines Inhalts schrumpft und stattdessen die Spalte aufbläht. */
.folders:not(.special) {
  flex: 1 1 auto;
  min-height: 3rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ------------------------------------------------ Ziehen und Ablegen */

/* Das Ziel hebt sich deutlich ab: beim Ziehen sieht man den Zeiger, nicht die
   Zeile darunter. Ein zarter Farbton allein wäre zu leicht zu übersehen. */
.folders li.drop-ziel > button,
.folders li.drop-kopie > button,
.folders-head.drop-ziel {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 2px var(--accent);
}
.folders li.drop-kopie > button::after {
  content: "+";
  margin-left: auto;
  padding-left: 0.4rem;
  font-weight: 700;
  color: var(--accent);
}

.folders-head.drop-ziel {
  border-radius: 4px;
  color: var(--accent);
}

/* Gezogene Zeilen sollen nicht am Zeiger kleben bleiben. */
.messages li[draggable="true"],
.folders button[draggable="true"] {
  -webkit-user-drag: element;
}

/* Schleppbild für mehrere Nachrichten. Liegt außerhalb des Sichtfelds, bis der
   Browser es im Moment des Greifens abfotografiert. */
.zieh-bild {
  position: fixed;
  top: -1000px;
  left: -1000px;
  padding: 0.35rem 0.7rem;
  border-radius: 6px;
  background: var(--accent);
  color: var(--on-accent);
  font: 600 0.85rem var(--ui);
  white-space: nowrap;
  pointer-events: none;
}

/* Dateien über dem Verfassen-Fenster. */
.compose.datei-ziel .compose-box {
  outline: 2px dashed var(--accent);
  outline-offset: -6px;
  border-radius: 8px;
}

/* ------------------------------------------------ Erweiterte Filter */

.suchzeile {
  display: flex;
  align-items: center;
  gap: var(--s2);
  /* min-width: 0 ist nötig, sonst drückt die Zeile das Suchfeld auf die
     Breite seines eigenen Mindestinhalts zusammen. */
  /* Eigene Zeile: Suchfeld und Filterknopf zusammen, darunter die Schalter.
     Alles nebeneinander drückte das Suchfeld auf wenige Zeichen zusammen. */
  flex: 1 1 100%;
  min-width: 0;
}
.suchzeile input[type="search"] {
  flex: 1;
  min-width: 0;
}

.filter-knopf {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  color: var(--muted);
}
.filter-knopf:hover { color: var(--ink); }
.filter-knopf.aktiv {
  color: var(--accent);
  border-color: var(--accent);
}

/* Die Zahl sagt, wie viele Filter greifen – auch wenn das Feld zu ist. Ohne
   sie erklärte eine kurze Liste sich nicht. */
.filter-zahl {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
}

.filter {
  padding: var(--s3) var(--s3) var(--s3);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  display: grid;
  gap: var(--s3);
}

.filter-gitter {
  display: grid;
  /* Zwei Spalten, sobald die Liste breit genug ist – bei 23rem Spaltenbreite
     ist sie das. Darunter fällt es von selbst auf eine zurück. */
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--s2) var(--s3);
}
.filter-gitter label,
.filter .bereich {
  display: grid;
  gap: 0.2rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.filter-gitter input,
.filter-gitter select {
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--ink);
}
.filter-gitter label:has(.zeitraum) { grid-column: 1 / -1; }
.zeitraum {
  display: flex;
  gap: var(--s2);
}
.zeitraum input { flex: 1; min-width: 0; }

.filter-schalter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}
.filter-schalter .toggle,
.filter .bereich .toggle {
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--ink);
}

.filter-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s3);
}
.filter .bereich {
  border: none;
  margin: 0;
  padding: 0;
}
.filter .bereich legend {
  padding: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
}
.filter .bereich {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
}
.filter-aktionen {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-left: auto;
}

/* Ordnername an einem Treffer aus einem anderen Ordner. */
.ort {
  display: inline-block;
  margin-right: 0.4rem;
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 600;
  vertical-align: 0.08em;
}