/* twittsocial.com V4.10.77 — mobile scrolling + runtime stability layer. */
:root{
  --sp-runtime-vh:100dvh;
  --sp-runtime-scroll-thumb:rgba(100,116,139,.30);
  --sp-runtime-scroll-thumb-hover:rgba(71,85,105,.48);
}
.sp-theme-dark,.sp-theme-dark-root{
  --sp-runtime-scroll-thumb:rgba(148,163,184,.30);
  --sp-runtime-scroll-thumb-hover:rgba(203,213,225,.45);
}

/* Do not reserve a permanent scrollbar lane. Several older component layers
   requested a stable gutter, which created a visible empty strip on narrow UIs. */
html,body,body *{scrollbar-gutter:auto!important}
html,body{max-width:100%;overflow-x:clip}
@supports not (overflow:clip){html,body{overflow-x:hidden}}

/* One canonical page lock. Older components can still toggle their own classes;
   this final layer prevents one modal from unlocking the page while another is open. */
html.sp-runtime-scroll-lock,
html.sp-runtime-scroll-lock body,
body.sp-runtime-scroll-lock{
  overflow:hidden!important;
  overscroll-behavior:none!important;
}

/* Only real scroll surfaces receive a visible scrollbar. Keep it subtle. */
:where(
  html,body,
  .sp-dialog-comments-scroll,.sp-comments-list,.sp-comments-dialog .sp-dialog-post-text,
  #sp-post-modal .sp-modal-body,.sp-modal-body,
  .sp-chat-scroll,.sp-messenger-conversations,.sp-chat-drawer-list,
  .sp-right-chat-list,.sp-right .sp-sticky,
  .sp-admgr-step,.sp-ad-wallet-modal,.sp-ad-wallet-history,.sp-admgr-table-wrap,.sp-dv-table-wrap,
  .sp-live-channel-list,.sp-live-chat-messages,.sp-live-studio-body,
  .sp-mobile-drawer-nav,.sp-notifications-list,.sp-settings-page
){
  scrollbar-width:thin!important;
  scrollbar-color:var(--sp-runtime-scroll-thumb) transparent!important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

/* Override older 5–8px component scrollbars, including ID-specific rules. */
html body #sp-post-modal .sp-modal-body::-webkit-scrollbar,
html body .sp-comments-dialog .sp-dialog-comments-scroll::-webkit-scrollbar,
html body .sp-comments-dialog .sp-dialog-post-text::-webkit-scrollbar,
html body .sp-comments-list::-webkit-scrollbar,
html body .sp-chat-scroll::-webkit-scrollbar,
html body .sp-messenger-conversations::-webkit-scrollbar,
html body .sp-chat-drawer-list::-webkit-scrollbar,
html body .sp-right-chat-list::-webkit-scrollbar,
html body .sp-right .sp-sticky::-webkit-scrollbar,
html body .sp-admgr-step::-webkit-scrollbar,
html body .sp-ad-wallet-modal::-webkit-scrollbar,
html body .sp-ad-wallet-history::-webkit-scrollbar,
html body .sp-admgr-table-wrap::-webkit-scrollbar,
html body .sp-dv-table-wrap::-webkit-scrollbar,
html body .sp-live-channel-list::-webkit-scrollbar,
html body .sp-live-chat-messages::-webkit-scrollbar,
html body .sp-live-studio-body::-webkit-scrollbar,
html body .sp-mobile-drawer-nav::-webkit-scrollbar{
  width:3px!important;
  height:3px!important;
}
html body #sp-post-modal .sp-modal-body::-webkit-scrollbar-track,
html body .sp-comments-dialog .sp-dialog-comments-scroll::-webkit-scrollbar-track,
html body .sp-comments-dialog .sp-dialog-post-text::-webkit-scrollbar-track,
html body .sp-comments-list::-webkit-scrollbar-track,
html body .sp-chat-scroll::-webkit-scrollbar-track,
html body .sp-messenger-conversations::-webkit-scrollbar-track,
html body .sp-chat-drawer-list::-webkit-scrollbar-track,
html body .sp-right-chat-list::-webkit-scrollbar-track,
html body .sp-right .sp-sticky::-webkit-scrollbar-track,
html body .sp-admgr-step::-webkit-scrollbar-track,
html body .sp-ad-wallet-modal::-webkit-scrollbar-track,
html body .sp-ad-wallet-history::-webkit-scrollbar-track,
html body .sp-live-channel-list::-webkit-scrollbar-track,
html body .sp-live-chat-messages::-webkit-scrollbar-track,
html body .sp-live-studio-body::-webkit-scrollbar-track,
html body .sp-mobile-drawer-nav::-webkit-scrollbar-track{background:transparent!important}
html body #sp-post-modal .sp-modal-body::-webkit-scrollbar-thumb,
html body .sp-comments-dialog .sp-dialog-comments-scroll::-webkit-scrollbar-thumb,
html body .sp-comments-dialog .sp-dialog-post-text::-webkit-scrollbar-thumb,
html body .sp-comments-list::-webkit-scrollbar-thumb,
html body .sp-chat-scroll::-webkit-scrollbar-thumb,
html body .sp-messenger-conversations::-webkit-scrollbar-thumb,
html body .sp-chat-drawer-list::-webkit-scrollbar-thumb,
html body .sp-right-chat-list::-webkit-scrollbar-thumb,
html body .sp-right .sp-sticky::-webkit-scrollbar-thumb,
html body .sp-admgr-step::-webkit-scrollbar-thumb,
html body .sp-ad-wallet-modal::-webkit-scrollbar-thumb,
html body .sp-ad-wallet-history::-webkit-scrollbar-thumb,
html body .sp-live-channel-list::-webkit-scrollbar-thumb,
html body .sp-live-chat-messages::-webkit-scrollbar-thumb,
html body .sp-live-studio-body::-webkit-scrollbar-thumb,
html body .sp-mobile-drawer-nav::-webkit-scrollbar-thumb{
  background:var(--sp-runtime-scroll-thumb)!important;
  border:0!important;
  border-radius:999px!important;
  min-height:24px;
}

/* Horizontal chip/tab rails should never show an ugly second scrollbar. */
:where(.sp-profile-tabs,.sp-admgr-tabs,.sp-live-tabs,.sp-stories,.sp-composer-actions,.sp-mobile-tab-rail){
  scrollbar-width:none!important;
  -ms-overflow-style:none;
}
:where(.sp-profile-tabs,.sp-admgr-tabs,.sp-live-tabs,.sp-stories,.sp-composer-actions,.sp-mobile-tab-rail)::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}

