#embedded_messenger {
  position: fixed;
  z-index: 1000;
  bottom: 80px;
  right: 50px;
  height: 500px; /* Начальная высота (может быть переопределена медиа-запросом) */
  width: 650px; /* Начальная ширина (может быть переопределена медиа-запросом) */
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  border-radius: 12px;
  overflow: hidden;
  transform-origin: bottom right;
  transform: scale(0) translate(calc(100% + 150px), calc(100% + 150px));
  opacity: 1;
  background-color: #E2E2E2;
  background: #E2E2E2;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  margin: 2rem auto;
  font-family: 'Google Sans', sans-serif;
  font-size: 14px;
  color: #000000;
  padding: 12px;
}

#embedded_messenger.active {
  transform: scale(1) translate(0, 0);
  opacity: 1;
}

#embedded_messenger iframe {
  height: 100%;
  width: 100%;
  border: none;
  display: block;
  background: #E2E2E2;
  background-color: #E2E2E2;
}

#embedded_messenger #message_header {
  background: #E2E2E2;
  padding: 0.5rem 1rem;
  color: black;
  text-align: center;
}

/* Медиа-запрос для маленьких экранов (смартфонов) */
@media (max-width: 768px) { /* или любое другое значение, подходящее для вашей верстки */
  #embedded_messenger {
    width: 95%; /* Занимает всю ширину экрана */
    /* height: calc(100vh - 150px); */
    height: 95%;
    bottom: auto; /* Убираем фиксированное положение снизу, чтобы учитывать новую высоту */
    top: 0; /*Прижимаем к верху экрана*/
    left: 0; /*Прижимаем к левому краю экрана*/
    right: auto; /*Убираем фиксированное положение справа*/
    border-radius: 0; /*Убираем скругление углов*/
    margin: 0; /*Убираем отступы*/
    transform-origin: bottom right;
    transform: scale(0) translate(calc(100% + 150px), calc(100% + 150px)); /* Скрытие и позиционирование */
  }

  #embedded_messenger.active {
    transform: scale(1) translate(0, 0);
    opacity: 1;
  }
}