/* One live voice surface moves across Baize screens without restarting media. */

.live-voice-dock {
  --voice-level: .12;
  grid-column: 1 / -1;
  min-width: 0;
  height: 56px;
  padding: 7px 8px 7px 10px;
  display: grid;
  grid-template-columns: 34px minmax(92px, auto) minmax(50px, 1fr) 66px 54px;
  align-items: center;
  gap: 9px;
  overflow: hidden;
  border: 1px solid rgba(107, 104, 180, .16);
  border-radius: 22px;
  background: linear-gradient(110deg, rgba(238, 238, 249, .90), rgba(247, 248, 244, .86));
  contain: layout paint;
}

.live-voice-dock[hidden] { display: none; }

.live-voice-orb {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, rgba(255,255,255,.92), transparent 24%),
    radial-gradient(circle, #9998d2, #6562a9 66%, #4f4d8b);
  box-shadow: 0 5px 16px rgba(79, 77, 139, .20);
  transform: scale(calc(.90 + var(--voice-level) * .10));
  transition: transform 80ms linear, opacity 120ms ease;
}

.live-voice-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
  line-height: 1.2;
}

.live-voice-copy strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  font-weight: 680;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.live-voice-copy span {
  overflow: hidden;
  color: var(--mist);
  font-size: 10.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.live-voice-wave {
  min-width: 0;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(3px, .7vw, 7px);
  overflow: hidden;
}

.live-voice-wave span {
  width: clamp(3px, .42vw, 5px);
  height: 24px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: linear-gradient(#7774bd, #aaa9d7);
  transform: scaleY(calc(.14 + var(--voice-level) * var(--voice-scale, .75)));
  transform-origin: center;
  transition: transform 70ms linear, opacity 120ms ease;
  will-change: transform;
}

.live-voice-wave span:nth-child(1),
.live-voice-wave span:nth-child(7) { --voice-scale: .46; }
.live-voice-wave span:nth-child(2),
.live-voice-wave span:nth-child(6) { --voice-scale: .66; }
.live-voice-wave span:nth-child(3),
.live-voice-wave span:nth-child(5) { --voice-scale: .86; }
.live-voice-wave span:nth-child(4) { --voice-scale: 1; }

.live-voice-dock[data-activity="responding"] .live-voice-wave span {
  background: linear-gradient(#5f5ca7, #8886c7);
}

.live-voice-end {
  width: 54px;
  height: 44px;
  border: 0;
  border-radius: 18px;
  color: #fff;
  background: var(--aura-deep);
  font: inherit;
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
}

.live-voice-end:disabled { opacity: .46; cursor: default; }

.live-voice-catalog,
.live-voice-select {
  width: 66px; height: 44px; padding: 0 5px;
  border: 1px solid rgba(107, 104, 180, .18); border-radius: 14px;
  color: var(--aura-deep); background: rgba(255, 255, 252, .74);
  font: inherit; font-size: 10px; font-weight: 650;
}
.live-voice-catalog { cursor: pointer; }
.live-voice-catalog[hidden],
.live-voice-select[hidden] { display: none; }
.live-voice-catalog:disabled,
.live-voice-select:disabled { opacity: .46; cursor: default; }

.learning-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.learning-live-voice {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(107, 104, 180, .18);
  border-radius: 19px;
  color: var(--aura-deep);
  background: rgba(255, 255, 252, .68);
  font: inherit;
  font-size: 11px;
  font-weight: 650;
}

.learning-live-voice.recording { color: #fff; background: var(--aura-deep); }
.learning-live-voice.connecting { background: var(--aura-wash); }
.learning-live-voice:disabled { opacity: .46; }
.learning-live-voice-mount { width: min(100% - 24px, 980px); margin: 12px auto 0; }
.learning-live-voice-mount:empty { display: none; }
.learning-live-voice-mount .live-voice-dock { width: 100%; }

@media (max-width: 430px) {
  .live-voice-dock {
    height: 56px;
    grid-template-columns: 27px minmax(70px, auto) minmax(28px, 1fr) 58px 52px;
    gap: 4px;
    padding: 6px;
  }
  .live-voice-orb { width: 27px; height: 27px; }
  .live-voice-copy strong { font-size: 11.5px; }
  .live-voice-copy span { font-size: 10px; }
  .live-voice-end { width: 52px; height: 44px; border-radius: 22px; }
  .live-voice-catalog, .live-voice-select { width: 58px; padding: 0 3px; }
  .learning-live-voice { min-height: 44px; padding: 0 10px; }
}

@media (min-width: 760px) {
  .live-voice-dock {
    grid-template-columns: 38px minmax(150px, auto) minmax(150px, 1fr) 72px 62px;
    height: 60px;
    padding-left: 13px;
    padding-right: 10px;
  }
  .live-voice-orb { width: 33px; height: 33px; }
  .live-voice-end { width: 62px; }
  .live-voice-catalog, .live-voice-select { width: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  .live-voice-orb,
  .live-voice-wave span { transition: none; will-change: auto; }
}