/* Shared user-surface header actions; loaded at each route tail before surface overrides. */
body[class*="user-body-"] .user-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    margin-right: max(6px, env(safe-area-inset-right));
}

body[class*="user-body-"] .user-header-actions .notification-settings-compact {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    background: transparent;
}

body[class*="user-body-"] .user-header-actions .notification-enable-button {
    width: 30px;
    height: 30px;
}

body[class*="user-body-"] .user-header-actions .notification-znode-icon,
body[class*="user-body-"] .user-header-actions .notification-bell-icon,
body[class*="user-body-"] .user-header-actions .notification-bell-icon svg {
    width: 15px;
    height: 15px;
}

body[class*="user-body-"] .user-header-actions .notification-bell-dot {
    top: 4px;
    right: 4px;
    width: 7px;
    height: 7px;
    border-width: 1px;
}

body[class*="user-body-"] .user-header-actions .notification-settings[data-state="active"] .notification-enable-button {
    border-color: rgba(80, 232, 150, 0.46) !important;
    color: rgba(179, 255, 207, 0.86) !important;
    background:
        radial-gradient(circle at 30% 18%, rgba(218, 255, 229, 0.28), transparent 32%),
        linear-gradient(145deg, rgba(28, 157, 100, 0.78) 0%, rgba(15, 123, 77, 0.72) 48%, rgba(7, 65, 39, 0.68) 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -10px 18px rgba(3, 42, 24, 0.16),
        0 10px 22px rgba(65, 89, 52, 0.14) !important;
}

body[class*="user-body-"] .user-header-actions .notification-settings.is-notification-active .notification-enable-button {
    border-color: rgba(80, 232, 150, 0.46) !important;
    color: rgba(179, 255, 207, 0.86) !important;
    background:
        radial-gradient(circle at 30% 18%, rgba(218, 255, 229, 0.28), transparent 32%),
        linear-gradient(145deg, rgba(28, 157, 100, 0.78) 0%, rgba(15, 123, 77, 0.72) 48%, rgba(7, 65, 39, 0.68) 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -10px 18px rgba(3, 42, 24, 0.16),
        0 10px 22px rgba(65, 89, 52, 0.14) !important;
}

body[class*="user-body-"] .user-header-actions .notification-settings[data-state="active"] .notification-bell-dot {
    background: #5fe091 !important;
    border-color: rgba(8, 43, 29, 0.92) !important;
    box-shadow:
        0 0 0 3px rgba(95, 224, 145, 0.16),
        0 0 16px rgba(95, 224, 145, 0.34) !important;
}

body[class*="user-body-"] .user-header-actions .notification-settings.is-notification-active .notification-bell-dot {
    background: #5fe091 !important;
    border-color: rgba(8, 43, 29, 0.92) !important;
    box-shadow:
        0 0 0 3px rgba(95, 224, 145, 0.16),
        0 0 16px rgba(95, 224, 145, 0.34) !important;
}

body[class*="user-body-"] .user-header-actions .notification-settings[data-state="active"] .notification-znode-icon,
body[class*="user-body-"] .user-header-actions .notification-settings.is-notification-active .notification-znode-icon {
    color: #66f0a2 !important;
    stroke: currentColor !important;
}