/* Страница демо: подпись слева и телефон с Telegram. На узком экране – чат на весь экран. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background:
    radial-gradient(900px 700px at 70% 40%, rgba(255, 255, 255, 0.75), transparent 62%),
    linear-gradient(155deg, #eaf4fb 0%, #d3e5f3 100%);
  color: #1d3346;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.stage {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(40px, 6vw, 96px);
  padding: 24px;
}

/* --- Подпись --- */

.caption {
  flex: 0 1 340px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.caption__logo {
  width: 150px;
  height: auto;
  margin-bottom: 8px;
}

.caption__title {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #1f3b56;
}

.caption__text {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
  color: #3e5a73;
}

.caption__note {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: #6a8399;
}

.caption__restart {
  margin-top: 6px;
  height: 40px;
  padding: 0 18px;
  border: 1.5px solid rgba(74, 123, 168, 0.45);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  color: #3f6f9c;
  font: 600 15px/1 inherit;
  cursor: pointer;
  transition:
    border-color 0.2s,
    background-color 0.2s;
}

.caption__restart:hover {
  border-color: #4a7ba8;
  background: #fff;
}

.caption__restart:focus-visible,
.backlink:focus-visible {
  outline: 2px solid #4a7ba8;
  outline-offset: 3px;
}

/* --- Телефон: рисуется в натуральную величину и уменьшается под окно --- */

.phone-wrap {
  --s: 1;
  flex: 0 0 auto;
  width: calc(418px * var(--s));
  height: calc(872px * var(--s));
}

.phone {
  position: relative;
  width: 418px;
  height: 872px;
  padding: 14px;
  border-radius: 68px;
  background: #16181b;
  box-shadow:
    inset 0 0 0 2px #2c2f34,
    inset 0 0 0 5px #0b0c0e,
    0 50px 90px -40px rgba(22, 60, 96, 0.55),
    0 18px 40px -20px rgba(22, 60, 96, 0.35);
  transform: scale(var(--s));
  transform-origin: 0 0;
}

/* Кнопки громкости и питания */
.phone::before,
.phone::after {
  content: '';
  position: absolute;
  width: 4px;
  border-radius: 2px;
  background: #23262b;
}

.phone::before {
  left: -3px;
  top: 190px;
  height: 64px;
  box-shadow: 0 84px 0 #23262b;
}

.phone::after {
  right: -3px;
  top: 250px;
  height: 100px;
}

.phone__screen {
  position: relative;
  width: 390px;
  height: 844px;
  border-radius: 54px;
  overflow: hidden;
  background: #fff;
  /* Панели с размытием фона Chrome не обрезает по скруглению родителя, clip-path режет всё */
  clip-path: inset(0 round 54px);
  isolation: isolate;
}

.phone__island {
  position: absolute;
  top: 11px;
  left: 50%;
  z-index: 40;
  width: 124px;
  height: 36px;
  margin-left: -62px;
  border-radius: 20px;
  background: #000;
}

/* --- Ссылка назад, если демо открыли отдельной вкладкой --- */

.backlink {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  background: #fff;
  color: #1f3b56;
  font: 600 14.5px/1 inherit;
  text-decoration: none;
  box-shadow: 0 8px 20px -10px rgba(22, 60, 96, 0.35);
}

.backlink[hidden] {
  display: none;
}

/* --- Превью в кейсе: только подпись и диалог, без служебных кнопок --- */

.is-preview .caption__note,
.is-preview .caption__restart {
  display: none;
}

/* --- Узкий экран: чат на весь экран, как в самом Telegram --- */

.is-bare body {
  background: #fff;
}

.is-bare .stage {
  display: block;
  height: 100%;
  padding: 0;
}

.is-bare .caption,
.is-bare .backlink,
.is-bare .phone::before,
.is-bare .phone::after,
.is-bare .phone__island {
  display: none;
}

.is-bare .phone-wrap {
  width: 100%;
  height: 100%;
}

.is-bare .phone {
  width: 100%;
  height: 100%;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: none;
}

.is-bare .phone__screen {
  width: 100%;
  height: 100%;
  border-radius: 0;
  clip-path: none;
}