/* ============================================================
   Group chats tile: ten Memoji on two orbits around a group hub.
   The outer five turn counter-clockwise, the inner five clockwise;
   each face counter-rotates so it stays upright. Pure CSS.
   Chat backgrounds tile: an iOS thread over the four presets
   (aurora, sorbet, lagoon, bloom), cross-fading on a loop. Pure CSS.
   iOS light appearance on white, like the neighbouring tiles.
   Reduced motion: a still frame.
   ============================================================ */
.imsg .feature-media.is-group { background: #fff; }

.group-demo {
  position: relative; height: 88%; aspect-ratio: 1; max-width: 88%;
  container-type: size;
}
.grp-orbit {
  position: absolute; left: 50%; top: 50%; border-radius: 50%;
  border: 1px solid #ECECF0; transform: translate(-50%, -50%);
}
.grp-orbit.is-outer { width: 77cqw; height: 77cqw; }
.grp-orbit.is-inner { width: 38cqw; height: 38cqw; }

@keyframes grp-spin { to { transform: rotate(360deg); } }
.grp-ring {
  position: absolute; inset: 0;
  animation: grp-spin var(--dur) linear infinite; animation-direction: var(--dir);
}
/* outer: counter-clockwise (reverse); inner: clockwise */
.grp-ring.is-outer { --dur: 56s; --dir: reverse; --cdir: normal; --r: 38.5cqw; --s: 20cqw; }
.grp-ring.is-inner { --dur: 40s; --dir: normal; --cdir: reverse; --r: 19cqw; --s: 14cqw; }
.grp-slot {
  position: absolute; left: 50%; top: 50%;
  width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  transform: rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a)));
}
.grp-slot img {
  display: block; width: 100%; height: 100%; box-sizing: border-box; border-radius: 50%;
  object-fit: cover; padding: 6%;
  background: linear-gradient(180deg, #EEEEF2 0%, #DCDCE2 100%);
  box-shadow: 0 0 0 2px #fff, 0 2px 8px rgba(30, 34, 48, .10);
  animation: grp-spin var(--dur) linear infinite; animation-direction: var(--cdir);
}
.grp-hub {
  position: absolute; left: 50%; top: 50%; width: 15cqw; height: 15cqw;
  transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(180deg, #3D9BFF 0%, #0A7CFF 100%);
  box-shadow: 0 0 0 2px #fff, 0 3px 10px rgba(10, 124, 255, .28);
}
.grp-hub svg { width: 56%; height: 56%; }

/* ---------------- Chat backgrounds ---------------- */
/* An iOS 26 Messages card drawn like the hero's (css/hero-sim.css): a 320 pt transcript, every size
   calc(N * var(--u)) with --u = 1 pt, the same 17 pt bubbles and hook tails, on the hero's wash.
   Inside the card the four presets cross-fade; received bubbles take the frosted material iOS
   draws over a chat background. The preset's name sits under the card. */
.imsg .feature-media.is-chatbg {
  container-type: size;
  background: linear-gradient(160deg, #E8F0FB 0%, #F3F1F6 55%, #F7F2EA 100%);
}
.chatbg-demo {
  --u: calc(min(330px, 80cqw, 132cqh) / 320);    /* the transcript is ~194 pt tall: it fits the card */
  position: absolute; inset: 0; overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Helvetica Neue", Arial, sans-serif;
  font-synthesis: none; text-align: left; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  -webkit-user-select: none; user-select: none;
}
.cbg-card { position: absolute; inset: 0; overflow: hidden; isolation: isolate; background: #fff; }   /* the background fills the tile */
.cbg-layer {
  position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center 40%;
  opacity: 0; animation: cbg-fade 20s linear infinite both;
  animation-delay: calc(var(--i) * 5s - 2s);
}
/* 5 s per preset: fade in over 1 s on top of the last one, hold, then drop out once covered */
@keyframes cbg-fade {
  0% { opacity: 0; }
  5% { opacity: 1; }
  30% { opacity: 1; }
  35% { opacity: 0; }
  100% { opacity: 0; }
}
/* the conversation's header: the contact in a glass pill, as iOS 26 floats it over the background */
.cbg-head {
  position: absolute; z-index: 2; left: 50%; top: calc(12 * var(--u)); transform: translateX(-50%);
  display: flex; align-items: center; gap: calc(6 * var(--u));
  padding: calc(4 * var(--u)) calc(12 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u)); border-radius: 999px;
  background: rgba(255, 255, 255, .6); -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6);
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .7), 0 1px 3px rgba(0, 0, 0, .06);
  font-size: calc(13 * var(--u)); line-height: calc(16 * var(--u)); font-weight: 600; color: #000;
}
.cbg-avatar {
  display: grid; place-items: center; width: calc(24 * var(--u)); height: calc(24 * var(--u)); border-radius: 50%;
  background: linear-gradient(#A5ABB8, #858994); color: #fff; font-size: calc(12 * var(--u)); font-weight: 600;
}
.cbg-thread {
  position: absolute; z-index: 1; left: 50%; top: 50%; width: calc(320 * var(--u)); box-sizing: border-box;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column;
  padding: 0 calc(16 * var(--u)) 0 calc(15.83 * var(--u));
  font-size: calc(17 * var(--u)); line-height: calc(20 * var(--u)); font-weight: 400; letter-spacing: -.01em;
  font-variation-settings: "opsz" 17;
}
.cbg-thread > * { flex: none; margin: 0; }
.cbg-thread > * + * { margin-top: calc(10 * var(--u)); }
.cbg-stamp, .cbg-receipt {
  font-size: max(9.5px, calc(11 * var(--u))); line-height: max(11.2px, calc(13 * var(--u)));
  color: rgba(0, 0, 0, .55); font-variation-settings: "opsz" 11;
}
.cbg-stamp { align-self: center; margin-bottom: calc(7.5 * var(--u)); }
.cbg-thread .cbg-stamp + * { margin-top: 0; }
.cbg-stamp b, .cbg-receipt b { font-weight: 600; }
.cbg-thread .cbg-receipt { align-self: flex-end; margin-top: calc(6.1 * var(--u)); margin-right: calc(4 * var(--u)); }
.cbg-bubble {
  position: relative; box-sizing: border-box; max-width: calc(223.4 * var(--u));
  padding: calc(10.15 * var(--u)) calc(13.5 * var(--u)); border-radius: calc(20.5 * var(--u));
  overflow-wrap: break-word; text-wrap: pretty;
}
.cbg-bubble.is-in {
  align-self: flex-start; color: #000; --bub: rgba(255, 255, 255, .72);
  background: var(--bub); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
}
.cbg-bubble.is-out { align-self: flex-end; color: #fff; --bub: #0A8CFE; background: var(--bub); }
/* iOS 26 hook tail (the hero's path), on the last bubble of a run */
.cbg-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;
}
.cbg-bubble.has-tail > .cbg-tail { display: block; }
.cbg-bubble.is-out .cbg-tail { right: 0; }
.cbg-bubble.is-in .cbg-tail { left: 0; transform: scaleX(-1); }
/* the preset's name, under the card, in step with its background */
.cbg-caption {
  position: absolute; left: 0; right: 0; bottom: 3.5%; margin: 0; height: 18px; text-align: center;
  font: 600 12px/18px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .01em; color: rgba(0, 0, 0, .5);
}
.cbg-caption span { position: absolute; left: 0; right: 0; opacity: 0; animation: cbg-fade 20s linear infinite both; animation-delay: calc(var(--i) * 5s - 2s); }
[data-theme="dark"] .imsg .feature-media.is-chatbg { background: linear-gradient(160deg, #1d2433 0%, #1e1d22 55%, #24211c 100%); }
[data-theme="dark"] .cbg-caption { color: rgba(255, 255, 255, .55); }
@media (prefers-reduced-motion: reduce) {
  .grp-ring, .grp-slot img { animation: none; }
  .cbg-layer, .cbg-caption span { animation: none; }
  .cbg-layer:first-child, .cbg-caption span:first-child { opacity: 1; }
}

/* Nine tiles: on the two-column layout the last one (Threads) spans the row instead of sitting alone. */
@media (min-width: 561px) and (max-width: 900px) {
  .arc-concept .imsg .feature:last-child { grid-column: 1 / -1; }
  .arc-concept .imsg .feature:last-child .feature-media { aspect-ratio: 16 / 7; }
}