/* Audio Layout Preview Component */

.audio-layout-wrapper {
  margin-top: 16px;
  background: #020617;
  box-shadow: 0 12px 30px rgba(0,0,0,0.6);
  font-size: 0.85rem;
}

.audio-layout-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  gap: 8px;
}

.audio-layout-title {
  font-size: 0.9rem;
  font-weight: 600;
}

.audio-layout-subtitle {
  font-size: 0.75rem;
  opacity: 0.7;
}

.audio-layout-toolbar {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.audio-layout-chip {
  flex: 1 1 0;
  min-width: 0;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid #4b5563;
  background: #020617;
  color: #e5e7eb;
  font-size: 0.75rem;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition:
    background 150ms ease,
    border-color 150ms ease,
    transform 100ms ease,
    box-shadow 100ms ease;
}

.audio-layout-chip:hover:not(.is-active) {
  background: #111827;
  border-color: #9ca3af;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}

.audio-layout-chip.is-active {
  background: linear-gradient(135deg, #3b82f6, #22c55e);
  border-color: transparent;
  color: #0b1120;
  box-shadow: 0 8px 22px rgba(37,99,235,0.6);
}

.audio-layout-canvas {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  border: 1px solid #1f2937;
  background:
    radial-gradient(circle at center, #1f2937, #020617 70%),
    url("data:image/svg+xml,%3Csvg width='160' height='160' viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='rgba(255,255,255,0.05)' stroke-width='0.5'%3E%3Cpath d='M0 20.5h160M0 40.5h160M0 60.5h160M0 80.5h160M0 100.5h160M0 120.5h160M0 140.5h160M20.5 0v160M40.5 0v160M60.5 0v160M80.5 0v160M100.5 0v160M120.5 0v160M140.5 0v160'/%3E%3C/g%3E%3C/svg%3E");
  overflow: hidden;
  margin-top: 6px;
}

.audio-layout-listener {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  left: 50%;
  top: 70%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 30% 30%, #e5e7eb, #64748b);
  box-shadow:
    0 0 0 1px rgba(15,23,42,0.9),
    0 10px 25px rgba(15,23,42,0.95);
  pointer-events: none;
}

/* Furniture */

.audio-layout-furniture {
  position: absolute;
  transform: translate(-50%, -50%);
  background: rgb(136 136 136 / 0%);
  border-radius: 6px;
  border: 1px solid #1e293b;
  box-shadow: 0 5px 14px rgba(15,23,42,0.9);
  opacity: 0;
  transition:
    opacity 200ms ease-out,
    transform 200ms ease-out,
    left 200ms ease-out,
    top 200ms ease-out,
    width 200ms ease-out,
    height 200ms ease-out;
}

.audio-layout-furniture-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #FFF;
  opacity: 0.9;
}

/* Speakers */

.audio-layout-speaker {
  position: absolute;
  border-radius: 50%;
  background: #318cd8;
  box-shadow:
    0 0 0 1px rgba(15,23,42,0.9),
    0 6px 16px rgba(15,23,42,0.9);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transition:
    transform 200ms ease-out,
    opacity 200ms ease-out,
    left 200ms ease-out,
    top 200ms ease-out;
  cursor: pointer;
}

.audio-layout-speaker-label {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.55rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.7;
  pointer-events: none;
}

/* Hover radius */

.audio-layout-speaker-radius {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(59,130,246,0.5);
  opacity: 0;
  transform: scale(0.7);
  transform-origin: center;
  transition:
    opacity 220ms ease-out,
    transform 220ms ease-out;
  pointer-events: none;
}

.audio-layout-speaker:hover .audio-layout-speaker-radius {
  opacity: 0.9;
  transform: scale(var(--radius-scale, 4));
}

/* 3s pulse on layout change */

@keyframes audioLayoutSpeakerPulse {
  0% {
    box-shadow:
      0 0 0 0 rgba(59,130,246,0.65),
      0 6px 16px rgba(15,23,42,0.95);
  }
  40% {
    box-shadow:
      0 0 0 45px rgba(59,130,246,0),
      0 6px 16px rgba(15,23,42,0.95);
  }
  80% {
    box-shadow:
      0 0 0 70px rgba(59,130,246,0),
      0 6px 16px rgba(15,23,42,0.95);
  }
  100% {
    box-shadow:
      0 0 0 0 rgba(59,130,246,0),
      0 6px 16px rgba(15,23,42,0.95);
  }
}

.audio-layout-speaker.is-pulsing {
  animation: audioLayoutSpeakerPulse 3s ease-out;
}

.audio-layout-footer {
  margin-top: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  opacity: 0.75;
}