/* Prevent a wide child from growing the page itself; tables/rails keep local scrolling. */
:where(.sp-shell,.sp-feed,.sp-app-page,.sp-post-card,.sp-comments-dialog,.sp-messages-page,.sp-messenger-shell,
.sp-dashboard-page,.sp-dv-shell,.sp-dv-workspace,.sp-admgr,.sp-settings-page,.sp-profile-page,.sp-live-page){
  min-width:0!important;
  max-width:100%;
}
:where(.sp-admgr-table-wrap,.sp-dv-table-wrap,.sp-profile-tabs,.sp-admgr-tabs,.sp-live-tabs){max-width:100%;overflow-x:auto;overflow-y:hidden}

@media(max-width:860px){
  html body #sp-post-modal .sp-modal-body::-webkit-scrollbar,
  html body .sp-comments-dialog .sp-dialog-comments-scroll::-webkit-scrollbar,
  html body .sp-comments-dialog .sp-dialog-post-text::-webkit-scrollbar,
  html body .sp-comments-list::-webkit-scrollbar,
  html body .sp-chat-scroll::-webkit-scrollbar,
  html body .sp-messenger-conversations::-webkit-scrollbar,
  html body .sp-chat-drawer-list::-webkit-scrollbar,
  html body .sp-right-chat-list::-webkit-scrollbar,
  html body .sp-admgr-step::-webkit-scrollbar,
  html body .sp-ad-wallet-modal::-webkit-scrollbar,
  html body .sp-live-channel-list::-webkit-scrollbar,
  html body .sp-live-chat-messages::-webkit-scrollbar,
  html body .sp-live-studio-body::-webkit-scrollbar,
  html body .sp-mobile-drawer-nav::-webkit-scrollbar{width:2px!important;height:2px!important}

  body.sp-runtime-scroll-lock{touch-action:none!important}

  /* Use the visible viewport rather than stale 100vh when browser chrome or the
     on-screen keyboard changes height. */
  .sp-call-layer:not([hidden]),
  .sp-live-studio-modal:not([hidden]),
  .sp-live-viewer-modal:not([hidden]),
  #sp-comments-modal.is-open,
  .sp-mobile-drawer{
    max-height:var(--sp-runtime-vh,100dvh)!important;
  }
  .sp-call-layer:not([hidden]),
  .sp-live-studio-modal:not([hidden]),
  .sp-live-viewer-modal:not([hidden]){height:var(--sp-runtime-vh,100dvh)!important}
  .sp-call-window,
  .sp-live-studio-dialog,
  .sp-live-viewer-dialog{max-height:var(--sp-runtime-vh,100dvh)!important}
  .sp-live-studio-dialog,.sp-live-viewer-dialog{height:var(--sp-runtime-vh,100dvh)!important}
  .sp-mobile-drawer{height:var(--sp-runtime-vh,100dvh)!important;bottom:auto!important}
  #sp-comments-modal.is-open .sp-comments-dialog{max-height:calc(var(--sp-runtime-vh,100dvh) - max(0px,env(safe-area-inset-top)))!important}

  /* Native touch scrolling inside sheets; no horizontal page drift. */
  :where(.sp-dialog-comments-scroll,.sp-chat-scroll,.sp-messenger-conversations,.sp-live-chat-messages,
  .sp-live-studio-body,.sp-mobile-drawer-nav,.sp-admgr-step,.sp-ad-wallet-modal,#sp-post-modal .sp-modal-body){
    touch-action:pan-y!important;
    overflow-x:hidden!important;
  }
}

