.gwk-widget {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 1040;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
}

.gwk-trigger {
  appearance: none;
  border: none;
  background: transparent;
  padding: 0;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  cursor: pointer;
  position: relative;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  overflow: visible;
}

.gwk-widget .wk-mic-orb {
  width: 60px;
  height: 60px;
  border-radius: 30px;
  display: grid;
  place-items: center;
  background: #F7FAFC;
  border: 1px solid #DCE2E7;
  box-shadow: none;
  position: relative;
  z-index: 1;
  transition:
    box-shadow 0.16s ease,
    background 0.16s ease,
    transform 0.16s ease;
}

.gwk-widget .wk-mic-icon {
  font-size: 26px;
  color: #64748B;
  transition: color 0.16s ease;
}

.gwk-indicator {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  background: #649f5e;
  opacity: 0;
  z-index: 2;
  transform: translate(30%, 30%) scale(0.9);
  transition:
    background 0.16s ease,
    opacity 0.16s ease,
    transform 0.16s ease;
}

.gwk-widget[data-state='connecting'] .gwk-indicator {
  opacity: 0;
  animation: none;
}

.gwk-widget[data-state='ready'] .gwk-indicator,
.gwk-widget[data-state='offline'] .gwk-indicator {
  opacity: 0;
}

.gwk-widget[data-state='live'] .wk-mic-orb {
  background: #eafff5;
  box-shadow: 0 0 9.3px #649f5e;
  transform: none;
}

.gwk-widget[data-state='live'] .wk-mic-icon {
  color: #649F5E;
}

.gwk-widget[data-state='live'] .gwk-indicator {
  background: #649f5e;
  opacity: 1;
  transform: translate(30%, 30%) scale(1);
}

.gwk-widget[data-state='blocked'] .wk-mic-orb,
.gwk-widget[data-state='error'] .wk-mic-orb {
  background: #fbeeee;
}

.gwk-widget[data-state='blocked'] .wk-mic-icon,
.gwk-widget[data-state='error'] .wk-mic-icon {
  color: #d96c6c;
}

.gwk-widget[data-state='blocked'] .gwk-indicator,
.gwk-widget[data-state='error'] .gwk-indicator {
  background: #d96c6c;
  opacity: 1;
  transform: translate(30%, 30%) scale(1);
}

.gwk-trigger:focus-visible .wk-mic-orb {
  outline: 2px solid #9ca9bc;
  outline-offset: 3px;
}

.gwk-sr-only,
.gwk-audio-bin {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes gwkPulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.12);
  }

  100% {
    transform: scale(1);
  }
}

@media (max-width: 600px) {
  .gwk-widget {
    right: max(14px, env(safe-area-inset-right));
    bottom: calc(14px + env(safe-area-inset-bottom));
    width: 66px;
    height: 66px;
  }

  .gwk-trigger {
    width: 66px;
    height: 66px;
  }


  .gwk-indicator {
    right: 6px;
    bottom: 6px;
    width: 14px;
    height: 14px;
  }
}