/* R54 V11/V12 — load after vy-motion.css.
   Calm text during active calls; one entrance for empty-thread decoration.
   Existing connection, ringing, recording and speaking indicators keep their
   state-driven behavior and the original system/in-app motion switches. */

/* #call-status contains the timer or a reconnect message (calls.js paintStatus).
   Keep both readable without implying a new connection/quality state. The
   separate reconnect orb, network chip and recording indicators are untouched. */
.call-overlay[data-state="active"] .call-overlay__status {
  animation: none;
  opacity: 1;
}

/* The runtime inserts this aria-hidden layer once per empty-thread element.
   Animate the layer once; its five small bubbles then stay in place. */
@keyframes r54-empty-decoration-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

.thread-empty > .vy-bubbles {
  animation: r54-empty-decoration-in 280ms var(--vy-ease, ease-out) 1 both;
}

/* Override vy-float only inside this decorative empty state. In particular,
   discard its negative delays and persistent compositor hints. */
.thread-empty > .vy-bubbles > i {
  bottom: var(--r54-bubble-y, 20%);
  left: var(--r54-bubble-x, var(--x, 20%));
  opacity: var(--vy-bubble-o, 0.12);
  transform: none;
  animation: none;
  will-change: auto;
}
.thread-empty > .vy-bubbles > i:nth-child(1) {
  --r54-bubble-x: 8%;
  --r54-bubble-y: 20%;
}
.thread-empty > .vy-bubbles > i:nth-child(2) {
  --r54-bubble-x: 22%;
  --r54-bubble-y: 72%;
}
.thread-empty > .vy-bubbles > i:nth-child(3) {
  --r54-bubble-x: 48%;
  --r54-bubble-y: 12%;
}
.thread-empty > .vy-bubbles > i:nth-child(4) {
  --r54-bubble-x: 72%;
  --r54-bubble-y: 78%;
}
.thread-empty > .vy-bubbles > i:nth-child(5) {
  --r54-bubble-x: 88%;
  --r54-bubble-y: 30%;
}

/* vy-motion.css already hides the purely decorative layer for both switches.
   Cancel its entrance too; semantic status text remains visible and steady. */
html[data-vy-motion="off"] .thread-empty > .vy-bubbles {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .thread-empty > .vy-bubbles {
    animation: none;
  }
}