/* Texting library: chat bubbles, readings and reply lists. Builds on article.css tokens; no fonts, images or scripts. */
:root { --bubble-them: #E9E7F3; --bubble-them-text: #14122B; --bubble-you: #5148D6; --bubble-you-text: #FFFFFF; --stamp: #6B6687; }
@media (prefers-color-scheme: dark) { :root { --bubble-them: #2A2839; --bubble-them-text: #F5F4FF; --bubble-you: #5148D6; --bubble-you-text: #FFFFFF; --stamp: #ACA6C8; } }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.thread { margin: 0 0 36px; padding: 22px 18px 18px; background: var(--surface); border: 1px solid var(--card-edge); border-radius: 24px; display: flex; flex-direction: column; gap: 6px; }
.article-body .thread p { margin: 0; }
.bubble { display: block; width: fit-content; max-width: 82%; padding: 8px 14px; border-radius: 20px; font-size: 17px; line-height: 1.4; overflow-wrap: anywhere; }
.article-body .bubble.them { background: var(--bubble-them); color: var(--bubble-them-text); }
.article-body .bubble.you { background: var(--bubble-you); color: var(--bubble-you-text); }
.thread .them { align-self: flex-start; border-bottom-left-radius: 6px; }
.thread .you { align-self: flex-end; border-bottom-right-radius: 6px; }
.article-body .thread .stamp { align-self: center; margin: 0 0 4px; font-size: 12px; line-height: 18px; color: var(--stamp); }
.article-body .thread .receipt { align-self: flex-end; margin-top: -2px; font-size: 12px; line-height: 18px; color: var(--stamp); }
.thread figcaption { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--secondary); }
.readings { margin: 0 0 22px; }
.readings dt { margin: 16px 0 0; color: var(--label); font-weight: 650; }
.readings dd { margin: 4px 0 0; color: var(--secondary); }
.article-body .replies { list-style: none; padding: 0; margin: 0 0 10px; }
.article-body .replies li { padding: 0; margin: 0 0 20px; }
.article-body .replies .bubble { margin: 0 0 6px; border-bottom-left-radius: 6px; }
.article-body .replies .reply-plain { margin: 0 0 6px; color: var(--label); font-weight: 650; }
.article-body .replies .reply-note { margin: 0; font-size: 15px; line-height: 1.55; }
.article-body .avoid li strong { white-space: normal; }
.article-body .rule { padding: 16px 18px; border-radius: 16px; background: var(--accent-soft); color: var(--label); }
@media (max-width: 540px) { .thread { padding: 18px 14px 14px; border-radius: 20px; } .bubble { max-width: 88%; } .article-body .comparison th, .article-body .comparison td { padding: 12px; } .article-body .facts-table th:first-child { width: 44%; } }