.sfn-shelf {
    position: fixed;
    right: var(--sf-space-4);
    bottom: var(--sf-space-4);
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: var(--sf-space-2);
    max-width: min(24rem, calc(100vw - 2rem));
    pointer-events: none;
}

.sfn-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--sf-space-3);
    padding: var(--sf-space-3) var(--sf-space-4);
    border: 1px solid var(--sf-color-border-strong);
    border-radius: var(--sf-radius-md);
    background: var(--sf-color-surface);
    color: var(--sf-color-text);
    box-shadow: var(--sf-shadow-lg);
    font-size: .875rem;
    line-height: 1.4;
    opacity: 0;
    transform: translateY(.5rem);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: auto;
}

.sfn-notice.is-here {
    opacity: 1;
    transform: translateY(0);
}

.sfn-notice.is-going {
    opacity: 0;
    transform: translateY(.5rem);
}

.sfn-notice.is-warning {
    border-color: var(--sf-color-warning-border);
    background: var(--sf-color-warning-soft);
    color: var(--sf-color-warning-ink);
}

.sfn-notice.is-danger {
    border-color: var(--sf-color-danger);
    background: var(--sf-color-danger-soft);
    color: var(--sf-color-danger-ink);
}

.sfn-notice.is-success {
    border-color: var(--sf-color-success);
    background: var(--sf-color-success-soft);
    color: var(--sf-color-success-ink);
}

.sfn-text {
    flex: 1 1 auto;
}

.sfn-close {
    flex: none;
    border: 0;
    background: none;
    padding: 0;
    line-height: 1;
    font-size: 1.125rem;
    color: inherit;
    opacity: .6;
    cursor: pointer;
}

.sfn-close:hover {
    opacity: 1;
}

.sfn-close:focus-visible {
    outline: none;
    box-shadow: var(--sf-shadow-focus);
    border-radius: var(--sf-radius-sm);
}

.sfn-scrim {
    position: fixed;
    inset: 0;
    z-index: 1090;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sf-space-4);
    background: var(--sf-color-scrim);
    opacity: 0;
    transition: opacity .15s ease;
}

.sfn-scrim.is-here {
    opacity: 1;
}

.sfn-ask {
    width: min(26rem, 100%);
    padding: var(--sf-space-5);
    border: 1px solid var(--sf-color-border);
    border-radius: var(--sf-radius-lg);
    background: var(--sf-color-surface);
    color: var(--sf-color-text);
    box-shadow: var(--sf-shadow-xl);
}

.sfn-ask-title {
    margin: 0 0 var(--sf-space-2);
    font-size: 1.0625rem;
    font-weight: 600;
}

.sfn-ask-body {
    margin: 0 0 var(--sf-space-4);
    color: var(--sf-color-text-secondary);
    font-size: .875rem;
    line-height: 1.5;
}

.sfn-ask-label {
    display: block;
    margin: 0 0 var(--sf-space-4);
    color: var(--sf-color-text-secondary);
    font-size: .8125rem;
    font-weight: 600;
}

.sfn-ask-field {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-top: var(--sf-space-2);
    padding: .4375rem .625rem;
    border: 1px solid var(--sf-color-border-strong);
    border-radius: var(--sf-radius-md);
    background: var(--sf-color-surface);
    color: var(--sf-color-text);
    font-size: .875rem;
    font-weight: 400;
}

.sfn-ask-field:focus-visible {
    outline: none;
    border-color: var(--sf-color-primary);
    box-shadow: var(--sf-shadow-focus);
}

.sfn-ask-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--sf-space-2);
}

.sfn-btn {
    border: 1px solid transparent;
    border-radius: var(--sf-radius-md);
    padding: .4375rem .875rem;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
}

.sfn-btn:focus-visible {
    outline: none;
    box-shadow: var(--sf-shadow-focus);
}

.sfn-btn-ghost {
    border-color: var(--sf-color-border-strong);
    background: var(--sf-color-surface);
    color: var(--sf-color-text-secondary);
}

.sfn-btn-primary {
    background: var(--sf-color-primary);
    color: var(--sf-color-on-primary);
}

.sfn-btn-danger {
    background: var(--sf-color-danger);
    color: var(--sf-color-on-primary);
}

[data-bs-theme="dark"] .sfn-btn-danger {
    background: var(--sf-color-danger-soft);
    border-color: var(--sf-color-danger);
    color: var(--sf-color-danger-ink);
}

@media (max-width: 30rem) {
    .sfn-shelf {
        left: var(--sf-space-3);
        right: var(--sf-space-3);
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sfn-notice,
    .sfn-scrim {
        transition: none;
    }
}