/* DTR Live Overlay – Now Playing (v0.1.0-dev) */

.dtr-overlay{
  position:absolute;
  left:0;
  right:0;
  z-index: 9999;
  pointer-events:none; /* niczego nie blokujemy */
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.dtr-overlay[data-pos="top"]{ top:0; }
.dtr-overlay[data-pos="bottom"]{ bottom:0; }

.dtr-overlay__inner{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 10px 14px;
  color:#fff;
  background: rgba(0,0,0,0.6);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.dtr-overlay[data-pos="bottom"] .dtr-overlay__inner{
  border-bottom:none;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.dtr-overlay.is-blur .dtr-overlay__inner{
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.dtr-overlay__logo img{
  width: 64px;
  height:auto;
  display:block;
  opacity: 0.95;
}

.dtr-overlay__cover img{
  width: 56px;
  height:56px;
  border-radius: 8px;
  object-fit: cover;
  display:block;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}

/* Na mobile klikamy w okładkę (overlay ma pointer-events:none) */
.dtr-overlay__cover{ pointer-events:auto; }

.dtr-overlay__text{
  display:flex;
  flex-direction:column;
  min-width: 0;
  flex: 1 1 auto;
}

.dtr-overlay__title,
.dtr-overlay__artist{
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

.dtr-overlay__title{
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 1.15;
  font-size: 18px;
}

.dtr-overlay__artist{
  opacity: 0.9;
  font-size: 14px;
  margin-top: 2px;
}

.dtr-overlay__badge{
  flex: 0 0 auto;
  font-size: 11px;
  letter-spacing: 0.18em;
  opacity: 0.8;
  padding: 6px 8px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
}

.dtr-overlay.is-changing .dtr-overlay__inner{
  transition: opacity .25s ease, transform .25s ease;
  opacity: 0.4;
  transform: translateY(-2px);
}

@media (max-width: 640px){
  .dtr-overlay__badge{ display:none; }
  .dtr-overlay__logo img{ width: 52px; }
  .dtr-overlay__cover img{ width: 46px; height:46px; }
}


/* LIVE indicator (patch 0.1.5a) */
.dtr-overlay__live{
  display:flex;
  align-items:center;
  gap:6px;
  margin-left:14px;
  margin-top:6px;
  font-size:11px;
  letter-spacing:0.18em;
  color:#fff;
  opacity:0.9;
}
.dtr-overlay__live .dot{
  width:8px;
  height:8px;
  background:#ff2b2b;
  border-radius:50%;
  animation:dtr-live-pulse 1.4s infinite;
}
@keyframes dtr-live-pulse{
  0%{box-shadow:0 0 0 0 rgba(255,43,43,.7)}
  70%{box-shadow:0 0 0 6px rgba(255,43,43,0)}
  100%{box-shadow:0 0 0 0 rgba(255,43,43,0)}
}
/* === MOBILE RESPONSIVE OVERLAY === */
@media (max-width: 640px) {

  .dtr-overlay__inner {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 2px;
    padding: 8px 10px;
    align-items: center;
  }

  /* logo – opcjonalnie mniejsze */
  .dtr-overlay__logo img {
    width: 40px;
  }

  /* okładka */
  .dtr-overlay__cover img {
    width: 44px;
    height: 44px;
    border-radius: 6px;
  }

  /* tekst */
  .dtr-overlay__text {
    grid-column: 2;
    min-width: 0;
  }

  .dtr-overlay__title {
    font-size: 15px;
    line-height: 1.2;
  }

  .dtr-overlay__artist {
    font-size: 12px;
    opacity: 0.85;
  }

  /* badge LIVE / Teraz gramy */
  .dtr-overlay__badge {
    grid-column: 2;
    justify-self: start;
    font-size: 10px;
    padding: 3px 6px;
    margin-top: 2px;
  }
}
/* === MOBILE COLLAPSE MODE === */
@media (max-width: 640px) {

  .dtr-overlay.is-collapsed .dtr-overlay__inner {
    padding: 6px;
  }

  .dtr-overlay.is-collapsed .dtr-overlay__text,
  .dtr-overlay.is-collapsed .dtr-overlay__badge,
  .dtr-overlay.is-collapsed .dtr-overlay__logo {
    display: none;
  }

  .dtr-overlay.is-collapsed .dtr-overlay__cover img {
    width: 48px;
    height: 48px;
    border-radius: 8px;
  }

  .dtr-overlay {
    cursor: pointer;
  }
}
@media (max-width: 640px) {

  .dtr-overlay.is-collapsed {
    height: auto !important;
  }

  .dtr-overlay.is-collapsed .dtr-overlay__inner {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    min-height: auto !important;
  }

  .dtr-overlay.is-collapsed .dtr-overlay__logo,
  .dtr-overlay.is-collapsed .dtr-overlay__text,
  .dtr-overlay.is-collapsed .dtr-overlay__badge {
    display: none !important;
  }

  .dtr-overlay.is-collapsed .dtr-overlay__cover {
    padding: 6px;
    background: rgba(0,0,0,0.65);
    border-radius: 10px;
    pointer-events: auto;
  }
}
@media (max-width: 640px) {

  /* usuń rozmycie (backdrop-filter) w trybie zwiniętym */
  .dtr-overlay.is-collapsed .dtr-overlay__inner{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
  }

  /* dodatkowo: żeby belka nie miała „pełnej szerokości” jako niewidzialny klocek */
  .dtr-overlay.is-collapsed .dtr-overlay__inner{
    display: inline-flex !important;
    width: auto !important;
  }
}