/* Cards 2-4 use card 1's conversation canvas (540 x 310) and its reveal. */
.story-card .story-preview {
  width: 540px;
  height: 310px;
  padding: 24px;
  border-radius: 22px;
  color: #15110d;
  text-align: left;
  font-size: 17.2px;
  font-weight: 400;
  line-height: 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .74));
  backdrop-filter: blur(18px) saturate(1.04);
  -webkit-backdrop-filter: blur(18px) saturate(1.04);
  box-shadow: var(--preview-shadow);
}
.story-preview .context-bubble.is-fit { width: auto; }
.story-preview .context-label.is-second { margin-top: 12px; }
.story-preview .context-shared.is-gap { margin-top: 14px; }
.context-person { overflow: hidden; }
.context-person img { object-fit: cover; }
.context-date {
  align-self: center;
  margin-bottom: 4px;
  color: rgba(21, 17, 13, .5);
  font-size: 14.5px;
  line-height: 18px;
}
.context-app img.brand { width: 16px; height: 16px; }

/* The second exchange follows the first; the event rows close the scene. */
.story-preview[data-context-motion="revealing"] :is(.context-label, .context-message).is-second {
  animation-delay: .92s;
}
.story-preview[data-context-motion="revealing"] .context-permission { animation-delay: 1.3s; }
.story-preview[data-context-motion="revealing"] .context-shared { animation-delay: 1.59s; }

/* All four cards speak the app's feed language: my bubble in the accent, Till's grey with a hairline, Till's face on graphite. */
.context-user-bubble {
  background: oklch(.565 .21 262.8);
  color: #fff;
  box-shadow: none;
}
.context-bubble {
  background: color-mix(in oklch, oklch(95.83% .005 88) 55%, oklch(96.8% .003 88));
  box-shadow: 0 0 0 .5px rgba(21, 17, 13, .08);
}
.context-avatar.till-app-icon {
  background: linear-gradient(180deg, oklch(.42 0 0), oklch(.25 0 0));
  box-shadow: none;
  border-radius: 34%;
}
.context-avatar.till-app-icon > img { filter: invert(1) brightness(.96); }