/* Контейнер плеера — вся стилизация только внутри него */
.podcast-player {
  --bg:#07101a;
  --accent:#ff6b6b;
  --accent-2:#6be7ff;
  --muted:#95a0ab;

  font-family: Inter, Arial, sans-serif;
  color: #e6eef6;
}

/* Больше НИКАКИХ глобальных селекторов, только внутри .podcast-player */
.podcast-player .wrap {
  max-width: 980px;
  margin: 28px auto;
  padding: 18px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  box-shadow: 0 10px 40px rgba(255,0,179,0.60);
}

.podcast-player .player {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 16px;
  align-items: center;
}

.podcast-player .playbtn {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,253,9,0.01));
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: 0 6px 24px rgba(0,85,255,0.60);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform .12s ease, box-shadow .12s ease;
}

.podcast-player .playbtn:active {
  transform: scale(.98);
}

.podcast-player .playbtn .icon {
  width: 44px;
  height: 44px;
  fill: var(--accent-2);
  transition: transform .18s;
}

.podcast-player .playbtn.playing {
  box-shadow: 0 14px 40px rgba(255,0,4,0.60), 0 0 40px rgba(113,255,75,0.32);
}

.podcast-player .meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.podcast-player .title {
  font-weight: 700;
  font-size: 16px;
}

.podcast-player .subtitle {
  color: var(--muted);
  font-size: 13px;
  margin-top: -2px;
}

.podcast-player .progress-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.podcast-player .progress {
  height: 64px;
  border-radius: 10px;
  background: transparent;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.podcast-player .wave {
  width: 100%;
  height: 64px;
  display: block;
}

.podcast-player .fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 10px;
  width: 0%;
  pointer-events: none;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  mix-blend-mode: screen;
  opacity: 0.16;
}

.podcast-player .time-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.podcast-player .time {
  font-family: monospace;
  color: var(--muted);
  font-size: 13px;
}

.podcast-player .note {
  color: var(--muted);
  font-size: 13px;
  margin-top: 12px;
}

@media (max-width:520px){
  .podcast-player .player {
    grid-template-columns: 76px 1fr;
    gap: 12px;
  }
  .podcast-player .playbtn {
    width: 76px;
    height: 76px;
  }
  .podcast-player .wave {
    height: 46px;
  }
}




/* -------- Compact mode for embedding (no global changes) -------- */
.podcast-player.compact { --compact-scale: 0.5; }

/* shrink layout */
.podcast-player.compact .player {
  grid-template-columns: calc(92px * var(--compact-scale)) 1fr;
  gap: 10px;
  align-items: center;
}

/* shrink button */
.podcast-player.compact .playbtn {
  width: calc(92px * var(--compact-scale));
  height: calc(92px * var(--compact-scale));
  border-radius: calc(92px * var(--compact-scale) / 2);
  box-shadow: 0 8px 18px rgba(104,20,21,0.45);
}
.podcast-player.compact .playbtn .icon {
  width: calc(44px * var(--compact-scale));
  height: calc(44px * var(--compact-scale));
}

/* hide waveform/progress visually but keep DOM (no JS changes) */
.podcast-player.compact .progress-wrap { display: none !important; }

/* show only time row — move time up under title (if needed) */
.podcast-player.compact .meta { gap:6px; }
.podcast-player.compact .meta .meta-top { display:flex; flex-direction:column; gap:4px; }
.podcast-player.compact .time-row { display:flex; gap:8px; align-items:center; }

/* make sure nothing bleeds from fill/canvas */
.podcast-player.compact .wave,
.podcast-player.compact .fill { display:none !important; }

/* adjust font sizes for compact */
.podcast-player.compact .title { font-size:14px; }
.podcast-player.compact .subtitle { font-size:12px; }

/* responsive tweak */
@media (max-width:520px){
  .podcast-player.compact .player { grid-template-columns: calc(76px * var(--compact-scale)) 1fr; }
  .podcast-player.compact .playbtn { width: calc(76px * var(--compact-scale)); height: calc(76px * var(--compact-scale)); }
  .podcast-player.compact .playbtn .icon { width: calc(36px * var(--compact-scale)); height: calc(36px * var(--compact-scale)); }
}

/* Compact podcast player — уменьшение цифр времени */
.current-time,
.total-time {
  font-size: 14px !important;   /* уменьши до размера который нужен: 9 / 10 / 11 */
  line-height: 1 !important;
/*  color: var(--muted) !important;*/
  font-family: monospace !important;
  min-width: 36px;              /* фиксируем ширину, чтобы цифры не прыгали */
  text-align: center;
  display: inline-block;
color: #00B0FF;
}


.podcast-player.compact {
  max-width: 200px;      /* или 320px — выбери сам */
  width: 100%;           /* чтобы адаптировалось */
  margin-left: auto;
  margin-right: auto;    /* центрируем плеер */
}

.podcast-player.compact .player {
  display: flex;
  align-items: center;
  gap: 12px;
}
.podcast-player.compact .time-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  white-space: nowrap;
}









/* --- Heartbeat pulse for mini play button (paste at end of styles.css) --- */

