/**
 * Charts – Play/Pause & Cover (lädt nach style.css, hohe Priorität)
 */

.chart-item .chart-pause {
    display: none !important;
}

.chart-item.is-preview-playing .chart-play {
    display: none !important;
}

.chart-item.is-preview-playing .chart-pause {
    display: inline-flex !important;
}

.chart-play,
.chart-pause,
.chart-external {
    pointer-events: auto !important;
    touch-action: manipulation;
}

.chart-play__glyph {
    font-size: 0.85rem;
    line-height: 1;
    pointer-events: none;
}

.chart-play--loading {
    opacity: 0.6;
    cursor: wait !important;
}

.chart-cover,
.chart-thumb {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--rl-bg, #f4f5f7);
}

.chart-cover__img,
.chart-thumb img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    display: block;
}

.charts-artist-card__img img {
    width: 72px;
    height: 72px;
    object-fit: cover;
}

@media (max-width: 767px) {
    .charts-page .chart-item--lastfm,
    .charts-list--full .chart-item--lastfm {
        display: grid !important;
        grid-template-columns: 2.25rem 52px minmax(0, 1fr) auto !important;
        grid-template-areas: "pos cover info actions" !important;
    }

    .charts-page .chart-info,
    .charts-list--full .chart-info {
        min-width: 0 !important;
        max-width: none !important;
    }
}