/* ============================================================
   Кнопка «Эфир» — справа от плеера
   ============================================================ */

.kp-tv-btn {
  display: flex;
  flex: 0 0 auto;
  gap: 1rem;
  height: 4rem;
  width: fit-content;
  background: var(--k24-gradient-base);
  border-radius: var(--k24-border-radius-2xl);
  padding: 0.15rem 0.15rem 0.15rem 0;
  box-sizing: border-box;
  box-shadow: var(--k24-box-shadow);
}

.kp-tv-btn:hover {
  background: var(--k24-gradient-base);
}

.kp-tv-btn:hover svg {
  fill: var(--k24-red);
  transition: var(--k24-transition-base);
}

.kp-tv-btn__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 4.1rem;
  width: 4.1rem;
  flex: 0 0 auto;

  overflow: hidden;
}

.kp-tv-btn__logo img {
  width: 100%;
  height: 100%;
  padding: 0.5rem;
  object-fit: contain;
  display: block;
  border-radius: 50%;
  transition: var(--k24-transition-base);
  background: var(--k24-light-reverse);
}

/* Пульсация, пока iframe грузится */
.kp-tv-btn.is-loading .kp-tv-btn__logo img {
  animation: kp-tv-pulse 1s ease-in-out infinite;
}

/* Вращение вокруг вертикальной оси, пока эфир играет */
.kp-tv-btn.is-playing .kp-tv-btn__logo img {
  animation: kp-tv-flip-y 2s linear infinite;
}

@keyframes kp-tv-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.9); }
}

@keyframes kp-tv-flip-y {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}

/* Уважаем системную настройку «уменьшить движение» */
@media (prefers-reduced-motion: reduce) {
  .kp-tv-btn.is-loading .kp-tv-btn__logo img,
  .kp-tv-btn.is-playing .kp-tv-btn__logo img {
    animation: none;
  }
}

.kp-tv-btn svg {
  width: 4rem;
  height: 4rem;
}

.kp-player-wrapper--name {
  display: grid;
  grid-template-columns: 1fr;
}

.kp-player-name-2 {
  font-weight: var(--k24-font-weight-light);
}

/* ============================================================
   Мини-окно «Эфир»
   ============================================================ */

.kp-tv-mini {
  position: fixed;
  left: 3rem;
  bottom: 8.5rem;
  /* было 3rem — под фактическую высоту плеера (4rem) */
  z-index: 10000;
  width: min(20dvw, calc(100vw - 3rem));
}

.kp-tv-mini[hidden] {
  display: none;
}

.kp-tv-mini__dialog {
  position: relative;
  width: 100%;
  background: #000;
  border-radius: var(--k24-border-radius-base);
  overflow: hidden;
  box-shadow: var(--k24-box-shadow);
}

.kp-tv-mini__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

.kp-tv-mini__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.kp-tv-mini__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: var(--k24-light-reverse);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.kp-tv-mini__close:hover {
  background: rgba(0, 0, 0, 0.8);
}

.kp-tv-mini__close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  .kp-tv-mini__dialog {
    animation: kp-tv-mini-in 0.18s ease-out;
  }

  @keyframes kp-tv-mini-in {
    from {
      opacity: 0;
      transform: translateY(8px) scale(0.98);
    }

    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
}

@media (max-width: 480px) {
  .kp-tv-mini {
    right: 8px;
    left: 8px;
    bottom: calc(4rem + 8px);
    /* тоже 4rem, не 3rem */
    width: auto;
  }
}