/* NiceSlides.ru V430 — mobile vertical touch + full-width cabinet + compact modal. */

/* =========================================================
   1) HOME GENERATOR TEMPLATE RAIL
   Legacy redesign-v285/v286 says touch-action:pan-x!important,
   which blocks vertical page scrolling if the swipe starts here.
   Keep native horizontal overflow, but allow browser to decide both axes.
   ========================================================= */
@media(max-width:900px){
  html body main #generator.generator-card-v275 .template-grid-v282,
  html body main #generator .template-grid.template-grid-v204.template-grid-v282{
    touch-action:auto!important;
    overscroll-behavior-x:contain!important;
    overscroll-behavior-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
  }

  /* Same problem inside the cabinet "new presentation" template picker. */
  body.cabinet-body-v410 .cab-template-picker-v228 .template-carousel,
  body.cabinet-body-v410 .cab-template-picker-v228 .template-grid,
  body.cabinet-body-v410 .cab-template-picker-v93 .template-carousel,
  body.cabinet-body-v410 .cab-template-picker-v93 .template-grid{
    touch-action:auto!important;
    overscroll-behavior-x:contain!important;
    overscroll-behavior-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
  }
}

/* =========================================================
   2) CABINET DESKTOP: USE AVAILABLE WIDTH
   account-v226 caps the content shell at 1180px. On a wide monitor
   that creates a large dead strip on the right/left of the main area.
   ========================================================= */
@media(min-width:1181px){
  html body.cabinet-body-v410 .cab-main-v226 > .shell{
    width:calc(100% - 32px)!important;
    max-width:none!important;
    margin-left:16px!important;
    margin-right:16px!important;
  }

  html body.cabinet-body-v410 .cabinet-grid-v61{
    width:100%!important;
    max-width:none!important;
    grid-template-columns:minmax(0,1fr) 320px!important;
    gap:16px!important;
  }

  html body.cabinet-body-v410 .cabinet-hero-v61,
  html body.cabinet-body-v410 .cabinet-summary-v61,
  html body.cabinet-body-v410 .cabinet-works-v61{
    width:100%!important;
    max-width:none!important;
  }
}

/* =========================================================
   3) GENERATION MODAL
   Desktop: smaller.
   Mobile: the OVERLAY scrolls vertically. This is more reliable
   than centering an internally scrolling dialog on short phones.
   ========================================================= */
html body > #genModal.gen-modal.public-generation-modal-v137.generation-modal-v228{
  touch-action:pan-y!important;
  overscroll-behavior-y:contain!important;
}
html body > #genModal.generation-modal-v228 > .gen-dialog.gen-dialog-v228{
  width:min(560px,calc(100vw - 24px))!important;
  max-width:560px!important;
  max-height:calc(100dvh - 24px)!important;
  padding:54px 18px 18px!important;
  border-radius:20px!important;
}
html body > #genModal .gen-orbit.gen-orbit-v228{
  top:1px!important;
  width:88px!important;
  height:54px!important;
}
html body > #genModal .gen-orbit.gen-orbit-v228 img{
  width:82px!important;
  height:61px!important;
}
html body > #genModal .gen-dialog-v228 > #genTitle{
  font-size:25px!important;
  line-height:1.05!important;
  margin-bottom:4px!important;
}
html body > #genModal .gen-dialog-v228 > #genStatus{
  font-size:11.5px!important;
  line-height:1.3!important;
  margin-bottom:10px!important;
}
html body > #genModal .gen-dialog-v228 > .progress{
  height:8px!important;
  margin-bottom:14px!important;
}
html body > #genModal .stage-list.stage-list-v228{
  gap:5px!important;
}
html body > #genModal .stage-list-v228::before{
  top:22px!important;
}
html body > #genModal .stage-list-v228 .stage-icon{
  width:44px!important;
  height:44px!important;
  padding:4px!important;
  border-radius:12px!important;
}
html body > #genModal .stage-list-v228 .stage-icon img{
  width:34px!important;
  height:34px!important;
}
html body > #genModal .stage-list-v228 em{
  font-size:8.5px!important;
  line-height:1.1!important;
}
html body > #genModal .stage-list-v228 > span.done::after{
  right:calc(50% - 23px)!important;
  width:15px!important;
  height:15px!important;
  font-size:8px!important;
}

