/*
 * #133: on phones the floating Accessibility menu button sat in the middle of the right edge
 * (top 50%, 70 x 70 px, an inline style repeated in five page templates) and covered the Show
 * password eye on Password Recovery, so a TalkBack user touching that spot opened the panel
 * instead. Below 768 px it now sits in the bottom-left corner, 56 px, with the panel opening
 * above it across the screen. Left, not right: the bottom-right corner holds the reCAPTCHA
 * badge on the public pages, which must stay visible; the page keeps room at the bottom so anything can be scrolled out
 * from under the button (WCAG 2.2, 2.4.11 Focus Not Obscured: scroll padding, technique C43).
 * !important is needed because the templates set the position inline. On phones the button no
 * longer moves when dragged; tapping it still opens the panel. Desktop is unchanged.
 */
@media (max-width: 767.98px) {
    #accessibilityToggle {
        top: auto !important;
        right: auto !important;
        left: calc(12px + env(safe-area-inset-left, 0px)) !important;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
        transform: none !important;
        width: 56px !important;
        height: 56px !important;
    }
    #accessibilityPanel {
        top: auto !important;
        left: calc(12px + env(safe-area-inset-left, 0px)) !important;
        right: calc(12px + env(safe-area-inset-right, 0px)) !important;
        bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
        transform: none !important;
        width: auto !important;
        max-height: calc(100vh - 110px);
        overflow-y: auto;
    }
    /* On the Messages screens the bottom of the window holds the message box and Send button,
       so the button sits above them there. */
    body:has(.message-layout) #accessibilityToggle {
        bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important;
    }
    body:has(.message-layout) #accessibilityPanel {
        bottom: calc(168px + env(safe-area-inset-bottom, 0px)) !important;
        max-height: calc(100vh - 200px);
    }
    /* Room at the bottom only on pages that show the button and scroll normally. The Messages
       screens are fixed to the window height with their own scrolling panes, where extra body
       padding would only add a blank strip. */
    html:has(#accessibilityToggle) {
        scroll-padding-bottom: 88px;
    }
    body:has(#accessibilityToggle):not(:has(.message-layout)) {
        padding-bottom: 80px;
    }
}