/* * Final responsive geometry policy. * * This file is the last built-in stylesheet in . Feature styles own * appearance; this layer owns viewport rotation, safe-area geometry and the * content space reserved by controls that touch a screen edge. * * The four always-true :not(#yan-rwd-guard-*) clauses are a specificity * guard. Imported appearance CSS can be auto-prefixed with several IDs and * !important; final geometry must still win without blocking inline keyboard * offsets, whose important declarations remain higher in the cascade. */ :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) { --yan-safe-top: max(env(safe-area-inset-top, 0px), var(--safe-top, 0px)); --yan-safe-right: max(env(safe-area-inset-right, 0px), var(--safe-right, 0px)); --yan-safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--safe-bottom, 0px)); --yan-safe-left: max(env(safe-area-inset-left, 0px), var(--safe-left, 0px)); --yan-effective-dock-height: var(--dock-height, 70px); --yan-effective-bottom-nav-offset: clamp(-30px, var(--bottom-nav-offset, 0px), 50px); --yan-wechat-bottom-gap: 5px; --yan-visual-bottom-obstruction: 0px; --yan-chat-keyboard-inset: 0px; --yan-wechat-nav-bottom-inset: var(--yan-safe-bottom); --yan-wechat-tab-content-lift: 0px; --yan-wechat-composer-bottom-inset: max(var(--yan-wechat-bottom-gap), var(--yan-safe-bottom)); /* 56px control row + the theme's 1px top divider + bottom inset. */ --yan-wechat-tabbar-height: calc(57px + var(--yan-wechat-nav-bottom-inset)); } /* iOS web and PWA keep the Home-indicator inset outside the 56px control row. The attached bar background stays on the screen edge; only the visible icon/label group is lifted without crossing the top of its 56px hit row when an iOS WebView reports no safe-area inset and the 12px fallback is used. */ html:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4).is-ios { --yan-wechat-nav-bottom-inset: max(12px, var(--yan-safe-bottom)); --yan-wechat-tab-content-lift: 9px; } /* In a normal iOS browser, VisualViewport supplies the part of #device hidden by Safari/Chrome UI. Safe area and browser obstruction overlap, so take max. */ html:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4).is-ios.is-browser:not(.is-capacitor) { --yan-wechat-nav-bottom-inset: max(12px, var(--yan-safe-bottom), var(--yan-visual-bottom-obstruction)); --yan-wechat-composer-bottom-inset: max(var(--yan-wechat-bottom-gap), var(--yan-safe-bottom), var(--yan-visual-bottom-obstruction)); } /* The software keyboard replaces the Home-indicator/browser-bar occlusion. Only the visual gap remains inside the composer; its real lift is on layer. */ html:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4).is-ios.is-browser.yan-ios-web-keyboard:not(.is-capacitor) { --yan-wechat-composer-bottom-inset: var(--yan-wechat-bottom-gap); } /* * Portrait-only canvas fallback for full-screen touch tablets. * * responsive-adapter.js supplies stable keyboard-free pixel dimensions and * excludes desktop, Stage Manager/split-screen and pages which intentionally * own a landscape layout (open world, relationship network and UNO). */ html:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4).yan-portrait-canvas.yan-landscape-primary:not(.yan-windowed):not(.mini-window):not(.yan-native-landscape-page):not(.ow-portrait-rotate), html:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4).yan-portrait-canvas.yan-landscape-secondary:not(.yan-windowed):not(.mini-window):not(.yan-native-landscape-page):not(.ow-portrait-rotate) { /* Remap the legacy viewport/guard variables used throughout feature CSS. */ --app-height: var(--yan-viewport-width, 100lvw) !important; --viewport-height: var(--yan-viewport-width, 100lvw) !important; --vh: 1vw !important; --guard-top: calc(var(--yan-safe-top) + 8px) !important; --guard-right: calc(var(--yan-safe-right) + 12px) !important; --guard-bottom: calc(var(--yan-safe-bottom) + 12px) !important; --guard-left: calc(var(--yan-safe-left) + 12px) !important; --safe-content-width: calc(var(--yan-viewport-height, 100lvh) - var(--guard-left) - var(--guard-right)) !important; --safe-content-height: calc(var(--yan-viewport-width, 100lvw) - var(--guard-top) - var(--guard-bottom)) !important; position: fixed !important; right: auto !important; bottom: auto !important; width: var(--yan-viewport-height, 100lvh) !important; height: var(--yan-viewport-width, 100lvw) !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important; margin: 0 !important; overflow: hidden !important; transform-origin: left top !important; } /* landscape-primary: visual bottom is the physical right edge. */ html:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4).yan-portrait-canvas.yan-landscape-primary:not(.yan-windowed):not(.mini-window):not(.yan-native-landscape-page):not(.ow-portrait-rotate) { --yan-safe-top: max(env(safe-area-inset-left, 0px), var(--safe-left, 0px)); --yan-safe-right: max(env(safe-area-inset-top, 0px), var(--safe-top, 0px)); --yan-safe-bottom: max(env(safe-area-inset-right, 0px), var(--safe-right, 0px)); --yan-safe-left: max(env(safe-area-inset-bottom, 0px), var(--safe-bottom, 0px)); top: var(--yan-viewport-height, 100lvh) !important; left: 0 !important; transform: rotate(-90deg) !important; } /* landscape-secondary: visual bottom is the physical left edge. */ html:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4).yan-portrait-canvas.yan-landscape-secondary:not(.yan-windowed):not(.mini-window):not(.yan-native-landscape-page):not(.ow-portrait-rotate) { --yan-safe-top: max(env(safe-area-inset-right, 0px), var(--safe-right, 0px)); --yan-safe-right: max(env(safe-area-inset-bottom, 0px), var(--safe-bottom, 0px)); --yan-safe-bottom: max(env(safe-area-inset-left, 0px), var(--safe-left, 0px)); --yan-safe-left: max(env(safe-area-inset-top, 0px), var(--safe-top, 0px)); top: 0 !important; left: var(--yan-viewport-width, 100lvw) !important; transform: rotate(90deg) !important; } html:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4).yan-portrait-canvas:not(.yan-windowed):not(.mini-window):not(.yan-native-landscape-page):not(.ow-portrait-rotate) body, html:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4).yan-portrait-canvas:not(.yan-windowed):not(.mini-window):not(.yan-native-landscape-page):not(.ow-portrait-rotate) #device { width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important; } html:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4).yan-portrait-canvas:not(.yan-windowed):not(.mini-window):not(.yan-native-landscape-page):not(.ow-portrait-rotate) #desktop { min-height: 100% !important; } /* ------------------------------------------------------------------------- * Desktop dock * ---------------------------------------------------------------------- */ html:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4):not(.keyboard-active) body:not(.layer-open):not(.wechat-active) #device .bottom-nav:not(.keyboard-open) { height: var(--yan-effective-dock-height) !important; bottom: calc(var(--yan-safe-bottom) + 40px + var(--yan-effective-bottom-nav-offset)) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .desktop-page-dots { /* Page position belongs in the free strip below the floating dock. */ bottom: calc(var(--yan-safe-bottom) + 8px) !important; } /* Stable compact-height policy; unlike a max-height media query this does not switch on merely because a software keyboard opened. */ html:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4).yan-compact-height { --yan-effective-dock-height: min(var(--dock-height, 70px), 60px); } html:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4).yan-compact-height:not(.keyboard-active) body:not(.layer-open):not(.wechat-active) #device .bottom-nav:not(.keyboard-open) { bottom: calc(var(--yan-safe-bottom) + 16px + var(--yan-effective-bottom-nav-offset)) !important; } html:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4).yan-compact-height .desktop-page-dots { bottom: calc(var(--yan-safe-bottom) + 1px) !important; } html:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4).yan-compact-height .bottom-nav .bottom-nav-item { min-width: 44px; min-height: 44px; justify-content: center; } html:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4).yan-compact-height .bottom-nav .dock-icon { width: min(var(--dock-icon-size, 44px), 42px) !important; height: min(var(--dock-icon-size, 44px), 42px) !important; } /* ------------------------------------------------------------------------- * Main application tab bars and their scroll reservations * ---------------------------------------------------------------------- */ /* WeChat uses a floating pill, not a full-width edge bar. */ :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) body:not(.theme-wechat) #device #layer-wechat > .wx-tab-bar { bottom: calc(20px + var(--yan-safe-bottom)) !important; height: 56px !important; padding-bottom: 0 !important; box-sizing: border-box !important; } /* WeChat theme is an attached full-width bar, including on iOS PWA where ios-perf.css otherwise has enough specificity to restore the floating pill. */ :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) body.theme-wechat #device #layer-wechat > .wx-tab-bar { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; max-width: none !important; height: var(--yan-wechat-tabbar-height) !important; margin: 0 !important; padding: 0 0 var(--yan-wechat-nav-bottom-inset) !important; border-radius: 0 !important; transform: none !important; box-sizing: border-box !important; align-items: center !important; } /* The parent owns the non-interactive safe/browser strip. The actual tab hit target is always a complete 56px row wholly above that strip. */ html:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4).is-ios body.theme-wechat #device #layer-wechat > .wx-tab-bar .nav-tab { height: 56px !important; min-height: 44px !important; padding: 4px 0 3px !important; margin: 0 !important; position: relative !important; box-sizing: border-box !important; pointer-events: auto !important; touch-action: manipulation; } /* Keep the bar background attached to the screen edge, but lift only its visible icon/label group. The full 56px nav-tab remains the hit target. */ html:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4).is-ios body.theme-wechat #device #layer-wechat > .wx-tab-bar .nav-tab::before, html:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4).is-ios body.theme-wechat #device #layer-wechat > .wx-tab-bar .nav-tab > span { transform: translateY(calc(0px - var(--yan-wechat-tab-content-lift))) !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) #device #layer-wechat #tab-moments #moments-feed, :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) #device #layer-wechat #tab-me > .scroll-y, :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) #device #layer-wechat #tab-discover > .scroll-y, :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) #device #layer-wechat #tab-contacts #contact-list, :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) #device #layer-wechat #tab-chats > .scroll-y { padding-bottom: calc(90px + var(--yan-safe-bottom)) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) body.theme-wechat #device #layer-wechat #tab-moments #moments-feed, :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) body.theme-wechat #device #layer-wechat #tab-me > .scroll-y, :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) body.theme-wechat #device #layer-wechat #tab-discover > .scroll-y, :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) body.theme-wechat #device #layer-wechat #tab-contacts #contact-list, :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) body.theme-wechat #device #layer-wechat #tab-chats > .scroll-y { padding-bottom: calc(12px + var(--yan-wechat-tabbar-height)) !important; } /* Preserve the intentionally higher PWA pill while reserving its real space. */ html:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4).is-ios.is-pwa:not(.keyboard-active) body:not(.theme-wechat):not(.layer-open) #device #layer-wechat > .wx-tab-bar { bottom: calc(52px + var(--yan-safe-bottom)) !important; height: 56px !important; padding-bottom: 0 !important; } html:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4).is-ios.is-pwa body:not(.theme-wechat) #device #layer-wechat #tab-moments #moments-feed, html:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4).is-ios.is-pwa body:not(.theme-wechat) #device #layer-wechat #tab-me > .scroll-y, html:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4).is-ios.is-pwa body:not(.theme-wechat) #device #layer-wechat #tab-discover > .scroll-y, html:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4).is-ios.is-pwa body:not(.theme-wechat) #device #layer-wechat #tab-contacts #contact-list, html:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4).is-ios.is-pwa body:not(.theme-wechat) #device #layer-wechat #tab-chats > .scroll-y { padding-bottom: calc(122px + var(--yan-safe-bottom)) !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) #device #layer-forum .forum-bottom-nav { height: calc(50px + var(--yan-safe-bottom)) !important; padding-right: var(--yan-safe-right) !important; padding-bottom: var(--yan-safe-bottom) !important; padding-left: var(--yan-safe-left) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) #device #layer-forum .forum-bottom-nav.fx-bottom-nav { height: calc(53px + var(--yan-safe-bottom)) !important; padding: 0 var(--yan-safe-right) var(--yan-safe-bottom) var(--yan-safe-left) !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) #device #layer-study { --yan-study-nav-height: calc(66px + var(--yan-safe-bottom)); } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) #device #layer-study .study-bottom-nav { height: var(--yan-study-nav-height) !important; padding: 8px var(--yan-safe-right) calc(8px + var(--yan-safe-bottom)) var(--yan-safe-left) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) #device #layer-study .study-tab { padding-bottom: var(--yan-study-nav-height) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) #device #layer-shop .shop-bottom-tabs { height: calc(56px + var(--yan-safe-bottom)) !important; padding-right: var(--yan-safe-right) !important; padding-bottom: var(--yan-safe-bottom) !important; padding-left: var(--yan-safe-left) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) #device #layer-shop .shop-tab-content { bottom: calc(56px + var(--yan-safe-bottom)) !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) #device #layer-paopao .pp-bottom-nav { padding-right: var(--yan-safe-right) !important; padding-bottom: calc(6px + var(--yan-safe-bottom)) !important; padding-left: var(--yan-safe-left) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) #device #layer-paopao .pp-app .pp-bottom-nav { padding: 8px var(--yan-safe-right) calc(10px + var(--yan-safe-bottom)) var(--yan-safe-left) !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) #device #layer-fanfic .ff-bottom-bar2 { padding-right: var(--yan-safe-right) !important; padding-bottom: calc(6px + var(--yan-safe-bottom)) !important; padding-left: var(--yan-safe-left) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) #device #layer-fanfic .ff-tab-bar { padding-right: var(--yan-safe-right) !important; padding-bottom: var(--yan-safe-bottom) !important; padding-left: var(--yan-safe-left) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) #device #layer-couple .cl-tab-bar { padding-right: var(--yan-safe-right) !important; padding-bottom: calc(2px + var(--yan-safe-bottom)) !important; padding-left: var(--yan-safe-left) !important; box-sizing: border-box !important; } /* ------------------------------------------------------------------------- * Chat, input and action bars * ---------------------------------------------------------------------- */ /* iOS browser chat never switches coordinate systems when focus changes. VisualViewport writes one keyboard inset on the layer; PWA and Capacitor keep their existing native paths. */ html:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4).is-ios.is-browser:not(.is-capacitor) body.theme-wechat #device #layer-chat.show { position: absolute !important; inset: 0 !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; padding-bottom: var(--yan-chat-keyboard-inset) !important; box-sizing: border-box !important; } /* iOS web/Safari: #device is the single viewport owner. Keeping the standalone offline layer position:fixed makes Safari lay it out against the browser viewport instead of #device's dynamic 100dvh box, which can push the last flex row below the visible bottom toolbar. */ html:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4).is-ios.is-browser:not(.is-ios-chrome):not(.is-capacitor):not(.keyboard-active) body #device #layer-offline-mode.show { position: absolute !important; inset: 0 !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; } /* The offline page can end in one of three mutually exclusive controls: input, expanded tools, or batch actions. A final flex spacer owns the Home-indicator inset once, so whichever row is visible remains above it without double-counting safe padding on the other rows. */ html:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4).is-ios.is-browser:not(.is-ios-chrome):not(.is-capacitor):not(.keyboard-active) body #device #layer-offline-mode::after { content: "" !important; display: block !important; flex: 0 0 var(--yan-safe-bottom) !important; width: 100% !important; min-height: var(--yan-safe-bottom) !important; background: var(--offline-bar-bg, #ffffff) !important; pointer-events: none !important; } html:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4).is-ios.is-browser:not(.is-ios-chrome):not(.is-capacitor):not(.keyboard-active) body.theme-dark #device #layer-offline-mode::after { background: var(--dk-bg-elevated, #1a1a1d) !important; } html:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4).is-ios.is-browser:not(.is-ios-chrome):not(.is-capacitor):not(.keyboard-active) body #device #layer-offline-mode > .offline-input-bar { padding-bottom: 10px !important; } html:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4).is-ios.is-browser:not(.is-ios-chrome):not(.is-capacitor):not(.keyboard-active) body #device #layer-offline-mode > .offline-toolbar, html:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4).is-ios.is-browser:not(.is-ios-chrome):not(.is-capacitor):not(.keyboard-active) body #device #layer-offline-mode > .offline-batch-bar { flex-shrink: 0 !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) #device #layer-chat > .input-bar, :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) #device #layer-chat .input-bar, :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) #device #layer-chat #chat-input-bar { padding-left: calc(12px + var(--yan-safe-left)) !important; padding-right: calc(12px + var(--yan-safe-right)) !important; padding-bottom: calc(8px + var(--yan-safe-bottom)) !important; box-sizing: border-box !important; /* Safe padding must snap when the keyboard closes; only the bar's translate animation may interpolate. */ transition-property: transform !important; } /* The WeChat composer keeps one flexible content row. Compacting only its vertical padding lowers the closed bar without clipping quote previews or a textarea that grows to multiple lines. */ html:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4).is-ios.is-browser:not(.is-capacitor) body.theme-wechat #device #layer-chat #chat-input-bar { padding-top: var(--yan-wechat-bottom-gap) !important; padding-bottom: var(--yan-wechat-composer-bottom-inset) !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .offline-input-bar { padding-left: calc(10px + var(--yan-safe-left)) !important; padding-right: calc(12px + var(--yan-safe-right)) !important; padding-bottom: calc(10px + var(--yan-safe-bottom)) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .ext-menu-panel { padding-left: calc(20px + var(--yan-safe-left)) !important; padding-right: calc(20px + var(--yan-safe-right)) !important; padding-bottom: calc(12px + var(--yan-safe-bottom)) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .fake-input-bar { height: calc(50px + var(--yan-safe-bottom)) !important; padding: 0 calc(10px + var(--yan-safe-right)) var(--yan-safe-bottom) calc(10px + var(--yan-safe-left)) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .sms-input-bar { padding-left: calc(16px + var(--yan-safe-left)) !important; padding-right: calc(16px + var(--yan-safe-right)) !important; padding-bottom: calc(10px + var(--yan-safe-bottom)) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .sms-modal { /* This card is centered inside an overlay which already has a 20px guard. */ padding-bottom: 20px !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .st-input-bar { padding-left: calc(16px + var(--yan-safe-left)) !important; padding-right: calc(16px + var(--yan-safe-right)) !important; padding-bottom: calc(12px + var(--yan-safe-bottom)) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .guess-word-input-bar, :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .vg-chat-input-bar { padding-bottom: calc(12px + var(--yan-safe-bottom)) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .guess-word-input-bar { padding-left: calc(14px + var(--yan-safe-left)) !important; padding-right: calc(14px + var(--yan-safe-right)) !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .vg-chat-input-bar { padding-left: calc(16px + var(--yan-safe-left)) !important; padding-right: calc(16px + var(--yan-safe-right)) !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .horror-forum-input-bar { padding-left: calc(12px + var(--yan-safe-left)) !important; padding-right: calc(12px + var(--yan-safe-right)) !important; padding-bottom: calc(10px + var(--yan-safe-bottom)) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .pcm-input-row, :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .tt-pv-bar { padding-bottom: calc(12px + var(--yan-safe-bottom)) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .pcm-input-row { padding-left: calc(16px + var(--yan-safe-left)) !important; padding-right: calc(16px + var(--yan-safe-right)) !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .tt-pv-bar { padding-left: calc(14px + var(--yan-safe-left)) !important; padding-right: calc(14px + var(--yan-safe-right)) !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .settings-sheet-footer { padding-bottom: calc(20px + var(--yan-safe-bottom)) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .offline-edit-modal-btns { /* The complete edit card is centered and guarded by its mask. */ padding-bottom: 0 !important; box-sizing: border-box !important; } /* Forum detail/DM bars become fixed on iOS. Match ios-perf.css specificity and reserve the actual fixed-bar height in the corresponding content. */ :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .forum-detail-actions { padding-left: calc(8px + var(--yan-safe-left)) !important; padding-right: calc(8px + var(--yan-safe-right)) !important; padding-bottom: calc(6px + var(--yan-safe-bottom)) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .forum-dm-input-bar { padding-left: calc(15px + var(--yan-safe-left)) !important; padding-right: calc(15px + var(--yan-safe-right)) !important; padding-bottom: calc(15px + var(--yan-safe-bottom)) !important; box-sizing: border-box !important; } html:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4).is-ios body #device #layer-forum-detail .forum-detail-actions { padding: 6px calc(8px + var(--yan-safe-right)) calc(6px + var(--yan-safe-bottom)) calc(8px + var(--yan-safe-left)) !important; } html:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4).is-ios body #device #layer-forum-detail #forum-detail-body { padding-bottom: calc(50px + var(--yan-safe-bottom)) !important; } html:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4).is-ios body #device #layer-forum-dm .forum-dm-input-bar { padding: 10px calc(15px + var(--yan-safe-right)) calc(15px + var(--yan-safe-bottom)) calc(15px + var(--yan-safe-left)) !important; } html:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4).is-ios body #device #layer-forum-dm #forum-dm-chat-body { padding-bottom: calc(62px + var(--yan-safe-bottom)) !important; } /* The study lecture input sits above (not inside) its bottom tab bar. */ :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) #device #layer-study .study-lecture-input-bar { bottom: var(--yan-study-nav-height) !important; padding: 8px calc(16px + var(--yan-safe-right)) 8px calc(16px + var(--yan-safe-left)) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .ff-read-bottom-bar { padding-right: var(--yan-safe-right) !important; padding-bottom: calc(10px + var(--yan-safe-bottom)) !important; padding-left: var(--yan-safe-left) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .ff-book-detail-actions { padding-bottom: var(--yan-safe-bottom) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .ff-book-detail-body { padding-bottom: calc(60px + var(--yan-safe-bottom)) !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .ff-reader-settings { padding-bottom: calc(16px + var(--yan-safe-bottom)) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .ff-reader-bottom-safe { height: var(--yan-safe-bottom) !important; } /* At the software-keyboard edge there is no Home-indicator inset. APK uses keyboard-active while moving these controls to the keyboard top; keep each component's original breathing room and retain only its lateral insets. */ html:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4).keyboard-active #device #layer-chat > .input-bar, html:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4).keyboard-active #device #layer-chat .input-bar, html:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4).keyboard-active #device #layer-chat #chat-input-bar { padding-bottom: 8px !important; transition: none !important; } /* #chat-input-bar is also a common user-theme target. Keep this explicit selector above any auto-prefixed custom declaration while the keyboard is up. */ html:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4).keyboard-active body #device #layer-chat #chat-input-bar.input-bar { padding-bottom: 8px !important; transition: none !important; } html:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4).keyboard-active .offline-input-bar, html:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4).keyboard-active .sms-input-bar, html:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4).keyboard-active .horror-forum-input-bar { padding-bottom: 10px !important; } html:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4).keyboard-active .st-input-bar, html:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4).keyboard-active .guess-word-input-bar, html:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4).keyboard-active .vg-chat-input-bar, html:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4).keyboard-active .pcm-input-row, html:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4).keyboard-active .tt-pv-bar { padding-bottom: 12px !important; } html:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4).is-ios.keyboard-active body #device #layer-forum-detail .forum-detail-actions { padding-bottom: 6px !important; } html:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4).is-ios.keyboard-active body #device #layer-forum-detail #forum-detail-body { padding-bottom: 50px !important; } html:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4).is-ios.keyboard-active body #device #layer-forum-dm .forum-dm-input-bar { padding-bottom: 15px !important; } html:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4).is-ios.keyboard-active body #device #layer-forum-dm #forum-dm-chat-body { padding-bottom: 62px !important; } /* Call controls are absolute: grow the control area so safe padding does not squeeze or overlap the 46px buttons. */ :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .vc-ptt-area, :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .vidcall-ptt-area { height: calc(70px + var(--yan-safe-bottom)) !important; padding-left: calc(20px + var(--yan-safe-left)) !important; padding-right: calc(20px + var(--yan-safe-right)) !important; padding-bottom: var(--yan-safe-bottom) !important; box-sizing: border-box !important; } /* Every element positioned from the call control strip must move by the same safe-area amount; otherwise the higher-z-index text field covers buttons. */ :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .vc-text-input-area { bottom: calc(84px + var(--yan-safe-bottom)) !important; left: calc(20px + var(--yan-safe-left)) !important; right: calc(20px + var(--yan-safe-right)) !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .vidcall-text-input-area { bottom: calc(80px + var(--yan-safe-bottom)) !important; left: calc(16px + var(--yan-safe-left)) !important; right: calc(16px + var(--yan-safe-right)) !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .vc-flow-area, :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .vidcall-flow-area { bottom: calc(140px + var(--yan-safe-bottom)) !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .vc-flow-area { left: calc(18px + var(--yan-safe-left)) !important; right: calc(18px + var(--yan-safe-right)) !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .vidcall-flow-area { left: calc(16px + var(--yan-safe-left)) !important; right: calc(16px + var(--yan-safe-right)) !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .vc-mic-wave { bottom: calc(220px + var(--yan-safe-bottom)) !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .vidcall-mic-wave { bottom: calc(215px + var(--yan-safe-bottom)) !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .vidcall-live-transcript { bottom: calc(200px + var(--yan-safe-bottom)) !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .vidcall-live2d-speaking { bottom: calc(70px + var(--yan-safe-bottom)) !important; } /* ------------------------------------------------------------------------- * Commerce, games and media edge controls * ---------------------------------------------------------------------- */ :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .shop-cart-footer { /* Sticky inside .shop-tab-content, which already ends above the safe tab. */ padding: 12px 16px !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) #mail-list { padding-bottom: calc(80px + var(--yan-safe-bottom)) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .mail-fab { bottom: calc(24px + var(--yan-safe-bottom)) !important; } /* Supervise is nested inside a study tab that already reserves the outer safe-area/navigation height. Its own tab and FAB use internal geometry. */ :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) #device #layer-study #supervise-content-embedded .sv-tabs { padding-bottom: 0 !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) #device #layer-study #supervise-content-embedded .sv-fab { bottom: 70px !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) #device #layer-study #supervise-content-embedded .sv-home > .sv-stats-row + .scroll-y { padding-bottom: 140px !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .ff-body { padding-bottom: calc(60px + var(--yan-safe-bottom)) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) #device #layer-fanfic .ff-body2 { padding-bottom: calc(120px + var(--yan-safe-bottom)) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .ff-fab { bottom: calc(20px + var(--yan-safe-bottom)) !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .fd-bottom-tabs { padding-bottom: calc(6px + var(--yan-safe-bottom)) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .fd-shop-cart-bar { height: calc(56px + var(--yan-safe-bottom)) !important; padding: 0 calc(12px + var(--yan-safe-right)) var(--yan-safe-bottom) calc(12px + var(--yan-safe-left)) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .fd-cart-popup-content { bottom: calc(56px + var(--yan-safe-bottom)) !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .fd-menu-sidebar, :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .fd-menu-content { padding-bottom: calc(76px + var(--yan-safe-bottom)) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .mv2-tabbar { height: calc(64px + var(--yan-safe-bottom)) !important; padding-right: var(--yan-safe-right) !important; padding-bottom: var(--yan-safe-bottom) !important; padding-left: var(--yan-safe-left) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .mv2-scroll { padding-bottom: calc(80px + var(--yan-safe-bottom)) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .sc-content-area { padding-bottom: calc(60px + var(--yan-safe-bottom)) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .sc-play-bar { padding-right: var(--yan-safe-right) !important; padding-bottom: calc(4px + var(--yan-safe-bottom)) !important; padding-left: var(--yan-safe-left) !important; box-sizing: border-box !important; } /* ------------------------------------------------------------------------- * Sheets, page footers and floating controls * ---------------------------------------------------------------------- */ /* Bottom sheets keep their original breathing room and add only the mapped screen insets. Centered cards/modals are deliberately excluded. */ :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .cl-add-overlay, :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .dating-settings-overlay, :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .fd-pay-overlay, :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .fd-settings-overlay, :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .live-stream-setup, :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .mv2-action-mask, :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .ff-create-menu-overlay, :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .sticker-picker-overlay, :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .report-plea-overlay, :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .touch-add-zone-modal, :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .touch-history-modal, :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .touch-settings-overlay, :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .merchant-msg-modal, :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .sh-modal { padding-right: var(--yan-safe-right) !important; padding-left: var(--yan-safe-left) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .choice-edit-panel, :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .choice-cat-edit-panel { padding: 24px calc(20px + var(--yan-safe-right)) calc(32px + var(--yan-safe-bottom)) calc(20px + var(--yan-safe-left)) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .cl-add-sheet { padding: 20px 16px calc(30px + var(--yan-safe-bottom)) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .couple-settings-sheet { padding: 20px calc(20px + var(--yan-safe-right)) calc(20px + var(--yan-safe-bottom)) calc(20px + var(--yan-safe-left)) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .dating-settings-sheet { padding: 24px 20px calc(30px + var(--yan-safe-bottom)) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .secret-settings-sheet { padding: 24px calc(20px + var(--yan-safe-right)) calc(30px + var(--yan-safe-bottom)) calc(20px + var(--yan-safe-left)) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) #listen-playlist-content { padding: 10px calc(15px + var(--yan-safe-right)) calc(10px + var(--yan-safe-bottom)) calc(15px + var(--yan-safe-left)) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .sc-settings-sheet { padding: 20px calc(16px + var(--yan-safe-right)) calc(30px + var(--yan-safe-bottom)) calc(16px + var(--yan-safe-left)) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .fd-pay-sheet, :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .fd-settings-sheet { padding: 20px 20px calc(20px + var(--yan-safe-bottom)) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .live-stream-setup-panel { padding: 20px 16px calc(30px + var(--yan-safe-bottom)) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .mv2-action-sheet { padding: 10px 12px calc(18px + var(--yan-safe-bottom)) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .mv2-editor-overlay { padding-right: max(16px, var(--yan-safe-right)) !important; padding-bottom: max(16px, var(--yan-safe-bottom)) !important; padding-left: max(16px, var(--yan-safe-left)) !important; } @media (max-width: 380px) { :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .mv2-editor-overlay { padding-right: max(8px, var(--yan-safe-right)) !important; padding-bottom: max(8px, var(--yan-safe-bottom)) !important; padding-left: max(8px, var(--yan-safe-left)) !important; } } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .anecdote-form { padding: 24px calc(20px + var(--yan-safe-right)) calc(32px + var(--yan-safe-bottom)) calc(20px + var(--yan-safe-left)) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .anecdote-timeline { padding-right: calc(16px + var(--yan-safe-right)) !important; padding-bottom: calc(92px + var(--yan-safe-bottom)) !important; padding-left: calc(40px + var(--yan-safe-left)) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .anecdote-add-btn { right: calc(20px + var(--yan-safe-right)) !important; bottom: calc(20px + var(--yan-safe-bottom)) !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .csn-menu { padding: 12px var(--yan-safe-right) var(--yan-safe-bottom) var(--yan-safe-left) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .ff-cmenu-panel { padding: 20px 16px calc(20px + var(--yan-safe-bottom)) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .book-reader-settings { padding: 16px calc(14px + var(--yan-safe-right)) calc(20px + var(--yan-safe-bottom)) calc(14px + var(--yan-safe-left)) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .sticker-picker { padding: 20px 20px calc(20px + var(--yan-safe-bottom)) !important; box-sizing: border-box !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .report-plea-panel { padding: 24px 20px calc(30px + var(--yan-safe-bottom)) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .touch-add-zone-sheet, :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .touch-settings-sheet { padding: 22px 18px calc(22px + var(--yan-safe-bottom)) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .touch-history-sheet { padding: 18px 18px calc(18px + var(--yan-safe-bottom)) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .merchant-msg-input-wrap { padding: 10px 16px calc(14px + var(--yan-safe-bottom)) !important; box-sizing: border-box !important; } /* At the software-keyboard edge there is no Home-indicator inset; retain the component's normal 14px gap and keep only the lateral screen insets. */ html:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4).keyboard-active .merchant-msg-input-wrap { padding: 10px 16px 14px !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .sh-detail-actions { padding: 12px 16px calc(12px + var(--yan-safe-bottom)) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .pp-hot-detail-panel { padding-bottom: var(--yan-safe-bottom) !important; box-sizing: border-box !important; scroll-padding-bottom: var(--yan-safe-bottom); } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .spirit-detail-footer { padding-bottom: max(36px, calc(12px + var(--yan-safe-bottom))) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .ow-locmgr-footer { padding-bottom: calc(12px + var(--yan-safe-bottom)) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .horror-phone-panel { padding-bottom: var(--yan-safe-bottom) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .live-room-header { padding-top: max(12px, var(--yan-safe-top)) !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .live-announcement, :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .live-fan-bar { top: calc(56px + var(--yan-safe-top)) !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .live-announcement + .live-fan-bar, :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .live-room:has(.live-announcement) .live-fan-bar { top: calc(84px + var(--yan-safe-top)) !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .live-content-flow { top: calc(108px + var(--yan-safe-top)) !important; bottom: calc(60px + var(--yan-safe-bottom)) !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .live-room:has(.live-announcement) .live-content-flow { top: calc(136px + var(--yan-safe-top)) !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .live-room:has(.live-fan-bar) .live-content-flow { top: calc(128px + var(--yan-safe-top)) !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .live-room:has(.live-announcement):has(.live-fan-bar) .live-content-flow { top: calc(148px + var(--yan-safe-top)) !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .live-room-toolbar { padding-left: calc(10px + var(--yan-safe-left)) !important; padding-right: calc(10px + var(--yan-safe-right)) !important; padding-bottom: calc(10px + var(--yan-safe-bottom)) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .live-like-float { bottom: calc(80px + var(--yan-safe-bottom)) !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .live-gift-panel { padding-bottom: calc(16px + var(--yan-safe-bottom)) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .live-rank-panel, :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .live-decor-panel { padding-bottom: calc(30px + var(--yan-safe-bottom)) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .live-recharge-confirm-area { padding-bottom: calc(20px + var(--yan-safe-bottom)) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .pp-wb-my-actions { bottom: 8px !important; } /* Default anchors for draggable/floating controls. Deliberately omit !important on draggable elements so their inline top/left/bottom:auto state continues to win after the user moves them. */ :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .chat-scroll-bottom-btn { right: calc(16px + var(--yan-safe-right)); bottom: calc(70px + var(--yan-safe-bottom)); } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) #global-music-player { right: var(--yan-safe-right) !important; bottom: calc(60px + var(--yan-safe-bottom)) !important; left: var(--yan-safe-left) !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .forum-fab-group { right: calc(16px + var(--yan-safe-right)) !important; bottom: 20px !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .forum-fab-group[style*="bottom:70px"], :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .forum-fab-group[style*="bottom: 70px"] { bottom: 70px !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .read-float-ball { right: calc(15px + var(--yan-safe-right)); bottom: calc(120px + var(--yan-safe-bottom)); } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .read-float-panel { right: calc(10px + var(--yan-safe-right)); bottom: calc(60px + var(--yan-safe-bottom)); } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .book-reader-mini { right: calc(12px + var(--yan-safe-right)); bottom: calc(70px + var(--yan-safe-bottom)); } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .pp-sticker-panel { right: var(--yan-safe-right) !important; bottom: calc(100px + var(--yan-safe-bottom)) !important; left: var(--yan-safe-left) !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) #device #layer-paopao .pp-sticker-tabs-bar { padding-bottom: var(--yan-safe-bottom) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) #sch-float-ball-wrap { bottom: calc(100px + var(--yan-safe-bottom)); left: calc(16px + var(--yan-safe-left)); } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .pv-toast { bottom: calc(80px + var(--yan-safe-bottom)) !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) #de-toolbar { bottom: calc(24px + var(--yan-safe-bottom)) !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .ow-script-fab { bottom: calc(24px + var(--yan-safe-bottom)) !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .pv-fab { bottom: calc(24px + var(--yan-safe-bottom)) !important; right: calc(16px + var(--yan-safe-right)) !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) #device #layer-penguin-video #pv-home-scroll { padding-bottom: var(--yan-safe-bottom) !important; box-sizing: border-box !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .sch-fab { bottom: calc(20px + var(--yan-safe-bottom)) !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .shop-fab-group { bottom: calc(80px + var(--yan-safe-bottom)) !important; } :root:not(#yan-rwd-guard-1):not(#yan-rwd-guard-2):not(#yan-rwd-guard-3):not(#yan-rwd-guard-4) .ff-fab2 { bottom: calc(70px + var(--yan-safe-bottom)) !important; right: calc(20px + var(--yan-safe-right)) !important; }