/* Oficina Portátil V46 — sidebar animada sem perder o scroller único. */
@media (min-width:821px){
  .app-shell{
    display:grid!important;
    grid-template-columns:276px minmax(0,1fr)!important;
    height:100dvh!important;
    min-height:0!important;
    max-height:100dvh!important;
    overflow:hidden!important;
    transition:grid-template-columns .30s cubic-bezier(.22,1,.36,1)!important;
  }
  .app-shell>.sidebar{
    display:flex!important;
    width:276px!important;
    min-width:276px!important;
    max-width:276px!important;
    opacity:1!important;
    visibility:visible!important;
    transform:translateX(0)!important;
    transition:transform .30s cubic-bezier(.22,1,.36,1),opacity .20s ease,visibility .20s ease!important;
    will-change:transform,opacity;
  }
  .app-shell>.workspace,
  .app-shell.op-sidebar-collapsed-native>.workspace{
    display:flex!important;
    flex-direction:column!important;
    min-width:0!important;
    width:auto!important;
    height:100dvh!important;
    min-height:0!important;
    max-height:100dvh!important;
    overflow:hidden!important;
  }
  .app-shell>.workspace>main,
  .app-shell.op-sidebar-collapsed-native>.workspace>main{
    flex:1 1 0%!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-y:contain;
  }
  .app-shell.op-sidebar-collapsed-native{
    display:grid!important;
    grid-template-columns:0 minmax(0,1fr)!important;
  }
  .app-shell.op-sidebar-collapsed-native>.sidebar{
    display:flex!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translateX(-104%)!important;
  }
}

/* Oficina Portátil V47 — mobile real (Safari/WebView): evita sintaxe de media-query por intervalo. */
@media (max-width:820px){
  html,body,#root{width:100%;max-width:100%;min-width:0;overflow-x:hidden}
  .app-shell{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:100dvh!important;
    height:auto!important;
    overflow:visible!important;
  }
  .app-shell>.workspace{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:100dvh!important;
    overflow:visible!important;
  }
  .app-shell>.workspace>.topbar{width:100%!important;max-width:100%!important;min-width:0!important}
  .app-shell>.workspace>main{width:100%!important;max-width:100%!important;min-width:0!important;overflow-x:hidden!important}

  /* Enquanto um app nativo está aberto, main vira o ÚNICO scroller também no celular. */
  body[data-op-native-open]{height:100dvh!important;min-height:0!important;overflow:hidden!important}
  body[data-op-native-open] #root,
  body[data-op-native-open] .app-shell,
  body[data-op-native-open] .app-shell>.workspace{
    height:100dvh!important;
    min-height:0!important;
    max-height:100dvh!important;
    overflow:hidden!important;
  }
  body[data-op-native-open] .app-shell>.workspace{
    display:flex!important;
    flex-direction:column!important;
  }
  body[data-op-native-open] .app-shell>.workspace>.topbar{
    position:relative!important;
    top:auto!important;
    flex:0 0 86px!important;
    height:86px!important;
    min-height:86px!important;
  }
  body[data-op-native-open] .app-shell>.workspace>main{
    flex:1 1 0%!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-y:contain!important;
    touch-action:pan-y!important;
  }
  body[data-op-native-open] #op-native-root,
  body[data-op-native-open] #op-native-root>.op-native-page{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
  }
}

/* Totem: qualquer app nativo (inclusive Pesquisa SAP) usa main rolável em qualquer resolução. */
html.op-totem-aprv body.op-native-totem[data-op-native-open] .app-shell{
  height:100dvh!important;min-height:0!important;max-height:100dvh!important;overflow:hidden!important;
}
html.op-totem-aprv body.op-native-totem[data-op-native-open] .app-shell>.workspace{
  display:flex!important;flex-direction:column!important;height:100dvh!important;min-height:0!important;max-height:100dvh!important;overflow:hidden!important;
}
html.op-totem-aprv body.op-native-totem[data-op-native-open] .app-shell>.workspace>.topbar{
  flex:0 0 86px!important;height:86px!important;min-height:86px!important;
}
html.op-totem-aprv body.op-native-totem[data-op-native-open] .app-shell>.workspace>main{
  flex:1 1 0%!important;min-height:0!important;height:auto!important;max-height:none!important;
  overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch!important;touch-action:pan-y!important;
}

/* V47 — no mobile/totem a topbar já identifica o app; elimina cabeçalho redundante da sala. */
@media (max-width:820px){
  body[data-op-native-open="room"] #op-native-root [data-native-page="room"]>.op-native-heading{display:none!important}
  body[data-op-native-open="room"] #op-native-root [data-native-page="room"]{padding-top:0!important}
}
html.op-totem-aprv body[data-op-native-open="room"] #op-native-root [data-native-page="room"]>.op-native-heading{display:none!important}