/* STAGING — Central de Notificações em tela cheia no mobile.
   Android/iPhone/PWA: ocupa a área útil inteira e usa uma única rolagem vertical. */
@media (max-width:900px), (pointer:coarse){
  #notificationsDialog.notifications-dialog{
    box-sizing:border-box!important;
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    width:100dvw!important;
    max-width:none!important;
    height:100vh!important;
    height:100dvh!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:#0b0d10!important;
    overflow:hidden!important;
  }
  #notificationsDialog::backdrop{background:#0b0d10!important}
  #notificationsDialog .notifications-card{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:none!important;
    min-height:100%!important;
    height:100%!important;
    max-height:none!important;
    margin:0!important;
    padding:
      max(12px,env(safe-area-inset-top))
      max(12px,env(safe-area-inset-right))
      max(16px,env(safe-area-inset-bottom))
      max(12px,env(safe-area-inset-left))!important;
    border:0!important;
    border-radius:0!important;
    display:block!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
  }
  #notificationsDialog .dialog-head{
    position:sticky!important;
    top:calc(-1 * max(12px,env(safe-area-inset-top)))!important;
    z-index:5!important;
    margin:
      calc(-1 * max(12px,env(safe-area-inset-top)))
      calc(-1 * max(12px,env(safe-area-inset-right)))
      10px
      calc(-1 * max(12px,env(safe-area-inset-left)))!important;
    padding:
      max(12px,env(safe-area-inset-top))
      max(12px,env(safe-area-inset-right))
      10px
      max(12px,env(safe-area-inset-left))!important;
    background:#0b0d10!important;
  }
  #notificationsDialog .notifications-toolbar{
    display:flex!important;
    width:100%!important;
    max-width:none!important;
    overflow:visible!important;
    margin-bottom:10px!important;
  }
  #notificationsDialog .notifications-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    width:100%!important;
    gap:8px!important;
  }
  #notificationsDialog .notifications-actions .btn{
    width:100%!important;
    min-height:44px!important;
  }
  #notificationsDialog .notification-setup-card{
    width:100%!important;
  }
  #notificationsDialog .notifications-list,
  #notificationsDialog .notifications-list.has-scroll{
    display:flex!important;
    flex-direction:column!important;
    gap:8px!important;
    width:100%!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
    padding:0 0 10px!important;
    margin:0!important;
  }
  #notificationsDialog .notification-item{
    flex:0 0 auto!important;
    width:100%!important;
    max-width:100%!important;
  }
}
@media (max-width:420px){
  #notificationsDialog .notifications-actions{grid-template-columns:1fr!important}
}