/* misc.css — Toast, marquee, modal-overlay (image lightbox), shared fade-in animations */

.imm-inline-list { display: none !important; }
.imm-list-item { display: none; }
.imm-listener-badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 5px; border-radius: 99px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 12px; font-weight: 600; color: white;
}

.imm-listener-badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 5px; border-radius: 99px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 12px; font-weight: 600; color: white;
}

.toast-notification {
  position: fixed; top: calc(var(--safe-top) + 24px); left: 50%;
  transform: translateX(-50%) translateY(-150px);
  background-color: #333; color: white;
  padding: 10px 14px; border-radius: 18px; font-size: 14px; z-index: 9999;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  pointer-events: none; max-width: min(92%, 520px); white-space: normal;
  overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.toast-notification.show { transform: translateX(-50%) translateY(0); }

.marquee-wrap {
  display: block; overflow: hidden; white-space: nowrap;
  --marquee-gap: 28px; --marquee-duration: 12s;
  --marquee-shift: 0px; --marquee-delay: 0.7s;
  contain: layout paint style;
}
.marquee-inner { display: inline-flex; align-items: center; gap: var(--marquee-gap); }
.marquee-copy { flex-shrink: 0; }
.marquee-wrap.is-marquee .marquee-inner {
  /* [Perf v4] will-change 仅在 .is-marquee 真正动画时生效, 不再为不溢出的短文本占用 GPU 层 */
  will-change: transform;
  animation: marquee var(--marquee-duration) linear infinite;
  animation-delay: var(--marquee-delay);
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--marquee-shift))); } }

.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.95); z-index: 3000;
  display: flex; align-items: center; justify-content: center; touch-action: none;
  transition: background-color 0.2s ease-out;
}
.modal-stage { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.modal-img {
  max-width: 100%; max-height: 100%;
  transform-origin: center center;
  will-change: transform; user-select: none;
  -webkit-user-drag: none; cursor: grab;
}
.modal-img:active { cursor: grabbing; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.fade-in { animation: fadeIn 0.4s ease; }

.cat-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 260px;
}
.station-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 140px;
}
.radio-item,
.search-result-item {
  content-visibility: auto;
  contain-intrinsic-size: auto 60px;
}
.browse-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 96px;  /* 76 → 96：匹配上面新的 min-height + padding */
}