.hm-telegram-phone {
  display: block;
  width: 100%;
  min-width: 0;
}

.hm-telegram-phone__stage {
  position: relative;
  width: 100%;
  max-width: 560px;
  height: 680px;
  min-height: 360px;
  margin-inline: auto;
  overflow: visible;
}

.hm-telegram-phone__canvas {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  touch-action: pan-y;
}

.hm-telegram-phone__fallback {
  position: absolute;
  inset: 8% 20%;
  display: none;
  flex-direction: column;
  gap: 18px;
  justify-content: flex-start;
  padding: 54px 18px 20px;
  color: #17212b;
  background: #eaf3f8;
  border: 12px solid #17191e;
  border-radius: 42px;
  box-shadow: 0 24px 55px rgba(23, 25, 30, 0.24);
}

.hm-telegram-phone.is-fallback .hm-telegram-phone__canvas {
  display: none;
}

.hm-telegram-phone.is-fallback .hm-telegram-phone__fallback {
  display: flex;
}

.hm-telegram-phone__fallback-name {
  font-weight: 700;
  text-align: center;
}

.hm-telegram-phone__fallback-message {
  align-self: flex-start;
  max-width: 82%;
  padding: 12px 14px;
  background: #fff;
  border-radius: 14px 14px 14px 4px;
}

@media (max-width: 767px) {
  .hm-telegram-phone__stage {
    width: min(100%, 440px);
    height: min(620px, 76vh);
    min-height: 420px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hm-telegram-phone__canvas {
    touch-action: auto;
  }
}