/* Keep the shared alert in one fixed position even if a legacy caller adds Animate.css classes. */
.alert-view[data-safeops-notification] {
    position: fixed;
    top: 104px;
    left: 50%;
    width: 400px;
    max-width: calc(100vw - 24px);
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    z-index: 1060;
    pointer-events: none;
    animation: none !important;
    -webkit-animation: none !important;
    transition: none;
    -webkit-transition: none;
}

.alert-view[data-safeops-notification] .media {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    white-space: normal;
    word-wrap: break-word;
    pointer-events: auto;
}

.alert-view[data-safeops-notification] .media-body {
    width: auto;
}

.alert-view[data-safeops-notification] .alertmsg {
    overflow-wrap: anywhere;
}

/* Keep modal feedback clear of the modal heading and controls. */
.alert-view[data-safeops-notification].safeops-notification-modal-placement {
    top: auto;
    bottom: 16px;
    left: auto;
    right: 16px;
    width: 400px;
    max-width: calc(100vw - 24px);
    transform: none;
    -webkit-transform: none;
}

@media (max-width: 767px) {
    .alert-view[data-safeops-notification].safeops-notification-modal-placement {
        right: 12px;
    }
}

.alert-view[data-safeops-notification] .media { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; }
.alert-view[data-safeops-notification] .notification-dismiss {
    position: static; order: 2; flex: 0 0 28px; margin: 0; border: 0; background: transparent;
    color: inherit; font-size: 24px; line-height: 24px; padding: 2px 5px; cursor: pointer;
}
.alert-view[data-safeops-notification] .notification-dismiss:focus { outline: 2px solid currentColor; }

/* The guide button shares the bottom-right corner with overlay feedback. */
body .bmd-btn-fab { z-index: 1030; }

.alert-view[data-safeops-notification] .media-body { flex: 1; min-width: 0; order: 1; }

/* Full-page feed pagination. */
.safeops-notification-sentinel { padding: 20px; text-align: center; color: #64748b; }
.safeops-notification-sentinel[aria-busy="true"] .safeops-notification-loading::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 8px; border: 2px solid #cbd5e1; border-top-color: #475569; border-radius: 50%; }

/* Compact bell history with readable mobile rows and persistent unread state. */
#gloabalElmNotif { max-height: min(520px, calc(100vh - 120px)); overflow-y: auto; overflow-x: hidden; width: 380px; max-width: calc(100vw - 24px); overscroll-behavior: contain; }
#gloabalElmNotif .safeops-notification-entry { width: 100%; float: none; }
.safeops-notification-entry { background: #fff; }
#gloabalElmNotif .safeops-notification-entry:hover,
#gloabalElmNotif .safeops-notification-entry:hover > a { background: #f5f7f9; }
.safeops-notification-entry.safeops-notification-unread { background: #eaf5ff; }
#gloabalElmNotif .safeops-notification-entry.safeops-notification-unread:hover,
#gloabalElmNotif .safeops-notification-entry.safeops-notification-unread:hover > a,
#gloabalElmNotif .safeops-notification-entry.safeops-notification-unread:focus-visible,
#gloabalElmNotif .safeops-notification-entry.safeops-notification-unread > a:focus-visible { background: #d9edff; }
.safeops-notification-entry:focus-within { outline: none; }
.safeops-notification-entry > a:focus { outline: none; }
.safeops-notification-entry > a:focus-visible { outline: 2px solid #007fa3; outline-offset: -2px; }
#gloabalElmNotif .safeops-notification-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; }
#gloabalElmNotif .media-left { flex: 0 0 36px; padding: 0; }
#gloabalElmNotif .safeops-notification-copy { flex: 1; min-width: 0; width: auto; overflow-wrap: anywhere; }
#gloabalElmNotif .safeops-notification-more { text-align: center; clear: both; }
#gloabalElmNotif .safeops-notification-actions { position: sticky; top: 0; z-index: 1; background: #fff; text-align: right; clear: both; }
#gloabalElmNotif .notif-footer { position: sticky; bottom: 0; z-index: 2; width: 100%; float: none; clear: both; background: #fff; border-top: 1px solid #dbe5ed; padding: 10px 12px; text-align: center; }
@media (max-width: 767px) { #gloabalElmNotif { position: fixed; top: 90px; right: 12px; left: auto; } }