:root {
    --copp-floating-edge: 28px;
    --copp-floating-bottom: var(--copp-floating-edge);
    --copp-floating-right: var(--copp-floating-edge);
    --copp-chat-launcher-size: 56px;
    --copp-floating-gap: 24px;
}

/*
 * The AI launcher and the InstantCMS scroll-to-top control use separate,
 * deterministic slots. This file is loaded after the theme and support-chat
 * styles, so a late theme rule cannot put both controls in the same corner.
 */
html body > [data-copp-chat-widget="1"],
html body > [id^="copp-chat-widget-"] {
    bottom: calc(var(--copp-floating-bottom) + env(safe-area-inset-bottom)) !important;
    left: auto !important;
    right: var(--copp-floating-right) !important;
    z-index: 1045 !important;
}

html body > [data-copp-chat-widget="1"] .copp-chat-button,
html body > [id^="copp-chat-widget-"] .copp-chat-button {
    width: var(--copp-chat-launcher-size) !important;
    height: var(--copp-chat-launcher-size) !important;
}

html body #scroll-top {
    bottom: calc(
        var(--copp-floating-bottom) +
        var(--copp-chat-launcher-size) +
        var(--copp-floating-gap) +
        env(safe-area-inset-bottom)
    ) !important;
    right: var(--copp-floating-right) !important;
    z-index: 1038 !important;
}

@media (max-width: 560px) {
    :root {
        /* The mobile navigation occupies the bottom 60px of the viewport. */
        --copp-floating-bottom: 76px;
        --copp-floating-right: 16px;
        --copp-chat-launcher-size: 50px;
        --copp-floating-gap: 24px;
    }
}