/* Explain: Styles for live activity ticker and admin toasts. */
.live-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border-radius: 999px;
    background: rgba(46, 158, 91, 0.14);
    padding: 0.35rem 0.8rem;
    color: #1E7A43;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.live-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: #2E9E5B;
    animation: chat-pulse 2s infinite;
}

.ticker-viewport {
    position: relative;
    overflow: hidden;
}

.ticker-track {
    display: inline-flex;
    align-items: center;
    gap: 2.75rem;
    white-space: nowrap;
    animation: ticker-scroll 48s linear infinite;
    will-change: transform;
}

.ticker-viewport:hover .ticker-track {
    animation-play-state: paused;
}

.ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.ticker-item i {
    color: var(--accent-color);
}

@keyframes ticker-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .ticker-track,
    .live-dot {
        animation: none;
    }
}

.admin-toasts {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 95;
    display: grid;
    width: min(22rem, calc(100vw - 2.5rem));
    gap: 0.6rem;
}

.admin-toast {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-radius: 1.2rem;
    padding: 0.75rem 0.85rem;
    animation: toast-in 300ms ease;
}

.admin-toast-close {
    display: inline-flex;
    height: 2rem;
    width: 2rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: var(--field-bg);
    color: var(--text-muted);
    transition: color 250ms ease;
}

.admin-toast-close:hover {
    color: var(--accent-color);
}

@keyframes toast-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}