/* This conversation has a 540 × 310 base canvas. The story illustration
   scales it as one unit, so the content stays editable and in proportion. */
.story-card .context-preview {
  --context-bubble-inset: inset 0 0 0 .5px rgba(21, 17, 13, .08);
  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);
}
.context-question {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  margin-bottom: 14px;
}
.context-label,
.context-user-label {
  color: var(--ink);
  font-size: 14.5px;
  line-height: 18px;
}
.context-user-label { margin-right: 14px; }
.context-user-bubble {
  padding: 8px 14px 6px;
  border-radius: 999px;
  background: #fdc200;
  box-shadow: var(--context-bubble-inset);
  font-size: 16.5px;
  line-height: 24px;
  white-space: nowrap;
}
.context-label { margin-left: 53.75px; }
.context-message {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  margin-top: 4px;
}
.context-avatar {
  position: relative;
  flex: none;
  width: 35px;
  height: 35px;
  border-radius: 28.83%;
  --app-icon-size: 35px;
  --app-icon-scale: 1;
}
.context-avatar img {
  width: 100%;
  height: 100%;
}
.context-bubble {
  line-height: 23.5px;
  flex: none;
  width: 329px;
  padding: 8px 14.75px;
  border-radius: 19.65px;
  background: rgba(240, 240, 237, .74);
  box-shadow: var(--context-bubble-inset);
  white-space: nowrap;
}
.context-permission,
.context-shared {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--ink);
  font-size: 16px;
  line-height: 22px;
  white-space: nowrap;
}
.context-permission { margin-top: 14px; }
.context-app {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  font-weight: 500;
}
.context-app img { width: 18px; height: 14.344px; }
.context-shared { gap: 8px; margin-top: 6px; }
.context-shared strong { color: var(--ink); font-weight: 500; }

/* The handoff uses the first conversation's exact surface and message tokens. */
.story-card .context-team-preview { height: auto; }
.context-team-preview .context-label.is-second { margin-top: 14px; }
.context-team-preview .context-bubble { width: fit-content; }
.context-person { overflow: hidden; box-shadow: var(--preview-shadow); }
.context-person img { border-radius: inherit; object-fit: cover; }

/* Keep the opening caption together, including on a narrow phone. */
.context-title-line { white-space: nowrap; }

/* One entrance. Whole message blocks appear without changing their layout. */
.context-preview { --context-play-state: paused; }
.context-preview.is-context-playing { --context-play-state: running; }
.context-preview[data-context-motion="ready"] {
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, calc(-50% + 16px)) scale(1.035);
}
.context-preview[data-context-motion="ready"] :is(.context-question, .context-label, .context-message, .context-permission, .context-shared) {
  opacity: 0;
  visibility: hidden;
}
.context-preview[data-context-motion="revealing"] {
  animation: contextPreviewArrival .72s cubic-bezier(.22, 1, .36, 1) both;
  animation-play-state: var(--context-play-state);
}
.context-preview[data-context-motion="revealing"] :is(.context-question, .context-label, .context-message, .context-permission, .context-shared) {
  animation: contextBlockReveal .3s ease-out .16s both;
  animation-play-state: var(--context-play-state);
}
.context-preview[data-context-motion="revealing"] :is(.context-label, .context-message) {
  animation-delay: .54s;
}
.context-team-preview[data-context-motion="revealing"] :is(.context-label, .context-message):not(.is-second) {
  animation-delay: .16s;
}
.context-preview[data-context-motion="revealing"] .context-permission {
  animation-duration: .25s;
  animation-delay: 1.02s;
}
.context-preview[data-context-motion="revealing"] .context-shared {
  animation-duration: .25s;
  animation-delay: 1.31s;
}
@keyframes contextPreviewArrival {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 16px)) scale(1.035); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes contextBlockReveal {
  from { opacity: 0; visibility: hidden; }
  to { opacity: 1; visibility: visible; }
}
@media (prefers-reduced-motion: reduce) {
  .context-preview[data-context-motion] {
    animation: none;
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%);
  }
  .context-preview[data-context-motion] :is(.context-question, .context-label, .context-message, .context-permission, .context-shared) {
    animation: none;
    opacity: 1;
    visibility: visible;
  }
}