/* Mobile overlay scroll, including short screens and browser UI resizing. */
@media(max-width:760px){
  html,body{
    overscroll-behavior-y:auto;
  }

  html body > #genModal.gen-modal.public-generation-modal-v137.generation-modal-v228{
    display:flex!important;
    align-items:flex-start!important;
    justify-content:center!important;
    width:100vw!important;
    height:100dvh!important;
    min-height:100dvh!important;
    padding:6px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    touch-action:pan-y!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-y:contain!important;
  }

  html body > #genModal.gen-modal.public-generation-modal-v137.generation-modal-v228[hidden]{
    display:none!important;
  }

  html body > #genModal.generation-modal-v228 > .gen-dialog.gen-dialog-v228{
    flex:0 0 auto!important;
    width:calc(100vw - 12px)!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:6px auto!important;
    padding:50px 8px 12px!important;
    overflow:visible!important;
    touch-action:pan-y!important;
    overscroll-behavior-y:auto!important;
    border-radius:17px!important;
  }

  html body > #genModal .modal-x.modal-x-v228{
    top:7px!important;
    right:7px!important;
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
  }

  html body > #genModal .gen-orbit.gen-orbit-v228{
    width:80px!important;
    height:48px!important;
  }
  html body > #genModal .gen-orbit.gen-orbit-v228 img{
    width:74px!important;
    height:54px!important;
  }
  html body > #genModal .gen-dialog-v228 > #genTitle{
    font-size:19px!important;
  }
  html body > #genModal .gen-dialog-v228 > #genStatus{
    font-size:10px!important;
    margin-bottom:8px!important;
  }
  html body > #genModal .gen-dialog-v228 > .progress{
    height:7px!important;
    margin-bottom:10px!important;
  }
  html body > #genModal .stage-list.stage-list-v228{
    gap:1px!important;
  }
  html body > #genModal .stage-list-v228::before{
    top:18px!important;
  }
  html body > #genModal .stage-list-v228 .stage-icon{
    width:36px!important;
    height:36px!important;
    padding:3px!important;
    border-radius:10px!important;
  }
  html body > #genModal .stage-list-v228 .stage-icon img{
    width:28px!important;
    height:28px!important;
  }
  html body > #genModal .stage-list-v228 em{
    font-size:7px!important;
    min-height:15px!important;
  }
  html body > #genModal .stage-list-v228 > span.done::after{
    right:calc(50% - 19px)!important;
    width:13px!important;
    height:13px!important;
    font-size:7px!important;
  }
}

/* =========================================================
   4) PHONE CABINET HEADER + FRIENDS CARD
   Remove the mostly empty sticky top strip on a phone.
   Center the "За друзей" card as one visual group.
   ========================================================= */
@media(max-width:580px){
  html body.cabinet-body-v410 .cab-topbar-v226{
    display:none!important;
  }

  html body.cabinet-body-v410 .cab-main-v226{
    padding-top:6px!important;
  }

  html body.cabinet-body-v410 .cabinet-summary-v61 .cab-summary-friends-v258{
    display:grid!important;
    grid-template-columns:40px auto!important;
    justify-content:center!important;
    align-items:center!important;
    column-gap:10px!important;
    text-align:center!important;
    width:100%!important;
  }

  html body.cabinet-body-v410 .cabinet-summary-v61 .cab-summary-friends-v258 > div{
    width:auto!important;
    min-width:0!important;
    text-align:center!important;
    justify-items:center!important;
  }

  html body.cabinet-body-v410 .cabinet-summary-v61 .cab-summary-friends-v258 small,
  html body.cabinet-body-v410 .cabinet-summary-v61 .cab-summary-friends-v258 b,
  html body.cabinet-body-v410 .cabinet-summary-v61 .cab-summary-friends-v258 span{
    text-align:center!important;
  }
}