/* InnBrief Podcast Player — v3 two-row layout */

.ib-player {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 0;
  user-select: none;
}

/* ── Row 1: Full-width progress bar ── */
.ib-player-progress-row {
  width: 100%;
}
.ib-player-progress {
  position: relative;
  height: 8px;
  background: rgba(255,255,255,0.12);
  border-radius: 4px;
  cursor: pointer;
  overflow: hidden;
  transition: height 0.1s;
}
.ib-player-progress:hover {
  height: 12px;
  background: rgba(255,255,255,0.18);
}
.ib-player-bar {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 0%;
  background: var(--accent-gold, var(--admin-gold, #d4a853));
  border-radius: 4px;
  pointer-events: none;
}

/* ── Row 2: Controls ── */
.ib-player-controls-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

/* Play button */
.ib-play-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  background: var(--accent-gold, var(--admin-gold, #d4a853));
  color: #1a1a2e;
  transition: filter 0.15s, transform 0.1s;
}
.ib-play-btn:hover { filter: brightness(1.15); }
.ib-play-btn:active { transform: scale(0.93); }
.ib-icon-loading { animation: ib-spin 0.8s linear infinite; }
@keyframes ib-spin { to { transform: rotate(360deg); } }

/* Time display */
.ib-player-current,
.ib-player-duration,
.ib-player-sep {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  flex-shrink: 0;
}
.ib-player-sep {
  color: rgba(255,255,255,0.25);
  font-size: 11px;
}

/* Spacer pushes volume + speed to the right */
.ib-player-spacer {
  flex: 1;
}

/* Volume button */
.ib-vol-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.55);
  padding: 0;
  transition: color 0.15s, background 0.15s;
}
.ib-vol-btn:hover {
  color: var(--accent-gold, var(--admin-gold, #d4a853));
  background: rgba(255,255,255,0.12);
}

/* Volume slider */
.ib-vol-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 56px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.15);
  outline: none;
  cursor: pointer;
  flex-shrink: 0;
}
.ib-vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--accent-gold, var(--admin-gold, #d4a853));
  border: none;
  cursor: pointer;
}
.ib-vol-slider::-moz-range-thumb {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--accent-gold, var(--admin-gold, #d4a853));
  border: none;
  cursor: pointer;
}
.ib-vol-slider::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.15);
}

/* Speed button */
.ib-speed-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.55);
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  min-width: 32px;
  height: 26px;
  border-radius: 6px;
  padding: 0 4px;
  letter-spacing: -0.3px;
  transition: color 0.15s, background 0.15s;
}
.ib-speed-btn:hover {
  color: var(--accent-gold, var(--admin-gold, #d4a853));
  background: rgba(255,255,255,0.12);
}

/* ── Light theme ── */
[data-theme="light"] .ib-player-progress { background: rgba(0,0,0,0.08); }
[data-theme="light"] .ib-player-progress:hover { background: rgba(0,0,0,0.12); }
[data-theme="light"] .ib-player-current,
[data-theme="light"] .ib-player-duration { color: rgba(0,0,0,0.5); }
[data-theme="light"] .ib-player-sep { color: rgba(0,0,0,0.2); }
[data-theme="light"] .ib-vol-btn { background: rgba(0,0,0,0.05); color: rgba(0,0,0,0.45); }
[data-theme="light"] .ib-vol-btn:hover { background: rgba(0,0,0,0.08); color: var(--accent-gold, #b8892e); }
[data-theme="light"] .ib-vol-slider { background: rgba(0,0,0,0.1); }
[data-theme="light"] .ib-vol-slider::-moz-range-track { background: rgba(0,0,0,0.1); }
[data-theme="light"] .ib-speed-btn { background: rgba(0,0,0,0.05); color: rgba(0,0,0,0.45); }
[data-theme="light"] .ib-speed-btn:hover { background: rgba(0,0,0,0.08); color: var(--accent-gold, #b8892e); }

/* ── Tiny screens: hide volume slider, keep mute ── */
@media (max-width: 360px) {
  .ib-vol-slider { display: none; }
}