/* ════════════════════════════════════════════════════════════════════
   STYLE TAGS  — <text> <email> <post> <letter> (style_tags.js) and
   <choice> (branching.js). Diegetic "screens" rendered inside a bubble.
════════════════════════════════════════════════════════════════════ */
.st-text, .st-email, .st-post, .st-letter, .st-choice { margin:.5rem 0; max-width:440px; }
.msg.user .st-text, .msg.user .st-email, .msg.user .st-post,
.msg.user .st-letter, .msg.user .st-choice { margin-left:auto; }

/* ── <text> : phone texting thread ──────────────────────────────────── */
.st-text { border:1px solid var(--border); border-radius:14px; overflow:hidden;
  background:var(--bg3); box-shadow:0 1px 3px rgba(0,0,0,.12); }
.st-text-head { display:flex; align-items:center; gap:.5rem; padding:.5rem .8rem;
  background:var(--bg2); border-bottom:1px solid var(--border);
  font-size:13px; font-weight:600; color:var(--text); }
.st-text-dot { width:26px; height:26px; border-radius:50%;
  background:linear-gradient(135deg,#9ca3af,#6b7280); flex-shrink:0; }
.st-text-body { padding:.6rem .7rem; display:flex; flex-direction:column; gap:.18rem; }
.st-text-row { display:flex; }
.st-text-row.in { justify-content:flex-start; }
.st-text-row.out { justify-content:flex-end; }
.st-text-bubble { max-width:78%; padding:.4rem .7rem; border-radius:16px; font-size:14px; line-height:1.4; }
.st-text-row.in  .st-text-bubble { background:#e5e5ea; color:#000; border-bottom-left-radius:5px; }
.st-text-row.out .st-text-bubble { background:#2563eb; color:#fff; border-bottom-right-radius:5px; }
.st-text-row.in + .st-text-row.in .st-text-bubble,
.st-text-row.out + .st-text-row.out .st-text-bubble { margin-top:-.05rem; }
.st-text-sender { font-size:10.5px; font-weight:700; opacity:.6; margin-bottom:.1rem; }
.st-text-msg p { margin:0; }
.st-text-msg a { color:inherit; text-decoration:underline; }

/* Cross-message grouping (decorateTextGroup in style_tags.js): each card
   keeps its own background/border-left/border-right, but only the first
   card in a run keeps a top edge and only the last keeps a bottom edge —
   adjacent cards then share a seamless side wall instead of stacking as
   separate boxes. */
.st-text-grouped { box-shadow:none; min-width: 80%; }
.st-text-grouped:not(.is-user) { margin-left: 20%; }
.st-text-grouped:not(.is-group-first) { border-top:none; border-top-left-radius:0; border-top-right-radius:0; }
.st-text-grouped:not(.is-group-last) { border-bottom:none; border-bottom-left-radius:0; border-bottom-right-radius:0; }

/* ── <email> : mail-client message ──────────────────────────────────── */
.st-email { border:1px solid var(--border); border-radius:var(--r);
  background:var(--bg3); overflow:hidden; }
.st-email-subject { font-size:16px; font-weight:600; color:var(--text);
  padding:.7rem .9rem .4rem; }
.st-email-meta { display:flex; align-items:center; gap:.6rem;
  padding:0 .9rem .6rem; border-bottom:1px solid var(--border); }
.st-email-av { width:34px; height:34px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,#7c8089,#52555c); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:600; font-size:15px; }
.st-email-from { font-size:13.5px; font-weight:600; color:var(--text); }
.st-email-to { font-size:12px; color:var(--text3); }
.st-email-body { padding:.8rem .9rem; font-size:14px; line-height:1.6; color:var(--text); }
.st-email-body p:first-child { margin-top:0; }
.st-email-body p:last-child { margin-bottom:0; }

/* ── <post> : social-media post ─────────────────────────────────────── */
.st-post { border:1px solid var(--border); border-radius:var(--r);
  background:var(--bg3); padding:.8rem .9rem; }
.st-post-head { display:flex; align-items:center; gap:.55rem; margin-bottom:.5rem; }
.st-post-av { width:40px; height:40px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,#8b5cf6,#6366f1); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px; }
.st-post-id { display:flex; flex-direction:column; line-height:1.3; }
.st-post-name { font-size:14px; font-weight:700; color:var(--text); }
.st-post-handle { font-size:12.5px; color:var(--text3); }
.st-post-body { font-size:14.5px; line-height:1.5; color:var(--text); }
.st-post-body p:first-child { margin-top:0; }
.st-post-body p:last-child { margin-bottom:0; }
.st-post-foot { display:flex; gap:1.4rem; margin-top:.6rem; padding-top:.5rem;
  border-top:1px solid var(--border); }
.st-post-stat { font-size:12.5px; color:var(--text3); }

/* ── <letter> : handwritten note / parchment ────────────────────────── */
.st-letter { border:1px solid #d8c8a8; border-radius:var(--r);
  background:linear-gradient(#fbf6e9,#f4ecd6); color:#3a2f1d;
  padding:1.1rem 1.3rem; font-family:'Georgia','Times New Roman',serif;
  box-shadow:0 1px 4px rgba(0,0,0,.15); line-height:1.7; }
.st-letter-date { text-align:right; font-size:12.5px; font-style:italic; opacity:.7; margin-bottom:.6rem; }
.st-letter-greet { font-size:15px; margin-bottom:.5rem; }
.st-letter-body { font-size:15px; }
.st-letter-body p:first-child { margin-top:0; }
.st-letter-body p:last-child { margin-bottom:0; }
.st-letter-body a { color:#5a4a2a; }
.st-letter-sign { text-align:right; font-style:italic; margin-top:.8rem; }

/* ── <choice> : interactive branch buttons ──────────────────────────── */
.st-choice { display:flex; flex-direction:column; gap:.4rem; }
.st-choice-btn { text-align:left; padding:.55rem .85rem; border-radius:var(--r);
  border:1px solid var(--border); background:var(--bg3); color:var(--text);
  font-family:inherit; font-size:13.5px; line-height:1.4; cursor:pointer;
  transition:background .12s, border-color .12s, transform .05s; }
.st-choice-btn::before { content:'▸ '; color:var(--accent); }
.st-choice-btn:hover { background:var(--border); border-color:var(--accent); }
.st-choice-btn:active { transform:translateY(1px); }
.st-choice-picked { opacity:.55; pointer-events:none; }

/* ── help modal: "Available tags" sub-fieldset (reuses .settings-sub) ── */
.help-tag-row { padding:.4rem 0; border-bottom:1px solid var(--border); }
.help-tag-row:last-child { border-bottom:none; }
.help-tag-name code { font-family:var(--mono); font-size:12px; color:var(--accent); }
.help-tag-desc { font-size:12.5px; color:var(--text3); margin-top:.15rem; }