@media(prefers-reduced-motion:reduce){
  :where(.sp-dialog-comments-scroll,.sp-chat-scroll,.sp-live-chat-messages){scroll-behavior:auto!important}
}

/* When the mobile feed has no visible modal/drawer, it must remain a normal
   document scroll surface. This overrides stale lock classes from older layers. */
@media(max-width:860px){
  html.sp-runtime-scroll-free,
  html.sp-runtime-scroll-free body,
  body.sp-runtime-scroll-free{
    overflow-y:auto!important;
    overscroll-behavior-y:auto!important;
    touch-action:pan-y!important;
    height:auto!important;
    max-height:none!important;
  }
}

/* ==========================================================
   V4.10.75 — Profile + Dashboard mobile document scrolling
   ========================================================== */
@media(max-width:860px){
  /* Profile and Dashboard are ordinary document-scroll routes. When no real
     modal/drawer is open, never let an older component lock the root page. */
  html.sp-runtime-scroll-free,
  html.sp-runtime-scroll-free body,
  body.sp-runtime-scroll-free{
    overflow-y:auto!important;
    overflow-x:clip!important;
    overscroll-behavior-y:auto!important;
    touch-action:pan-y!important;
    position:static!important;
    height:auto!important;
    min-height:100%!important;
    max-height:none!important;
  }

  html.sp-runtime-scroll-free body.sp-profile-route .sp-profile-page,
  html.sp-runtime-scroll-free body.sp-dashboard-route .sp-dv-shell,
  html.sp-runtime-scroll-free body.sp-dashboard-route .sp-dv-workspace{
    overflow:visible!important;
    overflow-y:visible!important;
    height:auto!important;
    max-height:none!important;
    touch-action:pan-y!important;
    overscroll-behavior-y:auto!important;
  }

  body.sp-profile-route .sp-profile-page,
  body.sp-profile-route .sp-profile-main-grid,
  body.sp-profile-route .sp-profile-feed-column,
  body.sp-dashboard-route .sp-dv-shell,
  body.sp-dashboard-route .sp-dv-workspace{
    min-width:0!important;
    max-width:100%!important;
  }

  /* Keep only the horizontal rails horizontal; they must not steal vertical
     page gestures on touch screens. */
  body.sp-profile-route .sp-profile-tabs,
  body.sp-profile-route .sp-profile-suggestion-row,
  body.sp-dashboard-route .sp-dv-nav{
    touch-action:pan-x pan-y!important;
    overscroll-behavior-x:contain!important;
    -webkit-overflow-scrolling:touch!important;
  }

  /* Dashboard controls must always sit above decorative layers and accept taps. */
  body.sp-dashboard-route [data-dashboard-shell],
  body.sp-dashboard-route [data-dash-workspace]{
    pointer-events:auto!important;
  }
  body.sp-dashboard-route [data-dashboard-shell] :is(a,button,input,select,textarea,label,[role="button"]){
    pointer-events:auto!important;
  }
  body.sp-dashboard-route .sp-dv-sidebar{
    max-width:100vw!important;
  }
  body.sp-dashboard-route .sp-dv-nav{
    width:100%!important;
    max-width:100vw!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:none!important;
  }
  body.sp-dashboard-route .sp-dv-nav::-webkit-scrollbar{display:none!important}
}