/* clip pseudo-elements to the circle so no lines appear outside */
.podcast-player .playbtn.mini {
  overflow: hidden !important;
}

/* hide the sheen stripe entirely if present */
/*.podcast-player .playbtn.mini::after {
  display: none !important;
}*/

/* heartbeat pulse (inner glow) */
.podcast-player .playbtn.mini::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%,
              rgba(255,255,255,0.14),
              rgba(107,231,255,0.08) 40%,
              rgba(107,231,255,0.03) 60%,
              transparent 72%);
  opacity: 0;
  transform: scale(1);
  pointer-events: none;
  transition: opacity .18s ease;
}

/* activate heartbeat when playing */
.podcast-player .playbtn.mini.playing::before {
  opacity: 1;
  animation: heartbeat 1.4s ease-in-out infinite;
  transform-origin: center center;
}

/* heartbeat keyframes: double-beat then rest */
@keyframes heartbeat {
  0%   { transform: scale(1);     opacity: 0.28; }
  6%   { transform: scale(1.22);  opacity: 1;    }
  14%  { transform: scale(1.00);  opacity: 0.5;  }
  20%  { transform: scale(1.14);  opacity: 0.95; }
  30%  { transform: scale(1.00);  opacity: 0.36; }
  100% { transform: scale(1.00);  opacity: 0.28; }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .podcast-player .playbtn.mini.playing::before {
    animation: none !important;
    opacity: 0.8 !important;
    transform: none !important;
  }
}



/* --- Idle rotating ring around mini play button (paste at end of styles.css) --- */

/* Remove any earlier rule hiding ::after (if exists): change or delete that rule first. */

/* Idle ring (visible when NOT playing) */
.podcast-player .playbtn.mini::after {
  content: "";
  position: absolute;
  inset: -8px;                         /* ring sits just outside the button */
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;                         /* behind the button */
  /* conic-gradient creates an arc that will rotate */
  background: conic-gradient(
    from 0deg,
    rgba(107,231,255,0.30) 0deg 25deg,
    rgba(255,255,255,0.05) 25deg 100%
  );
  /* make it a thin ring by masking center */
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), black calc(100% - 7px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 8px), black calc(100% - 7px));
  opacity: 0.95;
  transform: scale(1);
  transition: opacity .2s ease, transform .2s ease;
  animation: ringRotate 3.2s linear infinite;
}

/* When playing — hide/quiet the ring */
.podcast-player .playbtn.mini.playing::after {
  opacity: 0;
  transform: scale(.98);
  animation: none;
}

/* Slightly reduce the ring on mobile to avoid overlap */
@media (max-width:520px) {
  .podcast-player .playbtn.mini::after {
    inset: -6px;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), black calc(100% - 5px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 6px), black calc(100% - 5px));
  }
}

/* gentle rotation animation */
@keyframes ringRotate {
  from { transform: rotate(0deg) scale(1); }
  to   { transform: rotate(360deg) scale(1); }
}

/* respects prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .podcast-player .playbtn.mini::after {
    animation: none !important;
    opacity: 0.7 !important;
    transform: none !important;
  }
}


/* ====== FORCED FIX: make idle rotating ring visible ====== */
/* Put this at the very end of styles.css */

/* 1) Allow pseudo-elements to be visible outside the button */
.podcast-player .playbtn.mini {
  overflow: visible !important;   /* override earlier overflow:hidden */
  position: relative;             /* ensure stacking context */
  z-index: 2;                      /* button above the ring */
}

/* 2) Ensure the ring is behind the button but still above page background */
.podcast-player .playbtn.mini::after {
  content: "";
  position: absolute;
  inset: -9px;                    /* distance of ring from button edge */
  border-radius: 50%;
  z-index: 1;                     /* behind button (z-index 2) but above page */
  pointer-events: none;
  background: conic-gradient(
    rgba(107,231,255,0.32) 0deg 40deg,
    rgba(255,255,255,0.04) 40deg 360deg
  );
  /* create a thin ring by masking center */
  -webkit-mask: radial-gradient(circle, transparent 62%, black 63%);
  mask: radial-gradient(circle, transparent 62%, black 63%);
  animation: ringRotate 3.2s linear infinite;
  opacity: 0.95;
  transform-origin: center center;
  transition: opacity .2s ease, transform .2s ease;
}

/* 3) Hide ring while playing (keep heartbeat ::before active) */
.podcast-player .playbtn.mini.playing::after {
  opacity: 0;
  animation: none;
  transform: scale(.98);
}

/* 4) Mobile tweak */
@media (max-width:520px) {
  .podcast-player .playbtn.mini::after {
    inset: -6px;
    -webkit-mask: radial-gradient(circle, transparent 66%, black 67%);
    mask: radial-gradient(circle, transparent 66%, black 67%);
  }
}

/* 5) rotation keyframes */
@keyframes ringRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* 6) reduced-motion respect */
@media (prefers-reduced-motion: reduce) {
  .podcast-player .playbtn.mini::after {
    animation: none !important;
    opacity: .7 !important;
    transform: none !important;
  }
}