/* v1.5: Telegram-safe immersive controls + ergonomic touch modes. */
:root{--studio-safe-bottom:max(env(safe-area-inset-bottom,0px),var(--tg-content-safe-area-inset-bottom,0px));--studio-native-top:max(env(safe-area-inset-top,0px),var(--tg-content-safe-area-inset-top,0px))}
.viewport-card{isolation:isolate}
.viewport-top,.viewport-bottom{box-sizing:border-box}
.viewport-body canvas{touch-action:none!important;overscroll-behavior:contain}
.viewer-toolbox{scrollbar-gutter:stable;overscroll-behavior:contain}
.viewer-tools-fab,.view-btn,.icon-btn,.small-action{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.viewer-toolbox button,.view-controls button,.immersive-action,.touch-mode-cycle{min-height:44px}
.touch-mode-cycle{display:inline-flex;gap:5px;align-items:center;justify-content:center;white-space:nowrap}
.immersive-actions{display:none}
.immersive-exit{display:none}
.passport-quick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:13px 0}
.passport-quick>div{border:1px solid #33506b;background:#11283b;border-radius:10px;padding:12px;min-width:0}
.passport-quick strong{font-size:14px;color:#d7f5ff;display:block;overflow-wrap:anywhere}
.passport-quick span{font-size:11px;color:#90b2c8;display:block;margin-top:5px}
.passport-status{color:#a8c8d7;font-size:12px;line-height:1.5}
/* Telegram's own Close and menu controls occupy the upper screen region. In immersive mode
   never render the app header in that zone: those buttons live in the bottom action dock. */
body.viewer-immersive .viewport-card{padding-top:max(102px,calc(var(--studio-native-top) + 62px))!important;padding-bottom:0!important}
body.viewer-immersive .viewport-top,body.viewer-immersive .viewport-bottom{display:none!important}
body.viewer-immersive .viewport-body{position:relative;min-height:0;overflow:hidden;isolation:isolate}
body.viewer-immersive .viewer-hud{left:12px;top:12px;max-width:52%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.viewer-immersive .orientation-gizmo{top:10px;right:12px}
body.viewer-immersive .viewer-floating-tools{top:48px;left:12px;right:auto;z-index:30}
body.viewer-immersive .viewer-tools-fab{min-height:44px}
body.viewer-immersive .view-controls{position:absolute!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important;bottom:calc(75px + var(--studio-safe-bottom))!important;max-width:calc(100% - 20px);display:flex;justify-content:center;z-index:12;padding:5px;gap:4px;box-sizing:border-box}
body.viewer-immersive .view-controls .view-btn{min-height:44px;padding:8px 11px;font-size:12px}
body.viewer-immersive .immersive-actions{position:absolute;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;left:12px;right:12px;bottom:calc(10px + var(--studio-safe-bottom));z-index:12;max-width:460px;margin:0 auto}
.immersive-actions .immersive-action{border-radius:11px;background:#142b3deb;border:1px solid #3c647e;color:#c8e7f7;font-size:12px;font-weight:750;padding:8px 3px;white-space:nowrap;min-width:0}
.immersive-actions .immersive-action.active{border-color:#60d8f2;background:#254f67;color:#fff}
.immersive-actions .immersive-exit{display:inline-flex;align-items:center;justify-content:center;color:#ffcfca;border-color:#86545b}
body.viewer-immersive .viewer-toolbox{position:fixed;left:50%;bottom:calc(145px + var(--studio-safe-bottom));top:auto;margin:0;transform:translateX(-50%);width:min(400px,calc(100vw - 24px));max-height:min(44dvh,450px);box-sizing:border-box;z-index:100;box-shadow:0 22px 70px #000c}
body.viewer-immersive .measurement-hint{top:105px;max-width:min(350px,90vw)}
body.viewer-immersive .viewport-instructions{display:none}
body.viewer-immersive.toolbox-open .view-controls{opacity:.38;pointer-events:none}
@media(max-width:650px){
  .viewport-top{min-width:0}
  .viewport-top .model-title{min-width:0;flex:1}
  .viewport-top .model-title strong{max-width:calc(100vw - 175px)}
  .viewport-bottom{gap:6px;padding:7px 10px;min-height:52px}
  .viewport-bottom .small-action{min-width:0;min-height:42px;font-size:11px;padding:7px 9px}
  .viewport-bottom>span{flex:1;min-width:0;max-width:none;font-size:10px}
  .touch-mode-cycle{font-size:11px}
  .view-controls{max-width:calc(100vw - 26px)}
  .view-controls .view-btn{min-height:42px;padding:8px 10px}
}
@media(max-width:390px){
  body.viewer-immersive .immersive-actions{left:8px;right:8px;gap:5px}
  .immersive-actions .immersive-action{font-size:11px}
  .viewport-bottom #wire-toggle{display:none}
  body.viewer-immersive .view-controls .view-btn{padding:8px 8px;font-size:11px}
  .passport-quick{grid-template-columns:1fr 1fr}
}
@media(max-height:610px) and (orientation:landscape){
  body.viewer-immersive .viewport-card{padding-top:max(54px,calc(var(--studio-native-top) + 15px))!important}
  body.viewer-immersive .viewer-toolbox{max-height:37dvh;bottom:calc(128px + var(--studio-safe-bottom))}
  body.viewer-immersive .view-controls{bottom:calc(68px + var(--studio-safe-bottom))!important}
  body.viewer-immersive .viewer-floating-tools{top:8px;left:12px}
  body.viewer-immersive .viewer-hud{display:none}
}
@media(prefers-reduced-motion:reduce){.viewer-toolbox,.immersive-actions{transition:none!important}}