/* One place for phone page width and persistent navigation dimensions. */
:root { --sx-page-width: 360px; --sx-nav-height: 56px; }
@media (max-width: 600px) {
  :root { --sx-page-width: 100%; }
  html, body { width: 100%; max-width: 100%; }
  html body { margin: 0 !important; }
  html body .sx-shell,
  html body .sx-bottom,
  html body .sx-detail-bottom,
  html body.shortfeed-page .shortfeed-shell,
  html body:has(#member) .member-wrap,
  html body:has(#play_page) #play_page,
  html body#upgrade.body-buy-upgrade-combo #mac-user-buy-root,
  html body#reg.auth-ui-page .show-mobile,
  html body#reg.auth-ui-page .auth-page-layout,
  html body#reg.auth-ui-page #ui-nav {
    width: var(--sx-page-width) !important;
    max-width: var(--sx-page-width) !important;
  }
  html body:has(#member) .foot .container { max-width: 100% !important; }
  html body.sx-detail-page #sxPanelComments .part_rows_fa,
  html .sx-nav-progress { width: var(--sx-page-width) !important; }
  html body .sx-bottom .sx-tabs { height: var(--sx-nav-height) !important; }
  html body .sx-bottom .sx-tabs .sx-icon { width: 27px !important; height: 27px !important; }
  html body .sx-bottom .sx-tabs a { gap: 4px; }
  html body.sx-feed-page .sx-feed-frame { height: calc(100dvh - var(--sx-app-height, 54px) - var(--sx-nav-height)) !important; }
  html body.sx-feed-page:not(:has(.sx-app)) .sx-feed-frame { height: calc(100dvh - var(--sx-nav-height)) !important; }
  html body .sx-pull-status {
    display: flex; align-items: center; justify-content: center;
    position: fixed; top: 56px; left: 50%; z-index: 25;
    width: var(--sx-page-width); max-width: var(--sx-page-width);
    height: 38px; padding: 0; border: 0; border-radius: 0 0 10px 10px;
    background: #171711f2; box-shadow: 0 7px 15px #0007;
    opacity: 0; pointer-events: none;
    transform: translate(-50%, -110%);
    transition: transform .22s ease, opacity .22s ease;
  }
  html body .sx-pull-status.is-visible { display: flex; opacity: 1; transform: translate(-50%, 0); }
  .sx-pull-status__ring { display: block; width: 18px; height: 18px; border: 2px solid #746525; border-top-color: #ffd314; border-radius: 50%; transform: rotate(var(--sx-pull-angle, 0deg)); }
  .sx-pull-status[data-state="loading"] .sx-pull-status__ring { animation: sx-pull-spin .7s linear infinite; }
  .sx-pull-status[data-state="done"] .sx-pull-status__ring,
  .sx-pull-status[data-state="error"] .sx-pull-status__ring { border: 0; width: 20px; height: 20px; animation: none; transform: none; }
  .sx-pull-status[data-state="done"] .sx-pull-status__ring:after { content: '✓'; color: #ffd314; font-size: 19px; line-height: 20px; }
  .sx-pull-status[data-state="error"] .sx-pull-status__ring:after { content: '!'; color: #ff9b69; font-size: 19px; line-height: 20px; }
  .sx-pull-status__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #ffd314; transform-origin: left; transform: scaleX(var(--sx-pull-progress, 0)); }
  @keyframes sx-pull-spin { to { transform: rotate(360deg); } }
}