/* Shared notification lifecycle; Idara presentation only. */
.notification-setup-panel[hidden],
.notification-setup-banner[hidden],
[data-notification-help][hidden],
[data-notification-enable-action][hidden] { display: none !important; }
.notification-setup-panel {
    position: fixed;
    inset-inline-end: 1rem;
    bottom: 1rem;
    z-index: 1030;
    width: min(27rem, calc(100vw - 2rem));
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    border: 1px solid #e1e7eb;
    border-radius: 1rem;
    box-shadow: 0 12px 40px rgb(30 50 70 / 14%);
}
.notification-setup-banner {
    border: 1px solid #dce6ea;
    border-inline-start: 4px solid var(--bs-primary, #527c87);
    border-radius: 1rem;
    background: linear-gradient(120deg, #f3f8fa, #fff 65%);
    box-shadow: 0 4px 16px rgb(30 50 70 / 4%);
}
.notification-setup-heading { display: flex; align-items: center; gap: .8rem; }
.notification-setup-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    flex: 0 0 2.8rem;
    border-radius: .85rem;
    color: var(--bs-primary, #527c87);
    background: #e5eff2;
}
.notification-setup-eyebrow { font-size: .65rem; font-weight: 700; letter-spacing: .06em; margin: 0 0 .25rem; color: #667887; }
.notification-setup-status { font-size: .8rem; font-weight: 600; color: #465d70; }
.notification-setup-help { background: #fff; border: 1px solid #e1e7eb; border-radius: .7rem; padding: .85rem; font-size: .8rem; line-height: 1.8; }
.notification-setup-help ol { padding-inline-start: 1.2rem; }
.notification-setup-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.notification-setup-actions .btn { white-space: normal; font-size: .8rem; }
@media (max-width: 575.98px) {
    .notification-setup-actions > .btn { flex: 1 1 auto; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; }
    .notification-setup-panel { bottom: max(.75rem, env(safe-area-inset-bottom)); inset-inline-end: .75rem; width: calc(100vw - 1.5rem); }
}

@media (min-width: 992px) {
    .notification-setup-banner .card-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 2rem; align-items: center; }
    .notification-setup-banner .notification-setup-heading,
    .notification-setup-banner .card-body > p { grid-column: 1; }
    .notification-setup-banner .notification-setup-actions { grid-column: 2; grid-row: 1 / span 3; justify-content: flex-end; max-width: 25rem; }
    .notification-setup-banner .notification-setup-help { grid-column: 1 / -1; }
}