/* SARASOFT ALL-PAGES RESPONSIVE PATCH v1.0.0 — additive global mobile rules */
:root{--sarasoft-mobile-gutter:clamp(12px,3.5vw,20px);--sarasoft-mobile-safe-bottom:env(safe-area-inset-bottom,0px)}
html{max-width:100%;overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{max-width:100%;min-width:0;overflow-x:clip}
body.nikrad-app *,body.nikrad-app *::before,body.nikrad-app *::after{box-sizing:border-box}
img,video,iframe,svg,canvas{max-width:100%}
pre,code{max-width:100%;overflow-wrap:anywhere}
table{max-width:100%}
/* Avoid flex/grid children forcing a page wider than the viewport. */
.device,main,header,footer,section,article,aside,nav,form,.page,.page-content,.content,.container,.wrap,.wrapper,.main-content,.content-wrap,.app-content,.dashboard,.kb-page,.community-page,.podcast-page,.profile-page{min-width:0}
@media(max-width:767px){
  /* No bottom navigation/footer bar on mobile, on every page. */
  .mkt-tabbar,.pre-auth-tabbar,.tabbar,.mobile-tabbar,.bottom-nav,.bottom-navigation,.bottom-navbar,#footer-spacer{display:none!important;height:0!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important}
  .mkt-footer{padding-bottom:16px!important}
  body{padding-bottom:0!important}
  .device{width:100%!important;max-width:100%!important;margin:0!important;border-radius:0!important}
  .app-header{width:100%;max-width:100%;padding-inline:10px!important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;gap:4px!important}
  .header-zone{gap:3px!important;min-width:0!important}
  .header-icon,.header-avatar{flex-shrink:0}
  .header-brand{min-width:0!important;max-width:100%!important;gap:5px!important}
  .header-brand-copy{max-width:clamp(70px,30vw,150px)!important;min-width:0!important}
  .header-brand-copy strong,.header-brand-copy small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  main,main.page,.page-content,.content-wrap,.main-content{max-width:100%!important;min-width:0!important}
  .page,.page-content,.content,.container,.wrap,.wrapper,.main-content,.content-wrap,.app-content{width:100%;max-width:100%!important;margin-inline:auto!important;padding-inline:var(--sarasoft-mobile-gutter)!important}
  .hero h1,h1{font-size:clamp(20px,5.7vw,28px);line-height:1.5;overflow-wrap:anywhere}
  h2{font-size:clamp(17px,4.8vw,23px);line-height:1.55;overflow-wrap:anywhere}
  p,li,label,.lead,.description{overflow-wrap:anywhere}
  /* Common cards and dashboard/stat layouts. */
  .grid,.cards-grid,.stats-grid,.dashboard-grid,.features-grid,.plans-grid,.pricing-grid,.community-grid,.kb-grid,.podcast-grid{grid-template-columns:minmax(0,1fr)!important}
  /* SARASOFT_FIXPACK_V2 — KPI/stat rows keep 2 cols on mobile (was crushed to 1) */
  .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  @media(min-width:768px){.stat-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
  .row,.flex-row{flex-wrap:wrap;min-width:0}
  .card,.panel,.stat-card,.doc-card,.player-card,.feature-card,.plan-card,.post-card,.topic-card{min-width:0;max-width:100%;overflow-wrap:anywhere}
  input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{max-width:100%;min-width:0;font-size:16px}
  button,.btn,.button{max-width:100%;white-space:normal;overflow-wrap:anywhere}
  /* SARASOFT_FIXPACK_V2 — table: keep scroll inside wrappers, don't force max-content everywhere */
  .table-wrap,.table-responsive,.overflow-x-auto{max-width:100%;overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  table{max-width:100%;border-collapse:collapse}
  .answer table,.msg table,.message-body table,.table-wrap table,.table-responsive table{width:max-content;min-width:min(100%,60vw)}
  /* Dialogs and drawers fit inside the visible viewport. */
  dialog,[role=dialog],.modal,.modal-dialog,.modal-content,.drawer,.side-drawer,.menu-overlay,.overlay-panel{max-width:100vw;box-sizing:border-box}
  .modal,.modal-dialog,.modal-content,[role=dialog]{max-height:calc(100dvh - 24px - var(--sarasoft-mobile-safe-bottom));overflow-y:auto;-webkit-overflow-scrolling:touch}
  .modal-dialog,.modal-content{width:calc(100vw - 24px);margin-inline:auto}
  /* Media pages, document viewers and embedded content. */
  .video-container,.video-wrapper,.embed-container,.document-viewer,.player-card{max-width:100%;min-width:0}
  iframe,video{width:100%;max-width:100%}
  .mkt-footer{max-width:100%;overflow-wrap:anywhere}
}
@media(max-width:420px){
  .app-header{height:60px!important;padding:6px 7px!important}
  .header-icon,.header-avatar{width:36px!important;height:36px!important;flex-basis:36px!important;border-radius:11px!important}
  .header-icon svg{width:19px!important;height:19px!important}
  .header-logo-frame{width:36px!important;height:36px!important;flex-basis:36px!important;border-radius:10px!important}
  .header-brand-copy small{display:none!important}
  .page,.page-content,.content,.container,.wrap,.wrapper,.main-content,.content-wrap,.app-content{padding-inline:11px!important}
  .card,.panel,.stat-card,.doc-card,.player-card,.feature-card,.plan-card,.post-card,.topic-card{border-radius:14px!important}
  .actions,.page-actions,.toolbar,.filter-row{flex-wrap:wrap;max-width:100%}
}
/* GLOBAL MOBILE PAGE SCROLL FIX v1.0.1
   Let regular pages grow and scroll naturally on mobile. Preserve chat's internal #scroll area. */
@media (max-width: 767px) {
  html:not(:has(body:has(#composerInput))) {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: clip !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  body.nikrad-app:not(:has(#composerInput)) {
    display: block !important;
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow-x: clip !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto !important;
    touch-action: pan-y !important;
  }
  body.nikrad-app:not(:has(#composerInput)) .device {
    display: flow-root !important;
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow: visible !important;
    flex: none !important;
  }
  body.nikrad-app:not(:has(#composerInput)) #scroll {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    -webkit-overflow-scrolling: auto !important;
    touch-action: pan-y !important;
  }
}