/*
 * AGFO Music Studio — floating post audio player
 * 1.17.2 compact icon bar + separated prompt controls + duplicate/collision guard.
 *
 * Layout rules use .agfo-ms-floating-audio as a parent qualifier on purpose:
 * class-agfo-ms-post-audio.php prints a critical inline stylesheet through
 * wp_add_inline_style() on this same handle, so it is emitted AFTER this file
 * and wins on equal specificity. The extra qualifier keeps the compact bar
 * intact without editing that PHP fallback.
 */

.agfo-ms-floating-audio {
  --agfo-ms-accent: var(--agfo-primary, #287557);
  --agfo-ms-accent-dark: #1f6249;
  --agfo-ms-ink: #172033;
  --agfo-ms-muted: #5b6779;
  --agfo-ms-surface: #ffffff;
  --agfo-ms-hover: #eef2f6;
  --agfo-ms-line: rgba(15, 23, 42, 0.10);
  --agfo-ms-shadow: 0 14px 40px rgba(15, 23, 42, 0.20), 0 3px 10px rgba(15, 23, 42, 0.07);
  --agfo-ms-btn: 40px;
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 999980;
  width: auto;
  max-width: calc(100vw - 36px);
  color: var(--agfo-ms-ink);
  font-family: var(--agfo-body-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif);
  line-height: 1.4;
}

.agfo-ms-floating-audio,
.agfo-ms-floating-audio * {
  box-sizing: border-box;
}

.agfo-ms-floating-audio [hidden] {
  display: none !important;
}

.agfo-ms-floating-audio button {
  font: inherit;
  border: 0;
  cursor: pointer;
}

/* ── Legacy nodes kept in the DOM but not part of the compact bar ───────── */

.agfo-ms-floating-audio .agfo-ms-floating-audio__prompt-icon,
.agfo-ms-floating-audio .agfo-ms-floating-audio__prompt-copy,
.agfo-ms-floating-audio .agfo-ms-floating-audio__header,
.agfo-ms-floating-audio .agfo-ms-floating-audio__eyebrow,
.agfo-ms-floating-audio .agfo-ms-floating-audio__title,
.agfo-ms-floating-audio .agfo-ms-floating-audio__time,
.agfo-ms-floating-audio .agfo-ms-floating-audio__seek,
.agfo-ms-floating-audio .agfo-ms-floating-audio__volume,
.agfo-ms-floating-audio .agfo-ms-floating-audio__channel-note,
.agfo-ms-floating-audio .agfo-ms-floating-audio__prompt-decline {
  display: none !important;
}

/* ── Shared button shape ────────────────────────────────────────────────── */

.agfo-ms-floating-audio .agfo-ms-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--agfo-ms-btn);
  height: var(--agfo-ms-btn);
  padding: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--agfo-ms-muted);
  transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}

.agfo-ms-floating-audio .agfo-ms-btn svg {
  width: 20px;
  height: 20px;
  display: block;
  pointer-events: none;
}

.agfo-ms-floating-audio .agfo-ms-btn:hover,
.agfo-ms-floating-audio .agfo-ms-btn:focus-visible {
  background: var(--agfo-ms-hover);
  color: var(--agfo-ms-ink);
}

.agfo-ms-floating-audio .agfo-ms-btn:focus-visible {
  outline: 2px solid var(--agfo-ms-accent);
  outline-offset: 2px;
}

.agfo-ms-floating-audio .agfo-ms-btn:active {
  transform: scale(0.94);
}

.agfo-ms-floating-audio .agfo-ms-btn:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

/* Skip buttons carry a small numeral inside the arc. */
.agfo-ms-floating-audio .agfo-ms-btn--skip {
  position: relative;
}

.agfo-ms-floating-audio .agfo-ms-btn--skip i {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: -0.02em;
  padding-top: 2px;
}

