#firstPartInAudioAndVideoCommunicationDiv {
   min-height: 0;
   position: relative;
}

.callConnectionStatus {
   position: absolute;
   top: 8px;
   left: 8px;
   right: 8px;
   z-index: 2;
   padding: 8px 12px;
   border-radius: 8px;
   background: #202824;
   color: #fff;
   font-size: 16px;
   line-height: 20px;
   text-align: center;
   pointer-events: none;
}

.voiceCall .callMediaStage {
   display: none;
}

.voiceCallSummary:not([hidden]) {
   min-height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 24px 16px;
   text-align: center;
   overflow-wrap: anywhere;
}

.voiceCallPeerName {
   max-width: 100%;
   font-size: 28px;
   font-weight: 700;
   line-height: 34px;
   margin: 4px 0;
}

.voiceCallStatus,
.voiceCallBrand {
   max-width: 100%;
   font-size: 16px;
   line-height: 20px;
}

#audioAndVideoCommunicationDiv.voiceCallSurface,
.voiceCallSurface .voiceCall {
   background: #f7f9f8 !important;
   color: #202824;
   letter-spacing: 0;
}

.voiceCallSurface #secondPartInAudioAndVideoCommunicationDiv {
   flex: 0 0 calc(96px + env(safe-area-inset-bottom, 0px));
   background: #fff !important;
   padding: 12px !important;
   padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
}

.voiceCallSurface #secondPartInAudioAndVideoCommunicationDiv > div {
   align-items: center;
   gap: 24px !important;
   padding-top: 0 !important;
}

.voiceCallSurface #secondPartInAudioAndVideoCommunicationDiv > div > div {
   background: transparent;
   box-shadow: none !important;
}

.voiceCallSurface .iconStyle {
   width: 32px;
   height: 32px;
   object-fit: contain;
}

.voiceCallSurface .textUnderIcon {
   font-size: 14px;
}

.voiceCallSurface #cancelDivInAudioAndVideoCommunicationDiv {
   background: #fce8e6;
   border-radius: 8px;
   padding: 8px 16px !important;
}

.callIncoming,
.callIncomingScreen {
   background: #f7f9f8;
   color: #202824;
   letter-spacing: 0;
}

.callIncoming .incoming-call-dialog {
   width: 100%;
   max-width: none;
   height: 100%;
   min-height: 100%;
   margin: 0;
}

.callIncoming .modal-content,
.callIncomingScreen:not([hidden]) {
   display: grid;
   grid-template-rows: auto minmax(0, 1fr) auto;
   width: 100%;
   height: 100%;
   background: #f7f9f8;
   border: 0;
   border-radius: 0;
   box-shadow: none;
}

.callIncomingScreen {
   position: fixed;
   inset: 0;
   z-index: 1100;
}

.callIncomingScreen[hidden] {
   display: none;
}

.callIncomingScreen:focus {
   outline: none;
}

.callIncomingBrand {
   padding: max(32px, env(safe-area-inset-top, 0px)) 24px 16px;
   color: #23795e;
   text-align: center;
   font-size: 24px;
   line-height: 32px;
   font-weight: 700;
}

.callIncomingBody {
   min-height: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: safe center;
   gap: 28px;
   padding: 24px;
   overflow: auto;
   text-align: center;
}

.callIncomingPhone {
   display: grid;
   place-items: center;
   flex: 0 0 88px;
   width: 88px;
   height: 88px;
   border-radius: 50%;
   background: #fff;
}

.callIncomingPhone img {
   width: 40px;
   height: 40px;
   object-fit: contain;
}

.callIncomingIdentity {
   width: 100%;
   max-width: 640px;
   overflow-wrap: anywhere;
}

.callIncomingNickname {
   margin: 0 0 16px;
   font-size: 28px;
   line-height: 34px;
   font-weight: 700;
   color: #202824;
}

.callIncomingType {
   color: #596962;
   font-size: 22px;
   line-height: 30px;
}

.callIncomingStatus {
   margin-top: 16px;
   color: #596962;
   font-size: 20px;
   line-height: 28px;
}

.callIncomingActions {
   display: flex;
   align-items: start;
   justify-content: center;
   gap: 40px;
   padding: 24px max(20px, env(safe-area-inset-right, 0px)) max(28px, env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
}

.callIncomingAction {
   display: flex;
   flex: 0 0 96px;
   flex-direction: column;
   align-items: center;
   gap: 12px;
   width: 96px;
   padding: 0;
   border: 0;
   border-radius: 0;
   background: transparent;
   color: #202824;
   font: inherit;
   font-size: 20px;
   line-height: 28px;
   text-align: center;
   cursor: pointer;
}

.callIncomingActionCircle {
   display: grid;
   place-items: center;
   width: 76px;
   height: 76px;
   border-radius: 50%;
}

.callIncomingReject .callIncomingActionCircle {
   background: #c7434b;
}

.callIncomingAccept .callIncomingActionCircle {
   background: #14865d;
}

.callIncomingActionIcon {
   width: 32px;
   height: 32px;
   object-fit: contain;
   filter: brightness(0) invert(1);
}

.callIncomingReject .callIncomingActionIcon {
   transform: rotate(135deg);
}

.callIncomingAction:focus-visible {
   outline: 3px solid #23795e;
   outline-offset: 6px;
   border-radius: 8px;
}

.callIncomingAction:hover .callIncomingActionCircle {
   filter: brightness(0.93);
}

.callIncomingAction:disabled {
   opacity: 0.55;
   cursor: default;
}

.callIncomingSpinner {
   width: 22px;
   height: 22px;
   margin: 20px auto 0;
   border: 2px solid #d6e4de;
   border-top-color: #14865d;
   border-radius: 50%;
   animation: callIncomingSpin 1s linear infinite;
}

@keyframes callIncomingSpin {
   to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
   .callIncomingSpinner { animation: none; }
}

@media (max-height: 440px) {
   .callIncomingBrand { padding: 8px 16px; font-size: 20px; line-height: 26px; }
   .callIncomingBody { gap: 10px; padding: 8px 20px; }
   .callIncomingPhone { flex-basis: 48px; width: 48px; height: 48px; }
   .callIncomingPhone img { width: 24px; height: 24px; }
   .callIncomingNickname { margin-bottom: 4px; font-size: 24px; line-height: 30px; }
   .callIncomingType, .callIncomingStatus { font-size: 16px; line-height: 22px; }
   .callIncomingStatus { margin-top: 4px; }
   .callIncomingSpinner { margin-top: 6px; width: 18px; height: 18px; }
   .callIncomingActions { padding-top: 8px; padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)); }
   .callIncomingAction { gap: 6px; font-size: 16px; line-height: 22px; }
   .callIncomingActionCircle { width: 56px; height: 56px; }
   .callIncomingActionIcon { width: 26px; height: 26px; }
   .voiceCallSurface #secondPartInAudioAndVideoCommunicationDiv {
      flex-basis: calc(80px + env(safe-area-inset-bottom, 0px));
      padding: 4px !important;
      padding-bottom: max(4px, env(safe-area-inset-bottom, 0px)) !important;
   }
}