:root {
  --swpanel-back: #fff;
  --swpanel-keycolor: var(--color-base_solid_paint);
  --swpanel-keycolor-t: var(--color-base_translucent);
  --swpanel-strong: #d03f54;
}
#swpanel {
  display: flex;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  transition: transform 0.3s;
  transform-origin: top left;
}
#swpanel * {
  white-space: nowrap;
}
@media screen and (max-width: 680px) {
  #swpanel {
  }
}
#swpanel:hover #swstatus {
  opacity: 1;
  display: block;
  animation: none;
}
#swpanel.phone #swdisplay {
  background: var(--swpanel-keycolor-t);
  border: 2px solid var(--swpanel-back);
}
#swpanel.phone #swdisplay #swtitle {
  color: var(--swpanel-back);
}
#swpanel.phone #swstatus {
  opacity: 1;
}
#swpanel.phone #swdisplay .vb_obj--voicechat {
  fill: var(--swpanel-back);
}
#swpanel.calling #swicon {
  animation: swdisplay-rotate 1s linear infinite;
}
#swpanel.calling #swstatus {
  animation: swdisplay-blink 1s ease infinite;
  opacity: 1;
}
#swpanel.calling #swdisplay::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 12em;
  top: -4.5em;
  left: 0;
  background: radial-gradient(circle, var(--swpanel-keycolor) 50%, transparent 50%) no-repeat 50%;
  /* transform: scale(3, 3); */
  opacity: 0;
  animation: swdisplay-calling 1s ease-in infinite;
}
#swpanel #swdisplay {
  display: inline-flex;
  background: var(--swpanel-back);
  height: 50px;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  padding-right: 10px;
  border-radius: 25px;
  border: 2px solid var(--swpanel-keycolor);
  z-index: 2;
  overflow: hidden;
  position: relative;
}
@media screen and (max-width: 680px) {
  #swpanel #swdisplay {
    padding: 0 10px;
  }
}
#swpanel #swdisplay #swicon {
  width: 25px;
  height: 25px;
  margin-right: 10px;
  z-index: 2;
}
#swpanel #swdisplay #swtitle {
  letter-spacing: 4px;
  color: var(--swpanel-keycolor);
  font-weight: 700;
  z-index: 2;
  margin-right: 0.5em;
}
@media screen and (max-width: 680px) {
  #swpanel #swdisplay #swtitle {
    letter-spacing: 0px;
  }
  #swpanel #swdisplay #swtitle.hide {
    display: none;
  }
}
#swpanel #swbuttons {
  display: inline-flex;
  /* margin-left: 0.5em; */
  z-index: 2;
}

#swpanel #swbuttons * {
  transition: all .2s;
}
#swpanel #swbuttons button {
  letter-spacing: 6px;
  text-indent: 6px;
  outline: none;
  border: none;
  border-radius: 25px;
  padding: 0 20px;
  background: var(--swpanel-keycolor);
  color: var(--swpanel-back);
  font-weight: 700;
  padding: 3px 20px;
}
@media screen and (max-width: 680px) {
  #swpanel #swbuttons button {
    padding: 3px 8px;
  }
}
#swpanel #swbuttons button:hover {
  opacity: 0.5;
}
#swpanel #swbuttons button:not([style*="none"]) + button {
  margin-left: 10px;
}
#swpanel #swbuttons button#swclose,
#swpanel #swbuttons button#swcancel,
#swpanel #swbuttons button#swdeny {
  background: var(--swpanel-strong);
}
#swpanel #swbuttons button#swcancel {
  letter-spacing: 2px;
  text-indent: 2px;
}
#swpanel #swstatus {
  position: absolute;
  left: 15px;
  font-size: 0.8em;
  background-color: var(--swpanel-keycolor-t);
  backdrop-filter: var(--backdrop-filter);
  padding: 10px 30px;
  width: auto;
  white-space: nowrap;
  border-radius: 5px;
  color: #fff;
  opacity: 0;
  transition: all border 0.3s;
  transition-property: opacity, border, background;
  /* pointer-events: none; */
  bottom: 70px;
  transition: all .2s;
  user-select: none;
}
#swpanel #swstatus.hide {
  pointer-events: none;
  display: none;
}
@media screen and (max-width: 960px) {
  #swpanel #swstatus {
    animation: swdisplay-blink 2s ease infinite;
    opacity: 1;
  }
}
#swpanel #swstatus::before {
  content: "";
  width: 0;
  height: 0;
  display: block;
  border: 7px solid transparent;
  border-top: 12px solid var(--swpanel-keycolor-t);
  backdrop-filter: var(--backdrop-filter);
  position: absolute;
  top: 39px;
  left: 20px;
}
#swpanel .vb_obj--voicechat {
  fill: var(--swpanel-keycolor);
}
@keyframes swdisplay-rotate {
  0% {
    transform: rotate(0deg);
  }
  80% {
    transform: rotate(0deg);
  }
  82.5% {
    transform: rotate(20deg);
  }
  87.5% {
    transform: rotate(-15deg);
  }
  90% {
    transform: rotate(15deg);
  }
  92.5% {
    transform: rotate(-15deg);
  }
  97.5% {
    transform: rotate(15deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes swdisplay-vibe {
  0% {
    transform: translate(0, 0);
  }
  80% {
    transform: translate(0, 0);
  }
  82.5% {
    transform: translate(3px, 0);
  }
  87.5% {
    transform: translate(-3px, 0);
  }
  90% {
    transform: translate(0, 0);
  }
  92.5% {
    transform: translate(1px, 0);
  }
  97.5% {
    transform: translate(-1px, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes swdisplay-calling {
  0% {
    transform: scale(0, 0);
    opacity: 0.3;
  }
  100% {
    transform: scale(2, 2);
    opacity: 0;
  }
}
@keyframes swdisplay-fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes swdisplay-fadeout {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes swdisplay-blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}