/* Hero chat mockup: phone scenes, bubbles, case card, typing reveal, carousel dots. */

.stage { position: relative; display: grid; justify-items: center; }
.phone {
  grid-area: 1 / 1; width: min(100%, 360px); margin: 0;
  background: rgba(238, 243, 242, .92); border: 1px solid var(--line); border-radius: 32px;
  padding: 18px 16px 16px; box-shadow: 0 30px 70px -34px rgba(14, 107, 115, .45);
  backdrop-filter: blur(6px);
  display: flex; flex-direction: column; height: 680px;
  opacity: 0; visibility: hidden; transition: opacity .5s;
}
.chat {
  flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column;
  padding-top: 12px; scrollbar-width: thin;
}
.chat > * { flex: none; }
.phone.is-active { opacity: 1; visibility: visible; }
.who { font-size: .8rem; color: var(--muted); text-align: center; border-bottom: 1px solid var(--line); padding-bottom: 10px; }

.bubble { position: relative; font-size: .92rem; line-height: 1.5; padding: 9px 13px; border-radius: 16px; max-width: 86%; margin: 0 0 8px; }
.bubble.out { background: var(--accent); color: #fff; border-start-start-radius: 4px; }
.bubble.in { background: var(--card); color: var(--ink); border: 1px solid var(--line); margin-inline-start: auto; border-start-end-radius: 4px; }
.bubble.link { background: var(--tint); color: var(--accent-ink); font-weight: 500; text-decoration: underline; }

.case {
  display: grid; gap: 4px; justify-items: start;
  background: var(--ink); color: #fff; border-radius: 14px; padding: 12px 14px; font-size: .88rem; margin-top: 12px;
}
.case-label { font-size: .75rem; color: var(--on-dark-muted); }
.case-text { font-weight: 500; margin-bottom: 4px; }
.tag { border-radius: 999px; padding: 2px 10px; font-size: .8rem; white-space: nowrap; }
.tag.pending { background: var(--pending-bg); color: var(--pending-ink); }
.tag.done { background: var(--tint); color: var(--accent-ink); }

/* Progressive reveal, only when carousel.js marks the stage as animated: unshown parts are
   removed from the flow, and the chat slides up (carousel.js scrolls it) as new ones arrive. */
.is-animated .chat { overflow: hidden; }
.is-animated .chat > :not(.is-shown):not(.typing) { display: none; }
.is-animated .is-shown { animation: pop .35s ease-out; }
@keyframes pop { from { opacity: 0; transform: translateY(8px); } }
.bubble.typing {
  align-self: flex-start; padding: 10px 14px; font-size: .55rem; line-height: 1; letter-spacing: 1px;
  animation: typing 1s ease-in-out infinite;
}
@keyframes typing { 50% { opacity: .55; } }

/* 14px gap keeps the dot centres 24px apart (WCAG 2.5.8 target spacing). */
.dots { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.dots .motion-toggle { margin-inline-start: 6px; }
.dots button {
  width: 10px; height: 10px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: var(--line); transition: width .3s, background .3s;
}
.dots button[aria-current="true"] { background: var(--accent); width: 26px; border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
  .phone, .dots button { transition: none; }
}

/* Screenshot bubble (credit-report guidance): keep the image readable. */
.bubble.shot { padding: 5px; width: 86%; }
.bubble.shot img { display: block; width: 100%; height: auto; border-radius: 12px; }
.bubble.shot span { display: block; padding: 7px 8px 3px; }