/* QMAX V139.4 — Premium Shawn + Naya conversation waveform.
   Isolated visual restoration only. No player or layout architecture changes. */

.hmc-conversation-wave {
  position: relative;
  width: min(34%, 330px);
  min-width: 250px;
  height: 72px;
  margin: clamp(13px, 1.5vw, 20px) auto clamp(12px, 1.4vw, 18px);
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  color: rgba(247, 243, 249, .82);
  pointer-events: none;
  filter: drop-shadow(0 3px 12px rgba(0, 0, 0, .32));
}

.hmc-conversation-wave__svg {
  grid-column: 1 / -1;
  grid-row: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hmc-conversation-wave__line {
  filter: url(#hmcWaveGlow);
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-origin: center;
  animation: hmcWaveBreathe 5.4s ease-in-out infinite;
}

.hmc-conversation-wave__line--right {
  animation-delay: -2.7s;
}

.hmc-conversation-wave__pulse {
  fill: #f9f5fb;
  opacity: .58;
  filter: drop-shadow(0 0 7px rgba(177, 107, 225, .78));
  animation: hmcWavePulse 3.8s ease-in-out infinite;
}

.hmc-conversation-wave__pulse--right {
  animation-delay: -1.9s;
}

.hmc-conversation-wave__emblem {
  grid-column: 2;
  grid-row: 1;
  place-self: center;
  position: relative;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(234, 225, 241, .64);
  border-radius: 50%;
  background:
    radial-gradient(circle at 40% 30%, rgba(255,255,255,.17), transparent 33%),
    linear-gradient(180deg, rgba(39, 24, 48, .88), rgba(11, 8, 15, .92));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 0 0 4px rgba(121, 59, 164, .08),
    0 0 16px rgba(149, 76, 204, .20);
  animation: hmcEmblemBreathe 4.8s ease-in-out infinite;
}

.hmc-conversation-wave__diamond {
  position: absolute;
  width: 13px;
  height: 13px;
  transform: rotate(45deg);
  border: 1px solid rgba(224, 202, 239, .92);
  background: linear-gradient(145deg, rgba(187, 115, 230, .58), rgba(67, 28, 91, .88));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20);
}

.hmc-conversation-wave__core {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px rgba(190, 122, 236, .95);
}

.hmc-conversation-wave__label {
  grid-row: 1;
  position: relative;
  z-index: 2;
  align-self: center;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 8px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .16em;
  color: rgba(238, 231, 242, .66);
}

.hmc-conversation-wave__label--shawn {
  grid-column: 1;
  justify-self: start;
}

.hmc-conversation-wave__label--naya {
  grid-column: 3;
  justify-self: end;
}

/* When the existing stage is playing, the same visual becomes more alive.
   This uses the stage.playing class already maintained by app.js. */
.stage.playing .hmc-conversation-wave__line {
  animation-duration: 2.2s;
  opacity: 1;
}

.stage.playing .hmc-conversation-wave__line--left {
  animation-name: hmcWaveSpeakLeft;
}

.stage.playing .hmc-conversation-wave__line--right {
  animation-name: hmcWaveSpeakRight;
}

.stage.playing .hmc-conversation-wave__pulse {
  opacity: .92;
  animation-duration: 1.35s;
}

.stage.playing .hmc-conversation-wave__emblem {
  animation-duration: 2.3s;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 0 0 4px rgba(121, 59, 164, .11),
    0 0 22px rgba(149, 76, 204, .30);
}

@keyframes hmcWaveBreathe {
  0%, 100% { opacity: .56; transform: scaleY(.90); }
  50% { opacity: .82; transform: scaleY(1.07); }
}

@keyframes hmcWaveSpeakLeft {
  0%, 100% { transform: scaleY(.82); opacity: .72; }
  28% { transform: scaleY(1.28); opacity: .98; }
  57% { transform: scaleY(.96); opacity: .82; }
  78% { transform: scaleY(1.16); opacity: .94; }
}

@keyframes hmcWaveSpeakRight {
  0%, 100% { transform: scaleY(.94); opacity: .78; }
  24% { transform: scaleY(1.14); opacity: .92; }
  52% { transform: scaleY(.84); opacity: .72; }
  76% { transform: scaleY(1.30); opacity: 1; }
}

@keyframes hmcWavePulse {
  0%, 100% { transform: scale(.72); opacity: .34; }
  50% { transform: scale(1.22); opacity: .86; }
}

@keyframes hmcEmblemBreathe {
  0%, 100% { transform: scale(.96); }
  50% { transform: scale(1.03); }
}

@media (max-width: 900px) {
  .hmc-conversation-wave {
    width: min(42%, 310px);
    min-width: 235px;
    height: 66px;
  }
}

@media (max-width: 620px) {
  .hmc-conversation-wave {
    width: min(72%, 290px);
    min-width: 220px;
    height: 61px;
    margin-top: 11px;
    margin-bottom: 10px;
  }

  .hmc-conversation-wave__label {
    font-size: 7px;
    letter-spacing: .12em;
  }

  .hmc-conversation-wave__emblem {
    width: 29px;
    height: 29px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hmc-conversation-wave__line,
  .hmc-conversation-wave__pulse,
  .hmc-conversation-wave__emblem {
    animation: none !important;
  }

  .hmc-conversation-wave__line {
    opacity: .72;
  }

  .hmc-conversation-wave__pulse {
    opacity: .64;
  }
}