/* ═══════════════════════════════════════════════════════════════════════════ MOBILE RESCUE — V25.7.63 ---------------------------------------------------------------------------- PROBLEM The site became unusable on phones because of stacked z-index conflicts: • `.modal` (login / register) is z-index 3000. • Promotional overlays (dailyMotivationPopup z=10000, help-widget modals z=10001, p0-ux-polish modal z=40010, rpg-paint explainer z=30050, etc.) were sitting ON TOP OF the login modal — so users could see the login fields but every tap was being eaten by the invisible overlay above. • Help / chat bubbles (z=1998-2000) were buried below any open overlay. • Drag handlers (rpg-paint, studio-wave) occasionally left `body{user-select:none}` after touchcancel, blocking the on-screen keyboard from appearing. FIX Loaded LAST in so these rules win the cascade. All `!important` here is INTENTIONAL — we are overriding inline styles set by third-party widgets at runtime. ═══════════════════════════════════════════════════════════════════════════ */ /* 1. LOGIN/REGISTER MODAL ALWAYS WINS — above every promo overlay. */ .modal.active { z-index: 100000 !important; } .modal.active .modal-content { position: relative !important; z-index: 100001 !important; pointer-events: auto !important; } /* 2. Anything INSIDE the active modal is guaranteed tappable + typeable. */ .modal.active input, .modal.active textarea, .modal.active select, .modal.active button, .modal.active a, .modal.active label, .modal.active .login-type-card { pointer-events: auto !important; touch-action: manipulation !important; -webkit-user-select: text !important; user-select: text !important; -webkit-tap-highlight-color: rgba(251, 191, 36, 0.35); } /* 3. Inputs must always accept focus + show the on-screen keyboard. */ input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="search"], input[type="url"], input[type="number"], textarea, select, .form-input, .form-select, .form-textarea { pointer-events: auto !important; touch-action: manipulation !important; -webkit-user-select: text !important; user-select: text !important; -webkit-touch-callout: default !important; /* Prevent iOS zoom-on-focus by guaranteeing >=16px on mobile. */ font-size: max(16px, 1rem); } /* 4. Help button + AI chat toggle — never bury them under overlays. */ .help-button, #helpWidget, #helpWidgetButton, #chatWidgetButton, #aiChatToggle, #oracleCrystalBubble, [data-testid="help-bubble"], [data-testid="ai-chat-toggle"] { z-index: 30000 !important; pointer-events: auto !important; } /* 5. Open chat/help PANEL — above promo overlays but below login modal. */ #aiChatWindow, #helpWidgetPanel, #chatWidgetPanel { z-index: 30001 !important; } /* 6. Mobile-portrait safety — re-state the most important fixes inside the tightest media query so nothing else in styles.css can override them. */ @media (max-width: 767px) { /* The dismiss-all pill from overlay-traffic-cop needs to clear the top-nav (which is z=2000) AND the login modal (now z=100000). */ #dismissAllPill { z-index: 100002 !important; } /* Bubbles always above the bottom nav + role switcher on mobile. */ .help-button, #helpWidget, #helpWidgetButton, #aiChatToggle, #chatWidgetButton { bottom: max(95px, env(safe-area-inset-bottom, 0) + 95px) !important; } /* Ensure the modal content scrolls + body doesn't get touch-locked. */ .modal.active { overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; } .modal.active .modal-content { max-height: 88vh !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; } /* Inputs in the login modal must be tap-target friendly. */ .modal.active .form-input, .modal.active input, .modal.active textarea { min-height: 44px; font-size: 16px !important; /* prevents iOS auto-zoom */ } } /* 7. Defensive: body must never permanently lock user-select. Drag handlers that set body{user-select:none} on touchstart now have a sibling rule in mobile-rescue.js that clears it on focusin. This CSS guarantees that if a stuck inline style is left behind, inputs still let you type. */ body input, body textarea, body [contenteditable="true"] { -webkit-user-select: text !important; user-select: text !important; } /* 8. Bottom-nav + version-badge must NOT consume taps over inputs. Make sure the version badge wraps tightly and doesn't bleed into the first form field on small screens. */ @media (max-width: 575px) { #versionBadge { max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } /* 9. PASSWORD-TOGGLE FIX (V25.7.63 — user-reported on production). The eye-toggle `` was sitting absolute over the password input with `padding:5px` and no width cap. iOS Safari's 44×44 minimum tap-target was extending it to cover ~18% of the input's right side, and when iOS auto-advanced focus from email → password the toggle stole the focus and the keyboard never opened. Fix: • Force password input to reserve 40px right padding so the toggle can sit fully INSIDE the input's padding zone — never overlapping the text area. • Cap the toggle to a 32×32 hit target, anchor at right: 6px. • Toggle is the only thing inside .password-container that should intercept clicks — make the container's empty area pass-through. */ .password-container { position: relative; } .password-container > input.form-input, .password-container > input[type="password"], .password-container > input[type="text"] { padding-right: 44px !important; pointer-events: auto !important; touch-action: manipulation !important; } .password-toggle { position: absolute !important; right: 6px !important; top: 50% !important; transform: translateY(-50%) !important; width: 32px !important; height: 32px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; color: #fbbf24; font-size: 1.05rem !important; line-height: 1 !important; border-radius: 6px; /* iOS: prevent the toggle from being extended over the input text area. */ -webkit-tap-highlight-color: rgba(251, 191, 36, 0.35); z-index: 2; } /* On mobile, make the icon hit area visually distinct so users know it's the eye and not part of the field. */ @media (max-width: 767px) { .password-toggle { background: rgba(251, 191, 36, 0.08); border: 1px solid rgba(251, 191, 36, 0.2); } }