/* Right-edge soundtrack tab, based on the minimized and expanded Figma states. */
.edge-audio {
  position: fixed;
  z-index: 411;
  top: clamp(20px, calc(50% + 116px), calc(100dvh - 70px));
  right: 0;
  box-sizing: border-box;
  width: 51px;
  height: 50px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-right: 0;
  border-radius: 25px 0 0 25px;
  background: var(--bg-sunken);
  color: var(--text-accent, var(--accent));
  font-family: 'Kode Mono', ui-monospace, monospace;
  transition: width 240ms ease-out;
}

[data-theme="light"] .edge-audio { border-color: rgba(0, 0, 0, 0.3); }

.edge-audio.is-expanded { width: 211px; }

.edge-audio-credit {
  position: absolute;
  top: 0;
  right: 50px;
  bottom: 0;
  left: 11px;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 120ms ease;
}

.edge-audio.is-expanded .edge-audio-credit {
  opacity: 1;
  transition-delay: 100ms;
}

.edge-audio-title {
  display: block;
  overflow: hidden;
  color: var(--text-accent, var(--accent));
  background: transparent;
  font-size: 10px;
  font-weight: 400;
  line-height: normal;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.edge-audio-title:hover,
.edge-audio-title:focus-visible {
  color: var(--text-accent, var(--accent));
  background: transparent;
  text-decoration: underline;
}
.edge-audio-title:focus-visible { outline: 2px solid var(--text-accent, var(--accent)); outline-offset: 2px; }

.edge-audio-toggle {
  position: absolute;
  top: 9px;
  right: 11px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--text-accent, var(--accent));
  border-radius: 50%;
  background: rgb(63 232 61 / 5%);
  color: var(--text-accent, var(--accent));
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}

.edge-audio-toggle:hover,
.edge-audio-toggle:focus-visible { background: rgb(63 232 61 / 12%); }

.edge-audio-toggle:focus-visible {
  outline: 2px solid var(--text-primary, var(--text));
  outline-offset: 3px;
}

.edge-audio-toggle:disabled { opacity: 0.5; cursor: not-allowed; }
.edge-audio-toggle::after { content: ''; position: absolute; inset: -10px; }
.edge-audio-icon--stop,
.edge-audio-toggle.is-playing .edge-audio-icon--play { display: none; }
.edge-audio-toggle.is-playing .edge-audio-icon--stop { display: block; }

.edge-audio-frame {
  position: absolute;
  left: -9999px;
  width: 300px;
  height: 166px;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* Sound wave above the tab while the soundtrack plays (Figma node 1177:3566). */
.edge-audio-wave {
  position: fixed;
  z-index: 411;
  top: calc(clamp(20px, calc(50% + 116px), calc(100dvh - 70px)) - 26px);
  right: 14px;
  display: flex;
  gap: 1px;
  align-items: center;
  height: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

.edge-audio-wave.is-playing { opacity: 1; }

.edge-audio-wave span {
  width: 1.5px;
  height: var(--h);
  background: #c3c3c3;
  transform: scaleY(0.35);
}

.edge-audio-wave.is-playing span {
  animation: edge-audio-wave 900ms ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -130ms);
}

[data-theme="light"] .edge-audio-wave span { background: rgba(0, 0, 0, 0.4); }

@keyframes edge-audio-wave {
  from { transform: scaleY(0.35); }
  to { transform: scaleY(1); }
}

@media (max-width: 768px) {
  /* The human/AI toggle is hidden at this width, so the tab sits by itself. */
  .edge-audio { top: 50%; transform: translateY(-50%); }
  .edge-audio-wave { top: calc(50% - 51px); }
}

@media (prefers-reduced-motion: reduce) {
  .edge-audio,
  .edge-audio-credit,
  .edge-audio-toggle { transition: none; }
  .edge-audio-wave.is-playing span { animation: none; transform: none; }
}