.call .status-bar,
.call .end-button,
.call .ios-controls {
  display: none !important;
}

.call {
  background: #050506;
}

.call.video-on .video-stage {
  opacity: 1;
  pointer-events: auto;
}

.call.video-on .remote-grid {
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
}

.call.video-on .remote-tile {
  min-height: 100dvh;
}

.call.video-on .local-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  object-fit: cover;
  box-shadow: none;
  transform: scaleX(-1);
}

.call.video-on.has-remote-video .local-video {
  inset: auto 16px calc(126px + env(safe-area-inset-bottom)) auto;
  width: min(32vw, 128px);
  height: auto;
  aspect-ratio: 9 / 16;
  border-radius: 22px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .42);
}

.call.both-video .remote-grid {
  opacity: 1;
  pointer-events: auto;
}

.call.both-video .remote-tile {
  width: 100%;
  height: 100%;
}

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

.call.both-video .local-video {
  cursor: grab;
  touch-action: none;
  pointer-events: auto;
}

.call.both-video.self-main .local-video {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.call.both-video.self-main .remote-grid {
  position: absolute;
  inset: auto 16px calc(126px + env(safe-area-inset-bottom)) auto;
  z-index: 3;
  width: min(32vw, 128px);
  height: auto;
  aspect-ratio: 9 / 16;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .42);
  cursor: grab;
  touch-action: none;
}

.call-overlay {
  justify-content: space-between;
  padding: max(18px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  pointer-events: none;
}

.caller {
  margin-top: 10px;
}

.room-label {
  font-size: clamp(26px, 7vw, 38px);
  font-weight: 650;
}

.status-label {
  font-size: 15px;
  color: rgba(255, 255, 255, .78);
}

.invite-chip {
  position: absolute;
  top: max(18px, env(safe-area-inset-top));
  left: 16px;
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 20px;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  font-weight: 750;
  backdrop-filter: blur(16px);
  pointer-events: auto;
}

.add-contact-chip {
  position: absolute;
  top: max(18px, env(safe-area-inset-top));
  right: 16px;
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 20px;
  background: rgba(52, 199, 89, .9);
  color: #061109;
  font-weight: 800;
  pointer-events: auto;
}

.call.video-on .invite-chip,
.call.video-on .add-contact-chip {
  background: rgba(18, 18, 20, .42);
  color: #fff;
  backdrop-filter: blur(18px);
}

.call-controls {
  width: min(100%, 440px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 12px;
  border-radius: 30px;
  background: rgba(18, 18, 20, .72);
  border: 1px solid rgba(255, 255, 255, .1);
  backdrop-filter: blur(24px);
  pointer-events: auto;
}

.call-action {
  min-width: 0;
  display: grid;
  place-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  color: #fff;
}

.action-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  font-size: 23px;
}

.call-action small {
  max-width: 100%;
  min-height: 28px;
  color: rgba(255, 255, 255, .82);
  font-size: 11px;
  line-height: 1.15;
  text-align: center;
}

.call-action.off .action-icon {
  background: rgba(255, 255, 255, .92);
  color: #111;
}

.call-action.danger .action-icon {
  background: #ff453a;
  color: #fff;
  transform: rotate(135deg);
}

.call-notice {
  position: absolute;
  left: 50%;
  top: max(84px, calc(env(safe-area-inset-top) + 54px));
  z-index: 8;
  max-width: calc(100% - 32px);
  padding: 12px 16px;
  border-radius: 20px;
  background: rgba(20, 20, 22, .78);
  color: #fff;
  font-weight: 750;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, -10px);
  pointer-events: none;
  backdrop-filter: blur(18px);
  transition: opacity .2s ease, transform .2s ease;
}

.call-notice.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.incoming-call {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(18px);
}

.incoming-card {
  width: min(100%, 360px);
  display: grid;
  gap: 18px;
  padding: 24px;
  border-radius: 30px;
  background: rgba(22, 22, 26, .92);
  text-align: center;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
}

.incoming-title {
  color: rgba(255, 255, 255, .68);
  font-weight: 700;
}

.incoming-name {
  font-size: 32px;
  font-weight: 800;
}

.incoming-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.incoming-actions button {
  min-height: 54px;
  border: 0;
  border-radius: 27px;
  color: #fff;
  font-weight: 800;
}

.incoming-decline {
  background: #ff453a;
}

.incoming-accept {
  background: #34c759;
}

@media (max-width: 360px) {
  .call-controls {
    gap: 6px;
    padding: 10px;
  }

  .action-icon {
    width: 48px;
    height: 48px;
  }

  .call-action small {
    font-size: 10px;
  }
}