/* Atendimento: chapter 1. Layout comes from story.css (.chapter-grid, .svc-card);
 * the phone from phone.css. Only scene-specific placement and timing here. */

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

/* the three tags under Antônio's transcript land one under the other, in reading order */
[data-scene="atendimento"] .at-tags { flex-direction: column; align-items: flex-start; gap: 6px; margin-left: 4px; }
/* a tag takes space only once it lands, and opens smoothly so the chat glides up */
.js [data-scene="atendimento"] .at-tags .tag.is-off { display: none; }
.js [data-scene="atendimento"] .at-tags .tag { animation: at-tag-in .55s var(--ease-expo) both; }
@keyframes at-tag-in {
  from { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; transform: translateY(6px) scale(.96); }
  to   { max-height: 40px; opacity: 1; transform: none; }
}

/* inside one beat, these follow the bubble they annotate */
#at-hold-tag.is-enter { animation-delay: .45s; }
#at-chip-row.is-enter { animation-delay: .3s; }
#at-chip-row .chip { box-shadow: 0 0 0 6px var(--signal-wash), 0 6px 24px rgba(205, 245, 70, .18); }

@media (max-width: 900px) {
  [data-scene="atendimento"] .phone-fit { padding: 0 0 38px; }
}