/* Mobile Leseansicht, vollständig innerhalb des Chats. */
.readerOverlay {
    position: fixed; inset: 0; z-index: 1500; background: var(--bg);
    display: flex; justify-content: center; overscroll-behavior: contain;
}
.readerDialog {
    width: 100%; max-width: 850px; height: 100%; min-height: 0;
    display: flex; flex-direction: column; color: var(--text); background: var(--surface);
    padding: var(--safe-top) 0 var(--safe-bottom);
    box-sizing: border-box;
}
.readerHeader, .readerFooter {
    display: flex; gap: 8px; align-items: center; justify-content: space-between;
    padding: 10px 12px; flex-shrink: 0;
}
.readerHeader { border-bottom: 1px solid var(--border); }
.readerHeader strong { margin-right: auto; }
.readerDialog button { min-height: var(--tap); min-width: var(--tap); }
.readerContent {
    flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain;
    padding: 18px clamp(16px, 5vw, 56px); line-height: 1.8;
    font-family: Georgia, "Times New Roman", serif; overflow-wrap: anywhere;
}
.readerContent p { line-height: inherit; }
.readerContent pre { max-width: 100%; overflow: auto; }
.readerFooter label { white-space: nowrap; }
.readerFooter input { width: 65px; min-height: var(--tap); text-align: center; }
.readerDialog progress { width: 100%; height: 5px; accent-color: var(--accent); flex-shrink: 0; }
.readerNote { text-align: center; color: var(--muted); padding: 0 12px 10px; flex-shrink: 0; }
.messageReaderAction { color: var(--accent-ink); }
@media (max-width: 420px) {
    .readerHeader, .readerFooter { gap: 4px; padding: 8px; }
    .readerFooter input { width: 50px; }
    .readerHeader strong { font-size: 14px; }
}