/* FIX-UI-089 · 2026-11-03
   ANTES: prévia mobile espremida na moldura de 320px/520px e submenu sempre
   visível em faixa horizontal rolável.
   DEPOIS: subnavegação em seletor compacto e prévia quase sem moldura com
   modo imersivo, mantendo o iframe SAME-ORIGIN permanente de FIX-UI-084.
   ROLLBACK: remover este arquivo e restaurar HTML/JS anteriores ao UI-089.
   Sem migração, chamadas à API, alteração de rascunho ou publicação. */
.studio-subnav-toggle,.mobile-preview-toolbar{display:none}
@media(min-width:931px){
  /* O tooltip customizado não pode ser cortado pelo botão do rail. */
  body:not([data-rail-expanded=true]) .studio-nav .hub-nav-button{overflow:visible}
}
@media(max-width:930px){
  .studio-subnav-shell{
    position:sticky;top:59px;z-index:31;
    margin:0 -13px 12px;padding:7px 13px;
    background:#121b15;border-bottom:1px solid #415d46;
  }
  .studio-subnav-toggle:not([hidden]){
    display:flex;align-items:center;justify-content:space-between;
    gap:12px;width:100%;min-height:44px;
    padding:8px 12px;border:1px solid #6b8667;border-radius:11px;
    background:#25382a;color:#e6f5da;text-align:left;
    font-size:.83rem;font-weight:850;
  }
  .studio-subnav-toggle svg{width:18px;height:18px;flex:none;transition:transform .15s ease}
  .studio-subnav-toggle[aria-expanded=true] svg{transform:rotate(180deg)}
  #studio-subnav{
    display:none;position:absolute;top:calc(100% - 1px);
    left:13px;right:13px;margin:0;padding:8px;min-height:0;
    flex-direction:column;gap:4px;max-height:min(57dvh,430px);
    overflow-y:auto;overscroll-behavior:contain;
    background:#18281d;border:1px solid #668566;border-radius:0 0 12px 12px;
    box-shadow:0 16px 30px #0008;scrollbar-width:thin;
  }
  body[data-subnav-expanded=true] #studio-subnav:not([hidden]){display:flex}
  #studio-subnav button{
    width:100%;min-height:43px;border-radius:9px;
    text-align:left;white-space:normal;flex:none;
  }
  #screen-preview .screen-title{margin-bottom:9px}
  .mobile-preview-toolbar{
    display:flex;align-items:center;justify-content:space-between;
    gap:8px;margin-bottom:10px;font-size:.72rem;
    color:#c1d4b7;
  }
  .mobile-preview-toolbar .studio-btn{width:auto!important;min-height:42px;white-space:nowrap}
  .mobile-preview-holder{
    display:block;width:calc(100% + 26px);
    margin:0 -13px;
  }
  .mobile-preview-holder .phone-shell{
    display:block;width:100%!important;max-width:none!important;
    height:clamp(690px,calc(100dvh - 65px),1240px)!important;
    min-height:0!important;max-height:none!important;
    margin:0;padding:0;border:0;
    border-radius:12px;box-shadow:0 0 0 1px #6c836599;
    overflow:hidden;background:#111a13;
  }
  .mobile-preview-holder .phone-shell iframe{
    width:100%;height:100%;border:0;border-radius:12px;
    background:#121a14;
  }
  /* Tela cheia mantém a rolagem no próprio cardápio público;
     não desloca o iframe e não remove a navegação no documento cliente. */
  body[data-preview-expanded=true]{overflow:hidden}
  body[data-preview-expanded=true] #screen-preview{
    position:fixed;inset:0;z-index:90;display:flex!important;
    flex-direction:column;min-width:0;min-height:0;
    padding:max(8px,env(safe-area-inset-top)) 0 env(safe-area-inset-bottom);
    overflow:hidden;background:#101911;
  }
  body[data-preview-expanded=true] #screen-preview .screen-title{display:none}
  body[data-preview-expanded=true] .mobile-preview-toolbar{
    flex:none;min-height:48px;padding:0 13px;margin:0;
  }
  body[data-preview-expanded=true] .mobile-preview-holder{
    flex:1;min-height:0;height:auto;width:100%;margin:0;display:flex;
  }
  body[data-preview-expanded=true] .mobile-preview-holder .phone-shell{
    flex:1;min-height:0!important;height:100%!important;
    width:100%!important;max-width:none!important;
    border-radius:0;box-shadow:none;
  }
  body[data-preview-expanded=true] .mobile-preview-holder iframe{border-radius:0}
  body[data-panel-theme=light] .studio-subnav-shell{background:#e3ebdf;border-color:#a2b89a}
  body[data-panel-theme=light] .studio-subnav-toggle{background:#f5f9f1;color:#29452d;border-color:#a2b89a}
  body[data-panel-theme=light] #studio-subnav{background:#f6faf4;border-color:#9ab194;box-shadow:0 16px 30px #22332233}
  body[data-panel-theme=light] .mobile-preview-toolbar{color:#435e43}
}
@media(max-width:650px){
  .studio-subnav-shell{margin-inline:-11px;padding-inline:11px}
  #studio-subnav{left:11px;right:11px}
  .mobile-preview-holder{width:calc(100% + 22px);margin-inline:-11px}
  .mobile-preview-toolbar{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){
  .studio-subnav-toggle svg{transition:none}
}