/* Screen-reader-only text for buttons that show icons only. */
.agfo-ms-floating-audio .agfo-ms-sr {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ── Opening strip: two independent controls, never a button on a card ─── */

.agfo-ms-floating-audio .agfo-ms-floating-audio__prompt {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: auto;
  max-width: calc(100vw - 36px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  animation: agfo-ms-float-enter 200ms ease-out both;
}

/* The server keeps an actions wrapper for backward compatibility. Flatten it
 * so Dinle and Kapat are true sibling controls instead of a dark button being
 * visually nested on top of a second white card/button surface. */
.agfo-ms-floating-audio .agfo-ms-floating-audio__prompt-actions {
  display: contents;
  margin: 0;
  padding: 0;
}

.agfo-ms-floating-audio .agfo-ms-floating-audio__prompt-accept {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px 0 16px;
  border-radius: 999px;
  background: var(--agfo-ms-accent);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.22);
  pointer-events: auto;
  order: 1;
  transition: filter 140ms ease, transform 140ms ease;
}

.agfo-ms-floating-audio .agfo-ms-floating-audio__prompt-accept svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.agfo-ms-floating-audio .agfo-ms-floating-audio__prompt-accept:hover,
.agfo-ms-floating-audio .agfo-ms-floating-audio__prompt-accept:focus-visible {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.agfo-ms-floating-audio .agfo-ms-floating-audio__prompt-accept:focus-visible {
  outline: 3px solid rgba(40, 117, 87, 0.28);
  outline-offset: 2px;
}

/* Close is a separate white circle, not the background behind Dinle. */
.agfo-ms-floating-audio .agfo-ms-floating-audio__prompt-close {
  position: static;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--agfo-ms-line);
  border-radius: 50%;
  background: var(--agfo-ms-surface);
  color: var(--agfo-ms-muted);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
  pointer-events: auto;
  order: 2;
  font-size: 0;
}

/* ── Collapsed launcher: round ▶ ────────────────────────────────────────── */

.agfo-ms-floating-audio .agfo-ms-floating-audio__launcher {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--agfo-ms-accent);
  color: #fff;
  box-shadow: 0 12px 30px rgba(40, 117, 87, 0.34);
  transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
}

.agfo-ms-floating-audio .agfo-ms-floating-audio__launcher svg {
  width: 24px;
  height: 24px;
}

.agfo-ms-floating-audio .agfo-ms-floating-audio__launcher-icon {
  display: none;
}

.agfo-ms-floating-audio .agfo-ms-floating-audio__launcher:hover,
.agfo-ms-floating-audio .agfo-ms-floating-audio__launcher:focus-visible {
  filter: brightness(1.06);
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(40, 117, 87, 0.4);
}

.agfo-ms-floating-audio .agfo-ms-floating-audio__launcher:focus-visible {
  outline: 3px solid rgba(40, 117, 87, 0.3);
  outline-offset: 3px;
}

/* ── Open state: one-row icon bar ───────────────────────────────────────── */

.agfo-ms-floating-audio .agfo-ms-floating-audio__panel {
  display: flex;
  align-items: center;
  gap: 4px;
  width: auto;
  max-width: calc(100vw - 36px);
  padding: 6px;
  border: 1px solid var(--agfo-ms-line);
  border-radius: 999px;
  background: var(--agfo-ms-surface);
  box-shadow: var(--agfo-ms-shadow);
  animation: agfo-ms-float-enter 180ms ease-out both;
}

.agfo-ms-floating-audio .agfo-ms-floating-audio__play {
  position: static;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--agfo-ms-accent);
  color: #fff;
  box-shadow: 0 6px 16px rgba(40, 117, 87, 0.28);
}

.agfo-ms-floating-audio .agfo-ms-floating-audio__play svg {
  width: 20px;
  height: 20px;
}

.agfo-ms-floating-audio .agfo-ms-floating-audio__play:hover,
.agfo-ms-floating-audio .agfo-ms-floating-audio__play:focus-visible {
  background: var(--agfo-ms-accent);
  color: #fff;
  filter: brightness(1.07);
}

/* Divider before the channel group so the bar stays readable. */
.agfo-ms-floating-audio .agfo-ms-sep {
  flex: 0 0 auto;
  width: 1px;
  height: 22px;
  margin: 0 2px;
  background: var(--agfo-ms-line);
}

/* Channel toggles: icon only, state by colour. */
.agfo-ms-floating-audio .agfo-ms-floating-audio__channel-toggle {
  min-height: 0;
  font-size: 0;
  border: 0;
}

.agfo-ms-floating-audio .agfo-ms-floating-audio__channel-toggle.is-on {
  background: rgba(40, 117, 87, 0.12);
  color: var(--agfo-ms-accent-dark);
}

