/* Ressurreição: chapter 2. Layout from story.css, phone from phone.css. */

/* room for the service bar and the annotation above the phone, and the demo note below */
[data-scene="ressurreicao"] .phone-fit { padding: 52px 0 24px; }

/* Kima's annotation above the phone: who this lead is (a page label, not WhatsApp UI) */
.re-annot { position: absolute; top: 12px; left: 0; right: 0; display: flex; justify-content: center; margin: 0; z-index: 2; }
.re-annot { transition: opacity .5s var(--ease); }
.re-annot.is-gone { opacity: 0; }
.re-annot .tag { font-size: 11px; letter-spacing: .06em; padding: 5px 10px; background: rgba(6, 8, 6, .7); }

/* the tags under the opener land one by one (they keep their space, so the chat moves once) */
#re-tags { gap: 5px; }
#re-tags.is-enter { animation-delay: .1s; }
#re-learned.is-enter { animation-delay: .1s; }
#re-chip-row.is-enter { animation-delay: .3s; }
#re-chip-row .chip { box-shadow: 0 0 0 6px var(--signal-wash), 0 6px 24px rgba(205, 245, 70, .18); }

/* the sobrado sentence lights up when the tag lands */
/* a clearly visible selection: the question about to be deleted */
[data-scene="ressurreicao"] .wa-sel { background: rgba(10, 132, 255, .62); color: #fff; border-radius: 3px; }

#re-answer .mark { transition: background-color .6s var(--ease-expo), box-shadow .6s var(--ease-expo); }

/* "encerrado, sem insistir" inside a list row */
.re-closed { font-size: 11px; padding: 3px 7px; margin-left: 6px; flex: none; }

@media (max-width: 900px) {
  [data-scene="ressurreicao"] .phone-fit { padding: 34px 0 38px; }
  .re-annot { top: 2px; }
  .re-annot .tag { font-size: 9.5px; padding: 4px 8px; }
}