/* AmarFayaz Sonic Lite Player — stable UI-only layer */
.af-audio-frame-custom,
.af-audio-frame {
  margin-top: 1.1rem;
}

.af-audio-player.af-sonic-lite {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  padding: 24px;
  background:
    radial-gradient(circle at 12% 10%, rgba(91,141,239,.28), transparent 30%),
    radial-gradient(circle at 82% 18%, rgba(0,214,201,.18), transparent 32%),
    linear-gradient(135deg, rgba(12,18,32,.96), rgba(26,33,50,.92));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 24px 70px rgba(0,0,0,.24);
  color: #fff;
  isolation: isolate;
}

.af-audio-player.af-sonic-lite::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: conic-gradient(from 180deg, rgba(255,255,255,.10), transparent, rgba(0,214,201,.14), transparent, rgba(91,141,239,.14));
  opacity: .42;
  filter: blur(44px);
  animation: afSonicMist 18s linear infinite;
  z-index: -1;
}
@keyframes afSonicMist { to { transform: rotate(360deg); } }

.af-sonic-lite .af-audio-topline {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 14px;
  align-items: center;
  margin-bottom: 18px;
}

.af-sonic-lite .af-audio-play {
  width: 58px;
  height: 58px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(16px);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 14px 34px rgba(0,0,0,.2);
}
.af-sonic-lite .af-audio-play:hover { transform: translateY(-1px); }

.af-sonic-lite .af-audio-titlewrap strong {
  display: block;
  font-size: clamp(1.1rem, 2vw, 1.65rem);
  line-height: 1.35;
  color: #fff;
}
.af-sonic-lite .af-audio-titlewrap span,
.af-sonic-lite .af-sonic-chip {
  display: inline-flex;
  margin-top: 7px;
  font-size: .88rem;
  color: rgba(255,255,255,.72);
}

.af-sonic-lite .af-audio-download,
.af-sonic-lite .af-sonic-share {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

.af-sonic-lite .af-audio-visual {
  position: relative;
  height: 132px;
  border-radius: 24px;
  overflow: hidden;
  margin: 8px 0 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)),
    rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.11);
}
.af-sonic-lite .af-audio-visual canvas { display:none !important; }
.af-sonic-lite .af-audio-fallback-bars,
.af-sonic-lite .af-sonic-spectrum {
  position: absolute;
  inset: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.af-sonic-lite .af-audio-fallback-bars i,
.af-sonic-lite .af-sonic-spectrum i {
  width: 6px;
  min-height: 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(0,214,201,.62), rgba(91,141,239,.32));
  box-shadow: 0 0 16px rgba(0,214,201,.25);
  transform-origin: center bottom;
  animation: afSonicBars 1.25s ease-in-out infinite;
  animation-play-state: paused;
}
.af-sonic-lite.is-playing .af-audio-fallback-bars i,
.af-sonic-lite.is-playing .af-sonic-spectrum i { animation-play-state: running; }
.af-sonic-lite .af-audio-fallback-bars i:nth-child(3n),
.af-sonic-lite .af-sonic-spectrum i:nth-child(3n) { animation-duration: .95s; }
.af-sonic-lite .af-audio-fallback-bars i:nth-child(4n),
.af-sonic-lite .af-sonic-spectrum i:nth-child(4n) { animation-duration: 1.55s; }
.af-sonic-lite .af-audio-fallback-bars i:nth-child(5n),
.af-sonic-lite .af-sonic-spectrum i:nth-child(5n) { animation-duration: 1.1s; }
@keyframes afSonicBars {
  0%, 100% { height: 18px; opacity:.62; }
  35% { height: 76px; opacity:1; }
  65% { height: 38px; opacity:.82; }
}

.af-sonic-lite .af-audio-controls {
  display: grid;
  grid-template-columns: 54px 1fr 62px;
  gap: 12px;
  align-items: center;
  color: rgba(255,255,255,.78);
  font-size: .88rem;
}
.af-sonic-lite .af-audio-seek {
  width: 100%;
  accent-color: #8ee7ff;
}
.af-sonic-lite audio { display:none !important; }

.af-sonic-lite .af-sonic-volume-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  color: rgba(255,255,255,.72);
  font-size: .85rem;
}
.af-sonic-lite .af-sonic-volume { width: 130px; accent-color:#8ee7ff; }

.af-sonic-transcript-collapsed {
  margin-top: 18px;
  border-radius: 20px;
  border: 1px solid rgba(120,120,120,.20);
  background: rgba(255,255,255,.04);
  overflow: hidden;
}
.af-sonic-transcript-collapsed summary {
  cursor: pointer;
  padding: 14px 18px;
  font-weight: 800;
}
.af-sonic-transcript-collapsed .af-sonic-transcript-body { padding: 0 18px 18px; }
.af-sonic-transcript-collapsed p { margin: .65rem 0; }

/* Remove old experimental subtitle placeholders safely */
.aam-front-subtitle:empty,
.af-sonic-empty-subtitle,
.af-current-transcript:empty { display:none !important; }

html[dir="rtl"] .af-sonic-lite,
html[lang^="sd"] .af-sonic-lite,
html[lang^="ur"] .af-sonic-lite {
  direction: rtl;
  text-align: right;
}

@media (max-width: 700px){
  .af-audio-player.af-sonic-lite { padding: 18px; border-radius: 22px; }
  .af-sonic-lite .af-audio-topline { grid-template-columns: auto 1fr auto; }
  .af-sonic-lite .af-sonic-share { display:none; }
  .af-sonic-lite .af-audio-visual { height: 105px; }
  .af-sonic-lite .af-audio-fallback-bars i,
  .af-sonic-lite .af-sonic-spectrum i { width: 4px; gap: 3px; }
}