/* ==========================================================
   V4.10.77 — Groups + Pages mobile document scrolling
   ========================================================== */
@media(max-width:860px){
  /* Groups and Pages are normal document-scroll routes whenever no real modal,
     drawer, call or live viewer is open. This also wins over the older
     body.sp-group-composer-open{overflow:hidden} rule when that class is stale. */
  html.sp-runtime-scroll-free body.sp-group-route,
  html.sp-runtime-scroll-free body.sp-pages-route,
  body.sp-group-route.sp-runtime-scroll-free,
  body.sp-pages-route.sp-runtime-scroll-free{
    overflow-y:auto!important;
    overflow-x:clip!important;
    touch-action:pan-y!important;
    overscroll-behavior-y:auto!important;
    position:static!important;
    height:auto!important;
    min-height:100%!important;
    max-height:none!important;
  }

  html.sp-runtime-scroll-free body.sp-group-route :is(
    .sp-shell,.sp-group-page,.sp-groups-directory,.sp-group-content-grid,
    .sp-group-main,.sp-group-sidebar,.sp-page-system,.sp-page-profile,
    .sp-page-prodash,.sp-page-prodash-main
  ),
  html.sp-runtime-scroll-free body.sp-pages-route :is(
    .sp-shell,.sp-group-page,.sp-groups-directory,.sp-group-content-grid,
    .sp-group-main,.sp-group-sidebar,.sp-page-system,.sp-page-profile,
    .sp-page-prodash,.sp-page-prodash-main
  ){
    height:auto!important;
    max-height:none!important;
    overflow-y:visible!important;
    touch-action:pan-y!important;
    overscroll-behavior-y:auto!important;
  }

  /* Mobile group/page sidebars must participate in the document instead of
     becoming a sticky gesture surface. */
  body.sp-group-route .sp-group-sidebar,
  body.sp-pages-route .sp-group-sidebar{
    position:static!important;
    top:auto!important;
  }

  /* Only these rails should scroll horizontally; allow vertical swipes to pass
     through to the document so a finger starting on a tab still scrolls page. */
  body.sp-group-route :is(.sp-group-tabs,.sp-group-profile-tabs,.sp-group-preview-info nav,.sp-page-prodash-nav),
  body.sp-pages-route :is(.sp-group-tabs,.sp-group-profile-tabs,.sp-group-preview-info nav,.sp-page-prodash-nav){
    touch-action:pan-x pan-y!important;
    overscroll-behavior-x:contain!important;
    -webkit-overflow-scrolling:touch!important;
  }

  body.sp-group-route :is(.sp-shell,.sp-group-page,.sp-groups-directory,.sp-group-content-grid,.sp-group-main,.sp-group-sidebar),
  body.sp-pages-route :is(.sp-shell,.sp-group-page,.sp-groups-directory,.sp-group-content-grid,.sp-group-main,.sp-group-sidebar,.sp-page-system){
    min-width:0!important;
    max-width:100%!important;
  }
}