.animated-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    background: linear-gradient(to bottom, var(--surface) 0%, var(--surface-alt) 100%);
    pointer-events: none;

    &::before {
        content: '';
        position: absolute;
        inset: -50%;
        background: var(--gradient-primary);
        opacity: var(--opacity-5);
    }
}

.header-bar,
.footer-bar {
    position: fixed;
    left: 0;
    right: 0;
    height: calc(40px + var(--spacing-6) * 2);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur) saturate(180%);
    box-shadow: var(--shadow-sm);
    z-index: -1;
    pointer-events: none;
}

.header-bar {
    top: 0;
    border-bottom: var(--glass-border);
}

.footer-bar {
    bottom: 0;
    border-top: var(--glass-border);
    display: none;
}

@media (max-width: 639px) {
    .footer-bar {
        display: block;
    }
}