.agfo-ms-floating-audio .agfo-ms-floating-audio__channel-toggle.is-off {
  background: transparent;
  color: #a4adba;
}

.agfo-ms-floating-audio .agfo-ms-floating-audio__channel-toggle.is-off:hover,
.agfo-ms-floating-audio .agfo-ms-floating-audio__channel-toggle.is-off:focus-visible {
  background: var(--agfo-ms-hover);
  color: var(--agfo-ms-muted);
}

/* The struck-through slash shown when a channel or the volume is off. */
.agfo-ms-floating-audio .agfo-ms-slash {
  opacity: 0;
}

.agfo-ms-floating-audio .is-off .agfo-ms-slash,
.agfo-ms-floating-audio .is-muted .agfo-ms-slash {
  opacity: 1;
}

.agfo-ms-floating-audio .agfo-ms-floating-audio__mute {
  padding: 0;
  font-size: 0;
}

.agfo-ms-floating-audio .agfo-ms-floating-audio__mute.is-muted {
  color: #b42318;
}

.agfo-ms-floating-audio .agfo-ms-floating-audio__close {
  position: static;
  width: var(--agfo-ms-btn);
  height: var(--agfo-ms-btn);
  border-radius: 50%;
  background: transparent;
  color: var(--agfo-ms-muted);
  font-size: 0;
}

/* Legacy wrappers become transparent flex pass-throughs. */
.agfo-ms-floating-audio .agfo-ms-floating-audio__controls,
.agfo-ms-floating-audio .agfo-ms-floating-audio__channel-mixer,
.agfo-ms-floating-audio .agfo-ms-floating-audio__channel-buttons,
.agfo-ms-floating-audio .agfo-ms-floating-audio__volume-row {
  display: contents;
  margin: 0;
  padding: 0;
  border: 0;
  gap: 0;
}

/* ── Error state ────────────────────────────────────────────────────────── */

.agfo-ms-floating-audio.has-error .agfo-ms-floating-audio__play {
  background: #b42318;
  box-shadow: 0 6px 16px rgba(180, 35, 24, 0.28);
}

/* ── Hidden media elements ──────────────────────────────────────────────── */

.agfo-ms-floating-audio audio[data-agfo-ms-audio],
.agfo-ms-floating-audio audio[data-agfo-ms-audio-narration],
.agfo-ms-floating-audio audio[data-agfo-ms-audio-music] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ── No-JS fallback ─────────────────────────────────────────────────────── */

.agfo-ms-floating-audio__noscript {
  display: grid;
  gap: 8px;
  width: min(320px, calc(100vw - 36px));
  padding: 14px;
  border: 1px solid var(--agfo-ms-line);
  border-radius: 16px;
  background: var(--agfo-ms-surface);
  box-shadow: var(--agfo-ms-shadow);
}

.agfo-ms-floating-audio__noscript audio {
  width: 100%;
}

/* ── Motion / responsive ────────────────────────────────────────────────── */

@keyframes agfo-ms-float-enter {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .agfo-ms-floating-audio .agfo-ms-floating-audio__prompt,
  .agfo-ms-floating-audio .agfo-ms-floating-audio__panel {
    animation: none;
  }
  .agfo-ms-floating-audio .agfo-ms-btn,
  .agfo-ms-floating-audio .agfo-ms-floating-audio__launcher {
    transition: none;
  }
}

@media (max-width: 600px) {
  .agfo-ms-floating-audio {
    --agfo-ms-btn: 38px;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    max-width: calc(100vw - 24px);
  }

  .agfo-ms-floating-audio .agfo-ms-floating-audio__prompt,
  .agfo-ms-floating-audio .agfo-ms-floating-audio__panel {
    max-width: calc(100vw - 24px);
  }

  .agfo-ms-floating-audio .agfo-ms-floating-audio__play {
    width: 42px;
    height: 42px;
  }
}

@media (max-width: 380px) {
  .agfo-ms-floating-audio {
    --agfo-ms-btn: 36px;
  }
  .agfo-ms-floating-audio .agfo-ms-floating-audio__panel {
    gap: 2px;
    padding: 5px;
  }
  .agfo-ms-floating-audio .agfo-ms-sep {
    margin: 0 1px;
  }
}