/* ==========================================================
   Undangan Live: tombol musik latar mengambang.
   Tersembunyi kalau belum ada musik diunggah DAN bukan pemilik
   yang sedang mode edit (class inv-editing-audio dari edit.js).
   ========================================================== */
.inv-f-backsound {
  display: none;
  align-items: center;
  justify-content: center;
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9990;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(43, 38, 35, .82);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease;
}
.inv-f-backsound:active { transform: scale(.94); }

.inv-f-backsound.inv-sound-has-audio,
.inv-f-backsound.inv-editing-audio {
  display: flex;
}
/* Mode "Pratinjau (seperti tamu)" di editor: kalau belum ada musik
   diunggah, sembunyikan juga — supaya pratinjau benar-benar sama
   dengan yang dilihat tamu. */
body.inv-preview .inv-f-backsound.inv-editing-audio:not(.inv-sound-has-audio) {
  display: none;
}

.inv-f-backsound svg { width: 20px; height: 20px; }
.inv-f-backsound .inv-sound-icon-pause { display: none; }
.inv-f-backsound.inv-sound-playing .inv-sound-icon-play  { display: none; }
.inv-f-backsound.inv-sound-playing .inv-sound-icon-pause { display: block; }

.inv-f-backsound.inv-sound-playing svg {
  animation: inv-sound-spin 3.2s linear infinite;
}
@keyframes inv-sound-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Penanda kecil untuk pemilik saat mode edit & belum ada musik,
   supaya jelas ini tombol untuk "tambah musik", bukan sekadar hiasan. */
.inv-f-backsound.inv-editing-audio:not(.inv-sound-has-audio)::after {
  content: '+';
  position: absolute;
  top: -4px;
  right: -4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  color: var(--inv-accent-dark, #6f5540);
  font: 700 12px/16px sans-serif;
  text-align: center;
}