.mithaq-ambient-sound {
  --mp-ambient-paper: #f5f1e9;
  --mp-ambient-pitch: #181a15;
  --mp-ambient-green: #465b4b;
  --mp-ambient-sage: #687662;
  --mp-ambient-sand: #cdb389;
  position: fixed;
  z-index: 99990;
  bottom: max(1rem, env(safe-area-inset-bottom));
  font-family: Poppins, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.mithaq-ambient-sound.is-right { right: max(1rem, env(safe-area-inset-right)); }
.mithaq-ambient-sound.is-left { left: max(1rem, env(safe-area-inset-left)); }

.mithaq-ambient-sound__toggle {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: .62rem;
  padding: .65rem .86rem;
  border: 1px solid rgba(245, 241, 233, .28);
  border-radius: 999px;
  background: rgba(24, 26, 21, .9);
  color: var(--mp-ambient-paper);
  box-shadow: 0 .6rem 1.8rem rgba(0, 0, 0, .18);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font: inherit;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .07em;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.mithaq-ambient-sound__toggle:hover {
  border-color: rgba(205, 179, 137, .72);
  background: rgba(70, 91, 75, .96);
}

.mithaq-ambient-sound__toggle:focus-visible {
  outline: 3px solid var(--mp-ambient-sand);
  outline-offset: 3px;
}

.mithaq-ambient-sound__toggle:disabled { cursor: wait; opacity: .72; }

.mithaq-ambient-sound__mark {
  width: .76rem;
  height: .76rem;
  flex: 0 0 auto;
  border: 1px solid currentColor;
  transform: rotate(45deg);
}

.mithaq-ambient-sound.is-playing .mithaq-ambient-sound__toggle {
  border-color: rgba(104, 118, 98, .9);
  background: var(--mp-ambient-paper);
  color: var(--mp-ambient-pitch);
}

.mithaq-ambient-sound.is-playing .mithaq-ambient-sound__mark {
  background: var(--mp-ambient-green);
  box-shadow: inset 0 0 0 2px var(--mp-ambient-paper);
}

.mithaq-ambient-sound.has-error .mithaq-ambient-sound__toggle { opacity: .62; }

@media (max-width: 540px) {
  .mithaq-ambient-sound { bottom: max(.72rem, env(safe-area-inset-bottom)); }
  .mithaq-ambient-sound.is-right { right: max(.72rem, env(safe-area-inset-right)); }
  .mithaq-ambient-sound.is-left { left: max(.72rem, env(safe-area-inset-left)); }
}

@media (prefers-reduced-motion: reduce) {
  .mithaq-ambient-sound__toggle { transition: none; }
}