/* Mitteilungen (Glocke) .mi- und Posteingang der Vermittler .pe- (Leitstand 2, nur Tokens aus styles.css, hell und dunkel) */

/* ---------- Glocke in der Seitenleiste ---------- */
.nav-item.mi-glocke { cursor: pointer; }
.nav-item.mi-glocke.hat-neu svg.i { color: var(--ink); }
.nav-item.mi-glocke.hat-neu svg.i { animation: mi-wackeln 1.4s ease-in-out 1; transform-origin: 50% 10%; }
@keyframes mi-wackeln { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } }
.mandant-switch button.mi-hat { position: relative; overflow: visible; }
.mandant-switch .mi-ms-zahl { position: absolute; top: -7px; right: -3px; min-width: 17px; padding: 0 5px; border-radius: 99px; font-size: 10.5px; line-height: 16px; font-weight: 700;
  background: var(--ak-btn); color: #fff; border: 2px solid var(--flaeche); }

/* ---------- Kurzer Hinweis oben rechts (wie Anruf-Pop-up) ---------- */
.mi-pop { position: relative; padding: 12px 14px 12px 17px; display: flex; flex-direction: column; gap: 6px; background: var(--glas-voll); border: 1px solid var(--line-strong);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .45); animation: pop .25s ease-out; overflow: hidden; }
.mi-pop::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ak); }
body[data-mandant="med"] .mi-pop::before { background: linear-gradient(180deg, var(--ak), var(--ak2-deko)); }
html[data-theme="light"] .mi-pop { box-shadow: 0 16px 40px rgba(17, 17, 26, .16); }
.mi-pop-kopf { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); }
.mi-pop-kopf svg.i { width: 16px; height: 16px; color: var(--ink); }
.mi-pop-kopf .btn { margin-left: auto; min-height: 28px; height: 28px; width: 28px; padding: 0; border-radius: 9px; }
.mi-pop-kopf .btn svg.i { color: var(--muted); }
.mi-pop-titel { font-size: 14.5px; line-height: 1.35; color: var(--text); overflow-wrap: anywhere; }
.mi-pop-text { font-size: 13px; color: var(--muted); line-height: 1.4; overflow-wrap: anywhere; }
.mi-pop-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
@media (max-width: 420px) { #call-pops { left: 16px; right: 16px; width: auto; } }

/* ---------- Liste im Pop-up ---------- */
.mi-kopf-zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mi-kopf-zeile h2 { margin: 0; display: flex; align-items: center; gap: 10px; }
.mi-andere { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 4px; padding: 9px 12px; border-radius: 12px; background: var(--flaeche-2); border: 1px solid var(--line); font-size: 13px; }
.mi-liste { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.mi-zeile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--flaeche-2); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.mi-zeile:hover { border-color: var(--line-strong); background: var(--hover); }
.mi-zeile:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.mi-zeile > svg.i { width: 18px; height: 18px; color: var(--muted-2); }
.mi-zeile.neu { border-color: var(--ak-ln); background: var(--ak-bg); }
.mi-zeile.neu > svg.i { color: var(--ink); }
.mi-z-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mi-z-text b { font-size: 14px; overflow-wrap: anywhere; }
.mi-zeile:not(.neu) .mi-z-text b { font-weight: 600; color: var(--muted); }
.mi-z-text span { overflow-wrap: anywhere; }
.mi-z-zeit { white-space: nowrap; }

/* ---------- Posteingang ---------- */
.pe-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.pe-kopf .check-line { margin: 0; font-size: 13px; }
.pe-kopf .wahl .wahl-zahl { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: inline-grid; place-items: center; font-size: 11px; background: var(--flaeche-3); color: var(--text); }
.pe-kopf .wahl .wahl-zahl:empty { display: none; }
.pe-kopf .wahl button[aria-pressed="true"] .wahl-zahl { background: rgba(var(--silber-rgb), .25); color: inherit; }
.pe-hinweis { display: inline-flex; align-items: center; gap: 6px; }
.pe-hinweis svg.i { width: 14px; height: 14px; }
.pe-liste { display: flex; flex-direction: column; gap: 6px; }
.pe-zeile { display: grid; grid-template-columns: 10px auto minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 11px 14px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--flaeche-2); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.pe-zeile:hover { border-color: var(--line-strong); background: var(--hover); }
.pe-zeile:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.pe-punkt { width: 8px; height: 8px; border-radius: 50%; background: transparent; }
.pe-zeile.neu .pe-punkt { background: var(--ak); box-shadow: 0 0 8px rgba(var(--ak-rgb), .6); }
.pe-zeile .avatar { width: 34px; height: 34px; }
.pe-z-haupt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pe-z-titel { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.pe-z-titel b { font-size: 14px; overflow-wrap: anywhere; }
.pe-zeile:not(.neu) .pe-z-titel b { font-weight: 600; }
.pe-z-kand { font-size: 13px; color: var(--text); display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.pe-z-kand svg.i { width: 14px; height: 14px; color: var(--muted-2); flex: none; }
.pe-z-vorschau { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pe-zeile.neu .pe-z-vorschau { color: var(--text); }
.pe-z-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; white-space: nowrap; }
.pe-zahl { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: inline-grid; place-items: center; font-size: 11.5px; font-weight: 700; background: var(--ak-btn); color: #fff; }
.pe-etikett { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 18px;
  border: 1px solid var(--line-strong); color: var(--muted); background: var(--flaeche); }
.pe-etikett svg.i { width: 12px; height: 12px; }
.pe-etikett.mail { border-color: var(--info-ln); color: var(--info-tx); background: var(--info-bg); }
body[data-mandant="med"] .pe-etikett.mail { border-color: rgba(var(--ak-rgb), .35); color: var(--ink); background: var(--ak-bg); }
.pe-gesperrt { border-color: var(--warn-ln); color: var(--warn-tx); background: var(--warn-bg); }

/* ---------- Faden im Pop-up ---------- */
.pe-f-kopf { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.pe-f-kopf h2 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 20px; overflow-wrap: anywhere; }
.pe-f-titel { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 260px; }
.pe-f-kand { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.pe-f-kand svg.i { width: 15px; height: 15px; color: var(--muted-2); }
.pe-faden { display: flex; flex-direction: column; gap: 10px; max-height: min(46vh, 520px); overflow-y: auto; padding: 14px 2px; }
.pe-n { max-width: 84%; padding: 10px 13px; border-radius: 14px; border: 1px solid var(--line); background: var(--flaeche-2); }
.pe-n.ein { align-self: flex-start; border-top-left-radius: 4px; }
.pe-n.aus { align-self: flex-end; border-top-right-radius: 4px; background: var(--flaeche-3); }
.pe-n.neu { border-color: var(--ak-ln); box-shadow: inset 3px 0 0 var(--ak); }
.pe-n-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; margin-bottom: 5px; }
.pe-n-betreff { font-weight: 700; font-size: 13.5px; margin-bottom: 4px; overflow-wrap: anywhere; }
.pe-n-text { white-space: pre-wrap; font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }
.pe-n.mail .pe-n-text { max-height: 220px; overflow-y: auto; }
.pe-n-fuss { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; }
.pe-n-fuss svg.i { width: 13px; height: 13px; }
.pe-mail-status { font-size: 11.5px; color: var(--muted); }
.pe-mail-status.gesendet { color: var(--ok-tx); }
.pe-mail-status.fehler, .pe-mail-status.nicht_gesendet { color: var(--warn-tx); }
.pe-antwort { border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.pe-antwort textarea { width: 100%; min-height: 84px; resize: vertical; box-sizing: border-box; }
.pe-wege { display: flex; gap: 6px 18px; flex-wrap: wrap; align-items: center; }
.pe-wege .check-line { margin: 0; font-size: 13.5px; }
.pe-regel { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.pe-regel svg.i { width: 14px; height: 14px; }
.pe-warn { padding: 9px 12px; border-radius: 10px; background: var(--warn-bg); border: 1px solid var(--warn-ln); color: var(--warn-tx); font-size: 13px; }
.pe-mail-meta { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }

/* Schmal: Glocke als kompakte erste Pille (Symbol und Zahl), klebt links in der waagrechten Leiste und bleibt so auf JEDER Seite sichtbar
   (die Leiste zentriert den aktiven Eintrag, die übrigen Pillen gleiten darunter durch); Wort nur für Screenreader */
@media (max-width: 900px) {
  .nav-main .nav-item.mi-glocke { gap: 6px; padding: 0 11px; position: sticky; left: 0; z-index: 2; overflow: visible; background: var(--glas-voll); }
  /* Darunter durchgleitende Pillen links (Rand) abdecken und rechts sanft ausblenden, damit keine fremde Zahl neben der Glocke steht */
  .nav-main .nav-item.mi-glocke::before { content: ""; position: absolute; top: -3px; bottom: -3px; right: 100%; width: 17px; background: var(--sb); pointer-events: none; }
  .nav-main .nav-item.mi-glocke::after { content: ""; position: absolute; top: -3px; bottom: -3px; left: calc(100% + 1px); width: 30px; background: linear-gradient(90deg, var(--sb) 45%, transparent); pointer-events: none; }
  .nav-item.mi-glocke > span:not(.count) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .nav-item.mi-glocke .count { margin-left: 0; }
}
/* Handy: ist ein Pop-up offen, erscheinen Hinweise unterhalb seines Kopfs (Name, „1 von 5“ und Schliessen bleiben frei), kompakt ohne Text */
@media (max-width: 760px) {
  body:has(#modal:not(.hidden)) #call-pops { top: 104px; }
  body:has(#modal:not(.hidden)) .mi-pop { padding: 9px 12px 10px 15px; gap: 4px; }
  body:has(#modal:not(.hidden)) .mi-pop-text { display: none; }
}
@media (max-width: 760px) {
  .pe-zeile { grid-template-columns: 8px minmax(0, 1fr) auto; gap: 10px; padding: 10px 12px; }
  .pe-zeile .avatar { display: none; }
  .pe-n { max-width: 94%; }
  .pe-kopf .wahl { max-width: 100%; }
  .pe-antwort .modal-actions { flex-wrap: wrap; }
  .pe-antwort .modal-actions .btn { flex: 1 1 auto; }
  .mi-zeile { grid-template-columns: auto minmax(0, 1fr); }
  .mi-z-zeit { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { .nav-item.mi-glocke.hat-neu svg.i { animation: none; } }