/* =========================================================================
   CHIPS (Recently Played / Added)
   ========================================================================= */
#chips-container {
    margin-bottom: 12px;
}

#chips-container:empty { display: none; }

.chip-section {
    margin-bottom: 14px;
}

.chip-section-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
    padding: 0 2px;
}

.see-all-link {
    background: none;
    border: 0;
    padding: 2px 4px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-3);
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
    transition: color 0.15s;
}
.see-all-link:hover { color: var(--accent); }
.see-all-link:active { color: var(--accent); }

.chip-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 2px 0;
    margin: 0 -12px;
    scroll-padding-inline: 12px;
    scrollbar-width: none;
}
.chip-scroll::-webkit-scrollbar { display: none; }

.chip-scroll::before,
.chip-scroll::after {
    content: "";
    flex: 0 0 12px;
    align-self: stretch;
}

.chip {
    flex-shrink: 0;
    width: 132px;
    scroll-snap-align: start;
    background: var(--surface);
    border-radius: var(--radius);
    padding: 8px;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}

.chip:active { transform: scale(0.97); background: var(--surface-2); }

.chip-art {
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    object-fit: cover;
    margin-bottom: 6px;
}

.chip-art.placeholder {
    background: linear-gradient(135deg, #134e4a, #0c3a4a);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.4);
}

.chip-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Chip skeleton — reserves the rail height before real chips render, so the
   song list below doesn't jump. Reuses .chip / .chip-art geometry + shimmer. */
#chips-skeleton { pointer-events: none; }

.chip-skel-heading,
.chip-skel-title,
.chip-art.skel {
    background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 40%, var(--surface-2) 80%);
    background-size: 200% 100%;
    animation: shimmer 1.6s infinite linear;
}
.chip-skel-heading {
    display: inline-block;
    width: 110px;
    height: 13px;
    border-radius: 4px;
}
.chip-skel-title {
    height: 14px;
    width: 80%;
    border-radius: 4px;
}

/* =========================================================================
   SONG LIST
   ========================================================================= */
.song-list-wrap {
    position: relative;
}

#song-list-content {
    background: var(--surface);
    border-radius: var(--radius);
    overflow: hidden;
}

.song-list-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    cursor: pointer;
    min-height: 60px;
    transition: background 0.12s;
    touch-action: manipulation;
}

.song-list-row:active { background: var(--surface-2); }
.song-list-row:last-child { border-bottom: none; }

.song-list-row.now-playing {
    background: linear-gradient(90deg, rgba(20,184,166,0.16), transparent);
    border-left: 3px solid var(--accent);
    padding-left: 11px;
}

.song-list-thumb {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    flex-shrink: 0;
    background: var(--surface-2);
}

.song-list-thumb.thumb-hidden { display: none; }

.song-list-thumb-placeholder {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    background: linear-gradient(135deg, #134e4a, #0c3a4a);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.3);
}

.song-list-info {
    flex: 1;
    min-width: 0;
}

.song-list-title {
    font-weight: 500;
    font-size: 0.92rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 8px;
}

.song-list-row.now-playing .song-list-title { color: var(--accent); }

.song-list-meta {
    font-size: 0.72rem;
    color: var(--text-3);
    margin-top: 3px;
}

/* Alphabet section headers */
.song-section { border-bottom: none; }

.song-section-header {
    padding: 10px 16px 6px;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--accent);
    background: rgba(7,7,10,0.85);
    backdrop-filter: blur(12px);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    position: sticky;
    top: 0;
    z-index: 2;
}

/* Now-playing equalizer icon */
.eq-icon {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 14px;
    width: 14px;
    flex-shrink: 0;
}

.eq-icon span {
    display: block;
    width: 3px;
    background: var(--accent);
    border-radius: 1px;
    animation: eq-bounce 0.9s infinite var(--ease-in-out);
    transform-origin: bottom;
}

.eq-icon span:nth-child(1) { animation-delay: -0.5s; }
.eq-icon span:nth-child(2) { animation-delay: -0.2s; }
.eq-icon span:nth-child(3) { animation-delay: -0.7s; }

.eq-icon.paused span { animation-play-state: paused; height: 30%; }

@keyframes eq-bounce {
    0%, 100% { height: 25%; }
    50% { height: 100%; }
}

/* Inline icon-only action button used in song rows (download, add-to-my-songs) */
.song-icon-btn {
    background: transparent;
    color: var(--accent);
    width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
}
.song-icon-btn:hover { color: var(--accent-2); }
.song-icon-btn:active { background: var(--accent-glow); color: var(--accent-2); }

/* Offline indicator on song rows */
.offline-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ok);
    flex-shrink: 0;
    margin-right: 4px;
    display: none;
    box-shadow: 0 0 6px rgba(52, 199, 142, 0.6);
}
.song-list-row.is-offline .offline-dot { display: block; }

/* Downloads screen */
.storage-meter {
    padding: 14px 16px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.storage-meter-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.85rem;
}
#storage-fill {
    height: 6px;
    background: var(--accent);
    border-radius: 3px;
    width: 0%;
    transition: width 200ms ease;
}
.download-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}
.download-row:last-child { border-bottom: none; }
.download-info {
    flex: 1;
    min-width: 0;
}
.download-title {
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.download-meta {
    font-size: 0.78rem;
    color: var(--text-3);
    margin-top: 2px;
}
#downloads-progress {
    padding: 8px 16px;
}
#downloads-progress-info {
    font-size: 0.82rem;
    color: var(--text-3);
    margin-bottom: 4px;
}
#downloads-progress-fill {
    height: 4px;
    background: var(--accent);
    border-radius: 2px;
    width: 0%;
    transition: width 150ms linear;
}

/* My Songs / All Songs toggle */
.song-list-toggle {
    display: flex;
    gap: 2px;
    background: var(--surface);
    border-radius: var(--radius);
    padding: 3px;
}

.toggle-btn {
    flex: 1;
    padding: 8px 12px;
    min-height: 36px;
    background: transparent;
    color: var(--text-3);
    border-radius: 9px;
    font-size: 0.82rem;
    font-weight: 600;
}

.toggle-btn:hover { background: transparent; color: var(--text-2); }
.toggle-btn.active {
    background: var(--surface-3);
    color: var(--text);
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* =========================================================================
   EMPTY STATES + SKELETONS
   ========================================================================= */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 8px;
    color: var(--text-3);
}

.empty-state svg { color: var(--text-3); opacity: 0.5; margin-bottom: 4px; }
.empty-state p { font-size: 1.05rem; color: var(--text-2); font-weight: 600; }
.empty-state span { font-size: 0.85rem; color: var(--text-3); text-align: center; max-width: 280px; }

/* Skeleton */
#song-list-skeleton, #search-skeleton { padding: 4px; }

.skeleton-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    min-height: 60px;
}

.skeleton-thumb {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    flex-shrink: 0;
    animation: shimmer 1.6s infinite linear;
    background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 40%, var(--surface-2) 80%);
    background-size: 200% 100%;
}

.skeleton-lines { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.skeleton-line {
    height: 11px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 40%, var(--surface-2) 80%);
    background-size: 200% 100%;
    animation: shimmer 1.6s infinite linear;
}
.skeleton-line.w70 { width: 70%; } .skeleton-line.w50 { width: 50%; }
.skeleton-line.w80 { width: 80%; } .skeleton-line.w60 { width: 60%; }
.skeleton-line.w40 { width: 40%; } .skeleton-line.w30 { width: 30%; }
.skeleton-line.w75 { width: 75%; } .skeleton-line.w45 { width: 45%; }
.skeleton-line.w35 { width: 35%; }

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}