.wedding-sound-panel {
  position: fixed;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: max(18px, env(safe-area-inset-bottom, 0px));
  z-index: 65;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 9px;
  max-width: calc(100vw - 32px);
}

.wedding-sound-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 104px;
  padding: 11px 16px;
  border: 1px solid #cbb17a99;
  border-radius: 24px;
  background: #faf5e9f2;
  color: #62513b;
  font: 12px/1.6 var(--sans, sans-serif);
  letter-spacing: .4px;
  box-shadow: 0 3px 15px #10233b18;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.wedding-sound-toggle::before {
  content: '';
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  margin-right: 7px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4V5ZM15 8a6 6 0 0 1 0 8M18 5a10 10 0 0 1 0 14'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4V5ZM15 8a6 6 0 0 1 0 8M18 5a10 10 0 0 1 0 14'/%3E%3C/svg%3E") center / contain no-repeat;
}

.wedding-sound-toggle[data-sound="off"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4V5ZM16 9l5 6M21 9l-5 6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4V5ZM16 9l5 6M21 9l-5 6'/%3E%3C/svg%3E");
}

.wedding-sound-toggle[data-sound="on"] { background: #182c45f2; color: #f1dfbd; }
.wedding-sound-toggle[data-sound="error"] { color: #8a5d47; }
.wedding-sound-toggle:focus-visible { outline: 2px solid #b7975b; outline-offset: 4px; }
.wedding-sound-toggle:hover { border-color: #b69a62; }

.wedding-sound-notice {
  width: min(265px, calc(100vw - 40px));
  margin: 0;
  padding: 12px 15px;
  border: 1px solid #c6b18377;
  border-radius: 5px;
  background: #fbf7eef7;
  color: #625440;
  font: 12px/1.8 var(--sans, sans-serif);
  box-shadow: 0 3px 16px #172b4920;
}

.wedding-sound-notice[hidden] { display: none; }

@media (max-width: 720px) {
  .wedding-sound-panel {
    right: max(13px, env(safe-area-inset-right, 0px));
    bottom: calc(var(--mobile-nav-height, 66px) + var(--mobile-nav-safe, env(safe-area-inset-bottom, 0px)) + 12px);
  }
  .wedding-sound-toggle { min-height: 44px; padding: 10px 14px; }
}