"Welcome Back" Message After Logging In

add_action( 'wp_login', function ( $login, $user ) {
    update_user_meta( $user->ID, 'wpide_welcome_back', 1 );
}, 10, 2 );

add_action( 'wp_footer', function () {
    $user_id = get_current_user_id();

    if ( ! $user_id || ! get_user_meta( $user_id, 'wpide_welcome_back', true ) ) {
        return;
    }

    delete_user_meta( $user_id, 'wpide_welcome_back' );
    $user = wp_get_current_user();
    $name = $user->first_name ? $user->first_name : $user->display_name;
    ?>
    <div id="wpide-welcome" role="status" style="position:fixed;left:16px;right:16px;bottom:16px;max-width:360px;margin-left:auto;padding:12px 44px 12px 16px;border-radius:8px;background:#1d2327;color:#fff;box-shadow:0 4px 16px rgba(0,0,0,.25);z-index:99999">
        <?php echo esc_html( sprintf( 'Welcome back, %s!', $name ) ); ?>
        <button type="button" aria-label="Dismiss" onclick="this.parentNode.remove()" style="position:absolute;top:6px;right:8px;background:none;border:0;color:inherit;font-size:20px;cursor:pointer">×</button>
    </div>
    <script>
    setTimeout(function () {
        var el = document.getElementById('wpide-welcome');
        if (!el) { return; }
        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) { el.remove(); return; }
        el.style.transition = 'opacity .4s';
        el.style.opacity = '0';
        setTimeout(function () { el.remove(); }, 400);
    }, 6000);
    </script>
    <?php
} );