/* Emote soundtrack widget. All controls use the snd- prefix so the shared
   floating interface remains isolated from page modules. */
.snd-root {
  position: fixed;
  right: 24px;
  bottom: 210px;
  z-index: 989;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  font-family: 'Apercu', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  transition: bottom .35s cubic-bezier(.2, .8, .2, 1), opacity .25s ease;
}
.snd-root.snd-dodge-hide {
  opacity: 0;
  pointer-events: none;
}
.snd-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #191919;
  color: #f6f4ee;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(25, 25, 25, .28);
  opacity: .92;
  transition: transform .18s ease, opacity .18s ease;
  animation: snd-glow 10s ease-in-out -5s infinite;
}
@keyframes snd-glow {
  0%, 100% { box-shadow: 0 4px 16px rgba(25, 25, 25, .28); }
  50% { box-shadow: 0 0 0 7px rgba(98, 214, 177, .30), 0 0 30px 12px rgba(98, 214, 177, .42), 0 4px 16px rgba(25, 25, 25, .22); }
}
.snd-chip:hover { transform: translateY(-2px); opacity: 1; }
.snd-chip:focus-visible,
.snd-mood:focus-visible,
.snd-off:focus-visible { outline: 2px solid #62d6b1; outline-offset: 3px; }
.snd-eq {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 16px;
}
.snd-eq span {
  width: 3.5px;
  height: 6px;
  border-radius: 2px;
  background: rgba(246, 244, 238, .75);
}
.snd-eq span:nth-child(2) { height: 11px; }
.snd-eq span:nth-child(3) { height: 8px; }
.snd-chip.snd-playing .snd-eq span { animation: snd-eq 1s ease-in-out infinite; }
.snd-chip.snd-playing .snd-eq span:nth-child(2) { animation-delay: .2s; }
.snd-chip.snd-playing .snd-eq span:nth-child(3) { animation-delay: .4s; }
@keyframes snd-eq {
  0%, 100% { height: 4px; }
  50% { height: 14px; }
}
.snd-panel {
  display: none;
  width: 250px;
  padding: 16px;
  border: 1px solid #191919;
  border-radius: 16px;
  background: #f6f4ee;
  box-shadow: 0 10px 34px rgba(25, 25, 25, .18);
}
.snd-panel.snd-open { display: block; }
.snd-eyebrow {
  margin: 0 0 10px;
  color: #191919;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.2;
  opacity: .55;
  text-transform: uppercase;
}
.snd-mood {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 11px;
  padding: 10px 11px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: #191919;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: background .15s;
}
.snd-mood:hover { background: rgba(25, 25, 25, .05); }
.snd-mood.snd-active { border-color: #191919; background: #fff; }
.snd-dot {
  width: 14px;
  height: 14px;
  flex: none;
  border: 1px solid rgba(25, 25, 25, .25);
  border-radius: 50%;
}
.snd-mood b { display: block; font-size: 14px; line-height: 1.2; }
.snd-mood small { display: block; font-size: 12px; line-height: 1.3; opacity: .6; }
.snd-off {
  width: 100%;
  margin-top: 8px;
  padding: 11px 11px 4px;
  border: 0;
  border-top: 1px solid rgba(25, 25, 25, .15);
  background: transparent;
  color: #191919;
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  letter-spacing: .05em;
  opacity: .65;
  text-align: left;
}
.snd-off:hover { opacity: 1; }
.snd-toast {
  position: fixed;
  bottom: 26px;
  left: 50%;
  z-index: 988;
  max-width: min(88vw, 430px);
  padding: 14px 22px;
  border-radius: 12px;
  background: #191919;
  box-shadow: 0 10px 30px rgba(25, 25, 25, .3);
  color: #f6f4ee;
  font-size: 14.5px;
  line-height: 1.4;
  text-align: center;
  transform: translate(-50%, 140%);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.snd-toast.snd-show { transform: translate(-50%, 0); }
.snd-toast b { color: #62d6b1; }
html.mnav-open .snd-root { opacity: 0; pointer-events: none; }
@media (max-width: 640px) {
  .snd-root { right: 16px; bottom: 108px; }
  .snd-toast {
    right: auto;
    bottom: 84px;
    left: 16px;
    max-width: calc(100vw - 112px);
    text-align: left;
    transform: translate(0, 140%);
  }
  .snd-toast.snd-show { transform: translate(0, 0); }
  body:has(.ae-panel.ae-on) .snd-root { opacity: 0; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
  .snd-chip,
  .snd-chip.snd-playing .snd-eq span { animation: none; }
  .snd-root { transition: opacity .15s ease; }
  .snd-toast { transition: opacity .15s ease; }
}