/**
 * Docked in-page radio.
 *
 * Corner panel rather than a full-width bottom bar: the radio is one thing a
 * listener chose to start, not site chrome, and a full-width bar reads as
 * permanent furniture. On a phone it goes edge to edge because at that width
 * a corner panel is just a cramped panel.
 */

.jay-radio-dock {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 900; /* under the admin toolbar (1000+), over page content */
  width: 340px;
  max-width: calc(100vw - 24px);
  background: var(--surface, #131313);
  border: 1px solid var(--border, #333);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
}

.jay-radio-dock__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 12px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid var(--border, #333);
}

.jay-radio-dock__label {
  flex: 1 1 auto;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent, #e8c760);
}

.jay-radio-dock__btn {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--muted, #999);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.jay-radio-dock__btn:hover,
.jay-radio-dock__btn:focus-visible {
  color: var(--accent, #e8c760);
  border-color: var(--border, #333);
  background: rgba(255, 255, 255, 0.05);
}

/* Height is set here rather than on the element so the popup document's own
   layout drives it — it renders scope, title, audio element, two control rows
   and the counter. Too short and the scrub row is cut off with no scrollbar
   to reveal it, which is how this fails silently. */
.jay-radio-dock__frame {
  display: block;
  width: 100%;
  height: 330px;
  border: 0;
}

@media (max-width: 560px) {
  .jay-radio-dock {
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-width: none;
    border-radius: 10px 10px 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
  }
  /* Phones give the page less room, and the panel is now full width, so the
     player has more horizontal space and needs less height. */
  .jay-radio-dock__frame {
    height: 300px;
  }
}

/* Respect the OS setting — the panel appears without motion for anyone who
   asked for that. No animation is defined above, so this is a guard for any
   added later rather than an override of something present. */
@media (prefers-reduced-motion: reduce) {
  .jay-radio-dock,
  .jay-radio-dock__btn {
    transition: none;
  }
}