.scroll-to-bottom-btn__icon { line-height: 1; font-size: 28px; font-weight: 700; transform: translateY(-2px); } .scroll-to-bottom-btn { position: absolute; bottom: calc(var(--toolbar-height, 78px) + var(--composer-height, 0px) + 18px + env(safe-area-inset-bottom)); margin: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; border: 0; background: transparent; background-image: none; color: #ffffff; box-shadow: none; display: inline-flex; align-items: center; justify-content: center; z-index: 38; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; width: 54px; height: 54px; right: 16px; border-radius: 50%; } /* Shared scroll-to-bottom control. */ /* ===== Общая кнопка прокрутки ленты вниз ===== */ .scroll-to-bottom-btn.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); } .scroll-to-bottom-btn:hover { background: transparent; box-shadow: none; filter: none; } .scroll-to-bottom-btn:active { background: rgba(0, 0, 0, 0.12); box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.58), inset 0 -1px 2px rgba(255, 255, 255, 0.08); transform: translateY(1px) scale(0.97); filter: none; } .scroll-to-bottom-btn:focus, .scroll-to-bottom-btn:focus-visible { background: var(--shine-action-blue); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 10px 26px rgba(var(--shine-action-blue-rgb), 0.34); } .scroll-to-bottom-btn:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.62); outline-offset: 2px; } .scroll-to-bottom-btn::before, .scroll-to-bottom-btn::after { background: transparent; background-image: none; border-color: transparent; box-shadow: none; } .app-shell--scroll-nested.keyboard-open .scroll-to-bottom-btn { bottom: calc(var(--keyboard-offset, 0px) + var(--composer-height, 0px) + 18px); } /* Общая круглая кнопка прокрутки. Её цвет задаётся --shine-action-blue. */