/* EIN Posteingang (10.10.2026, posteingang.js): Filter-Chips, Anfragen, Gesprächszeilen. Nur Variablen aus meeyo.css
   (--nacht, --pflaume, --pflaume-hell, --linie, --milch, --nebel, --korall, --violett, --verlauf, --gelb, --radius) —
   damit stimmen Hell und Dunkel von selbst. */
.pe-seite { max-width: 720px; margin: 0 auto }
.pe-filter { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 12px }   /* 17.10.2026: umbrechen statt versteckt seitwaerts rollen — am Handy lagen «Direkt», «Räume», «Events» unsichtbar ausserhalb (Ausrichtungs-Probe) */
.pe-chip { white-space: nowrap; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 700; font-size: .88rem; padding: 7px 13px; display: inline-flex; align-items: center; gap: 6px }
.pe-chip-zahl { font-style: normal; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--korall); color: #fff; font-size: .74rem; line-height: 20px; text-align: center }
.pe-chip.an .pe-chip-zahl { background: #fff; color: var(--korall) }
.pe-titel { font-size: .95rem; color: var(--nebel); margin: 8px 2px 8px; font-weight: 700 }
.pe-anfragen, .pe-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px }
.pe-anfragen { gap: 10px; margin-bottom: 18px }

.pe-anfrage { background: var(--pflaume); border: 1px solid var(--linie); border-radius: var(--radius); padding: 14px }
.pe-anfrage.neu { border-color: var(--korall); box-shadow: 0 0 0 1px var(--korall) inset }
.pe-anfrage-kopf { display: flex; gap: 12px; align-items: center }
.pe-anfrage-text { margin: 0; line-height: 1.4 }
.pe-erste { margin: 10px 0 0; padding: 10px 12px; border-radius: 14px; background: var(--pflaume-hell); border-left: 3px solid var(--violett); white-space: pre-wrap; overflow-wrap: anywhere }
.pe-warn { color: var(--gelb); margin: 8px 0 0 }
.pe-anfrage-knoepfe { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap } .pe-anfrage-knoepfe button { flex: 1 1 120px; padding: 10px 14px }
.pe-anfrage-knoepfe button.pe-ja { background: var(--verlauf); color: #fff }

.pe-zeile { position: relative; display: flex; align-items: center; min-width: 0 }
.pe-link { flex: 1; min-width: 0; display: flex; gap: 12px; align-items: center; padding: 10px 8px; border-radius: 16px; text-decoration: none; color: inherit }
.pe-link:hover, .pe-link:focus-visible { background: var(--pflaume-hell) }
.pe-bild { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; font-weight: 800; font-size: 1.15rem;
  background: var(--pflaume-hell); color: var(--milch); border: 1px solid var(--linie) }
.pe-bild img { width: 100%; height: 100%; object-fit: cover }
.pe-bild-person { background: var(--verlauf); color: #fff; border: 0 }
.pe-bild-raum { color: var(--violett); font-size: 1.4rem } .pe-bild-event { font-size: 1.25rem }
.pe-zeile.neu .pe-bild-person { box-shadow: 0 0 0 2px var(--nacht), 0 0 0 4px var(--korall) }
.pe-mitte { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px }
.pe-oben { display: flex; justify-content: space-between; align-items: baseline; gap: 8px }
.pe-name { min-width: 0; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.pe-zeit { flex: 0 0 auto; color: var(--nebel); font-size: .78rem }
.pe-zeile.neu .pe-zeit { color: var(--korall); font-weight: 700 }
.pe-herkunft { color: var(--violett); font-size: .78rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
:root[data-theme="light"] .pe-herkunft { color: var(--violett) }
.pe-vorschau { color: var(--nebel); font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.pe-zeile.neu .pe-vorschau { color: var(--milch); font-weight: 600 }
.pe-rechts { display: flex; align-items: center; gap: 6px; flex: 0 0 auto }
.pe-zahl { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--korall); color: #fff; font-size: .75rem; font-weight: 800; line-height: 22px; text-align: center }
.pe-zeile.stumm .pe-zahl { background: var(--pflaume-hell); color: var(--nebel) }
.pe-stumm { font-size: .85rem; opacity: .7 }
.pe-zeile .pe-mehr { flex: 0 0 36px; width: 36px; height: 36px; padding: 0; border-radius: 50%; font-size: 1.1rem; line-height: 1; margin-left: 2px; background: transparent; color: var(--nebel) }
.pe-zeile .pe-mehr:hover, .pe-zeile .pe-mehr:focus-visible { background: var(--pflaume-hell); color: var(--milch) }
.pe-trenner { color: var(--nebel); font-size: .8rem; font-weight: 700; padding: 14px 8px 4px; border-top: 1px solid var(--linie); margin-top: 8px }
.pe-zeile.versunken { opacity: .78 }
.pe-leer { text-align: center; padding: 30px 12px; color: var(--nebel) }

/* Zahl am Chats-Symbol der Leiste (statt nur eines Punkts) */
.tab-punkt.mit-zahl { width: auto; height: 18px; min-width: 18px; padding: 0 5px; border-radius: 999px; font: 800 .68rem/14px "Jakarta", system-ui, sans-serif; font-style: normal; color: #fff; text-align: center; top: 0 }

/* «Direkt schreiben»-Blatt und die Anfrage oben im Chat */
.pe-direkt .dialog-karte { max-width: 460px } .pe-direkt textarea { width: 100%; margin-top: 6px; box-sizing: border-box }
.pe-direkt-feld { display: block; margin-top: 8px }
.pe-chat-herkunft { display: inline-flex; align-items: center; gap: 4px; color: var(--violett); font-weight: 700; text-decoration: none; font-size: .82rem }
.pe-chat-herkunft:hover { text-decoration: underline }
.pe-chat-anfrage { margin: 10px 12px 0; padding: 12px 14px; border-radius: var(--radius); background: var(--pflaume-hell); border: 1px solid var(--linie) }
.pe-chat-anfrage p { margin: 0 0 8px } .pe-chat-anfrage .pe-anfrage-knoepfe { margin-top: 4px }
.pe-zu-chats { text-decoration: none; font-weight: 700; color: var(--nebel); font-size: .85rem; white-space: nowrap }

/* Seitenleiste von /entdecken in der Erlebnis-App: der Posteingang ersetzt die alten Listen */
.seitenleiste .pe-filter { padding-top: 0 }
.seitenleiste .pe-bild { flex-basis: 46px; width: 46px; height: 46px }
@media (max-width: 760px) { .pe-link { padding: 9px 4px } }
.mit-posteingang .pe-alt { display: none !important }
.ew-chat-name { background: none; border: 0; padding: 0; font: inherit; font-weight: 800; color: inherit; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px }
.chat-kopf .pe-chat-herkunft { display: block; max-width: min(46vw, 360px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
@media (max-width: 760px) { .ew-kopf .ew-kopf-chats { display: none } }   /* am Handy steht «Chats» in der Leiste unten */
/* 14.10. Nachrichtenanfrage (wie WhatsApp «nicht in deinen Kontakten») */
.pe-na-unter { color: var(--nebel, #888); font-weight: 400 }
.pe-na-still { margin: 4px 0 0 }
.pe-na .pe-anfrage-knoepfe { flex-wrap: wrap }