/* Preview stage: on a wide monitor the app is shown inside a phone, with demo controls beside it.
   On a real phone, in Telegram, or in "computer" view the frame disappears and the app fills the window. */
.stage-info, .statusbar, .home-ind { display: none; }

body.framed { background: var(--stage); overflow: hidden; }
body.framed .stage {
  height: 100%; display: grid; grid-template-columns: minmax(260px, 340px) auto; justify-content: center; align-items: center;
  gap: 56px; padding-inline: 24px; padding-block: 24px;
}
body.framed .device {
  width: 412px; height: 866px; border-radius: 58px; padding: 11px; flex: none;
  background: var(--bezel); box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 30px 80px rgba(0,0,0,.35);
  position: relative;
}
body.framed .screen {
  width: 100%; height: 100%; min-height: 0; border-radius: 47px; overflow: hidden;
  transform: translateZ(0); /* делает экран блоком для fixed-элементов: панели прилипают к телефону, а не к окну */
  display: flex; flex-direction: column;
  --sat: 0px; --sab: 16px;
}
body.framed .scroller { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
body.framed .scroller::-webkit-scrollbar { display: none; }

body.framed .statusbar {
  display: flex; flex: none; height: 50px; padding: 14px 30px 0 34px; justify-content: space-between; align-items: center;
  font-size: 15px; font-weight: 600; background: var(--surface); position: relative; z-index: 40;
}
body.framed .statusbar::after { content: ""; position: absolute; top: 11px; left: 50%; width: 118px; height: 34px; border-radius: 20px; background: #000; transform: translateX(-50%); }
.statusbar .sb-icons { display: flex; gap: 6px; align-items: center; }
.statusbar svg { height: 12px; width: auto; fill: currentColor; }
body.framed .home-ind { display: block; position: absolute; left: 50%; bottom: 7px; width: 132px; height: 5px; border-radius: 3px; background: var(--ink); opacity: .85; transform: translateX(-50%); z-index: 90; pointer-events: none; }

body.framed .stage-info { display: flex; flex-direction: column; gap: 18px; max-width: 340px; max-height: calc(100vh - 48px); overflow-y: auto; padding-right: 6px; color: var(--ink); scrollbar-width: thin; }
.stage-info h1 { font-size: 30px; }
.stage-info p { color: var(--ink-2); }
.stage-info .seg { background: var(--surface); }
.stage-info .seg button.on { background: var(--surface-2); box-shadow: none; }
.stage-try { display: flex; flex-direction: column; gap: 8px; font-size: 14px; padding: 14px 16px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); }
.stage-try ol { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; color: var(--ink-2); }

@media (max-width: 860px) {
  body.framed .stage { grid-template-columns: auto; }
  body.framed .stage-info { display: none; }
}

body.framed.chrome-sim .statusbar { background: #F1F3F4; color: #202124; }