/* SladMir — unified UI state classes (visibility, interaction, fullscreen screens). */ /* ── Visibility (legacy .hidden kept for compatibility) ── */ .hidden, .is-hidden { display: none !important; } /* ── Open / selected / busy / inactive ── */ .is-open { /* Marker: layout rules live on component or body[data-screen]. */ } .is-active { /* Pair with nav/tab styles; color/background on the host block. */ } .is-loading { pointer-events: none; cursor: wait; opacity: 0.65; } .is-disabled, .is-disabled:disabled { pointer-events: none; opacity: 0.45; cursor: not-allowed; } /* ── Fullscreen overlay screens (body[data-screen="…"] drives visibility) ── */ body[data-screen="support"], body[data-screen="manager-notifications"] { overflow: hidden; } .ui-fullscreen-screen { display: none; position: fixed; inset: 0; z-index: 320; box-sizing: border-box; background: #f8f9fb; } body[data-screen="support"] #mini-support-section.ui-fullscreen-screen, body[data-screen="manager-notifications"] #mini-mgr-notif-section.ui-fullscreen-screen { display: flex; } body[data-screen="manager-notifications"] #mini-mgr-notif-section.ui-fullscreen-screen { flex-direction: column; } /* ── Document scroll lock (JS: scroll-lock.js toggles classes; not tied to data-app-state) ── */ /* * iOS Safari PWA (standalone): rubber-band scroll on shifts the layout viewport * so position:fixed overlays (startup loader, auth gate) drift; after auth the main * shell can appear scrolled or with a blank gap. position:fixed on body prevents that * drift. Removed while an auth input is focused so the virtual keyboard does not jump. */ body.mini-app-page.is-scroll-locked { overflow: hidden; touch-action: none; } html.pwa-standalone body.mini-app-page.is-scroll-locked.is-ios-pwa-scroll-locked { position: fixed; inset: 0; width: 100%; } /* Pull-to-refresh indicator (app-gestures.js) */ .mini-ptr-indicator { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 8px); left: 50%; z-index: 12000; display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.94); box-shadow: 0 4px 18px rgba(15, 23, 42, 0.12); pointer-events: none; transition: opacity 0.15s ease; } .mini-ptr-indicator__ring { width: 16px; height: 16px; border: 2px solid #cbd5e1; border-top-color: #2563eb; border-radius: 50%; flex-shrink: 0; } .mini-ptr-indicator--ready .mini-ptr-indicator__ring { border-top-color: #16a34a; } .mini-ptr-indicator--loading .mini-ptr-indicator__ring { animation: mini-ptr-spin 0.7s linear infinite; } .mini-ptr-indicator__label { font-size: 13px; line-height: 1.2; color: #334155; white-space: nowrap; } @keyframes mini-ptr-spin { to { transform: rotate(360deg); } }