.gp-call-layer {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(2, 1, 5, 0.88);
  backdrop-filter: blur(9px);
}

.gp-call-layer[hidden] {
  display: none !important;
}

.gp-call-card {
  width: min(390px, 94vw);
  padding: 28px;
  border: 1px solid rgba(203, 135, 255, 0.32);
  border-radius: 22px;
  color: #fff;
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(145, 59, 225, 0.28),
      transparent 46%
    ),
    #0d0816;
  box-shadow:
    0 35px 110px rgba(0, 0, 0, 0.7);
  text-align: center;
  font-family: Inter, Arial, sans-serif;
}

.gp-call-label {
  color: #f169d9;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.gp-call-avatar,
.gp-call-large-avatar {
  display: grid;
  place-items: center;
  width: 105px;
  height: 105px;
  margin: 23px auto 15px;
  border: 3px solid rgba(203, 135, 255, 0.4);
  border-radius: 50%;
  background: #251532;
  font-size: 34px;
  font-weight: 800;
}

.gp-call-card h2 {
  margin: 0;
  font-size: 20px;
}

.gp-call-card p {
  color: #a49aaa;
  font-size: 11px;
}

.gp-call-pulse {
  animation: gpCallPulse 1.4s infinite ease-in-out;
}

@keyframes gpCallPulse {
  50% {
    opacity: 0.4;
  }
}

.gp-call-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 26px;
}

.gp-call-card button {
  min-width: 125px;
  min-height: 42px;
  border-radius: 22px;
  cursor: pointer;
}

.gp-call-decline {
  border: 1px solid rgba(255, 74, 112, 0.45);
  color: #ff7690;
  background: rgba(255, 55, 95, 0.08);
}

.gp-call-accept {
  border: 1px solid rgba(60, 238, 155, 0.4);
  color: #fff;
  background: #269966;
}

.gp-call-active {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(980px, 96vw);
  height: min(720px, 92vh);
  overflow: hidden;
  border: 1px solid rgba(203, 135, 255, 0.3);
  border-radius: 20px;
  color: #fff;
  background: #08050d;
  font-family: Inter, Arial, sans-serif;
}

.gp-call-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding: 0 18px;
  background: #100a19;
}

.gp-call-header div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gp-call-header span {
  color: #9f96a8;
  font-size: 9px;
}

.gp-call-live {
  color: #4eeaa0 !important;
}

.gp-call-stage {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: #050308;
}

.gp-call-stage.is-voice {
  display: grid;
  place-items: center;
}

.gp-call-remote {
  width: 100%;
  height: 100%;
}

.gp-call-stage.is-voice .gp-call-remote {
  display: grid;
  place-items: center;
}

.gp-call-remote video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gp-call-local {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 190px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 2px solid rgba(203, 135, 255, 0.55);
  border-radius: 12px;
  background: #120a19;
}

.gp-call-local video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}

.gp-call-large-avatar {
  width: 150px;
  height: 150px;
  margin: auto;
  font-size: 48px;
}

.gp-call-controls {
  display: flex;
  justify-content: center;
  gap: 12px;
  min-height: 76px;
  padding: 13px;
  background: #100a19;
}

.gp-call-controls button {
  display: grid;
  place-items: center;
  width: 50px;
  min-width: 50px;
  height: 50px;
  min-height: 50px;
  border: 1px solid rgba(203, 135, 255, 0.2);
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
  font-size: 18px;
}

.gp-call-controls .gp-call-hangup {
  border-color: #d94360;
  background: #d94360;
}