/* Settings dialog and in-page banners. */

.settings {
    border: var(--panel-border-w) solid var(--panel-border-c);
    border-radius: var(--r-2xl);
    background: var(--panel);
    color: var(--text);
    padding: var(--pad-panel);
    width: min(520px, 92vw);
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: var(--shadow-pop);
}

.settings::backdrop {
    background: var(--scrim);
}

.settings-row {
    margin: var(--gap) 0;
}


.settings-footer {
    margin-top: var(--gap-lg);
    padding-top: var(--gap);
    border-top: var(--divider-w) solid var(--border-soft);
}


.banners {
    position: fixed;
    right: var(--gap-lg);
    bottom: var(--gap-lg);
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    z-index: 10;
    max-width: min(360px, 90vw);
}

.banner {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    border-radius: var(--r-lg);
    border: var(--panel-border-w) solid var(--panel-border-c);
    background: var(--elevated);
    box-shadow: var(--shadow-pop);
    cursor: pointer;
    animation: banner-in var(--t) var(--t-swift);
}

.banner strong {
    color: var(--primary);
}

@keyframes banner-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}