/* ------------------------------------------------------------------ */
/* Tocador flutuante "Ouça nossa playlist"                            */
/* ------------------------------------------------------------------ */
.playlist { position: fixed; right: 20px; bottom: 20px; z-index: 50; font-family: var(--fonte-ui); }
.playlist__abrir, .playlist__tocando {
	display: flex; align-items: center; gap: 12px;
	background: rgba(24, 30, 14, .88); backdrop-filter: blur(10px);
	border: 1px solid rgba(217, 181, 74, .55); border-radius: 2px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
	color: var(--dourado-claro);
}
.playlist__abrir { padding: 10px 18px 10px 12px; cursor: pointer; font: inherit; transition: border-color .25s, transform .25s; }
.playlist__abrir:hover { border-color: var(--dourado-claro); transform: translateY(-2px); }
.playlist__nota { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--dourado); color: #1f2412; animation: playlist-chamar 2.8s ease-in-out infinite; }
.playlist__nota svg { width: 18px; height: 18px; }
@keyframes playlist-chamar { 0%, 100% { box-shadow: 0 0 0 0 rgba(217, 181, 74, .55); } 50% { box-shadow: 0 0 0 8px rgba(217, 181, 74, 0); } }
.playlist__convite { font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.playlist__tocando { display: none; padding: 8px 8px 8px 14px; max-width: min(360px, calc(100vw - 40px)); }
.playlist[data-estado="tocando"] .playlist__abrir, .playlist[data-estado="pausado"] .playlist__abrir { display: none; }
.playlist[data-estado="tocando"] .playlist__tocando, .playlist[data-estado="pausado"] .playlist__tocando { display: flex; }
.playlist__info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.playlist__rotulo { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--dourado); }
.playlist__titulo { font-size: .92rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--dourado-claro); }
.playlist__btn { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid rgba(217, 181, 74, .45); border-radius: 2px; background: transparent; color: var(--dourado-claro); cursor: pointer; }
.playlist__btn:hover { background: rgba(217, 181, 74, .15); }
.playlist__btn svg { width: 16px; height: 16px; }
.playlist__play .ico-play { display: none; }
.playlist[data-estado="pausado"] .playlist__play .ico-play { display: block; }
.playlist[data-estado="pausado"] .playlist__play .ico-pause { display: none; }
.playlist__eq { display: flex; align-items: flex-end; gap: 3px; height: 18px; }
.playlist__eq i { width: 3px; height: 100%; background: var(--dourado); transform-origin: bottom; animation: playlist-eq 1s ease-in-out infinite; }
.playlist__eq i:nth-child(2) { animation-delay: -.3s; }
.playlist__eq i:nth-child(3) { animation-delay: -.6s; }
.playlist__eq i:nth-child(4) { animation-delay: -.15s; }
@keyframes playlist-eq { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
.playlist[data-estado="pausado"] .playlist__eq i { animation-play-state: paused; }
@media (max-width: 560px) { .playlist { right: 12px; bottom: 12px; } .playlist__convite { font-size: .7rem; } }
@media (prefers-reduced-motion: reduce) { .playlist__nota, .playlist__eq i { animation: none; } }