@media (max-width: 767px) {
    body .notification-toast,
    body .student-notification-toast,
    body.student-portal .student-notification-toast,
    body .login-toast {
        box-sizing: border-box;
        top: max(12px, env(safe-area-inset-top), calc(var(--notification-header-bottom, 0px) + 10px));
        right: auto;
        bottom: auto;
        left: 50%;
        width: min(360px, calc(100% - 24px));
        gap: 10px;
        padding: 11px 12px;
        border-radius: 10px;
        box-shadow: 0 6px 24px rgba(13, 39, 67, .16);
        transform: translate(-50%, -8px);
        transition: transform .2s ease, opacity .2s ease;
    }

    body .notification-toast.visible,
    body .student-notification-toast.visible {
        transform: translate(-50%, 0);
    }

    body .login-toast {
        animation: mobile-toast-enter .2s ease both;
    }

    body .login-toast.dismissed {
        animation: none;
        transform: translate(-50%, -8px);
    }

    body :is(.notification-toast, .student-notification-toast, .login-toast) strong {
        margin-bottom: 3px;
        font-size: 13px;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    body :is(.notification-toast, .student-notification-toast, .login-toast) p {
        font-size: 12px;
        line-height: 1.45;
        overflow-wrap: anywhere;
    }

    body :is(.notification-toast, .student-notification-toast) :is(strong, p) {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    body :is(.notification-toast, .student-notification-toast) strong {
        -webkit-line-clamp: 2;
    }

    body :is(.notification-toast, .student-notification-toast, .login-toast) button {
        flex-shrink: 0;
        width: 32px;
        height: 32px;
        min-height: 32px;
        margin: 0;
        padding: 0;
        font-size: 20px;
    }
}

@keyframes mobile-toast-enter {
    from { opacity: 0; transform: translate(-50%, -8px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    body .notification-toast,
    body .student-notification-toast,
    body .login-toast {
        animation-duration: .01ms;
        transition-duration: .01ms;
    }
}