/* CN Audio Player — front-end styles */

.cnap-player {
	--cnap-accent: #6D28D9;
	--cnap-ink: #17161C;
	--cnap-sub: #6B6875;
	--cnap-line: #E9E7EF;
	--cnap-bg: #FFFFFF;

	background: var(--cnap-bg);
	border: 1px solid var(--cnap-line);
	border-radius: 16px;
	box-shadow: 0 8px 24px rgba(20,10,50,0.06);
	/* Intentionally NOT overflow:hidden — that was clipping the ⋮ dropdown
	   menu so it rendered invisible inside the rounded box. Children don't
	   have backgrounds touching the outer edges, so corners still look clean. */
	max-width: 100%;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif;
	box-sizing: border-box;
	margin: 20px 0;
}
.cnap-player * { box-sizing: border-box; }

/* Art / disc fallback */
.cnap-art {
	border-radius: 10px;
	overflow: hidden;
	background: #EFEDF5;
	flex-shrink: 0;
}
.cnap-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cnap-disc {
	width: 100%; height: 100%; border-radius: 50%;
	background:
		radial-gradient(circle at center, #17161C 0 6%, transparent 6.5%),
		repeating-radial-gradient(circle at center, #2b2933 0, #2b2933 2px, #201f27 2px, #201f27 5px),
		radial-gradient(circle at center, #3a3745 0 20%, #201f27 21%);
	animation: cnap-spin 6s linear infinite;
	animation-play-state: paused;
}
.cnap-player.is-playing .cnap-disc { animation-play-state: running; }
@keyframes cnap-spin { to { transform: rotate(360deg); } }

/* Compact row */
.cnap-compact-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	cursor: pointer;
}
.cnap-compact-row .cnap-art { width: 46px; height: 46px; }
.cnap-compact-meta { min-width: 0; width: 96px; flex-shrink: 0; }
.cnap-title { font-size: 13px; font-weight: 700; color: var(--cnap-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cnap-artist { font-size: 11px; color: var(--cnap-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cnap-mini-play {
	width: 30px; height: 30px; border-radius: 50%; background: var(--cnap-accent);
	border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; padding: 0;
}
.cnap-mini-play svg { width: 12px; height: 12px; fill: #fff; }

.cnap-compact-wave { flex: 1; display: flex; align-items: center; gap: 1.5px; height: 24px; min-width: 0; }
.cnap-compact-wave .cnap-bar { flex: 1; background: var(--cnap-line); border-radius: 1px; min-height: 3px; }
.cnap-compact-wave .cnap-bar.played { background: var(--cnap-accent); }

.cnap-time { font-size: 11px; color: var(--cnap-sub); white-space: nowrap; font-variant-numeric: tabular-nums; flex-shrink: 0; }

.cnap-kebab-wrap { position: relative; flex-shrink: 0; }
.cnap-kebab-btn { background: none; border: none; color: var(--cnap-ink); opacity: 0.8; cursor: pointer; padding: 4px; }
.cnap-kebab-btn svg { width: 17px; height: 17px; display: block; }
.cnap-kebab-menu {
	position: absolute; right: 0; top: 32px;
	background: #fff; border: 1px solid var(--cnap-line); border-radius: 10px;
	box-shadow: 0 10px 30px rgba(20,10,50,0.14);
	width: 210px; padding: 6px; display: none; z-index: 999;
}
.cnap-kebab-menu.open { display: block; }
.cnap-kebab-menu .cnap-option-btn {
	display: flex; align-items: center; gap: 9px;
	padding: 8px 10px; border: none; background: none; border-radius: 7px;
	font-size: 12.5px; font-weight: 600; color: var(--cnap-ink); text-decoration: none;
}
.cnap-kebab-menu .cnap-option-btn:hover { background: #F3F2F7; }

/* Expanded view */
.cnap-expanded { display: none; }
.cnap-player.is-expanded .cnap-compact-row { display: none; }
.cnap-player.is-expanded .cnap-expanded { display: block; }

.cnap-expanded-top { display: flex; align-items: center; padding: 10px 12px 0; }
.cnap-collapse-btn {
	background: none; border: none; color: var(--cnap-sub); cursor: pointer; padding: 4px;
	display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600;
}
.cnap-collapse-btn svg { width: 14px; height: 14px; }

.cnap-expanded-body { display: grid; grid-template-columns: 132px 1fr; gap: 18px; padding: 14px 20px 20px; }
.cnap-art-large { width: 132px; height: 132px; }

.cnap-exp-meta { min-width: 0; }
.cnap-exp-title { font-size: 20px; font-weight: 800; letter-spacing: -0.2px; margin-bottom: 2px; color: var(--cnap-ink); }
.cnap-exp-artist { font-size: 13.5px; color: var(--cnap-sub); margin-bottom: 16px; }

.cnap-exp-wave { display: flex; align-items: center; height: 32px; gap: 2px; cursor: pointer; margin-bottom: 6px; }
.cnap-exp-wave .cnap-bar { flex: 1; background: var(--cnap-line); border-radius: 2px; min-height: 3px; }
.cnap-exp-wave .cnap-bar.played { background: var(--cnap-accent); }

.cnap-time-row { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--cnap-sub); margin-bottom: 14px; }

.cnap-exp-play {
	width: 42px; height: 42px; border-radius: 50%; background: var(--cnap-accent); border: none;
	display: flex; align-items: center; justify-content: center; cursor: pointer;
	box-shadow: 0 6px 16px rgba(109,40,217,0.35); padding: 0;
}
.cnap-exp-play svg { width: 16px; height: 16px; fill: #fff; }

/* Platform panel */
.cnap-platform-panel { border-top: 1px solid var(--cnap-line); padding: 14px 20px 18px; }
.cnap-platform-list { display: flex; flex-direction: column; gap: 7px; }
.cnap-option-btn {
	display: flex; align-items: center; gap: 10px;
	padding: 10px 12px; border-radius: 9px; border: 1px solid var(--cnap-line);
	background: #fff; font-size: 12.5px; font-weight: 600; color: var(--cnap-ink);
	text-decoration: none; cursor: pointer;
}
.cnap-option-btn.cnap-option-primary { background: var(--cnap-accent); color: #fff; border: none; }
.cnap-option-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.cnap-option-btn.cnap-option-primary svg { fill: #fff; }
.cnap-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.cnap-icon-wrap { width: 18px; height: 18px; flex-shrink: 0; display: flex; }
.cnap-icon-wrap svg { width: 100%; height: 100%; }

.cnap-kebab-menu .cnap-icon-wrap { width: 16px; height: 16px; }

.cnap-platform-icons { display: none; }

/* Mobile: icon row instead of full list */
@media (max-width: 460px) {
	.cnap-expanded-body { grid-template-columns: 1fr; }
	.cnap-art-large { width: 96px; height: 96px; margin: 0 auto; }
	.cnap-exp-meta { text-align: center; }
	.cnap-exp-play { margin: 0 auto; }

	.cnap-platform-list { display: none; }
	.cnap-platform-icons { display: flex; justify-content: center; gap: 14px; }
	.cnap-icon-btn {
		width: 40px; height: 40px; border-radius: 50%;
		border: 1px solid var(--cnap-line); background: #fff;
		display: flex; align-items: center; justify-content: center;
		text-decoration: none;
	}
	.cnap-icon-btn svg { width: 17px; height: 17px; }
	.cnap-icon-btn.cnap-option-primary { background: var(--cnap-accent); border: none; }
	.cnap-icon-btn.cnap-option-primary svg { fill: #fff; }

	/* Platform logos already come as a full circular badge (own background/color),
	   so the extra bordered circle wrapper would just double up — drop it here. */
	.cnap-icon-btn:has(svg circle[fill]),
	.cnap-icon-btn:has(svg rect[fill]) {
		border: none; background: none; width: 40px; height: 40px;
	}
	.cnap-icon-btn:has(svg circle[fill]) svg,
	.cnap-icon-btn:has(svg rect[fill]) svg {
		width: 40px; height: 40px;
	}
}