/* Erweiterung 3 (Agent B): gegliederter Posteingang, Nachrichten, Kontaktanfragen.
 * Farben nur aus den Variablen von app.css (dokumentierte Kontrastpaare >= 4.5:1). Touchflächen >= 44 px (--tap).
 */

/* ---------- Reiter des Posteingangs */
.msg-tabs ul { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; border-bottom: 1px solid var(--c-border); }
.msg-tab { display: inline-flex; align-items: center; gap: .4rem; min-height: var(--tap); padding: .5rem .9rem; border-radius: var(--radius) var(--radius) 0 0;
  color: var(--c-primary); text-decoration: none; font-weight: 600; border: 1px solid transparent; border-bottom: 0; }
.msg-tab:hover { background: var(--c-info-bg); }
.msg-tab.is-current, .msg-tab[aria-current="page"] { background: var(--c-surface); color: var(--c-text); border-color: var(--c-border); margin-bottom: -1px; }
.msg-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem; padding: 0 .4rem; border-radius: 999px;
  background: var(--c-primary); color: var(--c-on-primary); font-size: .85rem; font-weight: 700; }

/* ---------- Aktionskarten im Dokumentbereich */
.msg-action-cards { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem; }
.msg-action-card { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; width: 100%; min-height: calc(var(--tap) + 1.5rem); padding: .75rem 1rem;
  border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); color: var(--c-text); font: inherit; text-align: left; cursor: pointer; }
.msg-action-card:hover { border-color: var(--c-primary); background: var(--c-info-bg); }
.msg-action-card[aria-expanded="true"] { border-color: var(--c-primary); box-shadow: inset 0 0 0 1px var(--c-primary); }
.msg-action-card strong { color: var(--c-primary); font-size: 1.05rem; }
.msg-action-card span { color: var(--c-muted); font-size: .92rem; }

/* ---------- Details (Erklärtexte) */
.msg-details { margin: .5rem 0 1rem; }
.msg-details > summary { min-height: var(--tap); display: flex; align-items: center; cursor: pointer; color: var(--c-primary); font-weight: 600; }
.msg-details-body { background: var(--c-subtle); border-radius: var(--radius); padding: .5rem 1rem; }
.msg-details-body li { margin: .25rem 0; }

/* ---------- Gesprächsliste und Verlauf */
.msg-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 900px) {
  .msg-layout { grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); align-items: start; }
}
@media (max-width: 899px) {
  .msg-layout.has-thread .msg-list { display: none; }       /* Smartphone: Verlauf als eigene Ansicht mit Zurück */
  .msg-layout:not(.has-thread) .msg-thread-col { display: none; }
}
@media (min-width: 900px) { .msg-back { display: none; } }

.msg-convs { list-style: none; margin: 0; padding: 0; }
.msg-conv + .msg-conv { border-top: 1px solid var(--c-subtle); }
.msg-conv-link { display: flex; align-items: center; gap: .6rem; min-height: calc(var(--tap) + .5rem); padding: .5rem .25rem; color: var(--c-text); text-decoration: none; border-radius: var(--radius); }
.msg-conv-link:hover { background: var(--c-subtle); }
.msg-conv.is-current .msg-conv-link { background: var(--c-info-bg); }
.msg-conv-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.msg-conv-title { font-weight: 600; overflow-wrap: anywhere; }
.msg-conv.has-unread .msg-conv-title { font-weight: 800; }
.msg-conv-kind, .msg-conv-time { color: var(--c-muted); font-size: .85rem; }
.msg-conv-preview { color: var(--c-muted); font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-conv-side { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; }
.msg-new > summary { min-height: var(--tap); display: flex; align-items: center; cursor: pointer; color: var(--c-primary); font-weight: 600; }

.msg-thread { display: flex; flex-direction: column; gap: .5rem; }
.msg-thread-head { display: flex; flex-direction: column; gap: .5rem; }
.msg-thread-title { display: flex; align-items: center; gap: .75rem; }
.msg-thread-title h2 { margin: 0; }
.msg-history { list-style: none; margin: 0; padding: .25rem; max-height: 60vh; overflow-y: auto; display: flex; flex-direction: column; gap: .5rem; }
.msg-history:focus-visible { outline: 3px solid var(--c-focus); }
.msg { display: flex; gap: .5rem; align-items: flex-start; max-width: 100%; }
.msg.mine { flex-direction: row-reverse; }
.msg-bubble { background: var(--c-subtle); border-radius: var(--radius); padding: .5rem .75rem; max-width: min(36rem, 85%); min-width: 0; }
.msg.mine .msg-bubble { background: var(--c-info-bg); }
.msg-meta { margin: 0; color: var(--c-muted); font-size: .85rem; }
.msg-sender { font-weight: 700; color: var(--c-text); }
.msg-body { margin: .25rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-deleted { font-style: italic; color: var(--c-muted); }
.msg-foot { margin: .25rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .85rem; }
.msg-status { font-weight: 700; }
.msg-status-sending { color: var(--c-muted); }
.msg-status-sent { color: var(--c-text); }
.msg-status-read { color: var(--c-ok); }
.msg-status-unknown { color: var(--c-warn); background: var(--c-warn-bg); padding: 0 .35rem; border-radius: 4px; }
.msg-status-failed { color: var(--c-danger); background: var(--c-danger-bg); padding: 0 .35rem; border-radius: 4px; }
.msg-empty { padding: 1rem 0; }
.msg-older { display: flex; justify-content: center; }

.msg-composer { display: flex; flex-direction: column; gap: .35rem; border-top: 1px solid var(--c-border); padding-top: .75rem; background: var(--c-surface); }
.msg-composer textarea { width: 100%; min-height: calc(var(--tap) * 1.5); font: inherit; padding: .5rem; border: 1px solid var(--c-border); border-radius: var(--radius); box-sizing: border-box; }
.msg-composer .actions { justify-content: flex-end; }
@media (max-width: 899px) {
  /* Eingabe unten, oberhalb der mobilen Navigation */
  .msg-composer-slot { position: sticky; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + .25rem); z-index: 5; background: var(--c-surface); }
  .msg-history { max-height: none; }
  .msg-bubble { max-width: 85%; }
}

/* ---------- Kontaktanfragen und Personen */
.msg-reqs, .msg-people, .msg-guardians { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.msg-people-item { padding: .5rem 0; border-bottom: 1px solid var(--c-subtle); display: flex; flex-direction: column; gap: .35rem; }
.msg-person { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.msg-person-family { font-size: .9rem; }
.msg-req .actions, .msg-people-item .actions { margin-top: .25rem; }
.msg-guard-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem; }
.msg-guard-form .field { margin: 0; }
.msg-guard-form select, .msg-new-direct select { min-height: var(--tap); }