/* v1.11.2: iOS Telegram native fullscreen + immersive zoom recovery.
   Normal non-fullscreen and the original carousel are intentionally unchanged. */
:root{--studio-js-content-safe-top:0px}

/* Telegram's own Close / ... buttons are not part of the web page.
   Reserve their region when the user selects fullscreen in Telegram's menu,
   even when the in-app "viewer-immersive" toggle has not been used. */
body.telegram-native-fullscreen:not(.viewer-immersive) #app{
  padding-top:max(
    106px,
    calc(var(--studio-js-content-safe-top) + 18px),
    calc(var(--tg-content-safe-area-inset-top,0px) + 18px),
    calc(env(safe-area-inset-top,0px) + 72px)
  );
  box-sizing:border-box;
}
body.telegram-native-fullscreen:not(.viewer-immersive) .io-dock{
  top:max(
    100px,
    calc(var(--studio-js-content-safe-top) + 10px),
    calc(var(--tg-content-safe-area-inset-top,0px) + 10px)
  )!important;
}
body.viewer-immersive{
  overflow:hidden;
  overscroll-behavior:none;
}
/* Existing top row of tools starts INSIDE viewport-body, which follows this
   padding. Never put the tool menu directly below the iOS status bar. */
body.viewer-immersive .viewport-card{
  padding-top:max(
    112px,
    calc(var(--studio-js-content-safe-top) + 60px),
    calc(var(--tg-content-safe-area-inset-top,0px) + 60px),
    calc(env(safe-area-inset-top,0px) + 80px)
  )!important;
  padding-bottom:0!important;
  max-width:100%!important;
}
body.viewer-immersive .viewport-body{
  min-width:0!important;
  width:100%!important;
  flex:1 1 auto!important;
}
/* These controls must remain fully visible on the web viewport, not behind
   Telegram's native Close button or the side edge after a mode transition. */
body.viewer-immersive .viewer-floating-tools{
  left:max(10px,env(safe-area-inset-left,0px))!important;
  max-width:calc(100% - 22px)!important;
}
body.viewer-immersive .immersive-view-select-label{
  right:max(10px,env(safe-area-inset-right,0px))!important;
  max-width:calc(100% - 160px)!important;
}
body.viewer-immersive .immersive-quickbar,
body.viewer-immersive .immersive-actions{
  max-width:min(650px,calc(100% - 20px))!important;
}
@media(max-height:610px) and (orientation:landscape){
  body.viewer-immersive .viewport-card{
    padding-top:max(
      60px,
      calc(var(--studio-js-content-safe-top) + 14px),
      calc(var(--tg-content-safe-area-inset-top,0px) + 14px),
      calc(env(safe-area-inset-top,0px) + 32px)
    )!important;
  }
  body.telegram-native-fullscreen:not(.viewer-immersive) #app{
    padding-top:max(
      60px,
      calc(var(--studio-js-content-safe-top) + 10px),
      calc(env(safe-area-inset-top,0px) + 30px)
    );
  }
  body.telegram-native-fullscreen:not(.viewer-immersive) .io-dock{
    top:max(56px,calc(var(--studio-js-content-safe-top) + 5px))!important;
  }
}