:root {
    /* Visible sticky bar ≈ padding + button row + safe area */
    --config-save-sticky-height: 4.25rem;
    /* Reserve at bottom so long General pages clear the sticky save bar when scrolled */
    --config-general-scroll-padding-bottom: var(--config-save-sticky-reserve);
    --config-save-sticky-reserve: calc(
        var(--config-save-sticky-height) + 1.5rem + env(safe-area-inset-bottom, 0px)
    );
}

/* Keep tab content clear of the fixed save footer when it slides in */
#config-main.config-main {
    padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px));
}

body.config-is-dirty #config-main.config-main {
    padding-bottom: var(--config-save-sticky-reserve);
}

html:has(#config-save-sticky) {
    scroll-padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px));
}

html:has(#config-save-sticky) body.config-is-dirty {
    scroll-padding-bottom: var(--config-save-sticky-reserve);
}

/* Bookmarks split-view — shorten when the sticky save bar can appear */
body.config-is-dirty .bookmarks-splitview {
    grid-template-rows: minmax(
        calc(100vh - 180px - var(--config-save-sticky-height) - env(safe-area-inset-bottom, 0px)),
        max-content
    );
}

body.config-is-dirty .bookmark-detail-form {
    padding-bottom: calc(var(--config-save-sticky-height) + 0.75rem);
}

.config-save-sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 800;
    padding: 0.65rem 1rem calc(0.65rem + env(safe-area-inset-bottom, 0px));
    background-color: var(--background-secondary);
    background-image: none;
    border-top: 1px solid var(--border-primary);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: translateY(110%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.22s ease, opacity 0.22s ease;
    isolation: isolate;
}

body.config-is-dirty .config-save-sticky.is-scroll-active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.config-save-sticky-inner {
    max-width: min(88%, 1600px);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.config-save-sticky-hint {
    font-size: calc(var(--font-size-text) * 0.9);
    font-family: var(--font-family-main);
}

/* hint dot + color: config-unsaved-state.css */

.config-save-sticky-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Match header save — solid surface on sticky footer */
.config-save-sticky-actions .btn.btn-success {
    background: var(--background-primary);
}

@media (max-width: 1024px) {
    body.config-is-dirty .bookmarks-splitview {
        margin-bottom: var(--config-save-sticky-reserve);
    }
}