/*
 * AIOS MUSIC — FLOATING JAHCORE VOICE
 */

.aios-jahcore-voice {
  position: fixed;
  right: 18px;
  bottom: 88px;
  z-index: 9998;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;

  pointer-events: none;
}

.aios-jahcore-voice__button {
  pointer-events: auto;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  min-height: 46px;
  padding: 7px 13px 7px 7px;

  border: 1px solid
    rgba(255,255,255,.22);

  border-radius: 999px;

  background:
    rgba(10,12,18,.92);

  color: inherit;

  box-shadow:
    0 12px 34px
    rgba(0,0,0,.34);

  backdrop-filter:
    blur(14px);

  cursor: pointer;
}

.aios-jahcore-voice__mark {
  display: grid;
  place-items: center;

  width: 32px;
  height: 32px;

  border-radius: 50%;

  border: 1px solid
    rgba(255,255,255,.26);

  font-weight: 800;
}

.aios-jahcore-voice__label {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.aios-jahcore-voice__status {
  pointer-events: none;

  max-width: 130px;

  padding: 4px 8px;

  border-radius: 999px;

  background:
    rgba(10,12,18,.82);

  font-size: .67rem;
  line-height: 1.2;

  text-align: center;
  white-space: nowrap;
}

.aios-jahcore-voice[
  data-state="connecting"
]
.aios-jahcore-voice__mark {
  animation:
    aiosJahcorePulse
    1s
    ease-in-out
    infinite;
}

.aios-jahcore-voice[
  data-state="live"
]
.aios-jahcore-voice__button,
.aios-jahcore-voice[
  data-state="listening"
]
.aios-jahcore-voice__button,
.aios-jahcore-voice[
  data-state="speaking"
]
.aios-jahcore-voice__button {
  border-color:
    currentColor;
}

.aios-jahcore-voice[
  data-state="speaking"
]
.aios-jahcore-voice__mark {
  animation:
    aiosJahcorePulse
    .65s
    ease-in-out
    infinite;
}

@keyframes aiosJahcorePulse {

  0%,
  100% {
    transform: scale(1);
    opacity: .72;
  }

  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}


@media (max-width: 640px) {

  .aios-jahcore-voice {
    right: 12px;
    bottom: 82px;
  }

  .aios-jahcore-voice__button {
    min-height: 42px;
    padding:
      5px
      10px
      5px
      5px;
  }

  .aios-jahcore-voice__mark {
    width: 30px;
    height: 30px;
  }

  .aios-jahcore-voice__label {
    font-size: .77rem;
  }
}