/* 🔊 Listen buttons: Quote of the Day + the wisdom you receive (static/js/narration.js), in the app's narrator voice */
.aws-listen-row {
    display: flex;
    justify-content: center;
    margin: 1rem 0 0.25rem;
}

.aws-listen-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 1.25rem;
    border: 1px solid var(--at-gold-dim, rgba(255, 215, 0, 0.55));
    border-radius: 999px;
    background: rgba(255, 215, 0, 0.06);
    color: var(--at-gold, #ffd700);
    font-family: var(--at-mono, 'Space Mono', 'Courier New', monospace);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-backdrop-filter: var(--at-blur, blur(12px));
    backdrop-filter: var(--at-blur, blur(12px));
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

.aws-listen-btn:hover {
    border-color: var(--at-gold, #ffd700);
    box-shadow: 0 0 18px rgba(255, 215, 0, 0.25);
    transform: translateY(-1px);
}

.aws-listen-btn:focus-visible,
.qotd-btn-listen:focus-visible {
    outline: 2px solid var(--at-gold, #ffd700);
    outline-offset: 3px;
}

.aws-listen-btn.is-playing {
    background: var(--at-gold-faint, rgba(255, 215, 0, 0.18));
    border-color: var(--at-gold, #ffd700);
    box-shadow: 0 0 22px rgba(255, 215, 0, 0.3);
}

.aws-listen-btn .aws-listen-icon {
    font-size: 1rem;
    line-height: 1;
}

/* QOTD: Listen is a .qotd-btn like Share / Save / Explore; only its playing state is added here */
.qotd-btn-listen.is-playing {
    border-color: var(--at-gold, #ffd700) !important;
    box-shadow: 0 0 18px rgba(255, 215, 0, 0.3) !important;
}

/* Pulse while the narrator voice is summoned */
.aws-listen-btn.is-loading .aws-listen-icon,
.qotd-btn-listen.is-loading .aws-listen-icon {
    display: inline-block;
    animation: aws-listen-pulse 1.1s ease-in-out infinite;
}

@keyframes aws-listen-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.86); }
}

@media (prefers-reduced-motion: reduce) {
    .aws-listen-btn,
    .aws-listen-icon {
        transition: none !important;
        animation: none !important;
    }
}