/**
 * Media Store — PWA offline indicator + toast (Phase 7.1).
 */

.mst-net-pill {
	position: fixed; top: 14px; left: 50%; z-index: 9700;
	display: inline-flex; align-items: center; gap: 9px;
	padding: 7px 12px; border-radius: 999px;
	background: rgba(22,22,28,0.92); color: #fff; font-size: 0.8rem; font-weight: 600;
	border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 8px 28px rgba(0,0,0,0.4);
	-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
	transform: translate(-50%, -160%); opacity: 0; pointer-events: none;
	transition: transform 0.3s ease, opacity 0.3s ease;
}
.mst-net-pill.is-visible { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
@supports (padding: max(0px)) { .mst-net-pill { top: calc( 14px + env( safe-area-inset-top, 0px ) ); } }

.mst-net-pill__dot { width: 8px; height: 8px; border-radius: 50%; background: #9aa0a6; flex-shrink: 0; }
.mst-net-pill.is-online .mst-net-pill__dot { background: #38c172; }
.mst-net-pill.is-offline .mst-net-pill__dot { background: #ff6b6b; }
.mst-net-pill.is-offline-ready .mst-net-pill__dot { background: #f5a623; }
.mst-net-pill.is-syncing .mst-net-pill__dot { background: #5c6ef4; animation: mst-net-pulse 0.9s ease-in-out infinite; }
.mst-net-pill.is-failed .mst-net-pill__dot { background: #ff6b6b; }
@keyframes mst-net-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.mst-net-pill__label { white-space: nowrap; }
.mst-net-pill__btn {
	margin-left: 2px; padding: 3px 10px; border-radius: 999px; cursor: pointer;
	font-size: 0.72rem; font-weight: 700; border: 0; background: #5c6ef4; color: #fff;
}
.mst-net-pill__btn:hover { filter: brightness(1.1); }
.mst-net-pill__install { background: rgba(255,255,255,0.14); }

/* "Not available offline" toast */
.mst-net-toast {
	position: fixed; left: 50%; bottom: calc( var(--mst-player-h, 80px) + 24px ); z-index: 9700;
	transform: translate(-50%, 12px); opacity: 0;
	background: rgba(22,22,28,0.96); color: #fff; padding: 11px 18px; border-radius: 10px;
	font-size: 0.85rem; border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 10px 30px rgba(0,0,0,0.45);
	transition: transform 0.25s ease, opacity 0.25s ease; max-width: 90vw; text-align: center;
}
.mst-net-toast.is-visible { transform: translate(-50%, 0); opacity: 1; }
@supports (padding: max(0px)) {
	.mst-net-toast { bottom: calc( var(--mst-player-h, 80px) + 24px + env( safe-area-inset-bottom, 0px ) ); }
}

@media (prefers-reduced-motion: reduce) {
	.mst-net-pill, .mst-net-toast { transition: none; }
	.mst-net-pill.is-syncing .mst-net-pill__dot { animation: none; }
}