/* ============================================================
   Threads, reactions (and the combined) tiles: an iOS thread drawn in HTML/CSS/JS
   (js/thread-demo.js builds it): a tapback pops onto our message,
   then the customer replies inline to their first question.
   iOS light appearance on white, like the neighbouring tiles.
   ============================================================ */
.imsg .feature-media.is-thread { background: #fff; container-type: inline-size; }

.thread-demo {
  --thr-blue: #0A84FF;
  --thr-gray: #E9E9EB;
  --thr-line: #C7C7CC;
  position: relative; box-sizing: border-box; width: min(320px, 86%);
  display: flex; flex-direction: column; gap: 6px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px; line-height: 18px; letter-spacing: -.01em; text-align: left;
  -webkit-font-smoothing: antialiased;
}
.thr-row { display: flex; position: relative; }
.thr-row.is-out { justify-content: flex-end; }
.thr-row.is-tapped { margin-top: 10px; }
.thr-row.is-reply { padding-left: 16px; }
.thr-bubble {
  position: relative; max-width: 78%; padding: 7px 12px; border-radius: 18px;
  background: var(--thr-gray); color: #000;
}
.thr-row.is-out .thr-bubble { background: var(--thr-blue); color: #fff; }

/* Rows enter one at a time */
.thr-row.is-hidden { opacity: 0; transform: translateY(6px) scale(.98); }
.thr-row { transition: opacity .35s ease, transform .45s cubic-bezier(.2, .9, .3, 1.2); }

/* The thread line: from under the original's left edge, curving into the reply */
.thr-curve {
  position: absolute; left: 6px; width: 10px; pointer-events: none;
  border-left: 1.5px solid var(--thr-line); border-bottom: 1.5px solid var(--thr-line);
  border-bottom-left-radius: 10px; transition: opacity .3s ease;
}
.thr-curve.is-hidden { opacity: 0; }

/* Tapback badge on our bubble's top-left corner */
.thr-tapback {
  position: absolute; top: -17px; left: -20px; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%; background: var(--thr-gray);
  box-shadow: 0 0 0 2px #fff; font-size: 13px; line-height: 1;
  transition: transform .4s cubic-bezier(.3, 1.6, .5, 1), opacity .2s ease;
}
.thr-tapback.is-hidden { opacity: 0; transform: scale(.2); }
/* Our own tapback on the customer's bubble: top-right corner, iMessage blue */
.thr-tapback.is-mine { left: auto; right: -20px; background: var(--thr-blue); }
/* ...and room above it so the badge clears the bubble before */
.thr-row.is-tapped:not(.is-out) { margin-top: 16px; }

@container (max-width: 300px) {
  .thread-demo { width: 90%; font-size: 13px; line-height: 17px; gap: 5px; }
  .thr-bubble { padding: 6px 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .thr-row, .thr-curve, .thr-tapback { transition: none; }
}

/* ---- Threads tile, iOS card (data-thread-demo="threads"; js/thread-demo.js adds .is-ios): drawn like
   the hero's card (css/hero-sim.css), a 320 pt transcript with every size calc(N * var(--u)), 1 pt =
   --u: 17 pt bubbles, hook tails on the last bubble of a run, the timestamp and a receipt, on the
   hero's wash. The thread line runs from the question into the inline reply. */
.imsg .feature-media.is-thread.is-ios-card {
  container-type: size;
  background: linear-gradient(160deg, #E8F0FB 0%, #F3F1F6 55%, #F7F2EA 100%);
}
[data-theme="dark"] .imsg .feature-media.is-thread.is-ios-card { background: linear-gradient(160deg, #1d2433 0%, #1e1d22 55%, #24211c 100%); }
.thread-demo.is-ios {
  --u: calc(min(330px, 80cqw, 118cqh) / 320);      /* the transcript is ~245 pt tall: 90 % of the tile at most */
  --thr-blue: #0A8CFE; --thr-line: #D1D1D6;
  width: calc(320 * var(--u)); gap: 0;
  padding: calc(14 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u)) calc(15.83 * var(--u));
  border-radius: calc(32 * var(--u)); background: #fff;
  box-shadow: 0 0 0 1px rgba(16, 20, 32, .08), 0 2px 6px rgba(16, 20, 32, .06), 0 30px 70px -20px rgba(16, 20, 32, .28);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Helvetica Neue", Arial, sans-serif;
  font-size: calc(17 * var(--u)); line-height: calc(20 * var(--u)); letter-spacing: -.01em;
  font-synthesis: none; font-variation-settings: "opsz" 17; -moz-osx-font-smoothing: grayscale;
  -webkit-user-select: none; user-select: none;
}
.thread-demo.is-ios > * + * { margin-top: calc(10 * var(--u)); }
.thread-demo.is-ios .thr-stamp {
  align-self: center; margin: 0 0 calc(7.5 * var(--u));
  font-size: max(9.5px, calc(11 * var(--u))); line-height: max(11.2px, calc(13 * var(--u)));
  color: rgba(60, 60, 67, .6); font-variation-settings: "opsz" 11;
}
.thread-demo.is-ios .thr-stamp b { font-weight: 600; }
.thread-demo.is-ios .thr-stamp + * { margin-top: 0; }
.thread-demo.is-ios .thr-row.is-reply { padding-left: calc(18 * var(--u)); }
.thread-demo.is-ios .thr-bubble {
  max-width: calc(223.4 * var(--u)); box-sizing: border-box;
  padding: calc(10.15 * var(--u)) calc(13.5 * var(--u)); border-radius: calc(20.5 * var(--u));
  --bub: var(--thr-gray); overflow-wrap: break-word;
}
.thread-demo.is-ios .thr-row.is-out .thr-bubble { --bub: var(--thr-blue); }
.thread-demo.is-ios .thr-tail {
  position: absolute; bottom: calc(-7.1 * var(--u)); width: calc(21.5 * var(--u)); height: calc(11.6 * var(--u));
  fill: var(--bub); overflow: visible; display: none;
}
.thread-demo.is-ios .thr-bubble.has-tail > .thr-tail { display: block; }
.thread-demo.is-ios .thr-row.is-out .thr-tail { right: 0; }
.thread-demo.is-ios .thr-row:not(.is-out) .thr-tail { left: 0; transform: scaleX(-1); }
.thread-demo.is-ios .thr-curve {
  left: calc(8 * var(--u)); width: calc(10 * var(--u));
  border-left-width: calc(1.6 * var(--u)); border-bottom-width: calc(1.6 * var(--u));
  border-bottom-left-radius: calc(12 * var(--u));
}