/* ============================================================
   radio-fab.css · Floating "Radio Kibuț" mini-player
   ------------------------------------------------------------
   A persistent listen button that joins the shared bottom-right
   floating-toolbar stack. Click to play/pause the live stream
   in-page; a compact panel slides out to the left with an
   animated equalizer, station name, LIVE badge, volume + a link
   to the full station site.
   Palette matches the site tokens (essex / chantilly / taupe).
   ============================================================ */

.radio-fab-wrap {
  position: relative;
  display: inline-flex;
  /* so the panel can anchor to the button regardless of stack height */
}

/* The button reuses .floating-btn sizing/border; this adds the
   playing state + a subtle "broadcast" identity. */
.radio-fab.is-playing {
  background: var(--essex);
  color: var(--chantilly-pure);
  border-color: var(--essex);
}
.radio-fab.is-playing:hover {
  background: var(--essex-deep, #16201b);
  color: var(--chantilly-pure);
}
/* Pulsing ring while live */
.radio-fab.is-playing::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 2px solid var(--rustic-taupe);
  border-radius: inherit;
  opacity: 0;
  animation: radio-pulse 1.8s ease-out infinite;
  pointer-events: none;
}
@keyframes radio-pulse {
  0%   { transform: scale(0.9); opacity: 0.55; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* Tiny "LIVE" dot on the button corner while playing */
.radio-fab-dot {
  position: absolute;
  top: 6px; right: 6px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #bf6a3a;
  box-shadow: 0 0 0 2px var(--chantilly-pure);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.radio-fab.is-playing .radio-fab-dot {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--essex);
  animation: radio-blink 1.6s steps(1, end) infinite;
}
@keyframes radio-blink { 0%,60% { opacity: 1; } 61%,100% { opacity: 0.25; } }

/* ---------- Flyout panel ---------- */
.radio-panel {
  position: absolute;
  right: calc(100% + 12px);
  bottom: 0;
  width: 244px;
  background: var(--chantilly-pure);
  border: 1px solid var(--rustic-taupe);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
  padding: 16px 16px 14px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  z-index: 1;
}
.radio-fab-wrap.is-open .radio-panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
/* Desktop (mouse): reveal the panel on hover/focus so volume + now-playing
   stay reachable, without it sticking open after you tap to play. */
@media (hover: hover) and (pointer: fine) {
  .radio-fab-wrap:hover .radio-panel,
  .radio-fab-wrap:focus-within .radio-panel {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }
}

.radio-panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.radio-panel-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: #bf6a3a;
}
.radio-panel-badge::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #bf6a3a;
}
.radio-fab-wrap.is-playing-state .radio-panel-badge::before {
  animation: radio-blink 1.6s steps(1, end) infinite;
}
.radio-panel-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--essex);
  letter-spacing: 0.01em;
}
.radio-panel-sub {
  font-size: 0.72rem;
  color: var(--rustic-taupe);
  margin: -8px 0 12px;
}

/* Equalizer */
.radio-eq {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 22px;
  margin: 0 0 14px;
}
.radio-eq span {
  display: block;
  width: 4px;
  height: 30%;
  background: var(--rustic-taupe);
  opacity: 0.5;
}
.radio-fab-wrap.is-playing-state .radio-eq span {
  opacity: 1;
  animation: radio-eq 0.9s ease-in-out infinite;
}
.radio-fab-wrap.is-playing-state .radio-eq span:nth-child(2) { animation-delay: 0.15s; }
.radio-fab-wrap.is-playing-state .radio-eq span:nth-child(3) { animation-delay: 0.30s; }
.radio-fab-wrap.is-playing-state .radio-eq span:nth-child(4) { animation-delay: 0.45s; }
.radio-fab-wrap.is-playing-state .radio-eq span:nth-child(5) { animation-delay: 0.60s; }
@keyframes radio-eq {
  0%, 100% { height: 25%; }
  50%      { height: 100%; }
}

.radio-panel-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}
.radio-play-btn {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 40px; height: 40px;
  flex-shrink: 0;
  background: var(--essex);
  color: var(--chantilly-pure);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.radio-play-btn:hover { background: #5e5043; transform: scale(1.05); }
.radio-play-btn:focus-visible { outline: 2px solid var(--essex); outline-offset: 3px; }
.radio-play-btn svg { display: block; width: 16px; height: 16px; fill: currentColor; }

.radio-vol {
  flex: 1;
  width: 100%;
  accent-color: var(--rustic-taupe);
  cursor: pointer;
}

.radio-panel-foot {
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px solid var(--rustic-taupe-light, #d8cfc2);
}
.radio-panel-link {
  font-size: 0.72rem;
  color: var(--rustic-taupe);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.radio-panel-link:hover { color: var(--essex); text-decoration: underline; }

/* Phones: anchoring left of the button can run off-screen, so pin the panel
   as a compact card to the bottom-right, above the FAB stack. Width is capped
   to the viewport so it never overflows; larger touch targets. */
@media (max-width: 560px) {
  .radio-panel {
    position: fixed;
    right: 12px;
    left: auto;
    bottom: 78px;
    width: min(232px, calc(100vw - 32px));
    padding: 13px 13px 11px;
  }
  .radio-panel-head { margin-bottom: 8px; }
  .radio-panel-badge { font-size: 0.58rem; }
  .radio-panel-name { font-size: 0.86rem; }
  .radio-panel-sub { font-size: 0.66rem; margin: -6px 0 9px; }
  .radio-eq { height: 16px; margin-bottom: 10px; }
  .radio-play-btn { width: 38px; height: 38px; }
  .radio-play-btn svg { width: 14px; height: 14px; }
  .radio-panel-controls { gap: 9px; }
  .radio-panel-foot { margin-top: 9px; padding-top: 9px; }
  .radio-panel-link { font-size: 0.68rem; }
}

/* Respect reduced-motion · freeze the decorative animations. */
@media (prefers-reduced-motion: reduce) {
  .radio-fab.is-playing::after,
  .radio-fab.is-playing .radio-fab-dot,
  .radio-fab-wrap.is-playing-state .radio-panel-badge::before,
  .radio-fab-wrap.is-playing-state .radio-eq span {
    animation: none;
  }
}