/**
 * Rotating Promo Text — smooth slide-up crossfade between messages.
 *
 * All items occupy the SAME grid cell, so the bar's height equals the
 * tallest message (long messages that wrap on phones never clip) and the
 * outgoing/incoming messages overlap during the transition.
 *
 * States (driven by promo-text.js):
 *   (base)      parked below, invisible — ready to enter
 *   .is-active  visible, in place
 *   .is-leaving exiting upward, fading out
 */

.ly-promo-text__list {
	display: grid;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ly-promo-text__item {
	grid-area: 1 / 1;
	opacity: 0;
	transform: translateY( 0.6em );
	transition:
		opacity 450ms ease,
		transform 450ms cubic-bezier( 0.2, 0, 0, 1 );
	pointer-events: none;
}

.ly-promo-text__item.is-active {
	opacity: 1;
	transform: translateY( 0 );
	pointer-events: auto;
}

.ly-promo-text__item.is-leaving {
	opacity: 0;
	transform: translateY( -0.6em );
}

/* Reduced motion: keep the rotation (it's content, and hover pauses it)
   but swap via a plain fade — no vertical movement. */
@media ( prefers-reduced-motion: reduce ) {
	.ly-promo-text__item {
		transform: none !important;
		transition: opacity 200ms ease;
	}
}

/* Editor empty-state */
.ly-promo-text__empty {
	padding: 8px 12px;
	border: 1px dashed currentColor;
	border-radius: 8px;
	font-size: 0.85rem;
	opacity: 0.7;
}