html.pb-phone #sidebar .item.ui-draggable-handle,
html.pb-phone #sidebar .frame.ui-draggable-handle,
html.pb-coarse #sidebar .item.ui-draggable-handle,
html.pb-coarse #sidebar .frame.ui-draggable-handle {
    touch-action: pan-y;
}

html.pb-phone body .sp-container .sp-color,
html.pb-phone body .sp-container .sp-hue,
html.pb-phone body .sp-container .sp-alpha {
    touch-action: none;
}

@supports selector(:has(*)) {
    html.pb-phone {
        --pb-dock-h: 208px;
        --pb-dock-w: 0px;
    }

    html.pb-phone.pb-sheet-open:has(.tabs .content.pb-c-bg.visible) .pb-scrim {
        display: none;
    }

    html.pb-phone.pb-sheet-open #wrapper.pb-shell .tabs .content.pb-c-bg.visible {
        position: relative;
        grid-row: 3;
        grid-column: 1 / -1;
        align-self: end;
        bottom: auto;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        gap: 10px;
        height: auto;
        min-height: var(--pb-dock-h);
        max-height: 45dvh;
        padding: 24px 0 14px;
        overflow-x: hidden;
        overflow-y: auto;
    }

    html.pb-phone .pb-c-bg > * {
        flex: none;
    }

    html.pb-phone #sidebar .pb-c-bg > .title,
    html.pb-phone #sidebar .pb-c-bg > .pb-hint,
    html.pb-phone #sidebar .pb-c-bg > .pb-bgcap,
    html.pb-phone #sidebar .pb-c-bg .pb-bgc__h {
        display: none;
    }

    html.pb-phone #sidebar .pb-c-bg .pb-bgarea {
        margin: 0 56px 0 16px;
        padding: 2px;
    }

    html.pb-phone #sidebar .pb-c-bg .pb-bgarea button {
        min-height: 44px;
    }

    html.pb-phone #sidebar .pb-c-bg .pb-bgc,
    html.pb-phone #sidebar .pb-c-bg #backgrounds.pb-bgs {
        scrollbar-width: none;
    }

    html.pb-phone #sidebar .pb-c-bg .pb-bgc::-webkit-scrollbar,
    html.pb-phone #sidebar .pb-c-bg #backgrounds.pb-bgs::-webkit-scrollbar {
        display: none;
    }

    html.pb-phone body .sp-container.pb-sp--bg {
        position: fixed !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: calc(var(--pb-tab-h) + env(safe-area-inset-bottom, 0px) + var(--pb-bot)) !important;
        box-sizing: border-box;
        width: auto;
        height: var(--pb-dock-h);
        gap: 8px;
        padding: 14px 16px 12px;
        border-width: 0;
        border-radius: 22px 22px 0 0;
        box-shadow: 0 -16px 40px -16px rgba(13, 27, 34, .4);
    }

    html.pb-phone body .sp-container.pb-sp--bg .sp-palette-container {
        flex: none;
    }

    html.pb-phone body .sp-container.pb-sp--bg .sp-picker-container {
        display: grid;
        flex: 1 1 auto;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: minmax(0, 1fr) auto;
        gap: 10px;
        min-height: 0;
    }

    html.pb-phone body .sp-container.pb-sp--bg .sp-top {
        grid-column: 1 / -1;
        min-height: 0;
    }

    html.pb-phone body .sp-container.pb-sp--bg .sp-fill {
        padding-top: 0;
    }

    html.pb-phone body .sp-container.pb-sp--bg .sp-input-container,
    html.pb-phone body .sp-container.pb-sp--bg .sp-button-container {
        margin: 0;
    }

    html.pb-phone body .sp-container.pb-sp--bg .sp-button-container {
        width: auto;
    }

    html.pb-phone body .sp-container.pb-sp--bg .sp-input,
    html.pb-phone body .sp-container.pb-sp--bg .sp-cancel,
    html.pb-phone body .sp-container.pb-sp--bg .sp-choose {
        height: 44px;
    }

    html.pb-phone body .sp-container.pb-sp--bg .sp-cancel,
    html.pb-phone body .sp-container.pb-sp--bg .sp-choose {
        flex: none;
        padding: 0 14px;
    }

    @media not all and (orientation: landscape) and (max-height: 500px) {
        html.pb-phone.pb-sheet-open:has(.tabs .content.pb-c-bg.visible) #wrapper.pb-shell .ed__top .pricebar {
            visibility: hidden;
        }

        html.pb-phone #sidebar .pb-c-bg .pb-bgc {
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 0;
            padding: 2px 16px;
            overflow-x: auto;
            overscroll-behavior-x: contain;
        }

        html.pb-phone #sidebar .pb-c-bg .pb-bgc__sws,
        html.pb-phone #sidebar .pb-c-bg .pb-bgc__act {
            display: contents;
        }

        html.pb-phone #sidebar .pb-c-bg .pb-bgc__own,
        html.pb-phone #sidebar .pb-c-bg .pb-bgc__none {
            order: -1;
            flex: none;
            min-height: 44px;
            padding: 0 14px;
            white-space: nowrap;
        }

        html.pb-phone #sidebar .pb-c-bg .pb-bgc__sw {
            flex: none;
            width: 44px;
            height: 44px;
        }

        html.pb-phone #sidebar .pb-c-bg #backgrounds.pb-bgs {
            display: flex;
            gap: 8px;
            padding: 2px 16px;
            overflow-x: auto;
            overscroll-behavior-x: contain;
        }

        html.pb-phone #sidebar .pb-c-bg #backgrounds.pb-bgs .item {
            flex: none;
            width: 72px;
            height: 48px;
            min-height: 0;
            aspect-ratio: auto;
        }

        html.pb-phone #sidebar .pb-c-bg #backgrounds.pb-bgs .item.ui-draggable-handle {
            touch-action: auto;
        }
    }

    @media (orientation: landscape) and (max-height: 500px) {
        html.pb-phone {
            --pb-dock-h: 0px;
            --pb-dock-w: clamp(264px, 36vw, 320px);
        }

        html.pb-phone.pb-sheet-open:has(.tabs .content.pb-c-bg.visible) #wrapper.pb-shell #main-content {
            margin-right: var(--pb-dock-w);
        }

        html.pb-phone.pb-sheet-open #wrapper.pb-shell .tabs .content.pb-c-bg.visible {
            grid-row: 2;
            grid-column: 1 / -1;
            justify-self: end;
            align-self: stretch;
            display: block;
            width: var(--pb-dock-w);
            height: auto;
            min-height: 0;
            max-height: none;
            padding: 12px;
            overflow-y: auto;
            overscroll-behavior: contain;
            border-radius: 22px 0 0 22px;
            box-shadow: -12px 0 32px -16px rgba(13, 27, 34, .4);
        }

        html.pb-phone .tabs .content.pb-c-bg::before {
            display: none;
        }

        html.pb-phone #sidebar .pb-c-bg .pb-bgarea {
            margin: 0 44px 12px 0;
        }

        html.pb-phone #sidebar .pb-c-bg .pb-bgc {
            margin: 0 0 12px;
        }

        html.pb-phone #sidebar .pb-c-bg .pb-bgc__sws {
            grid-template-columns: repeat(5, 44px);
            justify-content: space-between;
            gap: 8px 0;
            margin: 0 0 10px;
        }

        html.pb-phone #sidebar .pb-c-bg .pb-bgc__sw {
            width: 44px;
            height: 44px;
        }

        html.pb-phone body .sp-container.pb-sp--bg {
            top: calc(var(--p55-hdr-top, 0px) + 44px) !important;
            left: auto !important;
            right: 0 !important;
            width: var(--pb-dock-w);
            height: auto;
            padding: 12px;
            border-radius: 22px 0 0 22px;
            box-shadow: -12px 0 32px -16px rgba(13, 27, 34, .4);
        }

        html.pb-phone body .sp-container.pb-sp--bg .sp-picker-container {
            grid-template-columns: minmax(0, 1fr);
            grid-template-rows: minmax(0, 1fr) auto auto;
        }

        html.pb-phone body .sp-container.pb-sp--bg .sp-cancel,
        html.pb-phone body .sp-container.pb-sp--bg .sp-choose {
            flex: 1 1 0;
        }
    }
}